:root {
    --hero-background: #c12c6e;
    --background-color: #dbdbdb;
    --primary-color: #e3345b;
    --secondary-color: #e3345b;
    --content-width: 1440px;
}
.bg-primary .text-white {
    color: white !important;
}
.font-primary {
    font-family: 'Minecrafter', sans-serif;
    font-weight: 400 !important;
    letter-spacing:.5px;
}
#hero {
    background: linear-gradient(45deg, #d40031, #ff9e3a, #ff3bba);
    padding-bottom: 48px;
}
.logo {
    animation: logo-pulse 4s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}
#hero {
    position: relative;
    overflow: hidden;
}

#hero::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 57%;

    width: 1800px;
    height: 1800px;

    transform: translate(-50%, -50%);
    transform-origin: center;

    background: repeating-conic-gradient(
        from 0deg,
        rgb(255 255 255 / 5%) 0deg 8deg,
        transparent 8deg 18deg
    );
    -webkit-mask-image: radial-gradient(
        circle,
        black 0%,
        rgba(0, 0, 0, 0.85) 30%,
        transparent 68%
    );

    mask-image: radial-gradient(
        circle,
        black 0%,
        rgba(0, 0, 0, 0.85) 30%,
        transparent 68%
    );

    animation: hero-sunburst-spin 60s linear infinite;

    pointer-events: none;
    z-index: 1;
}

@keyframes hero-sunburst-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes logo-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}
footer#footer.other {
    min-height: 200px;
    background: #262f3f;
}

div#content {
    z-index: 5;
}
#minecraft-particles {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;
    z-index: 0;
}
#hero > *:not(#minecraft-particles) {
    position: relative;
    z-index: 1;
}
.text-store {
    color: #f65333;
}
#content {
    position: relative;
}
#content.blocky::before {
    background: var(--background-color);
    transform:rotate(180deg);
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top:-48px;

    width: 100%;
    height: 48px;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' viewBox='0 0 192 24'%3E%3Cpath fill='%23000' d='M0 0H192V8H160V16H128V8H96V24H64V16H32V8H0Z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='24' viewBox='0 0 192 24'%3E%3Cpath fill='%23000' d='M0 0H192V8H160V16H128V8H96V24H64V16H32V8H0Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;

    -webkit-mask-position: bottom;
    mask-position: bottom;

    -webkit-mask-size: 384px 48px;
    mask-size: 384px 48px;

    pointer-events: none;
}
#footer {
    position: relative;
}
#footer.blocky:before {
    background: #fff;
    transform:rotate(180deg);
}
#footer.blocky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -42px;

    width: 100%;
    height: 48px;

    background-color: inherit;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath fill='%23000' d='M0 0H240V8H206V13H168V9H132V18H92V14H52V20H24V11H0Z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath fill='%23000' d='M0 0H240V8H206V13H168V9H132V18H92V14H52V20H24V11H0Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;

    -webkit-mask-position: bottom;
    mask-position: bottom;

    -webkit-mask-size: 360px 48px;
    mask-size: 360px 48px;

    pointer-events: none;
}
#hero > img.bg {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .18;
    object-fit: cover;
    filter: blur(6px);
}

div#hero {
    position: relative;
    overflow: hidden;
}
.store-logo-text {
    display: inline-flex;
    align-items: center;
    gap: 0;

    filter: drop-shadow(1px 2px 0 rgba(70, 45, 40, 0.12));
}

.store-logo-text span {
    display: inline-block;

    color: var(--face);
    -webkit-text-stroke: 1px var(--edge);

    text-shadow:
        0 1px 0 var(--edge),
        0 2px 0 var(--edge);
}

.store-bundles {
    --card-from: #ff493d;
    --card-via: #ff6b32;
    --card-to: #ff9d32;
    --card-lip: #c94033;
    --card-glow: rgba(255, 91, 45, 0.18);
}
.store-ranks {
    --card-from: #258bea;
    --card-via: #2ea2ee;
    --card-to: #36b9f2;
    --card-lip: #007bc5;
    --card-glow: rgba(37, 139, 234, 0.16);
}
.store-credits {
    --card-from: #73c925;
    --card-via: #87d22a;
    --card-to: #9cdb2e;
    --card-lip: #4a8200;
    --card-glow: rgba(88, 170, 24, 0.16);
}

