:root {
    color-scheme: dark;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background: #6415a8;
    font-family: inherit;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

button {
    font: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

input {
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
}

.custom-cursor {
    display: none;
}

@media (hover: hover) and (pointer: fine) {

    html.has-custom-cursor,
    html.has-custom-cursor * {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        display: block;
        width: clamp(44px, 4vw, 62px);
        aspect-ratio: 2303 / 2156;
        opacity: 0;
        transform: translate3d(-6%, -4%, 0);
        pointer-events: none;
        user-select: none;
        will-change: transform;
    }

    .custom-cursor.is-visible {
        opacity: 1;
    }

    .custom-cursor__image {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left top;
        pointer-events: none;
    }

    .custom-cursor__image--drag {
        opacity: 0;
    }

    .custom-cursor.is-pressed .custom-cursor__image--default {
        opacity: 0;
    }

    .custom-cursor.is-pressed .custom-cursor__image--drag {
        opacity: 1;
    }
}

.intro {
    position: relative;
    isolation: isolate;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    min-height: 500px;
    overflow: hidden;
    background: url("../images/webp/WEB_BG.webp") center / cover no-repeat;
}

.intro::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at 50% 44%, transparent 32%, rgba(42, 0, 79, 0.12) 72%, rgba(25, 0, 48, 0.34) 100%),
        radial-gradient(circle at 50% 62%, rgba(224, 192, 255, 0.14), transparent 36%);
    box-shadow: inset 0 0 11vw rgba(22, 0, 47, 0.3);
    animation: haunted-light 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.intro__mist {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -18%;
    width: 75vw;
    height: 45vh;
    translate: -50% 0;
    border-radius: 50%;
    background: rgba(238, 210, 255, 0.14);
    filter: blur(70px);
    animation: mist-breathe 5s ease-in-out infinite alternate;
    pointer-events: none;
}

.intro__fog {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.intro__fog::before,
.intro__fog::after {
    content: "";
    position: absolute;
    left: -25%;
    width: 150%;
    border-radius: 50%;
    will-change: transform, opacity;
}

.intro__fog::before {
    bottom: -17%;
    height: 53%;
    opacity: 0.72;
    background:
        radial-gradient(ellipse at 8% 52%, rgba(244, 232, 255, 0.52) 0 6%, transparent 27%),
        radial-gradient(ellipse at 28% 68%, rgba(226, 201, 250, 0.5) 0 9%, transparent 31%),
        radial-gradient(ellipse at 51% 46%, rgba(250, 244, 255, 0.42) 0 8%, transparent 29%),
        radial-gradient(ellipse at 72% 63%, rgba(220, 191, 248, 0.48) 0 10%, transparent 32%),
        radial-gradient(ellipse at 94% 48%, rgba(247, 235, 255, 0.48) 0 7%, transparent 28%);
    filter: blur(25px);
    animation: fog-drift-front 13s ease-in-out infinite alternate;
}

.intro__fog::after {
    bottom: 12%;
    height: 43%;
    opacity: 0.28;
    background:
        radial-gradient(ellipse at 16% 55%, rgba(238, 220, 255, 0.55) 0 7%, transparent 29%),
        radial-gradient(ellipse at 46% 62%, rgba(238, 220, 255, 0.44) 0 11%, transparent 34%),
        radial-gradient(ellipse at 82% 50%, rgba(231, 207, 255, 0.5) 0 8%, transparent 31%);
    filter: blur(38px);
    animation: fog-drift-back 18s ease-in-out infinite alternate-reverse;
}

.spirit-lights {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.wisp {
    --wisp-size: clamp(6px, 0.65vw, 12px);
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--wisp-size);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 7px #fff, 0 0 20px #e6c9ff, 0 0 42px #b766ff;
    filter: blur(0.2px);
    will-change: transform, opacity;
    animation: wisp-rise var(--duration) var(--delay) ease-in-out infinite;
}

.wisp::after {
    content: "";
    position: absolute;
    top: 70%;
    left: 50%;
    width: 45%;
    height: calc(var(--wisp-size) * 3.6);
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(229, 203, 255, 0.65), transparent);
    filter: blur(2px);
    transform: translateX(-50%);
}

.wisp--one {
    --x: 8%;
    --y: 76%;
    --duration: 8.5s;
    --delay: -2s;
}

.wisp--two {
    --x: 24%;
    --y: 68%;
    --duration: 10s;
    --delay: -6s;
}

.wisp--three {
    --x: 39%;
    --y: 82%;
    --duration: 9.2s;
    --delay: -4s;
}

.wisp--four {
    --x: 63%;
    --y: 73%;
    --duration: 11s;
    --delay: -8s;
}

.wisp--five {
    --x: 78%;
    --y: 84%;
    --duration: 8.8s;
    --delay: -5s;
}

.wisp--six {
    --x: 91%;
    --y: 69%;
    --duration: 10.4s;
    --delay: -1s;
}

.ghost {
    --ghost-size: clamp(130px, 12vw, 220px);
    --asset-scale: 1;
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--ghost-size);
    height: var(--ghost-size);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.ghost img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--asset-scale));
    user-select: none;
    filter: drop-shadow(0 12px 18px rgba(37, 0, 75, 0.25));
}

.ghost--one {
    --enter-x: -42vw;
    --enter-y: -30vh;
    --enter-rotate: -24deg;
    --roam-x: clamp(28px, 4vw, 72px);
    --roam-y: clamp(14px, 2vw, 34px);
    top: 17%;
    left: 15%;
}

.ghost--two {
    --enter-x: -38vw;
    --enter-y: 34vh;
    --enter-rotate: 20deg;
    --roam-x: clamp(24px, 3.5vw, 62px);
    --roam-y: clamp(18px, 2.8vw, 48px);
    --asset-scale: 1.03;
    top: 57%;
    left: 14%;
}

.ghost--three {
    --enter-x: 42vw;
    --enter-y: 30vh;
    --enter-rotate: -20deg;
    --roam-x: clamp(30px, 4.5vw, 78px);
    --roam-y: clamp(15px, 2vw, 36px);
    --asset-scale: 1.04;
    top: 54%;
    right: 9%;
}

.ghost--four {
    --enter-x: 44vw;
    --enter-y: -32vh;
    --enter-rotate: 24deg;
    --roam-x: clamp(26px, 4vw, 68px);
    --roam-y: clamp(18px, 2.5vw, 44px);
    --asset-scale: 1.18;
    top: 20%;
    right: 14%;
}

