@font-face {
    font-family: "Cinzel Decorative";
    src: url("../fonts/CinzelDecorative.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cinzel Decorative";
    src: url("../fonts/CinzelDecorative.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@supports (height: 100svh) {
    html,
    body,
    #feature-preview-screen,
    #fps-wrapper {
        height: 100svh !important;
        max-height: 100svh !important;
    }
    .start-button {
        bottom: max(env(safe-area-inset-bottom, 0px), clamp(14px, 2.6svh, 36px));
    }
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

#section-button {
    grid-area: start-button;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(1vh, 2vh, 3vh);
    text-align: center;
}
.start-button {
    position: relative;
    bottom: auto;
    transform: none;
    order: 1;
}
.loading-bar-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20vw, 25vw, 35vw);
    height: clamp(2vh, calc(2vw + 1vh), 3vh);
    background: radial-gradient(circle at center, rgba(60, 90, 120, 0.4), rgba(10, 30, 60, 0.6));
    border-radius: 999px;
    overflow: hidden;
    /*box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1),*/
    /*0 4px 12px rgba(0, 0, 0, 0.6);*/
    border: 2px solid #f8f8f8;
    z-index: 0;
}
.loading-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #04a992, #285bf4, #7e2575, #285bf4, #04a992);
    background-size: 300% 100%;
    animation: shimmer 2s linear infinite;
    transition: width 0.3s ease;
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@keyframes shimmer {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: 200% center;
    }
}
.loading-percent {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--splash-font-family);
    font-size: clamp(0.5rem, calc(1vw + 1vh), 1.5rem);
    color: white;
    font-weight: 500;
    pointer-events: none;
}
.start-button {
    font-family: var(--splash-font-family);
    width: clamp(40vw, 50vw, 60vw);
    font-size: clamp(0.5rem, 1.5vw, 1.3rem);
    text-transform: uppercase;

    text-align: center;

    letter-spacing: 0.05em;
    font-weight: 400;
    background-size: 200% auto;
    background: linear-gradient(to right, rgba(0, 139, 255, 0.9), #02af6b, rgba(0, 139, 255, 0.9));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
    border: none;

    transform: scale(0.95);
    opacity: 0;
    pointer-events: none;

    transition:
            opacity 0.6s ease,
            transform 0.4s ease;
    animation:
            gradientShift 5s linear infinite,
            pulseZoom 5s ease-in-out infinite;
}
.start-button.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}
@keyframes pulseZoom {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@media (orientation: landscape) {
    .start-button {
        font-size: clamp(0.5rem, calc(1.3vw + 1vh), 1.6rem);
    }
}
@media (orientation: portrait) {
    #section-button {
        grid-area: start-button;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1vh, 2vh, 3vh);
        text-align: center;
    }
    .start-button {
        order: 1;
    }
    .start-button {
        bottom: max(env(safe-area-inset-bottom, 0px), clamp(14px, 2.6svh, 36px));
        font-size: clamp(0.5rem, calc(1.5vw + 1vh), 1.5rem);
        text-align: center;
        padding: 0;
        text-decoration: none;
        text-transform: uppercase;
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border: none;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95) translateX(-50%);
        transition:
                opacity 0.6s ease,
                transform 0.4s ease;
        animation:
                gradientShift 5s linear infinite,
                pulseZoom 5s ease-in-out infinite;
    }
    .loading-bar-wrapper {
        bottom: clamp(2vh, 3vh, 4vh);
        left: 50%;
        transform: translateX(-50%);
        width: clamp(40dvw, 45dvw, 50dvw);
        height: clamp(1.6dvh, 2dvh, 2.5dvh);
        background: radial-gradient(circle at center, rgba(60, 90, 120, 0.4), rgba(10, 30, 60, 0.6));
        border-radius: 999px;
        overflow: hidden;
        /*box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.6);*/
        border: 2px solid #f8f8f8;
        position: absolute;
    }
    .start-button.visible {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1) translateX(-50%);
    }
    .logo__img {
        width: min(44vw, 280px);
    }
    .slot {
        width: min(94vw, 660px);
    }
    .ball {
        width: min(92vw, 620px);
    }
    .ball--magic {
        width: min(70vw, 420px);
    }
    .ball__img {
        width: 78%;
    }
    .ball__stand {
        width: 62%;
        top: 74%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) {
        grid-template-rows:
            minmax(0, 0.13fr) /* logo */
            minmax(0, 0.49fr) /* slot */
            minmax(0, 0.06fr) /* slot text */
            minmax(0, 0.38fr) /* ball */
            minmax(0, 0.06fr) /* ball text */
            minmax(0, 0.02fr); /* reserve */
        gap: clamp(6px, 1.1vh, 10px);
        padding: clamp(10px, 1.8vh, 16px);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#fps {
    --fps-scale: 1;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: #070516;

    --fps-scale: 1;
}
#fps::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 4, 18, 0.42) 0%, rgba(6, 4, 18, 0.58) 100%);
    pointer-events: none;
    z-index: 0;
}
.fps-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (orientation: landscape) {
    .fps-bg {
        object-position: center top;
    }
}
/* region Magic Lights */
.magic-lights {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.magic-light {
    position: absolute;
    width: clamp(26px, 5.5vw, 56px);
    height: auto;
    opacity: 1;
    mix-blend-mode: screen;
}
#fps-wrapper,
#section-button {
    position: relative;
    z-index: 2;
}
.light--1 {
    left: 8%;
    top: 82%;
    width: clamp(28px, 5.5vw, 56px);
    animation: magicFloat1 9s ease-in-out infinite;
}
.light--2 {
    left: 22%;
    top: 64%;
    width: clamp(20px, 4vw, 36px);
    animation: magicFloat2 12s ease-in-out infinite 1.5s;
}
.light--3 {
    left: 44%;
    top: 78%;
    width: clamp(30px, 6vw, 64px);
    animation: magicFloat3 10s ease-in-out infinite 0.4s;
}
.light--4 {
    left: 68%;
    top: 70%;
    width: clamp(18px, 3.5vw, 28px);
    animation: magicFloat4 13s ease-in-out infinite 2s;
}
.light--5 {
    left: 85%;
    top: 84%;
    width: clamp(24px, 5vw, 48px);
    animation: magicFloat5 11s ease-in-out infinite 0.8s;
}
.light--6 {
    left: 14%;
    top: 42%;
    width: clamp(16px, 3.2vw, 24px);
    animation: magicFloat6 14s ease-in-out infinite 3s;
}
.light--7 {
    left: 52%;
    top: 52%;
    width: clamp(18px, 3.8vw, 32px);
    animation: magicFloat7 15s ease-in-out infinite 1s;
}
.light--8 {
    left: 76%;
    top: 38%;
    width: clamp(16px, 3.2vw, 24px);
    animation: magicFloat8 16s ease-in-out infinite 2.6s;
}
.light--9 {
    left: 5%;
    top: 56%;
    width: clamp(20px, 4vw, 34px);
    animation: magicFloat6 13s ease-in-out infinite 1.2s;
}
.light--10 {
    left: 18%;
    top: 88%;
    width: clamp(28px, 5.8vw, 58px);
    animation: magicFloat3 11s ease-in-out infinite 2.4s;
}
.light--11 {
    left: 32%;
    top: 72%;
    width: clamp(22px, 4.6vw, 42px);
    animation: magicFloat8 15s ease-in-out infinite 0.7s;
}
.light--12 {
    left: 48%;
    top: 92%;
    width: clamp(30px, 6vw, 64px);
    animation: magicFloat1 12s ease-in-out infinite 1.8s;
}
.light--13 {
    left: 60%;
    top: 58%;
    width: clamp(18px, 3.8vw, 32px);
    animation: magicFloat7 16s ease-in-out infinite 3.1s;
}
.light--14 {
    left: 72%;
    top: 86%;
    width: clamp(26px, 5.4vw, 52px);
    animation: magicFloat5 10s ease-in-out infinite 0.5s;
}
.light--15 {
    left: 88%;
    top: 62%;
    width: clamp(20px, 4.2vw, 36px);
    animation: magicFloat2 14s ease-in-out infinite 2.2s;
}
.light--16 {
    left: 96%;
    top: 90%;
    width: clamp(24px, 5vw, 48px);
    animation: magicFloat4 17s ease-in-out infinite 1.4s;
}
.light--17 {
    left: 6%;
    top: 72%;
    width: clamp(48px, 8.5vw, 48px);
    animation: magicBigFloat1 14s ease-in-out infinite;
}
.light--18 {
    left: 18%;
    top: 52%;
    width: clamp(42px, 7.5vw, 42px);
    animation: magicBigFloat2 16s ease-in-out infinite 1.2s;
}
.light--19 {
    left: 30%;
    top: 84%;
    width: clamp(54px, 9vw, 46px);
    animation: magicBigFloat3 13s ease-in-out infinite 0.5s;
}
.light--20 {
    left: 42%;
    top: 62%;
    width: clamp(46px, 8vw, 40px);
    animation: magicBigFloat4 17s ease-in-out infinite 2s;
}
.light--21 {
    left: 56%;
    top: 78%;
    width: clamp(52px, 9vw, 58px);
    animation: magicBigFloat5 15s ease-in-out infinite 0.8s;
}
.light--22 {
    left: 68%;
    top: 48%;
    width: clamp(44px, 7.8vw, 48px);
    animation: magicBigFloat6 18s ease-in-out infinite 1.6s;
}
.light--23 {
    left: 80%;
    top: 82%;
    width: clamp(56px, 9.5vw, 44px);
    animation: magicBigFloat7 14s ease-in-out infinite 0.3s;
}
.light--24 {
    left: 92%;
    top: 60%;
    width: clamp(48px, 8.2vw, 36px);
    animation: magicBigFloat8 19s ease-in-out infinite 2.4s;
}
@keyframes magicFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.4);
        opacity: 0;
    }
    15% {
        opacity: 0.85;
    }
    50% {
        transform: translate3d(26vw, -34vh, 0) scale(0.8);
        opacity: 0.65;
    }
    85% {
        opacity: 0.9;
    }
    100% {
        transform: translate3d(42vw, -78vh, 0) scale(0.25);
        opacity: 0;
    }
}
@keyframes magicFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.3);
        opacity: 0;
    }
    20% {
        opacity: 0.75;
    }
    55% {
        transform: translate3d(-12vw, -28vh, 0) scale(0.65);
        opacity: 0.5;
    }
    100% {
        transform: translate3d(18vw, -62vh, 0) scale(0.2);
        opacity: 0;
    }
}
@keyframes magicFloat3 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.35);
        opacity: 0;
    }
    18% {
        opacity: 0.9;
    }
    48% {
        transform: translate3d(-18vw, -26vh, 0) scale(0.75);
        opacity: 0.7;
    }
    100% {
        transform: translate3d(-32vw, -70vh, 0) scale(0.22);
        opacity: 0;
    }
}
@keyframes magicFloat4 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.25);
        opacity: 0;
    }
    22% {
        opacity: 0.8;
    }
    60% {
        transform: translate3d(10vw, -36vh, 0) scale(0.55);
        opacity: 0.45;
    }
    100% {
        transform: translate3d(-8vw, -74vh, 0) scale(0.18);
        opacity: 0;
    }
}
@keyframes magicFloat5 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.32);
        opacity: 0;
    }
    15% {
        opacity: 0.85;
    }
    45% {
        transform: translate3d(-22vw, -30vh, 0) scale(0.7);
        opacity: 0.6;
    }
    100% {
        transform: translate3d(-36vw, -76vh, 0) scale(0.2);
        opacity: 0;
    }
}
@keyframes magicFloat6 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.2);
        opacity: 0;
    }
    25% {
        opacity: 0.7;
    }
    65% {
        transform: translate3d(20vw, -18vh, 0) scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: translate3d(36vw, -48vh, 0) scale(0.15);
        opacity: 0;
    }
}
@keyframes magicFloat7 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.22);
        opacity: 0;
    }
    20% {
        opacity: 0.75;
    }
    50% {
        transform: translate3d(-10vw, -20vh, 0) scale(0.52);
        opacity: 0.6;
    }
    100% {
        transform: translate3d(12vw, -54vh, 0) scale(0.16);
        opacity: 0;
    }
}
@keyframes magicFloat8 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.2);
        opacity: 0;
    }
    18% {
        opacity: 0.7;
    }
    58% {
        transform: translate3d(-24vw, -18vh, 0) scale(0.48);
        opacity: 0.55;
    }
    100% {
        transform: translate3d(-40vw, -52vh, 0) scale(0.14);
        opacity: 0;
    }
}
@keyframes magicBigFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }
    50% {
        transform: translate3d(18vw, -24vh, 0) scale(1.15);
    }
    100% {
        transform: translate3d(34vw, -52vh, 0) scale(0.85);
    }
}
@keyframes magicBigFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.85);
    }
    50% {
        transform: translate3d(-10vw, -20vh, 0) scale(1.12);
    }
    100% {
        transform: translate3d(12vw, -46vh, 0) scale(0.8);
    }
}
@keyframes magicBigFloat3 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }
    50% {
        transform: translate3d(12vw, -28vh, 0) scale(1.2);
    }
    100% {
        transform: translate3d(-14vw, -58vh, 0) scale(0.85);
    }
}
@keyframes magicBigFloat4 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
        transform: translate3d(-16vw, -22vh, 0) scale(1.08);
    }
    100% {
        transform: translate3d(10vw, -50vh, 0) scale(0.78);
    }
}
@keyframes magicBigFloat5 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.9);
    }
    50% {
        transform: translate3d(14vw, -24vh, 0) scale(1.18);
    }
    100% {
        transform: translate3d(-12vw, -54vh, 0) scale(0.82);
    }
}
@keyframes magicBigFloat6 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.85);
    }
    50% {
        transform: translate3d(-12vw, -18vh, 0) scale(1.1);
    }
    100% {
        transform: translate3d(16vw, -44vh, 0) scale(0.8);
    }
}
@keyframes magicBigFloat7 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    50% {
        transform: translate3d(-18vw, -26vh, 0) scale(1.22);
    }
    100% {
        transform: translate3d(-30vw, -56vh, 0) scale(0.88);
    }
}
@keyframes magicBigFloat8 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.85);
    }
    50% {
        transform: translate3d(-14vw, -20vh, 0) scale(1.12);
    }
    100% {
        transform: translate3d(-26vw, -48vh, 0) scale(0.8);
    }
}
/* endregion */
#fps-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
        minmax(0, 0.16fr) /* logo */
        minmax(0, 0.34fr) /* slot */
        minmax(0, 0.06fr) /* slot text */
        minmax(0, 0.18fr) /* row images (cards + jackpot) */
        minmax(0, 0.08fr) /* row texts */
        minmax(0, 0.3fr) /* ball */
        minmax(0, 0.06fr) /* ball text */
        minmax(0, 0.1fr); /* (reserve) */

    padding: clamp(14px, 2.2vh, 18px);
    gap: clamp(10px, 1.8vh, 14px);

    align-items: center;
    justify-items: center;

    background: transparent;
    overflow: visible;

    transform-origin: 50% 50%;
    transform: scale(var(--fps-scale));
}

