/*!
 * Theme styles
 * Extracted from template partials. Colour variables that depend on template
 * settings remain inline in partials/head.html.
 */

/* ==================================================================
   Base / layout
   ================================================================== */

   .card-item,.card-item .card-image img {
    transition: transform .12s ease, box-shadow .12s ease;
}
.bg-slate-800 {
    background: #171922 !important;
}

.card-item:hover {
    transform: translateY(-6px);
}
.cat-crates .card-image-main {
    height: 188px;
    max-width: none !important;
    right: 0;
}
.cat-monthly .card-image-main {
    height: 188px;
    max-width: none !important;
    right: 0;
}
div#copy:hover {
    opacity: .75;
}

div#copy {
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#copy p {
    font-size: 18px;
}

div#copy i {
    display: flex;
    align-items: center;
    top: -2px;
    position: relative;
}
.card-image {
    overflow: hidden !important;
}

.card-item:hover img {
    transform: scale(1.05);
}
        body {
            font-family: 'Minecraftia', sans-serif;
        }
        .font-primary, h1,h2,h3,h4,h5,h6 {
            font-family: 'Minecraft Title', sans-serif;
            font-weight: normal !important;
            text-transform: uppercase;
        }
        p.font-bold {
            font-weight: normal !important;
        }
        #hero .container {
            border: 2px solid #ffffff0f;
            height: 128px;
            padding: 20px;
        }

        #hero {
            margin-top: 10vh;
            position: relative;
            z-index:10;
        }

        #hero .logo {
            position: absolute;
            top: -56px;
        }
:root {
    --primary-color: #a847ff !important;
    --secondary-color: #007dec !important;
    --content-color: #191b26 !important;
    --background-color: #0f1117;
    --content-light-color: #272a39;
    --content-width: 1280px;
}
a.watermark {
    background: #171922 !important;
}
@property --theme-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(255, 43, 28);
}

body {
    background: #0d0f15;
    position: relative;
    min-height: 100vh;

    --theme-color: rgb(255, 43, 28);

    animation: colorCycle 10s linear infinite;
}
.animated-color {
    color: var(--theme-color);
}
.animated-bg {
    background-color: var(--theme-color);
}
.animated-border {
    border-color: var(--theme-color);
}
.animated-bg-soft {
    background-color: color-mix(
        in srgb,
        var(--theme-color) 15%,
        transparent
    );
}
.animated-glow {
    box-shadow:
        0 0 20px color-mix(
            in srgb,
            var(--theme-color) 30%,
            transparent
        );
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background: radial-gradient(
        ellipse 30% 18% at 50% 8%,
        color-mix(in srgb, var(--theme-color) 20%, transparent) 0%,
        color-mix(in srgb, var(--theme-color) 12%, transparent) 30%,
        color-mix(in srgb, var(--theme-color) 5%, transparent) 55%,
        transparent 75%
    );
}
.countdown-label {
    border: none !important;
}
.card-image {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    overflow: hidden;
}
.cat-wands {
    box-shadow: 0px 0px 0 #532182;
}
.cat-wands:hover {
    box-shadow: 0px 10px 0 #532182;
}
.cat-bundles {
    box-shadow: 0px 0px 0 #9b1112;
}
.cat-bundles:hover {
    box-shadow: 0px 10px 0 #9b1112;
}
.cat-monthly {
    box-shadow: 0px 0 0 #338012;
}
.cat-monthly:hover {
    box-shadow: 0px 10px 0 #338012;
}
.cat-crates:hover {
    box-shadow: 0px 10px 0 #0c4a80;
}
.cat-crates {
    box-shadow: 0px 0 0 #0c4a80;
}
.cat-ranks:hover {
    box-shadow: 0px 10px 0 #b77215;
}
.cat-ranks {
    box-shadow: 0px 0 0 #b77215;
}
.cat-ranks {
    overflow: hidden;
}
.cat-ranks .card-image-main {
    top:0;
}
.card-image-main {
    position: absolute;
    z-index: 2;
    bottom: 0;
}
.card-inner .card-title {
    max-width: 286px;
}
.cat-monthly .card-image {
    bottom: 0;
}
.card-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.card-image-main {
    position: absolute;
    z-index: 2;
}
.card-inner {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.hero-item i {
    text-shadow: 3px 3px 0px #00000040 !important;
}
.copy-ip {
    color: var(--theme-color);
}

@keyframes colorCycle {
    0% {
        --theme-color: rgb(255, 43, 28);
    }

    20% {
        --theme-color: rgb(255, 210, 28);
    }

    40% {
        --theme-color: rgb(104, 229, 43);
    }

    60% {
        --theme-color: rgb(32, 191, 255);
    }

    80% {
        --theme-color: rgb(169, 76, 255);
    }

    100% {
        --theme-color: rgb(255, 43, 28);
    }
}
#pixel-particles {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    max-width: 100%;
    height: 300px;

    display: block;
    pointer-events: none;
    z-index: 0;

    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 65%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 65%,
        transparent 100%
    );
}
.card-item {
    position: relative;
    min-height: 182px;
}
.cat-bundles {
    background: #f93435;
}