/* .ghost--five {
    --enter-x: 4vw;
    --enter-y: -45vh;
    --enter-rotate: -14deg;
    --roam-x: clamp(32px, 5vw, 86px);
    --roam-y: clamp(16px, 2.5vw, 42px);
    --asset-scale: 1.18;
    top: 2%;
    left: 47%;
} */

.is-ready .ghost--one {
    animation: ghost-enter 1.05s 0.05s cubic-bezier(0.18, 0.8, 0.25, 1.22) forwards,
        ghost-roam-a 5.2s 1.1s ease-in-out infinite;
}

.is-ready .ghost--two {
    animation: ghost-enter 1.05s 0.2s cubic-bezier(0.18, 0.8, 0.25, 1.22) forwards,
        ghost-roam-b 5.8s 1.25s ease-in-out infinite;
}

.is-ready .ghost--three {
    animation: ghost-enter 1.05s 0.35s cubic-bezier(0.18, 0.8, 0.25, 1.22) forwards,
        ghost-roam-a 6.2s 1.4s ease-in-out infinite reverse;
}

.is-ready .ghost--four {
    animation: ghost-enter 1.05s 0.5s cubic-bezier(0.18, 0.8, 0.25, 1.22) forwards,
        ghost-roam-b 4.8s 1.55s ease-in-out infinite reverse;
}

/* .is-ready .ghost--five {
    animation: ghost-enter 1.05s 0.65s cubic-bezier(0.18, 0.8, 0.25, 1.22) forwards,
        ghost-roam-c 5.5s 1.7s ease-in-out infinite;
} */

.intro__logo {
    position: absolute;
    z-index: 2;
    top: 47%;
    left: 50%;
    width: min(59vw, 720px);
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(-5deg);
    transform-origin: center;
    user-select: none;
    filter: drop-shadow(0 18px 18px rgba(41, 0, 70, 0.3));
    will-change: transform, opacity;
}

.is-ready .intro__logo {
    animation: logo-pop 0.78s 1.35s cubic-bezier(0.18, 0.89, 0.32, 1.35) forwards;
}

.intro__actions {
    position: absolute;
    z-index: 3;
    bottom: clamp(28px, 7vh, 72px);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 30px);
    transform: translateX(-50%);
}

