:root {
    --shop-gold: #f9d7a1;
    --shop-ember: rgba(255, 157, 54, 0.88);
    --shop-shadow: rgba(6, 3, 1, 0.85);
}

.shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(3, 1, 0, 0.96);
    overflow: hidden;
}

.shop-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 200, 120, 0.05), transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: shopAurora 32s linear infinite;
    opacity: 0.38;
}

.shop-overlay__scene {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.shop-overlay__scene > .arcane-shop {
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100vh;
    color: rgba(255, 238, 213, 0.95);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
    --zoom-scale: 1;
    --zoom-shift-x: 0%;
    --zoom-shift-y: 0%;
    --zoom-saturation: 1;
}

.arcane-shop--zoomed {
    --zoom-scale: 1.1;
    --zoom-shift-x: 0%;
    --zoom-shift-y: 0%;
    --zoom-saturation: 1.3;
}

.arcane-shop[data-active-pack="attack"] {
    --zoom-shift-x: 0%;
    --zoom-shift-y: 0%;
}

.arcane-shop[data-active-pack="mythic"] {
    --zoom-shift-x: 0%;
    --zoom-shift-y: 0%;
}

.arcane-shop[data-active-pack="protect"] {
    --zoom-shift-x: 0%;
    --zoom-shift-y: 0%;
}

.arcane-shop__header {
    position: absolute;
    top: clamp(4%, 6vw, 72px);
    left: clamp(6%, 8vw, 120px);
    max-width: min(420px, 32%);
    padding: clamp(16px, 2.2vw, 24px) clamp(20px, 3vw, 30px);
    background: linear-gradient(145deg, rgba(16, 8, 3, 0.78), rgba(16, 8, 3, 0.24));
    border-left: 3px solid rgba(255, 204, 140, 0.42);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 235, 190, 0.18);
    pointer-events: none;
    transform: translateZ(80px);
}

.arcane-shop__eyebrow {
    margin: 0;
    font-size: clamp(11px, 1.3vw, 13px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 219, 176, 0.72);
}

.arcane-shop__title {
    margin: 0;
    font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
    font-size: clamp(28px, 5vw, 40px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffecc5;
}

.arcane-shop__intro {
    margin: clamp(10px, 1.6vw, 14px) 0 0;
    font-size: clamp(13px, 1.9vw, 15px);
    line-height: 1.7;
    color: rgba(255, 236, 210, 0.82);
}

.arcane-shop__stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    perspective: 2600px;
    transform-style: preserve-3d;
    transform-origin: 50% 55%;
    transform:
        translate3d(var(--zoom-shift-x), var(--zoom-shift-y), 0)
        scale(var(--zoom-scale));
    transition:
        transform 0.9s cubic-bezier(0.18, 0.85, 0.22, 1.12),
        filter 0.8s ease;
    filter: saturate(var(--zoom-saturation));
    background: #050201;
    z-index: 0;
}

.arcane-shop__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 2, 1, 0.85), rgba(10, 6, 3, 0.78));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 2;
}

.arcane-shop--zoomed .arcane-shop__stage::after {
    opacity: 0.85;
}

.arcane-shop__backdrop,
.arcane-shop__backdrop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arcane-shop__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140% 120% at 50% 72%, rgba(255, 198, 110, 0.18), transparent 68%),
        linear-gradient(180deg, rgba(8, 4, 1, 0.2) 0%, rgba(6, 3, 1, 0.86) 80%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.arcane-shop__torch.boot-torch {
    position: absolute;
    inset: auto;
    pointer-events: none;
    left: 50%;
    top: 50%;
    width: var(--torch-width, clamp(120px, 14vw, 168px));
    height: var(--torch-height, clamp(170px, 20vw, 230px));
    transform: translate(-50%, -50%);
    z-index: 4;
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.55));
}

.arcane-shop__torch--wall {
    transform: translate(-50%, -50%) scale(1.02);
    --boot-torch-anchor-y: 60%;
}

.arcane-shop__torch--candle {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(-3deg) scale(0.92);
    --boot-torch-anchor-y: 48%;
}

.arcane-shop__torch--candle .boot-torch__light--inner {
    filter: blur(10px);
    opacity: 0.92;
}

.arcane-shop__torch--candle .boot-torch__light--outer {
    filter: blur(22px);
    opacity: 0.78;
}

.arcane-shop--reduced .arcane-shop__torch {
    display: none;
}

