/* style.css - Premium Pastel Dreamy Pink Birthday Card Style Rules */

:root {
    --primary-pink: #FF9AA2;
    --pastel-pink: #FFD1DC;
    --pastel-peach: #FFB7B2;
    --pastel-purple: #E8AEFF;
    --pastel-cream: #FFF5EB;
    --accent-rose: #E08B9B;
    --accent-rose-dark: #C96F80;
    --gold-glow: #FFE685;
    --gold-dark: #F7C844;
    --white-glass: rgba(255, 255, 255, 0.92);
    --border-glass: rgba(255, 255, 255, 0.85);
    --shadow-soft: 0 8px 32px 0 rgba(224, 139, 155, 0.18);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Prompt', sans-serif;
    --font-handwrite: 'Mali', 'Caveat', cursive;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* --- CSS Background Themes & Overrides --- */

/* --- CSS Smooth Variable Transitions Definitions --- */
@property --bg-1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFD1DC;
}

@property --bg-2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFB7B2;
}

@property --bg-3 {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFF5EB;
}

@property --bg-4 {
    syntax: '<color>';
    inherits: true;
    initial-value: #E8AEFF;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1a0826;
    /* ultimate dark fallback */
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    color: #4A3E4D;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: none;
    /* No image by default */
    --bg-1: #FFD1DC;
    --bg-2: #FFB7B2;
    --bg-3: #FFF5EB;
    --bg-4: #E8AEFF;
    transition: --bg-1 2.5s ease-in-out, --bg-2 2.5s ease-in-out, --bg-3 2.5s ease-in-out, --bg-4 2.5s ease-in-out, color 1.2s ease-in-out, background-image 1.5s ease-in-out;
}

/* 1. Passcode & Puzzle Screen (Sweet Pink) */
body.theme-passcode {
    --bg-1: #FFD1DC;
    --bg-2: #FFB7B2;
    --bg-3: #FFF5EB;
    --bg-4: #E8AEFF;
    color: #5D4A66;
}

body.theme-passcode::after {
    background: rgba(255, 255, 255, 0.12);
}

body.theme-passcode .passcode-container h2,
body.theme-passcode .puzzle-title {
    color: var(--accent-rose-dark);
    text-shadow: none;
}

body.theme-passcode .passcode-container .subtitle,
body.theme-passcode .puzzle-container .subtitle {
    color: #6C5B7B;
    opacity: 0.9;
}

body.theme-passcode .forget-passcode-btn {
    color: var(--accent-rose-dark);
}

/* 2. Gift & Flowers Screen (Karaoke Room - Neon Purple Party) */
body.theme-gift {
    --bg-1: #1C0A35;
    --bg-2: #800F62;
    --bg-3: #0B0319;
    --bg-4: #A80D4F;
    color: #FFF5EB;
}

