.tree-card {
    position: relative;
    isolation: isolate;
    /* width: 100%; */
    height: 100%;
    aspect-ratio: 1372 / 1440;
    overflow: hidden;
    border-radius: clamp(20px, 3vw, 38px);
    box-shadow: 0 24px 70px rgba(117, 55, 64, .18);
    margin-left: 10%;
}

.tree-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.instruction {
    position: absolute;
    z-index: 20;
    top: clamp(10px, 2.4%, 24px);
    left: 50%;
    display: flex;
    align-items: center;
    gap: .55em;
    max-width: calc(100% - 28px);
    padding: .66em 1em;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 999px;
    color: #77233f;
    background: rgba(255, 250, 247, .8);
    box-shadow: 0 8px 26px rgba(121, 41, 66, .14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: clamp(12px, 1.8vw, 18px);
    font-weight: 750;
    white-space: nowrap;
}

.instruction__spark {
    color: var(--pink);
    animation: instructionSpark 1.7s ease-in-out infinite;
}

.progress {
    min-width: 3.3em;
    padding: .25em .55em;
    border-radius: 999px;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, #ff6aa1, #d92669);
}

.flower-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.flower-hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    aspect-ratio: 1;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 7px 7px rgba(146, 18, 72, .21));
}

.flower-hotspot img {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(var(--tilt));
    transform-origin: 50% 55%;
    animation: flowerInvite 3.2s cubic-bezier(.42, 0, .22, 1) var(--delay) infinite;
    will-change: transform, filter;
    user-select: none;
    -webkit-user-drag: none;
}

.click-ring {
    position: absolute;
    z-index: 1;
    inset: 7%;
    border: clamp(2px, .34vw, 4px) solid rgba(255, 74, 143, .85);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .68), 0 0 24px rgba(255, 56, 130, .65);
    animation: ringInvite 3.2s ease-out var(--delay) infinite;
    pointer-events: none;
}

.sparkles,
.sparkles::before,
.sparkles::after {
    position: absolute;
    z-index: 4;
    width: 12%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fffbe4;
    box-shadow: 0 0 10px 4px rgba(255, 215, 85, .8);
    content: "";
    pointer-events: none;
}

.sparkles {
    top: 6%;
    right: 10%;
    animation: sparkle 2.4s ease-in-out var(--delay) infinite;
}

.sparkles::before {
    top: 430%;
    right: -95%;
    width: 72%;
    animation: sparkle 2.1s ease-in-out -.7s infinite;
}

.sparkles::after {
    top: 170%;
    right: 690%;
    width: 58%;
    animation: sparkle 1.8s ease-in-out -1.1s infinite;
}

.flower-hotspot:hover,
.flower-hotspot:focus-visible {
    z-index: 12;
}

.flower-hotspot:hover img,
.flower-hotspot:focus-visible img {
    animation-play-state: paused;
    transform: scale(1.18) rotate(2deg);
    filter: saturate(1.12) brightness(1.05);
    transition: transform .38s cubic-bezier(.2, 1.45, .36, 1), filter .25s ease;
}

.flower-hotspot:hover .click-ring,
.flower-hotspot:focus-visible .click-ring {
    animation-duration: 1.25s;
    border-color: var(--gold);
}

.flower-hotspot:focus-visible::after {
    content: "Bấm vào";
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: -25%;
    transform: translateX(-50%);
    padding: .35em .7em;
    border-radius: 999px;
    color: white;
    background: #7d2647;
    font-size: clamp(9px, 1.4vw, 14px);
    font-weight: 750;
    white-space: nowrap;
}

.flower-hotspot.is-open img {
    animation: flowerOpened .78s cubic-bezier(.16, 1.4, .32, 1) both;
}

.flower-hotspot.is-open .click-ring {
    border-color: #ffd557;
    animation: ringOpened 1s ease-out both;
}

.petal-particle {
    position: absolute;
    z-index: 30;
    left: calc(var(--x) - .65%);
    top: calc(var(--y) - .65%);
    width: 1.3%;
    min-width: 7px;
    aspect-ratio: .75;
    border-radius: 80% 20% 70% 30%;
    background: linear-gradient(145deg, #ffd1df, #f55891);
    pointer-events: none;
    animation: petalBurst .95s cubic-bezier(.17, .75, .35, 1) forwards;
}

.celebration {
    position: absolute;
    z-index: 40;
    left: 50%;
    bottom: 4%;
    transform: translate(-50%, 25px) scale(.85);
    padding: .72em 1.2em;
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #f65293, #bf225c);
    box-shadow: 0 12px 34px rgba(155, 23, 79, .3);
    font-size: clamp(14px, 2.4vw, 22px);
    font-weight: 800;
    opacity: 0;
    pointer-events: none;
}

.celebration.show {
    animation: celebrate 2.4s cubic-bezier(.2, 1.35, .34, 1) both;
}

@keyframes flowerInvite {

    0%,
    100% {
        transform: scale(1) rotate(var(--tilt));
    }

    18% {
        transform: scale(1.07) rotate(calc(var(--tilt) + 1deg));
    }

    34% {
        transform: scale(1) rotate(var(--tilt));
    }

    46% {
        transform: scale(1.035) rotate(calc(var(--tilt) - 1deg));
    }

    60% {
        transform: scale(1) rotate(var(--tilt));
    }
}

@keyframes ringInvite {

    0%,
    42% {
        opacity: 0;
        transform: scale(.78);
    }

    62% {
        opacity: .84;
    }

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

@keyframes sparkle {

    0%,
    45%,
    100% {
        opacity: 0;
        transform: scale(.25) rotate(0deg);
    }

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

    78% {
        opacity: 0;
        transform: scale(.4) rotate(130deg);
    }
}

@keyframes instructionSpark {
    50% {
        transform: rotate(110deg) scale(1.35);
    }
}

@keyframes flowerOpened {
    0% {
        transform: scale(1) rotate(var(--tilt));
    }

    42% {
        transform: scale(1.36) rotate(6deg);
        filter: brightness(1.18) saturate(1.2);
    }

    70% {
        transform: scale(.94) rotate(-2deg);
    }

    100% {
        transform: scale(1.08) rotate(0deg);
        filter: brightness(1.05);
    }
}

@keyframes ringOpened {
    0% {
        opacity: .9;
        transform: scale(.75);
    }

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

@keyframes petalBurst {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(.25);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(var(--spin)) scale(1);
    }
}

@keyframes celebrate {
    0% {
        opacity: 0;
        transform: translate(-50%, 25px) scale(.85);
    }

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

    100% {
        opacity: 0;
        transform: translate(-50%, -10px) scale(.95);
    }
}

@media (min-width: 992px) {
    .data-msg {
        bottom: 40%;
    }
}

@media (max-width: 540px) {
    .page-shell {
        padding: 0;
    }

    .tree-card {
        border-radius: 0;
    }

    .instruction {
        top: 8px;
        padding: .56em .75em;
    }
}

@media (max-width: 680px) {
    .tree-card {
        position: relative;
        isolation: isolate;
        width: 100%;
        height: auto;
        aspect-ratio: 1372 / 1440;
        overflow: hidden;
        border-radius: clamp(20px, 3vw, 38px);
        box-shadow: 0 24px 70px rgba(117, 55, 64, .18);
        margin-left: 0;
        top: 20%;
    }

    .happy-card {
        height: calc(100svh - 150px);
    }

    .data-msg {
        top: 60px !important;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }

    .click-ring {
        opacity: .6;
        transform: scale(1.08);
    }
}