.store-palette-0 {
    --card-from: #7c4dd4;
    --card-via: #9160e0;
    --card-to: #a879ea;
    --card-lip: #5a35a4;
    --card-glow: rgba(124, 77, 212, 0.16);
}
.store-palette-1 {
    --card-from: #e5ab17;
    --card-via: #efbc2a;
    --card-to: #f7cd45;
    --card-lip: #b07f00;
    --card-glow: rgba(229, 171, 23, 0.16);
}
.store-palette-2 {
    --card-from: #12a594;
    --card-via: #17b8a5;
    --card-to: #2ccfba;
    --card-lip: #0a7568;
    --card-glow: rgba(18, 165, 148, 0.16);
}
.store-palette-3 {
    --card-from: #ec4899;
    --card-via: #f25ba6;
    --card-to: #f878b8;
    --card-lip: #b32a6b;
    --card-glow: rgba(236, 72, 153, 0.16);
}
.store-palette-4 {
    --card-from: #3f5cf6;
    --card-via: #5470f8;
    --card-to: #6d87fa;
    --card-lip: #2740c4;
    --card-glow: rgba(63, 92, 246, 0.16);
}

.store-item {
    background-image: linear-gradient(
        to bottom right,
        var(--card-from),
        var(--card-via),
        var(--card-to)
    );
    box-shadow:
        inset 0px -10px 0px var(--card-lip),
        0 12px 35px var(--card-glow);
}

.store-item:hover {
    box-shadow:
        inset 0px -10px 0px var(--card-lip),
        0 18px 45px var(--card-glow);
}

.store-item h2 {
    text-shadow: 3px 3px 0px #00000040;
}

#content .text-white,
#content .text-zinc-100,
#content .text-zinc-200,
#content .text-gray-100,
#content .text-gray-200,
#content .text-neutral-100,
#content .text-neutral-200 {
    color: var(--text-primary);
}

#content .bg-primary,
#content .bg-primary .text-white,
#content .bg-secondary,
#content .bg-secondary .text-white,
#content .store-item,
#content .store-item .text-white,
#content .store-item h2,
#content .bg-emerald-500,
#content .bg-emerald-500 .text-white,
#content .bg-red-500,
#content .bg-red-500 .text-white,
#content [class*="bg-gradient"] .text-white,
#content .action-tooltip,
#hero .text-white,
#footer .text-white {
    color: #fff;
}

#content .store-item,
#content .store-item *:not(.bg-white):not(.bg-white *) {
    color: #fff;
}

.hover\:bg-primary:hover,
.group:hover .group-hover\:bg-primary {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.hover\:bg-primary:hover .text-muted,
.hover\:bg-primary:hover h1,
.hover\:bg-primary:hover h2,
.hover\:bg-primary:hover h3,
.hover\:bg-primary:hover h4,
.hover\:bg-primary:hover p,
.hover\:bg-primary:hover i,
.group:hover .group-hover\:bg-primary .text-muted,
.group:hover .group-hover\:bg-primary i {
    color: #fff !important;
}

.hover\:bg-primary\/20:hover {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.hover\:bg-secondary:hover {
    background: var(--secondary-color) !important;
    color: #fff !important;
}

#content .store-item .hover\:bg-white:hover {
    background: #fff !important;
    color: #f04444 !important;
}

#content .store-item .hover\:bg-white:hover i {
    color: #f04444 !important;
}

.bg-content {
    border: 1px solid var(--content-border);
}

.bg-content-light {
    border: 1px solid var(--content-border);
}

.bg-content .border-white\/5,
.bg-content .border-white\/10,
.bg-content-light .border-white\/5,
.bg-content-light .border-white\/10 {
    border-color: var(--content-border);
}

.bg-content .bg-white\/5,
.bg-content .bg-white\/10 {
    background-color: rgb(20 24 35 / 5%);
}

.action-tooltip::after {
    content: "";
    position: absolute;

    left: 100%;
    top: 50%;

    width: 0;
    height: 0;

    transform: translateY(-50%);

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #0f172a;
}

.action-btn {
    overflow: visible;
}

.action-bar {
    z-index: 30;
}

.action-btn:hover {
    z-index: 40;
}

.store-item,
.store-card {
    z-index: 0;
}

.rank-panel {
    background: transparent;
}

