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

:root {
  --color-flap: #bfa062;
  --color-env: #f5ecd7;
  --color-env2: #e2d5b8;
  --color-heart: #a33f44; 
  --color-sparkle: #d4af37;
  --color-sparkle-red: #7f1d1d; 
  --color-glow: rgba(191, 160, 98, 0.5);
  --color-glow-red: rgba(163, 63, 68, 0.6); 
  --bg-light: #fffbf4;
}

body {
  color: #7d6633;
  overflow-x: hidden;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  background: var(--bg-light);
  z-index: 1;
}

.background-overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url(/assets/img/wall-20260316.JPG);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

@media (min-width: 1024px) {
    .background-overlay {
      background-image: url('/assets/img/wall-20260316-2.JPG') !important;
      background-position: center !important;
      background-size: 100% 100% !important; /* Paksa pas layar sesuai permintaan */
      background-repeat: no-repeat !important;
    }
}

.kotak{
  margin:0 auto;
  margin-top:20px;
  transform:scale(0);
  transition:all .7s ease;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding:0;
  text-align:center;
  width:100%;
  max-width:100%;
  min-height:auto;
  position:relative;
  z-index:1
}

@media (min-width: 1024px) {
  .kotak {
    margin-top:130px;
    background: rgba(255, 251, 244, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px 33px 14px 33px;
    box-shadow: 0 10px 40px rgba(191, 160, 98, 0.25);
    border: 2.5px solid rgba(191, 160, 98, 0.8);
    padding:20px !important;
    width: 420px;
    min-height: 200px;
  }
}

#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(160, 134, 78, 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(160, 134, 78, 0.2);
}

.letter {
  position: relative;
  background: #ffffff;
  width: 88%;
  margin: 0 auto;
  height: 100%;
  top: 0%;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(160, 134, 78, 0.2);
  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) 50%,
    rgba(191, 160, 98, 0.5) 90%,
    rgba(255, 251, 244, 1) 100%
  );
  pointer-events: none;
}

.message {
  position: relative;
  z-index: 2;
  font-family: 'Handlee', cursive;
  color: #7d6633; /* Teks pesan coklat tua */
  text-align: center;
  line-height: 1.6;
  font-size: 1.3em;
  text-shadow: 0 1px 2px rgba(160, 134, 78, 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(191, 160, 98, 0.4) !important;
}
.letter-corner{position:absolute;width:12px;height:12px;border:2px solid var(--color-flap);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) !important;border-radius:15px 15px 0 0;
  transform:rotate(-45deg);transform-origin:0 100%;
  box-shadow: 0 0 10px var(--color-glow-red) !important;
}
.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}

.sparkle{
  width:6px;height:6px;
  background: var(--color-sparkle-red);
  border-radius:50%;
  box-shadow: 0 0 10px rgba(127, 29, 29, 0.7);
  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:'Sriracha',serif;
  font-weight:700;
  transition:all 0.4s ease;
  background:var(--color-flap);
  border:2px solid #fff;
  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(160, 134, 78, 0.4);
}
.reset button:hover, .tombol button:hover{background:#a68b54;transform:translateY(-5px) scale(1.1);
  box-shadow: 0 15px 35px rgba(160, 134, 78, 0.5);
}

.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;font-weight:500}
#teksLucu{font-size:13px;margin-top:1rem;font-weight:500}
#teksCinta, #teksLucu, #pesanAkhir{font-size:14px;color:#7d6633;text-align:left;text-shadow:0 2px 3px rgba(0,0,0,0.2)}
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(191, 160, 98, 0.1); border: 1.3px solid var(--color-flap); }
.belakangKartu{background: rgba(245, 236, 215, 0.8);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(160, 134, 78, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.8);
  border: 3px solid var(--color-flap);
  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: var(--color-flap) !important;
  stroke:none;
  filter: drop-shadow(0 0 5px var(--color-sparkle)) !important;
}
.wrapper{
  position:fixed
}
/* 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);}
}

#finalGreeting{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width: 90%;
  margin: 0;
  padding: 0;

  text-align:center;
  display: block;
  z-index:99;
  pointer-events:none;
  
  font-family:'Sriracha',serif;
  font-weight: 700;
  color: #7d6633;
  text-shadow: 0 0 10px #fff, 0 0 20px rgba(255,255,255,0.5);

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  opacity:0;
}

@media screen and (max-width: 480px) {
  #finalGreeting { font-size: 1.4rem; line-height: 1.4; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  #finalGreeting { font-size: 1.8rem; line-height: 1.5; }
}
@media screen and (min-width: 769px) {
  #finalGreeting { font-size: 2.4rem; line-height: 1.6; }
}

#finalGreeting.show{animation:greetingAppear 1.2s ease forwards;}
#finalGreeting.hide{animation:greetingDisappear 1.2s 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;}
}
@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.2s ease forwards;
}
@keyframes letterFloat{to{opacity:1;transform:translateY(0);}}

@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.7rem;}
.envelope-heart{font-size:2rem;}
}