#fps-wrapper:not(:has(.p-row, .p-rowText)) {
    grid-template-rows:
        minmax(0, 0.18fr) /* logo */
        minmax(0, 0.42fr) /* slot */
        minmax(0, 0.08fr) /* slot text */
        minmax(0, 0.32fr) /* ball */
        minmax(0, 0.08fr) /* ball text */
        minmax(0, 0.12fr); /* reserve */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.p-logo,
.p-slot,
.p-slotText,
.p-row,
.p-rowText,
.p-ball,
.p-ballText,
.p-continue {
    display: grid;
    place-items: center;
    width: 100%;
}

.p-row,
.p-rowText {
    /*margin-top: -7vh;*/
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(14px, 4vw, 24px);
}

.cardsBox,
.jackpotBox {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.logo__img,
.slot__img,
.jackpotBox__img,
.ball__img,
.ball__pointer {
    display: block;
    margin-inline: auto;
}

.p-logo {
    width: 100%;
    display: grid;
    place-items: center;
}
.p-slot {
    width: 100%;
    display: grid;
    place-items: center;
}
.p-slotText {
    width: 100%;
    display: grid;
    place-items: center;
}
.p-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 4vw, 24px);
    align-items: center;
    justify-items: center;
    overflow: visible;
}
.p-rowText {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 4vw, 24px);
    align-items: center;
    justify-items: center;
}
.p-ball {
    /*margin-top: -7vh;*/
    width: 100%;
    display: grid;
    place-items: center;
}
.p-ballText {
    width: 100%;
    display: grid;
    place-items: center;
}
.p-continue {
    width: 100%;
    display: grid;
    place-items: center;
}

