*{margin:0;padding:0;box-sizing:border-box}
body {color:#fff;overflow-x:hidden;position:relative;font-family:'Montserrat',sans-serif;background:#000;z-index:1;}
.background-overlay {animation: jj 12s infinite alternate;position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(233,30,99,0.3),rgba(136,14,79,0.8));opacity:0.5;z-index:0;}
@keyframes jj{0%{transform:scale(1);}50%{transform:scale(1.07);}100%{transform:scale(1);}}
.kotak{margin:0 auto;margin-top:130px;transform:scale(0);transition:all .7s ease;border-radius:33px;padding:0;text-align:center;max-width:100%;width:420px;min-height:200px;position:relative;z-index:1}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(1deg)}}
/* Opening */
.reset, .tombol{position:relative;text-align:center;margin-top:14px;z-index:50}
.reset{margin:0 auto;margin-top: 180px;padding:0;text-align:center;max-width:100%;width:400px;min-height:200px;position:relative;z-index:1}
.reminder{font-family:'Montserrat',sans-serif;font-size:13px;margin-bottom:1rem;font-weight:500;line-height: 1.6em;letter-spacing: 0.25px;text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);}
.tombol{transform:scale(0);opacity:0;transition:all .7s ease;margin-top: -5px;}
.reset button, .tombol button {min-width: 120px;position: relative;cursor: pointer;font-size: 14.3px;padding: 12px 17px;border: 0;border-radius: 7px;box-shadow: inset 0 0 0 1px rgba(255, 64, 129, 0.3);background: radial-gradient(ellipse at bottom,rgba(255, 64, 129, 0.7) 0%,rgba(255, 64, 129, 0.2) 30%,rgba(20, 5, 10, 1) 65%);color: rgba(255, 255, 255, 0.75);transition: all 0.5s cubic-bezier(0.15, 0.83, 0.66, 1);}
button::before {content: "";width: 70%;height: 1px;position: absolute;bottom: 0;left: 15%;background: linear-gradient(90deg,rgba(255, 64, 129, 0) 0%,rgba(255, 64, 129, 1) 50%,rgba(255, 64, 129, 0) 100%);opacity: 0.4;transition: all 0.5s cubic-bezier(0.15, 0.83, 0.66, 1);}
button:hover {background: radial-gradient(ellipse at bottom,rgba(255, 64, 129, 0.9) 0%,rgba(255, 64, 129, 0.3) 35%,rgba(15, 3, 7, 1) 60%)!important;color: rgba(255, 255, 255);transform: scale(1.05) translateY(-2px);box-shadow: 0 8px 20px rgba(255, 64, 129, 0.4), inset 0 0 0 1px rgba(255, 64, 129, 0.6);}
button:hover::before {opacity: 1;filter: drop-shadow(0 0 5px #ff4081) brightness(1.2);}
@keyframes fadeOut {from { opacity: 1; }to { opacity: 0; }}
.reset.hide {animation: fadeOut 1s ease forwards;pointer-events: none;}
.reset {transition: opacity 1s ease; }
/* Other */
canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.pic{font-size:3rem;margin-bottom:1rem}
h1,h2{font-size:1rem;margin-bottom:1rem;font-weight:700}
#containerPesan{padding:0;display:block;width:100%;overflow:auto;min-height:100px;max-height:220px;justify-content:left;text-align:left;scrollbar-width: none;-ms-overflow-style: none;}
#teksCinta{font-size:13px;color:#fff;font-weight:500}
#teksLucu{font-size:13px;color:#fff;margin-top:1rem;font-weight:500}
#teksCinta, #teksLucu, #pesanAkhir{font-size:14px;text-align:left;text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);}
p{font-size:13px;margin-bottom:1rem;font-weight:500}
#statusGame{margin-top:25px}
button{background:#f43f5e;color:#fff;border:none;padding:0.5rem 1.5rem;border-radius:999px;font-size:1rem;transition:background 0.3s;font-weight:700}
button:hover{background:#e11d48}
.tombolCadangan{background:#6b7280}
.tombolCadangan:hover{background:#4b5563}
.papanGame{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,auto);gap:0.5rem;justify-items:center;width:90%;max-width:600px;margin:auto}
.kartu{width:50px;height:50px}
.dalemKartu{position:relative;width:100%;height:100%;transition:transform 0.6s;transform-style:preserve-3d}
.kartu.balik .dalemKartu{transform:rotateY(180deg)}
.depanKartu,.belakangKartu{position:absolute;width:100%;height:100%;border:1.3px solid rgba(255,255,255,0.8);backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:18px}
.depanKartu{background:rgba(255,255,255,0.2);}
.belakangKartu{background:rgba(255,255,255,0.5);transform:rotateY(180deg);font-size:1.5rem}
.sembunyi, #linkmp3{display:none}
.stiker{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;margin-bottom:20px;transform:scale(0);transition:all .7s ease}
.stiker img{width:100px;height:100px;box-shadow: 0 4px 30px rgba(255,105,180, 0.5);background: rgba(255, 255, 255, 0.7);border: 3px solid rgba(255,255,255, 1);border-radius: 50%;padding:10px;}
.hati{position:fixed;width:26px;height:26px;opacity:0.7;animation:ngelayang 5s ease-in-out forwards;z-index:0}
@keyframes ngelayang{0%{transform:translateY(15vh);opacity:0}20%{opacity:0.7}80%{opacity:0.7}100%{transform:translateY(-100vh);opacity:0}}
.hati svg{width:100%;height:100%;fill:#ff1744;stroke:none;filter:drop-shadow(0 0 8px #ff4081);}
/* Wrapper */
.wrapper{position:fixed}.circ div{position:fixed;width:70px;height:70px;background:transparent;border:7px solid rgba(255,255,255,0.3);border-radius:50%;}.circ div:nth-child(1){top:10%;left:40%;animation:animate 12s linear infinite}.circ div:nth-child(2){top:70%;left:50%;animation:animate 9s linear infinite}.circ div:nth-child(3){top:15%;left:8%;animation:animate 11s linear infinite}.circ div:nth-child(4){top:25%;left:65%;animation:animate 13s linear infinite}.circ div:nth-child(5){top:65%;left:12%;animation:animate 8s linear infinite}.circ div:nth-child(6){top:85%;left:75%;animation:animate 14s linear infinite}.circ div:nth-child(7){top:55%;left:82%;animation:animate 16s linear infinite}.circ div:nth-child(8){top:30%;left:20%;animation:animate 15s linear infinite}.circ div:nth-child(9){top:92%;left:28%;animation:animate 10s linear infinite}.circ div:nth-child(10){top:18%;left:85%;animation:animate 7s linear infinite}@keyframes animate{0%{transform:scale(0) translateY(0) rotate(0);opacity:0.8}100%{transform:scale(1.4) translateY(-100px) rotate(360deg);opacity:0}}
/* Animasi Teks Happy Birthday di Tengah Layar */
#finalGreeting{position:fixed;top:40%;left:50%;transform:translate(-50%,-40%) scale(0);opacity:0;font-family:'Sriracha',serif;font-size:3.5rem;font-weight:700;color:#fff;text-shadow:0 0 30px #ff4081,0 0 60px #ff1744;text-align:center;z-index:10;pointer-events:none;white-space:nowrap;}
#finalGreeting.show{animation:greetingAppear 1.5s ease forwards;}
@keyframes greetingAppear{0%{transform:translate(-50%,-40%) scale(0);opacity:0;}50%{transform:translate(-50%,-40%) scale(1.3);opacity:1;}100%{transform:translate(-50%,-40%) scale(1);opacity:1;}}
#finalGreeting.hide{animation:greetingDisappear 1.5s ease forwards;}
@keyframes greetingDisappear{0%{transform:translate(-50%,-40%) scale(1);opacity:1;}50%{transform:translate(-50%,-40%) scale(1.3);opacity:.8;}100%{transform:translate(-50%,-40%) scale(0);opacity:0;}}
#finalGreeting span{display:inline-block;opacity:0;transform:translateY(50px);animation:letterFloat 1.5s ease forwards;}
@keyframes letterFloat{to{opacity:1;transform:translateY(0);}}
/* Gambar di atas teks finalGreeting */
#finalGreetingImage{position:fixed;top:23%;left:50%;transform:translateX(-50%);width:130px;height:130px;object-fit:cover;border: 3px solid white;border-radius:50%;box-shadow:0 0 30px rgba(255,65,129,0.8);opacity:0;z-index:999;pointer-events:none;}
#finalGreetingImage.show{animation:greetingAppear 1.5s ease forwards;}
#finalGreetingImage.hide{animation:greetingDisappear 1.5s ease forwards;}
/* Overlay blur & gelap untuk ucapan akhir */
.final-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s;z-index:998;}
/* Ucapan Akhir Happy Birthday! */
#finalBirthday{position:fixed;top:40%;left:50%;transform:translate(-50%,-40%) scale(0);opacity:0;font-family:'Sriracha',serif;font-size:3.5rem;font-weight:700;color:#fff;text-shadow:0 0 30px #ff4081,0 0 60px #ff1744;text-align:center;z-index:999;pointer-events:none;width: 85%;}
#finalBirthday.show{animation:greetingAppear 1.5s ease forwards;}
#finalBirthday.hide{animation:greetingDisappear 1.5s ease forwards;}
#finalBirthday span{display:inline-block;opacity:0;transform:translateY(50px);animation:letterFloat 1.5s ease forwards;}
/* Gambar Kue di atas ucapan akhir */
#finalCakeImage{position:fixed;top:23%;left:50%;transform:translateX(-50%);width:150px;height:90px;object-fit:cover;border: 3px solid white;border-radius:15px;box-shadow:0 0 30px rgba(255,65,129,0.8);opacity:0;z-index:999;pointer-events:none;}
#finalCakeImage.show{animation:greetingAppear 1.5s ease forwards;}
#finalCakeImage.hide{animation:greetingDisappear 1.5s ease forwards;}
/* Mobile */
@media (max-width:600px){.kotak{width:85%;border-radius:33px 18px 33px 18px;padding:1rem}.reset{padding:1rem;width:85%;}.message p{font-size:1em}.papanGame{gap:1rem 0.2rem}.kartu{width:40px;height:40px}.belakangKartu{font-size:1.2rem}#finalGreeting{font-size:1.5rem;}#finalGreetingImage{width:110px;height:110px;top:25%;}#finalBirthday{font-size:1.6rem;}#finalCakeImage{width:auto;height:100px;top:25%;}}