.rank-grid {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.rank-cell {
    display: flex;
    align-items: center;

    min-height: 62px;
    padding: 12px 18px;

    background: #fff;
    border-radius: 14px;
}

.rank-cell.is-zebra {
    background: rgb(255 255 255 / 55%);
}

.rank-label {
    justify-content: flex-start;
}

.rank-spacer {
    background: transparent;
}

.rank-head {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 26px 18px 20px;
    text-align: center;

    box-shadow: 0 6px 20px rgb(20 24 35 / 6%);
}

.rank-art {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    border-radius: 18px;
    background: color-mix(in srgb, var(--crate, var(--primary-color)) 10%, #fff);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .rank-art {
        background: var(--content-light-color);
    }
}

.rank-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    margin-top: 18px;
    padding: 13px 16px;

    border-radius: 14px;

    background: var(--crate, var(--primary-color));
    color: #fff;

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

    box-shadow: 0 6px 16px color-mix(in srgb, var(--crate, var(--primary-color)) 35%, transparent);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.rank-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--crate, var(--primary-color)) 45%, transparent);
}

.rank-head.is-popular {
    margin-top: -14px;
    padding-top: 34px;

    background: linear-gradient(
        160deg,
        var(--crate, var(--primary-color)),
        color-mix(in srgb, var(--crate, var(--primary-color)) 78%, #1f2430)
    );
    color: #fff;

    box-shadow: 0 16px 34px color-mix(in srgb, var(--crate, var(--primary-color)) 40%, transparent);
}

.rank-head.is-popular .rank-art {
    background: rgb(255 255 255 / 18%);
}

#content .rank-head.is-popular,
#content .rank-head.is-popular .text-white,
#content .rank-head.is-popular .text-primary,
#content .rank-head.is-popular i,
#content .rank-head.is-popular div,
#content .rank-head.is-popular span {
    color: #fff;
}

#content .rank-head.is-popular button.rank-buy.is-popular,
#content .rank-head.is-popular button.rank-buy.is-popular i,
#content .rank-head.is-popular button.rank-buy.is-popular span {
    color: var(--crate, var(--primary-color));
}

#content .rank-head.is-popular span.rank-flag,
#content .rank-head.is-popular span.rank-flag i {
    color: var(--crate, var(--primary-color));
}

.rank-buy.is-popular {
    background: #fff;
    color: var(--crate, var(--primary-color));
    box-shadow: 0 6px 16px rgb(20 24 35 / 18%);
}

.rank-buy.is-popular:hover {
    box-shadow: 0 10px 24px rgb(20 24 35 / 26%);
}

.rank-cell.in-popular {
    background: color-mix(in srgb, var(--crate, var(--primary-color)) 13%, #fff);
}

.rank-cell.in-popular.is-zebra {
    background: color-mix(in srgb, var(--crate, var(--primary-color)) 18%, #fff);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .rank-cell.in-popular,
    .rank-cell.in-popular.is-zebra {
        background: var(--content-light-color);
    }
}

.rank-flag {
    position: absolute;
    top: -11px;
    left: 50%;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    transform: translateX(-50%);
    white-space: nowrap;

    padding: 5px 14px;
    border-radius: 999px;

    background: #fff;
    color: var(--crate, var(--primary-color));

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;

    box-shadow: 0 4px 12px rgb(20 24 35 / 18%);
}

.rank-baseline {
    background: rgb(255 255 255 / 45%);
    color: var(--text-muted);
}

.rank-baseline.is-zebra {
    background: rgb(255 255 255 / 30%);
}

.rank-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;
    font-size: 13px;
}

.rank-mark.is-on {
    background: var(--crate, var(--primary-color));
    color: #fff;
}

.rank-mark.is-off {
    background: rgb(20 24 35 / 6%);
    color: rgb(20 24 35 / 28%);
}

.credit-grid {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
}

@media (min-width: 640px) {
    .credit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .credit-tier {
        min-height: 0;
    }

    .credit-media {
        padding: 26px 20px;
    }

    .credit-art {
        width: min(46%, 140px);
    }
}

@media (min-width: 768px) {
    #pdp-title {
        border-left: 10px solid var(--crate, var(--primary-color));
        padding-left: 30px;
        margin-left: -41px;
    }
    .credit-grid {
        grid-template-columns: repeat(var(--credit-cols, 4), minmax(0, 1fr));
    }
}

.credit-tier {
    --crate: var(--primary-color);

    position: relative;
    display: flex;
    flex-direction: column;

    min-height: 420px;
    overflow: hidden;
    cursor: pointer;

    border-radius: 26px;
    background: #fff;

    box-shadow:
        0 1px 2px rgb(20 24 35 / 6%),
        0 12px 28px rgb(20 24 35 / 8%);

    transition: transform .3s, box-shadow .3s;
}

