*{margin:0;padding:0;box-sizing:border-box}
	:root{
		--color-flap:#e91e63;     /* Pink lebih dalam & romantis */
		--color-env:#fce4ec;     /* Lembut pink muda */
		--color-env2:#f8bbd0;    /* Sedikit lebih gelap untuk pocket */
		--color-heart:#ff1744;   /* Merah hati yang menyala */
		--color-sparkle:#ff80ab; /* Sparkle pink cerah */
		--color-glow:#ff4081;    /* Glow romantis */
	}
	body {color:#fff;overflow-x:hidden;position:relative;font-family:'Noto Sans',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:.35;z-index:0;}
	@keyframes jj{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}
	.kotak{margin:0 auto;margin-top:130px;transform:scale(0);transition:all .7s ease;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:33px 14px 33px 14px;box-shadow:0 8px 32px rgba(0,0,0,0.5);border:2.5px solid rgba(255,255,255,0.9);padding:0;text-align:center;max-width:100%;width:420px;min-height:200px;position:relative;z-index:1}
	.decor{position:absolute;width:12px;height:12px;border:2px solid #ff80ab;border-radius:3px;z-index:3}
	.decor-tl{top:10px;right:10px;border-left:none;border-bottom:none}
	.decor-br{bottom:10px;left:10px;border-right:none;border-top:none}
	#envelope{margin:0 auto;margin-top:150px;position:relative;width:200px;height:140px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;top:140px;background:var(--color-flap);box-shadow:0 8px 30px rgba(233,30,99,0.4);animation:float 4s ease-in-out infinite;}
	.front{position:absolute;width:0;height:0;z-index:3}
	.flap{border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:70px solid transparent;border-top:70px solid var(--color-flap);transform-origin:top;pointer-events:none;}
	.pocket{border-left:100px solid var(--color-env);border-right:100px solid var(--color-env);border-bottom:70px solid var(--color-env2);border-top:70px solid transparent;border-bottom-left-radius:12px;border-bottom-right-radius:12px;box-shadow:inset 0 10px 20px rgba(233,30,99,0.15);}
	.letter{position:relative;background:#fffaf0;width:88%;margin:0 auto;height:100%;top:0%;border-radius:10px;box-shadow:0 4px 30px rgba(233,30,99,0.3);padding:20px;box-sizing:border-box;overflow:hidden;}
	.letter:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(255,255,255,0) 20%,rgba(255,182,193,0.6) 60%,rgba(255,240,245,1) 100%);}
	.message{position:relative;z-index:2;font-family:'Handlee',cursive;color:#c2185b;text-align:center;line-height:1.6;padding-top:0;font-size:1.3em;text-shadow:0 2px 4px rgba(194,24,91,0.2);}
	.message p{margin:0 0;}
	.envlope-wrapper{height:240px;margin-top:0px;margin-bottom:0;position:relative;z-index:50}
	@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(1deg)}}
	.open .flap{transform:rotateX(180deg);transition:transform 0.6s cubic-bezier(0.68,-0.55,0.265,1.55),z-index 0.6s;z-index:1;}
	.close .flap{transform:rotateX(0deg);transition:transform 0.6s 0.4s ease,z-index 1s;z-index:5;}
	.close .letter{transform:translateY(0);transition:transform 0.4s ease,z-index 1s;z-index:1;}
	.open .letter{transform:translateY(-55px) rotate(-3deg) scale(1.05);transition:transform 0.6s 0.3s cubic-bezier(0.68,-0.55,0.265,1.55),z-index 0.6s;z-index:2;box-shadow:0 15px 40px rgba(233,30,99,0.5);}
	.letter-corner{position:absolute;width:12px;height:12px;border:2px solid #ff80ab;border-radius:3px;z-index:3;animation:pulse 2s infinite;}
	.corner-tl{top:8px;left:8px;border-right:none;border-bottom:none}
	.corner-br{bottom:8px;right:8px;border-left:none;border-top:none}
	@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
	.hearts,.sparkles{position:absolute;top:70px;left:0;right:0;z-index:4}
	.heart,.sparkle{position:absolute;bottom:0;pointer-events:none;animation:floatUp 5s linear infinite}
	.heart:before,.heart:after{content:"";position:absolute;left:15px;top:0;width:15px;height:28px;background:var(--color-heart);border-radius:15px 15px 0 0;transform:rotate(-45deg);transform-origin:0 100%;box-shadow:0 0 15px var(--color-glow);}
	.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
	.sparkle{width:6px;height:6px;background:var(--color-sparkle);border-radius:50%;box-shadow:0 0 10px var(--color-glow);animation:sparkleTwinkle 1.5s infinite}
	.close .heart,.close .sparkle{opacity:0;animation:none}
	.a1{left:15%;transform:scale(0.7);animation:slideUp 5s linear infinite,sideSway 3s ease-in-out infinite alternate}
	.a2{left:50%;animation:slideUp 6s linear infinite,sideSway 4s ease-in-out infinite alternate}
	.a3{left:80%;transform:scale(0.9);animation:slideUp 7s linear infinite,sideSway 2.5s ease-in-out infinite alternate}
	.s1{left:25%;animation:sparkleUp 4s linear infinite}
	.s2{left:65%;animation:sparkleUp 5s linear infinite}
	.s3{left:45%;animation:sparkleUp 6s linear infinite}
	@keyframes slideUp{0%{top:0;opacity:1}100%{top:-700px;opacity:0}}
	@keyframes sideSway{0%{margin-left:-20px}100%{margin-left:20px}}
	@keyframes sparkleUp{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(-600px) rotate(720deg);opacity:0}}
	@keyframes sparkleTwinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(2) rotate(180deg)}}
	.reset, .tombol{position:relative;text-align:center;margin-top:14px;z-index:50}
    .reset{margin-top:0}
	.reset button, .tombol button{font-family:'Varela Round',sans-serif;font-weight:700;transition:all 0.4s ease;background:var(--color-flap);border:2px solid rgba(255,255,255,0.9);border-radius:30px;color:#fff;text-shadow:0 3px 5px rgba(0,0,0,0.4);padding:6px 12px;margin:10px;font-size:14.3px;box-shadow:0 8px 25px rgba(233,30,99,0.4);}
	.reset button:hover, .tombol button:hover{background:#ad1457;transform:translateY(-5px) scale(1.1);box-shadow:0 15px 35px rgba(233,30,99,0.6);}
	.tombol{transform:scale(0);opacity:0;transition:all .7s ease}
	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:13.8px;text-align:left;text-shadow:0 2px 3px rgba(0,0,0,0.2)}
	.varela{font-family:'Varela Round',sans-serif;}
	
	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);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);background: rgba(255, 255, 255, 0.7);border: 3px solid rgba(255,255,255, 1);border-radius: 50%;padding:3px;}
	.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{position:fixed}.circ div{display:none;position:fixed;width:70px;height:70px;background:transparent;border:7px solid rgba(255,255,255,0);border-radius:0%;box-shadow:0 0 20px rgba(255,20,147,0);}.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}}

	/* Emoji Hati di Tengah Amplop */
	.envelope-heart{
		position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;z-index:5;
		opacity:0.9;pointer-events:none;animation:pulseHeart 2s ease-in-out infinite;
	}
	@keyframes pulseHeart{
		0%,100%{transform:translate(-50%,-50%) scale(1);}
		50%{transform:translate(-50%,-50%) scale(1.2);}
	}

	/* Animasi Teks Happy Mother's Day 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 3px 5px rgba(0,0,0,0.8);*/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.2);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.2);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:contain;border: 3px solid white;border-radius:50%;/*box-shadow:0 0 30px rgba(0,0,0,0.3);*/padding:10px;background:rgba(255,255,255,.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;}
	
	@media (max-width:600px){
		.kotak{width:85%;padding:1rem}
		#envelope{width:150px;height:105px;top:100px}
		.flap,.pocket{border-left-width:75px;border-right-width:75px;border-bottom-width:52.5px;border-top-width:52.5px}
		.letter{padding:12px}
		.message p{font-size:.9em}
		.papanGame{gap:1rem 0.2rem}
		.kartu{width:40px;height:40px}
		.belakangKartu{font-size:1.2rem}
		#finalGreeting{font-size:1.43rem;}
		#finalGreetingImage{padding:8px;width:95px;height:95px;top:27%;}
		.envelope-heart{font-size:2rem;}
	}