.play-button {
    width: clamp(210px, 20vw, 310px);
    padding: 16px 34px 18px;
    border: 4px solid #fff;
    border-radius: 999px;
    outline: 0;
    opacity: 0;
    color: #fff;
    background: linear-gradient(180deg, #ff77b5 0%, #f22878 55%, #c71362 100%);
    box-shadow: 0 7px 0 #80104c, 0 12px 24px rgba(53, 0, 73, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(45px) scale(0.82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
}

.play-button span {
    display: block;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: clamp(20px, 1.4vw, 38px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 3px 0 rgba(115, 11, 76, 0.65);
}

.is-ready .play-button {
    animation: button-arrive 0.62s 2.15s cubic-bezier(0.18, 0.89, 0.32, 1.35) forwards,
        button-pulse 1.8s 2.77s ease-in-out infinite;
}

.play-button:hover {
    filter: brightness(1.08);
}

.play-button:active {
    box-shadow: 0 3px 0 #80104c, 0 7px 14px rgba(53, 0, 73, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.play-button:focus-visible {
    outline: 4px solid #ffe970;
    outline-offset: 5px;
}

.facebook-share-button {
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: clamp(210px, 20vw, 310px);
    padding: 16px 24px 18px;
    border: 4px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #4484e7, #1877f2 58%, #0c56ba);
    box-shadow: 0 7px 0 #083b82, 0 12px 24px rgba(18, 31, 78, 0.38),
        inset 0 2px 0 rgba(255, 255, 255, 0.38);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0;
    cursor: pointer;
    transform: translateY(45px) scale(0.82);
    will-change: transform, opacity;
}

.facebook-share-button:not([hidden]) {
    display: inline-flex;
}

.is-ready .facebook-share-button:not([hidden]) {
    animation: button-arrive 0.62s 2.15s cubic-bezier(0.18, 0.89, 0.32, 1.35) forwards,
        button-pulse 1.8s 2.77s ease-in-out infinite;
}

.facebook-share-button span {
    display: grid;
    width: 27px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    color: #1877f2;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.facebook-share-button:active {
    translate: 0 4px;
    box-shadow: 0 3px 0 #083b82, 0 7px 14px rgba(18, 31, 78, 0.34);
}

.facebook-share-button:focus-visible {
    outline: 4px solid #ffe970;
    outline-offset: 5px;
}

.daily-play-status {
    position: absolute;
    z-index: 4;
    bottom: calc(clamp(28px, 8vh, 72px) + 82px);
    left: 50%;
    width: 90vw;
    margin: 0;
    color: #ffffff;
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 7px rgba(39, 0, 65, 0.8);
    transform: translateX(-50%);
}

.intro.is-limit-reached .play-button {
    background: linear-gradient(180deg, #b9b9b9 0%, #858585 100%);
    box-shadow: 0 7px 0 #555555, 0 12px 24px rgba(38, 38, 38, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.intro.is-limit-reached .play-button span {
    font-size: 20px;
    text-shadow: 0 3px 0 rgba(65, 65, 65, 0.65);
}

.intro.is-limit-reached .play-button:active {
    box-shadow: 0 3px 0 #555555, 0 7px 14px rgba(38, 38, 38, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

.intro.is-limit-reached .audio-unlock-button {
    display: none !important;
}

.audio-unlock-button {
    position: absolute;
    z-index: 4;
    bottom: calc(clamp(28px, 7vh, 72px) + 92px);
    left: 50%;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(54, 7, 88, 0.68);
    box-shadow: 0 4px 15px rgba(35, 0, 60, 0.28);
    backdrop-filter: blur(5px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.035em;
    transform: translateX(-50%);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.audio-unlock-button.is-visible {
    animation: audio-button-appear 0.28s ease-out both;
}

@media (hover: none) and (pointer: coarse) {
    .audio-unlock-button.is-visible {
        display: inline-flex;
    }
}

.audio-unlock-button span {
    font-size: 17px;
    line-height: 1;
}

.audio-unlock-button:focus-visible {
    outline: 3px solid #ffe970;
    outline-offset: 3px;
}

@keyframes audio-button-appear {
    from {
        opacity: 0;
        transform: translate(-50%, 7px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes ghost-enter {
    0% {
        opacity: 0;
        transform: translate(var(--enter-x), var(--enter-y)) scale(0.55) rotate(var(--enter-rotate));
    }

    35% {
        opacity: 1;
    }

    75% {
        transform: translate(0, 0) scale(1.08) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes ghost-roam-a {

    0%,
    100% {
        opacity: 1;
        transform: translate(calc(0px - var(--roam-x)), 0) rotate(-4deg);
    }

    25% {
        opacity: 1;
        transform: translate(0, calc(0px - var(--roam-y))) rotate(1deg);
    }

    50% {
        opacity: 1;
        transform: translate(var(--roam-x), 0) rotate(4deg);
    }

    75% {
        opacity: 1;
        transform: translate(0, var(--roam-y)) rotate(-1deg);
    }
}

@keyframes ghost-roam-b {

    0%,
    100% {
        opacity: 1;
        transform: translate(0, calc(0px - var(--roam-y))) rotate(3deg);
    }

    25% {
        opacity: 1;
        transform: translate(var(--roam-x), 0) rotate(-2deg);
    }

    50% {
        opacity: 1;
        transform: translate(0, var(--roam-y)) rotate(-4deg);
    }

    75% {
        opacity: 1;
        transform: translate(calc(0px - var(--roam-x)), 0) rotate(1deg);
    }
}

@keyframes ghost-roam-c {

    0%,
    100% {
        opacity: 1;
        transform: translate(calc(0px - var(--roam-x)), var(--roam-y)) rotate(-5deg);
    }

    35% {
        opacity: 1;
        transform: translate(0, calc(0px - var(--roam-y))) rotate(2deg);
    }

    70% {
        opacity: 1;
        transform: translate(var(--roam-x), 0) rotate(5deg);
    }
}

@keyframes logo-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15) rotate(-5deg);
    }

    62% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    }

    82% {
        transform: translate(-50%, -50%) scale(0.95) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }
}

@keyframes button-arrive {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.82);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes button-pulse {

    0%,
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(0) scale(1.045);
    }
}

@keyframes mist-breathe {
    from {
        opacity: 0.5;
        transform: scale(0.9);
    }

    to {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

@keyframes haunted-light {
    from {
        opacity: 0.68;
    }

    to {
        opacity: 1;
    }
}

@keyframes fog-drift-front {
    from {
        transform: translate3d(-4%, 2%, 0) scale(1);
    }

    to {
        transform: translate3d(5%, -3%, 0) scale(1.08);
    }
}

@keyframes fog-drift-back {
    from {
        transform: translate3d(5%, 0, 0) scale(1.06);
    }

    to {
        transform: translate3d(-5%, -5%, 0) scale(0.96);
    }
}

@keyframes wisp-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0) scale(0.35);
    }

    16% {
        opacity: 0.58;
    }

    45% {
        opacity: 0.38;
        transform: translate3d(20px, -30px, 0) scale(1);
    }

    72% {
        opacity: 0.52;
        transform: translate3d(-14px, -82px, 0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translate3d(10px, -145px, 0) scale(0.45);
    }
}

@media (max-width: 700px),
(orientation: portrait) {
    .intro {
        min-height: 480px;
        background-image: url("../images/webp/MOB_BG.webp");
    }

    .intro__logo {
        top: 46%;
        width: min(88vw, 590px);
    }

    .intro__fog::before {
        bottom: -8%;
        height: 48%;
        filter: blur(19px);
    }

    .intro__fog::after {
        bottom: 18%;
        filter: blur(28px);
    }

    .wisp--two,
    .wisp--five {
        display: none;
    }

    .ghost--one {
        top: 15%;
        left: 3%;
    }

    .ghost--two {
        top: 63%;
        left: 8%;
    }

    .ghost--three {
        top: 63%;
        right: 5%;
    }

    .ghost--four {
        top: 20%;
        right: 2%;
    }

    /* .ghost--five {
        top: 4%;
        left: 43%;
    } */

    .ghost {
        --ghost-size: clamp(105px, 27vw, 165px);
    }

    .intro__actions {
        bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
        flex-direction: column;
        gap: 16px;
    }

    .play-button {
        width: min(68vw, 290px);
        padding: 14px 28px 16px;
    }

    .intro.is-limit-reached .play-button,
    .facebook-share-button {
        width: min(78vw, 310px);
        padding: 14px 24px 16px;
    }

    .daily-play-status {
        bottom: max(174px, calc(env(safe-area-inset-bottom) + 162px));
    }

    .audio-unlock-button {
        bottom: calc(max(32px, env(safe-area-inset-bottom) + 20px) + 82px);
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .intro__logo {
        top: 43%;
        width: min(54vw, 600px);
    }

    .intro__actions {
        bottom: 22px;
    }

    .play-button,
    .facebook-share-button {
        padding-block: 11px 13px;
    }

    .play-button span {
        font-size: 24px;
    }
}

/* Maybi Logo at top */
.maybi-logo {
    position: absolute;
    z-index: 4;
    top: clamp(24px, 4vh, 48px);
    left: 50%;
    width: clamp(120px, 15vw, 100px);
    height: auto;
    transform: translateX(-50%);
    user-select: none;
    opacity: 0;
    will-change: opacity;
}

.is-ready .maybi-logo {
    animation: logo-fade-in 0.6s 0.8s ease-out forwards;
}

@keyframes logo-fade-in {
    to {
        opacity: 1;
    }
}

/* Countdown Section */
.countdown {
    position: fixed;
    isolation: isolate;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    display: none;
    align-items: center;
    justify-content: center;
    background: url("../images/webp/purple_bg_glow.webp") center / cover no-repeat;
    z-index: 10;
}

.countdown.is-active {
    display: flex;
}

.countdown__number {
    position: relative;
    z-index: 1;
    max-width: 50vw;
    max-height: 50vh;
    object-fit: contain;
    animation: count-pop 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.35);
    will-change: transform, filter, opacity;
}

.countdown.is-dzut .countdown__number {
    width: 96vw;
    height: 90vh;
    height: 90svh;
    max-width: none;
    max-height: none;
}

.countdown.is-dzut::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.72) 0,
            rgba(255, 231, 91, 0.42) 12%,
            rgba(255, 76, 163, 0.2) 27%,
            transparent 54%);
    pointer-events: none;
    animation: dzut-screen-glow 1.15s ease-out both;
}

@keyframes count-pop {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.15) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes dzut-impact {
    0% {
        opacity: 1;
        transform: scale(1.18);
        filter: brightness(1.85) drop-shadow(0 0 24px #fff) drop-shadow(0 0 58px #ffe65b);
    }

    22% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1.6) drop-shadow(0 0 20px #fff) drop-shadow(0 0 46px #ff4ca3);
    }

    68% {
        opacity: 1;
        transform: scale(0.62);
        filter: brightness(1.3) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px #ff4ca3);
    }

    100% {
        opacity: 0;
        transform: scale(0.3);
        filter: brightness(1.1) blur(1.5px) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
    }
}

@keyframes dzut-screen-glow {
    0% {
        opacity: 1;
        transform: scale(1.3);
    }

    30% {
        opacity: 0.82;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.28);
    }
}

/* Drag Screen */
.drag-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    display: none;
    overflow: hidden;
    background: url("../images/webp/background_drag_2.webp") center / cover no-repeat;
    z-index: 11;
}

.drag-screen.is-active {
    display: block;
}

.drag-screen__instruction {
    position: absolute;
    z-index: 19;
    top: clamp(18px, 3vh, 32px);
    left: 50%;
    width: min(72vw, 820px);
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(14px, 1.65vw, 23px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.035em;
    text-align: center;
    text-shadow: 0 2px 9px rgba(37, 1, 62, 0.72);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Slow-moving clouds shared by screens using background_drag_2.webp */
.cloud-layer {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.screen-cloud {
    position: absolute;
    display: block;
    height: auto;
    opacity: 0.26;
    filter: blur(0.4px) drop-shadow(0 0 24px rgba(220, 186, 255, 0.2));
    will-change: transform;
    user-select: none;
}

.screen-cloud--one {
    top: -16%;
    left: 0;
    width: clamp(520px, 56vw, 860px);
    animation: cloud-drift-right 52s linear infinite -17s;
}

.screen-cloud--two {
    top: 25%;
    left: 0;
    width: clamp(420px, 46vw, 700px);
    opacity: 0.2;
    animation: cloud-drift-right 64s linear infinite -43s;
}

.screen-cloud--three {
    top: 54%;
    left: 100vw;
    width: clamp(500px, 54vw, 820px);
    opacity: 0.23;
    animation: cloud-drift-left 58s linear infinite -31s;
}

/* 20-second game timer */
.game-timer {
    --timer-angle: 360deg;
    position: absolute;
    z-index: 20;
    top: clamp(14px, 2.5vw, 30px);
    left: clamp(14px, 2.5vw, 30px);
    display: grid;
    place-items: center;
    width: clamp(58px, 5.5vw, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#ff4c9a var(--timer-angle), rgba(255, 255, 255, 0.24) 0);
    box-shadow: 0 5px 16px rgba(38, 0, 61, 0.32), 0 0 20px rgba(255, 83, 166, 0.22);
    transition: background 0.1s linear, filter 0.25s ease;
}

.game-timer::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: inherit;
    background: rgba(71, 14, 116, 0.88);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
}

.game-timer__value {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(31, 0, 55, 0.7);
}

.game-timer__value strong {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 900;
}

.game-timer__value small {
    margin-left: 1px;
    font-size: clamp(9px, 0.8vw, 12px);
    font-weight: 800;
}

.game-timer.is-warning {
    filter: drop-shadow(0 0 8px rgba(255, 52, 89, 0.75));
    animation: timer-warning 0.65s ease-in-out infinite alternate;
}

/* Flying Ghosts */
.flying-ghost {
    --ghost-size: clamp(90px, 10vw, 140px);
    --asset-scale: 1;
    --flight-flip: -1;
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--ghost-size);
    height: var(--ghost-size);
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 12;
    transition: transform 0.1s ease-out;
}

.flying-ghost.dragging {
    cursor: grabbing;
    z-index: 15;
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    transition: none;
}

.flying-ghost.is-catching,
.flying-ghost.is-caught {
    pointer-events: none;
}

.flying-ghost.is-caught {
    visibility: hidden;
}

.flying-ghost img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--asset-scale));
    pointer-events: none;
}