body.theme-gift::after {
    background: rgba(12, 5, 22, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.theme-gift .gift-title {
    color: #FFE685;
    text-shadow: 0 0 12px rgba(255, 230, 133, 0.65);
}

body.theme-gift .gift-subtitle {
    color: #FFF5EB;
    opacity: 0.9;
}

/* 3. Cake Screen - Before Wish (Strawberry Bingsu Restaurant Cafe) */
body.theme-cake {
    --bg-1: #FFF5F5;
    --bg-2: #FFD2D2;
    --bg-3: #FFE3E3;
    --bg-4: #FFF9F9;
    color: #5D4A66;
}

body.theme-cake::after {
    background: rgba(255, 255, 255, 0.15);
}

body.theme-cake .guide-text {
    color: #C96F80;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(201, 111, 128, 0.28);
    text-shadow: none;
    box-shadow: 0 4px 15px rgba(201, 111, 128, 0.08);
}

/* 3.5. Cake Screen - After Wish (Movie Theater - Cinema Dark Navy) */
body.theme-movie {
    --bg-1: #060913;
    --bg-2: #0F1422;
    --bg-3: #1A2238;
    --bg-4: #0C0F1A;
    color: #FFF5EB;
}

body.theme-movie::after {
    background: rgba(5, 8, 16, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.theme-movie .guide-text {
    color: #ffe066;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 8px rgba(255, 224, 102, 0.45);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* 4. Polaroid Gallery Screen (Park View - Fresh Pastel Green Theme) */
body.theme-gallery {
    --bg-1: #D8F3DC;
    --bg-2: #E8F5E9;
    --bg-3: #B7E4C7;
    --bg-4: #E1F5FE;
    color: #2D3A2E;
}

body.theme-gallery::after {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.theme-gallery .gallery-title {
    color: #1B4332;
    /* Deep forest green */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

body.theme-gallery .gallery-subtitle {
    color: #2D3A2E;
    opacity: 0.85;
}

body.theme-gallery .envelope-label {
    color: #1B4332;
}

body.theme-gallery .music-label {
    color: #1B4332;
}

/* Background Canvas */
#magic-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Fluid Aurora Pastel Background Animation */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg,
            var(--bg-1) 0%,
            var(--bg-2) 25%,
            var(--bg-3) 50%,
            var(--bg-4) 75%,
            var(--bg-1) 100%);
    background-size: 400% 400%;
    animation: fluidAurora 25s ease infinite;
    z-index: -2;
    pointer-events: none;
    transition: opacity 1.5s ease-in-out;
    opacity: 1;
}

@keyframes fluidAurora {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Backdrop Glass Mask Layer */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    transition: background 1.5s ease-in-out, backdrop-filter 1.5s ease-in-out;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Section transitions */
section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    overflow-y: auto;
    padding: 20px;
}

section.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.scene-container {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
}

/* Glassmorphism Card base */
.glass-card {
    background: var(--white-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    padding: 30px 24px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 1. Passcode Screen styling */
.passcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.passcode-container h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.6rem;
    margin-top: 15px;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    color: var(--accent-rose-dark);
}

.passcode-container .subtitle {
    font-size: 0.85rem;
    color: #6C5B7B;
    margin-bottom: 25px;
}

.lock-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(224, 139, 155, 0.2));
    animation: floatGently 3s ease-in-out infinite;
}

@keyframes floatGently {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Indicator Dots */
.dots-container {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--accent-rose);
    background: transparent;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot.active {
    background-color: var(--accent-rose);
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--primary-pink);
}

.dot.error {
    animation: shakeError 0.4s ease;
    border-color: #FF85A1;
    background-color: #FF85A1;
}

@keyframes shakeError {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Custom Keypad */
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 280px;
}

.key-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    color: #5D4A66;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(224, 139, 155, 0.08);
    touch-action: manipulation;
}

.key-btn:active {
    background: var(--pastel-pink);
    transform: scale(0.9);
    box-shadow: inset 0 2px 4px rgba(224, 139, 155, 0.2);
}

.delete-btn svg {
    stroke: var(--accent-rose);
    width: 22px;
    height: 22px;
}

.clear-btn {
    color: var(--accent-rose);
    font-family: var(--font-body);
}

.error-msg {
    color: #E25B76;
    font-size: 0.85rem;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.error-msg.show {
    opacity: 1;
}

/* 2. Gift and Flower Scene */
.gift-box-wrapper {
    width: 150px;
    height: 150px;
    perspective: 800px;
    margin-bottom: 20px;
    cursor: pointer;
    z-index: 5;
    position: relative;
}

/* Gift Box 3D/Flat layout */
.gift-box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: floatGently 3s ease-in-out infinite, pulseGift 2s ease-in-out infinite;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

@keyframes pulseGift {

    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.05) translateY(-5px);
    }
}

.gift-box .lid {
    position: absolute;
    width: 110%;
    height: 25px;
    background: #FF9AA2;
    border-radius: 6px;
    top: 20px;
    left: -5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
}

.gift-box .box-body {
    position: absolute;
    width: 100%;
    height: 95px;
    background: #FFB7B2;
    border-radius: 0 0 12px 12px;
    top: 45px;
    left: 0;
    box-shadow: 0 10px 25px rgba(224, 139, 155, 0.15);
}

.gift-box .ribbon-horizontal {
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--gold-dark);
    top: 10px;
}

.gift-box .ribbon-vertical {
    position: absolute;
    width: 16px;
    height: 100%;
    background: var(--gold-dark);
    left: 50%;
    transform: translateX(-50%);
}

.gift-box .bow {
    position: absolute;
    width: 36px;
    height: 36px;
    background: var(--gold-dark);
    border-radius: 50% 50% 0 50%;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.gift-box .bow::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background: var(--gold-dark);
    border-radius: 50% 50% 50% 0;
    left: -20px;
    top: 20px;
    transform: rotate(-90deg);
}

/* Open state of gift box */
.gift-box.opened .lid {
    transform: translateY(-80px) rotate(-15deg) scale(0.8);
    opacity: 0;
}

.gift-box.opened {
    animation: none;
    transform: scale(0.6) translateY(200px);
    opacity: 0;
    pointer-events: none;
}

/* Flower container styling */
.flower-container {
    width: 100%;
    max-width: 340px;
    height: 440px;
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-soft);
    margin-bottom: 25px;
}

.flower-container.visible {
    opacity: 1;
    transform: scale(1);
}

#blooming-flowers-svg {
    width: 100%;
    height: 370px;
    margin-top: 0;
    flex-shrink: 0;
}

.flower-greeting {
    text-align: center;
    padding: 10px 15px 15px;
}

.flower-greeting h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--accent-rose-dark);
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.flower-greeting p {
    font-size: 0.8rem;
    color: #6C5B7B;
}

/* ===== BOUQUET DOME BLOOM ANIMATIONS ===== */

/* Wrap paper: slide up from bottom on visible */
.bouquet-wrap {
    opacity: 0;
    transform: translateY(30px);
    transition: none;
}

.flower-container.visible .bouquet-wrap {
    animation: wrapRise 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}

@keyframes wrapRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bow: pop in with spring after wrap */
.bouquet-bow {
    opacity: 0;
    transform: scale(0.3);
    transform-origin: 200px 468px;
}