.shop-pack {
    --pack-width-fallback: clamp(196px, 17vw, 256px);
    --pack-aspect-fallback: 0.6667;
    --pack-height-value: var(
        --pack-height,
        calc(var(--pack-width, var(--pack-width-fallback)) / var(--pack-aspect, var(--pack-aspect-fallback)))
    );
    --pack-hover-lift: 78px;
    --pack-active-lift: 200px;
    --pack-base-tilt: 58deg;
    --pack-active-tilt: 34deg;
    --pack-hover-tilt: calc(var(--pack-active-tilt, 34deg) + 6deg);
    --pack-tilt-y: 0deg;
    --pack-rest-lift: 0px;
    --pack-anchor-translate-y: -50%;
    --pack-anchor-height: 0px;
    --pack-ground-offset: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pack-width, var(--pack-width-fallback));
    height: var(--pack-height-value);
    aspect-ratio: var(--pack-aspect, var(--pack-aspect-fallback));
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    display: block;
    object-fit: cover;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transform:
        translate3d(
            -50%,
            calc(var(--pack-anchor-translate-y, -50%) + var(--pack-ground-offset, 0px)),
            var(--pack-rest-lift, 0px)
        )
        rotateY(var(--pack-tilt-y, 0deg))
        rotateX(var(--pack-rest-tilt, var(--pack-base-tilt, calc(var(--pack-active-tilt, 32deg) + 12deg))));
    transition:
        transform 0.75s cubic-bezier(0.17, 0.88, 0.22, 1.1),
        opacity 0.45s ease,
        filter 0.4s ease;
    filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.55));
    will-change: transform, filter;
    -webkit-user-drag: none;
    z-index: 3;
}

.shop-pack::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118%;
    height: 56%;
    background: radial-gradient(70% 55% at 50% 60%, rgba(4, 2, 1, 0.6) 0%, rgba(4, 2, 1, 0.24) 52%, transparent 75%);
    transform:
        translate3d(
            -50%,
            calc(var(--pack-anchor-translate-y, -50%) + 70%),
            -60px
        )
        rotateX(84deg);
    opacity: 0.8;
    filter: blur(1.6px);
    pointer-events: none;
    transition: opacity 0.4s ease, filter 0.45s ease;
}

.shop-pack:focus-visible {
    outline: 2px solid rgba(255, 238, 204, 0.85);
    outline-offset: 6px;
}

.shop-pack.is-hovered {
    transform:
        translate3d(
            -50%,
            calc(var(--pack-anchor-translate-y, -50%) + var(--pack-ground-offset, 0px)),
            var(--pack-hover-lift, 78px)
        )
        rotateY(var(--pack-tilt-y, 0deg))
        rotateX(var(--pack-hover-tilt, calc(var(--pack-active-tilt, 32deg) + 6deg)))
        scale(1.045);
    filter: drop-shadow(0 34px 52px rgba(0, 0, 0, 0.6));
}

.shop-pack.is-active {
    transform:
        translate3d(
            -50%,
            calc(var(--pack-anchor-translate-y, -50%) + var(--pack-ground-offset, 0px)),
            var(--pack-active-lift, 200px)
        )
        rotateY(var(--pack-tilt-y, 0deg))
        rotateX(var(--pack-active-tilt, 32deg))
        scale(1.12);
    filter: drop-shadow(0 46px 68px rgba(0, 0, 0, 0.64));
    animation: packHover 5.6s ease-in-out infinite;
    animation-fill-mode: both;
}

.arcane-shop--zoomed .shop-pack.is-active {
    opacity: 0;
    visibility: hidden;
}

.shop-pack.is-hovered::after,
.shop-pack.is-active::after {
    opacity: 0.9;
    filter: blur(3px);
}

.arcane-shop--zoomed .shop-pack:not(.is-active) {
    opacity: 0.18;
    filter: blur(1.2px);
    pointer-events: none;
}

.arcane-shop__detail {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 80px);
    pointer-events: none;
    transform: translateZ(160px);
    z-index: 4;
}

.arcane-shop--zoomed .arcane-shop__detail {
    pointer-events: auto;
}

.arcane-shop__detail-placeholder {
    margin: 0;
    position: absolute;
    top: clamp(46%, 44vw, 58%);
    left: 50%;
    transform: translate(-50%, -50%);
    padding: clamp(12px, 2vw, 16px) clamp(22px, 4vw, 36px);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-size: clamp(12px, 1.5vw, 14px);
    color: rgba(255, 236, 204, 0.86);
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 214, 160, 0.5);
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(38, 24, 12, 0.75), rgba(22, 12, 6, 0.55));
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 238, 204, 0.28);
    transition: opacity 0.35s ease, transform 0.4s ease;
}

.arcane-shop--zoomed .arcane-shop__detail-placeholder {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 40px));
    pointer-events: none;
}

.arcane-shop__detail-stage {
    position: relative;
    width: min(1120px, 100%);
    display: flex;
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
    justify-content: space-between;
    padding: clamp(32px, 5.5vw, 52px);
    margin-left: clamp(32px, 9vw, 120px);
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.96);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.84, 0.24, 1);
    pointer-events: auto;
    isolation: isolate;
}