.credit-tier:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 2px rgb(20 24 35 / 6%),
        0 22px 46px rgb(20 24 35 / 14%);
}

.credit-media {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;

    min-height: 0;
    padding: 34px 20px;

    background: #f1f1f1;
}

.credit-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(64%, 160px);
    aspect-ratio: 1;

    transform: translate(-50%, -54%);
    border-radius: 50%;

    background: color-mix(in srgb, var(--crate) 22%, transparent);
    filter: blur(30px);
    opacity: .5;

    pointer-events: none;
}

.credit-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(74%, 180px);
    aspect-ratio: 1;

    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.credit-tier:hover .credit-art {
    transform: translateY(-5px) scale(1.07);
}

.credit-art .credit-img,
.credit-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgb(20 24 35 / 16%));
}

.credit-art div.credit-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-art div.credit-img i {
    font-size: clamp(48px, 7vw, 80px);
    color: color-mix(in srgb, var(--crate) 82%, #1f2430);
    filter: drop-shadow(0 6px 12px rgb(20 24 35 / 18%));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .credit-art div.credit-img i {
        color: var(--crate);
    }
}

.credit-name {
    padding: 22px 16px 0;

    font-size: clamp(17px, 1.4vw, 22px);
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
}

.credit-buy {
    margin-top: auto;
    padding: 8px 16px 20px;
    text-align: center;
}

.credit-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;

    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 900;
    color: var(--crate);
    letter-spacing: .01em;
}

.credit-was {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: line-through;
}

.credit-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 14px;
    padding: 14px 18px;

    border-radius: 14px;
    background: var(--crate);
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    box-shadow: 0 6px 16px color-mix(in srgb, var(--crate) 34%, transparent);
    transition: transform .25s, box-shadow .25s;
}

.credit-tier:hover .credit-cta {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--crate) 44%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .credit-cta {
        box-shadow: 0 6px 16px rgb(20 24 35 / 20%);
    }
}

#content .credit-cta,
#content .credit-cta i,
#content .credit-cta span {
    color: #fff;
}

.credit-bonus {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;

    padding: 5px 11px;
    border-radius: 999px;

    background: var(--crate);
    color: #fff;

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;

    box-shadow: 0 4px 12px rgb(20 24 35 / 22%);
}

#content .credit-bonus {
    color: #fff;
}

.credit-tier.is-popular {
    box-shadow:
        0 0 0 2px var(--crate),
        0 14px 32px color-mix(in srgb, var(--crate) 26%, transparent);
}

.credit-tier.is-popular:hover {
    box-shadow:
        0 0 0 2px var(--crate),
        0 24px 48px color-mix(in srgb, var(--crate) 34%, transparent);
}

.credit-tier.is-popular .credit-glow {
    opacity: .85;
}

.empty-state .modal-art {
    margin-inline: auto;
}

.modal-hero {
    background:
        radial-gradient(
            90% 120% at 12% 0%,
            color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
            transparent 62%
        ),
        var(--content-light-color);
    border-bottom: 1px solid var(--content-border);
    overflow: hidden;
}

.modal-hero::after {
    content: "";
    position: absolute;

    right: 18px;
    top: 16px;

    width: 96px;
    height: 56px;

    background-image:

        linear-gradient(rgb(20 24 35 / 7%) 0 0),
        linear-gradient(rgb(20 24 35 / 5%) 0 0),
        linear-gradient(rgb(20 24 35 / 4%) 0 0),
        linear-gradient(rgb(20 24 35 / 6%) 0 0);
    background-repeat: no-repeat;
    background-size: 14px 14px, 10px 10px, 8px 8px, 12px 12px;
    background-position:
        76px 0,
        54px 22px,
        86px 34px,
        30px 6px;

    pointer-events: none;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .modal-hero {
        background: var(--content-light-color);
    }
}

.modal-art {
    background: linear-gradient(
        150deg,
        color-mix(in srgb, var(--primary-color) 22%, #fff),
        color-mix(in srgb, var(--primary-color) 10%, #fff)
    );
    color: var(--primary-color);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 22%, transparent),
        0 8px 20px rgb(20 24 35 / 8%);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .modal-art {
        background: var(--content-light-color);
        color: var(--primary-color);
    }
}

.loader {
    border-color: var(--primary-color) !important;
    border-bottom-color: transparent !important;
}

.card-loading {
    background: #fff !important;
}

.border-content-light {
    border-color: var(--content-border) !important;
}

.bg-content #paynow path {
    fill: var(--text-muted);
}