.flower-container.visible .bouquet-bow {
    animation: bowPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.6) 0.6s forwards;
}

@keyframes bowPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* All roses start hidden — JS showBouquet() animates opacity staggered by --delay */
.rose {
    opacity: 0;
}

/* Back row roses bloom first */
/* Middle row follows */
/* Front row last — all handled by JS opacity transitions */

/* Sparkles: twinkle in and out */
.sparkle {
    opacity: 0;
}

.flower-container.visible .sp1 {
    animation: sparkleTwinkle 2s ease-in-out 2.5s infinite;
}

.flower-container.visible .sp2 {
    animation: sparkleTwinkle 2.2s ease-in-out 2.8s infinite;
}

.flower-container.visible .sp3 {
    animation: sparkleTwinkle 1.8s ease-in-out 3.1s infinite;
}

.flower-container.visible .sp4 {
    animation: sparkleTwinkle 2.5s ease-in-out 2.2s infinite;
}

.flower-container.visible .sp5 {
    animation: sparkleTwinkle 2.3s ease-in-out 3.4s infinite;
}

.flower-container.visible .sp6 {
    animation: sparkleTwinkle 1.9s ease-in-out 3.0s infinite;
}

.flower-container.visible .sp7 {
    animation: sparkleTwinkle 2.1s ease-in-out 2.6s infinite;
}

.flower-container.visible .sp8 {
    animation: sparkleTwinkle 2.4s ease-in-out 3.2s infinite;
}

.flower-container.visible .sp9 {
    animation: sparkleTwinkle 2.0s ease-in-out 2.9s infinite;
}

@keyframes sparkleTwinkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.3);
    }

    40%,
    60% {
        opacity: 1;
        transform: scale(1.4);
        filter: drop-shadow(0 0 4px #FFE685);
    }
}

/* Glowing flower core elements (kept for compat) */
.flower-core-glow {
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        opacity: 0.6;
        filter: drop-shadow(0 0 2px var(--gold-glow));
    }

    to {
        opacity: 1;
        filter: drop-shadow(0 0 8px var(--gold-glow));
    }
}

/* Buttons style */
.glass-btn {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--accent-rose) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 28px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--font-body);
    box-shadow: 0 4px 15px rgba(224, 139, 155, 0.25);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, opacity 0.8s ease;
    opacity: 0;
    transform: translateY(20px);
    z-index: 10;
    touch-action: manipulation;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.glass-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(224, 139, 155, 0.2);
}

/* Button reveal is controlled by JS (setTimeout 31s in showBouquet) — no CSS auto-show */

.glass-btn:active {
    transform: scale(0.95);
    background-color: rgba(255, 245, 235, 0.65);
}

.pulse-glow {
    box-shadow: 0 0 15px rgba(224, 139, 155, 0.3);
    animation: pulseGlowBtn 2s infinite alternate;
}

@keyframes pulseGlowBtn {
    from {
        box-shadow: 0 0 8px rgba(224, 139, 155, 0.3);
    }

    to {
        box-shadow: 0 0 20px rgba(224, 139, 155, 0.6);
    }
}

/* 3. Cake Scene styling */
.guide-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-rose-dark);
    margin-bottom: 25px;
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(224, 139, 155, 0.05);
    z-index: 5;
}

.guide-text.pulse {
    animation: guidePulse 1.8s infinite alternate;
}

@keyframes guidePulse {
    from {
        opacity: 0.7;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

.cake-wrapper {
    position: relative;
    width: 350px;
    height: 350px;
    max-width: 90vw;
    max-height: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    cursor: pointer;
    z-index: 5;
}

.cake-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 1. Side View Cake & Glass Cover styling */
.cake-side-view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

.cake-side-view .glass-dome {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    transform-origin: 150px 260px;
}

/* Slide dome cover off and zoom side view out on click */
.cake-side-view.open-transition .glass-dome {
    transform: translateY(-80px) rotate(-12deg);
    opacity: 0;
}

.cake-side-view.open-transition {
    transform: scale(0.6) rotate(15deg);
    opacity: 0;
}

/* 2. Top View Cake & Zoom styling */
.cake-top-view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.8s ease;
}

.cake-top-view.scale-up-transition {
    transform: scale(1);
    opacity: 1;
}

/* Candles & Flames inside Top View SVG */
.cake-top-view .candle {
    cursor: pointer;
}

.cake-top-view .flame {
    opacity: 0;
    transform: scale(0);
    transform-origin: center bottom;
    transform-box: fill-box;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cake-top-view .candle.lit .flame {
    opacity: 1;
    transform: scale(1);
    animation: flickerFlameTop 1.2s ease-in-out infinite alternate;
}

@keyframes flickerFlameTop {

    0%,
    100% {
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 2px #FFE685) drop-shadow(0 0 8px #FF9AA2);
    }

    50% {
        transform: scale(1.06) rotate(1deg) skewX(1deg);
        filter: drop-shadow(0 0 4px #FFE685) drop-shadow(0 0 12px #FF9AA2);
    }
}


/* Wish Box Modal */
.wish-box {
    margin-top: 10px;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wish-box.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wish-box h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-rose-dark);
    margin-bottom: 12px;
}

.wish-box textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 12px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #4A3E4D;
    resize: none;
    outline: none;
    margin-bottom: 15px;
    transition: border-color 0.2s;
}

.wish-box textarea:focus {
    border-color: var(--accent-rose);
}

.pink-gradient-btn {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--accent-rose) 100%);
    border: none;
    border-radius: 50px;
    color: white;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 24px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(224, 139, 155, 0.2);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pink-gradient-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(224, 139, 155, 0.2);
}

