/* ================= TÙY CHỈNH CHUNG ================= */
/* Trái tim lấp lánh thay cho chuột bình thường */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, #1a001a, #030005); 
    font-family: 'Arial', sans-serif; overflow-x: hidden; color: white;
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHRleHQgeT0iMjQiIGZvbnQtc2l6ZT0iMjQiPvCfkpY8L3RleHQ+PC9zdmc+"), auto;
}

/* Giữ hiệu ứng Ngôi sao sáng (✨) khi trỏ chuột vào ảnh/nút bấm để tạo cảm giác tương tác */
button, .photo-card, #music-player, .gift-wrapper, #universe-screen, .close-btn {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHRleHQgeT0iMjQiIGZvbnQtc2l6ZT0iMjQiPuKchjwvdGV4dD48L3N2Zz4="), pointer !important;
}

.screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: transparent; display: none; opacity: 0; 
    transition: opacity 1s ease-in-out; z-index: 10; overflow-y: auto;
    /* Phủ trái tim lên toàn màn hình để không bị mất khi ra nền */
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHRleHQgeT0iMjQiIGZvbnQtc2l6ZT0iMjQiPvCfkpY8L3RleHQ+PC9zdmc+"), auto;
}
.screen.active { display: flex; opacity: 1; flex-direction: column; justify-content: center; align-items: center; z-index: 20; }
.particle-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#heart-container { z-index: 25; }
#flower-container { z-index: 99998; }

/* BỤI TIÊN THEO TAY (MAGIC DUST) */
.magic-dust { position: fixed; pointer-events: none; z-index: 999999; text-shadow: 0 0 10px #ff1493; animation: dustAnim 0.8s ease-out forwards; }
@keyframes dustAnim { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.2) translateY(30px); opacity: 0; } }

/* MƯA HOA RƠI Ở ALBUM */
.falling-petal { position: fixed; top: -10vh; z-index: 15; pointer-events: none; animation: fallPetal linear forwards; }
@keyframes fallPetal { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(360deg) translateX(100px); opacity: 0; } }