.gift-icon {
    background: #fff !important;
    border: 1px solid var(--content-border) !important;
    box-shadow: 0 4px 14px rgb(20 24 35 / 12%) !important;
    color: var(--primary-color);
}

.modal-nav::-webkit-scrollbar-track {
    background: #e9eaee !important;
}

.modal-nav::-webkit-scrollbar-thumb {
    background: #c3c6cf !important;
}

.modal-nav i {
    color: inherit !important;
}

.bg-content input,
.bg-content select,
.bg-content textarea,
.bg-content-light input,
.bg-content-light select,
.bg-content-light textarea {
    color: var(--text-primary);
}

.bg-content input::placeholder,
.bg-content-light input::placeholder {
    color: var(--text-muted);
}

.bundle-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}.crate-card {
    --crate: var(--primary-color);
    border-top: 4px solid var(--crate);
}

.crate-media {
    position: relative;
    background: color-mix(in srgb, var(--crate) 8%, var(--content-light-color));
}

.crate-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--crate) 42%, transparent) 0%,
        transparent 70%
    );
    transition: transform .3s;
}

.crate-card:hover .crate-glow {
    transform: translate(-50%, -50%) scale(1.15);
}

.crate-card .crate-media i {
    color: var(--crate);
}

.crate-name:hover {
    color: var(--crate);
}

.crate-card .text-primary {
    color: var(--crate);
}

.crate-buy {
    background: var(--crate);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--crate) 35%, transparent);
}

#content .crate-buy,
#content .crate-buy i,
#content .crate-buy span {
    color: #fff;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .crate-media {
        background: var(--content-light-color);
    }

    .crate-glow {
        background: radial-gradient(circle, var(--crate) 0%, transparent 70%);
        opacity: .38;
    }

    .crate-buy {
        box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
    }
}

.pdp-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
}

.pdp-stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    padding: 18px;

    border-radius: 24px;
    background: var(--content-color);
    border: 1px solid var(--content-border);
    box-shadow: 0 18px 40px rgb(20 24 35 / 10%);
    overflow: hidden;
}

.pdp-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(46%, 150px);
    aspect-ratio: 1;

    transform: translate(-50%, -50%);
    border-radius: 50%;

    background: color-mix(in srgb, var(--crate, var(--primary-color)) 14%, transparent);
    filter: blur(28px);
    opacity: .55;
    pointer-events: none;
}

.pdp-art {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: min(100%, 238px);
    max-height: 100%;
    aspect-ratio: 1;
}

#pdp-actions {
    margin-top: auto;
}

.pdp-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdp-img-fallback {
    font-size: clamp(58px, 8vw, 96px);
    color: color-mix(in srgb, var(--crate, var(--primary-color)) 78%, #1f2430);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pdp-img-fallback {
        color: var(--crate, var(--primary-color));
    }
}

.pdp-ribbon {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;

    padding: 6px 13px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 6px 14px rgb(20 24 35 / 18%);
}

.pdp-ribbon.is-save {
    background: #10b981;
}

.pdp-ribbon.is-out {
    background: #ef4444;
}

#content .pdp-ribbon {
    color: #fff;
}

.pdp-timer {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 16px 8px 8px;
    border-radius: 999px;

    background: var(--crate, var(--primary-color));
    white-space: nowrap;

    box-shadow: 0 8px 20px color-mix(in srgb, var(--crate, var(--primary-color)) 40%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pdp-timer {
        box-shadow: 0 8px 20px rgb(20 24 35 / 24%);
    }
}

.pdp-timer-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 50%;
    background: rgb(255 255 255 / 22%);
    font-size: 11px;
}

.pdp-timer-label {
    display: block;

    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .75;
}

.pdp-timer-time {
    display: block;

    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

#content .pdp-timer,
#content .pdp-timer i,
#content .pdp-timer span {
    color: #fff;
}

.patron-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 18px;
    padding: 12px 22px;

    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    box-shadow: 0 8px 20px rgb(0 0 0 / 28%);
    cursor: default;
    user-select: none;
}

#footer .patron-cta,
#footer .patron-cta i,
#footer .patron-cta span {
    color: #fff;
}

.pdp-blurb img,
.pdp-blurb picture,
.pdp-blurb figure {
    display: none;
}

