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

body{

    overflow:hidden;
    font-family:'Pixelify Sans',sans-serif;

}

.scene{

    position:relative;

    width:100vw;
    height:100vh;

    background:url("assets/background.png") center center/cover no-repeat;

}

/* ---------------- Speech ---------------- */

.speech{

    position:absolute;

    top:80px;
    left:50%;

    transform:translateX(-50%);

    width:800px;
    max-width:90vw;

    background:white;

    border:6px solid #4aa8ff;

    border-radius:30px;

    padding:30px;

    text-align:center;

    color:#2878d4;

    z-index:100;

    animation:pop .5s ease;

}

.speech h1{

    font-size:2rem;

}

/* ---------------- Dog ---------------- */

#dog-area{

    position:absolute;

    bottom:110px;

    left:50%;

    transform:translateX(-50%);

    z-index:20;

}

#dog{

    width:340px;

    image-rendering:pixelated;

    animation:idle 2s ease-in-out infinite;

}

/* ---------------- Buttons ---------------- */

.buttons{

    position:absolute;

    top:320px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:30px;

    z-index:100;

}

button{

    border:none;

    border-radius:18px;

    padding:16px 40px;

    font-family:'Pixelify Sans',sans-serif;

    font-size:1.2rem;

    cursor:pointer;

}

#yes{

    background:#4aa8ff;

    color:white;

}

#no{

    background:white;

    color:#444;

}

/* ---------------- Treasure Map ---------------- */

#map{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    z-index:500;

}

.map-paper{

    width:500px;

    max-width:90vw;

    background:#f7e3b1;

    border:6px solid #9b6d2c;

    border-radius:20px;

    padding:35px;

    text-align:center;

    color:#4d3210;

    animation:drop .5s ease;

}

.map-paper h2{

    margin-bottom:20px;

}

#closeMap{

    margin-top:25px;

    background:#4aa8ff;

    color:white;

}

/* ---------------- Floating Hearts ---------------- */

.floating-heart{

    position:fixed;

    pointer-events:none;

    z-index:300;

    animation:heartFloat linear forwards;

}

/* ---------------- Animations ---------------- */

@keyframes idle{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.excited{

    animation:celebrate .8s ease;

}

@keyframes celebrate{

    0%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-40px);

    }

    50%{

        transform:translateY(0);

    }

    75%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes heartFloat{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-300px);

    }

}

@keyframes pop{

    from{

        opacity:0;

        transform:translateX(-50%) scale(.8);

    }

    to{

        opacity:1;

        transform:translateX(-50%) scale(1);

    }

}

@keyframes drop{

    from{

        opacity:0;

        transform:translateY(-250px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}