:root {
    --blue: #1a237e;
    --light-blue: #0288d1;
    --green: #2d5a27;
    --brown: #5d4037;
    --orange: #e67e22;
    --yellow: #f1c40f;
    --background: #fdfcf0;
    --text: var(--brown);
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Georgia', serif;
    margin: 0; padding: 0;
    overflow-x: hidden;
}

/* --- Bouncer / Construction Zone --- */
#bouncer-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 20px, #000 20px, #000 40px);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 3000;
}

.construction-zone {
    background: #fff; padding: 40px; border: 10px solid #000;
    text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    max-width: 80%; border-radius: 10px;
}

.construction-emoji { font-size: 8rem; animation: shake 0.5s infinite; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

.shout-text {
    font-size: 4rem; font-weight: 900; color: #b03a2e; text-transform: uppercase;
    margin: 20px 0; font-family: 'Arial Black', sans-serif; animation: pulse 0.5s infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

#bouncer-countdown { margin-top: 30px; background: #000; color: #fff; padding: 15px 30px; font-size: 1.5rem; font-family: Arial, sans-serif;}

/* --- Gift Layer --- */
#gift-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, var(--light-blue), var(--background));
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 2000; text-align: center;
    transition: opacity 0.8s ease, transform 0.8s ease;
    cursor: pointer;
}
.gift-visual { font-size: 12rem; animation: wobble 2s infinite ease-in-out; }
.gift-text { font-size: 2.2rem; color: var(--blue); font-weight: bold; margin-top: 20px; }
@keyframes wobble { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(10deg) scale(1.1); } 30% { transform: rotate(-10deg) scale(1.1); } }

/* --- Main Content --- */
#main-content { 
    display: none; max-width: 1200px; margin: 0 auto; 
    padding: 6rem 1rem 4rem 1rem; text-align: center;
    opacity: 0; transition: opacity 1.2s ease;
}

h1 { color: var(--blue); font-size: 3rem; margin-bottom: 2rem; position: relative; z-index: 10; }

.gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px; padding: 20px; position: relative; z-index: 10;
}

.gallery img, .gallery video {
    width: 100%; height: 450px; object-fit: contain; background: #fff;
    border: 12px solid white; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer; transition: transform 0.3s; border-radius: 4px;
}
.gallery img:hover, .gallery video:hover { transform: scale(1.03) rotate(1deg); }

.music-toggle { position: fixed; top: 20px; right: 20px; background: var(--blue); color: white; padding: 15px 30px; border-radius: 40px; cursor: pointer; z-index: 1000; font-weight: bold; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-size: 1.2rem;}
.music-toggle:hover { transform: scale(1.05); }

.odyssey-section { 
    font-style: italic; margin: 4rem auto; max-width: 800px; padding: 3rem; 
    border-radius: 20px; background: #fff9eb; border: 3px dashed var(--orange);
    color: var(--blue); font-size: 1.4rem; position: relative; z-index: 10; line-height: 1.6;
    white-space: pre-wrap; text-align: left;
}

/* --- Falling Flowers Animation --- */
.petal-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2500; overflow: hidden; }
.falling-flower { position: absolute; animation: fall linear infinite; opacity: 0.8; }
.falling-flower svg { width: 100%; height: 100%; }
@keyframes fall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(110vh) rotate(720deg); } }

.flower-svg { position: fixed; width: 100px; height: 100px; z-index: 1; opacity: 0.6; pointer-events: none;}

/* --- Lightbox --- */
#lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 4000; align-items: center; justify-content: center; cursor: pointer; }
#lightbox img, #lightbox video { max-width: 90%; max-height: 80%; border: 10px solid white; border-radius: 10px; }

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Bouncer Screen */
    .construction-emoji { font-size: 4rem; }
    .shout-text { font-size: 2.5rem; margin: 10px 0; }
    .construction-zone { padding: 20px; border-width: 5px; max-width: 90%; }
    #bouncer-countdown { font-size: 1rem; padding: 10px 15px; margin-top: 15px; }

    /* Gift Layer */
    .gift-visual { font-size: 7rem; }
    .gift-text { font-size: 1.5rem; }

    /* Main Content */
    #main-content { padding: 4rem 1rem 2rem 1rem; }
    h1 { font-size: 2rem; margin-top: 1rem; }
    
    .music-toggle { top: 10px; right: 10px; padding: 8px 15px; font-size: 1rem; }
    
    .odyssey-section { padding: 1.5rem; font-size: 1.1rem; margin: 2rem auto; border-width: 2px; }

    /* Gallery - Force single column on phones */
    .gallery { grid-template-columns: 1fr; gap: 20px; padding: 10px 0; }
    .gallery img, .gallery video { height: 350px; border-width: 6px; }

    /* Corner Flowers */
    .flower-svg { width: 60px; height: 60px; }
}