* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
}

.hero {
    min-height: 100vh;

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

    padding: 25px;

    background:
        linear-gradient(
            135deg,
            #fff5f8,
            #ffdce9,
            #ffc1db
        );
}

.hero-card {
    width: 100%;
    max-width: 600px;

    padding: 60px 35px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.75);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(255, 77, 136, 0.18);

    backdrop-filter: blur(12px);
}

.heart {
    font-size: 55px;

    margin-bottom: 15px;
}

.greeting {
    color: #ff4d88;

    font-size: 18px;
    font-weight: 600;

    margin-bottom: 10px;
}

h1 {
    color: #402b35;

    font-size: 42px;
    line-height: 1.25;

    margin-bottom: 20px;
}

.description {
    max-width: 450px;

    margin: 0 auto 30px;

    color: #715965;

    font-size: 16px;
    line-height: 1.8;
}

button {
    border: none;
-webkit-appearance: none;
appearance: none;
    padding: 16px 34px;

    border-radius: 50px;

    background: #ff4d88;

    color: white;

    font-family: "Poppins", sans-serif;

    font-size: 17px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

button:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 12px 30px
        rgba(255, 77, 136, 0.35);
}.loading-page {
    min-height: 100vh;

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

    padding: 25px;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #f6b6cc,
        #8b1e3f
    );
}

.loading-card {
    width: 100%;
    max-width: 550px;

    padding: 55px 35px;

    text-align: center;

    background: rgba(255, 255, 255, 0.9);

    border-radius: 30px;

    box-shadow: 0 20px 60px rgba(139, 30, 63, 0.2);
}

.loading-heart {
    font-size: 55px;
    margin-bottom: 20px;
}

.loading-card h1 {
    font-size: 30px;
    margin-bottom: 30px;
}

.progress-container {
    width: 100%;
    height: 14px;

    background: #f3d6df;

    border-radius: 50px;

    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;

    background: #8b1e3f;

    border-radius: 50px;

    transition: width 0.1s linear;
}

#progressNumber {
    margin-top: 15px;

    font-weight: 600;
    color: #8b1e3f;
}
.loading-page {
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 25px;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #f6b6cc,
        #8b1e3f
    );
}

.loading-page.active {
    display: flex;
}
.game-intro {
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 25px;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #f6b6cc,
        #8b1e3f
    );
}

.game-intro.active {
    display: flex;
}

.game-intro-card {
    width: 100%;
    max-width: 550px;

    padding: 55px 35px;

    text-align: center;

    background: rgba(255, 255, 255, 0.92);

    border-radius: 30px;

    box-shadow: 0 20px 60px rgba(139, 30, 63, 0.2);
}

.game-intro-icon {
    font-size: 55px;
    margin-bottom: 20px;
}

.game-intro-card h2 {
    color: #402b35;
    font-size: 30px;
    margin-bottom: 20px;
}

.game-intro-card p {
    color: #715965;
    line-height: 1.8;
    margin-bottom: 10px;
}
/* =========================
   MINI GAME
========================= */

.game-scene {
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;

    padding: 25px;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #ffd9e8,
        #f6b6cc
    );
}

.game-scene.active {
    display: flex;
}

.game-card {
    width: 100%;
    max-width: 650px;

    padding: 40px 30px;

    text-align: center;

    background: rgba(255, 255, 255, 0.9);

    border-radius: 30px;

    box-shadow:
        0 20px 60px rgba(139, 30, 63, 0.18);
}

.game-small-text {
    color: #8b1e3f;

    font-weight: 600;

    margin-bottom: 8px;
}

.game-card h2 {
    color: #402b35;

    font-size: 30px;

    margin-bottom: 12px;
}

.game-description {
    color: #715965;

    line-height: 1.7;

    margin-bottom: 20px;
}

.game-progress {
    display: inline-block;

    padding: 10px 20px;

    margin-bottom: 25px;

    background: #fff0f5;

    color: #8b1e3f;

    font-size: 18px;
    font-weight: 600;

    border-radius: 50px;
}

.game-board {
    position: relative;

    width: 100%;
    height: 350px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            180deg,
            #ffeaf2,
            #fff8fb
        );

    border: 2px solid #ffd6e5;
}

.decoration,
.hidden-heart {
    position: absolute;
}

.decoration {
    font-size: 42px;
    user-select: none;
}


/* DEKORASI */

.flower-one {
    top: 25px;
    left: 30px;
}

.cloud {
    top: 30px;
    right: 45px;
}

.teddy {
    bottom: 35px;
    left: 50px;
}

.ribbon {
    top: 150px;
    left: 45%;
}