.logo__img {
    width: min(46vw, 220px);
    max-height: 100%;
    height: auto;
    object-fit: contain;
    transform-origin: 50% 60%;
    animation: logoPulse 3s ease-in-out infinite;
    z-index: 2;
}

.slot {
    position: relative;
    width: min(80vw, 520px);
    max-height: 100%;
    height: auto;
    display: grid;
    place-items: center;
}
.slot__img {
    width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.cardsBox,
.jackpotBox {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.cardsBox__img,
.jackpotBox__img {
    width: min(42vw, 360px);
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.cardsBox {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
.cardsStack {
    position: relative;
    width: min(38vw, 260px);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 2.4;
    perspective: 1400px;
    perspective-origin: 50% 46%;
}
.fps-card {
    position: absolute;
    z-index: 2;
    width: 30%;
    aspect-ratio: 162 / 225;
    transform-origin: 50% 80%;
    transform-style: preserve-3d;
    filter:
        drop-shadow(0 10px 14px rgba(8, 5, 18, 0.5))
        drop-shadow(0 0 12px rgba(26, 168, 120, 0.12));
}

.card--1 {
    left: 3%;
    top: 24%;
    --r: -10deg;
    --flip-delay: 0.08s;
    transform: rotate(-10deg);
}
.card--2 {
    left: 22%;
    top: 42%;
    --r: -4deg;
    --flip-delay: 0.5s;
    transform: rotate(-4deg);
}
.card--3 {
    left: 45%;
    top: 8%;
    --r: 6deg;
    --flip-delay: 0.92s;
    transform: rotate(6deg);
}
.card--4 {
    left: 68%;
    top: 32%;
    --r: 12deg;
    --flip-delay: 1.34s;
    transform: rotate(12deg);
}
.cardFlip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: cardSequentialFlip 0.72s cubic-bezier(0.24, 0.82, 0.22, 1) both;
    animation-delay: var(--flip-delay, 0s);
    animation-play-state: running;
    will-change: transform;
}
body:has(#preloader-screen:not(.fade-out)) #fps .cardFlip__inner {
    animation-play-state: paused;
}
.cardFace {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.cardFace--back {
    z-index: 2;
    transform: rotateY(0deg) translateZ(1px);
}
.cardFace--front {
    z-index: 1;
    transform: rotateY(180deg) translateZ(1px);
}
@keyframes cardSequentialFlip {
    0% {
        transform: rotateY(0deg) translateY(0) scale(1);
    }
    14% {
        transform: rotateY(0deg) translateY(0) scale(1);
    }
    44% {
        transform: rotateY(88deg) translateY(-1px) scale(1.03);
    }
    60% {
        transform: rotateY(108deg) translateY(-2px) scale(1.04);
    }
    82% {
        transform: rotateY(180deg) translateY(-1px) scale(1.015);
    }
    100% {
        transform: rotateY(180deg) translateY(0) scale(1);
    }
}
@keyframes featureMagicShadePulse {
    0%,
    100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(0.96);
    }
    50% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1.04);
    }
}
/* ball */
.ball {
    position: relative;
    width: min(75%, 460px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: visible;
}
.ball--magic {
    max-width: none;
    aspect-ratio: 1929 / 1384;
    isolation: isolate;
}
.magic-ball__scene,
.magic-ball__aura,
.magic-ball__glow,
.magic-ball__flame,
.magic-ball__number {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
}
.magic-ball__scene {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    filter:
        drop-shadow(0 16px 24px rgba(8, 5, 18, 0.56))
        drop-shadow(0 0 20px rgba(26, 168, 120, 0.16));
    /*animation: fpsMagicSceneBreathe 5.8s ease-in-out infinite;*/
}
.magic-ball__aura {
    left: 50%;
    top: 45%;
    width: 100%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.72;
    mix-blend-mode: screen;
    filter: saturate(1.08) brightness(1.08);
    z-index: 2;
    animation: fpsMagicAuraFlicker 1.5s steps(4, end) infinite;
}
.aura--top {
    clip-path: inset(0 0 43% 0);
    animation-delay: -0.25s;
}
.aura--left {
    clip-path: inset(0 76% 0 0);
    animation-delay: -0.9s;
}
.aura--right {
    clip-path: inset(0 0 0 76%);
    animation-delay: -1.15s;
}
.magic-ball__glow {
    left: 33%;
    top: 12%;
    width: 34%;
    height: 46%;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(120, 255, 208, 0.45) 0%,
            rgba(62, 247, 190, 0.24) 34%,
            rgba(24, 198, 136, 0.08) 52%,
            rgba(24, 198, 136, 0) 74%
    );
    mix-blend-mode: screen;
    z-index: 3;
    animation: fpsMagicGlowPulse 3.2s ease-in-out infinite;
}
.magic-ball__flame {
    z-index: 4;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(255, 247, 188, 0.95) 0%,
            rgba(255, 210, 108, 0.68) 28%,
            rgba(255, 149, 58, 0.28) 54%,
            rgba(255, 120, 42, 0.08) 68%,
            transparent 80%
    );
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    animation: fpsMagicFlameFlicker 0.28s infinite alternate;
}
.mw-flame-left {
    left: 31%;
    top: 51.2%;
    width: 5.2%;
    animation-delay: -0.08s;
}
.mw-flame-right {
    left: 70%;
    top: 41%;
    width: 5.8%;
    animation-delay: -0.17s;
}
.mw-flame-front {
    left: 60.6%;
    top: 69.6%;
    width: 7.3%;
    animation-delay: -0.03s;
}
.magic-ball__number {
    z-index: 5;
    transform-origin: center center;
    animation-name: fpsMagicNumberFloat;
    animation-duration: var(--float-duration, 4.8s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.mw-n1-left {
    left: 23%;
    top: 20%;
    width: 5.9%;
    --move-x: -8%;
    --move-y: -16%;
    --rotate-start: -6deg;
    --rotate-mid: 2deg;
    --rotate-end: -4deg;
    --float-duration: 4.9s;
    animation-delay: -0.4s;
}
.mw-n1-top {
    left: 29%;
    top: 11%;
    width: 4.8%;
    --move-x: 7%;
    --move-y: -14%;
    --rotate-start: -11deg;
    --rotate-mid: 5deg;
    --rotate-end: -7deg;
    --float-duration: 5.5s;
    animation-delay: -1.3s;
}
.mw-n1-right {
    left: 82%;
    top: 24%;
    width: 5.8%;
    --move-x: 9%;
    --move-y: -15%;
    --rotate-start: -4deg;
    --rotate-mid: 6deg;
    --rotate-end: -5deg;
    --float-duration: 5.1s;
    animation-delay: -0.8s;
}
.mw-n2-top {
    left: 81%;
    top: 47%;
    width: 7.7%;
    --move-x: 10%;
    --move-y: -18%;
    --rotate-start: 3deg;
    --rotate-mid: -4deg;
    --rotate-end: 6deg;
    --float-duration: 5.9s;
    animation-delay: -1.1s;
}
.mw-n2-bottom {
    left: 94%;
    top: 57%;
    width: 6.2%;
    --move-x: 8%;
    --move-y: -12%;
    --rotate-start: -8deg;
    --rotate-mid: 4deg;
    --rotate-end: -3deg;
    --float-duration: 4.7s;
    animation-delay: -1.95s;
}
.mw-n3 {
    left: 17%;
    top: 39%;
    width: 7.1%;
    --move-x: -10%;
    --move-y: -15%;
    --rotate-start: -3deg;
    --rotate-mid: 4deg;
    --rotate-end: -6deg;
    --float-duration: 5.3s;
    animation-delay: -1.55s;
}
.mw-n4 {
    left: 56%;
    top: 3%;
    width: 8.8%;
    --move-x: 7%;
    --move-y: -10%;
    --rotate-start: -9deg;
    --rotate-mid: 3deg;
    --rotate-end: -4deg;
    --float-duration: 5.7s;
    animation-delay: -0.25s;
}
.mw-n5 {
    left: 6%;
    top: 50%;
    width: 8.2%;
    --move-x: -8%;
    --move-y: -12%;
    --rotate-start: 4deg;
    --rotate-mid: -3deg;
    --rotate-end: 5deg;
    --float-duration: 5.2s;
    animation-delay: -0.65s;
}
.mw-n6 {
    left: 44%;
    top: 64%;
    width: 5.2%;
    --move-x: 6%;
    --move-y: -12%;
    --rotate-start: -5deg;
    --rotate-mid: 5deg;
    --rotate-end: -2deg;
    --float-duration: 4.8s;
    animation-delay: -1.45s;
}
.mw-n7 {
    left: 44%;
    top: 10%;
    width: 6.4%;
    --move-x: -7%;
    --move-y: -16%;
    --rotate-start: -2deg;
    --rotate-mid: 4deg;
    --rotate-end: -5deg;
    --float-duration: 5.6s;
    animation-delay: -1.2s;
}
.mw-n8 {
    left: 68%;
    top: 12%;
    width: 6.8%;
    --move-x: 7%;
    --move-y: -15%;
    --rotate-start: 3deg;
    --rotate-mid: -5deg;
    --rotate-end: 6deg;
    --float-duration: 6s;
    animation-delay: -0.9s;
}
.mw-n9 {
    left: 10%;
    top: 25%;
    width: 6.6%;
    --move-x: -6%;
    --move-y: -14%;
    --rotate-start: 2deg;
    --rotate-mid: -4deg;
    --rotate-end: 5deg;
    --float-duration: 5.4s;
    animation-delay: -1.75s;
}
@keyframes fpsMagicAuraFlicker {
    0% {
        opacity: 0.44;
    }
    22% {
        opacity: 0.9;
    }
    48% {
        opacity: 0.56;
    }
    72% {
        opacity: 0.84;
    }
    100% {
        opacity: 0.66;
    }
}
@keyframes fpsMagicGlowPulse {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.14);
    }
}
@keyframes fpsMagicFlameFlicker {
    0% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.82);
    }
    45% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.06);
    }
    100% {
        opacity: 0.58;
        transform: translate(-50%, -50%) scale(0.92);
    }
}
@keyframes fpsMagicNumberFloat {
    0% {
        transform:
                translate3d(0, 0, 0)
                rotate(var(--rotate-start, -2deg))
                scale(1);
        opacity: 0.55;
    }
    25% {
        transform:
                translate3d(var(--move-x, 6%), calc(var(--move-y, -14%) * 0.55), 0)
                rotate(var(--rotate-mid, 4deg))
                scale(1.04);
        opacity: 0.9;
    }
    50% {
        transform:
                translate3d(calc(var(--move-x, 6%) * -0.45), var(--move-y, -14%), 0)
                rotate(var(--rotate-end, -5deg))
                scale(1.08);
        opacity: 1;
    }
    75% {
        transform:
                translate3d(calc(var(--move-x, 6%) * -0.95), calc(var(--move-y, -14%) * 0.35), 0)
                rotate(var(--rotate-mid, 4deg))
                scale(1.03);
        opacity: 0.84;
    }
    100% {
        transform:
                translate3d(0, 0, 0)
                rotate(var(--rotate-start, -2deg))
                scale(1);
        opacity: 0.55;
    }
}
.ball__img {
    position: relative;
    z-index: 2;
    width: 70%;
    display: block;
    transform-origin: 50% 50%;
    animation: ballWiggle 4.8s linear infinite;
}
@keyframes ballWiggle {
    10% {
        transform: rotate(0.8deg);
    }
    20% {
        transform: rotate(1.4deg);
    }
    30% {
        transform: rotate(1.6deg);
    }
    40% {
        transform: rotate(1.2deg);
    }
    50% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(-1.2deg);
    }
    70% {
        transform: rotate(-1.6deg);
    }
    80% {
        transform: rotate(-1.4deg);
    }
    90% {
        transform: rotate(-0.8deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.ball__pointer {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 20%;
    width: 10%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 90%;
}
.ball__stand {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 73%;
    width: 58%;
    height: auto;
    transform: translate(-50%, -35%);
    pointer-events: none;
}

.reel-description {
    font-family:
            system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            Arial,
            sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #ffffff;
    text-shadow:
            0 0 2px rgba(0, 0, 0, 0.9),
            0 0 6px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(0, 0, 0, 0.55),
            0 0 22px rgba(0, 0, 0, 0.35);
    text-align: center;
    user-select: none;
    width: 100%;
    text-align: center;
    z-index: 2;
    margin-top: -7vh;
}
.ball-description {
    font-family:
            system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            Arial,
            sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #ffffff;
    text-shadow:
            0 0 2px rgba(0, 0, 0, 0.9),
            0 0 6px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(0, 0, 0, 0.55),
            0 0 22px rgba(0, 0, 0, 0.35);
    text-align: center;
    user-select: none;
    width: 80%;
    text-align: center;
    z-index: 2;
    /*margin-top: -1vh;*/
}
.description {
    font-family:
            system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            Arial,
            sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #ffffff;
    text-shadow:
            0 0 2px rgba(0, 0, 0, 0.9),
            0 0 6px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(0, 0, 0, 0.55),
            0 0 22px rgba(0, 0, 0, 0.35);
    text-align: center;
    user-select: none;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.continue {
    border: 0;
    background: transparent;
    color: rgba(80, 255, 255, 0.92);
    font:
            700 clamp(14px, 2vh, 18px) / 1 system-ui,
            -apple-system,
            Segoe UI,
            Roboto,
            Arial,
            sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.continue:active {
    transform: translateY(1px);
}

.wild {
    position: absolute;
    --x: 50%;
    --y: 20%;
    --size: 18%;
    --gx: 0px;
    --gy: -12%;

    left: var(--x);
    top: var(--y);
    width: var(--size);
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wild--1 {
    --x: 38%;
    --y: 50%;
    --size: 16%;
}
.wild--2 {
    --x: 73%;
    --y: 50%;
    --size: 16%;
}
.wild--3 {
    --x: 62%;
    --y: 34%;
    --size: 16%;
}
.wild__chip {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 55%;
    animation: wildPulse 2.6s ease-in-out infinite;
    filter:
        drop-shadow(0 10px 14px rgba(8, 5, 18, 0.48))
        drop-shadow(0 0 5px rgba(88, 191, 255, 0.48))
        drop-shadow(0 0 12px rgba(59, 128, 255, 0.3));
}

.slot {
    position: relative;
    isolation: isolate;
}
.slot__img {
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 12px 18px rgba(8, 5, 18, 0.52))
        drop-shadow(0 0 14px rgba(26, 168, 120, 0.14));
}

.wild {
    position: absolute;
    z-index: 10;
}
.wild::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    transform: translate(-50%, -50%) translate(var(--gx), var(--gy)) scale(1);
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgb(175 217 255 / 86%) 0%, rgb(84 220 255 / 46%) 24%, rgb(43 179 255 / 22%) 48%, rgba(22, 120, 255, 0.08) 64%, transparent 76%);
    mix-blend-mode: screen;
    animation: wildGlowPulse 2.6s ease-in-out infinite;
}
.wild--1 {
    --gx: 0px;
    --gy: -16%;
}
.wild--2 {
    --gx: 0px;
    --gy: -16%;
}
.wild--3 {
    --gx: 0px;
    --gy: -14%;
}

.wild--2 .wild__chip,
.wild--2::before {
    animation-delay: 0.35s;
}
.wild--3 .wild__chip,
.wild--3::before {
    animation-delay: 0.75s;
}

@keyframes logoPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}
@keyframes wildPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }
}
@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}
@keyframes wildGlowPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: translate(-50%, -50%) translate(var(--gx), var(--gy)) scale(0.96);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) translate(var(--gx), var(--gy)) scale(1.08);
    }
}
@keyframes ballBreathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }
}
@keyframes pointerTick {
    0%,
    100% {
        transform: translateX(-50%) rotate(0deg);
    }

    50% {
        transform: translateX(-50%) rotate(-1.2deg);
    }
}

