*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
overflow:hidden;
overflow-x:hidden;
background:#f7edf3;
-webkit-tap-highlight-color:transparent;
}

.page{
display:none;
width:100vw;
height:100vh;
justify-content:center;
align-items:center;
flex-direction:column;
}

.active{
display:flex;
}

/* ================= */
/* PAGE 1 */
/* ================= */

#welcome{
background:#f8ebf0;
}

#welcome h1{
font-family:'Parisienne';
font-size:72px;
color:#e5a6c7;
margin-bottom:20px;
}

#welcome p{
font-size:24px;
color:#666;
margin-bottom:30px;
}

#welcome button{
padding:20px 60px;
border:none;
border-radius:60px;
background:#e9a8c6;
color:white;
font-size:22px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.1);
transition:.3s;
}

#welcome button:hover{
transform:scale(1.05);
}

/* ================= */
/* PAGE 2 */
/* ================= */

#game{
background:#dce8f4;
position:relative;
overflow:hidden;
}

.counter{
position:absolute;
top:30px;
padding:15px 40px;
background:white;
border-radius:50px;
border:3px solid pink;
font-weight:600;
}

#game h2{
margin-top:90px;
color:#555;
}

.heart{
position:absolute;
font-size:50px;
cursor:pointer;
user-select:none;
animation:floatUp linear infinite;
z-index:5;
}

@keyframes floatUp{
0%{
transform:translateY(120vh);
}
100%{
transform:translateY(-150px);
}
}

/* ================= */
/* POPUP */
/* ================= */

#popup{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
justify-content:center;
align-items:center;
z-index:999;
}

.popup-card{
background:white;
padding:50px;
border-radius:25px;
border:5px solid pink;
text-align:center;
}

.popup-card h1{
font-family:'Parisienne';
font-size:60px;
color:#e3a1c4;
}

.popup-card button{
margin-top:20px;
padding:15px 50px;
border:none;
border-radius:50px;
background:#e7a7c5;
color:white;
font-size:20px;
cursor:pointer;
}

/* ================= */
/* LOADING */
/* ================= */

#loading{
background:#dce8f4;
}

.loader{
width:300px;
height:15px;
background:#fff;
border:3px solid pink;
border-radius:50px;
overflow:hidden;
position:relative;
}

.loader::before{
content:'';
position:absolute;
height:100%;
width:60%;
background:#e8a7c7;
animation:load 2s linear forwards;
}

@keyframes load{
from{
width:0%;
}
to{
width:100%;
}
}

.loader-wrapper p{
margin-top:20px;
font-size:25px;
}

/* ================= */
/* PAGE LETTER */
/* ================= */

#letter{
background:#dce8f4;
position:relative;
}

.notif{
position:absolute;
top:50px;
background:white;
padding:20px 40px;
border-left:8px solid #d3478b;
border-radius:20px;
font-size:20px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

.content-card{
width:80%;
height:70%;
background:#f9f6fb;
border-radius:40px;
display:flex;
justify-content:center;
align-items:center;
gap:100px;
padding:20px;
}

.polaroid{
background:white;
padding:15px;
width:300px;
transform:rotate(-5deg);
box-shadow:0 10px 20px rgba(0,0,0,.1);
}

.polaroid img{
width:100%;
display:block;
}

.photo-text{
text-align:center;
margin-top:10px;
font-family:'Parisienne';
font-size:28px;
color:#b93c78;
}

.letters{
display:flex;
flex-direction:column;
gap:50px;
}

.envelope{
text-align:center;
font-size:80px;
cursor:pointer;
transition:.3s;
}

.envelope:hover{
transform:translateY(-5px);
}

.envelope:active{
transform:scale(.95);
}

.envelope h3{
font-size:30px;
margin-top:10px;
color:#b93c78;
}

/* ================= */
/* SURAT POPUP */
/* ================= */

.letter-popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
backdrop-filter:blur(4px);
justify-content:center;
align-items:center;
z-index:9999;
}

.letter-box{
width:700px;
max-width:90%;
height:80vh;
background:#fff;
border-radius:25px;
border:6px solid #efb6cf;
padding:30px;
position:relative;
}

.letter-box h1{
text-align:center;
font-family:'Parisienne';
font-size:50px;
color:#b93c78;
margin-bottom:20px;
}

.letter-content{
height:85%;
overflow-y:auto;
font-size:22px;
line-height:2;
color:#555;
padding-right:10px;
}

.close-btn{
position:absolute;
right:20px;
top:15px;
font-size:30px;
cursor:pointer;
color:#b93c78;
}

/* Scrollbar */

.letter-content::-webkit-scrollbar{
width:8px;
}

.letter-content::-webkit-scrollbar-thumb{
background:#d3478b;
border-radius:20px;
}

/* ================= */
/* ANDROID */
/* ================= */

@media screen and (max-width:768px){

#welcome h1{
font-size:50px;
text-align:center;
}

#welcome p{
font-size:18px;
padding:0 20px;
text-align:center;
}

#welcome button{
padding:15px 35px;
font-size:18px;
}

.counter{
font-size:14px;
padding:10px 20px;
}

#game h2{
font-size:18px;
padding:0 20px;
text-align:center;
}

.heart{
font-size:45px;
}

.popup-card{
width:90%;
padding:25px;
}

.popup-card h1{
font-size:40px;
}

.popup-card button{
font-size:16px;
padding:12px 25px;
}

.loader{
width:250px;
}

.loader-wrapper p{
font-size:18px;
}

.notif{
width:90%;
font-size:14px;
padding:15px;
top:20px;
text-align:center;
}

.notif b{
font-size:16px;
}

.content-card{
width:95%;
height:75%;
padding:20px;
gap:20px;
flex-direction:column;
}

.polaroid{
width:180px;
padding:10px;
}

.photo-text{
font-size:20px;
}

.letters{
gap:25px;
}

.envelope{
font-size:55px;
}

.envelope h3{
font-size:22px;
}

.letter-box{
width:100%;
height:85vh;
padding:20px;
}

.letter-box h1{
font-size:34px;
}

.letter-content{
font-size:16px;
line-height:1.8;
height:80%;
}

.close-btn{
font-size:26px;
}

}
.arrow{
position:absolute;
font-size:40px;
pointer-events:none;
z-index:999;
animation:shoot .6s linear forwards;
}

@keyframes shoot{
0%{
opacity:1;
transform:translate(-50%,-50%) scale(.5);
}
100%{
opacity:0;
transform:translate(-50%,-200px) scale(1.3);
}
}

.mini-love{
position:absolute;
font-size:25px;
pointer-events:none;
animation:explode 1s ease-out forwards;
}

@keyframes explode{
0%{
opacity:1;
transform:translate(0,0) scale(1);
}
100%{
opacity:0;
transform:
translate(
calc(var(--x)*80px),
calc(var(--y)*80px)
)
scale(0);
}
}