#blow-instruction {
    display: none;
    margin-top: 15px;
    font-size: 0.85rem;
    animation: guidePulse 1.5s infinite alternate;
}

/* 4. Polaroid Gallery and Secret Wax Letter */
#gallery-scene {
    align-items: flex-start;
}

#gallery-scene .scene-container {
    justify-content: flex-start;
    max-width: 100%;
    padding: 40px 5px 80px 5px;
}

.neon-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--accent-rose-dark) 0%, #D83B7E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(224, 139, 155, 0.1);
    margin-bottom: 2px;
    letter-spacing: -1px;
}

.gallery-subtitle {
    font-size: 0.85rem;
    color: #6C5B7B;
    margin-bottom: 30px;
    text-align: center;
}

/* Polaroid layout - scrollable list */
.polaroid-gallery {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 320px;
    align-items: center;
    margin-bottom: 40px;
}

.polaroid-card {
    background: #FFF5EB;
    padding: 14px;
    padding-bottom: 22px;
    border-radius: 1px;
    box-shadow: 0 10px 30px rgba(93, 74, 102, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 250px;
    transform: rotate(var(--rotation));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.7);
    touch-action: manipulation;
}

.polaroid-card:hover,
.polaroid-card:active {
    transform: scale(1.08) rotate(0deg) translateY(-5px);
    box-shadow: 0 15px 35px rgba(224, 139, 155, 0.25), 0 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.photo-placeholder {
    width: 100%;
    height: 220px;
    background: #EFE6DD;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ECE0D5;
}

.photo-placeholder img,
.photo-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.polaroid-card .caption {
    font-family: var(--font-handwrite);
    font-size: 1.4rem;
    text-align: center;
    margin-top: 14px;
    color: #5D4A66;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Scroll Animation effect using CSS */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px) rotate(var(--rotation));
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) rotate(var(--rotation));
}

/* Envelope and Secret Letter */
.envelope-wrapper {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.envelope-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-rose-dark);
    margin-bottom: 12px;
}

.envelope {
    position: relative;
    width: 280px;
    height: 180px;
    background: #FFD1DC;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(224, 139, 155, 0.15);
    border: 1px solid var(--border-glass);
    overflow: visible;
    cursor: pointer;
    transition: transform 0.3s;
    touch-action: manipulation;
}

.envelope:active {
    transform: scale(0.98);
}

.envelope-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFB7B2 0%, #FFD1DC 100%);
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.envelope.open .envelope-body {
    overflow: visible;
}

/* Envelope flap styling */
.envelope::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 95px solid rgba(255, 154, 162, 0.8);
    z-index: 5;
    transform-origin: top;
    transition: transform 0.6s ease;
    border-radius: 12px 12px 0 0;
}

.envelope.open::before {
    transform: rotateX(180deg) translateY(1px);
    z-index: 0;
}

/* Sliding Letter Paper inside envelope */
.letter-paper {
    position: absolute;
    width: 90%;
    height: 90%;
    background: #FFF5EB;
    left: 5%;
    bottom: 5%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 18px 14px;
    z-index: 2;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), height 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.3s;
    overflow: hidden;
}

.envelope.open .letter-paper {
    transform: translateY(-160px);
    height: 290px;
    z-index: 6;
    box-shadow: 0 -10px 30px rgba(93, 74, 102, 0.15);
    overflow-y: auto;
}

.letter-content {
    font-family: var(--font-handwrite);
    font-size: 1.25rem;
    line-height: 1.6;
    color: #4A3E4D;
    text-align: left;
}