/* ================= ĐĨA THAN ================= */
#music-player { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: repeating-radial-gradient(#111, #111 4px, #333 5px, #333 6px); border: 2px solid #ff1493; border-radius: 50%; display: none; z-index: 99999; animation: spin 3s linear infinite; animation-play-state: paused; box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); transition: transform 0.3s; }
#music-player:hover { transform: scale(1.1); }
#music-player::after { content: '🎵'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; background: #0b0c10; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 8px; color: #ff1493; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ================= CẢNH 1: LOADING ================= */
#start-btn { padding: 15px 40px; font-size: 1.2em; background: transparent; color: #ffb3c6; border: 2px solid #ff1493; border-radius: 8px; text-transform: uppercase; letter-spacing: 3px; animation: pulse 2s infinite; z-index: 50; }
#loading-container { display: none; width: 80%; max-width: 400px; text-align: center; z-index: 50; margin-top: 50px; }
#loading-text { color: #ffb3c6; font-size: 1.2em; margin-bottom: 15px; letter-spacing: 1px; }
.loading-bar { width: 100%; height: 10px; background: #1a001a; border-radius: 5px; overflow: hidden; border: 1px solid #ff1493;}
.loading-progress { width: 0%; height: 100%; background: linear-gradient(90deg, #ff1493, #ffb3c6); box-shadow: 0 0 15px #ff1493; transition: width 0.1s linear; }
.floating-heart { position: absolute; bottom: -50px; pointer-events: none; animation: flyHeart var(--duration) linear forwards; opacity: 0.8; z-index: 30; }
@keyframes flyHeart { 0% { transform: translateY(0) translateX(0) scale(0.5) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-110vh) translateX(var(--drift)) scale(1.3) rotate(var(--rot)); opacity: 0; } }
#flying-ship { position: fixed; z-index: 100; pointer-events: none; display: flex; align-items: center; }
.exhaust-heart { position: absolute; font-size: 2rem; animation: exhaustAnim 1s linear forwards; }
@keyframes exhaustAnim { 0% { transform: translateX(0) scale(0.3) rotate(0deg); opacity: 1; } 30% { opacity: 1; } 100% { transform: translateX(-350px) scale(1.8) rotate(180deg); opacity: 0; } }

/* ================= CẢNH 2: HỘP QUÀ ================= */
.gift-wrapper { position: relative; animation: shake 2s infinite ease-in-out; z-index: 50; }
.gift-wrapper:hover { animation: none; transform: scale(1.05); }
.gift-box-css { position: relative; width: 140px; height: 120px; }
.gift-body { position: absolute; bottom: 0; left: 10px; width: 120px; height: 95px; background-color: #ffb52a; border-radius: 0 0 8px 8px; box-shadow: inset -15px 0 rgba(0,0,0,0.1); }
.gift-body::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 25px; height: 100%; background-color: #e53935; }
.gift-lid { position: absolute; top: 0; left: 0; width: 140px; height: 30px; background-color: #ffb52a; border-radius: 6px; box-shadow: 0 5px 0 rgba(0,0,0,0.1), inset -15px 0 rgba(0,0,0,0.1); z-index: 2; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: bottom left; }
.gift-lid::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 25px; height: 100%; background-color: #e53935; }
.gift-bow { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 70px; height: 25px; z-index: 3; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.gift-bow::before, .gift-bow::after { content: ''; position: absolute; width: 35px; height: 25px; background-color: transparent; border: 5px solid #e53935; border-radius: 50%; }
.gift-bow::before { left: -15px; transform: rotate(-20deg); }
.gift-bow::after { right: -15px; transform: rotate(20deg); }
.gift-box-css.open .gift-lid, .gift-box-css.open .gift-bow { transform: translateY(-80px) rotate(-25deg) scale(1.1); opacity: 0; }
@keyframes shake { 0%, 100% { transform: rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); } 20%, 40%, 60%, 80% { transform: rotate(8deg); } }
.instruction { margin-top: 30px; font-size: 1.2rem; color: #ffb3c6; animation: pulse 1.5s infinite; z-index: 50; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.flower { position: fixed !important; font-size: 2.5rem; pointer-events: none; z-index: 99999 !important; animation: flyOut 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes flyOut { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(var(--scale-end)) rotate(var(--rot)); opacity: 0; } }

/* ================= CẢNH 2.5: GHI ÂM SÓNG ÂM ================= */
.voice-waves { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 30px; height: 80px; z-index: 50; }
.wave { width: 10px; height: 15px; background-color: #ff1493; border-radius: 5px; animation: soundWave 1s infinite ease-in-out; }
.wave:nth-child(2) { animation-delay: 0.2s; } .wave:nth-child(3) { animation-delay: 0.4s; }
.wave:nth-child(4) { animation-delay: 0.1s; } .wave:nth-child(5) { animation-delay: 0.3s; }
@keyframes soundWave { 0%, 100% { height: 15px; background-color: #ffb3c6; } 50% { height: 70px; background-color: #ff1493; box-shadow: 0 0 15px #ff1493; } }
#voice-text { font-size: 1.5rem; color: #ffb3c6; text-shadow: 0 0 15px #ff1493; font-style: italic; text-align: center; padding: 0 20px; z-index: 50; min-height: 40px;}
.typing-cursor::after { content: '|'; animation: blinkCursor 0.7s infinite; }
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ================= CẢNH 3: VŨ TRỤ ================= */
canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; }
.center-core { position: absolute; top: calc(50% - 150px); left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; z-index: 15; animation: pulseCore 1.5s infinite alternate ease-in-out; pointer-events: none; filter: drop-shadow(0 0 15px #ff1493) drop-shadow(0 0 30px #ff00ff); }
.center-core img, .asteroid-heart img { width: 100%; height: 100%; object-fit: cover; background-color: #ffb3c6; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); mask-size: 100% 100%; mask-position: center; mask-repeat: no-repeat; }
@keyframes pulseCore { 0% { transform: translate(-50%, -50%) scale(0.95); filter: drop-shadow(0 0 15px #ff1493); } 100% { transform: translate(-50%, -50%) scale(1.05); filter: drop-shadow(0 0 35px #ff1493) drop-shadow(0 0 50px #ff00ff); } }
#orbit-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.orbit-img { position: absolute; border-radius: 12px; border: 3px solid #ffffff; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 20, 147, 0.4); object-fit: cover; background-color: #ffb3c6; transform-origin: center center; will-change: transform, left, top; }
.floating-texts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: none; }
.float-text { position: absolute; color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; font-weight: bold; text-shadow: 0 0 10px #ff1493, 0 0 20px #ff00ff; animation: floatAnim 4s infinite alternate ease-in-out; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 15px; }
@keyframes floatAnim { 0% { transform: translateY(0px) scale(0.9); } 100% { transform: translateY(-20px) scale(1.1); } }
.asteroid-heart { width: 100px; height: 100px; filter: drop-shadow(0 0 10px #ffb3c6) drop-shadow(0 0 20px #ff1493); animation: heartbeatAsteroid 2s infinite alternate ease-in-out; }
@keyframes heartbeatAsteroid { 0% { transform: scale(0.95); } 100% { transform: scale(1.05); } }
.hint-text { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); font-size: 1rem; font-style: italic; pointer-events: none; z-index: 10; animation: pulse 2s infinite; display: none; text-shadow: 0 0 5px #ff1493; text-align: center; width: 100%; }

/* ================= CẢNH 4: THƯ VIỆN & BỘ ĐẾM GIỜ ================= */
#gallery-screen { justify-content: flex-start; padding: 50px 20px; }
#gallery-screen h1 { color: #ffb3c6; font-size: 2.2rem; margin-bottom: 30px; text-shadow: 0 0 15px #ff1493; text-align: center; z-index: 20;}

#love-counter { display: flex; gap: 15px; justify-content: center; margin-bottom: 50px; z-index: 20; position: relative; flex-wrap: wrap;}
.time-box { background: rgba(255, 20, 147, 0.2); border: 1px solid #ff1493; border-radius: 10px; padding: 10px 20px; text-align: center; backdrop-filter: blur(5px); box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); min-width: 60px;}
.time-box span { display: block; font-size: 2.2rem; font-weight: bold; color: #fff; text-shadow: 0 0 15px #ff1493; font-family: 'Courier New', Courier, monospace;}
.time-box p { margin: 5px 0 0; font-size: 0.9rem; color: #ffb3c6; text-transform: uppercase; font-weight: bold;}

.timeline { display: flex; flex-direction: column; gap: 70px; align-items: center; padding-bottom: 100px; width: 100%; z-index: 20;}

/* HIỆU ỨNG TƯƠNG TÁC 3D CHO ẢNH */
.photo-card { 
    background: white; padding: 15px 15px 25px 15px; border-radius: 8px; 
    box-shadow: 0 15px 35px rgba(255, 20, 147, 0.2); width: 90%; max-width: 400px; color: black; 
    opacity: 0; transform: translateY(100px) rotate(calc(var(--tilt) * 1deg)); 
    transform-style: preserve-3d;
    transition: opacity 0.8s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-out; 
}
.photo-card.show { opacity: 1; transform: perspective(1000px) translateY(0) rotate(calc(var(--tilt) * 1deg)); }
.photo-card:hover { z-index: 30; box-shadow: 0 25px 45px rgba(255, 20, 147, 0.7); }
.photo-card img { width: 100%; height: auto; border-radius: 4px; display: block; background-color: #eee; min-height: 200px; pointer-events: none;}
.caption { margin-top: 15px; font-size: 1.1rem; color: #333; font-family: 'Comic Sans MS', cursive, sans-serif; font-weight: bold; pointer-events: none;}
.date { font-size: 0.9rem; color: #888; margin-top: 5px; pointer-events: none;}

.bg-floating-img { position: fixed; bottom: -150px; width: 130px; height: auto; border-radius: 10px; border: 2px solid rgba(255, 179, 198, 0.3); box-shadow: 0 0 20px rgba(255, 20, 147, 0.2); pointer-events: none; z-index: 2; opacity: 0.3; animation: floatUpBg var(--duration) linear forwards; object-fit: cover; }
@keyframes floatUpBg { 0% { transform: translateY(0) rotate(var(--rot-start)) scale(var(--scale)); opacity: 0; } 10% { opacity: 0.3; } 90% { opacity: 0.3; } 100% { transform: translateY(-120vh) rotate(var(--rot-end)) scale(var(--scale)); opacity: 0; } }

/* ================= LIGHTBOX PHÓNG TO ẢNH ================= */
.lightbox { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.9); display: none; justify-content: center; 
    align-items: center; flex-direction: column; z-index: 9999999; 
    opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(5px); 
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHRleHQgeT0iMjQiIGZvbnQtc2l6ZT0iMjQiPuKchjwvdGV4dD48L3N2Zz4="), pointer !important;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img { max-width: 90%; max-height: 70vh; border-radius: 10px; box-shadow: 0 0 30px #ff1493; border: 3px solid #ffb3c6; object-fit: contain; }
#lightbox-caption { color: #ffb3c6; margin-top: 20px; font-size: 1.8rem; text-shadow: 0 0 15px #ff1493; text-align: center; font-family: 'Comic Sans MS', cursive, sans-serif; font-weight: bold; padding: 0 20px;}
.close-btn { position: absolute; top: 20px; right: 30px; font-size: 50px; color: #ffb3c6; text-shadow: 0 0 10px #ff1493; }
.close-btn:hover { color: white; transform: scale(1.1); }