💖 Happy Birthday My Beautiful Wife 💖

🎂

✨💖✨

Preparing something magical for you...

\n 💖💗💝💖💗\n

\n 🧸\n 🐰\n 🐱\n 🐼\n

\n\n\n\n\n\n\n

\n\n\n\n\n

\n \n

🧸

🐰

🦋

💝

🐱

☁️

🎀

🍫

\n\n

\n \n

🤵

💕

😊

🍫

🍰

\n 🍬\n 🍓\n 🫐\n 🍒\n

\n 🧁\n 🍫\n 🍩\n 🍪\n 🎂\n

👰

💖

\n\n

\n \n \n

\n 🧸\n 🐰\n 🍫\n 🐱\n 🐼\n

↓

\n\n\n

\n \n

📖 Our Love Story

Every chapter with you is my favorite

🐻

💫 Day One

🌸

The Day We Met

The universe conspired to bring us together, and my heart knew — you were the one I'd been dreaming of.

🐰

💫 First Smile

😊

When You Smiled

Your smile lit up my entire world. That moment, I knew I'd spend forever trying to make you smile like that.

🧸

💫 Our Adventures

🗺️

Every Adventure Together

From silly late-night talks to spontaneous adventures — every moment with you became a beautiful memory.

🐱

💫 Forever Promise

💍

Choosing You, Always

In every universe, in every timeline, in every lifetime — I would always find my way back to you.

🐼

💫 Today & Forever

🎂

Your Special Day

Today we celebrate the most wonderful person in the world — you. Happy Birthday, my everything! 💖

🧁

\n\n\n

\n \n

💝 Reasons I Love You

A million reasons, here are just a few

💕

✨

Your laugh is my favorite sound in the entire universe

🌟

The way you make even ordinary days feel magical

💫

Your kindness that touches everyone around you

🌙

How beautiful you look when you're just being yourself

⭐

Your strength that inspires me every single day

🔮

The way you love — deeply, fiercely, completely

🌈

Your eyes that hold entire galaxies inside them

💎

Because you chose me, and I'd choose you a million times over

\n\n\n

\n \n

🎮 Birthday Game World

Play games and unlock surprises!

🕹️

\n\n \n

\n \n \n \n \n \n \n \n \n \n \n

\n\n \n

\n \n

Score: 0

Time: 20s

Combo: x1

💖

Catch falling hearts & chocolates!

\n \n

\n\n \n

Moves: 0

Pairs: 0/8

\n \n

\n\n \n

Question 1/5

\n \n

\n\n \n

▼

1000 Kisses 💋

Movie Night 🎬

Choco Date 🍫

Long Hug 🤗

Princess Day 👑

Dance Night 💃

Breakfast Bed 🥞

Star Gazing 🌟

\n \n

\n\n \n

🎂

\n \n \n \n \n \n \n \n \n \n \n

\n \n

\n\n \n

Tap a gift to reveal a love surprise! 🎁

🎁

\n\n \n

Love Power Meter

❤️

\n \n

\n\n \n

Score: 0

🏃‍♀️

💋

Collect kisses, dodge broken hearts!

\n \n

Tap/Click to jump!

\n\n \n

Arrange the tiles to reveal the secret message! 💝

\n\n \n

Find all 6 hidden hearts on this page! Click around to discover them! 🗺️

Hearts found: 0/6

💡 Hint 1: Check near the love story section title

💡 Hint 2: Look at the photo gallery corners

💡 Hint 3: The love letter hides a secret

💡 Hint 4: One is near the game tabs

💡 Hint 5: Float around the reasons section

💡 Hint 6: The finale has the last one

\n\n \n

\n \n

\n\n\n

\n \n

📸 Our Moments

Polaroids from our love story

📷

🌅

Our sunsets together

🌸

Spring walks & laughter

🌙

Stargazing nights

☕

Morning coffee dates

🎄

Holiday magic

💃

Dancing with you

\n\n\n

\n \n

💌 A Love Letter For You

Words from my heart to yours

\n 💌\n

Tap to open

💌

My Dearest Love,

From the very first moment I saw you,

I knew my life would never be the same.

You are my sunrise and my starlight,

my calm in every storm,

my reason to believe in magic.

Every laugh we share, every tear you trust me with,

every quiet moment side by side —

these are the treasures of my life.

Happy Birthday, my love.

I'd choose you in every lifetime. ❤️

Forever Yours 💕

\n \n

♫

Our Song 🎵

\n\n\n

\n 🧸\n 💖\n 🐰\n

\"No matter how many birthdays pass,
my heart will always belong to you ❤️\"

You are the most extraordinary person I've ever known. Every day with you is a gift I never take for granted. You make the world more beautiful just by being in it.

Forever & Always Yours 💕

\n \n \n \n

\n 🧸🐰🐱🐼🦋💝\n

\n\n\n

💖

\n\n\n