.cardsStack {
    position: relative;
    /*isolation: isolate; */
}
.cardTrail {
    position: absolute;
    left: 46%;
    top: -90%;
    width: 110%;
    height: auto;

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

    opacity: 0.35;

    /* pop + idle */
    animation:
            trailPop 720ms ease-out both,
            trailIdle 5.2s ease-in-out infinite;
    animation-delay: 0.6s, calc(0.6s + 720ms);
}

@keyframes trailPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -16px) scale(0.95);
    }
    45% {
        opacity: 0.75;
        transform: translate(-50%, 0px) scale(1.02);
    }
    100% {
        opacity: 0.35;
        transform: translate(-50%, 10px) scale(1.03);
    }
}
@keyframes trailIdle {
    0%,
    100% {
        opacity: 0.55;
        transform: translate(-50%, 10px) scale(1.03);
    }
    50% {
        opacity: 0.75;
        transform: translate(-50%, 6px) scale(1.04);
    }
}

.jackpotBox {
    position: relative;
    width: min(100%, 430px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1929 / 1378;
    display: grid;
    place-items: center;
    overflow: visible;
    /*justify-self: start;*/
    isolation: isolate;
    transform-origin: center;
}
.jackpotBox--magic {
    max-width: none;
}
.jackpot-magic__scene,
.jackpot-magic__aura,
.jackpot-magic__glow,
.jackpot-magic__title,
.jackpot-magic__flame,
.jackpot-magic__symbol {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
}
.jackpot-magic__scene {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    filter:
        drop-shadow(0 16px 24px rgba(18, 6, 10, 0.56))
        drop-shadow(0 0 18px rgba(255, 138, 72, 0.22));
}
.jackpot-magic__aura {
    left: 50%;
    top: 31%;
    width: 102%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.74;
    mix-blend-mode: screen;
    filter: saturate(1.08) brightness(1.08);
    z-index: 2;
    animation: fpsJackpotAuraFlicker 1.5s steps(4, end) infinite;
}
.jaura--top {
    clip-path: inset(0 0 30% 0);
    animation-delay: -0.24s;
}
.jaura--left {
    clip-path: inset(16% 58% 8% 0);
    animation-delay: -0.88s;
}
.jaura--right {
    clip-path: inset(16% 0 8% 58%);
    animation-delay: -1.12s;
}
.jackpot-magic__title {
    left: 50%;
    top: 38%;
    width: 62%;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 6;
    filter:
        drop-shadow(0 10px 20px rgba(28, 6, 10, 0.6))
        drop-shadow(0 0 16px rgba(255, 170, 72, 0.2));
    transform-origin: 50% 50%;
    animation: jackpotTitlePulse 2.8s ease-in-out infinite;
}
.jackpot-magic__flame {
    z-index: 4;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(255, 247, 188, 0.95) 0%,
            rgba(255, 210, 108, 0.68) 28%,
            rgba(255, 149, 58, 0.28) 54%,
            rgba(255, 120, 42, 0.08) 68%,
            transparent 80%
    );
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    animation: fpsMagicFlameFlicker 0.28s infinite alternate;
}
.jw-flame-left {
    left: 23%;
    top: 52.9%;
    width: 6.6%;
    animation-delay: -0.08s;
}
.jw-flame-front {
    left: 29%;
    top: 62%;
    width: 5.9%;
    animation-delay: -0.02s;
}
.jackpot-magic__symbol {
    z-index: 5;
    transform-origin: center center;
    animation-name: fpsJackpotSuitFloat;
    animation-duration: var(--float-duration, 4.8s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.js-diamond-large {
    left: 8%;
    top: 24%;
    width: 11.2%;
    --move-x: -8%;
    --move-y: -14%;
    --rotate-start: -8deg;
    --rotate-mid: 4deg;
    --rotate-end: -5deg;
    --float-duration: 5.1s;
    animation-delay: -0.4s;
}
.js-diamond-small-a {
    left: 27%;
    top: 9%;
    width: 5.6%;
    --move-x: 6%;
    --move-y: -12%;
    --rotate-start: -10deg;
    --rotate-mid: 5deg;
    --rotate-end: -7deg;
    --float-duration: 5.7s;
    animation-delay: -1.15s;
}
.js-diamond-small-b {
    left: 86%;
    top: 22%;
    width: 5.9%;
    --move-x: 8%;
    --move-y: -14%;
    --rotate-start: -4deg;
    --rotate-mid: 6deg;
    --rotate-end: -3deg;
    --float-duration: 5.2s;
    animation-delay: -0.92s;
}
.js-spade-large {
    left: 70%;
    top: 8%;
    width: 10.8%;
    --move-x: 8%;
    --move-y: -13%;
    --rotate-start: -5deg;
    --rotate-mid: 5deg;
    --rotate-end: -2deg;
    --float-duration: 5.9s;
    animation-delay: -0.72s;
}
.js-spade-small {
    left: 90%;
    top: 37%;
    width: 7.1%;
    --move-x: 7%;
    --move-y: -11%;
    --rotate-start: 3deg;
    --rotate-mid: -4deg;
    --rotate-end: 5deg;
    --float-duration: 4.9s;
    animation-delay: -1.85s;
}
.js-club-large {
    left: 7%;
    top: 55%;
    width: 10.8%;
    --move-x: -7%;
    --move-y: -12%;
    --rotate-start: 2deg;
    --rotate-mid: -4deg;
    --rotate-end: 4deg;
    --float-duration: 5.4s;
    animation-delay: -1.38s;
}
.js-heart {
    left: 50%;
    top: 6%;
    width: 11.2%;
    --move-x: 6%;
    --move-y: -10%;
    --rotate-start: -3deg;
    --rotate-mid: 4deg;
    --rotate-end: -6deg;
    --float-duration: 5.8s;
    animation-delay: -0.18s;
}
.js-club-small {
    left: 16%;
    top: 3%;
    width: 7.8%;
    --move-x: 7%;
    --move-y: -10%;
    --rotate-start: -4deg;
    --rotate-mid: 3deg;
    --rotate-end: -2deg;
    --float-duration: 5s;
    animation-delay: -1.62s;
}

@keyframes fpsJackpotAuraFlicker {
    0% {
        opacity: 0.42;
    }
    22% {
        opacity: 0.9;
    }
    48% {
        opacity: 0.56;
    }
    72% {
        opacity: 0.86;
    }
    100% {
        opacity: 0.66;
    }
}
@keyframes fpsJackpotGlowPulse {
    0%,
    100% {
        opacity: 0.44;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.16);
    }
}
@keyframes jackpotTitlePulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.025);
    }
}
@keyframes fpsJackpotSuitFloat {
    0% {
        transform:
                translate3d(0, 0, 0)
                rotate(var(--rotate-start, -2deg))
                scale(1);
        opacity: 0.58;
    }
    25% {
        transform:
                translate3d(var(--move-x, 6%), calc(var(--move-y, -14%) * 0.55), 0)
                rotate(var(--rotate-mid, 4deg))
                scale(1.04);
        opacity: 0.9;
    }
    50% {
        transform:
                translate3d(calc(var(--move-x, 6%) * -0.45), var(--move-y, -14%), 0)
                rotate(var(--rotate-end, -5deg))
                scale(1.08);
        opacity: 1;
    }
    75% {
        transform:
                translate3d(calc(var(--move-x, 6%) * -0.95), calc(var(--move-y, -14%) * 0.35), 0)
                rotate(var(--rotate-mid, 4deg))
                scale(1.03);
        opacity: 0.84;
    }
    100% {
        transform:
                translate3d(0, 0, 0)
                rotate(var(--rotate-start, -2deg))
                scale(1);
        opacity: 0.58;
    }
}
#section-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: max(env(safe-area-inset-bottom, 0px));
    z-index: 1;
}