.flying-ghost,
.flying-ghost img,
.basket,
.basket img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Năm con ma đầu tiên bay nhanh hơn 1.5 lần */
.flying-ghost--1 {
    top: 10%;
    left: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-right 1.333s linear infinite;
}

.flying-ghost--2 {
    --asset-scale: 1.2;
    top: 25%;
    right: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-left 1.333s linear infinite;
}

.flying-ghost--3 {
    --asset-scale: 1.04;
    top: 40%;
    right: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-left 1.667s linear infinite;
}

.flying-ghost--4 {
    --asset-scale: 1.2;
    top: 15%;
    right: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-left-flip 1.111s linear infinite 0.5s;
}

.flying-ghost--5 {
    --asset-scale: 0.8;
    top: 30%;
    left: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-right 1.2225s linear 1s infinite backwards;
}

.flying-ghost--6 {
    --asset-scale: 1.08;
    --flight-flip: 1;
    top: 50%;
    left: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-right 1.6s linear infinite -0.8s;
}

.flying-ghost--7 {
    --asset-scale: 0.92;
    top: 5%;
    right: calc(-1 * var(--ghost-size) - 20px);
    animation: fly-zigzag-left-flip 1.8s linear infinite -2.1s;
}

.flying-ghost--8 {
    --ghost-size: clamp(105px, 11vw, 155px);
    --asset-scale: 1.05;
    top: 43%;
    left: calc(-1 * var(--ghost-size) - 20px);
}

.flying-ghost--8.is-flying-once {
    animation: secret-fly-right 1.15s linear 10s 1 both;
}

@media (hover: none) and (pointer: coarse) {
    .flying-ghost--8.is-flying-once {
        animation-duration: 0.575s;
    }
}

.flying-ghost--secret img {
    animation: secret-ghost-glow 0.62s ease-in-out infinite alternate;
}

