@font-face {
    font-family: 'Bangers';
    src: url('../assets/main/fonts/Bangers.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: block;
}

:root {
    --splash-font-family: 'Bangers', serif;
}

/* Force early font resolution to reduce FOUT on iOS */
body::before {
    content: "B";
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    font-family: 'Bangers';
}

html,
body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100vh;
    overflow: hidden;
}

#feature-preview-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: opacity 1.2s ease, transform 1.2s ease;
}

@supports (height: 100svh) {
    html,
    body,
    #feature-preview-screen,
    #fps-wrapper {
        height: 100svh;
        max-height: 100svh;
    }
}

.background-layer {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.background-image,
.landscape-bg,
.portrait-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

.landscape-bg {
    display: block;
}

.portrait-bg {
    display: none;
}

.bg-dim-cutouts {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
    pointer-events: none;
}

#fps-wrapper,
#logo-placeholder {
    position: relative;
    z-index: 1;
}

.feature-stack {
    display: contents;
}

#fps-wrapper {
    display: grid;
    place-items: center;
    grid-template-areas:
        "logo logo logo"
        "feature-block1 feature-block3 feature-block2"
        "feature-desc1 feature-desc3 feature-desc2"
        "start-button start-button start-button";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    padding: 0 6vw;
    box-sizing: border-box;
    column-gap: 2vw;
    justify-content: center;
    align-items: center;
}

#logo-placeholder {
    position: absolute;
    grid-area: logo;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.logo-image {
    display: block;
    width: auto;
    height: clamp(18dvh, 15dvh, 30dvh);
    margin-bottom: 4vh;
    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;
}

#feature-block1,
#feature-block2,
#feature-block3 {
    grid-area: auto;
    position: relative;
    isolation: isolate;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: clamp(16px, 2.4vw, 30px);
}

#feature-block1 {
    grid-area: feature-block1;
}

#feature-block2 {
    grid-area: feature-block2;
}

#feature-block3 {
    grid-area: feature-block3;
}

.feature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    max-width: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform-origin: center;
}

.feature-block.large {
    width: 100%;
}
#feature-block1 > .feature-image,
#feature-block2 > .feature-image,
#feature-block3 > .feature-image {
    position: relative;
    z-index: 1;
}

#feature-block3 > .feature-image {
    transform: scale(0.5);
}

.feature-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

#feature-desc1,
#feature-desc2,
#feature-desc3 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 1svh;
}

#feature-desc1 {
    grid-area: feature-desc1;
}

#feature-desc2 {
    grid-area: feature-desc2;
}

#feature-desc3 {
    grid-area: feature-desc3;
}

.feature-description {
    display: block;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    padding: clamp(0.5svh, 1svh, 1.5svh) 0;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--splash-font-family);
    font-weight: 500;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow:
            1px 0 0 #011b01,
            -1px 0 0 #011b01,
            0 1px 0 #011b01,
            0 -1px 0 #011b01,
            1px 1px 0 #011b01,
            -1px 1px 0 #011b01,
            1px -1px 0 #011b01,
            -1px -1px 0 #011b01;
    letter-spacing: 0.8px;
    word-break: break-word;
    white-space: normal;
    z-index: 2;
}

.feature-description.feature-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
}

.giant {
    line-height: 1.1;
    letter-spacing: 2px;
    font-weight: 500;
    white-space: pre-line;
    text-align: center;
    text-shadow: inherit;
}

.inline-moon {
    display: inline-block;
    width: 1.6em;
    height: auto;
}

#section-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px), 12px);
    z-index: 20;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: auto;
    padding: 0;
    box-sizing: border-box;

    pointer-events: none;

    --cta-w: clamp(35vw, 25vw, 45vw);
    --loading-h: clamp(12px, calc(2vw + 1svh), 14px);
    --start-h: clamp(22px, calc(1.6vw + 1.4svh), 34px);
    --cta-shell-h: max(var(--loading-h), var(--start-h));
}

.start-fixed-portrait {
    position: relative;
    width: var(--cta-w);
    height: var(--cta-shell-h);
    min-height: var(--cta-shell-h);
    pointer-events: auto;
}

