BIAR LILINNYA MUNCUL PAS ANIMASI CAKE UDH SELESAI
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fdf6cc; /* Diubah ke kuning pastel lembut sesuai foto */
    font-family:'Times New Roman', Times, serif;
    overflow-x: hidden;
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px;
}

/* Ukuran wrapper utama diperkecil dari 950px ke 760px */
.calendar-card{
    position: relative;
    width: 600px;

    height: 370px;      /* atau 390px */
    /* hapus min-height:540px */

    padding:25px;
    border-radius:25px;
    overflow:hidden;

background:
repeating-linear-gradient(
    to right,
    #f7ecd8 0px,
    #f7ecd8 22px,
    #d9c2a3 22px,
    #d9c2a3 24px
);

    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* Judul diperkecil */
.birthdayTitle {
    position: absolute;
    top: 15px;
    left: 40px;
    font-size: 42px;
    line-height: .95;
    font-weight: 900;
    color: white;
    text-shadow: 3px 3px 0 #ff8db3; /* Pink cerah agar pop-out */
}

/* Kalender diperkecil */
.calendarPaper {
    position: absolute;
    left: 40px;
    top: 130px;
    width: 290px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
    transform: rotate(-1deg);
}

@media (max-width: 800px) {
    .calendar-card{
    width:600px;
    height:500px;
    transform:scale(.58);
    transform-origin:top center;
}
    .birthdayTitle {
        top: 25px;
        left: 100px;
        font-size: clamp(32px, 6vw, 42px);
    }
    .calendarPaper{
    width:240px;          /* tetap sama seperti desktop */
    left:100px;
    top:130px;
    transform:rotate(-1deg);
    position:absolute;
}
}

.calendarPaper h2 {
    font-size: 24px;
    color: #ff5c8d; /* Diubah ke pink cerah */
    margin: 0;
}

.calendarHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.year {
    font-size: 16px;
    font-weight: 700;
    color: #ff5c8d; /* Diubah ke biru muda pastel */
    letter-spacing: 1px;
}

.week{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;

    border-top: 2px solid #ff5c8d;  /* 👈 ini garisnya */
    padding-top: 8px;
}

.week span{
    font-size:11px;
    color:#6b4d22;
    font-weight:bold;

    background:rgba(180,180,180,.22);
    border-radius:8px;
    padding:4px 0;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.days span{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    font-weight:700;

    border-radius:50%;

    background:rgba(170,170,170,.18);

    transition:.2s;
}

.days span:not(.empty):hover {
    background: #ffe2ec;
    cursor: pointer;
}

.empty {
    visibility: hidden;
}

.special{
    background:#ff5c8d !important;
    color:white;
}

@keyframes pulse {
    50% { transform: scale(1.08); }
}

/* Foto Polaroid diperkecil */
.photo{
    position:absolute;
    left:30px;
    bottom:25px;

    background:white;
    padding:5px 5px 18px;

    border-radius:4px;
    box-shadow:0 5px 12px rgba(0,0,0,.15);

    transform:rotate(-6deg);
}

.photo img{
    width:95px;      /* sebelumnya 120px */
    height:105px;    /* sebelumnya 130px */
    object-fit:cover;
}

.sticker {
    position: absolute;
    user-select: none;
    pointer-events: none;
}

.sticker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Balon diperkecil */
.bear {
    right: 60px;
    top: 2px;
    width: 130px;
    transform: rotate(12deg);
}

.giftSticker{
    position:absolute;
    left:10px;
    bottom:15px;

    width:50px;      /* sebelumnya 140px */

    z-index:10;
    pointer-events:none;
}

/* ================= LIST KARTU SCRAPBOOK (KANAN) ================= */
/* Lebar dikurangi dari 300px ke 250px */
.message-box {
    position: absolute;
    top: 75px;
    right: 40px;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 2px;
}

/* Tinggi kartu dikurangi dari 150px ke 105px */
.birthday-card {
    position: relative;
    width: 100%;
    height: 105px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: .25s;
    box-shadow: 0 6px 14px rgba(0,0,0,.1);
    border: 2px dashed #ff8db3;
}

.birthday-card:hover {
    transform: translateY(-3px) scale(1.02);
}

.birthday-card.pink { background: #fff0f5; border-color: #ffb6cf; } /* Dibuat lebih pastel lembut */
.birthday-card.yellow { background: #fffde8; border-color: #ffd96f; }
.birthday-card.blue { background: #f0f7ff; border-color: #a8d9ff; }

.card-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
}

.card-preview > h3 {
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 26px;
    font-weight: 800;
}

.pink h3 { color: #d95d90; }
.yellow h3 { color: #886028; }
.blue h3 { color: #4c78b8; }

.tape {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 65px;
    height: 14px;
    border-radius: 2px;
    opacity: .9;
}

.pinkTape { background: repeating-linear-gradient(45deg, #ffb6cf, #ffb6cf 6px, #ffc8dc 6px, #ffc8dc 12px); }
.yellowTape { background: repeating-linear-gradient(45deg, #ffd96f, #ffd96f 6px, #ffe799 6px, #ffe799 12px); }
.blueTape { background: repeating-linear-gradient(45deg, #a8d9ff, #a8d9ff 6px, #c8e9ff 6px, #c8e9ff 12px); }

/* Kontras warna tombol 'Tap to Open' ditingkatkan */
.pink .tapBtn { background: #ff5c8d; color: white; }
.yellow .tapBtn { background: #efc55a; color: white; }
.blue .tapBtn { background: #5caeff; color: white; }

/* Ukuran stiker di dalam kartu diperkecil */
.cake { left: 0px; bottom: 18px; width: 65px; height: 65px; transform: rotate(-10deg); }
.mail { right: 10px; bottom: 30px; width: 55px; height: 55px; transform: rotate(10deg); }
.gift { left: 5px; bottom: 40px; width: 55px; height: 55px; transform: rotate(-10deg); }
.ribbon { right: 10px; bottom: 40px; width: 55px; height: 55px; transform: rotate(10deg); }
.flower2 { left: 5px; bottom: 35px; width: 60px; height: 60px; transform: rotate(-10deg); }
.star3 { right: 5px; bottom: 35px; width: 65px; height: 65px; transform: rotate(10deg); }

#continueBtn{
    display: block;
    width: fit-content;      /* Lebar mengikuti teks */
    padding: 10px 24px;      /* Jarak dalam tombol */
    margin: 10px auto 0;     /* Posisi di tengah */
    
    background: #ff7eb0; /* Diganti ke cokelat kayu estetis biar kontras */
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    transition: .3s;
}

#continueBtn:hover { background: #ff5c8d;  transform: scale(1.05); } /* Hover pop ke pink cerah */

/* ================= POPUP NOTA SURAT (NOTEBOOK POPUP) ================= */
#cardOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
    z-index: 998;
}

#letterPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    animation: zoomCard 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

/* Note dikurangi dari 450px ke 380px */
.note {
    position: relative;
    width: min(380px, 88vw);
    max-height: min(460px, 80vh);
    background: #fff; /* Diubah jadi warna kertas warm krem */
    border-radius: 12px;
    padding: 55px 22px 25px 25px;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
    border: 2px solid #886028; /* Border cokelat kayu */
}

.note::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #ece4d5 27px, #ece4d5 28px);
    pointer-events: none;
    padding-top: 55px;
}

.spiral {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 35px;
    background: radial-gradient(circle, #7a6e5d 4px, transparent 5px) repeat-x; /* Warna kawat ring disesuaikan */
    background-size: 22px 20px;
    background-position: 10px 8px;
    border-bottom: 2px double #d2c5b3;
}

.noteHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px dashed #886028;
    padding-bottom: 3px;
}

.noteHeader h2 { font-size: 22px; color: #886028; font-family: 'Times New Roman', Times, serif; }
.noteHeader span { font-size: 16px; font-weight: bold; color: #b09168; }

.letterText p{
    font-family:'Times New Roman', Times, serif;
    font-size:13px;
    line-height:30px;   /* samakan dengan jarak garis */
    color:#4a2b20;
    white-space:pre-wrap;
    text-align:left;
    position:relative;
    z-index:2;
}

.closeCard {
    position: absolute;
    top: -12px;
    right: 2px;
    width: 30px;
    height: 30px;
    border: 2px solid #886028;
    border-radius: 50%;
    background: #ff5c8d; /* Tombol X warna pink cerah */
    color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    z-index: 1005;
    box-shadow: 2px 2px 0 #886028;
    transition: .15s;
}

.closeCard:hover { transform: scale(1.1); background: #ff2d74; }

@keyframes zoomCard {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Notification Popup */
.intro-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.2);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    z-index: 999;
}
.calendar-notification {
    width: min(340px, 85vw);
    background: white;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
    overflow: hidden;
}
.notif-header { display: flex; justify-content: space-between; padding: 10px 14px; background: #f5f5f5; font-size: 20px; color: #777; }
.notif-body { display: flex; gap: 12px; padding: 15px; align-items: center; }
.notif-icon { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; }
.notif-icon img { width: 100%; height: 100%; object-fit: cover; }
.notif-text h3 { font-size: 20px; margin-bottom: 2px; color: #222; }
.notif-text p { font-size: 20px; color: #ff4f8a; }
.calendar-notification button { width: 100%; padding: 12px; border: none; background: #ff4f8a; color: white; font-size: 20px; cursor: pointer; font-weight: bold; }

.hidden { display: none !important; }

button{
  margin-top:15px;
  padding:12px 20px;
  border:none;
  border-radius:12px;
  background:#ff5c8d; /* Diubah warna dasarnya ke pink cerah */
  color:white;
  cursor:pointer;
}

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

.letterPhone{
width:100%;
max-width:430px;
margin:auto;
padding:25px;
}

.letterHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
color:#ff5c8d;
}

.backBtn,
.menuDots{
background:none;
border:none;
font-size:28px;
color:#4a2b20;
cursor:pointer;
}

.letterDate{
    font-size:22px;
    font-weight:600;
}

.searchBox{
    height:38px;
    border:1px solid #ff5c8d;
    border-radius:24px;
    display:flex;
    align-items:center;
    padding:0 14px;
    color:#aaa;
    background:white;
    margin-bottom:14px;
    font-size:13px;
}

.letterCard{
    background:#fffaf5;
    border:1px solid #ff5c8d;
    border-radius:22px;
    padding:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.profile{
    display:flex;
}

.profile img{
    width:48px;
    height:48px;
    border-radius:10px;
    object-fit:cover;
    border:2px solid white;
    margin-right:10px;
}

.cardTop{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.cardTop h3{
    font-size:15px;
    margin:0 0 4px;
    color:#ff5c8d;
}

.cardTop p{
    margin:0;
    font-size:13px;
    color:#b39d90;
}

.lyricsBox{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin:22px 0;
    max-height:260px;
    overflow:hidden;
    scroll-behavior:smooth;
}

.lyric{
    font-size:20px;
    font-weight:500;
    line-height:1.45;
    color:#d7cec7;
    transition:.5s;
}

.lyric.active{
    color:#ff5c8d;
    font-weight:700;
    transform:scale(1.0);
}

.lyric.done{
    color:#a9a09a;
}

.lyric.upcoming{
    color:#d7cec7;
}

.cardBottom{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tag{
    background:none;
    border:1px solid #d9bfa7;
    border-radius:999px;
    padding:6px 14px;
    color:#ff5c8d;
    font-size:12px;
}

#progress{
    color:#9b8d85;
    font-size:12px;
}

#loveNext{
margin:28px auto 0;

display:flex;
justify-content:center;
align-items:center;

width:50px;
height:50px;

border:none;
border-radius:22px;

background:#886028; /* Diubah ke cokelat */

font-size:20px;
line-height:1;

cursor:pointer;

transition:.3s;
}

#loveNext:hover{
transform:scale(1.05);
}

/* ================= SCRAPBOOK CARDS ================= */

/* ================= LIST 3 KARTU SCRAPBOOK (KANAN) ================= */
/* Lebar message box dikurangi agar lebih ramping */
.message-box {
    position: absolute;
    top: 65px;
    right: 35px;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    padding: 2px;
}

/* Tinggi 3 kartu dikecilkan dari 105px menjadi 85px */
.birthday-card {
    position: relative;
    width: 100%;
    height: 85px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: .22s;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    border: 2px dashed #ff8db3;
}

.birthday-card:hover {
    transform: translateY(-2px) scale(1.02);
}

.card-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
}

/* Angka 01, 02, 03 diperkecil ukurannya */
.card-preview > h3 {
    margin-top: 8px;
    margin-bottom: 2px;
    font-size: 20px;
    font-weight: 800;
}

.tape {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 55px;
    height: 12px;
    border-radius: 2px;
    opacity: .9;
}

/* Tombol Tap to Open diperkecil */
.tapBtn {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    min-width: 80px;
    text-align: center;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
}

/* Ukuran stiker aksesori di dalam 3 kartu diperkecil agar tidak menumpuk */
.cake { left: -2px; bottom: 12px; width: 50px; height: 50px; transform: rotate(-10deg); }
.mail { right: 5px; bottom: 15px; width: 40px; height: 40px; transform: rotate(10deg); }
.gift { left: 2px; bottom: 15px; width: 40px; height: 40px; transform: rotate(-10deg); }
.ribbon { right: 5px; bottom: 15px; width: 40px; height: 40px; transform: rotate(10deg); }
.flower2 { left: 2px; bottom: 12px; width: 45px; height: 45px; transform: rotate(-10deg); }
.star3 { right: 2px; bottom: 12px; width: 48px; height: 48px; transform: rotate(10deg); }


/* ================= ISI KARTU YANG KAYA PAPER (NOTEBOOK SURAT) ================= */
/* Ukuran kertas popup diperkecil lebar & tingginya */
.note {
    position: relative;
    width: min(330px, 85vw);
    max-height: min(380px, 75vh);
    background: #fff;
    border-radius: 10px;
    padding: 45px 18px 20px 20px;
    overflow-y: auto;
    box-shadow: 0 12px 35px rgba(0,0,0,.22);
    border: 2px solid #886028; /* Diganti ke cokelat */
}

/* Jarak baris penggaris disesuaikan agar pas dengan teks yang mengecil */
.note::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    background:
    repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 50px,  /* sebelumnya 23px atau 29px */
        #ece4d5 50px,
        #ece4d5 51px
    );
    pointer-events:none;
}

/* Spiral binder di atas kertas dikecilkan */
.spiral {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    background: radial-gradient(circle, #7a6e5d 3px, transparent 4px) repeat-x; /* Diganti cokelat abu */
    background-size: 18px 16px;
    background-position: 8px 6px;
    border-bottom: 2px double #d2c5b3;
}

.noteHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px dashed #886028; /* Diganti cokelat */
    padding-bottom: 2px;
}

.noteHeader h2 { font-size: 18px; color: #886028; font-family: 'Times New Roman', Times, serif; }
.noteHeader span { font-size: 14px; font-weight: bold; color: #b09168; }

/* Ukuran font teks surat diperkecil & line-height diselaraskan dengan garis latar belakang */
.letterText p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    line-height: 24px;
    color: #4a2b20;
}

/* Tombol close (X) diatur agar proporsional dengan kertas baru */
.closeCard {
    position: absolute;
    top: 40px;      /* lebih ke bawah */
    right: 20px;    /* sedikit masuk dari kanan */
    width: 20px;
    height: 20px;
    border: 2px solid #886028; /* Diganti cokelat */
    border-radius: 50%;
    background: #ff5c8d; /* Pink cerah */
    color: white;
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
    z-index: 1005;
    box-shadow: 1.5px 1.5px 0 #886028;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeCard{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes zoomCard{

from{

opacity:0;

transform:translate(-50%,-50%) scale(.8);

}

to{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}

}

.popupTape{
    position:absolute;

    top:-18px;
    left:50%;

    transform:translateX(-50%) rotate(-3deg);

    width:130px;
    height:34px;

    border-radius:6px;

    background:
    repeating-linear-gradient(
        45deg,
        #ffbfd6,
        #ffbfd6 18px,
        #ffd7e5 18px,
        #ffd7e5 36px
    );

    opacity:.95;
}

.giftSticker{
    position:absolute;
    left:15px;
    bottom:20px;
    width:140px;
    z-index:10;
    pointer-events:none;
}

.giftBox{
    width:96%;
        max-width:none;
    aspect-ratio:7/5;          /* sesuaikan dengan gambar */
    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;

    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;

    box-shadow:0 15px 30px rgba(0,0,0,.25);

    perspective: 1200px;
}

/* --- Flip Card (Level 4) --- */
.flipCardInner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition: transform .65s ease;
}

.giftBox.is-flipped .flipCardInner{
  transform: rotateY(180deg);
}

/* Hide gift preview background photo when flipped (Level 4) */
.giftBox.is-flipped{
  background-image:none !important;
  background-color:transparent !important;
}

.flipFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.flipFront{
  transform: rotateY(0deg);
}

.flipBack{
  transform: rotateY(180deg);
  background: rgba(255,255,255,.12);
}

.giftFrontContent{
  width:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:8px;
}

.giftHint{
  padding:7px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.55);
  font-weight:900;
  color:#4a2b20;
  box-shadow:0 10px 26px rgba(0,0,0,.15);
}

.giftFrontTitle{
  font-size:clamp(16px, 4.8vw, 22px);
  font-weight:950;
  color:#4a2b20;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

.giftBackContent{
  width:100%;
  padding:14px;
}


.gift1{
    background-image:url("image/gift1.png");
}

.gift2{
    background-image:url("image/gift2.png");
}

.gift3{
    background-image:url("image/gift3.png");
}

#gameArea .giftBox .cake{
    position:absolute;
    left:44%;
    top:100px;              /* sesuaikan sedikit jika perlu */
    transform:translateX(-50%);
    width:8px;
    height:38px;
    z-index:20;
}

/* BIAR LILIN MUNCUL PAS ANIMASI CAKE SELESAI:
   Diatur opacity dari 0, lalu beri delay animasi (misalnya 1.5s menyesuaikan selesainya durasi kue) */
#gameArea .giftBox .candle{
    position:relative;
    width:8px;
    height:38px;
    background:#fff;
    border-radius:4px;
    opacity: 0; 
    animation: in .5s ease-out 1.5s forwards; /* Menambahkan delay 1.5s sebelum berjalan */
}

#gameArea .giftBox .candle::before,
#gameArea .giftBox .candle::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:rgba(255,0,0,.45);
}

#gameArea .giftBox .candle::before{
    top:45%;
}

#gameArea .giftBox .candle::after{
    top:25%;
}

@keyframes in{
    from{
        transform:translateY(-40px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.diaryLetter{
display:flex;
justify-content:center;
align-items:center;
padding:18px;
background:#ff5c8d; /* Diganti pink cerah */
height:100%;
}

.paper{
position:relative;
width:100%;
height:100%;
padding:28px;
background:
repeating-linear-gradient(
to bottom,
#fffef8,
#fffef8 27px,
#dcdcdc 28px
);
border-radius:8px;
font-family:'Times New Roman', Times, serif;
overflow:auto;
}

.paper h2{
font-size:30px;
text-align:center;
margin-bottom:18px;
color:#6a4525;
}

.paper p{
font-size:20px;
line-height:1.8;
margin-bottom:18px;
}

.quote{
font-weight:bold;
text-align:center;
margin:25px 0;
font-size:22px;
}

.sticky{
position:absolute;
right:18px;
bottom:18px;
width:130px;
height:100px;
background:#f6f6f6;
transform:rotate(-8deg);
box-shadow:0 10px 18px rgba(0,0,0,.2);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:bold;
color:#b1003c;
}

.signature{
margin-top:20px;
text-align:center;
font-size:24px;
}

.hidden{
    display: none;
}

@media (max-width:768px){

body{
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

.calendar-card{
    width:600px;
    height:500px;

    transform:scale(.82);
    transform-origin:center;
}

}

/* CARD PREVIEW HP */
.message-box{
    width:360px;
    right:90px;
    top:110px;
    gap:6px;
}

.birthday-card{
    height:70px;
    border-radius:10px;
}

.card-preview{
    padding-top:5px;
}

.card-preview > h3{
    margin-top:5px;
    font-size:16px;
}

.tapBtn{
    min-width:70px;
    padding:3px 6px;
    font-size:8px;
    bottom:10px;
}

.tape{
    width:45px;
    height:10px;
}

/* Stiker */
@media (max-width: 768px){

  .cake{
    bottom: auto;
    top: 6px;   /* naik ke atas */
  }

  .mail{
    bottom: auto;
    top: 8px;
  }

  .gift{
    bottom: auto;
    top: 8px;
  }

  .ribbon{
    bottom: auto;
    top: 8px;
  }

  .flower2{
    bottom: auto;
    top: 6px;
  }

  .star3{
    bottom: auto;
    top: 6px;
  }

}

/* ================= POPUP CARD MOBILE ================= */
@media (max-width:768px){

    #letterPopup{
        position: fixed;
        top: 50%;
        left: 60%;              /* 👈 tambah ini (lebih ke kiri) */
        transform: translate(-50%, -50%); /* 👈 geser center-nya */
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start; /* biar gak terlalu center */
        align-items: center;
        padding: 15px;
    }

    /* Kertas ucapan diperkecil */
    .note{
    width:240px;      /* sebelumnya 380px */
    max-height:280px;
    padding:36px 14px 14px;
    border-radius:8px;
}

.noteHeader h2{
    font-size:20px;
}

.noteHeader span{
    font-size:15px;
}

.letterText p{
    font-size:12px;
    line-height:17px;
}

.spiral{
    height:22px;
    background-size:14px 12px;
}

.popupTape{
    width:70px;
    height:18px;
    top:-8px;
}

.closeCard{
    width:16px;
    height:16px;
    top:40px;
    right:20px;
    font-size:8px;
}

    /* Selotip */
    .popupTape{
        width:90px;
        height:24px;
        top:-12px;
    }

}

/* =================== MOBILE =================== */
@media (max-width: 768px){

  #gameArea{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:15px;
    box-sizing:border-box;
}

  .aestheticGame{
    width:100% !important;
    max-width:520px;
    padding:22px 18px !important;
    border-radius:25px;
    margin:auto;
  }

  .aestheticGame h1{
    font-size:38px !important;
    line-height:1.1;
  }

  .aestheticGame h2{
    font-size:30px !important;
  }

  .aestheticGame p{
    font-size:23px !important;
  }

  /* LEVEL 1 */
  .candlesWrap{
    gap:15px !important;
  }

  .candle{
    width:80px !important;
  }

  .cakePlate{
    width:100%;
  }

  .balloonBox{
  padding:25px !important;
}

/* GRID CONTAINER */
#grid{
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
}

/* SLOT BOX */
.grid-slot{
  width:100% !important;
  aspect-ratio:1 / 1;
  border-radius:12px;
}

/* GAMBAR DI DALAM SLOT */
#grid img{
  width:65% !important;
  height:65% !important;
  object-fit:contain;
}

  /* LEVEL 3 */
  .letterTile{
    min-width:44px !important;
    width:44px;
    height:44px !important;
    font-size:20px !important;
    padding:0 !important;
  }

  #assembledText{
    font-size:24px !important;
    word-break:break-word;
  }

  /* LEVEL 4 */
  .giftBox{
    width:150px !important;
  }

  .custom-modal-content{
    width:92vw !important;
    padding:18px !important;
    padding-top:50px !important;
    border-radius:18px;
  }

  #gift2cakesvg{
    width:160px !important;
    height:auto !important;
  }

  video{
    max-height:250px !important;
  }

}

@media (max-width:768px){

  .letterPhone{
    max-width:100%;
    padding:15px;
    margin:0;
    margin-left: -10px;
  }
}

.card-top-text,
.card-bottom-text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: #ff8db3;
    font-family: 'Times New Roman', serif;
    z-index: 5;
}

.card-top-text{
    top: 28px;
    font-size: 25px;
    font-weight: 600;
}

.card-bottom-text{
    bottom: -1px;
    font-size: 25px;
    opacity: 0.9;
}

@media (max-width:768px){

  .message-box{
    width: 160px;   /* tetap kecil, jangan melebar */
    right: 100px;
    top: 120px;
    gap: 6px;
  }

  .birthday-card{
    width: 100%;
    height: 85px;   /* tetap ramping */
    border-radius: 12px;
  }

  .card-preview{
    padding-top: 6px;
  }

  .card-preview > h3{
    font-size: 20px;  /* diperjelas tanpa bikin lebar */
  }

  .tapBtn{
    font-size: 9px;
    min-width: 70px;
    bottom: 20px;
    padding: 3px 6px;
  }

}

  .tape{
    width: 35px;
    height: 7px;
  }

@media (max-width:768px){

  /* ===== YOUR ANSWER (judul) ===== */
  .answerTitle{
    font-size: 26px !important;
    font-weight: 800;
    color: #886028;
    margin-top: 22px;
    margin-bottom: 12px;
  }

  /* ===== TARGET TEXT ===== */
  #hint{
    font-size: 20px !important;
    font-weight: 800;
    color: #b09168;
    opacity: 1 !important;
    margin-top: 18px;
  }

  /* ===== teks hasil jawaban biar lebih gede juga ===== */
  #assembledText{
    font-size: 28px !important;
    letter-spacing: 2px;
  }
}