@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;
    box-shadow:
        0 0 1px rgba(0, 139, 255, 0.9),
        0 0 3px rgba(0, 179, 255, 0.85),
        0 0 7px rgba(0, 179, 255, 0.55),
        0 0 11px rgba(0, 179, 255, 0.35);
    z-index: 0;
}
.loading-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #00d6ff, #1e00ff, #b900ff, #1e00ff, #00d6ff);
    background-size: 300% 100%;
    animation: shimmer 2s linear infinite;
    transition: width 0.3s ease;
    border-radius: 999px;
    box-shadow:
        0 0 15px rgba(153, 0, 255, 0.8),
        0 0 30px rgba(47, 0, 255, 0.6),
        0 0 45px rgba(100, 185, 255, 0.5);
    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), white, 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: linear-gradient(to right, rgba(0, 139, 255, 0.9), white, rgba(0, 139, 255, 0.9));
        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);
    }
    .wheel {
        width: min(92vw, 620px);
    }
    .wheel__img {
        width: 78%;
    }
    .wheel__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) /* wheel */
            minmax(0, 0.06fr) /* wheel 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;

    /* фон ЛИШЕ тут */
    background:
        radial-gradient(
            40% 28% at 28% 45%,
            rgb(255 73 0 / 52%) 0%,
            rgba(255, 140, 0, 0.18) 32%,
            rgba(255, 140, 0, 0) 70%
        ),
        radial-gradient(
            52% 40% at 72% 45%,
            rgba(255, 110, 0, 0.55) 0%,
            rgba(255, 110, 0, 0.16) 34%,
            rgba(255, 110, 0, 0) 72%
        ),
        radial-gradient(50% 55% at 50% 18%, rgb(0 141 255 / 80%), transparent 60%),
        radial-gradient(70% 60% at 50% 65%, rgb(137 0 255 / 67%), transparent 62%),
        linear-gradient(180deg, #18023e 0%, #0b0620 55%, #070516 100%);

    /* якщо будеш скейлити wrapper */
    --fps-scale: 1;
}
#fps-wrapper {
    height: 100%;
    width: 100%;
    position: relative;

    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) /* wheel */
        minmax(0, 0.06fr) /* wheel 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));
    will-change: transform;
}

#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) /* wheel */
        minmax(0, 0.08fr) /* wheel text */
        minmax(0, 0.12fr); /* reserve */
}

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

.p-logo,
.p-slot,
.p-slotText,
.p-row,
.p-rowText,
.p-wheel,
.p-wheelText,
.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,
.wheel__img,
.wheel__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-wheel {
    /*margin-top: -7vh;*/
    width: 100%;
    display: grid;
    place-items: center;
}
.p-wheelText {
    width: 100%;
    display: grid;
    place-items: center;
}
.p-continue {
    width: 100%;
    display: grid;
    place-items: center;
}