.category-about .prose {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.category-about .prose > :first-child {
    margin-top: 0;
}

.category-about .prose > :last-child {
    margin-bottom: 0;
}

.category-about .prose h1,
.category-about .prose h2,
.category-about .prose h3,
.category-about .prose h4 {
    margin: 26px 0 12px;
    color: var(--text-primary);
    font-weight: 900;
    line-height: 1.25;
}

.category-about .prose h1 { font-size: 26px; }
.category-about .prose h2 { font-size: 21px; }
.category-about .prose h3 { font-size: 17px; }
.category-about .prose h4 { font-size: 15px; }

.category-about .prose h1,
.category-about .prose h2,
.category-about .prose h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-about .prose h1::before,
.category-about .prose h2::before,
.category-about .prose h3::before {
    content: "";

    flex-shrink: 0;
    width: 4px;
    height: 1em;

    border-radius: 999px;
    background: var(--primary-color);
}

.category-about .prose p {
    margin-bottom: 14px;
}

.category-about .prose strong,
.category-about .prose b {
    color: var(--text-primary);
    font-weight: 800;
}

.category-about .prose a {
    color: var(--primary-color);
    font-weight: 700;
}

.category-about .prose a:hover {
    text-decoration: underline;
}

.category-about .prose ol {
    margin: 0 0 14px 22px;
    list-style: decimal;
}

.category-about .prose ol li {
    margin-bottom: 6px;
}

.category-about .prose ol li::marker {
    color: var(--primary-color);
    font-weight: 800;
}

.category-about .prose ul {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.category-about .prose ul li {
    position: relative;

    margin: 0;
    padding: 12px 16px 12px 46px;

    border-radius: 14px;
    background: var(--content-color);
    box-shadow: 0 1px 2px rgb(20 24 35 / 6%);

    font-size: 14px;
    line-height: 1.55;
}

.category-about .prose ul li::before {
    content: "\f00c";

    position: absolute;
    top: 13px;
    left: 14px;

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

    width: 22px;
    height: 22px;

    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
}

#content .category-about .prose ul li::before {
    color: #fff;
}

.category-about .prose blockquote {
    margin: 0 0 14px;
    padding: 6px 0 6px 18px;
    border-left: 3px solid var(--primary-color);
    font-style: italic;
}

.category-about .prose code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--content-light-color);
    color: var(--primary-color);
    font-size: 13px;
}

.category-about .prose pre {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 14px;
    background: var(--content-light-color);
    overflow-x: auto;
}

.category-about .prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.category-about .prose img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.category-about .prose hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--content-border);
}

.category-about .prose table {
    width: 100%;
    margin-bottom: 14px;
    border-collapse: collapse;
}

.category-about .prose th,
.category-about .prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--content-border);
    text-align: left;
}

.category-about .prose th {
    color: var(--text-primary);
    font-weight: 800;
}

.category-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 4px;
    padding: 26px 30px;

    border-radius: 26px;
    overflow: hidden;

    background-image: linear-gradient(
        120deg,
        var(--primary-color),
        color-mix(in srgb, var(--primary-color) 62%, #ff9d32)
    );
    box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-color) 26%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .category-cta {
        background-image: linear-gradient(120deg, var(--primary-color), #ff9d32);
        box-shadow: 0 14px 34px rgb(20 24 35 / 20%);
    }
}

.category-cta-shape {
    position: absolute;
    background: rgb(255 255 255 / 10%);
    pointer-events: none;
}

.category-cta-shape-a {
    top: 18%;
    left: 6%;
    width: 12px;
    height: 12px;
}

.category-cta-shape-b {
    top: 32%;
    right: 22%;
    width: 20px;
    height: 20px;
}

.category-cta-shape-c {
    bottom: 18%;
    right: 8%;
    width: 14px;
    height: 14px;
}

.category-cta-icon {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    border-radius: 18px;
    background: rgb(255 255 255 / 18%);
    backdrop-filter: blur(6px);
}

.category-cta-icon i {
    font-size: 26px;
}

.category-cta-body {
    position: relative;
    min-width: 0;
    flex: 1;
}

.category-cta-title {
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.15;
    text-transform: uppercase;
}

.category-cta-text {
    margin-top: 7px;
    max-width: 62ch;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.category-cta-btn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;

    padding: 14px 26px;
    border-radius: 16px;

    background: #fff;
    color: var(--primary-color);

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

    box-shadow: 0 8px 20px rgb(20 24 35 / 18%);
    transition: transform .2s, box-shadow .2s;
}