.loading-slot,
.start-button-slot {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
}

.loading-slot {
    height: var(--loading-h);
}

.start-button-slot {
    height: var(--start-h);
    overflow: visible;
}

.start-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    /*font-family: var(--splash-font-family);*/
    font-size: clamp(0.5rem, 1.5vw, 1.3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.05em;
    color: white;
    background: linear-gradient(to right, #f7493f, #9a40ff, #0039ff, #9a40ff, #f7493f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.4s ease;
    animation: gradientShift 5s linear infinite, pulseZoom 5s ease-in-out infinite;
    z-index: 1000;
    overflow: visible;
}

.start-button.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.loading-bar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: hidden;
    border: 2px solid #2c3358;
    border-radius: 999px;
    background: radial-gradient(
            circle at center,
            rgba(60, 90, 120, 0.4),
            rgba(10, 30, 60, 0.6)
    );
    z-index: 999;
}

.loading-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            #f7493f,
            #9a40ff,
            #0039ff,
            #9a40ff,
            #f7493f
    );
    background-size: 300% 100%;
    animation: shimmer 2s linear infinite;
    transition: width 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.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 + 1svh), 1.5rem);
    color: white;
    font-weight: 500;
    pointer-events: none;
}

@media (orientation: landscape) and (min-width: 900px) {
    #section-button {
        --loading-h: clamp(18px, 1.6vw, 26px);
    }

    .loading-percent {
        font-size: clamp(0.65rem, 1vw, 1rem);
        line-height: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: 200% center;
    }
}

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

@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));
    }
}