@keyframes secret-ghost-glow {
    from {
        filter: brightness(1.08) drop-shadow(0 0 7px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px rgba(255, 213, 64, 0.7));
    }

    to {
        filter: brightness(1.55) saturate(1.25) drop-shadow(0 0 13px #fff) drop-shadow(0 0 30px #ffd43d) drop-shadow(0 0 46px rgba(255, 93, 181, 0.72));
    }
}

@keyframes secret-fly-right {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(-5deg);
    }

    1% {
        opacity: 1;
    }

    20% {
        transform: translate3d(22vw, -34px, 0) rotate(7deg);
    }

    42% {
        transform: translate3d(47vw, 12px, 0) rotate(-4deg);
    }

    64% {
        transform: translate3d(72vw, 38px, 0) rotate(8deg);
    }

    82% {
        transform: translate3d(92vw, -18px, 0) rotate(-3deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(calc(100vw + var(--ghost-size) + 40px), 0, 0) rotate(-5deg);
    }
}

/* Basket */
.basket {
    position: absolute;
    isolation: isolate;
    bottom: clamp(20px, 2vh, 60px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(233px, 20vw, 367px);
    z-index: 13;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.basket::before,
.basket::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 52%;
    left: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.basket::before {
    width: 165%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.98) 0 7%,
            rgba(255, 242, 111, 0.95) 14%,
            rgba(255, 87, 180, 0.68) 36%,
            rgba(180, 72, 255, 0.3) 56%,
            transparent 72%);
    filter: blur(7px);
}

.basket::after {
    width: 58%;
    border: 5px solid rgba(255, 250, 176, 0.95);
    box-shadow:
        0 0 12px #fff,
        0 0 28px #ffde55,
        0 0 48px rgba(255, 62, 164, 0.92),
        0 0 75px rgba(174, 63, 255, 0.72);
}

.basket img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.basket__idle-glow {
    position: absolute;
    z-index: -2;
    top: 54%;
    left: 50%;
    width: 105%;
    aspect-ratio: 1.3;
    border-radius: 50%;
    background: radial-gradient(ellipse,
            rgba(255, 248, 178, 0.42) 0,
            rgba(255, 91, 181, 0.22) 38%,
            rgba(180, 85, 255, 0.1) 58%,
            transparent 74%);
    filter: blur(9px);
    transform: translate(-50%, -50%) scale(0.88);
    pointer-events: none;
    animation: basket-idle-glow 1.8s ease-in-out infinite alternate;
}

.basket.highlight {
    animation: basket-bounce 0.3s ease-out;
}

.basket.is-catching-glow::before {
    animation: basket-catch-glow 0.85s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

.basket.is-catching-glow::after {
    animation: basket-catch-ring 0.72s ease-out both;
}

.basket.is-catching-glow img {
    animation: basket-catch-pop 0.42s ease-out;
}

/* Result screen */
.result-screen {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: none;
    place-items: center;
    overflow: hidden;
    background: url("../images/webp/background_drag_2.webp") center / cover no-repeat;
}

.result-screen.is-active {
    display: grid;
}

.result-screen__success {
    position: relative;
    z-index: 2;
    display: none;
    width: min(90vw, 850px);
    padding: clamp(18px, 4vh, 48px) clamp(22px, 5vw, 64px);
    text-align: center;
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(42, 0, 71, 0.38));
}

.result-screen__success::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4% -4%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(184, 94, 238, 0.38), transparent 68%);
    filter: blur(18px);
}

.result-screen.is-success .result-screen__success {
    display: block;
    animation: result-pop 0.72s cubic-bezier(0.18, 0.89, 0.32, 1.3) both;
}

.result-screen__success h2 {
    margin: 0 0 10px;
    font-size: clamp(34px, 5vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    text-shadow: 0 4px 0 #6b198f, 0 8px 18px rgba(35, 0, 60, 0.34);
}

.result-screen__success p {
    margin: 0 0 clamp(4px, 1vh, 10px);
    font-size: clamp(20px, 2.6vw, 38px);
    font-weight: 800;
    line-height: 1.35;
}

.result-screen__success p strong {
    color: #ffdc59;
    font-size: 1.34em;
    text-shadow: 0 3px 0 #a84f08, 0 0 22px rgba(255, 220, 89, 0.4);
}

.gift-box {
    position: relative;
    isolation: isolate;
    width: clamp(132px, 20vh, 205px);
    margin: 0 auto clamp(6px, 1.2vh, 12px);
}

.gift-box::before,
.gift-box::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gift-box::before {
    width: 92%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 234, 110, 0.85) 0 8%, rgba(255, 153, 74, 0.44) 34%, transparent 70%);
    filter: blur(11px);
    animation: gift-glow 1.65s ease-in-out infinite alternate;
}

.gift-box::after {
    width: 74%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 232, 110, 0.45);
    box-shadow: 0 0 28px rgba(255, 218, 72, 0.65), inset 0 0 24px rgba(255, 218, 72, 0.35);
    animation: gift-ring 1.8s ease-out infinite;
}

.gift-box img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 12px rgba(42, 0, 61, 0.5)) drop-shadow(0 0 13px rgba(255, 221, 67, 0.7));
    transform-origin: 50% 78%;
    animation: gift-shake 1.9s ease-in-out infinite;
    user-select: none;
}

.gift-box__spark {
    position: absolute;
    z-index: 2;
    color: #fff7a3;
    font-size: clamp(18px, 3vh, 30px);
    line-height: 1;
    text-shadow: 0 0 7px #fff, 0 0 15px #ffc72c;
    animation: gift-spark 1.25s ease-in-out infinite alternate;
}

.gift-box__spark--one {
    top: 8%;
    left: -2%;
}

.gift-box__spark--two {
    top: 30%;
    right: -6%;
    animation-delay: -0.55s;
}

.gift-box__spark--three {
    right: 10%;
    bottom: 7%;
    font-size: clamp(12px, 2vh, 21px);
    animation-delay: -0.9s;
}

.result-button {
    min-width: clamp(210px, 24vw, 340px);
    padding: 16px 32px 18px;
    border: 4px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff70b3, #ed176d 60%, #c80e5d);
    box-shadow: 0 7px 0 #81104b, 0 12px 24px rgba(43, 0, 65, 0.36),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    font-size: clamp(22px, 2.3vw, 20px);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.2s ease, translate 0.12s ease, box-shadow 0.12s ease;
}

.result-button:hover {
    filter: brightness(1.1);
}

.result-button:active {
    translate: 0 4px;
    box-shadow: 0 3px 0 #81104b, 0 7px 16px rgba(43, 0, 65, 0.32);
}

.result-button:focus-visible {
    outline: 4px solid #ffdf5d;
    outline-offset: 5px;
}

/* Deal 8K reward popup */
.reward-modal {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: none;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(20, 2, 35, 0.82);
    backdrop-filter: blur(7px);
}

.reward-modal.is-open {
    display: grid;
    animation: overlay-fade-in 0.28s ease-out both;
}