.cat-wands {
    background: #a855f7;
}

.cat-ranks {
    background: #fcc029;
}

.cat-crates {
    background: #1fa2ff;
}

.cat-monthly {
    background: #6ee03c;
}
.text-neutral-300 {
    color: #9ba4bb;
}
.countdown-label {
    background: #fff;
    color: #111;
    padding: 5px 7px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    border: 2px solid #111;
    transform: rotate(6deg);
    box-shadow: 2px 6px 0 rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    margin-top: -16px;
    margin-right: -8px;
}
.countdown-value {
    display: block;
}
.countdown-label {
    position: absolute;
    top: 5px;
    right: 0;
    font-size: 26px;
}
.card-title {
    text-shadow: 3px 3px 0px #00000040 !important;
}
.btn-shine {
    transition: all 150ms ease;
}
.btn-shine:hover {
    --tw-translate-y: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 1 !important;
    box-shadow: inset 0px -5px 0px #00000052;
}
.btn-shine {   
    font-family: 'Minecraft Title', sans-serif;
    font-weight: normal !important;
    text-transform: uppercase;
    text-shadow: 3px 3px 0px #00000040 !important;
    box-shadow: inset 0px 0px 0px #00000000;
}
.bg-content-light.btn-shine:hover {
    background: #3b4059;
}

/* ==================================================================
   Announcement banner
   ================================================================== */

.announcement {
    position: relative;
    isolation: isolate;
    border: 2px solid color-mix(in srgb, var(--theme-color) 45%, transparent);
    background:
        radial-gradient(
            90% 180% at 0% 50%,
            color-mix(in srgb, var(--theme-color) 24%, transparent) 0%,
            transparent 65%
        ),
        var(--content-color);
    box-shadow:
        0 0 24px color-mix(in srgb, var(--theme-color) 18%, transparent),
        0 10px 30px rgb(0 0 0 / 35%);
}
.announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: .5;
    background: repeating-linear-gradient(
        -45deg,
        rgb(255 255 255 / 2.5%) 0 2px,
        transparent 2px 14px
    );
}
.announcement-unit {
    min-width: 3.75rem;
    background: rgb(0 0 0 / 22%);
    border: 1px solid rgb(255 255 255 / 6%);
}

.announcement-icon {
    background: color-mix(in srgb, var(--theme-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-color) 45%, transparent);
    color: var(--theme-color);
}

.announcement-unit .announcement-value {
    color: var(--theme-color);
}

@media (prefers-reduced-motion: reduce) {
    .announcement,
    .announcement-icon,
    .announcement-unit .announcement-value {
        --theme-color: var(--primary-color);
    }
}

/* ==================================================================
   Modals
   ================================================================== */

.product-description::-webkit-scrollbar { width: 5px; }
.product-description::-webkit-scrollbar-track { background: transparent; }
.product-description::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 12%);
    border-radius: 100px;
}
.product-description { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 12%) transparent; }

.store-cat {
    --cat: var(--primary-color);
    position: relative;
    overflow: hidden;
    background: var(--content-light-color);
    transition: background .2s, transform .2s;
}
.store-cat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--cat);
    opacity: .55;
    transition: opacity .2s, width .2s;
}
.store-cat:hover {
    background: color-mix(in srgb, var(--cat) 14%, var(--content-light-color));
    transform: translateX(2px);
}
.store-cat:hover::before { opacity: 1; width: 5px; }

.store-cat .store-cat-icon {
    background: color-mix(in srgb, var(--cat) 22%, transparent);
    color: var(--cat);
    transition: background .2s, color .2s;
}
.store-cat:hover .store-cat-icon {
    background: var(--cat);
    color: #0f1117;
}