.flower-two {
    bottom: 30px;
    right: 45px;
}

.star {
    top: 80px;
    left: 30%;
}


/* HATI */

.hidden-heart {
    border: none;

    padding: 5px;

    background: transparent;

    font-size: 25px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.hidden-heart:hover {
    transform: scale(1.4);
}

.heart-one {
    top: 55px;
    left: 16%;
}

.heart-two {
    top: 120px;
    right: 12%;
}

.heart-three {
    bottom: 55px;
    left: 38%;
}

.heart-four {
    top: 210px;
    right: 30%;
}

.heart-five {
    bottom: 15px;
    right: 12%;
}

.hidden-heart.found {
    opacity: 0;

    transform: scale(2);

    pointer-events: none;
}

#gameMessage {
    min-height: 30px;

    margin-top: 20px;

    color: #8b1e3f;

    font-weight: 500;
}
.decoration {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.decoration:hover {
    transform: scale(1.2);
}
/* =========================
   GAME CLICK EFFECTS
========================= */

.decoration.wrong-click {
    animation: shake 0.35s ease;
}

.hidden-heart.found {
    animation: heart-pop 0.45s ease forwards;
}

@keyframes shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    75%  { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}
/* =========================
   STORY INTRO
========================= */

.story-intro {
    min-height: 100vh;
    display: none;

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

    padding: 25px;

    background: linear-gradient(
        135deg,
        #fff8fa,
        #f7d6e2,
        #ffffff
    );
}

.story-intro.active {
    display: flex;
}

.story-card {
    width: 100%;
    max-width: 580px;

    padding: 55px 35px;

    text-align: center;

    background: rgba(255, 255, 255, 0.94);

    border-radius: 30px;

    box-shadow:
        0 20px 60px rgba(139, 30, 63, 0.15);
}

.story-icon {
    font-size: 55px;
    margin-bottom: 15px;
}

.story-small-text {
    color: #8b1e3f;
    font-weight: 600;
    margin-bottom: 8px;
}

.story-card h2 {
    color: #402b35;
    font-size: 32px;
    margin-bottom: 20px;
}

.story-card p {
    color: #715965;
    line-height: 1.8;
    margin-bottom: 15px;
}
/* =========================
   STORY
========================= */

.story-scene {
    position: fixed;
    inset: 0;

    min-height: 100vh;
    width: 100%;

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

    padding: 30px;

    background: linear-gradient(
        135deg,
        #fff7fa 0%,
        #fce4ec 45%,
        #f6b6cc 100%
    );

    overflow-y: auto;
}

.story-scene.active {
    display: flex;
}

.story-content {
    width: 100%;
    max-width: 650px;

    padding: 45px 45px;

    text-align: center;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 32px;

    box-shadow:
        0 25px 70px rgba(139, 30, 63, 0.18);

    backdrop-filter: blur(12px);
}

.story-content::before {
    content: "💌";

    display: block;

    font-size: 50px;

    margin-bottom: 25px;
}

.story-line {
    opacity: 0;

    transform: translateY(20px);

    color: #4a303b;

    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;

    margin-bottom: 14px;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.story-line.show {
    opacity: 1;

    transform: translateY(0);
}

#storyNextButton {
    opacity: 0;
    pointer-events: none;

    margin-top: 15px;

    padding: 15px 32px;

    border: none;
    border-radius: 50px;

    background: #8b1e3f;
    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.8s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#storyNextButton.show {
    opacity: 1;
    pointer-events: auto;
}

#storyNextButton:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(139, 30, 63, 0.3);
}
.story-title{
    font-size:40px;
    color:#8b1e3f;
    margin-bottom:35px;
    font-weight:700;
}
/* FIX STORY LAYOUT */

.story-content {
    display: block;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;

    padding: 45px 45px;

    text-align: center;
}

.story-title {
    display: block;
    width: 100%;

    font-size: 40px;
    color: #8b1e3f;

    margin-bottom: 30px;
}

.story-line {
    display: block;
    width: 100%;

    margin: 0 0 14px 0;

    text-align: center;
}

#storyNextButton {
    display: inline-block;
}

.story-note {
    display: block;
    width: 100%;

    margin-top: 18px;

    color: #8f7b84;

    font-size: 14px;
    line-height: 1.7;

    text-align: center;
    font-style: italic;
}
/* =========================
   GALLERY
========================= */

.gallery-scene {
    position: fixed;
    inset: 0;

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

    padding: 45px 25px;

    background:
linear-gradient(
135deg,
#fff7fa 0%,
#fdebf2 45%,
#f7c3d6 100%
);

    overflow-y: auto;
}