/* Custom rose gold Wax Seal button */
.wax-seal {
    position: absolute;
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, #E08B9B, #C96F80);
    border-radius: 50%;
    top: 75px;
    left: calc(50% - 22px);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(201, 111, 128, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
}

.wax-seal:hover {
    transform: scale(1.08);
}

.seal-heart {
    color: var(--pastel-cream);
    font-size: 1.2rem;
    animation: heartPulse 1.2s infinite;
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.envelope.open .wax-seal {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Styled Audio controller */
.music-toggle-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.music-btn {
    background: var(--white-glass);
    border: 1px solid var(--border-glass);
    padding: 8px 18px;
    border-radius: 30px;
    color: var(--accent-rose-dark);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(224, 139, 155, 0.08);
    transition: background-color 0.2s;
    touch-action: manipulation;
}

.music-btn .music-icon {
    font-size: 0.95rem;
}

.music-btn.playing .music-icon {
    animation: rotateMusic 4s linear infinite;
}

@keyframes rotateMusic {
    to {
        transform: rotate(360deg);
    }
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Mobile-first Media Queries */
@media (max-width: 380px) {
    .passcode-container h2 {
        font-size: 1.4rem;
    }

    .key-btn {
        height: 52px;
        width: 52px;
        font-size: 1.3rem;
    }

    .keypad {
        gap: 10px;
    }

    .photo-placeholder {
        height: 190px;
    }

    .polaroid-card {
        width: 220px;
    }

    .envelope {
        width: 250px;
        height: 160px;
    }

    .envelope::before {
        border-left-width: 125px;
        border-right-width: 125px;
        border-top-width: 85px;
    }

    .envelope.open .letter-paper {
        height: 250px;
        transform: translateY(-135px);
    }

    .cake-wrapper {
        width: 270px;
        height: 270px;
    }
}

/* 5. Dreamy Hanging Fairy Lights styling */
.fairy-lights {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 100;
    pointer-events: none;
    padding-left: 15px;
    padding-right: 15px;
}

.fairy-lights li {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 10px var(--color), 0 0 20px var(--color);
    animation: lightTwinkle 1.8s ease-in-out infinite alternate;
    animation-delay: var(--delay);
    margin-top: 15px;
}

/* Hang offsets for wavy cords */
.fairy-lights li:nth-child(even) {
    margin-top: 25px;
}

.fairy-lights li:nth-child(3n) {
    margin-top: 32px;
}

.fairy-lights li:nth-child(4n) {
    margin-top: 18px;
}

/* Light socket clip */
.fairy-lights li::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 3px;
    width: 4px;
    height: 6px;
    background: rgba(93, 74, 102, 0.45);
    border-radius: 1px;
}

/* Hanging wires connecting sockets to top of viewport */
.fairy-lights li::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 4px;
    width: 2px;
    height: 26px;
    background: rgba(93, 74, 102, 0.35);
}

.fairy-lights li:nth-child(even)::after {
    height: 36px;
}

.fairy-lights li:nth-child(3n)::after {
    height: 43px;
}

/* Draped string chord backdrop */
.fairy-lights::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    border-bottom: 2px solid rgba(93, 74, 102, 0.22);
    border-radius: 0 0 50% 50% / 0 0 16px 16px;
    z-index: -1;
}

@keyframes lightTwinkle {
    0% {
        opacity: 0.45;
        transform: scale(0.85);
        box-shadow: 0 0 4px var(--color);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 0 16px var(--color), 0 0 28px var(--color);
    }
}


/* --- 3D Isometric Chocolate Cake --- */
.cake-top-view {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.isometric-cake {
    position: relative;
    width: 250px;
    height: 250px;
    transform: translateY(20px);
}

.isometric-cake .plate {
    position: absolute;
    bottom: -10px;
    left: -20px;
    width: 290px;
    height: 90px;
    background: #e8d0d5;
    border-radius: 50%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.isometric-cake .layer {
    position: absolute;
    border-radius: 50%;
    background-color: #fff9f9;
    /* Milky shaved ice */
    box-shadow: inset 0 -10px 20px rgba(255, 183, 178, 0.2), 0 5px 10px rgba(0, 0, 0, 0.08);
}

.isometric-cake .layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff0f0;
    /* Milky snow top */
    transform: translateY(-20px);
}

.isometric-cake .bottom {
    bottom: 20px;
    left: 15px;
    width: 220px;
    height: 80px;
}

.isometric-cake .bottom::before {
    transform: translateY(-40px);
    height: 80px;
}

/* middle layer */
.isometric-cake .middle {
    bottom: 70px;
    left: 35px;
    width: 180px;
    height: 60px;
}

.isometric-cake .middle::before {
    transform: translateY(-35px);
    height: 60px;
}

/* top layer */
.isometric-cake .top {
    bottom: 110px;
    left: 55px;
    width: 140px;
    height: 50px;
}

.isometric-cake .top::before {
    transform: translateY(-30px);
    height: 50px;
}

/* Icing and drips (Strawberry syrup glaze) */
.isometric-cake .icing {
    position: absolute;
    top: -40px;
    /* match ::before transform */
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e63946;
    /* Glossy Strawberry Red Syrup */
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.1), 0 0 10px rgba(230, 57, 70, 0.45);
}

.isometric-cake .middle .icing {
    top: -35px;
}

.isometric-cake .top .icing {
    top: -30px;
}

/* Drips (Strawberry drips) */
.isometric-cake .drips {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.isometric-cake .drip {
    position: absolute;
    background: #e63946;
    width: 15px;
    border-radius: 10px;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.05);
}

.isometric-cake .bottom .drip.d1 {
    left: 10%;
    top: 20px;
    height: 30px;
}

.isometric-cake .bottom .drip.d2 {
    left: 30%;
    top: 35px;
    height: 40px;
}

.isometric-cake .bottom .drip.d3 {
    left: 50%;
    top: 38px;
    height: 25px;
}

.isometric-cake .bottom .drip.d4 {
    left: 70%;
    top: 30px;
    height: 45px;
}

.isometric-cake .bottom .drip.d5 {
    left: 85%;
    top: 15px;
    height: 35px;
}

.isometric-cake .middle .drip.d1 {
    left: 15%;
    top: 15px;
    height: 30px;
}

.isometric-cake .middle .drip.d2 {
    left: 40%;
    top: 25px;
    height: 20px;
}

.isometric-cake .middle .drip.d3 {
    left: 60%;
    top: 25px;
    height: 35px;
}

.isometric-cake .middle .drip.d4 {
    left: 80%;
    top: 10px;
    height: 25px;
}

.isometric-cake .top .drip.d1 {
    left: 20%;
    top: 10px;
    height: 20px;
}

.isometric-cake .top .drip.d2 {
    left: 50%;
    top: 18px;
    height: 30px;
}

.isometric-cake .top .drip.d3 {
    left: 75%;
    top: 12px;
    height: 25px;
}


/* --- 3D Isometric Cake Candles --- */
.isometric-cake .candle {
    position: absolute;
    width: 12px;
    height: 40px;
    z-index: 10;
}

.isometric-cake .candle-stick {
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 40px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.isometric-cake .candle-stick::before {
    /* Wick */
    content: '';
    position: absolute;
    top: -6px;
    left: 5px;
    width: 2px;
    height: 6px;
    background: #333;
}

/* Colors for the 7 candles on 3D cake (sweet pastel theme) */
.isometric-cake #candle-1 .candle-stick {
    background: linear-gradient(to right, #ff6b6b, #ff8787, #ff6b6b);
}

.isometric-cake #candle-2 .candle-stick {
    background: linear-gradient(to right, #ffa94d, #ffd8a8, #ffa94d);
}

.isometric-cake #candle-3 .candle-stick {
    background: linear-gradient(to right, #ffe066, #fff3bf, #ffe066);
}

.isometric-cake #candle-4 .candle-stick {
    background: linear-gradient(to right, #69db7c, #b2f2bb, #69db7c);
}

.isometric-cake #candle-5 .candle-stick {
    background: linear-gradient(to right, #74c0fc, #a5d8ff, #74c0fc);
}

.isometric-cake #candle-6 .candle-stick {
    background: linear-gradient(to right, #da77f2, #f3d9fa, #da77f2);
}

.isometric-cake #candle-7 .candle-stick {
    background: linear-gradient(to right, #f783ac, #fcc2d7, #f783ac);
}

.isometric-cake .flame {
    position: absolute;
    top: -25px;
    left: 1px;
    width: 10px;
    height: 18px;
    background: #ffcc00;
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 15px 5px rgba(255, 153, 0, 0.6);
    animation: flicker 0.1s infinite alternate;
}

.isometric-cake .flame.hidden {
    display: none;
}

.isometric-cake .flame.igniting {
    animation: ignite 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform-origin: 50% 100%;
}

@keyframes ignite {
    0% {
        transform: scaleY(0) scaleX(0.2) rotate(-3deg);
        opacity: 0;
    }

    40% {
        transform: scaleY(1.4) scaleX(1.2) rotate(3deg);
        opacity: 1;
    }

    70% {
        transform: scaleY(0.85) scaleX(0.95) rotate(-2deg);
        opacity: 1;
    }

    100% {
        transform: scaleY(1) scaleX(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes flicker {
    0% {
        transform: scale(1) rotate(-1deg);
        box-shadow: 0 0 15px 5px rgba(255, 153, 0, 0.6);
    }

    100% {
        transform: scale(1.1) rotate(1deg);
        box-shadow: 0 0 20px 8px rgba(255, 153, 0, 0.8);
    }
}

.isometric-cake .candle-hitbox {
    position: absolute;
    top: -30px;
    left: -15px;
    width: 42px;
    height: 80px;
    cursor: pointer;
    z-index: 20;
}

/* Coordinates on the top tier icing (width 140px, height 50px, center around x=70px, y=-30px) */
/* The y-center of top icing surface is at around y = -5px, depth y from -22px to -5px */
.isometric-cake .candle-i1 {
    left: 22px;
    top: -62px;
    z-index: 11;
}

.isometric-cake .candle-i2 {
    left: 38px;
    top: -54px;
    z-index: 12;
}

.isometric-cake .candle-i3 {
    left: 54px;
    top: -48px;
    z-index: 13;
}

.isometric-cake .candle-i4 {
    left: 70px;
    top: -45px;
    z-index: 14;
}

.isometric-cake .candle-i5 {
    left: 86px;
    top: -48px;
    z-index: 13;
}

.isometric-cake .candle-i6 {
    left: 102px;
    top: -54px;
    z-index: 12;
}

.isometric-cake .candle-i7 {
    left: 118px;
    top: -62px;
    z-index: 11;
}

/* ===== WISH OVERLAY (Full Screen Dreamy Prayer Page) ===== */
.wish-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.wish-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.wish-overlay-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, #1a0533 0%, #0d0020 60%, #000010 100%);
    animation: wish-bg-pulse 4s ease-in-out infinite alternate;
}

@keyframes wish-bg-pulse {
    0% {
        background: radial-gradient(ellipse at center, #1a0533 0%, #0d0020 60%, #000010 100%);
    }

    100% {
        background: radial-gradient(ellipse at center, #28054a 0%, #12003a 60%, #000818 100%);
    }
}

.wish-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 30px;
    max-width: 480px;
    width: 90vw;
    animation: wish-float 5s ease-in-out infinite;
}

@keyframes wish-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.wish-stars {
    font-size: 1.4rem;
    letter-spacing: 6px;
    margin-bottom: 16px;
    animation: wish-stars-pulse 2s ease-in-out infinite alternate;
}

@keyframes wish-stars-pulse {
    0% {
        opacity: 0.6;
        text-shadow: 0 0 8px #fff;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 20px #ffe066, 0 0 40px #ffe066;
    }
}

.wish-candle-icon {
    font-size: 4rem;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px rgba(255, 200, 50, 0.8));
    animation: candle-glow-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes candle-glow-pulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 200, 50, 0.5));
    }

    100% {
        filter: drop-shadow(0 0 30px rgba(255, 200, 50, 1)) drop-shadow(0 0 60px rgba(255, 120, 0, 0.6));
    }
}

.wish-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #ffe8b0;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 200, 80, 0.8);
    letter-spacing: 1px;
}

