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

body{
    font-family:"Mali",cursive;
    background:#FFF7FA;
    overflow:hidden;
    color:#6B4E5C;
}

.center,
#mainContent{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:100vh;
}

.title{
    font-size:48px;
    color:#D978A4;
    margin-bottom:40px;
    text-align:center;
}

.hint{
    margin-top:30px;
    color:#9B7284;
    font-size:18px;
}

.door-frame{
    padding:18px;
    background:#F6D7E4;
    border-radius:40px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}

#door{
    width:200px;
    height:310px;
    background:linear-gradient(
        180deg,
        #F7BDD3,
        #EEAFC6
    );
    border-radius:110px 110px 18px 18px;
    position:relative;
    cursor:pointer;
    transition:1s ease;
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,.35),
        0 10px 30px rgba(0,0,0,.1);
}

#door.open{
    transform:rotateY(-75deg);
    transform-origin:left;
}

.door-window{
    width:75px;
    height:95px;
    background:#FFF4F8;
    border-radius:35px;
    position:absolute;
    top:45px;
    left:50%;
    transform:translateX(-50%);
}

.door-line{
    position:absolute;
    left:20px;
    right:20px;
    height:2px;
    background:rgba(255,255,255,.25);
}

.line1{
    top:155px;
}

.line2{
    top:190px;
}

.line3{
    top:225px;
}

.knob{
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    position:absolute;
    right:22px;
    top:165px;
    box-shadow:
        0 0 12px rgba(255,255,255,.9);
}

.hidden{
    display:none !important;
}

.card{
    background:white;
    padding:30px;
    border-radius:35px;
    box-shadow:
        0 10px 35px rgba(0,0,0,.08);
    text-align:center;
}

.beg-image{
    width:320px;
    max-width:85vw;

    border-radius:25px;

    filter:
        drop-shadow(
            0 10px 25px rgba(232,154,184,.35)
        );

    animation:
        floatImage 3s ease-in-out infinite;
}

@keyframes floatImage{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

.question{
    margin-top:20px;
    margin-bottom:25px;
    font-size:34px;
    color:#D978A4;
}

.buttons{
    display:flex;
    justify-content:center;
    gap:16px;
}

button{
    padding:14px 28px;
    border:none;
    border-radius:999px;
    font-size:17px;
    font-family:"Mali",cursive;
    cursor:pointer;
}

#yesBtn{
    background:#E89AB8;
    color:white;
    transition:.25s;
}

#yesBtn:hover{
    transform:scale(1.05);
}

#noBtn{
    background:white;
    border:2px solid #E89AB8;
    color:#E89AB8;

    position:fixed;

    left:55%;
    top:72%;

    z-index:1000;

    transition:
        left .45s cubic-bezier(.22,1,.36,1),
        top .45s cubic-bezier(.22,1,.36,1);
}
@keyframes knockShake {
    0% { transform: translateX(0px); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0px); }
}

#door.knock {
    animation: knockShake 0.35s ease;
}

.title{
    font-size:48px;
    color:#D978A4;
    text-align:center;

    opacity:0;
    transform:translateY(40px) scale(0.9);

    animation:fadeUp 1s ease forwards;
}

.title:nth-of-type(1){
    animation-delay:0.2s;
}

.title:nth-of-type(2){
    animation-delay:0.6s;
}

@keyframes fadeUp{
    0%{
        opacity:0;
        transform:translateY(40px) scale(0.9);
    }

    60%{
        opacity:1;
        transform:translateY(-8px) scale(1.05);
    }

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

.floating-item{
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 30px;

    animation: floatBurst 2.8s ease-out forwards;
}

@keyframes floatBurst{
    0%{
        opacity: 1;
        transform:
            translate(0,0)
            scale(0.5)
            rotate(0deg);
    }

    70%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        transform:
            translate(var(--x), var(--y))
            scale(1.4)
            rotate(var(--rotate));
    }
}

#musicToggle{
    position: fixed;
    top: 20px;
    right: 20px;

    width: 50px;
    height: 50px;

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

    border-radius: 50%;
    border: none;

    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);

    font-size: 24px;
    cursor: pointer;

    box-shadow:
        0 4px 15px rgba(0,0,0,.1);

    z-index: 99999;

    transition: .25s;
}

#musicToggle:hover{
    transform: scale(1.08);
}