.gallery-scene.active {
    display: flex;
}

.gallery-card{

width:90%;
max-width:760px;

padding:45px;

border-radius:35px;

background:
rgba(255,255,255,.82);

backdrop-filter:blur(18px);

box-shadow:
0 35px 90px rgba(128,30,70,.18);

}

.gallery-small-text {
    color: #8b1e3f;

    font-weight: 600;

    margin-bottom: 10px;
}

.gallery-card h2{

font-size:32px;

line-height:1.3;

margin-bottom:25px;

color:#7f2048;

}

.photo-frame{

width:360px;

height:480px;

margin:auto;

overflow:hidden;

border-radius:25px;

}

.photo-frame img{

width:100%;
height:100%;

object-fit:cover;

transition: opacity .5s ease, transform .5s ease;
opacity:1;
}

.photo-frame:hover img{

transform:scale(1.04);

}

#galleryCaption{

margin-top:25px;

font-size:22px;

font-style:italic;

line-height:1.8;

color:#6d3a4d;

}

.gallery-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    flex-wrap: wrap;
}

.gallery-controls button {
    padding: 12px 20px;

    font-size: 14px;
}

#photoCounter {
    color: #8b1e3f;

    font-weight: 600;
}
/* =========================
   PROPOSAL
========================= */

.proposal-scene {
    opacity: 1;

transition:
    opacity 0.6s ease;
    position: fixed;
    inset: 0;

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

    padding: 25px;

    background: linear-gradient(
        135deg,
        #2a0d17,
        #64152f,
        #8b1e3f
    );
}

.proposal-scene.active {
    display: flex;
}
.proposal-scene.fade-out {
    opacity: 0;
}

.proposal-card {
    width: 100%;
    max-width: 650px;

    padding: 55px 40px;

    text-align: center;

    background: rgba(255, 255, 255, 0.94);

    border-radius: 32px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.3);
}

.proposal-heart {
    font-size: 60px;
    margin-bottom: 15px;
}

.proposal-small-text {
    color: #8b1e3f;
    font-weight: 600;
    margin-bottom: 10px;
}

.proposal-card h2 {
    color: #402b35;
    font-size: 38px;
    margin-bottom: 18px;
}

.proposal-message {
    color: #715965;
    line-height: 1.8;
    margin-bottom: 30px;
}

.proposal-question {
    color: #8b1e3f;
    font-size: 36px;
    line-height: 1.3;

    margin-bottom: 35px;
}

.proposal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;

    flex-wrap: wrap;
}

#yesButton {
    background: #8b1e3f;
}
#yesButton.heartbeat {
    animation: yesHeartbeat 0.22s ease;
}

@keyframes yesHeartbeat {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}
#timeButton {
    background: #f1d5df;
    color: #8b1e3f;
}
/* =========================
   PROPOSAL REVEAL
========================= */

.proposal-small-text,
.proposal-card h2,
.proposal-message,
.proposal-question,
.proposal-buttons {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.proposal-small-text.show,
.proposal-card h2.show,
.proposal-message.show,
.proposal-question.show,
.proposal-buttons.show {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   INTERMEZZO
========================= */

.intermezzo-scene {
    position: fixed;
    inset: 0;

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

    padding: 30px;

    background: linear-gradient(
        135deg,
        #fff7fa,
        #f7d5e2,
        #8b1e3f
    );

    overflow-y: auto;
}

.intermezzo-scene.active {
    display: flex;
}

.intermezzo-card{

    width:100%;
    max-width:720px;

    padding:70px 65px;

    text-align:center;

    background:rgba(255,255,255,.92);

    border-radius:36px;

    border:1px solid rgba(255,255,255,.7);

    backdrop-filter:blur(18px);

    box-shadow:
    0 35px 90px rgba(80,25,45,.18);

}
.intermezzo-icon {
    font-size: 52px;
    margin-bottom: 18px;
}

.intermezzo-card h2{

    font-size:48px;

    color:#7b1f42;

    margin-bottom:22px;

    letter-spacing:-1px;

}

.intermezzo-card p{

    color:#5d4954;

    font-size:22px;

    line-height:1.85;

    margin-bottom:22px;

}
.intermezzo-card{

    animation:fadeCard 1s ease;
}

.intermezzo-highlight {
    margin-top: 25px;

    font-weight: 600;

    color: #8b1e3f !important;
}
@keyframes fadeCard{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
#intermezzoNextButton{

    margin-top:35px;

    padding:18px 44px;

    border:none;

    border-radius:999px;

    font-size:20px;

    font-weight:600;

    background:#ff4f8d;

    color:white;

    cursor:pointer;

    transition:.35s;

}
#intermezzoNextButton:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(255,79,141,.35);

}
.intermezzo-icon,
.proposal-heart {
    display: inline-block;
    animation: heartbeat 1.8s ease-in-out infinite;
}
@keyframes heartbeat{

0%{
transform:scale(1);
}

25%{
transform:scale(1.12);
}

50%{
transform:scale(1);
}

75%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}
/* =========================
   YES ENDING
========================= */

.ending-scene {
    position: fixed;
    inset: 0;

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

    padding: 30px;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fff7fa,
            #f7c7d9,
            #8b1e3f
        );

    overflow-y: auto;
}