.category-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgb(20 24 35 / 24%);
}

.category-cta-arrow {
    font-size: 12px;
    transition: transform .2s;
}

.category-cta-btn:hover .category-cta-arrow {
    transform: translateX(3px);
}

#content .category-cta,
#content .category-cta .category-cta-title,
#content .category-cta .category-cta-text,
#content .category-cta-icon i {
    color: #fff;
}

#content .category-cta-btn,
#content .category-cta-btn span,
#content .category-cta-btn i {
    color: var(--primary-color);
}

@media (max-width: 767px) {
    .category-cta {
        flex-direction: column;
        gap: 16px;
        padding: 26px 22px;
        text-align: center;
    }

    .category-cta-text {
        max-width: none;
    }

    .category-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

.rank-head {
    --crate: var(--primary-color);
}

.rank-price {
    color: var(--crate);
}

.rank-was {
    color: var(--text-muted);
}

#content .rank-head.is-popular .rank-price,
#content .rank-head.is-popular .rank-was {
    color: #fff;
}

#content .rank-head.is-popular .rank-was {
    opacity: .65;
}

.rank-colname {
    color: var(--crate, var(--primary-color));
}

.rank-card {
    --crate: var(--primary-color);
}

.rank-card .text-primary {
    color: var(--crate);
}

.rank-card-buy {
    background: var(--crate);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--crate) 32%, transparent);
}

#content .rank-card-buy,
#content .rank-card-buy i {
    color: #fff;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .rank-card-buy {
        box-shadow: 0 6px 16px rgb(20 24 35 / 20%);
    }
}

.rank-art .text-primary {
    color: var(--crate);
}

#content .rank-head.is-popular .rank-art .text-primary {
    color: #fff;
}

.pdp-perk {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 16px;
    border-radius: 18px;

    background: var(--content-light-color);
    border: 1px solid var(--content-border);

    transition: transform .2s, box-shadow .2s;
}

.pdp-perk:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(20 24 35 / 8%);
}

.pdp-perk.is-off {
    opacity: .5;
}

.pdp-perk-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;
    background: var(--crate, var(--primary-color));
    color: #fff;
    font-size: 14px;
}

.pdp-perk.is-off .pdp-perk-icon {
    background: rgb(20 24 35 / 8%);
    color: var(--text-muted);
}

#content .pdp-perk-icon,
#content .pdp-perk-icon i {
    color: #fff;
}

#content .pdp-perk.is-off .pdp-perk-icon,
#content .pdp-perk.is-off .pdp-perk-icon i {
    color: var(--text-muted);
}

.pdp-perk-name {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.pdp-perk-value {
    margin-left: auto;
    flex-shrink: 0;

    font-size: 13px;
    font-weight: 900;
    color: var(--crate, var(--primary-color));
}

.pdp-perk-text {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.pdp-price {
    color: var(--crate, var(--primary-color));
}

.pdp-chip-accent {
    background: color-mix(in srgb, var(--crate, var(--primary-color)) 12%, transparent);
    color: var(--crate, var(--primary-color));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pdp-chip-accent {
        background: var(--content-light-color);
    }
}

.pdp-btn {
    background: var(--crate, var(--primary-color));
}

#content .pdp-btn,
#content .pdp-btn i,
#content .pdp-btn span {
    color: #fff;
}

.pdp-btn-alt:hover {
    background: var(--crate, var(--primary-color));
}

#content .pdp-btn-alt:hover,
#content .pdp-btn-alt:hover i,
#content .pdp-btn-alt:hover span {
    color: #fff;
}

.bundle-offer-icon {
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 50%;
    background: #f04444;
    color: #fff;
    font-size: 11px;
}

#content .bundle-offer-icon,
#content .bundle-offer-icon i {
    color: #fff;
}

.bundle-offer-label {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #f04444;
    opacity: .7;
}

.bundle-offer-text {
    display: block;

    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    color: #f04444;
}

.ranks-try-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 50%;
    background: #1899ef;
    color: #fff;
    font-size: 11px;
}

#content .ranks-try-icon,
#content .ranks-try-icon i {
    color: #fff;
}

.signin-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: var(--content-light-color);
    border: 1px solid var(--content-border);
    color: var(--text-muted);
    font-size: 16px;

    overflow: hidden;
    transition: background .2s, border-color .2s;
}

.signin-avatar.is-on {
    background: transparent;
    border-color: transparent;
}

