@font-face {
    font-family: 'Bagel Fat One';
    src: url('../assets/main/fonts/BagelFatOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bagel Fat One';
    src: url('../assets/main/fonts/BagelFatOne-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bagel Fat One';
    src: url('../assets/main/fonts/BagelFatOne-Regular.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Black';
    src: url('../assets/main/fonts/NunitoBlack.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Black';
    src: url('../assets/main/fonts/NunitoBlack.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Black';
    src: url('../assets/main/fonts/NunitoBlack.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cherry Bomb One';
    src: url('../assets/main/fonts/CherryBombOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kosugi Maru';
    src: url('../assets/main/fonts/KosugiMaru-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans SC';
    src: url('../assets/main/fonts/NotoSansSC-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../assets/main/fonts/NotoSansTC-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mitr';
    src: url('../assets/main/fonts/Mitr-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root {
    --fps-font-family: 'Bagel Fat One', 'Nunito Black', 'Cherry Bomb One', 'Kosugi Maru', 'Noto Sans', serif;
    --fps-font-family-zh: 'Bagel Fat One', 'Noto Sans SC', 'Noto Sans', serif;
    --fps-font-family-zh-hant: 'Bagel Fat One', 'Noto Sans TC', 'Noto Sans', serif;
    --fps-font-family-th: 'Bagel Fat One', 'Mitr', 'Noto Sans', sans-serif;
    --fps-start-wave-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 64' preserveAspectRatio='none'%3E%3Cpath fill='%23d9f6ff' d='M0 34C20 22 40 22 60 34S100 46 120 34S140 22 160 34V64H0Z'/%3E%3Cpath fill='%2355c8ff' d='M0 44C20 30 40 30 60 44S100 58 120 44S140 30 160 44V64H0Z'/%3E%3C/svg%3E");
    --fps-logo-x-landscape: 50%;
    --fps-logo-y-landscape: 19svh;
    --fps-logo-width-landscape: clamp(220px, 24vw, 480px);
    --fps-logo-x-portrait: 50%;
    --fps-logo-y-portrait: 23%;
    --fps-logo-width-portrait: clamp(160px, 40vw, 260px);
    --fps-left-image-x-landscape: 55%;
    --fps-left-image-y-landscape: 73%;
    --fps-left-image-width-landscape: clamp(120px, 16vw, 280px);
    --fps-left-image-x-portrait: 18%;
    --fps-left-image-y-portrait: 7%;
    --fps-left-image-width-portrait: clamp(90px, 24vw, 160px);
}
html:lang(zh) {
    --fps-font-family: var(--fps-font-family-zh);
}
html:lang(zh-hant) {
    --fps-font-family: var(--fps-font-family-zh-hant);
}
html:lang(th) {
    --fps-font-family: var(--fps-font-family-th);
}
@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;
}
#feature-preview-screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: opacity 1.2s ease, transform 1.2s ease;
}
/* region Background */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    overflow: hidden;
}
.background-image {
    display: block;
    width: 100%;
    height: 180%;
    object-fit: cover;
    transform-origin: top center;
    z-index: -3;
}
.fps-bg-bubbles {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.fps-bg-bubble {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    transform-origin: 50% 50%;
    will-change: transform, filter;
    filter: none;
    backface-visibility: hidden;
    animation: bubbleMorphFloat var(--fps-bubble-duration, 10s) ease-in-out var(--fps-bubble-delay, 0s) infinite;
}
.fps-bg-bubble-8 {
    --fps-bubble-duration: 12.6s;
    --fps-bubble-delay: -4.2s;
    --fps-bubble-drift-x: -8px;
    --fps-bubble-drift-y: 10px;
    --fps-bubble-rotate: -2.8deg;
    --fps-bubble-scale-x-1: 1.035;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.968;
    --fps-bubble-scale-y-2: 1.032;
    top: -18%;
    right: -8%;
    width: clamp(200px, 18vw, 340px);
    z-index: 0;
}
.fps-bg-bubble-9 {
    --fps-bubble-duration: 8.8s;
    --fps-bubble-delay: -1.6s;
    --fps-bubble-drift-x: 5px;
    --fps-bubble-drift-y: -7px;
    --fps-bubble-rotate: 3.4deg;
    --fps-bubble-scale-x-1: 1.046;
    --fps-bubble-scale-y-1: 0.954;
    --fps-bubble-scale-x-2: 0.956;
    --fps-bubble-scale-y-2: 1.045;
    top: 6.2%;
    left: 8.5%;
    width: clamp(44px, 4.2vw, 72px);
    z-index: 1;
}
.fps-bg-bubble-10 {
    --fps-bubble-duration: 10.2s;
    --fps-bubble-delay: -6.1s;
    --fps-bubble-drift-x: 6px;
    --fps-bubble-drift-y: 4px;
    --fps-bubble-rotate: 2.6deg;
    --fps-bubble-scale-x-1: 1.04;
    --fps-bubble-scale-y-1: 0.965;
    --fps-bubble-scale-x-2: 0.962;
    --fps-bubble-scale-y-2: 1.038;
    top: 28%;
    left: 2.2%;
    width: clamp(64px, 6vw, 104px);
    z-index: 1;
}
.fps-bg-bubble-11 {
    --fps-bubble-duration: 11.4s;
    --fps-bubble-delay: -2.8s;
    --fps-bubble-drift-x: -4px;
    --fps-bubble-drift-y: -9px;
    --fps-bubble-rotate: -2.2deg;
    --fps-bubble-scale-x-1: 1.03;
    --fps-bubble-scale-y-1: 0.976;
    --fps-bubble-scale-x-2: 0.972;
    --fps-bubble-scale-y-2: 1.028;
    right: 14%;
    bottom: 8%;
    width: clamp(52px, 4.8vw, 84px);
    z-index: 1;
}
.fps-bg-bubble-12 {
    --fps-bubble-duration: 13.2s;
    --fps-bubble-delay: -7.4s;
    --fps-bubble-drift-x: 10px;
    --fps-bubble-drift-y: -8px;
    --fps-bubble-rotate: 2.4deg;
    --fps-bubble-scale-x-1: 1.034;
    --fps-bubble-scale-y-1: 0.97;
    --fps-bubble-scale-x-2: 0.966;
    --fps-bubble-scale-y-2: 1.034;
    bottom: -25%;
    left: -6%;
    width: clamp(190px, 16vw, 320px);
    z-index: 0;
}
.fps-bg-bubble-13 {
    --fps-bubble-duration: 11.8s;
    --fps-bubble-delay: -3.7s;
    --fps-bubble-drift-x: -9px;
    --fps-bubble-drift-y: 7px;
    --fps-bubble-rotate: -3deg;
    --fps-bubble-scale-x-1: 1.036;
    --fps-bubble-scale-y-1: 0.968;
    --fps-bubble-scale-x-2: 0.964;
    --fps-bubble-scale-y-2: 1.04;
    right: -6%;
    bottom: -30%;
    width: clamp(220px, 17vw, 360px);
    z-index: 0;
}
@media (orientation: landscape) and (max-height: 380px) {
    .fps-bg-bubble-8 {
        top: -22%;
        right: -3%;
        width: clamp(100px, 20vw, 140px);
    }
    .fps-bg-bubble-9 {
        top: 7%;
        left: 12%;
        width: clamp(38px, 4vw, 60px);
    }
    .fps-bg-bubble-10 {
        left: -4%;
    }
    .fps-bg-bubble-11 {
        right: 11%;
        bottom: 13%;
        width: clamp(46px, 4.6vw, 74px);
    }
    .fps-bg-bubble-12 {
        bottom: -17%;
        left: -10%;
        width: clamp(150px, 21vw, 240px);
    }
    .fps-bg-bubble-13 {
        right: -10%;
        bottom: -39%;
    }
}
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1024px) {
    .fps-bg-bubble-8 {
        top: -8%;
        right: -3%;
        width: clamp(170px, 2vw, 250px);
    }
    .fps-bg-bubble-9 {
        top: 7%;
        left: 12%;
        width: clamp(38px, 4vw, 60px);
    }
    .fps-bg-bubble-10 {
        top: 18%;
        left: 1.8%;
        width: clamp(56px, 6vw, 92px);
    }
    .fps-bg-bubble-11 {
        right: 11%;
        bottom: 13%;
        width: clamp(46px, 4.6vw, 74px);
    }
    .fps-bg-bubble-12 {
        bottom: -8%;
        left: -6%;
        width: clamp(170px, 2vw, 240px);
    }
    .fps-bg-bubble-13 {
        right: -8%;
        bottom: -10%;
        width: clamp(170px, 2vw, 290px);
    }
}
@media (orientation: landscape) and (min-width: 1180px) {
    .fps-bg-bubble-8 {
        top: -11%;
        right: -7%;
        width: clamp(180px, 20vw, 320px);
    }
    .fps-bg-bubble-9 {
        top: 5.6%;
        left: 9.5%;
        width: clamp(50px, 4vw, 78px);
    }
    .fps-bg-bubble-10 {
        top: 16%;
        left: 1.4%;
        width: clamp(70px, 5.4vw, 110px);
    }
    .fps-bg-bubble-11 {
        right: 20%;
        bottom: 5%;
        width: clamp(65px, 4.2vw, 86px);
    }
    .fps-bg-bubble-12 {
        bottom: -11%;
        left: -5%;
        width: clamp(240px, 8vw, 310px);
    }
    .fps-bg-bubble-13 {
        right: -3.8%;
        bottom: -16%;
        width: clamp(240px, 19vw, 330px);
    }
}
@media (orientation: portrait) {
    .background-image {
        height: 100%;
        transform-origin: center;
    }
    .fps-bg-bubble-8 {
        top: -2%;
        right: -12.8%;
        width: clamp(136px, 36vw, 230px);
    }
    .fps-bg-bubble-9 {
        top: 1.8%;
        left: 51.6%;
        width: clamp(40px, 10vw, 60px);
    }
    .fps-bg-bubble-10 {
        top: 16.4%;
        left: 3.2%;
        width: clamp(60px, 12vw, 100px);
    }
    .fps-bg-bubble-11 {
        bottom: 11%;
        left: 76%;
        width: clamp(50px, 12vw, 80px);
    }
    .fps-bg-bubble-12 {
        bottom: -4%;
        left: -10.6%;
        width: clamp(140px, 34vw, 232px);
    }
    .fps-bg-bubble-13 {
        right: -14%;
        bottom: -12%;
        width: clamp(160px, 30vw, 306px);
    }
}
/* Penguin */
#penguin {
    position: absolute;
    top: var(--fps-left-image-y-landscape);
    left: var(--fps-left-image-x-landscape);
    width: var(--fps-left-image-width-landscape);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: 50% 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: penguinApproach 12.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s forwards;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
.fps-side-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(0, 20, 40, 0.25));
}
@keyframes penguinApproach {
    0% {
        opacity: 0;
        transform: translate(-82%, -84%) scale(0.28) rotate(-6deg);
    }
    18% {
        opacity: 0.22;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}
/* endregion */
#fps-wrapper {
    display: grid;
    place-items: center;
    grid-template-areas:
            "logo logo logo"
            "feature-block1 . feature-block2"
            "feature-desc1 . feature-desc2"
            "start-button start-button start-button";
    grid-template-columns: 40dvw 1dvw 40dvw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 6vw;
    column-gap: 5vw;
    width: 100%;
    max-width: 100vw;
}
/* region Logo */
#logo-placeholder {
    position: absolute;
    top: var(--fps-logo-y-landscape);
    left: var(--fps-logo-x-landscape);
    width: var(--fps-logo-width-landscape);
    transform: translate(-50%, -50%);
    transform-origin: 50% 18%;
    animation: logoSway 6.5s ease-in-out 1.5s infinite;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}
.logo-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    filter: drop-shadow(0 2px 10px rgba(0, 4, 78, 0.6));
    animation: logoFadeIn 1s ease-out 0.5s forwards,
    pulseGlow 6s ease-in-out infinite 0.5s;
}
@keyframes logoSway {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-1.2deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(1.2deg);
    }
}
@keyframes logoFadeIn {
    0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 2px 10px rgba(0, 4, 78, 0.6)); }
    50% { filter: drop-shadow(0 2px 12px rgba(1, 30, 103, 0.5)); }
}
/* endregion */
/* region Descriptions */
.feature-description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    padding: clamp(0.5dvh, 1dvh, 1.5dvh) 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    font-family: var(--fps-font-family);
    font-weight: 500;
    letter-spacing: 0.8px;
    word-break: break-word;
    white-space: normal;
    flex-wrap: wrap;
}
#feature-desc1 {
    grid-area: feature-desc1;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#feature-desc2 {
    grid-area: feature-desc2;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