.ending-scene.active {
    display: flex;
}

.ending-card {
    width: 100%;
    max-width: 680px;

    padding: 65px 50px;

    text-align: center;

    background: rgba(255,255,255,.93);

    border-radius: 36px;

    box-shadow:
        0 30px 90px rgba(80,25,45,.22);

    animation: endingFade 1.2s ease;
}

.ending-heart {
    display: inline-block;

    font-size: 65px;

    margin-bottom: 20px;

    animation: heartbeat 1.8s ease-in-out infinite;
}

.ending-card h2 {
    color: #7b1f42;

    font-size: 42px;

    margin-bottom: 25px;
}

.ending-card p {
    color: #5d4954;

    font-size: 19px;
    line-height: 1.9;

    margin-bottom: 18px;
}

.ending-highlight {
    color: #8b1e3f !important;

    font-weight: 600;

    margin-top: 25px;
}

.ending-signature {
    display: flex;
    flex-direction: column;
    gap: 5px;

    margin-top: 32px;

    color: #8f7b84;

    font-size: 14px;
}

.ending-signature strong {
    color: #8b1e3f;

    margin-top: 8px;
}

@keyframes endingFade {

    from {
        opacity: 0;
        transform: translateY(12px) scale(.99);
    }

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

}
#timeEnding .ending-heart {
    animation: none;
}

#timeEnding .ending-highlight {
    color: #7b5c69 !important;
}
/* =========================
   FINAL CLOSING
========================= */

.final-scene {
    position: fixed;
    inset: 0;

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

    padding: 30px;

    background:
        radial-gradient(
            circle at center,
            #5f1730 0%,
            #260812 65%,
            #120409 100%
        );

    color: white;

    overflow: hidden;
}

.final-scene.active {
    display: flex;
}

.final-content {
    width: 100%;
    max-width: 600px;

    text-align: center;

    animation: finalFade 1.8s ease;
}

.final-heart {
    display: inline-block;

    font-size: 55px;

    margin-bottom: 25px;

    animation: heartbeat 2s ease-in-out infinite;
}

.final-made {
    font-size: 16px;

    letter-spacing: 3px;
    text-transform: uppercase;

    opacity: .65;

    margin-bottom: 18px;
}

.final-content h1 {
    color: white;

    font-size: 48px;
    line-height: 1.35;

    margin-bottom: 24px;
}

.final-line {
    width: 70px;
    height: 1px;

    margin: 0 auto 26px;

    background: rgba(255,255,255,.4);
}

.final-thanks {
    font-size: 18px;
    line-height: 1.8;

    opacity: .8;

    margin-bottom: 20px;
}

.final-name {
    font-size: 17px;
    font-weight: 600;

    margin-bottom: 5px;
}

.final-year {
    font-size: 13px;

    opacity: .45;
}

.closeStoryButton {
    margin-top: 35px;

    background: transparent;

    border: 1px solid rgba(139,30,63,.25);

    color: #8b1e3f;
}

@keyframes finalFade {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

}
.decoration,
.hidden-heart {
    transition:
        left 1.8s ease,
        top 1.8s ease,
        transform 0.25s ease,
        opacity 0.25s ease;
}
/* =========================
   Sakura Celebration
========================= */

#celebration{

    position:fixed;
    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:9999;

}

.petal{

    position:absolute;

    top:-50px;

    user-select:none;

    animation-name:fall;

    animation-timing-function:linear;

    animation-fill-mode:forwards;

}

@keyframes fall{

    0%{

        transform:
        translateY(-50px)
        rotate(0deg);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        transform:
        translateY(110vh)
        rotate(360deg);

        opacity:0;

    }

}
button:focus {
    outline: none;
}

button:focus-visible {
    outline: none;
}
button {
    -webkit-tap-highlight-color: transparent;
}
#startButton:focus,
#startButton:focus-visible {
    outline: none;
}
#startButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(255, 77, 136, 0.3);
}