/* region Feature 1 */
#feature-block1 {
    position: relative;
    overflow: visible;
}
.feature1-scatter,
.feature1-4x {
    position: absolute;
    z-index: 4;
    height: auto;
    pointer-events: none;
    display: block;
}
.feature1-scatter {
    width: 24%;
    left: -6%;
    top: 58%;
    transform: translateY(-50%);
    filter:
            drop-shadow(0 0 4px rgba(255, 220, 120, 0.9))
            drop-shadow(0 0 10px rgba(255, 190, 40, 0.8))
            drop-shadow(0 0 18px rgba(255, 150, 20, 0.65));
}
.feature1-4x {
    width: 18%;
    left: -10%;
    top: 65%;
    transform: translateY(-50%);
}
#feature-block1 .ball,
#feature-block1 .goal {
    position: absolute;
    height: auto;
    pointer-events: none;
}
#feature-block1 .ball {
    width: 84%;
    left: 34%;
    top: 25%;
    z-index: 2;
}
#feature-block1 .goal {
    width: 30%;
    right: 8%;
    top: 54%;
    z-index: 3;
    filter: brightness(1.2);
}
.feature1-scatter {
    transform-origin: 50% 50%;
    animation: scatterShake5s 5s ease-in-out infinite;
}
.feature1-4x {
    transform-origin: 50% 50%;
    animation: pulse4x5s 5s ease-in-out infinite;
}
#feature-block1 .goal {
    transform-origin: 50% 50%;
    animation:
            goalSlideIn 1.05s cubic-bezier(0.2, 0.9, 0.2, 1) both,
            goalShakeEvery5s 5s ease-in-out infinite 1.55s;
}
@keyframes scatterShake5s {
    0%,
    100% {
        transform: translateY(-50%) rotate(0deg) scale(1);
    }

    4% {
        transform: translateY(-50%) rotate(-4deg) scale(1.01);
    }
    8% {
        transform: translateY(-50%) rotate(4deg) scale(1.02);
    }
    12% {
        transform: translateY(-50%) rotate(-3deg) scale(1.01);
    }
    16% {
        transform: translateY(-50%) rotate(3deg) scale(1.02);
    }
    20% {
        transform: translateY(-50%) rotate(-1.5deg) scale(1);
    }
    24% {
        transform: translateY(-50%) rotate(1.5deg) scale(1);
    }
    28%,
    100% {
        transform: translateY(-50%) rotate(0deg) scale(1);
    }
}
@keyframes pulse4x5s {
    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    8% {
        transform: translateY(-50%) scale(1.08);
    }
    16% {
        transform: translateY(-50%) scale(1.14);
    }
    24% {
        transform: translateY(-50%) scale(1.06);
    }
    32%,
    100% {
        transform: translateY(-50%) scale(1);
    }
}
@keyframes goalSlideIn {
    0% {
        transform: translateX(45%) translateY(0) rotate(-8deg) scale(0.72);
        opacity: 0;
    }
    55% {
        transform: translateX(-8%) translateY(0) rotate(2deg) scale(1.08);
        opacity: 1;
    }
    72% {
        transform: translateX(4%) translateY(0) rotate(-1deg) scale(0.96);
        opacity: 1;
    }
    88% {
        transform: translateX(-2%) translateY(0) rotate(0.5deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}
@keyframes goalShakeEvery5s {
    0%, 8%, 100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
    12% {
        transform: translateX(-0.5%) rotate(-0.6deg) scale(1.005);
    }
    16% {
        transform: translateX(0.5%) rotate(0.6deg) scale(1.01);
    }
    20% {
        transform: translateX(-0.3%) rotate(-0.4deg) scale(1.005);
    }
    24% {
        transform: translateX(0.2%) rotate(0.3deg) scale(1.002);
    }
    28%, 100% {
        transform: translateX(0) rotate(0deg) scale(1);
    }
}
/* endregion */
/* region Feature 2 */
#feature-block2 {
    position: relative;
    margin: 0 auto;
    overflow: visible;
}
#feature-block2 img {
    position: absolute;
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
#feature-block2 .layer-base {
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
#feature-block2 .progress-frame {
    top: 45%;
    width: 110%;
    height: auto;
    z-index: 3;
}
#feature-block2 .progress-clip {
    position: absolute;
    top: 45%;
    width: 110%;
    z-index: 2;
    overflow: hidden;
    border-radius: 999px;
    pointer-events: none;
}
#feature-block2 .progress-bg {
    top: 0;
    left: -3%;
    width: 100%;
    height: auto;
    border-radius: inherit;
}
#feature-block2 .progress-fill {
    position: relative;
    display: block;
    width: 100%;
    left: 3%;
    height: auto;
    border-radius: inherit;
    filter: saturate(1.05) brightness(1.02);
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}
#feature-block2 .counter {
    right: -5%;
    top: 23%;
    width: 32%;
    height: auto;
    z-index: 5;
}
#feature-block2 .multiplier {
    left: 52.2%;
    top: 16%;
    width: 20%;
    height: auto;
    z-index: 5;
    transform-origin: center;
    animation: feature2-multiplier-pop 1.2s ease-out 2.2s both, multiplierShake5s 5s ease-in-out infinite 3.4s;
    filter: drop-shadow(0 0 4px rgba(255, 220, 120, 0.9)) drop-shadow(0 0 10px rgba(255, 190, 40, 0.8)) drop-shadow(0 0 18px rgba(255, 150, 20, 0.65));
}
@keyframes multiplierShake5s {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    4% {
        transform: scale(1.01) rotate(-4deg);
    }
    8% {
        transform: scale(1.02) rotate(4deg);
    }
    12% {
        transform: scale(1.01) rotate(-3deg);
    }
    16% {
        transform: scale(1.02) rotate(3deg);
    }
    20% {
        transform: scale(1) rotate(-1.5deg);
    }
    24% {
        transform: scale(1) rotate(1.5deg);
    }
    28%,
    100% {
        transform: scale(1) rotate(0deg);
    }
}
#feature-block2 .bull {
    right: 38%;
    top: -22%;
    width: 90%;
    height: auto;
    z-index: 6;
    transform-origin: center bottom;
}
#feature-block2 .confetti {
    /*mix-blend-mode: plus-lighter;*/
    width: 120%;
    height: auto;
    z-index: 2;
    opacity: 0;
    transform: scale(0.96);
    animation: feature2-confetti-burst 0.9s ease-out 2.35s forwards;
}
@keyframes feature2-progress-fill {
    0% {
        transform: scaleX(0);
        opacity: 0.85;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}
@keyframes feature2-multiplier-pop {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-8deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.14) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
@keyframes feature2-confetti-burst {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    35% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
#feature-block2 .counter-wrap {
    position: absolute;
    right: -5%;
    top: 23%;
    width: 32%;
    z-index: 6;
    animation: counterPop 0.6s ease-out 2.2s both;
}
#feature-block2 .counter {
    position: relative;
    width: 100%;
    display: block;
}
#feature-block2 .counter-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.02em;

    font-family: Arial, sans-serif;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;

    transform: translate(10%, -33.5%);
    pointer-events: none;
    z-index: 10;
}
#feature-block2 .counter-current {
    font-size: clamp(18px, 2.8vw, 20px);
    color: #ffb01f;
    font-variant-numeric: tabular-nums;
    min-width: 1.8ch;
    text-align: right;
}
#feature-block2 .counter-sep,
#feature-block2 .counter-total {
    font-size: clamp(14px, 2.2vw, 18px);
    color: #ffffff;
    text-shadow:
            0 1px 0 #0d174b,
            0 2px 0 #0d174b,
            0 0 4px rgba(255,255,255,0.18);
    font-variant-numeric: tabular-nums;
}
#feature-block2 .counter-total {
    min-width: 2ch;
    text-align: left;
}
/* endregion */