.signin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    border-radius: 12px;
}
.count {
    text-shadow: none !important;
}
.card-art {
    position: absolute;
    top: 50%;
    right: -30px;
    z-index: 0;

    width: auto;
    height: 118%;
    max-width: none;

    transform: translateY(-50%);
    object-fit: contain;

    opacity: .22;
    pointer-events: none;
    transition:
        right .5s,
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .55s ease;

    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
    mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}

.card-art.is-entering {
    opacity: 0;
    transform: translateY(-50%) translateX(26px) scale(.94);
}

.store-item:hover .card-art {
    right: -18px;
    transform: translateY(-50%) scale(1.04);
    opacity: .3;
}

.store-bundles .card-art,
#featured-bundles .card-art {
    height: 104%;
}

@media (max-width: 767px) {
    .card-art {
        height: 90%;
        opacity: .16;
    }
}

.pdp-blurb {
    max-height: 140px;
    overflow-y: auto;
    padding-right: 16px;

    scrollbar-width: thin;
    scrollbar-color: var(--crate, var(--primary-color)) rgb(20 24 35 / 8%);

    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.pdp-blurb::-webkit-scrollbar {
    width: 10px;
}

.pdp-blurb::-webkit-scrollbar-track {
    background: rgb(20 24 35 / 8%);
    border-radius: 100px;
}

.pdp-blurb::-webkit-scrollbar-thumb {
    background: var(--crate, var(--primary-color));
    border-radius: 100px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.pdp-blurb::-webkit-scrollbar-thumb:hover {
    border-width: 0;
}

@media (min-width: 1280px) {
    .pdp-blurb {
        max-height: 170px;
    }
}

.pdp-blurb > :first-child {
    margin-top: 0;
}

.pdp-blurb > :last-child {
    margin-bottom: 0;
}

.pdp-blurb p {
    margin-bottom: 12px;
}

.pdp-blurb h1,
.pdp-blurb h2,
.pdp-blurb h3,
.pdp-blurb h4 {
    margin: 18px 0 8px;
    color: var(--text-primary);
    font-weight: 900;
    line-height: 1.25;
}

.pdp-blurb h1 { font-size: 20px; }
.pdp-blurb h2 { font-size: 18px; }
.pdp-blurb h3 { font-size: 16px; }
.pdp-blurb h4 { font-size: 15px; }

.pdp-blurb strong,
.pdp-blurb b {
    color: var(--text-primary);
    font-weight: 900;
}

.pdp-blurb a {
    color: var(--crate, var(--primary-color));
    font-weight: 800;
}

.pdp-blurb a:hover {
    text-decoration: underline;
}

.pdp-blurb ul,
.pdp-blurb ol {
    margin: 0 0 12px 20px;
}

.pdp-blurb ul { list-style: disc; }
.pdp-blurb ol { list-style: decimal; }

.pdp-blurb li {
    margin-bottom: 5px;
}

.pdp-blurb li::marker {
    color: var(--crate, var(--primary-color));
}

.pdp-blurb blockquote {
    margin: 0 0 12px;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--crate, var(--primary-color));
    font-style: italic;
}

.pdp-blurb code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--content-light-color);
    color: var(--crate, var(--primary-color));
    font-size: 13px;
}

.pdp-blurb img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.pdp-blurb hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--content-border);
}

#featured-bundles {
    transition:
        transform .3s,
        box-shadow .3s,
        --card-from .45s,
        --card-via .45s,
        --card-to .45s,
        --card-lip .45s;
}

@property --card-from { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --card-via  { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --card-to   { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --card-lip  { syntax: "<color>"; inherits: true; initial-value: transparent; }

div#featured-bundles {
    transition: all .18s ease;
}

.cart-rewards {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 16px;
    background: var(--content-light-color);
}

.cart-rewards-track {
    position: relative;
    height: 10px;
    margin: 18px 14px 20px;
    border-radius: 999px;
    background: rgb(0 0 0 / 12%);
}

.cart-rewards-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    transition: width .4s ease;
}

.cart-rewards-node {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--content-color, #fff);
    border: 2px solid rgb(0 0 0 / 15%);
    color: var(--text-muted);
    font-size: 12px;
    transform: translate(-50%, -50%);
    transition: background .3s, border-color .3s, color .3s;
}

.cart-rewards-node.is-on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.cart-rewards-done {
    color: #16a34a;
}

.cart-line:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--content-light-color));
}