@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: Arial, sans-serif;
}
canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#opening {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Nền đặc hoàn toàn để che cảnh 3D cho đến khi mở thư. */
    background: radial-gradient(circle at center, #3d092c 0%, #17000f 48%, #000 100%);
    color: white;
    transition: opacity 1.5s ease;
    overflow: hidden;
    isolation: isolate;
}

#openingDecorations {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.opening-decoration {
    position: absolute;
    color: #ff9dcc;
    font-family: Itim, serif;
    font-weight: 700;
    text-shadow: 0 0 10px #ff4da6, 0 0 28px #ff178b;
    opacity: 0;
    will-change: transform, opacity;
    animation: romanticFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes romanticFloat {
    0% { transform: translate3d(0, 22px, 0) scale(.82) rotate(-10deg); opacity: 0; }
    18% { opacity: .62; }
    52% { opacity: .28; }
    78% { opacity: .68; }
    100% { transform: translate3d(var(--drift), -54px, 0) scale(1.16) rotate(12deg); opacity: 0; }
}

#opening > h1,
#opening > p,
#opening > button { position: relative; z-index: 1; }

#opening h1 {
    margin: 0;
    font-size: clamp(42px, 10vw, 80px);
    font-weight: 300;
    letter-spacing: 4px;
    color: #ffd9ec;
    text-shadow: 0 0 10px #ff4da6, 0 0 30px #ff178b, 0 0 70px #ff0077;
}

#opening p {
    margin-top: 15px;
    color: rgba(255,220,240,.7);
    font-size: 15px;
}

#openButton {
    margin-top: 100px;
    padding: 10px 34px;
    border-radius: 400px;
    border: 1px solid rgba(255,150,210,.6);
    background: rgba(255,40,140,.08);
    color: white;
    font-size: 58px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255,40,150,.2);
    transition: .3s;
}

#openButton:hover {
    transform: scale(1.08);
    background: rgba(255,40,150,.2);
    box-shadow: 0 0 35px rgba(255,40,150,.45);
}

#hint {
    position: fixed;
    bottom: 25px;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    color: rgba(255,220,240,.55);
    font-size: 13px;
    opacity: 0;
    transition: opacity 2s;
    pointer-events: none;
}

#hint.show { opacity: 1; }

/* Sao băng thuần HTML/CSS, nằm trên cảnh nhưng không chặn thao tác xoay. */
#meteorLayer {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    pointer-events: none;
}

.meteor {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--length);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(121, 199, 255, 0),
        rgba(138, 212, 255, .18) 22%,
        rgba(194, 237, 255, .66) 72%,
        rgba(255, 255, 255, 1)
    );
    filter: drop-shadow(0 0 5px rgba(101, 191, 255, .82));
    transform-origin: right center;
    will-change: transform, opacity;
    animation: meteorFly var(--duration) linear forwards;
}

.meteor::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #dff5ff 32%, #74c9ff 68%, transparent 72%);
    box-shadow: 0 0 12px 4px rgba(111, 203, 255, .46);
    transform: translateY(-50%);
}

@keyframes meteorFly {
    0% {
        opacity: 0;
        transform: translate3d(var(--from-x), var(--from-y), 0) rotate(var(--angle));
    }
    9% { opacity: var(--brightness); }
    72% { opacity: calc(var(--brightness) * .78); }
    100% {
        opacity: 0;
        transform: translate3d(var(--to-x), var(--to-y), 0) rotate(var(--angle));
    }
}

@media (prefers-reduced-motion: reduce) {
    .meteor { animation-duration: 5s; }
}

#caption {
    position: fixed;
    bottom: 55px;
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    pointer-events: none;
    color: #ffd8eb;
    font-size: clamp(16px, 3vw, 25px);
    text-shadow: 0 0 10px #ff54a8, 0 0 30px #ff0080;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 2s, transform 2s;
}

#caption.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   INTERACTIVE P / V MEMORY NOTE
   ========================================================= */
#memoryOverlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility .55s ease;overflow:hidden}
#memoryOverlay.active{opacity:1;visibility:visible;pointer-events:auto}
#memoryBackdrop{position:absolute;inset:0;background:rgba(5,0,10,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#memoryPhotos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* =========================================================
   MEMORY PHOTOS — VIỀN ẢNH PHÁT SÁNG + ĐUÔI SAO CHỔI
   ========================================================= */
.memory-photo-wrap{
    position:absolute;
    left:50%;
    bottom:-55px;
    width:var(--photo-size,150px);
    height:var(--photo-size,150px);
    transform:translate3d(calc(-50% + var(--photo-x,0px)),0,0)
              rotate(var(--photo-rotate,0deg))
              scale(.82);
    opacity:0;
    animation:memoryPhotoRise var(--photo-duration,28s) linear forwards;
    will-change:transform,opacity;
    pointer-events:none;
    z-index:20;
}