.logo__img {
    width: min(36vw, 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;
    /* під твою композицію */
}
.fps-card {
    position: absolute;
    width: 30%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transform-origin: 50% 80%;
    opacity: 0.98;

    /* дуже легкий float, без bounce */
    animation: cardFloat 5.2s ease-in-out infinite;
}

.card--1 {
    left: 3%;
    top: 24%;
    transform: rotate(-10deg);
    animation-delay: 0s;
}
.cardWrap {
    position: absolute;
    width: 30%;
    transform-origin: 50% 80%;
    animation: cardFloat 5.2s ease-in-out infinite;
}
.cardWrap.card--2 {
    left: 22%;
    top: 42%;
    --r: -4deg;

    animation:
        cardPop 720ms cubic-bezier(0.18, 0.95, 0.2, 1) both,
        cardFloat 5.2s ease-in-out infinite;

    animation-delay: 0.6s, calc(0.6s + 720ms);
}

@keyframes cardPop {
    0% {
        opacity: 0;
        transform: rotate(var(--r)) translate3d(0, -16px, 0) scale(0.95);
        filter: blur(1px);
    }
    65% {
        opacity: 1;
        transform: rotate(var(--r)) translate3d(0, 4px, 0) scale(1.02); /* легкий overshoot */
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--r)) translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.cardFace {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}
.card--3 {
    left: 45%;
    top: 8%;
    transform: rotate(6deg);
    animation-delay: 1.2s;
}
.card--4 {
    left: 68%;
    top: 32%;
    transform: rotate(12deg);
    animation-delay: 1.8s;
}

@keyframes cardFloat {
    0%,
    100% {
        transform: translateY(0) rotate(var(--r));
    }
    50% {
        transform: translateY(3px) rotate(var(--r));
    }
}

.card--1 {
    --r: -10deg;
}
.card--2 {
    --r: -4deg;
}
.card--3 {
    --r: 6deg;
}
.card--4 {
    --r: 12deg;
}

/* wheel */
.wheel {
    position: relative;
    width: min(75%, 460px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: visible;
}
.wheel__img {
    position: relative;
    z-index: 2;
    width: 70%;
    display: block;
    transform-origin: 50% 50%;
    animation: wheelWiggle 4.8s linear infinite;
    will-change: transform;
}
@keyframes wheelWiggle {
    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);
    }
}
.wheel__pointer {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 20%;
    width: 10%;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 90%;
}
.wheel__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: 500;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #e6f8ff;
    text-shadow:
        0 0 2px rgba(0, 139, 255, 0.9),
        0 0 6px rgba(0, 179, 255, 0.85),
        0 0 14px rgba(0, 179, 255, 0.55),
        0 0 22px rgba(0, 179, 255, 0.35);
    text-align: center;
    user-select: none;
    width: 100%;
    text-align: center;
    z-index: 2;
    margin-top: -7vh;
}
.wheel-description {
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #e6f8ff;
    text-shadow:
        0 0 2px rgba(0, 139, 255, 0.9),
        0 0 6px rgba(0, 179, 255, 0.85),
        0 0 14px rgba(0, 179, 255, 0.55),
        0 0 22px rgba(0, 179, 255, 0.35);
    text-align: center;
    user-select: none;
    width: 100%;
    text-align: center;
    z-index: 2;
    /*margin-top: -1vh;*/
}
.description {
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.8vh, 26px);
    line-height: 1.1;
    color: #e6f8ff;
    text-shadow:
        0 0 2px rgba(0, 139, 255, 0.9),
        0 0 6px rgba(0, 179, 255, 0.85),
        0 0 14px rgba(0, 179, 255, 0.55),
        0 0 22px rgba(0, 179, 255, 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%;

    left: var(--x);
    top: var(--y);
    width: var(--size);
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.wild--1 {
    --x: 34%;
    --y: 30%;
    --size: 16%;
}
.wild--2 {
    --x: 50%;
    --y: 47%;
    --size: 16%;
}
.wild--3 {
    --x: 66%;
    --y: 30%;
    --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;
}

.slot {
    position: relative;
    isolation: isolate;
}
.slot__img {
    position: relative;
    z-index: 1;
}

.wild {
    position: absolute;
    z-index: 10;
}
.wild__glow {
    position: absolute;
    z-index: 1;
}
.wild__chip {
    position: relative;
    z-index: 2;
}
.wild__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160%;
    height: 160%;
    transform: translate(-50%, -50%) translate(var(--gx, 0px), var(--gy, 0px));
    opacity: 0.6;
    pointer-events: none;
    filter: brightness(1.3) saturate(1.6) drop-shadow(0 0 10px rgba(0, 255, 255, 0.55))
        drop-shadow(0 0 18px rgba(170, 80, 255, 0.35));
}
.wild--1 {
    --gx: 0px;
    --gy: -40px;
}
.wild--2 {
    --gx: 0px;
    --gy: -40px;
}
.wild--3 {
    --gx: 0px;
    --gy: -40px;
}

.wild--2 .wild__chip,
.wild--2 .wild__glow {
    animation-delay: 0.35s;
}
.wild--3 .wild__chip,
.wild--3 .wild__glow {
    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 wheelBreathe {
    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; /* якщо захочеш blend-mode */
}
.cardTrail {
    position: absolute;
    left: 46%;
    top: -90%;
    width: 110%;
    height: auto;

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

    /* базова видимість: НЕ 0 */
    opacity: 0.35;

    /* pop + idle */
    animation:
        trailPop 720ms ease-out both,
        trailIdle 5.2s ease-in-out infinite;

    /* важливо: pop починається з delay карти,
       idle починається після pop */
    animation-delay: 0.6s, calc(0.6s + 720ms);
}

@keyframes trailPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -16px) scale(0.95);
        filter: blur(2px);
    }
    45% {
        opacity: 0.75;
        transform: translate(-50%, 0px) scale(1.02);
        filter: blur(0);
    }
    100% {
        opacity: 0.35; /* <-- не зникає */
        transform: translate(-50%, 10px) scale(1.03);
        filter: blur(1px);
    }
}
@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: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: visible;
    justify-self: start;
    transform: scale(1.1);
    transform-origin: center;
}
.jackpotBase {
    width: min(100%, 340px);
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 73%);
    mask-image: radial-gradient(circle, #000 42%, transparent 73%);
}
.jackpotTextWrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    pointer-events: none;
}
.jackpotText {
    width: min(70%, 240px);
    height: auto;
    display: block;

    transform-origin: 50% 60%;
    animation: jackpotPulse 2.8s ease-in-out infinite;
}

@keyframes jackpotPulse {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1) saturate(1);
    }
    50% {
        transform: scale(1.04);
        filter: brightness(1.05) saturate(1.1);
    }
}
#section-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-bottom: max(env(safe-area-inset-bottom, 0px));
}