.reward-card {
    position: relative;
    isolation: isolate;
    width: min(92vw, 470px);
    padding: clamp(20px, 4vw, 34px);
    overflow: hidden;
    border: 3px solid #ffd95c;
    border-radius: 28px;
    color: #fff;
    text-align: center;
    background: linear-gradient(145deg, rgba(128, 32, 182, 0.98), rgba(64, 10, 111, 0.99));
    box-shadow: 0 0 0 6px rgba(255, 76, 163, 0.7), 0 0 0 9px rgba(255, 224, 100, 0.28),
        0 24px 65px rgba(4, 0, 15, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.reward-modal.is-open .reward-card {
    animation: reward-card-pop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.25) both;
}

.reward-card::before,
.reward-card::after {
    content: "✦";
    position: absolute;
    z-index: -1;
    color: rgba(255, 220, 89, 0.24);
    font-size: 130px;
    line-height: 1;
}

.reward-card::before {
    top: -38px;
    left: -24px;
    rotate: -18deg;
}

.reward-card::after {
    right: -24px;
    bottom: -42px;
    rotate: 22deg;
}

.reward-card__shine {
    position: absolute;
    z-index: -1;
    inset: -60% auto -60% -35%;
    width: 28%;
    rotate: 18deg;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: reward-shine 3.2s ease-in-out infinite;
}

.reward-card__confirm:focus-visible,
.reward-card__retry:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.reward-card__eyebrow {
    margin: 0 0 12px;
    color: #ffdf5d;
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: 900;
    letter-spacing: 0.18em;
}

.reward-card h3 {
    margin: 0 38px 16px;
    font-size: clamp(22px, 4.5vw, 32px);
    font-weight: 900;
    line-height: 1.12;
    text-shadow: 0 3px 0 #81104b, 0 0 18px rgba(255, 101, 180, 0.55);
}

.reward-card__image-shell {
    position: relative;
    display: grid;
    width: min(100%, 360px);
    height: min(52vh, 430px);
    min-height: 230px;
    margin: 0 auto 20px;
    padding: 9px;
    overflow: hidden;
    place-items: center;
    border: 3px solid #ffd95c;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff, #fff7fc);
    box-shadow: 0 8px 25px rgba(29, 0, 48, 0.38), 0 0 24px rgba(255, 215, 73, 0.26);
}

.reward-card__image-shell::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 5px;
    border: 1px solid rgba(226, 36, 123, 0.28);
    border-radius: 13px;
    pointer-events: none;
}

.reward-card__image-shell.is-loading::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 42px;
    aspect-ratio: 1;
    border: 5px solid rgba(124, 29, 172, 0.2);
    border-top-color: #ec2577;
    border-radius: 50%;
    animation: reward-loader 0.75s linear infinite;
}

.reward-card__image {
    position: absolute;
    z-index: 1;
    inset: 9px;
    display: block;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    image-orientation: from-image;
    border-radius: 10px;
    opacity: 0;
    scale: 0.96;
    transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.25);
}

.reward-card__image.is-ready {
    opacity: 1;
    scale: 1;
}

.reward-card__image-shell.has-image {
    min-height: 0;
}

.reward-card__actions {
    display: grid;
    justify-items: center;
    gap: 13px;
}

.reward-card__confirm {
    min-width: 190px;
    padding: 12px 25px 14px;
    border: 3px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff70b3, #ed176d 62%, #c80e5d);
    box-shadow: 0 5px 0 #81104b, 0 9px 18px rgba(28, 0, 48, 0.34);
    font-size: clamp(17px, 3vw, 21px);
    font-weight: 900;
    cursor: pointer;
}

.reward-card__confirm:active {
    translate: 0 3px;
    box-shadow: 0 2px 0 #81104b, 0 5px 12px rgba(28, 0, 48, 0.3);
}

.reward-card__retry {
    min-width: 160px;
    padding: 9px 22px 10px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    color: #fff;
    background: rgba(42, 4, 73, 0.48);
    box-shadow: 0 4px 0 rgba(42, 4, 73, 0.75);
    font-size: clamp(14px, 2.5vw, 17px);
    font-weight: 800;
    cursor: pointer;
}

.reward-card__retry:hover {
    background: rgba(236, 37, 119, 0.7);
}

.reward-card__retry:active {
    translate: 0 2px;
    box-shadow: 0 2px 0 rgba(42, 4, 73, 0.75);
}

/* Post-reward screens */
.choice-screen,
.thank-you-screen {
    position: fixed;
    z-index: 35;
    inset: 0;
    display: none;
    place-items: center;
    overflow: hidden;
    padding: 22px;
    color: #fff;
    background: url("../images/webp/background_drag_2.webp") center / cover no-repeat;
}

.choice-screen.is-active,
.thank-you-screen.is-active {
    display: grid;
    animation: overlay-fade-in 0.4s ease-out both;
}

.choice-screen::before,
.thank-you-screen::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, rgba(205, 105, 255, 0.3), transparent 44%);
    pointer-events: none;
}

.choice-panel,
.thank-you-panel {
    position: relative;
    z-index: 2;
    width: min(92vw, 900px);
    text-align: center;
    filter: drop-shadow(0 10px 25px rgba(31, 0, 55, 0.4));
    animation: result-pop 0.62s cubic-bezier(0.18, 0.89, 0.32, 1.2) both;
}

.choice-panel__eyebrow {
    margin: 0 0 6px;
    color: #ffdf5d;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 900;
    /* letter-spacing: 0.18em; */
    text-shadow: 0 3px 0 #a84f08, 0 0 18px rgba(255, 220, 89, 0.45);
}

.choice-panel__eyebrow small {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(11px, 1.35vw, 15px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-shadow: 0 2px 7px rgba(31, 0, 55, 0.65);
}

.choice-panel h2 {
    margin: 0 0 clamp(28px, 5vh, 48px);
    font-size: clamp(28px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.08;
    text-shadow: 0 4px 0 #6b198f, 0 8px 18px rgba(35, 0, 60, 0.34);
}

.phone-form {
    display: grid;
    width: min(100%, 470px);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 32px);
    gap: 12px;
    border: 3px solid #ffd95c;
    border-radius: 28px;
    text-align: left;
    background: linear-gradient(145deg, rgba(128, 32, 182, 0.96), rgba(64, 10, 111, 0.98));
    box-shadow: 0 0 0 5px rgba(255, 76, 163, 0.55), 0 18px 45px rgba(24, 0, 43, 0.5);
}

.phone-form__heading {
    display: grid;
    gap: 4px;
    padding-inline: 5px;
    color: #ffe990;
    text-align: center;
}

.phone-form__heading span {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 900;
    line-height: 1.15;
}

.phone-form__heading small {
    color: rgba(244, 221, 255, 0.82);
    font-size: 16px;
    font-weight: 600;
}

.phone-form input {
    width: 100%;
    height: 58px;
    padding: 0 18px;
    border: 3px solid #ffd95c;
    border-radius: 15px;
    outline: none;
    color: #3c075e;
    background: #fff;
    box-shadow: inset 0 2px 7px rgba(65, 5, 98, 0.13), 0 0 0 0 rgba(255, 217, 92, 0.25);
    font-size: 17px;
    font-weight: 700;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.phone-form input::placeholder {
    color: #9d86a9;
    font-weight: 600;
}

.phone-form input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 217, 92, 0.32), 0 0 22px rgba(255, 217, 92, 0.22);
}