.wish-subtitle {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    color: rgba(255, 230, 200, 0.85);
    margin-bottom: 28px;
    line-height: 1.7;
}

.wish-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wish-form textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1.5px solid rgba(255, 220, 120, 0.4);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: #fff8e0;
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    resize: none;
    outline: none;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 200, 50, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.wish-form textarea::placeholder {
    color: rgba(255, 220, 150, 0.5);
}

.wish-form textarea:focus {
    border-color: rgba(255, 220, 100, 0.8);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 200, 50, 0.3);
}

.wish-send-btn {
    padding: 16px 30px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #ff9a00 0%, #ffcc00 50%, #ff6b6b 100%);
    color: #fff;
    font-family: 'Prompt', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 160, 0, 0.5), 0 8px 40px rgba(255, 100, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.wish-send-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(255, 160, 0, 0.7), 0 14px 50px rgba(255, 100, 0, 0.4);
}

.wish-send-btn:active {
    transform: scale(0.97);
}

/* Polaroid Lightbox Modal Styles */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.lightbox-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 20, 25, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lightbox-content {
    position: relative;
    z-index: 2;
    background: #FFF5EB;
    padding: 16px;
    padding-bottom: 24px;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 290px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.8) rotate(-2deg);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lightbox-modal.active .lightbox-content {
    transform: scale(1) rotate(0deg);
}