\n\n\n\n\n\n\n","label",[18],"pulls","branches","forks","envVars",{"_181":26,"_183":26},"connections",{"_181":26,"_182":26},"count","unfilledCount","emptyCount",{"_33":226,"_13":227,"_66":228,"_43":-5,"_35":36,"_167":118,"_168":95,"_37":229,"_39":75,"_68":21,"_170":230,"_69":24,"_172":-5,"_196":231,"_17":232},{"_33":218,"_13":219,"_66":220,"_43":-5,"_35":36,"_167":221,"_168":95,"_37":222,"_39":40,"_68":21,"_170":223,"_69":24,"_172":-5,"_196":224,"_17":225},{"_33":166,"_13":18,"_66":67,"_43":-5,"_35":36,"_167":75,"_168":95,"_37":215,"_39":40,"_68":21,"_170":171,"_69":24,"_172":-5,"_196":216,"_17":217},{"_33":208,"_13":209,"_66":93,"_43":-5,"_35":36,"_167":204,"_168":95,"_37":210,"_39":40,"_68":211,"_170":212,"_69":24,"_172":-5,"_196":213,"_17":214},{"_33":199,"_13":200,"_66":201,"_43":-5,"_35":36,"_167":202,"_168":95,"_37":203,"_39":204,"_68":21,"_170":205,"_69":24,"_172":-5,"_196":206,"_17":207},{"_33":190,"_13":191,"_66":192,"_43":-5,"_35":36,"_167":193,"_168":95,"_37":194,"_39":40,"_68":21,"_170":195,"_69":24,"_172":-5,"_196":197,"_17":198},"7b9920aa-59ec-11f1-8a51-ee650bb23af1","styles.css","019e6a53-d1ce-71ae-9d97-f84624d005a1",4,["D",1779900764587],"/* ============ CSS VARIABLES & THEME ============ */\n:root {\n --pink: #FFB6C1;\n --blush: #FFC0CB;\n --rose: #FF69B4;\n --lavender: #E6E6FA;\n --peach: #FFDAB9;\n --cream: #FFF8DC;\n --baby-blue: #B0E0E6;\n --gold: #FFD700;\n --soft-gold: #F0E68C;\n --choco: #8B4513;\n --choco-light: #D2691E;\n --choco-cream: #F5DEB3;\n --bg: #FFF0F5;\n --bg2: #FFF5EE;\n --text: #5D3A3A;\n --text-light: #8B6969;\n --glass-bg: rgba(255,255,255,0.35);\n --glass-border: rgba(255,255,255,0.5);\n --glow: rgba(255,105,180,0.4);\n --shadow: rgba(139,69,19,0.15);\n}\n\nbody.dark-mode {\n --bg: #1a1028;\n --bg2: #231338;\n --text: #F8D7E8;\n --text-light: #D4A8C4;\n --glass-bg: rgba(40,20,60,0.5);\n --glass-border: rgba(255,182,193,0.2);\n --glow: rgba(255,105,180,0.5);\n --shadow: rgba(0,0,0,0.3);\n}\n\n/* ============ RESET & BASE ============ */\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\nhtml { scroll-behavior:smooth; overflow-x:hidden; }\n\nbody {\n font-family: 'Quicksand', sans-serif;\n background: var(--bg);\n color: var(--text);\n overflow-x: hidden;\n cursor: url(\"data:image/svg+xml,\") 12 12, auto;\n}\n\n.section {\n min-height: 100vh;\n position: relative;\n padding: 4rem 1.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n/* ============ LOADER ============ */\n.loader {\n position: fixed; inset:0; z-index:10000;\n background: linear-gradient(135deg, #FFF0F5, #FFF5EE, #E6E6FA);\n display: flex; align-items:center; justify-content:center;\n transition: opacity 0.8s, visibility 0.8s;\n}\n.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }\n.loader-content { text-align:center; }\n.loader-cake { font-size:4rem; animation: cakeDance 1s ease-in-out infinite; }\n.cake-emoji { display:inline-block; animation: bounce 0.6s ease-in-out infinite alternate; }\n.cake-sparkles { font-size:1.5rem; margin-top:0.3rem; animation: sparkle 1s ease-in-out infinite; }\n\n@keyframes cakeDance {\n 0%,100% { transform: rotate(-5deg) scale(1); }\n 50% { transform: rotate(5deg) scale(1.1); }\n}\n@keyframes bounce {\n from { transform: translateY(0); }\n to { transform: translateY(-10px); }\n}\n@keyframes sparkle {\n 0%,100% { opacity:1; transform:scale(1); }\n 50% { opacity:0.5; transform:scale(0.9); }\n}\n\n.loader-text {\n font-family: 'Dancing Script', cursive;\n font-size: 1.4rem; color: var(--rose);\n margin: 1rem 0; animation: fadeInUp 1s ease;\n}\n.loader-hearts { font-size:1.5rem; margin:0.5rem 0; }\n.loader-hearts span {\n display:inline-block; animation: heartFloat 1.5s ease-in-out infinite;\n}\n.loader-hearts span:nth-child(2) { animation-delay:0.2s; }\n.loader-hearts span:nth-child(3) { animation-delay:0.4s; }\n.loader-hearts span:nth-child(4) { animation-delay:0.6s; }\n.loader-hearts span:nth-child(5) { animation-delay:0.8s; }\n@keyframes heartFloat {\n 0%,100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-12px) scale(1.2); }\n}\n.loader-bar {\n width:200px; height:6px; background:rgba(255,182,193,0.3);\n border-radius:3px; margin:1rem auto; overflow:hidden;\n}\n.loader-bar-fill {\n height:100%; width:0; background: linear-gradient(90deg,var(--rose),var(--gold));\n border-radius:3px; animation: loadFill 2.5s ease-in-out forwards;\n}\n@keyframes loadFill { to { width:100%; } }\n.loader-chars { margin-top:0.8rem; font-size:1.8rem; }\n.loader-chars .lc {\n display:inline-block; margin:0 0.3rem;\n animation: charBounce 0.8s ease-in-out infinite alternate;\n}\n.loader-chars .lc:nth-child(2) { animation-delay:0.15s; }\n.loader-chars .lc:nth-child(3) { animation-delay:0.3s; }\n.loader-chars .lc:nth-child(4) { animation-delay:0.45s; }\n@keyframes charBounce {\n from { transform: translateY(0) rotate(0deg); }\n to { transform: translateY(-8px) rotate(10deg); }\n}\n\n/* ============ BUTTONS ============ */\n.music-btn, .theme-btn {\n position:fixed; z-index:1000; width:48px; height:48px;\n border-radius:50%; border:2px solid var(--glass-border);\n background: var(--glass-bg); backdrop-filter:blur(10px);\n font-size:1.3rem; cursor:pointer; transition: all 0.3s;\n box-shadow: 0 4px 15px var(--shadow);\n}\n.music-btn { top:1rem; right:1rem; }\n.theme-btn { top:1rem; right:4.5rem; }\n.music-btn:hover, .theme-btn:hover { transform:scale(1.15) rotate(15deg); }\n\n/* ============ CURSOR CANVAS ============ */\n.cursor-canvas {\n position:fixed; inset:0; z-index:9999; pointer-events:none;\n}\n\n/* ============ SIDE NAV ============ */\n.side-nav {\n position:fixed; right:1rem; top:50%; transform:translateY(-50%);\n z-index:900; display:flex; flex-direction:column; gap:0.6rem;\n}\n.nav-dot {\n width:36px; height:36px; border-radius:50%;\n background: var(--glass-bg); backdrop-filter:blur(8px);\n border:2px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center;\n font-size:0.9rem; text-decoration:none;\n transition: all 0.3s; box-shadow: 0 2px 8px var(--shadow);\n}\n.nav-dot:hover, .nav-dot.active {\n transform:scale(1.2); background:var(--rose);\n box-shadow: 0 0 15px var(--glow);\n}\n@media(max-width:768px) {\n .side-nav { right:0.3rem; gap:0.4rem; }\n .nav-dot { width:28px; height:28px; font-size:0.7rem; }\n}\n\n/* ============ GLASS CARD ============ */\n.glass-card {\n background: var(--glass-bg);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n box-shadow: 0 8px 32px var(--shadow);\n padding: 1.5rem;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n.glass-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 40px var(--shadow), 0 0 20px var(--glow);\n}\n\n/* ============ GLOW BUTTON ============ */\n.glow-btn {\n background: linear-gradient(135deg, var(--rose), #FF1493, var(--gold));\n color: white; border:none; padding:0.9rem 2rem;\n border-radius:50px; font-family:'Quicksand',sans-serif;\n font-size:1.1rem; font-weight:700; cursor:pointer;\n position:relative; overflow:hidden;\n box-shadow: 0 4px 20px var(--glow);\n transition: all 0.3s; display:inline-flex; align-items:center; gap:0.5rem;\n}\n.glow-btn:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 30px var(--glow);\n}\n.glow-btn:active { transform:scale(0.97); }\n.btn-sparkle { animation: sparkle 1.5s infinite; }\n\n/* ============ SECTION HEADERS ============ */\n.section-header { text-align:center; margin-bottom:2.5rem; position:relative; }\n.section-title {\n font-family:'Dancing Script',cursive; font-size:2.8rem;\n background: linear-gradient(135deg, var(--rose), var(--choco-light), var(--gold));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text; margin-bottom:0.5rem;\n}\n.section-sub {\n font-size:1.1rem; color:var(--text-light);\n font-family:'Caveat',cursive; font-size:1.3rem;\n}\n.title-mascot {\n font-size:2rem; animation: bounce 1s infinite alternate;\n margin-top:0.3rem;\n}\n\n/* ============ CHOCOLATE DRIP DIVIDER ============ */\n.section-divider.choco-drip {\n position:absolute; top:-30px; left:0; right:0; z-index:2;\n line-height:0;\n}\n.section-divider svg { width:100%; height:60px; }\n\n/* ============ HERO ============ */\n.hero {\n background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a2040 60%, #1a0a2e 100%);\n overflow:hidden; padding:0; min-height:100vh;\n}\n.hero-canvas { position:absolute; inset:0; z-index:1; }\n.hero-overlay {\n position:absolute; inset:0; z-index:2;\n background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);\n}\n\n/* Floating characters */\n.float-char {\n position:absolute; z-index:3; font-size:2rem;\n animation: floatAround 6s ease-in-out infinite;\n opacity:0.7; pointer-events:none;\n}\n.fc1 { top:10%; left:5%; animation-delay:0s; }\n.fc2 { top:20%; right:8%; animation-delay:1s; font-size:2.5rem; }\n.fc3 { top:60%; left:8%; animation-delay:2s; }\n.fc4 { top:70%; right:12%; animation-delay:0.5s; }\n.fc5 { top:40%; left:3%; animation-delay:1.5s; }\n.fc6 { top:15%; left:50%; animation-delay:3s; font-size:3rem; }\n.fc7 { top:80%; left:20%; animation-delay:2.5s; }\n.fc8 { top:50%; right:5%; animation-delay:1.8s; }\n\n@keyframes floatAround {\n 0%,100% { transform: translate(0,0) rotate(0deg); }\n 25% { transform: translate(10px,-15px) rotate(5deg); }\n 50% { transform: translate(-5px,-25px) rotate(-3deg); }\n 75% { transform: translate(8px,-10px) rotate(4deg); }\n}\n\n.hero-content {\n position:relative; z-index:5; text-align:center;\n padding: 2rem; max-width:800px;\n}\n\n/* COUPLE + CAKE */\n.hero-couple {\n display:flex; align-items:flex-end; justify-content:center;\n gap:1rem; margin-bottom:1.5rem;\n}\n.chibi { position:relative; }\n.chibi-body { font-size:4rem; animation: chibibounce 2s ease-in-out infinite; }\n.chibi-heart-float {\n position:absolute; top:-20px; left:50%; transform:translateX(-50%);\n font-size:1.2rem; animation: heartRise 2s ease-in-out infinite;\n}\n@keyframes chibibounce {\n 0%,100% { transform:translateY(0); }\n 50% { transform:translateY(-8px); }\n}\n@keyframes heartRise {\n 0% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }\n 100% { opacity:0; transform:translateX(-50%) translateY(-30px) scale(0.5); }\n}\n\n/* CAKE */\n.hero-cake-wrap { position:relative; margin:0 1rem; }\n.cake-main { position:relative; font-size:5rem; z-index:2; }\n.cake-drip {\n position:absolute; top:-10px; left:50%; transform:translateX(-50%);\n width:80px; height:30px; background:var(--choco);\n border-radius:0 0 40% 40%; z-index:1;\n animation: dripAnim 3s ease-in-out infinite;\n}\n@keyframes dripAnim {\n 0%,100% { height:20px; } 50% { height:35px; }\n}\n.cake-face {\n position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);\n font-size:2rem; animation: faceWiggle 3s ease-in-out infinite;\n}\n@keyframes faceWiggle {\n 0%,100% { transform:translate(-50%,-50%) rotate(0); }\n 25% { transform:translate(-50%,-50%) rotate(-3deg); }\n 75% { transform:translate(-50%,-50%) rotate(3deg); }\n}\n.cake-candle {\n position:absolute; top:-25px; width:6px; height:20px;\n background: linear-gradient(to bottom, #FFD700, #FF69B4);\n border-radius:3px;\n}\n.cake-candle.c1 { left:30%; } .cake-candle.c2 { left:50%; } .cake-candle.c3 { left:70%; }\n.flame {\n position:absolute; top:-12px; left:50%; transform:translateX(-50%);\n width:10px; height:14px; background: radial-gradient(#FFF,#FFD700,#FF6B35);\n border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;\n animation: flicker 0.3s ease-in-out infinite alternate;\n}\n@keyframes flicker {\n from { transform:translateX(-50%) scale(1) rotate(-3deg); opacity:1; }\n to { transform:translateX(-50%) scale(1.1) rotate(3deg); opacity:0.8; }\n}\n.cake-layer { display:none; }\n.cake-sprinkles {\n position:absolute; width:100%; top:-30px;\n}\n.cake-sprinkles span {\n position:absolute; font-size:0.8rem;\n animation: sprinkleFall 2s ease-in-out infinite;\n animation-delay: var(--d);\n left: calc(50% + var(--x));\n}\n@keyframes sprinkleFall {\n 0% { transform:translateY(-20px) rotate(0); opacity:0; }\n 50% { opacity:1; }\n 100% { transform:translateY(20px) rotate(360deg); opacity:0; }\n}\n.float-treats {\n position:absolute; width:200px; left:50%; top:-20px;\n transform:translateX(-50%);\n}\n.ft {\n position:absolute; font-size:1.5rem;\n animation: treatFloat 4s ease-in-out infinite;\n}\n.ft1 { left:-40px; animation-delay:0s; }\n.ft2 { left:-60px; top:20px; animation-delay:0.8s; }\n.ft3 { right:-40px; animation-delay:1.6s; }\n.ft4 { right:-60px; top:20px; animation-delay:0.4s; }\n.ft5 { left:0; top:-30px; animation-delay:1.2s; }\n@keyframes treatFloat {\n 0%,100% { transform:translateY(0) rotate(0); opacity:0.8; }\n 50% { transform:translateY(-20px) rotate(15deg); opacity:1; }\n}\n\n.hero-title {\n font-family:'Dancing Script',cursive; font-size:3rem; color:#FFD700;\n text-shadow: 0 0 30px rgba(255,215,0,0.5), 0 0 60px rgba(255,105,180,0.3);\n min-height:3.5rem; margin-bottom:0.5rem;\n}\n.hero-subtitle {\n font-family:'Caveat',cursive; font-size:1.4rem; color:#FFB6C1;\n min-height:2rem; margin-bottom:1.5rem;\n}\n.hero-btn { font-size:1.2rem; padding:1rem 2.5rem; }\n.hero-mascots {\n display:flex; justify-content:center; gap:1rem;\n margin-top:1.5rem;\n}\n.hero-mascots .hm {\n font-size:2rem; display:inline-block;\n animation: mascotWave 2s ease-in-out infinite;\n cursor:pointer; transition: transform 0.3s;\n}\n.hm:hover { transform:scale(1.4) rotate(15deg) !important; }\n.hm:nth-child(2) { animation-delay:0.3s; }\n.hm:nth-child(3) { animation-delay:0.6s; }\n.hm:nth-child(4) { animation-delay:0.9s; }\n.hm:nth-child(5) { animation-delay:1.2s; }\n@keyframes mascotWave {\n 0%,100% { transform:translateY(0) rotate(0); }\n 50% { transform:translateY(-6px) rotate(8deg); }\n}\n\n.scroll-indicator {\n position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);\n z-index:5; animation: scrollBounce 2s infinite;\n}\n.scroll-indicator span { color:white; font-size:2rem; }\n@keyframes scrollBounce {\n 0%,100% { transform:translateX(-50%) translateY(0); }\n 50% { transform:translateX(-50%) translateY(10px); }\n}\n\n/* ============ TIMELINE ============ */\n.timeline-section {\n background: linear-gradient(180deg, var(--bg), var(--cream), var(--bg2));\n padding-top:5rem;\n}\n.timeline-container {\n position:relative; max-width:800px; width:100%;\n padding:2rem 0;\n}\n.timeline-line {\n position:absolute; left:50%; top:0; bottom:0; width:3px;\n background: linear-gradient(to bottom, var(--rose), var(--gold), var(--rose));\n transform:translateX(-50%); border-radius:3px;\n}\n.timeline-card {\n position:relative; width:45%; padding:1rem;\n opacity:0; transform:translateY(30px);\n transition: all 0.8s cubic-bezier(0.4,0,0.2,1);\n}\n.timeline-card.visible { opacity:1; transform:translateY(0); }\n.timeline-card[data-anim=\"left\"] { margin-right:auto; text-align:right; }\n.timeline-card[data-anim=\"right\"] { margin-left:auto; text-align:left; }\n.tl-card-inner { position:relative; }\n.tl-date {\n font-family:'Caveat',cursive; font-size:1rem; color:var(--rose);\n margin-bottom:0.3rem;\n}\n.tl-icon { font-size:2rem; margin-bottom:0.5rem; }\n.tl-card-inner h3 {\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n color:var(--choco-light); margin-bottom:0.5rem;\n}\n.tl-card-inner p { font-size:0.95rem; line-height:1.6; }\n.tl-mascot {\n position:absolute; bottom:-10px; right:-10px;\n font-size:1.5rem; animation: bounce 1.5s infinite alternate;\n}\n\n@media(max-width:768px) {\n .timeline-line { left:20px; }\n .timeline-card { width:calc(100% - 50px); margin-left:50px !important; text-align:left !important; }\n}\n\n/* ============ REASONS ============ */\n.reasons-section {\n background: linear-gradient(180deg, var(--bg2), var(--lavender), var(--bg));\n padding-top:5rem;\n}\n.reasons-grid {\n display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));\n gap:1.5rem; max-width:1000px; width:100%;\n}\n.reason-card {\n text-align:center; padding:2rem 1.5rem; position:relative;\n overflow:hidden; cursor:pointer;\n opacity:0; transform:translateY(20px) scale(0.95);\n transition: all 0.6s ease;\n}\n.reason-card.visible { opacity:1; transform:translateY(0) scale(1); }\n.reason-card:hover { transform:translateY(-8px) scale(1.03) !important; }\n.reason-icon { font-size:2.5rem; margin-bottom:0.8rem; }\n.reason-card p { font-size:1rem; line-height:1.6; }\n.reason-card::after {\n content: attr(data-mascot);\n position:absolute; bottom:5px; right:10px;\n font-size:1.3rem; opacity:0.6;\n transition: all 0.3s;\n}\n.reason-card:hover::after { opacity:1; transform:scale(1.3) rotate(10deg); }\n\n/* ============ GAMES SECTION ============ */\n.games-section {\n background: linear-gradient(180deg, var(--bg), var(--peach), var(--cream), var(--bg2));\n padding-top:5rem;\n}\n.game-tabs {\n display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem;\n margin-bottom:2rem; max-width:900px;\n}\n.game-tab {\n padding:0.6rem 1.2rem; border-radius:25px;\n border:2px solid var(--glass-border);\n background:var(--glass-bg); backdrop-filter:blur(8px);\n font-family:'Quicksand',sans-serif; font-size:0.85rem;\n font-weight:600; cursor:pointer; transition:all 0.3s;\n color:var(--text);\n}\n.game-tab:hover { transform:translateY(-2px); background:var(--pink); }\n.game-tab.active {\n background: linear-gradient(135deg, var(--rose), #FF1493);\n color:white; border-color:var(--rose);\n box-shadow: 0 4px 15px var(--glow);\n}\n.game-panels { width:100%; max-width:700px; }\n.game-panel { display:none; }\n.game-panel.active { display:block; animation: fadeInUp 0.5s ease; }\n.game-container { text-align:center; }\n.game-desc { font-family:'Caveat',cursive; font-size:1.2rem; margin-bottom:1rem; color:var(--text-light); }\n\n/* Game stats */\n.game-stats {\n display:flex; justify-content:center; gap:1.5rem; margin-bottom:1rem;\n}\n.game-score, .game-timer, .game-combo {\n padding:0.4rem 1rem; border-radius:15px;\n background:var(--glass-bg); backdrop-filter:blur(8px);\n border:1px solid var(--glass-border);\n font-weight:700; font-size:1rem;\n}\n\n/* Catch Hearts */\n.game-area, .runner-area {\n width:100%; height:350px; border-radius:20px;\n background: linear-gradient(180deg, rgba(255,182,193,0.15), rgba(255,218,185,0.15));\n border:2px solid var(--glass-border);\n position:relative; overflow:hidden;\n backdrop-filter:blur(5px);\n}\n.game-start-overlay {\n position:absolute; inset:0;\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n background:rgba(255,255,255,0.8); z-index:10;\n border-radius:20px;\n}\n.game-start-overlay.hidden { display:none; }\n.game-icon-big { font-size:4rem; margin-bottom:0.5rem; animation: bounce 1s infinite alternate; }\n.game-start-overlay p { font-family:'Caveat',cursive; font-size:1.2rem; margin-bottom:1rem; }\n.game-result {\n margin-top:1rem; font-family:'Dancing Script',cursive;\n font-size:1.3rem; color:var(--rose); min-height:2rem;\n}\n.game-result.show { animation: fadeInUp 0.5s ease; }\n\n.falling-item {\n position:absolute; font-size:1.8rem; cursor:pointer;\n animation: fallDown var(--speed, 3s) linear forwards;\n z-index:5; transition: transform 0.1s;\n user-select:none;\n}\n.falling-item:hover { transform:scale(1.3); }\n@keyframes fallDown {\n from { top:-40px; } to { top:360px; }\n}\n.catch-burst {\n position:absolute; font-size:0.9rem; pointer-events:none;\n animation: burstUp 0.6s ease forwards;\n}\n@keyframes burstUp {\n from { opacity:1; transform:scale(1); }\n to { opacity:0; transform:translateY(-30px) scale(1.5); }\n}\n\n/* Memory Match */\n.memory-grid {\n display:grid; grid-template-columns:repeat(4,1fr);\n gap:0.5rem; max-width:400px; margin:0 auto;\n}\n.memory-cell {\n aspect-ratio:1; border-radius:15px;\n background: linear-gradient(135deg, var(--rose), var(--pink));\n display:flex; align-items:center; justify-content:center;\n font-size:2rem; cursor:pointer;\n transition: all 0.4s; position:relative;\n box-shadow: 0 4px 12px var(--shadow);\n}\n.memory-cell .card-back { font-size:1.5rem; }\n.memory-cell .card-front {\n position:absolute; backface-visibility:hidden;\n opacity:0; transition: opacity 0.3s;\n}\n.memory-cell.flipped { background: var(--glass-bg); border:2px solid var(--gold); }\n.memory-cell.flipped .card-front { opacity:1; }\n.memory-cell.flipped .card-back { opacity:0; }\n.memory-cell.matched {\n background: linear-gradient(135deg, var(--gold), var(--soft-gold));\n animation: matchPop 0.5s ease;\n pointer-events:none;\n}\n@keyframes matchPop {\n 0% { transform:scale(1); } 50% { transform:scale(1.2) rotate(10deg); } 100% { transform:scale(1); }\n}\n\n/* Quiz */\n.quiz-card { max-width:500px; margin:0 auto; padding:2rem; }\n.quiz-progress { font-size:0.9rem; color:var(--text-light); margin-bottom:1rem; }\n.quiz-question {\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n margin-bottom:1.5rem; min-height:3rem;\n}\n.quiz-options { display:flex; flex-direction:column; gap:0.6rem; }\n.quiz-option {\n padding:0.8rem 1.2rem; border-radius:15px;\n border:2px solid var(--glass-border);\n background:var(--glass-bg); cursor:pointer;\n font-family:'Quicksand',sans-serif; font-size:1rem;\n transition: all 0.3s; text-align:left;\n}\n.quiz-option:hover { border-color:var(--rose); background:rgba(255,105,180,0.1); transform:translateX(5px); }\n.quiz-option.correct { background:rgba(0,200,100,0.2); border-color:#00C864; }\n.quiz-option.wrong { background:rgba(255,50,50,0.15); border-color:#FF3232; }\n.quiz-feedback {\n margin-top:1rem; font-size:1.2rem; min-height:2rem;\n font-family:'Caveat',cursive;\n}\n\n/* Spin Wheel */\n.wheel-container { display:flex; flex-direction:column; align-items:center; }\n.wheel-wrap { position:relative; margin-bottom:1.5rem; }\n.wheel-pointer {\n position:absolute; top:-15px; left:50%; transform:translateX(-50%);\n font-size:2rem; color:var(--rose); z-index:10;\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\n}\n.wheel {\n width:280px; height:280px; border-radius:50%;\n background: conic-gradient(\n #FFB6C1 0deg 45deg, #FFDAB9 45deg 90deg,\n #E6E6FA 90deg 135deg, #B0E0E6 135deg 180deg,\n #FFD700 180deg 225deg, #FFC0CB 225deg 270deg,\n #DDA0DD 270deg 315deg, #98FB98 315deg 360deg\n );\n border:4px solid var(--gold);\n box-shadow: 0 0 20px var(--glow), inset 0 0 20px rgba(255,255,255,0.3);\n transition: transform 4s cubic-bezier(0.17,0.67,0.12,0.99);\n position:relative;\n}\n.wheel-segment {\n position:absolute; width:50%; height:50%;\n display:flex; align-items:center; justify-content:center;\n font-size:0.55rem; font-weight:700; text-align:center;\n transform-origin: 100% 100%; padding:0.3rem;\n color:var(--text);\n}\n.ws1 { transform:rotate(-22.5deg) translateY(-50%); top:0; left:0; }\n.ws2 { transform:rotate(22.5deg) translateY(-50%); top:0; right:0; }\n.ws3 { transform:rotate(67.5deg); }\n.ws4 { transform:rotate(112.5deg); }\n.ws5 { transform:rotate(157.5deg); }\n.ws6 { transform:rotate(202.5deg); }\n.ws7 { transform:rotate(247.5deg); }\n.ws8 { transform:rotate(292.5deg); }\n.wheel-result {\n margin-top:1rem; padding:1rem 2rem;\n font-family:'Dancing Script',cursive; font-size:1.5rem;\n text-align:center; min-height:2rem;\n}\n\n/* Cake Decorator */\n.cake-decorator { display:flex; flex-direction:column; align-items:center; }\n.deco-cake {\n width:300px; height:250px; border-radius:20px;\n background: linear-gradient(180deg, rgba(139,69,19,0.15), rgba(210,105,30,0.1));\n border:2px dashed var(--choco-light);\n position:relative; margin-bottom:1rem;\n display:flex; align-items:center; justify-content:center;\n}\n.deco-cake-base { font-size:6rem; }\n.deco-items { position:absolute; inset:0; pointer-events:none; }\n.deco-placed {\n position:absolute; font-size:1.5rem;\n animation: placeItem 0.3s ease; cursor:grab;\n pointer-events:auto;\n}\n@keyframes placeItem { from { transform:scale(0); } to { transform:scale(1); } }\n.deco-palette {\n display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem;\n margin-bottom:1rem;\n}\n.deco-item-btn {\n width:45px; height:45px; border-radius:12px;\n border:2px solid var(--glass-border); background:var(--glass-bg);\n font-size:1.5rem; cursor:pointer; transition:all 0.3s;\n}\n.deco-item-btn:hover { transform:scale(1.2) rotate(10deg); border-color:var(--rose); }\n.deco-item-btn.selected { border-color:var(--gold); background:rgba(255,215,0,0.2); box-shadow:0 0 10px var(--gold); }\n\n/* Gift Box Game */\n.giftbox-grid {\n display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;\n max-width:400px; margin:0 auto;\n}\n.mystery-gift {\n aspect-ratio:1; border-radius:20px; cursor:pointer;\n display:flex; align-items:center; justify-content:center;\n transition: all 0.5s; position:relative;\n}\n.mg-box {\n font-size:3.5rem; transition: all 0.5s;\n animation: giftWiggle 2s ease-in-out infinite;\n}\n@keyframes giftWiggle {\n 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); }\n}\n.mystery-gift.opened .mg-box { transform:scale(0) rotate(180deg); opacity:0; }\n.mg-reveal {\n position:absolute; inset:0; display:flex; align-items:center;\n justify-content:center; flex-direction:column; text-align:center;\n opacity:0; transition: opacity 0.5s; padding:0.5rem;\n font-size:0.85rem; line-height:1.4;\n}\n.mystery-gift.opened .mg-reveal { opacity:1; }\n.mg-reveal-emoji { font-size:2rem; margin-bottom:0.3rem; }\n\n/* Love Meter */\n.lovemeter-wrap { display:flex; flex-direction:column; align-items:center; }\n.lovemeter-machine {\n background:var(--glass-bg); backdrop-filter:blur(12px);\n border:2px solid var(--glass-border); border-radius:30px;\n padding:2rem; width:200px; text-align:center;\n box-shadow: 0 8px 32px var(--shadow);\n}\n.lm-screen {\n background:rgba(0,0,0,0.1); border-radius:15px;\n padding:1rem; margin-bottom:0.5rem;\n}\n.lm-bar-wrap {\n width:100%; height:150px; background:rgba(255,255,255,0.2);\n border-radius:10px; position:relative; overflow:hidden;\n}\n.lm-bar {\n position:absolute; bottom:0; left:0; right:0;\n height:0%; border-radius:10px;\n background: linear-gradient(to top, var(--rose), #FF1493, var(--gold));\n transition: height 2s cubic-bezier(0.4,0,0.2,1);\n}\n.lm-value {\n font-family:'Dancing Script',cursive; font-size:2rem;\n color:var(--rose); margin-top:0.5rem;\n}\n.lm-label { font-weight:700; font-size:0.9rem; margin-top:0.5rem; }\n.lm-heart { font-size:2rem; margin-top:0.5rem; }\n.lm-result {\n margin-top:1rem; font-family:'Caveat',cursive;\n font-size:1.3rem; min-height:2rem;\n}\n\n/* Kiss Runner */\n.runner-area { position:relative; }\n.runner-player {\n position:absolute; bottom:20px; left:50px;\n font-size:2.5rem; z-index:5;\n transition: bottom 0.3s ease;\n}\n.runner-player.jump { bottom:150px; }\n.runner-item {\n position:absolute; bottom:20px; font-size:2rem;\n animation: runLeft var(--speed,3s) linear forwards;\n}\n@keyframes runLeft {\n from { right:-40px; } to { right:calc(100% + 40px); }\n}\n.runner-controls { font-family:'Caveat',cursive; font-size:1rem; color:var(--text-light); margin-top:0.5rem; }\n\n/* Puzzle */\n.puzzle-grid {\n display:grid; grid-template-columns:repeat(3,1fr);\n gap:4px; max-width:300px; margin:0 auto;\n}\n.puzzle-tile {\n aspect-ratio:1; border-radius:10px;\n background:var(--glass-bg); border:2px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center;\n font-size:1.5rem; cursor:pointer;\n transition: all 0.2s; font-weight:700;\n}\n.puzzle-tile:hover { background:rgba(255,105,180,0.2); }\n.puzzle-tile.empty { opacity:0; cursor:default; }\n\n/* Treasure Hunt */\n.treasure-heart {\n position:fixed; font-size:1.2rem; cursor:pointer;\n opacity:0.08; z-index:800; transition: all 0.5s;\n animation: treasurePulse 3s ease-in-out infinite;\n}\n.treasure-heart:hover { opacity:0.6; transform:scale(1.5); }\n.treasure-heart.found {\n opacity:1; transform:scale(2); animation: matchPop 0.5s ease;\n pointer-events:none;\n}\n@keyframes treasurePulse {\n 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); }\n}\n.th-pos1 { top:28%; left:12%; }\n.th-pos2 { top:55%; right:6%; }\n.th-pos3 { top:72%; left:8%; }\n.th-pos4 { top:42%; right:15%; }\n.th-pos5 { top:62%; left:45%; }\n.th-pos6 { top:88%; right:10%; }\n.treasure-status {\n font-weight:700; font-size:1.1rem; margin-bottom:1rem;\n padding:0.5rem 1.5rem; border-radius:15px;\n background:var(--glass-bg); border:1px solid var(--glass-border);\n}\n.treasure-hints { padding:1rem; font-size:0.9rem; }\n.th { margin:0.3rem 0; opacity:0.8; }\n\n/* HUG */\n.hug-wrap { margin-top:2rem; text-align:center; position:relative; }\n.hug-btn { font-size:1.1rem; }\n.hug-anim {\n position:absolute; inset:0; pointer-events:none;\n display:flex; align-items:center; justify-content:center;\n}\n.hug-emoji {\n font-size:3rem; position:absolute;\n animation: hugFloat 1.5s ease forwards;\n}\n@keyframes hugFloat {\n from { opacity:1; transform:scale(0.5) translateY(0); }\n to { opacity:0; transform:scale(1.5) translateY(-60px); }\n}\n\n/* ============ GALLERY ============ */\n.gallery-section {\n background: linear-gradient(180deg, var(--bg2), var(--cream), var(--lavender));\n padding-top:5rem;\n}\n.gallery-grid {\n display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));\n gap:1.5rem; max-width:900px; width:100%;\n}\n.polaroid {\n background:white; border-radius:8px; padding:0.8rem;\n box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n transform:rotate(var(--rot,0deg));\n transition: all 0.4s; cursor:pointer;\n opacity:0; animation: fadeInUp 0.6s ease forwards;\n}\n.polaroid:hover {\n transform:rotate(0deg) scale(1.08) translateY(-5px);\n box-shadow: 0 12px 30px rgba(255,105,180,0.3);\n}\n.polaroid-img {\n width:100%; aspect-ratio:1; border-radius:4px;\n background: linear-gradient(135deg, var(--pink), var(--lavender), var(--peach));\n display:flex; align-items:center; justify-content:center;\n}\n.polaroid-img span { font-size:4rem; }\n.polaroid-caption {\n text-align:center; margin-top:0.6rem;\n font-family:'Caveat',cursive; font-size:1rem; color:#5D3A3A;\n}\n\n/* ============ LOVE LETTER ============ */\n.letter-section {\n background: linear-gradient(180deg, var(--bg), var(--peach), var(--bg2));\n padding-top:5rem; position:relative; overflow:hidden;\n}\n.petal-canvas { position:absolute; inset:0; pointer-events:none; z-index:1; }\n.letter-container {\n position:relative; z-index:2; max-width:600px; width:100%;\n}\n.letter-envelope {\n width:200px; height:140px; margin:0 auto 2rem;\n cursor:pointer; position:relative; transition:all 0.5s;\n}\n.letter-envelope.opened { transform:scale(0.8); opacity:0; pointer-events:none; }\n.envelope-flap {\n position:absolute; top:0; left:0; right:0; height:50%;\n background: linear-gradient(135deg, #F5DEB3, #DEB887);\n clip-path: polygon(0 0, 50% 100%, 100% 0);\n z-index:2; transition: transform 0.5s;\n transform-origin: top center;\n}\n.letter-envelope:hover .envelope-flap { transform:rotateX(30deg); }\n.letter-envelope.opened .envelope-flap { transform:rotateX(180deg); }\n.envelope-body {\n position:absolute; inset:0;\n background: linear-gradient(180deg, #DEB887, #D2B48C);\n border-radius:5px; display:flex; flex-direction:column;\n align-items:center; justify-content:center;\n}\n.envelope-body span { font-size:2rem; }\n.envelope-body p { font-size:0.8rem; color:#8B6914; margin-top:0.3rem; }\n.letter-paper {\n opacity:0; transform:translateY(30px);\n transition: all 0.8s ease 0.3s;\n font-family:'Caveat',cursive;\n}\n.letter-paper.visible { opacity:1; transform:translateY(0); }\n.letter-wax {\n text-align:center; font-size:2rem; margin-bottom:0.5rem;\n}\n.letter-line {\n font-size:1.15rem; line-height:1.8; color:var(--text);\n opacity:0; transform:translateY(10px);\n transition: all 0.5s ease;\n}\n.letter-line.visible { opacity:1; transform:translateY(0); }\n.letter-sig {\n font-family:'Sacramento',cursive; font-size:1.8rem;\n color:var(--rose);\n}\n\n/* Music */\n.music-section {\n text-align:center; margin-top:2rem; position:relative; z-index:2;\n}\n.vinyl-record {\n width:100px; height:100px; border-radius:50%;\n background: radial-gradient(circle, #333 30%, #111 32%, #333 34%, #111 50%, #333 52%, #111 70%);\n margin:0 auto; display:flex; align-items:center; justify-content:center;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n transition: all 0.3s;\n}\n.vinyl-record.spinning { animation: spin 3s linear infinite; }\n@keyframes spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }\n.vinyl-label {\n width:30px; height:30px; border-radius:50%;\n background:var(--rose); display:flex; align-items:center;\n justify-content:center; font-size:1rem; color:white;\n}\n.music-caption { font-family:'Caveat',cursive; font-size:1rem; margin-top:0.5rem; color:var(--text-light); }\n\n/* ============ ENDING ============ */\n.ending-section {\n background: linear-gradient(180deg, #0a0520 0%, #1a0a3e 30%, #2d1050 60%, #0a0520 100%);\n color:white; overflow:hidden; position:relative;\n}\n.fireworks-canvas { position:absolute; inset:0; z-index:1; }\n.ending-content { position:relative; z-index:5; text-align:center; max-width:600px; }\n.lantern-sky {\n position:absolute; inset:0; z-index:2; pointer-events:none;\n}\n.lantern {\n position:absolute; width:30px; height:40px;\n background: radial-gradient(circle, #FFD700, #FF8C00);\n border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;\n box-shadow: 0 0 20px rgba(255,215,0,0.6);\n animation: lanternRise 8s ease-out forwards;\n opacity:0;\n}\n@keyframes lanternRise {\n 0% { opacity:0; transform:translateY(0); }\n 10% { opacity:0.9; }\n 100% { opacity:0; transform:translateY(-100vh) translateX(var(--drift,20px)); }\n}\n.ending-couple {\n display:flex; align-items:center; justify-content:center;\n gap:1rem; margin-bottom:1.5rem; font-size:3rem;\n}\n.ending-char { animation: chibibounce 2s ease-in-out infinite; }\n.char-right { animation-delay:0.5s; }\n.pulse-heart { animation: pulseHeart 1s ease-in-out infinite; }\n@keyframes pulseHeart {\n 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); }\n}\n.ending-title {\n font-family:'Dancing Script',cursive; font-size:2.5rem;\n color:#FFD700; text-shadow: 0 0 30px rgba(255,215,0,0.5);\n margin-bottom:1rem; min-height:3rem;\n}\n.ending-quote {\n font-family:'Caveat',cursive; font-size:1.3rem;\n color:#FFB6C1; margin-bottom:1.5rem; line-height:1.8;\n}\n.ending-message {\n background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);\n margin-bottom:1.5rem;\n}\n.ending-message p { color:#F8D7E8; line-height:1.7; }\n.gift-sig { font-family:'Sacramento',cursive; font-size:1.6rem; color:#FFD700; margin-top:0.5rem; }\n.ending-actions {\n display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;\n margin-bottom:1.5rem;\n}\n.ending-mascots { font-size:2rem; }\n.ending-mascots span {\n display:inline-block; margin:0 0.3rem;\n animation: mascotWave 2s ease-in-out infinite;\n}\n.ending-mascots span:nth-child(2) { animation-delay:0.3s; }\n.ending-mascots span:nth-child(3) { animation-delay:0.6s; }\n.ending-mascots span:nth-child(4) { animation-delay:0.9s; }\n.ending-mascots span:nth-child(5) { animation-delay:1.2s; }\n.ending-mascots span:nth-child(6) { animation-delay:1.5s; }\n\n/* ============ FLOATING QUOTE ============ */\n.floating-quote {\n position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);\n z-index:500; font-family:'Caveat',cursive; font-size:1.1rem;\n color:var(--rose); background:var(--glass-bg);\n backdrop-filter:blur(10px); border:1px solid var(--glass-border);\n padding:0.6rem 1.5rem; border-radius:25px;\n opacity:0; transition:all 0.5s; pointer-events:none;\n box-shadow: 0 4px 15px var(--shadow);\n}\n.floating-quote.visible { opacity:1; }\n\n/* ============ CONFETTI ============ */\n.confetti-container {\n position:fixed; inset:0; z-index:9998; pointer-events:none;\n}\n.confetti-piece {\n position:absolute; width:10px; height:10px;\n opacity:0.9; animation: confettiFall var(--dur,3s) ease-out forwards;\n}\n@keyframes confettiFall {\n 0% { transform:translateY(-20px) rotate(0) scale(1); opacity:1; }\n 100% { transform:translateY(100vh) rotate(var(--rot,720deg)) scale(0); opacity:0; }\n}\n\n/* ============ ANIMATIONS ============ */\n@keyframes fadeInUp {\n from { opacity:0; transform:translateY(30px); }\n to { opacity:1; transform:translateY(0); }\n}\n@keyframes fadeIn {\n from { opacity:0; } to { opacity:1; }\n}\n\n/* ============ RESPONSIVE ============ */\n@media(max-width:768px) {\n .section { padding:3rem 1rem; }\n .section-title { font-size:2rem; }\n .hero-title { font-size:2rem; }\n .hero-subtitle { font-size:1.1rem; }\n .hero-btn { font-size:1rem; padding:0.8rem 1.5rem; }\n .chibi-body { font-size:2.5rem; }\n .cake-main { font-size:3.5rem; }\n .game-tabs { gap:0.3rem; }\n .game-tab { font-size:0.75rem; padding:0.4rem 0.8rem; }\n .game-area, .runner-area { height:280px; }\n .reasons-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }\n .gallery-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }\n .memory-grid { max-width:300px; }\n .ending-title { font-size:1.8rem; }\n .ending-actions { flex-direction:column; align-items:center; }\n .float-char { font-size:1.5rem; }\n .hero-couple { gap:0.5rem; }\n}\n\n@media(max-width:480px) {\n .section-title { font-size:1.6rem; }\n .hero-title { font-size:1.6rem; }\n .gallery-grid { grid-template-columns:1fr; max-width:250px; }\n .giftbox-grid { grid-template-columns:repeat(2,1fr); }\n}\n\n/* ============ DARK MODE SPECIFICS ============ */\nbody.dark-mode .hero { background: linear-gradient(135deg, #0a0520, #1a0a3e, #2d1050, #0a0520); }\nbody.dark-mode .timeline-section { background: linear-gradient(180deg, var(--bg), #1e1035, var(--bg2)); }\nbody.dark-mode .reasons-section { background: linear-gradient(180deg, var(--bg2), #251545, var(--bg)); }\nbody.dark-mode .games-section { background: linear-gradient(180deg, var(--bg), #1e1035, #251545, var(--bg2)); }\nbody.dark-mode .gallery-section { background: linear-gradient(180deg, var(--bg2), #1e1035, #251545); }\nbody.dark-mode .letter-section { background: linear-gradient(180deg, var(--bg), #1e1035, var(--bg2)); }\nbody.dark-mode .polaroid { background:rgba(40,20,60,0.8); }\nbody.dark-mode .polaroid-caption { color:#F8D7E8; }\nbody.dark-mode .game-start-overlay { background:rgba(30,16,53,0.9); }\nbody.dark-mode .choco-drip svg path { fill: #3d1a00; }\n\n/* Scrollbar */\n::-webkit-scrollbar { width:8px; }\n::-webkit-scrollbar-track { background:var(--bg); }\n::-webkit-scrollbar-thumb {\n background: linear-gradient(var(--rose), var(--gold));\n border-radius:4px;\n}\n","children",[],[191],"2cb3554a-59ed-11f1-b077-ee650bb23af1","particles.txt","019e6a53-d1ce-71ae-9d97-f4d7c5dea9fc",10,["D",1779901061712],2,"// ============ HERO CANVAS - Stars & Particles ============\n(function() {\n var canvas = document.getElementById('heroCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var stars = [], shootingStars = [];\n var W, H;\n\n function resize() {\n W = canvas.width = canvas.parentElement.offsetWidth;\n H = canvas.height = canvas.parentElement.offsetHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n // Create stars\n for (var i = 0; i < 200; i++) {\n stars.push({\n x: Math.random() * 2000,\n y: Math.random() * 1200,\n r: Math.random() * 2 + 0.5,\n a: Math.random(),\n da: (Math.random() - 0.5) * 0.02,\n color: ['#FFD700','#FFB6C1','#E6E6FA','#FFFFFF','#B0E0E6'][Math.floor(Math.random() * 5)]\n });\n }\n\n function spawnShooting() {\n if (shootingStars.length < 3 && Math.random() < 0.01) {\n shootingStars.push({\n x: Math.random() * W * 0.7,\n y: Math.random() * H * 0.4,\n len: Math.random() * 60 + 40,\n speed: Math.random() * 4 + 3,\n life: 1\n });\n }\n }\n\n function drawStars() {\n ctx.clearRect(0, 0, W, H);\n // Stars\n for (var i = 0; i < stars.length; i++) {\n var s = stars[i];\n s.a += s.da;\n if (s.a > 1 || s.a < 0.2) s.da *= -1;\n ctx.beginPath();\n ctx.arc(s.x % W, s.y % H, s.r, 0, Math.PI * 2);\n ctx.fillStyle = s.color;\n ctx.globalAlpha = s.a;\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n\n // Shooting stars\n spawnShooting();\n for (var j = shootingStars.length - 1; j >= 0; j--) {\n var ss = shootingStars[j];\n ss.x += ss.speed;\n ss.y += ss.speed * 0.5;\n ss.life -= 0.015;\n if (ss.life <= 0) { shootingStars.splice(j, 1); continue; }\n ctx.beginPath();\n ctx.moveTo(ss.x, ss.y);\n ctx.lineTo(ss.x - ss.len, ss.y - ss.len * 0.5);\n var grad = ctx.createLinearGradient(ss.x, ss.y, ss.x - ss.len, ss.y - ss.len * 0.5);\n grad.addColorStop(0, 'rgba(255,215,0,' + ss.life + ')');\n grad.addColorStop(1, 'rgba(255,215,0,0)');\n ctx.strokeStyle = grad;\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n\n requestAnimationFrame(drawStars);\n }\n drawStars();\n})();\n\n// ============ CURSOR HEARTS ============\n(function() {\n var canvas = document.getElementById('cursorCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var hearts = [];\n var mouseX = 0, mouseY = 0;\n\n function resize() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n resize();\n window.addEventListener('resize', resize);\n\n document.addEventListener('mousemove', function(e) {\n mouseX = e.clientX;\n mouseY = e.clientY;\n if (Math.random() < 0.3) {\n hearts.push({\n x: mouseX + (Math.random() - 0.5) * 20,\n y: mouseY + (Math.random() - 0.5) * 20,\n size: Math.random() * 12 + 6,\n life: 1,\n vx: (Math.random() - 0.5) * 2,\n vy: -Math.random() * 2 - 1,\n color: ['#FFB6C1','#FF69B4','#FFD700','#FF1493','#E6E6FA'][Math.floor(Math.random() * 5)]\n });\n }\n });\n\n function drawHeart(cx, cy, size, color, alpha) {\n ctx.save();\n ctx.globalAlpha = alpha;\n ctx.fillStyle = color;\n ctx.beginPath();\n var topY = cy - size * 0.4;\n ctx.moveTo(cx, cy + size * 0.3);\n ctx.bezierCurveTo(cx - size * 0.5, cy, cx - size * 0.5, topY, cx, topY + size * 0.15);\n ctx.bezierCurveTo(cx + size * 0.5, topY, cx + size * 0.5, cy, cx, cy + size * 0.3);\n ctx.fill();\n ctx.restore();\n }\n\n function animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n for (var i = hearts.length - 1; i >= 0; i--) {\n var h = hearts[i];\n h.x += h.vx;\n h.y += h.vy;\n h.life -= 0.02;\n h.size *= 0.99;\n if (h.life <= 0) { hearts.splice(i, 1); continue; }\n drawHeart(h.x, h.y, h.size, h.color, h.life);\n }\n // Keep max 50 hearts\n if (hearts.length > 50) hearts.splice(0, hearts.length - 50);\n requestAnimationFrame(animate);\n }\n animate();\n})();\n\n// ============ PETAL RAIN (Letter Section) ============\n(function() {\n var canvas = document.getElementById('petalCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var petals = [];\n var running = false;\n\n function resize() {\n var parent = canvas.parentElement;\n canvas.width = parent.offsetWidth;\n canvas.height = parent.offsetHeight;\n }\n\n function createPetal() {\n return {\n x: Math.random() * canvas.width,\n y: -20,\n size: Math.random() * 10 + 5,\n speedY: Math.random() * 1.5 + 0.5,\n speedX: (Math.random() - 0.5) * 1,\n rotation: Math.random() * Math.PI * 2,\n rotSpeed: (Math.random() - 0.5) * 0.05,\n color: ['#FFB6C1','#FF69B4','#FFC0CB','#FFD700','#E6E6FA'][Math.floor(Math.random() * 5)],\n opacity: Math.random() * 0.5 + 0.3\n };\n }\n\n function drawPetal(p) {\n ctx.save();\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rotation);\n ctx.globalAlpha = p.opacity;\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.ellipse(0, 0, p.size * 0.4, p.size, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n\n function animate() {\n if (!running) return;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n if (petals.length < 30 && Math.random() < 0.1) {\n petals.push(createPetal());\n }\n for (var i = petals.length - 1; i >= 0; i--) {\n var p = petals[i];\n p.y += p.speedY;\n p.x += p.speedX;\n p.rotation += p.rotSpeed;\n if (p.y > canvas.height + 20) { petals.splice(i, 1); continue; }\n drawPetal(p);\n }\n requestAnimationFrame(animate);\n }\n\n // Start when letter section is visible\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && !running) {\n running = true;\n resize();\n animate();\n } else if (!entry.isIntersecting) {\n running = false;\n }\n });\n }, { threshold: 0.1 });\n\n var letterSection = document.getElementById('letter');\n if (letterSection) observer.observe(letterSection);\n window.addEventListener('resize', resize);\n})();\n\n// ============ FIREWORKS (Ending Section) ============\nvar fireworksActive = false;\nfunction launchFireworks() {\n var canvas = document.getElementById('fireworksCanvas');\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n var particles = [];\n\n function resize() {\n canvas.width = canvas.parentElement.offsetWidth;\n canvas.height = canvas.parentElement.offsetHeight;\n }\n resize();\n\n function createFirework(x, y) {\n var colors = ['#FFD700','#FF69B4','#FFB6C1','#E6E6FA','#FF1493','#00CED1','#FF6347'];\n var color = colors[Math.floor(Math.random() * colors.length)];\n for (var i = 0; i < 40; i++) {\n var angle = (Math.PI * 2 / 40) * i;\n var speed = Math.random() * 4 + 2;\n particles.push({\n x: x, y: y,\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n life: 1,\n color: color,\n size: Math.random() * 3 + 1\n });\n }\n }\n\n fireworksActive = true;\n var launchCount = 0;\n\n function animate() {\n if (!fireworksActive) { ctx.clearRect(0, 0, canvas.width, canvas.height); return; }\n ctx.fillStyle = 'rgba(0,0,0,0.1)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n if (Math.random() < 0.05 && launchCount < 15) {\n createFirework(\n Math.random() * canvas.width * 0.8 + canvas.width * 0.1,\n Math.random() * canvas.height * 0.5 + canvas.height * 0.1\n );\n launchCount++;\n }\n\n for (var i = particles.length - 1; i >= 0; i--) {\n var p = particles[i];\n p.x += p.vx;\n p.y += p.vy;\n p.vy += 0.05;\n p.life -= 0.015;\n if (p.life <= 0) { particles.splice(i, 1); continue; }\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fillStyle = p.color;\n ctx.globalAlpha = p.life;\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n\n if (launchCount >= 15 && particles.length === 0) {\n fireworksActive = false;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n return;\n }\n requestAnimationFrame(animate);\n }\n animate();\n}\n",[],[200],"ccb6b156-59eb-11f1-bdb4-ee650bb23af1","main.ts",["D",1779900471181],"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (path === \"/\" || path === \"\") {\n return serveFile(\"index.html\", import.meta.url);\n }\n if (path === \"/styles.css\") {\n return serveFile(\"styles.css\", import.meta.url);\n }\n if (path === \"/particles.js\") {\n const content = await readFile(\"particles.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n if (path === \"/app.js\") {\n const content = await readFile(\"app.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n if (path === \"/games.js\") {\n const content = await readFile(\"games.txt\", import.meta.url);\n return new Response(content, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" }\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n",[],[209],["D",1779900572557],[],[18],"1696cb0c-59ed-11f1-b588-ee650bb23af1","games.txt","b17e1f86-59ec-11f1-9aaf-ee650bb23af1",9,["D",1779901024602],"// ============ GAMES ENGINE ============\n\nfunction confettiBurst(count) {\n count = count || 40;\n var container = document.getElementById('confettiContainer');\n var colors = ['#FFB6C1','#FF69B4','#FFD700','#E6E6FA','#FFDAB9','#FF1493','#B0E0E6'];\n for (var i = 0; i < count; i++) {\n var piece = document.createElement('div');\n piece.className = 'confetti-piece';\n piece.style.left = Math.random() * 100 + '%';\n piece.style.top = '-10px';\n piece.style.background = colors[Math.floor(Math.random() * colors.length)];\n piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';\n piece.style.width = (Math.random() * 10 + 5) + 'px';\n piece.style.height = (Math.random() * 10 + 5) + 'px';\n piece.style.setProperty('--dur', (Math.random() * 2 + 2) + 's');\n piece.style.setProperty('--rot', (Math.random() * 1080 - 540) + 'deg');\n piece.style.animationDelay = Math.random() * 0.5 + 's';\n container.appendChild(piece);\n setTimeout(function(p){ return function(){ p.remove(); }; }(piece), 4500);\n }\n}\n\n// ============ 1. CATCH THE HEARTS ============\n(function() {\n var score = 0, combo = 1, timer = 20, timerInt = null, spawnInt = null, running = false;\n var area = document.getElementById('heartArea');\n var scoreEl = document.getElementById('heartScore');\n var timerEl = document.getElementById('heartTimer');\n var comboEl = document.getElementById('heartCombo');\n var overlay = document.getElementById('heartStartOverlay');\n var resultEl = document.getElementById('heartResult');\n var items = ['💖','💗','💝','❤️','🍫','🧁','💕','🍓','💋','✨'];\n var badItems = ['💔','🖤'];\n\n document.getElementById('heartStartBtn').addEventListener('click', startGame);\n\n function startGame() {\n score = 0; combo = 1; timer = 20; running = true;\n scoreEl.textContent = '0';\n timerEl.textContent = '20';\n comboEl.textContent = 'x1';\n resultEl.textContent = '';\n overlay.classList.add('hidden');\n var old = area.querySelectorAll('.falling-item');\n for (var j = 0; j < old.length; j++) old[j].remove();\n\n timerInt = setInterval(function() {\n timer--;\n timerEl.textContent = timer;\n if (timer <= 0) endGame();\n }, 1000);\n spawnInt = setInterval(spawnItem, 600);\n }\n\n function spawnItem() {\n if (!running) return;\n var isBad = Math.random() < 0.15;\n var pool = isBad ? badItems : items;\n var emoji = pool[Math.floor(Math.random() * pool.length)];\n var item = document.createElement('div');\n item.className = 'falling-item';\n item.textContent = emoji;\n item.setAttribute('data-bad', isBad ? '1' : '0');\n item.style.left = (Math.random() * 85 + 5) + '%';\n item.style.setProperty('--speed', (Math.random() * 1.5 + 2) + 's');\n item.addEventListener('click', function() { catchItem(item); });\n item.addEventListener('touchstart', function(e) { e.preventDefault(); catchItem(item); });\n area.appendChild(item);\n setTimeout(function(el) { return function() { if (el.parentNode) el.remove(); }; }(item), 4000);\n }\n\n function catchItem(item) {\n if (!running) return;\n var isBad = item.getAttribute('data-bad') === '1';\n var rect = item.getBoundingClientRect();\n var areaRect = area.getBoundingClientRect();\n if (isBad) {\n combo = 1;\n score = Math.max(0, score - 5);\n showBurst(rect.left - areaRect.left, rect.top - areaRect.top, '💔 -5', true);\n } else {\n var points = 10 * combo;\n score += points;\n combo = Math.min(combo + 1, 5);\n showBurst(rect.left - areaRect.left, rect.top - areaRect.top, '+' + points + ' ✨', false);\n }\n scoreEl.textContent = score;\n comboEl.textContent = 'x' + combo;\n item.remove();\n }\n\n function showBurst(x, y, text, bad) {\n var burst = document.createElement('div');\n burst.className = 'catch-burst';\n burst.textContent = text;\n burst.style.left = x + 'px';\n burst.style.top = y + 'px';\n burst.style.color = bad ? '#FF3232' : '#FF69B4';\n area.appendChild(burst);\n setTimeout(function() { burst.remove(); }, 700);\n }\n\n function endGame() {\n running = false;\n clearInterval(timerInt);\n clearInterval(spawnInt);\n var old = area.querySelectorAll('.falling-item');\n for (var j = 0; j < old.length; j++) old[j].remove();\n overlay.classList.remove('hidden');\n overlay.querySelector('p').textContent = 'Game Over! Tap to play again';\n document.getElementById('heartStartBtn').textContent = '🔄 Play Again!';\n var msg = '';\n if (score >= 200) msg = '🏆 AMAZING! You caught SO much love! ' + score + ' pts!';\n else if (score >= 100) msg = '💖 Wonderful! ' + score + ' hearts of love!';\n else msg = '✨ Sweet! ' + score + ' pts! Try again for more love!';\n resultEl.textContent = msg;\n if (score >= 100) confettiBurst(50);\n }\n})();\n\n// ============ 2. MEMORY MATCH ============\n(function() {\n var symbols = ['💖','💍','💋','🍫','🌹','💕','🧸','✨'];\n var cards = [], flipped = [], matched = 0, moves = 0, locked = false;\n var grid = document.getElementById('memoryGrid');\n var movesEl = document.getElementById('memoryMoves');\n var pairsEl = document.getElementById('memoryPairs');\n var resultEl = document.getElementById('memoryResult');\n\n function initGame() {\n var arr = symbols.concat(symbols);\n cards = arr.sort(function() { return Math.random() - 0.5; });\n flipped = []; matched = 0; moves = 0; locked = false;\n movesEl.textContent = '0';\n pairsEl.textContent = '0';\n resultEl.textContent = '';\n grid.innerHTML = '';\n for (var i = 0; i < cards.length; i++) {\n (function(idx) {\n var cell = document.createElement('div');\n cell.className = 'memory-cell';\n cell.setAttribute('data-index', idx);\n cell.setAttribute('data-symbol', cards[idx]);\n cell.innerHTML = '❓' + cards[idx] + '';\n cell.addEventListener('click', function() { flipCard(cell); });\n grid.appendChild(cell);\n })(i);\n }\n }\n\n function flipCard(cell) {\n if (locked || cell.classList.contains('flipped') || cell.classList.contains('matched')) return;\n cell.classList.add('flipped');\n flipped.push(cell);\n if (flipped.length === 2) {\n moves++;\n movesEl.textContent = moves;\n locked = true;\n if (flipped[0].getAttribute('data-symbol') === flipped[1].getAttribute('data-symbol')) {\n flipped[0].classList.add('matched');\n flipped[1].classList.add('matched');\n matched++;\n pairsEl.textContent = matched;\n flipped = [];\n locked = false;\n if (matched === symbols.length) {\n resultEl.textContent = '🎉 All love matched! ' + moves + ' moves! 💖';\n confettiBurst(60);\n }\n } else {\n setTimeout(function() {\n flipped[0].classList.remove('flipped');\n flipped[1].classList.remove('flipped');\n flipped = [];\n locked = false;\n }, 800);\n }\n }\n }\n\n document.getElementById('memoryRestart').addEventListener('click', initGame);\n initGame();\n})();\n\n// ============ 3. LOVE QUIZ ============\n(function() {\n var questions = [\n { q: \"What's the most romantic gift?\", opts: [\"A love letter 💌\",\"Chocolate 🍫\",\"A star named after her ⭐\",\"All of the above 💖\"], correct: 3 },\n { q: \"The best way to say 'I love you' is...\", opts: [\"Words 💬\",\"Actions 🤗\",\"Surprise dates 🌹\",\"Every way possible 💕\"], correct: 3 },\n { q: \"What makes a perfect date night?\", opts: [\"Fancy dinner 🍽️\",\"Movie cuddles 🎬\",\"Stargazing 🌙\",\"Being together 💝\"], correct: 3 },\n { q: \"How many times a day should you hug?\", opts: [\"3 times\",\"10 times\",\"100 times\",\"Never stop hugging 🤗\"], correct: 3 },\n { q: \"The secret ingredient of love is...\", opts: [\"Patience\",\"Laughter 😄\",\"Trust 🤝\",\"All of the above + magic ✨\"], correct: 3 }\n ];\n var currentQ = 0, score = 0, answered = false;\n var card = document.getElementById('quizCard');\n var progress = document.getElementById('quizProgress');\n var questionEl = document.getElementById('quizQuestion');\n var optionsEl = document.getElementById('quizOptions');\n var feedbackEl = document.getElementById('quizFeedback');\n var resultEl = document.getElementById('quizResult');\n var startBtn = document.getElementById('quizStart');\n card.style.display = 'none';\n\n startBtn.addEventListener('click', function() {\n currentQ = 0; score = 0; answered = false;\n resultEl.textContent = '';\n startBtn.style.display = 'none';\n card.style.display = 'block';\n showQuestion();\n });\n\n function showQuestion() {\n if (currentQ >= questions.length) { finishQuiz(); return; }\n answered = false;\n var q = questions[currentQ];\n progress.textContent = 'Question ' + (currentQ + 1) + '/' + questions.length;\n questionEl.textContent = q.q;\n feedbackEl.textContent = '';\n optionsEl.innerHTML = '';\n for (var i = 0; i < q.opts.length; i++) {\n (function(idx) {\n var btn = document.createElement('button');\n btn.className = 'quiz-option';\n btn.textContent = q.opts[idx];\n btn.addEventListener('click', function() { answer(idx, btn); });\n optionsEl.appendChild(btn);\n })(i);\n }\n }\n\n function answer(idx, btn) {\n if (answered) return;\n answered = true;\n var q = questions[currentQ];\n var allBtns = optionsEl.querySelectorAll('.quiz-option');\n if (idx === q.correct) {\n btn.classList.add('correct');\n score++;\n feedbackEl.textContent = '✅ Perfect! You know love so well! 💖';\n } else {\n btn.classList.add('wrong');\n allBtns[q.correct].classList.add('correct');\n feedbackEl.textContent = '💕 Close! Love is always the answer!';\n }\n setTimeout(function() { currentQ++; showQuestion(); }, 1500);\n }\n\n function finishQuiz() {\n card.style.display = 'none';\n startBtn.style.display = 'inline-flex';\n startBtn.textContent = '🔄 Play Again';\n var msg = score === questions.length\n ? '🏆 PERFECT SCORE! Love expert! ' + score + '/' + questions.length + ' 💖'\n : '💕 Amazing! ' + score + '/' + questions.length + ' correct!';\n resultEl.textContent = msg;\n if (score >= 4) confettiBurst(40);\n }\n})();\n\n// ============ 4. SPIN THE WHEEL ============\n(function() {\n var prizes = [\"1,000 Kisses 💋\",\"Movie Night 🎬\",\"Chocolate Date 🍫\",\"Long Hug 🤗\",\"Princess Treatment 👑\",\"Dance Tonight 💃\",\"Breakfast in Bed 🥞\",\"Star Gazing 🌟\"];\n var wheel = document.getElementById('loveWheel');\n var spinBtn = document.getElementById('spinBtn');\n var resultEl = document.getElementById('wheelResult');\n var spinning = false, currentRotation = 0;\n\n spinBtn.addEventListener('click', function() {\n if (spinning) return;\n spinning = true;\n resultEl.textContent = '';\n var extraSpins = 5 * 360;\n var randomAngle = Math.random() * 360;\n var totalRotation = currentRotation + extraSpins + randomAngle;\n wheel.style.transition = 'transform 4s cubic-bezier(0.17,0.67,0.12,0.99)';\n wheel.style.transform = 'rotate(' + totalRotation + 'deg)';\n currentRotation = totalRotation;\n setTimeout(function() {\n var norm = totalRotation % 360;\n var seg = 360 / prizes.length;\n var idx = Math.floor(((360 - norm + seg / 2) % 360) / seg);\n resultEl.innerHTML = '🎉 You won: ' + prizes[idx % prizes.length] + '!';\n confettiBurst(30);\n spinning = false;\n }, 4200);\n });\n})();\n\n// ============ 5. CAKE DECORATOR ============\n(function() {\n var cake = document.getElementById('decoCake');\n var itemsEl = document.getElementById('decoItems');\n var palette = document.getElementById('decoPalette');\n var clearBtn = document.getElementById('cakeClearBtn');\n var selectedItem = null;\n var btns = palette.querySelectorAll('.deco-item-btn');\n\n for (var i = 0; i < btns.length; i++) {\n (function(btn) {\n btn.addEventListener('click', function() {\n for (var j = 0; j < btns.length; j++) btns[j].classList.remove('selected');\n btn.classList.add('selected');\n selectedItem = btn.getAttribute('data-item');\n });\n })(btns[i]);\n }\n\n cake.addEventListener('click', function(e) {\n if (!selectedItem) return;\n var rect = cake.getBoundingClientRect();\n var x = e.clientX - rect.left;\n var y = e.clientY - rect.top;\n var placed = document.createElement('div');\n placed.className = 'deco-placed';\n placed.textContent = selectedItem;\n placed.style.left = x + 'px';\n placed.style.top = y + 'px';\n placed.style.transform = 'translate(-50%,-50%)';\n itemsEl.appendChild(placed);\n });\n\n clearBtn.addEventListener('click', function() {\n itemsEl.innerHTML = '';\n for (var j = 0; j < btns.length; j++) btns[j].classList.remove('selected');\n selectedItem = null;\n });\n})();\n\n// ============ 6. GIFT BOX SURPRISE ============\n(function() {\n var surprises = [\n { emoji: '💌', text: 'A love note: You make every day brighter!' },\n { emoji: '🌹', text: 'A virtual rose: Beautiful, just like you!' },\n { emoji: '💎', text: 'You are a rare gem in this world!' },\n { emoji: '🎵', text: 'Our love story is the sweetest melody!' },\n { emoji: '🌟', text: 'You are my guiding star, always!' },\n { emoji: '🍫', text: 'Life with you is sweeter than chocolate!' }\n ];\n var gifts = document.querySelectorAll('.mystery-gift');\n for (var i = 0; i < gifts.length; i++) {\n (function(gift, idx) {\n gift.addEventListener('click', function() {\n if (gift.classList.contains('opened')) return;\n gift.classList.add('opened');\n var s = surprises[idx];\n gift.querySelector('.mg-reveal').innerHTML = '

' + s.emoji + '

' + s.text + '

';\n confettiBurst(20);\n });\n })(gifts[i], i);\n }\n})();\n\n// ============ 7. LOVE METER ============\n(function() {\n var btn = document.getElementById('lmBtn');\n var bar = document.getElementById('lmBar');\n var value = document.getElementById('lmValue');\n var heart = document.getElementById('lmHeart');\n var result = document.getElementById('lmResult');\n var messages = [\n \"💥 LOVE OVERLOAD! The meter can't contain it!\",\n \"🌋 OFF THE CHARTS! Your love breaks all limits!\",\n \"🚀 INFINITE LOVE DETECTED! Beyond measurement!\",\n \"✨ MAXIMUM LOVE POWER ACHIEVED! Magical!\"\n ];\n\n btn.addEventListener('click', function() {\n bar.style.height = '0%';\n value.textContent = '0%';\n result.textContent = '';\n heart.style.transform = 'scale(1)';\n var progress = 0;\n var iv = setInterval(function() {\n progress += Math.random() * 8 + 2;\n if (progress >= 100) {\n progress = 100;\n clearInterval(iv);\n setTimeout(function() {\n bar.style.height = '120%';\n value.textContent = '∞%';\n heart.style.transform = 'scale(1.8)';\n heart.style.transition = 'transform 0.5s';\n result.textContent = messages[Math.floor(Math.random() * messages.length)];\n confettiBurst(50);\n }, 500);\n }\n bar.style.height = progress + '%';\n value.textContent = Math.floor(progress) + '%';\n heart.style.transform = 'scale(' + (1 + progress / 200) + ')';\n }, 80);\n });\n})();\n\n// ============ 8. KISS RUNNER ============\n(function() {\n var score = 0, running = false, spawnTimer = null, isJumping = false;\n var area = document.getElementById('runnerArea');\n var player = document.getElementById('runnerPlayer');\n var scoreEl = document.getElementById('runnerScore');\n var overlay = document.getElementById('runnerStartOverlay');\n var resultEl = document.getElementById('runnerResult');\n var goodItems = ['💋','💖','💕','🍫','💝','🌹'];\n var badItems = ['💔','🖤','😢'];\n\n document.getElementById('runnerStartBtn').addEventListener('click', startRunner);\n\n function startRunner() {\n score = 0; running = true; isJumping = false;\n scoreEl.textContent = '0';\n resultEl.textContent = '';\n overlay.classList.add('hidden');\n player.classList.remove('jump');\n var old = area.querySelectorAll('.runner-item');\n for (var j = 0; j < old.length; j++) old[j].remove();\n spawnTimer = setInterval(spawnRunnerItem, 1200);\n setTimeout(function() { if (running) endRunner(); }, 30000);\n }\n\n function spawnRunnerItem() {\n if (!running) return;\n var isBad = Math.random() < 0.3;\n var pool = isBad ? badItems : goodItems;\n var emoji = pool[Math.floor(Math.random() * pool.length)];\n var item = document.createElement('div');\n item.className = 'runner-item';\n item.textContent = emoji;\n item.setAttribute('data-bad', isBad ? '1' : '0');\n item.style.setProperty('--speed', (Math.random() * 1.5 + 2) + 's');\n item.style.bottom = (Math.random() > 0.5 ? 20 : 140) + 'px';\n area.appendChild(item);\n var checkInt = setInterval(function() {\n if (!running || !item.parentNode) { clearInterval(checkInt); return; }\n var pRect = player.getBoundingClientRect();\n var iRect = item.getBoundingClientRect();\n if (pRect.left < iRect.right && pRect.right > iRect.left && pRect.top < iRect.bottom && pRect.bottom > iRect.top) {\n if (item.getAttribute('data-bad') === '1') { score = Math.max(0, score - 10); }\n else { score += 10; }\n scoreEl.textContent = score;\n item.remove();\n clearInterval(checkInt);\n }\n }, 50);\n setTimeout(function() { if (item.parentNode) item.remove(); }, 5000);\n }\n\n function jump() {\n if (!running || isJumping) return;\n isJumping = true;\n player.classList.add('jump');\n setTimeout(function() { player.classList.remove('jump'); isJumping = false; }, 500);\n }\n\n area.addEventListener('click', jump);\n area.addEventListener('touchstart', function(e) { e.preventDefault(); jump(); });\n document.addEventListener('keydown', function(e) { if (e.code === 'Space') jump(); });\n\n function endRunner() {\n running = false;\n clearInterval(spawnTimer);\n overlay.classList.remove('hidden');\n overlay.querySelector('p').textContent = 'Game Over!';\n document.getElementById('runnerStartBtn').textContent = '🔄 Play Again!';\n var msg = score >= 100 ? '🏆 Amazing runner! ' + score + ' love points!' : '💕 Sweet run! ' + score + ' points!';\n resultEl.textContent = msg;\n if (score >= 80) confettiBurst(40);\n }\n})();\n\n// ============ 9. PUZZLE ============\n(function() {\n var solved = ['Y','O','U','A','R','E','M','Y',''];\n var tiles = [];\n var grid = document.getElementById('puzzleGrid');\n var resultEl = document.getElementById('puzzleResult');\n\n function initPuzzle() {\n resultEl.textContent = '';\n var puzzle = ['Y','O','U','A','R','E','M','Y'];\n for (var i = puzzle.length - 1; i > 0; i--) {\n var j = Math.floor(Math.random() * (i + 1));\n var tmp = puzzle[i]; puzzle[i] = puzzle[j]; puzzle[j] = tmp;\n }\n puzzle.push('');\n tiles = puzzle;\n renderPuzzle();\n }\n\n function renderPuzzle() {\n grid.innerHTML = '';\n for (var i = 0; i < tiles.length; i++) {\n (function(idx) {\n var el = document.createElement('div');\n el.className = 'puzzle-tile' + (tiles[idx] === '' ? ' empty' : '');\n el.textContent = tiles[idx];\n if (tiles[idx] !== '') {\n el.addEventListener('click', function() { moveTile(idx); });\n }\n grid.appendChild(el);\n })(i);\n }\n }\n\n function moveTile(idx) {\n var emptyIdx = tiles.indexOf('');\n var row = Math.floor(idx / 3), col = idx % 3;\n var eRow = Math.floor(emptyIdx / 3), eCol = emptyIdx % 3;\n if ((Math.abs(row - eRow) + Math.abs(col - eCol)) === 1) {\n var tmp = tiles[idx]; tiles[idx] = tiles[emptyIdx]; tiles[emptyIdx] = tmp;\n renderPuzzle();\n checkWin();\n }\n }\n\n function checkWin() {\n var win = true;\n for (var i = 0; i < tiles.length; i++) {\n if (tiles[i] !== solved[i]) { win = false; break; }\n }\n if (win) {\n resultEl.textContent = '🎉 YOU ARE MY 💖! Puzzle solved!';\n confettiBurst(50);\n }\n }\n\n initPuzzle();\n})();\n\n// ============ 10. TREASURE HUNT ============\n(function() {\n var found = 0;\n var countEl = document.getElementById('treasureCount');\n var resultEl = document.getElementById('treasureResult');\n var hearts = document.querySelectorAll('.treasure-heart');\n for (var i = 0; i < hearts.length; i++) {\n (function(heart) {\n heart.addEventListener('click', function() {\n if (heart.classList.contains('found')) return;\n heart.classList.add('found');\n found++;\n countEl.textContent = found;\n if (found >= 6) {\n resultEl.textContent = '🎉 You found ALL the hidden hearts! Love detective! 💖';\n confettiBurst(60);\n }\n });\n })(hearts[i]);\n }\n})();\n\n// ============ GAME TAB SWITCHING ============\n(function() {\n var tabs = document.querySelectorAll('.game-tab');\n var panels = document.querySelectorAll('.game-panel');\n for (var i = 0; i < tabs.length; i++) {\n (function(tab) {\n tab.addEventListener('click', function() {\n var game = tab.getAttribute('data-game');\n for (var j = 0; j < tabs.length; j++) tabs[j].classList.remove('active');\n for (var j = 0; j < panels.length; j++) panels[j].classList.remove('active');\n tab.classList.add('active');\n document.getElementById('panel-' + game).classList.add('active');\n });\n })(tabs[i]);\n }\n})();\n",[],[219],"44ae8aa2-59ed-11f1-94ae-ee650bb23af1","app.txt","019e6a53-d1ce-71ae-9d97-eb29595eb164",["D",1779901101943],"// ============ MAIN APP ORCHESTRATOR ============\n\n// ---- LOADER ----\nwindow.addEventListener('load', function() {\n setTimeout(function() {\n document.getElementById('loader').classList.add('hidden');\n startHeroAnimations();\n }, 3000);\n});\n\n// ---- THEME TOGGLE ----\n(function() {\n var btn = document.getElementById('themeBtn');\n var isDark = false;\n btn.addEventListener('click', function() {\n isDark = !isDark;\n document.body.classList.toggle('dark-mode', isDark);\n btn.textContent = isDark ? '☀️' : '🌙';\n });\n})();\n\n// ---- MUSIC TOGGLE ----\n(function() {\n var btn = document.getElementById('musicBtn');\n var playing = false;\n var audioCtx = null, oscillator = null;\n\n btn.addEventListener('click', function() {\n playing = !playing;\n btn.textContent = playing ? '🔇' : '🎵';\n btn.style.animation = playing ? 'bounce 0.5s' : '';\n\n if (playing) {\n // Simple ambient tone\n try {\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n var gain = audioCtx.createGain();\n gain.gain.value = 0.03;\n gain.connect(audioCtx.destination);\n oscillator = audioCtx.createOscillator();\n oscillator.type = 'sine';\n oscillator.frequency.value = 440;\n oscillator.connect(gain);\n oscillator.start();\n } catch (e) {}\n } else {\n if (oscillator) { try { oscillator.stop(); } catch(e){} }\n if (audioCtx) { try { audioCtx.close(); } catch(e){} }\n }\n });\n})();\n\n// ---- HERO TYPING ANIMATION ----\nfunction startHeroAnimations() {\n var title = \"Happy Birthday My Beautiful Wife ❤️\";\n var subtitle = \"Every moment with you is my favorite memory.\";\n var titleEl = document.getElementById('heroTitle');\n var subEl = document.getElementById('heroSubtitle');\n\n typeText(titleEl, title, 60, function() {\n typeText(subEl, subtitle, 40, function() {});\n });\n}\n\nfunction typeText(el, text, speed, cb) {\n var i = 0;\n el.textContent = '';\n var interval = setInterval(function() {\n el.textContent += text[i];\n i++;\n if (i >= text.length) {\n clearInterval(interval);\n if (cb) cb();\n }\n }, speed);\n}\n\n// ---- START BUTTON ----\ndocument.getElementById('startBtn').addEventListener('click', function() {\n document.getElementById('timeline').scrollIntoView({ behavior: 'smooth' });\n if (typeof confettiBurst === 'function') confettiBurst(30);\n});\n\n// ---- SCROLL ANIMATIONS ----\n(function() {\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n\n // Timeline cards\n var tlCards = document.querySelectorAll('.timeline-card');\n for (var i = 0; i < tlCards.length; i++) observer.observe(tlCards[i]);\n\n // Reason cards\n var rCards = document.querySelectorAll('.reason-card');\n for (var i = 0; i < rCards.length; i++) observer.observe(rCards[i]);\n\n // Polaroids\n var pols = document.querySelectorAll('.polaroid');\n for (var i = 0; i < pols.length; i++) {\n pols[i].style.animationDelay = (i * 0.15) + 's';\n }\n})();\n\n// ---- NAV DOTS ----\n(function() {\n var sections = document.querySelectorAll('.section');\n var dots = document.querySelectorAll('.nav-dot');\n\n window.addEventListener('scroll', function() {\n var scrollY = window.scrollY + window.innerHeight / 2;\n for (var i = 0; i < sections.length; i++) {\n var sec = sections[i];\n if (scrollY >= sec.offsetTop && scrollY < sec.offsetTop + sec.offsetHeight) {\n for (var j = 0; j < dots.length; j++) dots[j].classList.remove('active');\n if (dots[i]) dots[i].classList.add('active');\n }\n }\n });\n})();\n\n// ---- LOVE LETTER ENVELOPE ----\n(function() {\n var envelope = document.getElementById('letterEnvelope');\n var paper = document.getElementById('letterPaper');\n\n if (envelope) {\n envelope.addEventListener('click', function() {\n envelope.classList.add('opened');\n setTimeout(function() {\n paper.classList.add('visible');\n // Animate letter lines\n var lines = document.querySelectorAll('.letter-line');\n for (var i = 0; i < lines.length; i++) {\n (function(line, delay) {\n setTimeout(function() { line.classList.add('visible'); }, delay);\n })(lines[i], i * 300);\n }\n }, 500);\n });\n }\n})();\n\n// ---- VINYL RECORD ----\n(function() {\n var vinyl = document.getElementById('vinylRecord');\n if (vinyl) {\n vinyl.addEventListener('click', function() {\n vinyl.classList.toggle('spinning');\n });\n }\n})();\n\n// ---- HUG BUTTON ----\n(function() {\n var btn = document.getElementById('hugBtn');\n var anim = document.getElementById('hugAnim');\n\n if (btn) {\n btn.addEventListener('click', function() {\n var emojis = ['🤗','💕','💖','🥰','💝','✨','💗'];\n for (var i = 0; i < 8; i++) {\n (function(idx) {\n setTimeout(function() {\n var em = document.createElement('div');\n em.className = 'hug-emoji';\n em.textContent = emojis[Math.floor(Math.random() * emojis.length)];\n em.style.left = (Math.random() * 80 + 10) + '%';\n em.style.top = '50%';\n anim.appendChild(em);\n setTimeout(function() { em.remove(); }, 1500);\n }, idx * 100);\n })(i);\n }\n });\n }\n})();\n\n// ---- FIREWORKS BUTTON ----\n(function() {\n var btn = document.getElementById('fireworkBtn');\n if (btn) {\n btn.addEventListener('click', function() {\n if (typeof launchFireworks === 'function') launchFireworks();\n if (typeof confettiBurst === 'function') confettiBurst(60);\n });\n }\n})();\n\n// ---- LANTERN RELEASE ----\n(function() {\n var btn = document.getElementById('lanternBtn');\n var sky = document.getElementById('lanternSky');\n\n if (btn && sky) {\n btn.addEventListener('click', function() {\n for (var i = 0; i < 12; i++) {\n (function(idx) {\n setTimeout(function() {\n var lantern = document.createElement('div');\n lantern.className = 'lantern';\n lantern.style.left = (Math.random() * 80 + 10) + '%';\n lantern.style.bottom = '0';\n lantern.style.setProperty('--drift', ((Math.random() - 0.5) * 80) + 'px');\n lantern.style.animationDelay = '0s';\n sky.appendChild(lantern);\n setTimeout(function() { lantern.remove(); }, 9000);\n }, idx * 400);\n })(i);\n }\n });\n }\n})();\n\n// ---- ENDING TITLE TYPING ----\n(function() {\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n typeText(\n document.getElementById('endingTitle'),\n \"Happy Birthday, My Everything 💖\",\n 70,\n function() {}\n );\n observer.disconnect();\n }\n });\n }, { threshold: 0.3 });\n\n var ending = document.getElementById('ending');\n if (ending) observer.observe(ending);\n})();\n\n// ---- REPLAY BUTTON ----\n(function() {\n var btn = document.getElementById('replayBtn');\n if (btn) {\n btn.addEventListener('click', function() {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n setTimeout(function() {\n startHeroAnimations();\n }, 1000);\n });\n }\n})();\n\n// ---- FLOATING ROMANTIC QUOTES ----\n(function() {\n var quotes = [\n \"You are my today and all of my tomorrows 💕\",\n \"In your arms is my favorite place 🤗\",\n \"You're the reason I believe in love 💖\",\n \"My heart is and always will be yours ❤️\",\n \"Every love story is beautiful, but ours is my favorite 💝\",\n \"You stole my heart but I'll let you keep it 💗\",\n \"Together is my favorite place to be ✨\",\n \"You are my sun, my moon, and all my stars 🌟\"\n ];\n var quoteEl = document.getElementById('floatingQuote');\n var idx = 0;\n\n function showQuote() {\n quoteEl.textContent = quotes[idx];\n quoteEl.classList.add('visible');\n setTimeout(function() {\n quoteEl.classList.remove('visible');\n }, 4000);\n idx = (idx + 1) % quotes.length;\n }\n\n setInterval(showQuote, 8000);\n setTimeout(showQuote, 5000);\n})();\n\n// ---- MASCOT CLICK EFFECTS ----\n(function() {\n var mascots = document.querySelectorAll('.hm');\n var reactions = ['💕','🥰','✨','💖','🎉','💗','😍','🌟'];\n\n for (var i = 0; i < mascots.length; i++) {\n (function(m) {\n m.addEventListener('click', function() {\n var r = document.createElement('span');\n r.textContent = reactions[Math.floor(Math.random() * reactions.length)];\n r.style.position = 'fixed';\n r.style.left = (m.getBoundingClientRect().left) + 'px';\n r.style.top = (m.getBoundingClientRect().top - 20) + 'px';\n r.style.fontSize = '1.5rem';\n r.style.pointerEvents = 'none';\n r.style.zIndex = '9999';\n r.style.animation = 'burstUp 1s ease forwards';\n document.body.appendChild(r);\n setTimeout(function() { r.remove(); }, 1000);\n });\n })(mascots[i]);\n }\n})();\n\n// ---- SCROLL INDICATOR HIDE ----\n(function() {\n window.addEventListener('scroll', function() {\n var indicator = document.getElementById('scrollIndicator');\n if (indicator) {\n indicator.style.opacity = window.scrollY > 100 ? '0' : '1';\n }\n });\n})();\n\n// ---- POLAROID HOVER EFFECTS ----\n(function() {\n var pols = document.querySelectorAll('.polaroid');\n for (var i = 0; i < pols.length; i++) {\n (function(pol) {\n pol.addEventListener('click', function() {\n pol.style.transform = 'rotate(0deg) scale(1.1)';\n setTimeout(function() {\n pol.style.transform = '';\n }, 2000);\n });\n })(pols[i]);\n }\n})();\n",[],[227],["D",1779900338578],{"_11":12,"_134":72},{"_11":12,"_129":130,"_71":72,"_30":70,"_131":132,"_133":24},{"_39":118,"_13":16,"_33":36,"_119":83,"_120":63,"_121":64,"_122":87,"_123":124,"_125":126,"_127":14,"_128":12},"ctx",{"_52":-5,"_155":270,"_271":272,"_273":274,"_275":24,"_276":24,"_277":24,"_278":95,"_279":-5,"_280":-7,"_281":-7,"_282":26,"_283":24,"_284":24,"_285":-5,"_286":24,"_287":24,"_288":24,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":16,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html