.arcane-shop__detail-stage[hidden] {
    display: none !important;
}

.arcane-shop--zoomed .arcane-shop__detail-stage {
    opacity: 1;
    transform: translate3d(0, 0, 120px) scale(1);
}

.arcane-shop__detail-pack {
    position: relative;
    width: clamp(220px, 24vw, 300px);
    max-height: min(440px, 62vh);
    margin-left: clamp(8px, 2vw, 36px);
    aspect-ratio: 2.5 / 4;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    perspective: 1600px;
    filter: none;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(1);
    --detail-pack-translate-x: 0px;
    --detail-pack-translate-y: 0px;
    --detail-pack-scale-x: 1;
    --detail-pack-scale-y: 1;
    --detail-pack-prep-tilt-x: 62deg;
    --detail-pack-prep-tilt-y: 0deg;
    transition: transform 0.82s cubic-bezier(0.18, 0.84, 0.26, 1.12);
    will-change: transform;
}

.arcane-shop__detail-art {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    transform: rotateX(-6deg) rotateY(-12deg) translate3d(0, -4%, 24px);
    animation: packHoverLarge 6.2s ease-in-out infinite;
}

.arcane-shop__detail-pack--transitioning {
    pointer-events: none;
}

.arcane-shop__detail-pack--preparing {
    transform: translate3d(var(--detail-pack-translate-x), var(--detail-pack-translate-y), 0)
        scale(var(--detail-pack-scale-x), var(--detail-pack-scale-y));
    transition: none;
}

.arcane-shop__detail-pack--preparing .arcane-shop__detail-art,
.arcane-shop__detail-pack--animating .arcane-shop__detail-art {
    animation: none;
}

.arcane-shop__detail-pack--preparing .arcane-shop__detail-art {
    transform: rotateX(var(--detail-pack-prep-tilt-x, 62deg))
        rotateY(var(--detail-pack-prep-tilt-y, 0deg))
        translate3d(0, 0, 0);
    transition: none;
}

.arcane-shop__detail-pack--animating .arcane-shop__detail-art {
    transform: rotateX(-6deg) rotateY(-12deg) translate3d(0, -4%, 24px);
    transition: transform 0.85s cubic-bezier(0.18, 0.84, 0.26, 1.12), filter 0.45s ease;
}

.arcane-shop__detail-info {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 28px);
    max-width: clamp(320px, 32vw, 420px);
    padding: clamp(24px, 4vw, 36px);
    background: radial-gradient(120% 120% at 20% 12%, rgba(255, 200, 140, 0.14), transparent 56%),
        linear-gradient(145deg, rgba(28, 16, 8, 0.92), rgba(18, 9, 4, 0.78));
    border: 1px solid rgba(255, 222, 186, 0.32);
    border-radius: 24px;
    box-shadow: 0 26px 46px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 238, 204, 0.12);
    backdrop-filter: blur(12px);
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.65);
    position: relative;
    z-index: 3;
}

.arcane-shop__detail-info::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    border: 1px solid rgba(255, 204, 150, 0.22);
    pointer-events: none;
    opacity: 0.6;
}

.arcane-shop__detail-name {
    margin: 0;
    font-size: clamp(28px, 4.6vw, 40px);
    font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffe8c8;
}

.arcane-shop__detail-summary {
    margin: 0;
    font-size: clamp(15px, 2.1vw, 18px);
    line-height: 1.7;
    color: rgba(255, 232, 204, 0.82);
}

.arcane-shop__detail-meta {
    display: grid;
    gap: clamp(12px, 2.6vw, 18px);
    font-size: clamp(13px, 1.8vw, 15px);
    letter-spacing: 0.14em;
    color: rgba(255, 224, 196, 0.85);
}

.arcane-shop__detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 32%) 1fr;
    gap: clamp(8px, 1.8vw, 16px);
    align-items: baseline;
}

.arcane-shop__detail-row dt {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(255, 206, 160, 0.92);
}

.arcane-shop__detail-row dd {
    margin: 0;
}

.arcane-shop__detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 18px);
    padding-top: clamp(12px, 2vw, 18px);
    border-top: 1px solid rgba(255, 214, 170, 0.28);
}

.arcane-shop__cta {
    --button-empty2-inline: 1.18;
}

.arcane-shop__back {
    --button-empty2-inline: 1.05;
}

.arcane-shop__footer {
    position: absolute;
    right: clamp(5%, 8vw, 120px);
    bottom: clamp(6%, 7vh, 96px);
    display: flex;
    justify-content: flex-end;
    pointer-events: auto;
    transform: translateZ(140px);
}