#feature-desc1 .cell-multiplier,
#feature-desc2 .free-spins {
    display: block;
    background: none;
    color: #ffffff;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0 transparent;
    text-shadow:
            0 2px 0 rgba(10, 20, 68, 0.9),
            0 4px 10px rgba(2, 8, 32, 0.35);
    line-height: 1.28;
    letter-spacing: 0.04em;
    white-space: normal;
}
#feature-desc1 .cell-multiplier highlight,
#feature-desc2 .free-spins highlight {
    display: inline-block;
    font-size: 1.4em;
    color: #fdde05;
    -webkit-text-fill-color: #fdde05;
}
#feature-desc2 .free-spins-portrait {
    display: block;
}
#feature-desc2 .free-spins-landscape {
    display: none;
}
@media (orientation: landscape) {
    #feature-desc2 .free-spins-portrait {
        display: none;
    }
    #feature-desc2 .free-spins-landscape {
        display: block;
    }
}
/* endregion */
.feature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 90%;
    padding: 0.2rem;
    justify-content: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform-origin: center;
}
#feature-block1 {
    grid-area: feature-block1;
    padding: 0;
    aspect-ratio: 2.5 / 1;
    height: auto;
}
#feature-block2 {
    grid-area: feature-block2;
    padding: 0;
    aspect-ratio: 2.5 / 1;
    height: auto;
}
.feature-image {
    display: block;
    object-fit: contain;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.fps-multiplier-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.fps-multiplier-scene[data-ready="false"] .fps-multiplier-card,
.fps-multiplier-scene[data-ready="false"] .fps-multiplier-mini-bubble {
    opacity: 0;
}
.fps-multiplier-card {
    position: absolute;
    display: block;
    aspect-ratio: 1 / 1;
}
.fps-multiplier-card-left {
    top: 27%;
    left: 1.8%;
    width: 28%;
}
.fps-multiplier-card-center {
    top: 4%;
    left: 35%;
    width: 28%;
}
.fps-multiplier-card-right {
    top: 27%;
    right: 3.8%;
    width: 28%;
}
.fps-multiplier-fish,
.fps-multiplier-badge,
.fps-multiplier-mini-bubble {
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.fps-multiplier-fish {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform-origin: 50% 58%;
    z-index: 1;
}
.fps-multiplier-layer {
    opacity: 0;
    transform: translate3d(0, 13%, 0) scale(0.97);
    transition:
            transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 680ms ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.fps-multiplier-layer.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
.fps-multiplier-layer.is-leaving {
    opacity: 0;
    transform: translate3d(0, -60%, 0) scale(0.9);
}
.fps-multiplier-badge {
    position: absolute;
    z-index: 2;
}
.fps-multiplier-badge.fps-multiplier-layer {
    transform-origin: 50% 50%;
    transform: translate3d(0, 0, 0) scale(0.56);
    transition-duration: 560ms, 500ms;
}
.fps-multiplier-badge.fps-multiplier-layer.is-active {
    transform: translate3d(0, 0, 0) scale(1);
    animation: fpsMultiplierBadgeBounce 620ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.fps-multiplier-badge.fps-multiplier-layer.is-leaving {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.42);
}
.fps-multiplier-badge-left {
    width: 46%;
    right: -12%;
    bottom: -4%;
}
.fps-multiplier-badge-center {
    width: 47%;
    right: -12%;
    bottom: -16%;
}
.fps-multiplier-badge-right {
    width: 48%;
    right: -10%;
    bottom: -4%;
}
.fps-multiplier-mini-bubble {
    position: absolute;
    z-index: 3;
    transition: opacity 0.35s ease;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: bubbleMorphFloat var(--fps-mini-bubble-duration, 9.4s) ease-in-out var(--fps-mini-bubble-delay, 0s) infinite;
}
.fps-multiplier-mini-bubble-left {
    width: 5.8%;
    left: -6%;
    bottom: -20%;
    --fps-mini-bubble-duration: 10.4s;
    --fps-mini-bubble-delay: -4.2s;
    --fps-bubble-drift-x: -7px;
    --fps-bubble-drift-y: 9px;
    --fps-bubble-rotate: -2.8deg;
    --fps-bubble-scale-x-1: 1.036;
    --fps-bubble-scale-y-1: 0.968;
    --fps-bubble-scale-x-2: 0.966;
    --fps-bubble-scale-y-2: 1.034;
}
.fps-multiplier-mini-bubble-center {
    width: 10%;
    left: 62%;
    top: 5%;
    --fps-mini-bubble-duration: 9.1s;
    --fps-mini-bubble-delay: -1.8s;
    --fps-bubble-drift-x: 6px;
    --fps-bubble-drift-y: -6px;
    --fps-bubble-rotate: 2.4deg;
    --fps-bubble-scale-x-1: 1.032;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.972;
    --fps-bubble-scale-y-2: 1.03;
}
.fps-multiplier-mini-bubble-right {
    width: 5.8%;
    right: -2%;
    top: 14%;
    --fps-mini-bubble-duration: 10.9s;
    --fps-mini-bubble-delay: -5.3s;
    --fps-bubble-drift-x: 8px;
    --fps-bubble-drift-y: 7px;
    --fps-bubble-rotate: 2.8deg;
    --fps-bubble-scale-x-1: 1.038;
    --fps-bubble-scale-y-1: 0.966;
    --fps-bubble-scale-x-2: 0.964;
    --fps-bubble-scale-y-2: 1.038;
}
.fps-multiplier-mini-bubble-top {
    width: 8%;
    left: 26%;
    top: 1%;
    --fps-mini-bubble-duration: 8.7s;
    --fps-mini-bubble-delay: -2.4s;
    --fps-bubble-drift-x: -5px;
    --fps-bubble-drift-y: -5px;
    --fps-bubble-rotate: -2.2deg;
    --fps-bubble-scale-x-1: 1.03;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.972;
    --fps-bubble-scale-y-2: 1.03;
}
.fps-free-spins-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.fps-free-spins-scatter,
.fps-free-spins-preview,
.fps-free-spins-arrow,
.fps-free-spins-bubble {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.fps-free-spins-scatter {
    top: 17%;
    left: -2%;
    width: 44%;
    z-index: 2;
    transform-origin: 34% 54%;
    animation: fpsFreeSpinsScatterFloat 6.4s ease-in-out 0.3s infinite;
}
.fps-free-spins-arrow {
    z-index: 3;
    transform-origin: 16% 54%;
}
.fps-free-spins-arrow-main {
    top: 50%;
    left: 44%;
    width: 12%;
    animation: fpsFreeSpinsArrowSweep 5.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s infinite;
}
.fps-free-spins-preview-group {
    position: absolute;
    top: 12.5%;
    left: 56.3%;
    width: 33.4%;
    height: 63%;
    z-index: 2;
    transform-origin: 42% 58%;
    will-change: transform, opacity;
    animation: fpsFreeSpinsPreviewPop 5.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.34s infinite;
}
.fps-free-spins-preview {
    top: 8%;
    width: 130%;
    z-index: 1;
    transform-origin: 50% 48%;
    animation: fpsFreeSpinsPreviewWobble 6.8s ease-in-out 0.65s infinite;
}
.fps-free-spins-arrow-preview {
    top: 63.5%;
    left: 35.8%;
    width: 19.2%;
    animation: fpsFreeSpinsArrowSweepSecondary 5.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s infinite;
}
.fps-free-spins-bubble {
    z-index: 1;
    transform-origin: 50% 50%;
    animation: bubbleMorphFloat var(--fps-bubble-duration, 10s) ease-in-out var(--fps-bubble-delay, 0s) infinite;
}
.fps-free-spins-bubble-left {
    top: 10%;
    left: -3%;
    width: 7%;
    --fps-bubble-duration: 11.8s;
    --fps-bubble-delay: -5.1s;
    --fps-bubble-drift-x: -10px;
    --fps-bubble-drift-y: 12px;
    --fps-bubble-rotate: -3.2deg;
    --fps-bubble-scale-x-1: 1.042;
    --fps-bubble-scale-y-1: 0.964;
    --fps-bubble-scale-x-2: 0.966;
    --fps-bubble-scale-y-2: 1.038;
}
.fps-free-spins-bubble-top-small {
    top: 0.8%;
    left: 30.3%;
    width: 4.6%;
    --fps-bubble-duration: 8.9s;
    --fps-bubble-delay: -1.4s;
    --fps-bubble-drift-x: 4px;
    --fps-bubble-drift-y: -6px;
    --fps-bubble-rotate: 2.4deg;
    --fps-bubble-scale-x-1: 1.03;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.972;
    --fps-bubble-scale-y-2: 1.032;
}
.fps-free-spins-bubble-top-mid {
    top: 18%;
    left: 33.2%;
    width: 7%;
    --fps-bubble-duration: 10.8s;
    --fps-bubble-delay: -3.8s;
    --fps-bubble-drift-x: -6px;
    --fps-bubble-drift-y: 8px;
    --fps-bubble-rotate: -2.8deg;
    --fps-bubble-scale-x-1: 1.038;
    --fps-bubble-scale-y-1: 0.968;
    --fps-bubble-scale-x-2: 0.964;
    --fps-bubble-scale-y-2: 1.04;
}
.fps-free-spins-bubble-mid-small {
    top: 31.6%;
    left: 49.7%;
    width: 4.8%;
    --fps-bubble-duration: 8.1s;
    --fps-bubble-delay: -0.7s;
    --fps-bubble-drift-x: 5px;
    --fps-bubble-drift-y: -4px;
    --fps-bubble-rotate: 2deg;
    --fps-bubble-scale-x-1: 1.028;
    --fps-bubble-scale-y-1: 0.974;
    --fps-bubble-scale-x-2: 0.974;
    --fps-bubble-scale-y-2: 1.028;
}
.fps-free-spins-bubble-top-right {
    top: 6%;
    left: 63.4%;
    width: 4%;
    --fps-bubble-duration: 9.7s;
    --fps-bubble-delay: -2.6s;
    --fps-bubble-drift-x: 6px;
    --fps-bubble-drift-y: 5px;
    --fps-bubble-rotate: 2.6deg;
    --fps-bubble-scale-x-1: 1.03;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.97;
    --fps-bubble-scale-y-2: 1.03;
}
.fps-free-spins-bubble-center-small {
    top: 65%;
    left: 57%;
    width: 6.6%;
    --fps-bubble-duration: 10.4s;
    --fps-bubble-delay: -4.5s;
    --fps-bubble-drift-x: -7px;
    --fps-bubble-drift-y: 7px;
    --fps-bubble-rotate: -2.2deg;
    --fps-bubble-scale-x-1: 1.034;
    --fps-bubble-scale-y-1: 0.97;
    --fps-bubble-scale-x-2: 0.968;
    --fps-bubble-scale-y-2: 1.034;
}
.fps-free-spins-bubble-right-small {
    top: 2%;
    right: 6.4%;
    width: 4%;
    --fps-bubble-duration: 8.6s;
    --fps-bubble-delay: -1.9s;
    --fps-bubble-drift-x: 5px;
    --fps-bubble-drift-y: -6px;
    --fps-bubble-rotate: 2.8deg;
    --fps-bubble-scale-x-1: 1.032;
    --fps-bubble-scale-y-1: 0.97;
    --fps-bubble-scale-x-2: 0.972;
    --fps-bubble-scale-y-2: 1.03;
}
.fps-free-spins-bubble-near-preview {
    top: 74%;
    right: -4%;
    width: 11%;
    --fps-bubble-duration: 10.9s;
    --fps-bubble-delay: -3.1s;
    --fps-bubble-drift-x: -8px;
    --fps-bubble-drift-y: 8px;
    --fps-bubble-rotate: -3deg;
    --fps-bubble-scale-x-1: 1.04;
    --fps-bubble-scale-y-1: 0.966;
    --fps-bubble-scale-x-2: 0.964;
    --fps-bubble-scale-y-2: 1.04;
}
.fps-free-spins-bubble-right-edge {
    top: 38%;
    right: -10%;
    width: 8%;
    --fps-bubble-duration: 12.2s;
    --fps-bubble-delay: -6.2s;
    --fps-bubble-drift-x: 9px;
    --fps-bubble-drift-y: 9px;
    --fps-bubble-rotate: 3deg;
    --fps-bubble-scale-x-1: 1.04;
    --fps-bubble-scale-y-1: 0.964;
    --fps-bubble-scale-x-2: 0.962;
    --fps-bubble-scale-y-2: 1.042;
}
.fps-free-spins-bubble-bottom-pair {
    left: -5%;
    bottom: 8%;
    width: 9%;
    z-index: 3;
    --fps-bubble-duration: 11.6s;
    --fps-bubble-delay: -4.9s;
    --fps-bubble-drift-x: -8px;
    --fps-bubble-drift-y: -9px;
    --fps-bubble-rotate: -2.6deg;
    --fps-bubble-scale-x-1: 1.038;
    --fps-bubble-scale-y-1: 0.968;
    --fps-bubble-scale-x-2: 0.966;
    --fps-bubble-scale-y-2: 1.036;
}
.fps-free-spins-bubble-bottom-left {
    left: 1.2%;
    bottom: -20%;
    width: 8%;
    --fps-bubble-duration: 9.4s;
    --fps-bubble-delay: -2.1s;
    --fps-bubble-drift-x: 6px;
    --fps-bubble-drift-y: 7px;
    --fps-bubble-rotate: 2.4deg;
    --fps-bubble-scale-x-1: 1.032;
    --fps-bubble-scale-y-1: 0.972;
    --fps-bubble-scale-x-2: 0.97;
    --fps-bubble-scale-y-2: 1.03;
}
@keyframes fpsFreeSpinsScatterFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg) scale(1);
    }
    25% {
        transform: translate3d(-1.6%, -2.6%, 0) rotate(1.2deg) scale(1.024);
    }
    52% {
        transform: translate3d(1.5%, 1.3%, 0) rotate(-0.6deg) scale(0.992);
    }
    76% {
        transform: translate3d(-0.9%, -1.1%, 0) rotate(0.9deg) scale(1.018);
    }
}
@keyframes fpsFreeSpinsArrowSweep {
    0%,
    100% {
        opacity: 0.84;
        transform: translate3d(0, 0, 0) scale(0.94) rotate(-4deg);
    }
    16% {
        opacity: 1;
    }
    30% {
        opacity: 1;
        transform: translate3d(10%, -8%, 0) scale(1.06) rotate(2deg);
    }
    48% {
        transform: translate3d(2%, -2%, 0) scale(0.985) rotate(-1deg);
    }
    65% {
        transform: translate3d(8%, -4%, 0) scale(1.02) rotate(1deg);
    }
    82% {
        opacity: 0.96;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}
@keyframes fpsFreeSpinsArrowSweepSecondary {
    0%,
    100% {
        opacity: 0.78;
        transform: translate3d(0, 0, 0) scale(0.9) rotate(-10deg);
    }
    18% {
        opacity: 0.96;
    }
    42% {
        opacity: 1;
        transform: translate3d(12%, 9%, 0) scale(1.09) rotate(1deg);
    }
    60% {
        transform: translate3d(5%, 3%, 0) scale(0.985) rotate(-4deg);
    }
    82% {
        opacity: 0.92;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
}
@keyframes fpsFreeSpinsPreviewPop {
    0%,
    12%,
    100% {
        opacity: 0.94;
        transform: translate3d(0, 2%, 0) scale(0.97);
    }
    28% {
        opacity: 1;
        transform: translate3d(0, -1.2%, 0) scale(1.055);
    }
    44% {
        transform: translate3d(0, -0.2%, 0) scale(1.015);
    }
    58% {
        transform: translate3d(0, 0.8%, 0) scale(0.99);
    }
    78% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes fpsFreeSpinsPreviewWobble {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1);
    }
    24% {
        transform: translate3d(1.1%, -1.5%, 0) rotate(1deg) scale(1.012);
    }
    52% {
        transform: translate3d(-1.2%, 1.1%, 0) rotate(-0.5deg) scale(0.996);
    }
    78% {
        transform: translate3d(0.5%, -0.6%, 0) rotate(1.3deg) scale(1.008);
    }
}
@keyframes fpsMultiplierBadgeBounce {
    0% {
        transform: translate3d(0, 0, 0) scale(0.56);
    }
    58% {
        transform: translate3d(0, 0, 0) scale(1.13);
    }
    80% {
        transform: translate3d(0, 0, 0) scale(0.94);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
/* region Button */
#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;
    z-index: 2;
}
.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: 999;
}
.loading-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(
            90deg,
            #FFD700,
            #FFD700
    );
    background-size: 300% 100%;
    animation: shimmer 2s linear infinite;
    transition: width 0.3s ease;
    border-radius: 999px;
    box-shadow:
            0 0 15px rgba(255, 215, 0, 0.8),
            0 0 30px rgba(255, 165, 0, 0.6),
            0 0 45px rgba(255, 220, 100, 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(--fps-font-family);
    font-size: clamp(0.5rem, calc(1vw + 1vh), 1.5rem);
    color: #4c59ae;
    font-weight: 500;
    pointer-events: none;
}
.start-button {
    font-family: var(--fps-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: 600;
    color: #ffffff;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.8) 18%, rgba(255, 255, 255, 0) 38%),
        var(--fps-start-wave-svg),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.98) 100%);
    background-size: 100% 100%, 11rem 138%, 100% 100%;
    background-repeat: no-repeat, repeat-x, no-repeat;
    background-position: center center, 0 94%, center center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /*-webkit-text-stroke: 0.6px rgba(0, 6, 20, 0.86);*/
    border: none;
    filter: drop-shadow(0 2px 10px rgba(0, 25, 50, 0.45));

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

    transition: opacity 0.6s ease, transform 0.4s ease;
    animation: startWaveFlow 4.6s linear infinite, pulseZoom 5s ease-in-out infinite;
}
.start-button.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
/* endregion */
@keyframes pulseZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
@keyframes startWaveFlow {
    0% {
        background-position: center center, 0 94%, center center;
    }
    100% {
        background-position: center center, 11rem 94%, center center;
    }
}
@keyframes bubbleMorphFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    22% {
        transform:
                translate3d(calc(var(--fps-bubble-drift-x, 0px) * 0.45), calc(var(--fps-bubble-drift-y, 0px) * -0.35), 0)
                scaleX(var(--fps-bubble-scale-x-1, 1.03))
                scaleY(var(--fps-bubble-scale-y-1, 0.97))
                rotate(calc(var(--fps-bubble-rotate, 2deg) * -0.45));
    }
    48% {
        transform:
                translate3d(calc(var(--fps-bubble-drift-x, 0px) * -0.2), calc(var(--fps-bubble-drift-y, 0px) * 0.55), 0)
                scaleX(var(--fps-bubble-scale-x-2, 0.97))
                scaleY(var(--fps-bubble-scale-y-2, 1.03))
                rotate(calc(var(--fps-bubble-rotate, 2deg) * 0.35));
    }
    74% {
        transform:
                translate3d(calc(var(--fps-bubble-drift-x, 0px) * 0.6), calc(var(--fps-bubble-drift-y, 0px) * 0.2), 0)
                scaleX(calc((var(--fps-bubble-scale-x-1, 1.03) + var(--fps-bubble-scale-x-2, 0.97)) / 2))
                scaleY(calc((var(--fps-bubble-scale-y-1, 0.97) + var(--fps-bubble-scale-y-2, 1.03)) / 2))
                rotate(calc(var(--fps-bubble-rotate, 2deg) * 0.6));
    }
}