@media (orientation: portrait) and (max-width: 375px) and (max-height: 700px) {
    .slot,
    .cardsStack,
    .jackpotBox,
    .wheel,
    .p-logo {
        transform: scale(0.85);
    }
}
@media (orientation: portrait) and (min-width: 1024px) {
    .slot,
    .cardsStack,
    .jackpotBox,
    .wheel,
    .p-logo {
        transform: scale(1.2);
    }
}
@media (orientation: portrait) and (min-width: 480px) and (max-width: 620px) and (max-height: 760px) {
    .slot,
    .cardsStack,
    .jackpotBox,
    .wheel {
        transform: scale(0.85);
    }
    .p-logo {
        transform: scale(0.75);
    }
}

@media (orientation: landscape) {
    #fps {
        background:   /* LEFT = same as RIGHT but mirrored */
            radial-gradient(40% 50% at 20% 45%, #e02a87a8 0%, rgba(255, 110, 0, 0.16) 34%, rgba(255, 110, 0, 0) 72%),
            /* RIGHT (your original) */
                radial-gradient(40% 50% at 80% 45%, #e02a87a8 0%, rgba(255, 110, 0, 0.16) 34%, rgba(255, 110, 0, 0) 72%),
            radial-gradient(36% 95% at 50% 18%, rgb(0 141 255 / 70%), transparent 40%),
            radial-gradient(90% 60% at 50% 65%, rgb(137 0 255 / 67%), transparent 62%),
            linear-gradient(180deg, #18023e 0%, #0b0620 55%, #070516 100%);
    }
    #fps-wrapper {
        --fps-landscape-inset: clamp(12px, 3vw, 40px);
        --fps-landscape-cards-lift: clamp(-280px, -22vh, -120px);

        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 + wheel */
            minmax(0, 0.1fr) /* slot text */
            minmax(0, 0.28fr) /* cards + jackpot (wheel 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-wheel {
        grid-column: 3;
        grid-row: 1 / 4;
        margin-top: 0;
    }
    .p-wheelText {
        grid-column: 3;
        grid-row: 4;
        transform: translateX(calc(-1 * var(--fps-landscape-inset)));
    }
    .reel-description {
        font-size: clamp(16px, min(3vw, 3vh), 26px);
        margin-top: -16vh;
    }
    .wheel-description {
        font-size: clamp(16px, min(3vw, 3vh), 26px);
        margin-top: -36vh;
    }
    .description--right {
        font-size: clamp(16px, min(3vw, 3vh), 26px);
        margin-top: -10vh;
    }
    .description--left {
        font-size: clamp(16px, min(3vw, 3vh), 26px);
        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(80%, 500px);
        transform: translate(var(--fps-landscape-inset), var(--fps-landscape-cards-lift));
    }
    .jackpotBox {
        justify-self: center;
        transform: scale(0.8);
    }
    .wheel {
        width: min(100%, 600px);
        transform: translate(calc(-1 * var(--fps-landscape-inset)), 6vh);
    }
    .wheel__img {
        width: 74%;
    }
    .jackpotBase {
        width: min(100%, 540px);
    }
    .jackpotText {
        width: min(70%, 400px);
    }
    #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-wheel {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .p-wheelText {
        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)) .wheel-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)) .wheel {
        width: min(90%, 540px);
        transform: translateY(0);
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .wheel__img {
        width: 68%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .wheel__pointer {
        width: 9.5%;
        top: 20.5%;
    }
    #fps-wrapper:not(:has(.p-row, .p-rowText)) .wheel__stand {
        width: 54%;
        top: 72%;
    }
}
@media (orientation: landscape) and (max-height: 350px) {
    .slot,
    .p-logo {
        transform: scale(0.8);
    }
    .jackpotBox {
        transform: scale(0.65);
    }
    .p-wheel {
        transform: scale(0.8);
    }
    .cardsStack {
        margin-top: 30vh;
        width: min(88%, 160px);
    }
    .logo__img {
        margin-top: -2vh;
    }
}
@media (orientation: landscape) and (max-height: 375px) {
    .cardsStack {
        margin-top: 20vh;
    }
}
@media (orientation: landscape) and (min-width: 1000px) {
    #section-button {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(12px, 2vh, 24px));
    }
}
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
    #section-button {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(12px, 2vh, 24px));
    }
    .slot {
        transform: scale(1.3);
        width: min(100%, 640px);
    }
    .jackpotBase {
        transform: scale(1.2);
        width: min(100%, 540px);
    }
    .p-wheel {
        transform: scale(1.3);
        grid-column: 3;
        grid-row: 1 / 4;
        margin-top: 0;
    }
    .cardsStack {
        margin-top: 10vh;
        width: min(100%, 500px);
        transform: translate(var(--fps-landscape-inset), var(--fps-landscape-cards-lift));
    }
}