/* Chỉ viền ảnh phát sáng; bản thân ảnh giữ màu tự nhiên. */
.memory-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    padding:7px;
    box-sizing:border-box;
    background:#fff;
    border-radius:7px;
    border:2px solid rgba(255,255,255,.98);
    box-shadow:
        0 0 5px var(--glow1),
        0 0 11px var(--glow1),
        0 0 19px var(--glow2);
    opacity:1;
    filter:none;
    animation:memoryPhotoBorderGlow 2.8s ease-in-out infinite alternate;
}

/*
   Đuôi sao chổi:
   Các tia là con của wrapper nên luôn đi cùng ảnh.
   Không có animation dịch chuyển riêng — chỉ nhấp nháy/co giãn.
*/
.memory-trail-spark{
    position:absolute;
    z-index:-1;
    left:50%;
    top:100%;
    width:var(--spark-width,2px);
    height:var(--spark-height,26px);
    border-radius:999px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,1) 0%,
        var(--spark-color) 16%,
        color-mix(in srgb,var(--spark-color) 60%,transparent) 50%,
        transparent 100%
    );
    box-shadow:
        0 0 3px rgba(255,255,255,.95),
        0 0 7px var(--spark-color),
        0 0 12px color-mix(in srgb,var(--spark-color) 60%,transparent);
    transform:
        translateX(var(--spark-x,0px))
        rotate(var(--spark-r,0deg))
        scaleY(var(--spark-scale,1));
    transform-origin:top center;
    opacity:var(--spark-opacity,.65);
    filter:blur(var(--spark-blur,.4px));
    pointer-events:none;
    animation:memoryCometTwinkle var(--spark-twinkle,1.5s) ease-in-out infinite alternate;
}

/* Đuôi ngắn: sáng và dày ở gốc, mảnh/mờ dần về cuối. */
.memory-trail-spark:nth-child(1){
    top:99%;
    --spark-width:2.4px;
    --spark-height:10px;
    --spark-opacity:.95;
    --spark-blur:.15px;
}
.memory-trail-spark:nth-child(2){
    top:101%;
    --spark-width:2.1px;
    --spark-height:11px;
    --spark-opacity:.84;
    --spark-blur:.25px;
}
.memory-trail-spark:nth-child(3){
    top:103%;
    --spark-width:1.9px;
    --spark-height:12px;
    --spark-opacity:.76;
    --spark-blur:.3px;
}
.memory-trail-spark:nth-child(4){
    top:105%;
    --spark-width:1.7px;
    --spark-height:13px;
    --spark-opacity:.67;
    --spark-blur:.4px;
}
.memory-trail-spark:nth-child(5){
    top:107%;
    --spark-width:1.45px;
    --spark-height:15px;
    --spark-opacity:.56;
    --spark-blur:.5px;
}
.memory-trail-spark:nth-child(6){
    top:109%;
    --spark-width:1.2px;
    --spark-height:14px;
    --spark-opacity:.43;
    --spark-blur:.65px;
}
.memory-trail-spark:nth-child(7){
    top:111%;
    --spark-width:1px;
    --spark-height:12px;
    --spark-opacity:.30;
    --spark-blur:.8px;
}

@keyframes memoryCometTwinkle{
    0%,100%{
        opacity:calc(var(--spark-opacity,.65) * .40);
        transform:
            translateX(var(--spark-x,0px))
            rotate(var(--spark-r,0deg))
            scaleY(.72);
    }
    45%{
        opacity:var(--spark-opacity,.65);
        transform:
            translateX(var(--spark-x,0px))
            rotate(var(--spark-r,0deg))
            scaleY(1.06);
    }
    72%{
        opacity:calc(var(--spark-opacity,.65) * .76);
        transform:
            translateX(var(--spark-x,0px))
            rotate(var(--spark-r,0deg))
            scaleY(.9);
    }
}

@keyframes memoryPhotoBorderGlow{
    from{
        box-shadow:
            0 0 4px var(--glow1),
            0 0 9px var(--glow1),
            0 0 15px var(--glow2);
    }
    to{
        box-shadow:
            0 0 7px var(--glow1),
            0 0 14px var(--glow1),
            0 0 22px var(--glow2);
    }
}

@keyframes memoryPhotoRise{
    0%{
        opacity:0;
        transform:translate3d(calc(-50% + var(--photo-x,0px)),8vh,0)
                   rotate(var(--photo-rotate,0deg))
                   scale(.82);
    }

    3%{
        opacity:1;
    }

    94%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate3d(calc(-50% + var(--photo-x,0px)),-122vh,0)
                   rotate(var(--photo-rotate,0deg))
                   scale(.82);
    }
}