.store-cat.is-current { background: color-mix(in srgb, var(--cat) 16%, var(--content-light-color)); }
.store-cat.is-current::before { opacity: 1; width: 5px; }
.store-cat.is-current .store-cat-icon { background: var(--cat); color: #0f1117; }
.store-cat.is-current .store-cat-sub { color: #fff; }

.store-cat .store-cat-name {
    font-family: 'Minecraft', sans-serif;
    font-weight: normal;
    text-transform: none;
}

.store-cat.cat-bundles { --cat: #f93435; }
.store-cat.cat-wands   { --cat: #a855f7; }
.store-cat.cat-ranks   { --cat: #fcc029; }
.store-cat.cat-crates  { --cat: #1fa2ff; }
.store-cat.cat-monthly { --cat: #6ee03c; }
.store-cat.cat-gift    { --cat: #22d3ee; }
.store-cat.cat-page    { --cat: #8b8b96; }

/* ==================================================================
   Category: bundles
   ================================================================== */

.bundle-card {
    position: relative;
    isolation: isolate;
    border: 1px solid rgb(255 255 255 / 6%);
    transition: border-color .25s, transform .25s;
}
.bundle-card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.bundle-card.is-featured {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background:
        radial-gradient(
            120% 90% at 50% 0%,
            color-mix(in srgb, var(--primary-color) 22%, transparent) 0%,
            transparent 65%
        ),
        linear-gradient(
            170deg,
            color-mix(in srgb, var(--primary-color) 10%, var(--content-color)) 0%,
            var(--content-color) 60%
        );
}
.bundle-card.is-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: .5;
    background: repeating-linear-gradient(
        -45deg,
        rgb(255 255 255 / 2.5%) 0 2px,
        transparent 2px 14px
    );
}

.bundle-watermark {
    position: absolute;
    right: -1.5rem;
    bottom: -2rem;
    font-size: 9rem;
    line-height: 1;
    pointer-events: none;
    color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    z-index: 0;
}
.bundle-card.is-featured .bundle-watermark {
    color: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.bundle-buy-secondary {
    background: color-mix(in srgb, var(--primary-color) 78%, transparent);
}
.bundle-buy-secondary:hover {
    background: var(--primary-color);
}

.bundle-card-band {
    background:
        radial-gradient(
            100% 160% at 50% 0%,
            color-mix(in srgb, var(--primary-color) 18%, transparent) 0%,
            transparent 70%
        ),
        var(--content-light-color);
}
.bundle-card.is-featured .bundle-card-band {
    background:
        radial-gradient(
            100% 160% at 50% 0%,
            color-mix(in srgb, var(--primary-color) 35%, transparent) 0%,
            transparent 70%
        ),
        color-mix(in srgb, var(--primary-color) 14%, var(--content-light-color));
}

.bundle-pitch p { margin-bottom: .5rem; }
.bundle-pitch p:last-child { margin-bottom: 0; }
.bundle-pitch strong,
.bundle-pitch b { color: #fff; }
.bundle-pitch a { color: var(--primary-color); }
.bundle-pitch ul,
.bundle-pitch ol { margin: .5rem 0 .5rem 1.25rem; }
.bundle-pitch ul { list-style: disc; }
.bundle-pitch ol { list-style: decimal; }
.bundle-pitch img { max-width: 100%; border-radius: .5rem; margin: .5rem 0; }

/* ==================================================================
   Category: crates
   ================================================================== */

@media (min-width: 1024px) {
    .crates-showcase.is-single .crate-card {
        flex-direction: row;
        align-items: stretch;
    }
    .crates-showcase.is-single .crate-media {
        width: 40%;
        height: auto;
        min-height: 100%;
        align-self: stretch;
    }
    .crates-showcase.is-single .crate-body {
        min-height: 28rem;
    }
}
.crates-showcase.is-single .crate-media img {
    object-fit: cover;
}

.crate-pitch p { margin-bottom: .5rem; }
.crate-pitch p:last-child { margin-bottom: 0; }
.crate-pitch strong,
.crate-pitch b { color: #fff; }
.crate-pitch a { color: var(--primary-color); }
.crate-pitch ul,
.crate-pitch ol { text-align: left; margin: .5rem 0 .5rem 1.25rem; }
.crate-pitch ul { list-style: disc; }
.crate-pitch ol { list-style: decimal; }
.crate-pitch img { max-width: 100%; border-radius: .5rem; margin: .5rem auto; }

/* ==================================================================
   Category: ranks
   ================================================================== */

.ranks-table th,
.ranks-table tr.feature-row td {
    height: 1px;            }
.ranks-table th > div,
.ranks-table tr.feature-row td > div {
    height: 100%;
}
.ranks-table [role="button"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.ranks-table table {
    width: calc(100% + 1rem);
    margin-inline: -0.5rem;
}
@media (min-width: 640px) {
    .ranks-table table {
        width: calc(100% + 1.5rem);
        margin-inline: -0.75rem;
    }
}

/* ── "Most popular" column tint ──
   Every cell in the flagged column gets a primary wash. Mixing the
   brand colour into the existing panel colours keeps the tint in
   step with --primary-color instead of hard-coding a purple.
   The two variants mirror the bg-content / bg-content-light
   alternation of the other columns, so banding reads across
   every row including this one. */
.ranks-table .is-popular-cell > div.bg-content {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--content-color));
}
.ranks-table .is-popular-cell > div.bg-content-light {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--content-light-color));
}
.ranks-table .is-popular-head > div {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--content-color));
}
.ranks-table .is-popular-head .rank-media {
    background: color-mix(in srgb, var(--primary-color) 26%, var(--content-light-color));
}
.ranks-table .is-popular-card {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--content-color));
}
.ranks-table .is-popular-card .rank-media {
    background: color-mix(in srgb, var(--primary-color) 26%, var(--content-light-color));
}

.platform-tile-active {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}