@media (orientation: landscape) {
    .landscape-bg {
        object-position: center 28%;
    }
    #logo-placeholder {
        position: relative;
        grid-area: logo;
        top: auto;
        left: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: max(env(safe-area-inset-top, 0px), env(safe-area-max-inset-top, 0px), 16px);
        z-index: 2;
    }
    .logo-image {
        width: auto;
        height: clamp(18svh, 14svh, 22svh);
        margin-bottom: 0;
        margin-top: 50px;
    }
    #fps-wrapper {
        grid-template-areas:
            "logo logo logo"
            "feature-stack1 feature-stack3 feature-stack2"
            "start-button start-button start-button";
        grid-template-rows:
            14svh
            minmax(0, 1fr)
            auto;
        grid-template-columns: repeat(3, minmax(0, clamp(190px, 24vw, 460px)));
        justify-content: center;
        column-gap: clamp(12px, 2vw, 28px);
        align-items: stretch;
    }
    .feature-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        justify-self: center;
        align-self: center;
    }
    #feature-stack1 {
        grid-area: feature-stack1;
    }
    #feature-stack2 {
        grid-area: feature-stack2;
    }
    #feature-stack3 {
        grid-area: feature-stack3;
    }
    #feature-block1,
    #feature-desc1,
    #feature-block2,
    #feature-desc2,
    #feature-block3,
    #feature-desc3 {
        align-self: center;
        justify-self: center;
    }
    #feature-block1,
    #feature-block2,
    #feature-block3 {
        width: 100%;
        max-width: clamp(190px, 24vw, 460px);
        align-self: center;
        justify-self: center;
    }
    .feature-description {
        max-width: 100%;
        margin: 0;
        padding: 0.2svh 0;
        font-size: clamp(0.5rem, calc(1vw + 0.9svh), 1.1rem);
        line-height: 1.2;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }
    #feature-desc1,
    #feature-desc2,
    #feature-desc3 {
        height: auto;
        justify-content: center;
        align-items: center;
        align-self: center;
        margin-top: 1svh;
    }
    #feature-desc3 .giant {
        position: relative;
        top: -6svh;
    }
    #section-button {
        bottom: max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px), 12px);
    }
    .start-button {
        font-size: clamp(0.5rem, calc(1.3vw + 1svh), 1.6rem);
    }
}
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1400px) {
    .feature-description {
        max-width: 80%;
        font-size: clamp(1.2rem, calc(1vw + 1svh), 2.7rem);
        line-height: 1.2;
    }
    #feature-block1,
    #feature-block2,
    #feature-block3 {
        width: 100%;
        align-self: center;
        justify-self: center;
        margin-top: 0;
    }
}
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 4/3) {
    .feature-description {
        max-width: 80%;
        font-size: clamp(0.9rem, calc(1vw + 1svh), 2rem);
        line-height: 1.2;
    }
    #feature-block1,
    #feature-block2,
    #feature-block3 {
        width: 100%;
        align-self: center;
        justify-self: center;
        margin-top: 0;
    }
}
@media (orientation: portrait) {
    .landscape-bg {
        display: none;
    }
    .portrait-bg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center;
    }
    #feature-preview-screen {
        height: 100svh;
        max-height: 100svh;
        overflow: hidden;
    }
    #fps-wrapper {
        display: grid;
        grid-template-areas:
            "logo"
            "feature-block1"
            "feature-desc1"
            "feature-block3"
            "feature-desc3"
            "feature-block2"
            "feature-desc2"
            "."
            "start-button";
        grid-template-columns: 1fr;
        grid-template-rows:
            minmax(10svh, auto)
            minmax(14svh, auto)
            auto
            minmax(10svh, auto)
            auto
            minmax(14svh, auto)
            auto
            minmax(0, 1fr)
            minmax(9svh, auto);
        height: 100svh;
        max-height: 100svh;
        margin-top: 0;
        padding-top: max(env(safe-area-inset-top, 0px), env(safe-area-max-inset-top, 0px), 24px);
        padding-bottom: max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px), 20px);
        row-gap: clamp(0.9svh, 1.2svh, 1.8svh);
        --portrait-block-gap: clamp(24px, 5svh, 46px);
        overflow: hidden;
        box-sizing: border-box;
    }
    .bg-dim-cutouts {
        -webkit-mask:
                linear-gradient(#000 0 0),
                linear-gradient(#000 0 0),
                linear-gradient(#000 0 0),
                linear-gradient(#000 0 0);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size:
                100% 100%,
                76% 18%,
                76% 16%,
                76% 18%;
        -webkit-mask-position:
                0 0,
                50% 20%,
                50% 43%,
                50% 66%;
        -webkit-mask-composite: source-over, xor, xor, xor;
    }
    .feature-block {
        margin: 0 auto;
        padding: 0;
    }
    #feature-block1,
    #feature-block2 {
        max-width: 58vw;
        width: 260px;
        height: auto;
        margin: 0 auto;
        align-self: end;
        justify-self: center;
    }
    #feature-block3 {
        max-width: 54vw;
        width: 240px;
        height: auto;
        margin: 0 auto;
        justify-self: center;
    }
    #feature-block3 > .feature-image {
        width: 50%;
        transform: none;
        margin-top: -4svh;
    }
    #feature-block1::before,
    #feature-block2::before {
        inset: -3.5%;
        border-radius: 14px;
    }
    #logo-placeholder {
        position: relative;
        grid-area: logo;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0;
        z-index: 2;
    }
    .logo-image {
        width: auto;
        height: clamp(8svh, 9.5svh, 12svh);
    }
    #feature-desc1,
    #feature-desc2,
    #feature-desc3 {
        width: 100%;
        height: auto;
        margin-top: clamp(0.6svh, 1svh, 1.4svh);
        margin-bottom: clamp(0.6svh, 1svh, 1.4svh);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #feature-desc3 {
        margin-top: 1svh;
    }
    #feature-desc1,
    #feature-desc3 {
        margin-bottom: var(--portrait-block-gap);
    }
    .feature-description {
        width: 100%;
        max-width: 88%;
        margin: 0 auto;
        padding: 0.15svh 0.3vw;
        display: block;
        text-align: center;
        font-size: clamp(0.8rem, calc(1.05vw + 1.05svh), 1.05rem);
        line-height: 1.05;
    }
    #section-button {
        bottom: max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px), 8px);
        --cta-w: clamp(40vw, 45vw, 50vw);
        --loading-h: clamp(12px, 4.4svh, 14px);
        --start-h: clamp(24px, 5.8svh, 34px);
        --cta-shell-h: max(var(--loading-h), var(--start-h));
    }
    .start-button {
        font-size: clamp(0.5rem, calc(1.5vw + 1svh), 1.5rem);
    }
}
@media (orientation: portrait) and (max-height: 670px) {
    #fps-wrapper {
        display: grid;
        grid-template-areas:
            "logo"
            "feature-block1"
            "feature-desc1"
            "feature-block3"
            "feature-desc3"
            "feature-block2"
            "feature-desc2"
            "."
            "start-button";
        grid-template-columns: 1fr;
        grid-template-rows:
            minmax(9svh, auto)
            minmax(13svh, auto)
            auto
            minmax(9svh, auto)
            auto
            minmax(13svh, auto)
            auto
            minmax(0, 1fr)
            minmax(8svh, auto);
        height: 100svh;
        max-height: 100svh;
        margin-top: 0;
        row-gap: clamp(0.2svh, 0.6svh, 1svh);
        overflow: hidden;
        box-sizing: border-box;
    }
    #logo-placeholder {
        position: relative;
    }
    .logo-image {
        height: clamp(7svh, 8.5svh, 10.5svh);
    }
}
@media (orientation: portrait) and (min-height: 1000px) {
    #fps-wrapper {
        row-gap: clamp(0.4svh, 0.9svh, 1.4svh);
    }
}
@media (orientation: portrait) and (max-width: 560px) and (max-height: 740px) {
    .logo-image {
        height: 7.5svh;
    }
}
@supports (-webkit-touch-callout: none) {
    @media (orientation: portrait) and (max-width: 560px) and (max-height: 740px) {
        #fps-wrapper {
            grid-template-areas:
                "logo"
                "feature-block1"
                "feature-desc1"
                "feature-block3"
                "feature-desc3"
                "feature-block2"
                "feature-desc2"
                "start-button";

            grid-template-columns: 1fr;
            grid-template-rows: repeat(8, auto);

            align-content: start;
            justify-items: center;

            height: 100svh;
            max-height: 100svh;
            padding-top: 16px;
            padding-bottom: 8px;
            row-gap: 0;
            overflow: hidden;
            box-sizing: border-box;
        }

        .logo-image {
            height: 7.5svh;
            margin: 0 0 0.8svh 0;
        }

        #feature-block1,
        #feature-block2 {
            width: 205px;
            max-width: 54vw;
            margin: 0;
            align-self: center;
            justify-self: center;
        }

        #feature-block3 {
            width: 110px;
            max-width: 30vw;
            margin: 1.8svh 0 0.2svh;
            align-self: center;
            justify-self: center;
        }

        #feature-block3 > .feature-image {
            width: 100%;
            margin: 0;
            transform: none;
        }

        #feature-desc1,
        #feature-desc2,
        #feature-desc3 {
            height: auto;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #feature-desc1 {
            margin-top: 1.1svh;
            margin-bottom: 2.2svh;
        }

        #feature-desc3 {
            margin-top: 0.2svh;
            margin-bottom: 1.4svh;
        }

        #feature-desc2 {
            margin-top: 1svh;
            margin-bottom: 3svh;
        }

        .feature-description {
            max-width: 92%;
            padding: 0;
            font-size: clamp(0.58rem, 2.05svh, 0.76rem);
            line-height: 1.05;
        }

        #section-button {
            --cta-w: 44vw;
            --loading-h: 10px;
            --start-h: 24px;
            --cta-shell-h: max(var(--loading-h), var(--start-h));
        }

        #feature-block1,
        #feature-block2 {
            width: 180px;
            max-width: 48vw;
        }

        #feature-block3 {
            width: 95px;
            max-width: 26vw;
        }

        #feature-block3 > .feature-image {
            width: 100%;
        }

        .feature-description {
            font-size: clamp(0.54rem, 1.9svh, 0.72rem);
        }

        #feature-block2 {
            margin-top: 2.2svh;
        }

        #feature-desc2 {
            margin-top: 1.2svh;
        }
    }
}
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    #feature-block2 .counter-current {
        font-size: clamp(6px, 2.6vw, 10px);
    }

    #feature-block2 .counter-sep,
    #feature-block2 .counter-total {
        font-size: clamp(6px, 2.1vw, 10px);
    }
}