@media (orientation: portrait) and (max-width: 375px) and (max-height: 700px) {
    .slot,
    .cardsStack,
    .jackpotBox,
    .ball,
    .p-logo {
        transform: scale(0.85);
    }
}
@media (orientation: portrait) and (min-width: 480px) and (max-width: 620px) and (max-height: 760px) {
    .slot,
    .cardsStack,
    .jackpotBox,
    .ball {
        transform: scale(0.85);
    }
    .p-logo {
        transform: scale(0.75);
    }
}
@media (orientation: portrait) and (min-width: 768px) {
    .ball {
        transform: scale(0.85);
    }
    .p-row,
    .p-rowText {
        margin-top: 10px;
    }
    .cardsStack {
        margin-top: -2vh;
        width: 25vh;
    }
    .ball-description {
        width: 50%;
    }
    .description {
        width: 70%;
    }
}

@media (orientation: landscape) {
    #fps {
        background: #070516;
    }
    #fps-wrapper {
        --fps-landscape-inset: clamp(12px, 3vw, 40px);
        --fps-landscape-cards-lift: clamp(-280px, -22vh, -120px);
        --fps-landscape-jackpot-y: -20vh;
        --fps-landscape-jackpot-scale: 1;
        --fps-landscape-ball-y: 3vh;
        --fps-landscape-ball-scale: 1;

        grid-template-columns:
            minmax(0, 0.92fr) /* left  */
            minmax(0, 1.16fr) /* center */
            minmax(0, 0.92fr); /* right */

        grid-template-rows:
            minmax(0, 0.48fr) /* top: logo + slot + ball */
            minmax(0, 0.1fr) /* slot text */
            minmax(0, 0.28fr) /* cards + jackpot (ball spans) */
            minmax(0, 0.14fr); /* bottom texts */

        padding: clamp(12px, 2.2vw, 28px);
        gap: clamp(10px, 1.6vw, 20px);
        align-items: center;
        justify-items: center;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows:
            minmax(0, 0.21fr)
            minmax(0, 0.63fr)
            minmax(0, 0.16fr);
        column-gap: clamp(12px, 2vw, 34px);
        row-gap: clamp(6px, 1vh, 10px);
        padding: clamp(8px, 1.6vw, 18px);
    }
    .p-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: start;
        place-items: start;
    }
    .p-slot {
        grid-column: 2;
        grid-row: 1;
    }
    .p-slotText {
        grid-column: 2;
        grid-row: 2;
    }
    .p-row {
        grid-column: 1 / 3;
        grid-row: 3;
        margin-top: 0;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr);
        column-gap: clamp(10px, 1.6vw, 20px);
    }
    .p-rowText {
        grid-column: 1 / 3;
        grid-row: 4;
        margin-top: 0;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr);
        column-gap: clamp(10px, 1.6vw, 20px);
    }
    .p-ball {
        grid-column: 3;
        grid-row: 1 / 4;
        margin-top: 0;
    }
    .p-ballText {
        grid-column: 3;
        grid-row: 4;
        transform: translateX(calc(-1 * var(--fps-landscape-inset)));
    }
    .reel-description {
        font-size: clamp(14px, min(3vw, 3vh), 24px);
    }
    .ball-description {
        font-size: clamp(14px, min(3vw, 3vh), 24px);
        margin-top: -36vh;
    }
    .description--right {
        font-size: clamp(14px, min(3vw, 3vh), 24px);
        margin-top: -10vh;
    }
    .description--left {
        font-size: clamp(14px, min(3vw, 3vh), 24px);
        transform: translateX(var(--fps-landscape-inset));
        margin-top: -36vh;
    }
    .logo__img {
        width: min(34vmin, 220px);
    }
    .slot {
        width: min(100%, 640px);
    }
    .cardsStack {
        margin-top: -10vh;
        width: min(60%, 500px);
        /*transform: translate(var(--fps-landscape-inset), var(--fps-landscape-cards-lift));*/
    }
    .jackpotBox {
        width: min(100%, 560px);
        justify-self: center;
        transform: translate(var(--fps-landscape-inset), var(--fps-landscape-jackpot-y)) scale(var(--fps-landscape-jackpot-scale));
    }
    .ball {
        width: min(100%, 600px);
        transform: translate(calc(-1 * var(--fps-landscape-inset)), 6vh);
    }
    .ball--magic {
        width: min(96%, 620px);
        transform: translate(calc(-1 * var(--fps-landscape-inset)), var(--fps-landscape-ball-y)) scale(var(--fps-landscape-ball-scale));
    }
    .ball__img {
        width: 74%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-logo {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        align-self: start;
        place-items: center;
        padding-top: clamp(4px, 1vh, 10px);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .logo__img {
        width: min(38vmin, 240px);
        max-height: clamp(72px, 19vh, 120px);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-slot {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-slotText {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-ball {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-ballText {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        transform: none;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .reel-description,
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball-description {
        margin-top: -1vh;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .slot {
        width: min(108%, 700px);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball {
        width: min(90%, 540px);
        transform: translateY(0);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball--magic {
        width: min(84%, 540px);
        transform: translateY(0);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball__img {
        width: 68%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball__pointer {
        width: 9.5%;
        top: 20.5%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .ball__stand {
        width: 54%;
        top: 72%;
    }
}
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 600px) {
    #section-button {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(12px, 2vh, 24px));
    }
    .reel-description {
        margin-top: clamp(-15vh, calc(-10vw + 2vh), -25vh);
    }
}
@media (orientation: landscape) and (max-height: 350px) {
    .slot,
    .p-logo {
        transform: scale(0.8);
    }
    .jackpotBox {
        --fps-landscape-jackpot-scale: 0.65;
    }
    .ball--magic {
        --fps-landscape-ball-scale: 0.8;
    }
    .cardsStack {
        width: min(88%, 160px);
    }
    .logo__img {
        margin-top: -2vh;
    }
}
@media (orientation: landscape) and (max-height: 290px) {
    .slot,
    .p-logo {
        transform: scale(0.75);
    }
    .jackpotBox {
        --fps-landscape-jackpot-scale: 0.6;
    }
    .ball--magic {
        --fps-landscape-ball-scale: 0.75;
    }
    .cardsStack {
        width: min(88%, 140px);
    }
    .logo__img {
        width: min(60vmin, 220px);
        margin-top: -2vh;
    }
    .description--right {
        margin-top: -5vh;
    }
}