.lightbox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 32px;
    height: 32px;
    background: #FFD1DC;
    border: 2px solid #FFF;
    color: var(--accent-rose-dark);
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.lightbox-photo-wrapper {
    width: 100%;
    height: 250px;
    background: #EFE6DD;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ECE0D5;
}

.lightbox-photo-wrapper img,
.lightbox-photo-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-caption {
    font-family: var(--font-handwrite);
    font-size: 1.45rem;
    color: #5D4A66;
    margin-top: 14px;
    text-align: center;
    width: 100%;
    word-break: break-word;
}

/* --- Jigsaw Puzzle Screen Styling --- */
.forget-passcode-btn {
    background: none;
    border: none;
    color: var(--accent-rose-dark);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 18px;
    transition: color 0.2s;
    touch-action: manipulation;
}

.forget-passcode-btn:active {
    color: var(--primary-pink);
}

.puzzle-container {
    max-width: 360px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.puzzle-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--accent-rose-dark);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 270px;
    height: 270px;
    background: rgba(255, 255, 255, 0.3);
    border: 3px solid var(--border-glass);
    border-radius: 12px;
    padding: 4px;
    margin-top: 15px;
    margin-bottom: 25px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.puzzle-piece {
    width: 100%;
    height: 100%;
    background-image: url('assets/images/game1.jpg');
    background-size: 254px 254px;
    /* Matches grid inner width */
    background-repeat: no-repeat;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 2px solid transparent;
    box-sizing: border-box;
    touch-action: manipulation;
}

.puzzle-piece.selected {
    transform: scale(0.95);
    border-color: var(--accent-rose);
    box-shadow: 0 0 12px var(--primary-pink), inset 0 0 4px var(--primary-pink);
    z-index: 10;
}

.puzzle-back-btn {
    opacity: 1 !important;
    transform: none !important;
    padding: 10px 24px;
    font-size: 0.85rem;
    border-radius: 20px;
}

/* Success Overlay Card */
.puzzle-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 245, 235, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    animation: fadeInSuccess 0.4s ease-out forwards;
}

@keyframes fadeInSuccess {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.success-content {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-stars {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--gold-dark);
    text-shadow: 0 0 8px rgba(247, 200, 68, 0.5);
    animation: floatGently 3s ease-in-out infinite;
}

.success-content h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: #4A9A6A;
    margin-bottom: 8px;
}