.phone-form input[aria-invalid="true"] {
    border-color: #ff78ac;
    box-shadow: 0 0 0 4px rgba(255, 73, 145, 0.22);
}

.phone-form__error {
    min-height: 20px;
    margin: -3px 4px 2px;
    color: #ffd4e6;
    font-size: 13px;
    font-weight: 700;
}

.phone-number-confirm {
    position: relative;
    justify-self: center;
}

.phone-form.is-submitting .phone-number-confirm span {
    visibility: hidden;
}

.phone-form.is-submitting .phone-number-confirm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 23px;
    aspect-ratio: 1;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    translate: -50% -50%;
    animation: reward-loader 0.7s linear infinite;
}

.phone-number-confirm:disabled {
    cursor: wait;
}

.thank-you-panel h2 {
    max-width: 780px;
    margin: 0 auto clamp(34px, 2vh, 58px);
    font-size: clamp(34px, 4vw, 64px);
    font-weight: 900;
    line-height: 1.3;
    text-shadow: 0 4px 0 #6b198f, 0 8px 18px rgba(35, 0, 60, 0.34);
}

.thank-you-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(10px, 2vw, 18px);
    text-align: center;
    margin-top: 12px;
}

.thank-you-actions .result-button {
    display: grid;
    flex: 0 0 min(40vw, 300px);
    width: min(40vw, 300px);
    min-width: 0;
    place-items: center;
    padding-inline: clamp(16px, 3vw, 32px);
}

.home-button {
    text-decoration: none;
}

.thank-you-share-button {
    background: linear-gradient(180deg, #4484e7, #1877f2 58%, #0c56ba);
    box-shadow: 0 7px 0 #083b82, 0 12px 24px rgba(18, 31, 78, 0.38),
        inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.thank-you-share-button:active {
    box-shadow: 0 3px 0 #083b82, 0 7px 14px rgba(18, 31, 78, 0.34);
}

.thank-you-share-status {
    min-height: 20px;
    margin: 14px 0 0;
    color: #ffe970;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 650px) {
    .drag-screen__instruction {
        top: 17px;
        width: min(68vw, 360px);
        font-size: clamp(11px, 3vw, 14px);
        line-height: 1.3;
    }

    .choice-panel h2 {
        margin-bottom: 26px;
    }

    .phone-form {
        padding: 21px 18px;
        border-radius: 23px;
    }
}

.retry-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(10, 3, 18, 0.74);
    backdrop-filter: blur(4px);
}

.result-screen.is-failed .retry-overlay {
    display: grid;
    animation: overlay-fade-in 0.4s ease-out both;
}

.result-screen.is-failed .retry-button {
    animation: result-pop 0.6s 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.3) both;
}

.play-limit-modal,
.share-confirm-modal {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(20, 2, 35, 0.88);
    backdrop-filter: blur(5px);
}

.play-limit-modal.is-open,
.share-confirm-modal.is-open {
    display: grid;
    animation: overlay-fade-in 0.25s ease-out both;
}

.play-limit-card {
    width: min(92vw, 520px);
    padding: clamp(26px, 5vw, 42px);
    border: 3px solid #ffd95c;
    border-radius: 28px;
    color: #fff;
    text-align: center;
    background: linear-gradient(145deg, rgba(128, 32, 182, 0.99), rgba(64, 10, 111, 0.99));
    box-shadow: 0 0 0 6px rgba(255, 76, 163, 0.62), 0 24px 65px rgba(4, 0, 15, 0.65);
    animation: reward-card-pop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.25) both;
}

.play-limit-card h2 {
    margin: 0 0 12px;
    font-size: clamp(23px, 4vw, 34px);
    font-weight: 900;
    line-height: 1.18;
}

.play-limit-card p {
    margin: 12px 0 24px;
    color: #ffe990;
    font-size: clamp(16px, 2.5vw, 21px);
    font-weight: 800;
    line-height: 1.4;
}

.play-limit-card__count {
    display: block;
    color: #ffdf5d;
    font-size: clamp(36px, 7vw, 58px);
    line-height: 1;
    text-shadow: 0 3px 0 #a84f08;
}

.play-limit-return,
.share-confirm-success,
.share-confirm-cancel {
    min-width: 180px;
    padding: 12px 24px 14px;
    border: 3px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff70b3, #ed176d 62%, #c80e5d);
    box-shadow: 0 5px 0 #81104b;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.share-confirm-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.share-confirm-cancel {
    min-width: 120px;
    background: rgba(42, 4, 73, 0.62);
    box-shadow: 0 5px 0 rgba(24, 2, 42, 0.8);
}

/* Animations */
@keyframes cloud-drift-right {
    from {
        transform: translate3d(-110%, 0, 0);
    }

    to {
        transform: translate3d(100vw, 0, 0);
    }
}

@keyframes cloud-drift-left {
    from {
        transform: translate3d(10%, 0, 0);
    }

    to {
        transform: translate3d(calc(-100vw - 110%), 0, 0);
    }
}

@keyframes fly-zigzag-right {
    0% {
        transform: translate3d(0, 0, 0) rotate(-5deg) scaleX(var(--flight-flip));
    }

    12.5% {
        transform: translate3d(14vw, -40px, 0) rotate(8deg) scaleX(var(--flight-flip));
    }

    25% {
        transform: translate3d(28vw, 0, 0) rotate(-3deg) scaleX(var(--flight-flip));
    }

    37.5% {
        transform: translate3d(42vw, 40px, 0) rotate(10deg) scaleX(var(--flight-flip));
    }

    50% {
        transform: translate3d(56vw, 0, 0) rotate(-5deg) scaleX(var(--flight-flip));
    }

    62.5% {
        transform: translate3d(70vw, -40px, 0) rotate(8deg) scaleX(var(--flight-flip));
    }

    75% {
        transform: translate3d(84vw, 0, 0) rotate(-3deg) scaleX(var(--flight-flip));
    }

    87.5% {
        transform: translate3d(98vw, 40px, 0) rotate(10deg) scaleX(var(--flight-flip));
    }

    100% {
        transform: translate3d(calc(100vw + var(--ghost-size) + 40px), 0, 0) rotate(-5deg) scaleX(var(--flight-flip));
    }
}