.arcane-shop__footer .user-btn {
    min-width: clamp(200px, 20vw, 240px);
}

@media (max-width: 1180px) {
    .arcane-shop__header {
        max-width: min(460px, 46%);
    }
}

@media (max-width: 960px) {
    .arcane-shop__header {
        left: 50%;
        max-width: min(520px, 88%);
        text-align: center;
        transform: translate(-50%, 0) translateZ(80px);
    }

    .arcane-shop__detail {
        padding: clamp(22px, 9vw, 56px);
    }

    .arcane-shop__detail-stage {
        flex-direction: column;
        margin-left: 0;
        text-align: center;
    }

    .arcane-shop__detail-pack {
        width: clamp(220px, 44vw, 280px);
        margin-left: 0;
    }

    .arcane-shop__detail-info {
        align-items: center;
        max-width: none;
    }

    .arcane-shop__detail-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .arcane-shop__footer {
        left: 50%;
        right: auto;
        bottom: clamp(5%, 10vw, 88px);
        transform: translate(-50%, 0) translateZ(140px);
    }
}

@media (max-width: 720px) {
    .shop-overlay {
        align-items: flex-start;
        justify-content: center;
        padding: clamp(18px, 8vh, 32px) clamp(16px, 7vw, 28px);
        overflow-y: auto;
    }

    .shop-overlay__scene {
        min-height: 0;
    }

    .shop-overlay__scene > .arcane-shop {
        min-height: 0;
        padding-bottom: clamp(32px, 18vw, 56px);
        align-items: center;
    }

    .arcane-shop {
        --pack-anchor-translate-y: -52%;
        --pack-rest-lift: 42px;
        --pack-ground-offset: 12px;
    }

    .arcane-shop__header {
        top: clamp(3%, 5vh, 52px);
        padding: clamp(14px, 3vw, 20px) clamp(18px, 6vw, 26px);
    }

    .shop-pack {
        width: var(--pack-width, clamp(140px, 46vw, 180px));
    }

    .arcane-shop__detail-stage {
        width: 100%;
        padding: clamp(26px, 8vw, 46px);
        gap: clamp(26px, 8vw, 38px);
    }

    .arcane-shop__detail-info {
        padding: clamp(22px, 7vw, 34px);
        gap: clamp(16px, 6vw, 24px);
    }

    .arcane-shop__detail-actions {
        justify-content: center;
    }
}

@media (max-width: 580px) {
    .arcane-shop__header {
        max-width: 92%;
    }

    .arcane-shop__detail-stage {
        align-items: stretch;
    }

    .arcane-shop__detail-info {
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-overlay,
    .shop-pack,
    .arcane-shop__detail-stage,
    .arcane-shop__detail-pack,
    .arcane-shop__detail-art,
    .arcane-shop__detail-particles span,
    .boot-torch__light {
        animation: none !important;
        transition-duration: 0.001ms !important;
    }
}

@keyframes flameFlicker {
    0% {
        transform: scale(1) translateY(0);
        opacity: 0.82;
    }

    12% {
        transform: scale(1.08) translateY(-3%);
        opacity: 1;
    }

    28% {
        transform: scale(0.96) translateY(2%);
        opacity: 0.74;
    }

    46% {
        transform: scale(1.14) translateY(-2%);
        opacity: 0.98;
    }

    68% {
        transform: scale(0.9) translateY(1%);
        opacity: 0.68;
    }

    84% {
        transform: scale(1.12) translateY(-1%);
        opacity: 0.94;
    }

    100% {
        transform: scale(1.02) translateY(0);
        opacity: 0.86;
    }
}

@keyframes packHover {
    0%, 100% {
        transform:
            translate3d(
                -50%,
                -50%,
                var(--pack-active-lift, 200px)
            )
            rotateY(var(--pack-tilt-y, 0deg))
            rotateX(var(--pack-active-tilt, 32deg))
            scale(1.12);
    }

    50% {
        transform:
            translate3d(
                -50%,
                calc(-50% - 2%),
                calc(var(--pack-active-lift, 200px) + 32px)
            )
            rotateY(var(--pack-tilt-y, 0deg))
            rotateX(calc(var(--pack-active-tilt, 32deg) - 4deg))
            scale(1.16);
    }
}

@keyframes packHoverLarge {
    0%, 100% {
        transform: rotateX(-6deg) rotateY(-12deg) translateZ(24px) translateY(0);
    }

    50% {
        transform: rotateX(-2deg) rotateY(-4deg) translateZ(42px) translateY(-12px);
    }
}

@keyframes shopAurora {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(160deg) scale(1.05);
    }

    100% {
        transform: rotate(320deg) scale(1);
    }
}