.success-msg {
    font-size: 0.9rem;
    color: #6C5B7B;
    margin-bottom: 12px;
}

.revealed-passcode {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-rose-dark);
    background: rgba(255, 154, 162, 0.15);
    border: 2px dashed var(--accent-rose);
    border-radius: 12px;
    padding: 10px 30px;
    margin-bottom: 25px;
    letter-spacing: 4px;
    animation: pulseGlowBtn 2s infinite alternate;
}

/* --- Floating Clouds (Passcode Screen) --- */
.cloud-bg-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.48);
    border-radius: 100px;
    filter: blur(2px);
    opacity: 0.85;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.48);
    border-radius: 50%;
}

.cloud-1 {
    width: 120px;
    height: 40px;
    top: 15%;
    left: -150px;
    animation: floatClouds 35s linear infinite;
}

.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -20px;
    left: 15px;
}

.cloud-1::after {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 15px;
}

.cloud-2 {
    width: 160px;
    height: 50px;
    top: 45%;
    left: -200px;
    animation: floatClouds 48s linear infinite;
    animation-delay: 8s;
}

.cloud-2::before {
    width: 70px;
    height: 70px;
    top: -30px;
    left: 20px;
}

.cloud-2::after {
    width: 90px;
    height: 90px;
    top: -45px;
    right: 25px;
}

.cloud-3 {
    width: 100px;
    height: 35px;
    top: 75%;
    left: -120px;
    animation: floatClouds 28s linear infinite;
    animation-delay: 15s;
}

.cloud-3::before {
    width: 40px;
    height: 40px;
    top: -15px;
    left: 12px;
}

.cloud-3::after {
    width: 55px;
    height: 55px;
    top: -25px;
    right: 12px;
}

.cloud-4 {
    width: 140px;
    height: 45px;
    top: 25%;
    left: -180px;
    animation: floatClouds 42s linear infinite;
    animation-delay: 22s;
}

.cloud-4::before {
    width: 60px;
    height: 60px;
    top: -25px;
    left: 15px;
}

.cloud-4::after {
    width: 80px;
    height: 80px;
    top: -40px;
    right: 20px;
}

@keyframes floatClouds {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(100vw + 250px));
    }
}

/* --- Karaoke Party Neon Styling --- */
body.theme-gift .gift-container {
    box-shadow: 0 0 25px rgba(255, 20, 147, 0.4), inset 0 0 10px rgba(255, 20, 147, 0.2);
    border: 2px solid rgba(255, 20, 147, 0.6);
    animation: neonPulse 2s infinite alternate;
}

@keyframes neonPulse {
    0% {
        border-color: rgba(255, 20, 147, 0.5);
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.3);
    }

    100% {
        border-color: rgba(224, 30, 117, 0.95);
        box-shadow: 0 0 35px rgba(224, 30, 117, 0.6), inset 0 0 12px rgba(224, 30, 117, 0.3);
    }
}

/* --- Movie Theater Projector Beam --- */
.cinema-projector-beam {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 600px;
    background: radial-gradient(circle at 100% 0%, rgba(0, 242, 254, 0.15) 0%, rgba(79, 172, 254, 0.05) 50%, rgba(0, 0, 0, 0) 80%);
    transform: rotate(-15deg);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* Only display beam during the dark theater theme */
body.theme-movie .cinema-projector-beam {
    opacity: 1;
    animation: cinemaFlicker 6s infinite;
}

@keyframes cinemaFlicker {

    0%,
    100% {
        opacity: 0.85;
    }

    5% {
        opacity: 0.78;
    }

    10% {
        opacity: 0.92;
    }

    15% {
        opacity: 0.8;
    }

    22% {
        opacity: 0.95;
    }

    30% {
        opacity: 0.75;
    }

    38% {
        opacity: 0.88;
    }

    50% {
        opacity: 0.82;
    }

    70% {
        opacity: 0.94;
    }

    85% {
        opacity: 0.76;
    }
}

/* --- Movie Sorting Game Styling --- */
.movie-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 25px 0;
    width: 100%;
}

.movie-ticket {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--border-glass);
    border-radius: 16px;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #4A3E4D;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    position: relative;
    user-select: none;
}

.movie-ticket::before {
    content: '🎬';
    margin-right: 12px;
    font-size: 1.25rem;
}

.movie-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.movie-ticket.selected {
    border-color: var(--accent-rose);
    background: #FFF0F2;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(224, 139, 155, 0.35);
}

.movie-ticket.correct {
    border-color: #85e3b2;
    background: #f0fff4;
}

/* Jigsaw Give Up Button styling to override glass-btn defaults */
.puzzle-giveup-btn {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--accent-rose) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 28px;
    border-radius: 50px;
    color: white !important;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--font-body);
    box-shadow: 0 4px 15px rgba(224, 139, 155, 0.25);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    opacity: 1 !important;
    transform: none !important;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 270px;
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
}

.puzzle-giveup-btn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(224, 139, 155, 0.2);
}