@media (orientation: landscape) {
    #feature-block1,
    #feature-block2 {
        align-self: center;
        justify-self: center;
        transform: translateY(10vh);
    }
    #feature-desc1,
    #feature-desc2 {
        transform: translateY(9vh);
    }
    .feature-description {
        font-size: clamp(0.5rem, calc(1.3dvw + 1.1dvh), 1.3rem);
        line-height: 1.2;
        padding: 0.3vh 0;
        margin: 0;
        max-width: 100%;
        word-break: break-word;
        white-space: normal;
        text-align: center;
        filter: drop-shadow(0px 4px 12px rgba(21, 1, 1, 0.6)) drop-shadow(0px 0px 10px rgba(43, 0, 70, 0.5)) drop-shadow(0px 2px 6px rgba(0, 1, 28, 0.7)) !important;
        text-shadow: none !important;
    }
    #feature-desc1 .cell-multiplier highlight,
    #feature-desc2 .free-spins highlight {
        font-size: 1em;
        line-height: 1;
        transform: scale(1.22);
        transform-origin: 50% 80%;
    }
    #feature-desc1, #feature-desc2 {
        justify-content: flex-start;
        align-items: center;
        align-self: start;
        justify-self: stretch;
        grid-row: 3;
        min-height: clamp(4.8rem, 8vh, 7.2rem);
        margin-top: 0;
    }
    #feature-desc1,
    #feature-desc2 {
        height: auto;
    }
    .start-button {
        font-size: clamp(0.5rem, calc(1.3vw + 1vh), 1.6rem);
    }
}
@media (orientation: landscape) and (max-aspect-ratio: 5/4) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3){
    .feature-description {
        transform: translateY(-8vh);
    }
}
@media (orientation: landscape) and (max-width: 375px) {
    #logo-placeholder {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) {
    #feature-preview-screen {
        height: auto;
        min-height: 100svh;
        overflow-y: hidden;
    }
    #fps-wrapper {
        display: grid;
        grid-template-areas:
      "logo"
      "feature-block1"
      "feature-desc1"
      "feature-block2"
      "feature-desc2"
      "."
      "start-button";
        grid-template-columns: 1fr;
        grid-template-rows:
           minmax(20dvh, 25dvh)
            minmax(12dvh, 18dvh)
            minmax(auto, 5dvh)
            minmax(12dvh, 18dvh)
            minmax(auto, 5dvh)
            1fr
            minmax(10dvh, 10dvh);
        margin-top: 2dvh;
        row-gap: clamp(0.5dvh, 1dvh, 1.5dvh);
        height: 100%;
        min-height: auto;
        overflow: hidden;
        box-sizing: border-box;
    }
    .feature-block {
        margin: 0 auto;
        padding: 0;
    }
    #feature-block1,
    #feature-block2 {
        align-self: center;
        justify-self: center;
    }
    #feature-desc1, #feature-desc2 {
        justify-content: center;
        align-items: center;
    }
    #feature-block1, #feature-block2 {
        width: clamp(38dvh, min(60dvw, 60dvh), 60dvw);
        margin: 0 auto;
    }
    #feature-block1 {
        width: clamp(72dvw, 86dvw, 90dvw);
    }
    #feature-block2 {
        width: clamp(72dvw, 86dvw, 90dvw);
        height: auto;
        margin: 0 auto;
        transform: translateY(4vh);
    }
    .fps-multiplier-mini-bubble-top {
        left: 24.8%;
        top: 2.2%;
        width: 8.8%;
    }
    #penguin {
        top: var(--fps-left-image-y-portrait);
        left: var(--fps-left-image-x-portrait);
        width: var(--fps-left-image-width-portrait);
    }
    #logo-placeholder {
        top: var(--fps-logo-y-portrait);
        left: var(--fps-logo-x-portrait);
        width: var(--fps-logo-width-portrait);
    }
    #feature-desc1 {
        grid-area: feature-desc1;
        margin-top: 0;
    }
    #feature-desc2 {
        grid-area: feature-desc2;
        margin-top: 0;
    }
    .feature-description {
        max-width: 90%;
        margin-top: 0;
        font-size: clamp(0.5rem, calc(1.2dvw + 1.2dvh), 1.2rem);
        line-height: 1.1;
        padding: 0.3vh 0;
        text-align: center;
    }
    #feature-desc1 .cell-multiplier,
    #feature-desc2 .free-spins {
        line-height: 1.14;
    }
    #feature-desc1 .cell-multiplier highlight,
    #feature-desc2 .free-spins highlight {
        font-size: 1em;
        line-height: 1;
        transform: scale(1.18);
        transform-origin: 50% 82%;
    }
    #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;
        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%);
    }
}
@media (orientation: portrait) and (min-width: 540px) and (max-width: 1100px) {
    #feature-block1,
    #feature-block2 {
        width: clamp(60dvw, 60dvw, 80dvw);
    }
}
@media (orientation: portrait) and (max-width: 375px) {
    #feature-desc1 .cell-multiplier, #feature-desc2 .free-spins {
        margin-top: 7vh;
    }
}