@keyframes fly-zigzag-left {
    0% {
        transform: translate3d(0, 0, 0) rotate(5deg);
    }

    12.5% {
        transform: translate3d(-14vw, -40px, 0) rotate(-8deg);
    }

    25% {
        transform: translate3d(-28vw, 0, 0) rotate(3deg);
    }

    37.5% {
        transform: translate3d(-42vw, 40px, 0) rotate(-10deg);
    }

    50% {
        transform: translate3d(-56vw, 0, 0) rotate(5deg);
    }

    62.5% {
        transform: translate3d(-70vw, -40px, 0) rotate(-8deg);
    }

    75% {
        transform: translate3d(-84vw, 0, 0) rotate(3deg);
    }

    87.5% {
        transform: translate3d(-98vw, 40px, 0) rotate(-10deg);
    }

    100% {
        transform: translate3d(calc(-100vw - var(--ghost-size) - 40px), 0, 0) rotate(5deg);
    }
}

@keyframes fly-zigzag-left-flip {
    0% {
        transform: translate3d(0, 0, 0) rotate(5deg) scaleX(-1);
    }

    12.5% {
        transform: translate3d(-14vw, -40px, 0) rotate(-8deg) scaleX(-1);
    }

    25% {
        transform: translate3d(-28vw, 0, 0) rotate(3deg) scaleX(-1);
    }

    37.5% {
        transform: translate3d(-42vw, 40px, 0) rotate(-10deg) scaleX(-1);
    }

    50% {
        transform: translate3d(-56vw, 0, 0) rotate(5deg) scaleX(-1);
    }

    62.5% {
        transform: translate3d(-70vw, -40px, 0) rotate(-8deg) scaleX(-1);
    }

    75% {
        transform: translate3d(-84vw, 0, 0) rotate(3deg) scaleX(-1);
    }

    87.5% {
        transform: translate3d(-98vw, 40px, 0) rotate(-10deg) scaleX(-1);
    }

    100% {
        transform: translate3d(calc(-100vw - var(--ghost-size) - 40px), 0, 0) rotate(5deg) scaleX(-1);
    }
}

@keyframes basket-bounce {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes basket-idle-glow {
    from {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.88);
    }

    to {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes basket-catch-glow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }

    18% {
        opacity: 1;
    }

    48% {
        opacity: 0.88;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

@keyframes basket-catch-ring {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.25);
    }
}

@keyframes basket-catch-pop {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    42% {
        transform: scale(1.08);
        filter: brightness(1.45) saturate(1.3);
    }
}

@keyframes timer-warning {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

@keyframes result-pop {
    0% {
        opacity: 0;
        transform: scale(0.55) translateY(30px);
    }

    70% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes gift-shake {

    0%,
    58%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    64% {
        transform: rotate(-7deg) translateY(-2px);
    }

    70% {
        transform: rotate(7deg) translateY(-4px);
    }

    76% {
        transform: rotate(-5deg) translateY(-2px);
    }

    82% {
        transform: rotate(5deg) translateY(-3px);
    }

    88% {
        transform: rotate(-2deg) translateY(0);
    }
}

@keyframes gift-glow {
    from {
        opacity: 0.62;
        scale: 0.86;
    }

    to {
        opacity: 1;
        scale: 1.12;
    }
}

@keyframes gift-ring {
    from {
        opacity: 0.8;
        scale: 0.62;
    }

    to {
        opacity: 0;
        scale: 1.42;
    }
}

@keyframes gift-spark {
    from {
        opacity: 0.32;
        scale: 0.62;
        rotate: -12deg;
    }

    to {
        opacity: 1;
        scale: 1.2;
        rotate: 12deg;
    }
}

@keyframes reward-card-pop {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.72) rotate(-2deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes reward-shine {

    0%,
    28% {
        left: -35%;
    }

    68%,
    100% {
        left: 120%;
    }
}

@keyframes reward-loader {
    to {
        rotate: 360deg;
    }
}

@keyframes overlay-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Mobile/low-power mode: retain gameplay motion while removing costly blur layers. */
html.reduce-effects .intro__mist,
html.reduce-effects .intro__fog::after,
html.reduce-effects .wisp,
html.reduce-effects .cloud-layer {
    display: none;
}

html.reduce-effects .intro::after,
html.reduce-effects .intro__fog::before,
html.reduce-effects .basket__idle-glow,
html.reduce-effects .flying-ghost--secret img,
html.reduce-effects .gift-box::before,
html.reduce-effects .gift-box::after,
html.reduce-effects .gift-box img,
html.reduce-effects .gift-box__spark,
html.reduce-effects .reward-card__shine {
    animation: none;
}

html.reduce-effects .intro__fog::before {
    filter: blur(12px);
}

html.reduce-effects .basket,
html.reduce-effects .flying-ghost.dragging,
html.reduce-effects .choice-panel,
html.reduce-effects .thank-you-panel {
    filter: none;
}

html.reduce-effects .flying-ghost--secret img {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 213, 64, 0.65));
}

@media (max-width: 650px) {
    .play-limit-card {
        padding: 26px 20px;
    }

    .share-confirm-modal__actions {
        display: grid;
    }
}

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

    .intro__mist,
    .intro::after,
    .intro__fog::before,
    .intro__fog::after,
    .wisp,
    .screen-cloud,
    .game-timer.is-warning,
    .gift-box::before,
    .gift-box::after,
    .gift-box img,
    .gift-box__spark,
    .reward-card__shine,
    .reward-card__image-shell.is-loading::after,
    .is-ready .ghost,
    .is-ready .maybi-logo,
    .is-ready .intro__logo,
    .is-ready .play-button,
    .is-ready .facebook-share-button {
        animation: none;
    }

    .wisp {
        display: none;
    }

    .cloud-layer {
        display: none;
    }

    .ghost,
    .maybi-logo,
    .intro__logo,
    .play-button,
    .facebook-share-button {
        opacity: 1;
    }

    .intro__logo {
        transform: translate(-50%, -50%);
    }

    .play-button,
    .facebook-share-button {
        transform: none;
    }
}