#memoryNote{
position:relative;
z-index:2;
width:min(420px,88vw);
max-height:min(78vh,720px);
overflow:auto;
padding:26px 24px 22px;
background:
radial-gradient(ellipse at 0% 0%,rgba(150,90,30,.28),transparent 32%),
radial-gradient(ellipse at 100% 0%,rgba(160,100,35,.30),transparent 30%),
radial-gradient(ellipse at 0% 100%,rgba(130,75,25,.32),transparent 34%),
radial-gradient(ellipse at 100% 100%,rgba(145,85,25,.30),transparent 34%),
radial-gradient(ellipse at 50% 100%,rgba(170,105,35,.16),transparent 35%),
linear-gradient(rgba(255,248,220,.96),rgba(250,238,200,.97));

background-blend-mode:multiply;
color:#4a2438;
border:2px solid rgba(60, 36, 21 ,0.8);
border-radius:15px 15px 15px 15px;

box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 45px rgba(255,100,180,.18);
transform:translateY(35px) rotate(-2.2deg) scale(.88);
opacity:0;
transition:transform 1.7s cubic-bezier(.2,.9,.2,1),opacity 1.25s ease
}
#memoryOverlay.active #memoryNote{transform:translateY(0) rotate(-.5deg) scale(1);opacity:1}
#memoryNote::before,#memoryNote::after{content:"";position:absolute;width: 100px;height:21px;background:rgba(255,182,193,.62);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#memoryNote::before{top:10px;left:-22px;transform:rotate(-8deg)}
#memoryNote::after{right:-22px;bottom:12px;transform:rotate(9deg)}
#memoryNoteClose{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;border:0;border-radius:50%;background:rgba(120,40,80,.08);color:#7d4260;font-size:20px;cursor:pointer}
#memoryNoteImageWrap{display:none;margin:6px auto 20px;width:min(100%,200px)}
#memoryNoteImage{display:block;width:100%;max-height:250px;object-fit:cover;border-radius:10px;box-shadow:0 8px 22px rgba(70,20,45,.18)}
#memoryNoteTitle{margin:5px 34px 18px 0;font-family:Pacifico,"Dancing Script",Itim,serif;text-align: center;font-size:28px;line-height:1.15;color:#8d315d}
#memoryNoteText{min-height:125px;margin:0;white-space:pre-wrap;font-family:"Dancing Script","Segoe Print","Comic Sans MS",cursive;font-size:17px;line-height:1.8}
#memoryNoteText::after{content:"▋";display:inline-block;margin-left:2px;animation:caretBlink 0.8s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
#memoryNoteSignature{margin-top:20px;text-align:right;font-family:Georgia,serif;font-style:italic;color:#9a5274;opacity:0;transition:opacity .6s ease}
#memoryNoteSignature.show{opacity:1}
.pv-hit-hint{position:fixed;left:50%;bottom:28px;z-index:12;transform:translateX(-50%);color:rgba(255,220,240,.62);font-size:12px;pointer-events:none;opacity:0;transition:opacity 1s ease}
.pv-hit-hint.show{opacity:1}
@media(max-width:600px){#memoryOverlay{padding:14px}#memoryNote{padding:24px 19px 19px}#memoryNoteTitle{font-size:24px}#memoryNoteText{font-size:15px;line-height:1.7}}


/* =========================================================
   PASSWORD GATE — màn hình khóa đầu trang
   ========================================================= */
.password-gate{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,180,220,.22), transparent 34%),
        linear-gradient(145deg,#fff7fb 0%,#ffeef6 48%,#fff9fc 100%);
    opacity:1;
    visibility:visible;
    transition:opacity .65s ease,visibility .65s ease;
}
.password-gate.is-unlocked{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.password-card{
    position:relative;
    z-index:2;
    width:min(390px,calc(100vw - 36px));
    padding:40px 54px 22px;
    text-align:center;
    border:1px solid rgba(255,255,255,.95);
    border-radius:26px;
    background:rgba(255,255,255,.72);
    box-shadow:
        0 22px 70px rgba(214,112,157,.20),
        0 0 42px rgba(255,147,198,.16);
    backdrop-filter:blur(10px);
}
.password-ring{
    width:54px;
    height:54px;
    margin:-58px auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:500%;
    color:#f36da9;
    background:#fff;
    border:5px solid rgba(255,185,215,.72);
    box-shadow:0 0 18px rgba(255,123,179,.32);
    font-size:31px;
    line-height:1;
}
.password-card h1{
    margin:8px 0 5px;
    color:#bd4e7b;
    font-family:itim,"Times New Roman",serif;
    font-size:28px;
    line-height:1.15;
}
.password-subtitle{
    margin:0 0 18px;
    color:#a56b83;
    font-size:103px;
}
.password-badge{
    margin:40px auto 18px;
    width:min(245px,100%);
    padding:11px 16px 10px;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#ff7aa9,#ff5f72);
    box-shadow:0 10px 24px rgba(255,95,125,.23);
    font-size:3px;
    font-family:itim,"Times New Roman",serif;
}
.password-badge span,
.password-badge strong,
.password-badge small{
    display:block;
}
.password-badge span{
    font-size:15px;
    letter-spacing:.7px;
    opacity:.96;
}
.password-badge strong{
    margin:2px 0 2px;
    font-size:15px;
    letter-spacing:.7px;
}
.password-badge small{
    font-size:11px;
    opacity:.94;
}
.password-digits{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:0 auto 17px;
}
.password-digit{
    width:50px;
    padding:4px 3px;
    border-radius:9px;
    background:rgba(255,255,255,.94);
    border:1px solid #e8dfe4;
    box-shadow:0 5px 14px rgba(110,70,90,.10);
}
.password-digit button{
    display:block;
    width:100%;
    height:22px;
    padding:0;
    border:0;
    border-radius:5px;
    color:#4773d5;
    font-family: Itim, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    background:#f5f6fa;
    font-size:11px;
    cursor:pointer;
    transition:background .15s,transform .1s;
}
.password-digit button:hover{
    background:#e8edff;
}
.password-digit button:active{
    transform:scale(.9);
}
.password-digit output{
    display:flex;
    align-items:center;
    justify-content:center;
    height:38px;
    margin:3px 0;
    border:2px solid #5b85ec;
    border-radius:10px;
    color:#084ef1;
    background:#fff;
    font-family:itim,sans-serif;
    font-size:25px;
    font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(123,155,234,.16);
}
.password-unlock{
    min-width:180px;
    padding:12px 22px;
    border:0;
    border-radius:999px;
    color:#2600ff;
    background:linear-gradient(135deg,#ff729d,#ff5f70);
    box-shadow:0 9px 22px rgba(255,100,125,.25);
    font-weight:700; font-family:itim,sans-serif;
    font-size:15px;
    cursor:pointer;
    transition:transform .15s,box-shadow .15s;
}
.password-unlock:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(255,100,125,.31);
}
.password-unlock:active{
    transform:scale(.97);
}
.password-message{
    min-height:18px;
    margin:9px 0 0;
    color:#e85b78;
    font-size:12px;
    font-weight:600;
}
.password-hint{
    margin:6px 0 0;
    color:#bd9baa;
    font-size:10px;
}
.password-gate.is-wrong .password-card{
    animation:passwordShake .38s ease;
}
@keyframes passwordShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-7px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(3px)}
}
.password-hearts{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.password-hearts span{
    position:absolute;
    color:#ff82b4;
    opacity:.45;
    filter:blur(.1px);
    animation:passwordHeartFloat 5.5s ease-in-out infinite;
}
.password-hearts span:nth-child(1){left:8%;top:17%;font-size:17px;animation-delay:-1s}
.password-hearts span:nth-child(2){left:24%;top:7%;font-size:12px;animation-delay:-3s}
.password-hearts span:nth-child(3){right:19%;top:13%;font-size:21px;animation-delay:-2s}
.password-hearts span:nth-child(4){right:8%;top:38%;font-size:15px;animation-delay:-4s}
.password-hearts span:nth-child(5){left:12%;bottom:22%;font-size:20px;animation-delay:-2.5s}
.password-hearts span:nth-child(6){right:14%;bottom:14%;font-size:13px;animation-delay:-4.5s}
@keyframes passwordHeartFloat{
    0%,100%{transform:translateY(5px) rotate(-5deg);opacity:.25}
    50%{transform:translateY(-12px) rotate(6deg);opacity:.62}
}
@media(max-width:480px){
    .password-card{padding:27px 17px 20px}
    .password-card h1{font-size:22px}
    .password-digit{width:47px}
}
@media(prefers-reduced-motion:reduce){
    .password-hearts span,
    .password-gate.is-wrong .password-card{animation:none}
}

/* Câu đếm ngày trên trang chính */
#loveDaysText{
    display:block;
    max-width:720px;
    margin:0 auto;
    line-height:1.65;
    text-align:center;
    font-family: "Patrick Hand", "Pacifico", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.6;
   color: #fff3a8;
   white-space: pre-line
}