:root {
    --tr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tr-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --tr-ease-both: cubic-bezier(0.65, 0, 0.35, 1);
    --tr-ease-back: cubic-bezier(0.16, 1.1, 0.3, 1.18);
    --tr-fast: 260ms;
    --tr-base: 560ms;
    --tr-cover: 900ms;
    --tr-hold: 1500ms;
}

.vx-layer.active::after,
.jk1x-takeover::after,
.curtains.closed::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    background:
        radial-gradient(ellipse at 50% 50%,
            transparent 34%,
            rgba(0, 0, 0, 0.28) 74%,
            rgba(0, 0, 0, 0.62) 100%);
    mix-blend-mode: multiply;
    opacity: 0;
    animation: trVignette var(--tr-hold) var(--tr-ease-both) forwards;
}

@keyframes trVignette {
    0% { opacity: 0; }
    24% { opacity: 1; }
    76% { opacity: 1; }
    100% { opacity: 0; }
}

.vx-layer.active,
.jk1x-takeover {
    isolation: isolate;
}

.chest-overlay .chest-visual {
    position: relative;
}

.chest-overlay.shaking .chest-visual::before,
.chest-overlay.opened .chest-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 78%;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 238, 190, 0.95) 22%,
        #fff 50%,
        rgba(255, 238, 190, 0.95) 78%,
        transparent);
    filter: blur(3px);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation: chestSeamLight 520ms var(--tr-ease-out) forwards;
}

.chest-overlay.opened .chest-visual::before {
    animation: chestSeamFlare 620ms var(--tr-ease-out) forwards;
}

@keyframes chestSeamLight {
    0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); }
    58% { opacity: 0.55; transform: translate(-50%, -50%) scaleX(0.86); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes chestSeamFlare {
    0% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
    30% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.3) scaleY(9); }
    100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.5) scaleY(22); }
}

.chest-overlay.opened .chest-visual::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 46%;
    width: 128%;
    height: 150%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    background: conic-gradient(from 180deg at 50% 100%,
        transparent 0deg,
        rgba(255, 236, 176, 0.30) 14deg,
        transparent 26deg,
        transparent 40deg,
        rgba(255, 236, 176, 0.22) 52deg,
        transparent 64deg,
        transparent 116deg,
        rgba(255, 236, 176, 0.22) 128deg,
        transparent 140deg,
        transparent 154deg,
        rgba(255, 236, 176, 0.30) 166deg,
        transparent 180deg);
    mask-image: linear-gradient(to top, #000 4%, rgba(0, 0, 0, 0.35) 52%, transparent 88%);
    -webkit-mask-image: linear-gradient(to top, #000 4%, rgba(0, 0, 0, 0.35) 52%, transparent 88%);
    opacity: 0;
    animation: chestBeam 1400ms var(--tr-ease-out) forwards;
}

@keyframes chestBeam {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
    18% { opacity: 1; transform: translateX(-50%) scaleY(1.04); }
    100% { opacity: 0.28; transform: translateX(-50%) scaleY(1); }
}

.chest-rewards.is-bursting .gift-icon:nth-child(1) { animation-delay: 0ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(2) { animation-delay: 90ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(3) { animation-delay: 180ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(4) { animation-delay: 265ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(5) { animation-delay: 345ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(6) { animation-delay: 420ms; }
.chest-rewards.is-bursting .gift-icon:nth-child(n+7) { animation-delay: 490ms; }

.chest-overlay.shaking .chest-modal {
    animation: chestStrain 520ms var(--tr-ease-both);
}

@keyframes chestStrain {
    0% { transform: scale(1); }
    30% { transform: scale(0.985); }
    62% { transform: scale(1.012); }
    100% { transform: scale(1); }
}

.machine-frame {
    transition:
        border-color var(--tr-base) var(--tr-ease-both),
        box-shadow var(--tr-base) var(--tr-ease-both),
        background var(--tr-base) var(--tr-ease-both);
}

.machine-plaque {
    transition:
        border-color var(--tr-base) var(--tr-ease-both),
        box-shadow var(--tr-base) var(--tr-ease-both),
        color var(--tr-base) var(--tr-ease-both);
}

.reel-col {
    transition:
        border-color var(--tr-base) var(--tr-ease-both),
        box-shadow var(--tr-base) var(--tr-ease-both),
        background var(--tr-base) var(--tr-ease-both);
}

@media (prefers-reduced-motion: reduce) {

    .vx-layer.active::after,
    .jk1x-takeover::after,
    .curtains.closed::after,
    .chest-overlay.shaking .chest-visual::before,
    .chest-overlay.opened .chest-visual::before,
    .chest-overlay.opened .chest-visual::after,
    .chest-overlay.shaking .chest-modal {
        animation: none;
    }

    .machine-frame,
    .machine-plaque,
    .reel-col {
        transition: none;
    }
}

.chest-overlay.is-arming .chest-visual {
    animation: chestArming 900ms var(--tr-ease-both) infinite;
}

@keyframes chestArming {
    0% { transform: scale(1) rotate(0deg); }
    28% { transform: scale(1.035) rotate(-1.1deg); }
    58% { transform: scale(1.01) rotate(1.1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.chest-overlay.is-arming .chest-img {
    filter: drop-shadow(0 0 18px rgba(255, 236, 176, 0.75));
    transition: filter var(--tr-fast) var(--tr-ease-out);
}

.chest-overlay .chest-img {
    transition:
        transform 620ms var(--tr-ease-back),
        filter 620ms var(--tr-ease-out),
        opacity 220ms ease;
}

.chest-overlay .chest-queue {
    transition: opacity var(--tr-fast) var(--tr-ease-out);
}

.chest-overlay.is-closing .chest-modal {
    animation: chestModalDismiss 300ms var(--tr-ease-in) forwards;
}

.chest-overlay.is-closing {
    animation: chestOverlayDismiss 300ms var(--tr-ease-in) forwards;
}

@keyframes chestModalDismiss {
    0% { opacity: 1; transform: translateY(-8px) scale(1.02); }
    100% { opacity: 0; transform: translateY(-38px) scale(0.9); }
}

@keyframes chestOverlayDismiss {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

    .chest-overlay.is-arming .chest-visual,
    .chest-overlay.is-closing .chest-modal,
    .chest-overlay.is-closing {
        animation: none;
    }

    .chest-overlay .chest-img,
    .chest-overlay .chest-queue {
        transition: none;
    }
}

.reels.vx-fresh-hidden .reel-track img {
    visibility: hidden;
}

.vx-layer.fallback {
    display: block;
}

.vx-fallback {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at center, rgba(8, 6, 18, 1), rgba(0, 0, 0, 1));
    animation: vxFallbackCover 540ms var(--tr-ease-both) forwards;
    pointer-events: none;
}

.vx-fallback-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.8rem, 2.4vw, 1.3rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--gold-bright, #ffd94d);
    text-shadow: 0 0 18px rgba(255, 217, 77, 0.6);
}

@keyframes vxFallbackCover {
    0% { opacity: 0; }
    40% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vx-fallback { animation: none; opacity: 1; }
}

.vx-layer.vx-closing {
    opacity: 0;
    transition: opacity 280ms var(--tr-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .vx-layer.vx-closing { transition: none; }
}