* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
min-height: 100vh;
background: linear-gradient(135deg, #080b25, #191044, #30134b);
color: white;
font-family: 'Segoe UI', sans-serif;
}

.welcome-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 25px;
padding: 20px;
}

.moon {
font-size: 75px;
animation: float 3s ease-in-out infinite;
}

h1 {
font-size: clamp(35px, 8vw, 60px);
letter-spacing: 2px;
}

p {
color: #d4c8ff;
font-size: 18px;
}

button {
padding: 15px 30px;
border: 1px solid #c9a7ff;
border-radius: 30px;
background: #7545a8;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}

button:hover {
background: #a16bd8;
transform: scale(1.08);
}

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

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

}
#star-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.welcome-screen {
    position: relative;
    z-index: 1;
}
.galaxy {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Nebula clouds */

.nebula {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
}

.nebula-one {
    background: #8738ff;
    top: 10%;
    left: -150px;
}

.nebula-two {
    background: #1768ff;
    bottom: -150px;
    right: -100px;
}

/* Planets */

.planet {
    position: absolute;
    border-radius: 50%;
    animation: float 7s ease-in-out infinite;
}

.planet-one {
    width: 65px;
    height: 65px;
    background: radial-gradient(circle at 30% 30%, #ffb6d9, #a02c85, #38134c);
    top: 18%;
    left: 12%;
    box-shadow: 0 0 30px #bd55ff66;
}

.planet-two {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at 30% 30%, #9deaff, #2873b5, #10254f);
    bottom: 15%;
    right: 12%;
    animation-delay: 2s;
}

.planet-three {
    width: 35px;
    height: 35px;
    background: radial-gradient(circle at 30% 30%, #ffe4a6, #d47a35, #69331d);
    top: 65%;
    left: 18%;
    animation-delay: 1s;
}

.planet-four {
    width: 45px;
    height: 45px;
    background: radial-gradient(circle at 30% 30%, #b7ffda, #299b80, #164c50);
    top: 15%;
    right: 15%;
    animation-delay: 3s;
}

/* Saturn-style ring */

.planet-one::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 25px;
    border: 3px solid #e7b6ff;
    border-radius: 50%;
    top: 20px;
    left: -20px;
    transform: rotate(-25deg);
    opacity: 0.8;
}

.planet {
    box-shadow: 0 0 25px #ffffff22;
}

/* Shooting stars */

.shooting-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, white, transparent);
    transform: rotate(-35deg);
    animation: shoot 2s linear forwards;
}

@keyframes shoot {
    from {
        transform: translate(0, 0) rotate(-35deg);
        opacity: 1;
    }

    to {
        transform: translate(-300px, 300px) rotate(-35deg);
        opacity: 0;
    }
}
/* Magical entrance animation */

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.welcome-screen .moon {
    animation:
        float 3s ease-in-out infinite,
        reveal 1.5s ease-out both;
}

.welcome-screen h1 {
    opacity: 0;
    animation: reveal 1.5s ease-out 0.5s forwards;
    text-shadow: 0 0 15px #b58cff,
                 0 0 35px #7545a8;
}

.welcome-screen p {
    opacity: 0;
    animation: reveal 1.5s ease-out 1s forwards;
}

.welcome-screen button {
    opacity: 0;
    animation: reveal 1.5s ease-out 1.5s forwards;
    box-shadow: 0 0 20px #a16bd866;
}
.welcome-screen button {
    position: relative;
    overflow: hidden;
}

.welcome-screen button:active {
    transform: scale(0.95);
    box-shadow: 0 0 35px #d8aaff;
}
/* Saturn's rotating ring */

.planet-one::after {
    animation: ringGlow 4s ease-in-out infinite alternate;
}

@keyframes ringGlow {
    from {
        opacity: 0.4;
        filter: brightness(0.8);
    }

    to {
        opacity: 1;
        filter: brightness(1.5);
    }
}

/* Orbit around the blue planet */

.orbit-two {
    position: absolute;
    width: 130px;
    height: 130px;
    bottom: calc(15% - 20px);
    right: calc(12% - 20px);
    border: 1px solid #a9ddff55;
    border-radius: 50%;
    animation: orbit 8s linear infinite;
}

.orbit-moon {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #e4f5ff;
    border-radius: 50%;
    top: -6px;
    left: 50%;
    box-shadow: 0 0 15px #8edbff;
}

@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Floating magical particles */

.magic-particle {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e6caff;
    box-shadow: 0 0 12px #c18aff;
    pointer-events: none;
    animation: particleFloat 5s linear forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-180px) scale(1.5);
    }
}
/* Message screen */

.message-screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    gap: 30px;
    animation: reveal 1.5s ease-out;
}

.envelope-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}

.envelope {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #a16bd8, #58317e);
    border: 1px solid #e6caff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    cursor: pointer;
    transition: 0.4s;
    box-shadow: 0 0 20px #a16bd855;
}

.envelope p {
    font-size: 13px;
    margin-top: 8px;
}

.envelope:hover {
    transform: translateY(-10px) rotate(-5deg);
    box-shadow: 0 0 35px #d8aaff;
}

#letterDisplay {
    max-width: 450px;
    padding: 25px;
    color: #f2eaff;
    line-height: 1.8;
    font-size: 17px;
    background: #ffffff12;
    border: 1px solid #c9a7ff55;
    border-radius: 18px;
    display: none;
}
/* Envelope opening animation */

.envelope {
    position: relative;
    transform-origin: center;
}

.envelope.opened {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 0 35px #e6baff;
    border-color: white;
}

/* Letter reveal */

#letterDisplay {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* A little glowing decoration */

#letterDisplay::before {
    content: "✦  ✧  ✦";
    display: block;
    color: #e6caff;
    font-size: 20px;
    margin-bottom: 15px;
}
/* Sibling quiz */

.quiz-screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    gap: 25px;
    animation: reveal 1s ease-out;
}

.quiz-card {
    width: min(100%, 450px);
    padding: 30px 20px;
    background: #ffffff12;
    border: 1px solid #c9a7ff66;
    border-radius: 22px;
    box-shadow: 0 0 30px #7545a844;
}

.quiz-card h2 {
    margin-bottom: 25px;
    font-size: 22px;
}

#answerButtons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-option {
    width: 100%;
    background: #55347c;
    border: 1px solid #c9a7ff77;
}

.answer-option:hover {
    background: #8654b5;
}

#quizFeedback {
    margin-top: 20px;
    min-height: 28px;
}

#quizProgress {
    color: #d4c8ff;
}
/* Sibling quiz */

.quiz-screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    gap: 25px;
    animation: reveal 1s ease-out;
}

.quiz-card {
    width: min(100%, 450px);
    padding: 30px 20px;
    background: #ffffff12;
    border: 1px solid #c9a7ff66;
    border-radius: 22px;
    box-shadow: 0 0 30px #7545a844;
}

.quiz-card h2 {
    margin-bottom: 25px;
    font-size: 22px;
}

#answerButtons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-option {
    width: 100%;
    background: #55347c;
    border: 1px solid #c9a7ff77;
}

.answer-option:hover {
    background: #8654b5;
}

#quizFeedback {
    margin-top: 20px;
    min-height: 28px;
}

#quizProgress {
    color: #d4c8ff;
}
/* Birthday garden */

.garden-screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    gap: 30px;
    animation: reveal 1.5s ease-out;
}

.garden {
    display: grid;
    grid-template-columns: repeat(2, 130px);
    gap: 25px;
    justify-content: center;
}

.flower {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 55px;
    padding: 15px;
    border-radius: 20px;
    background: #ffffff12;
    border: 1px solid #d8aaff55;
    cursor: pointer;
    transition: 0.4s;
    animation: flowerBloom 1s ease-out both;
}

.flower:nth-child(2) {
    animation-delay: 0.3s;
}

.flower:nth-child(3) {
    animation-delay: 0.6s;
}

.flower:nth-child(4) {
    animation-delay: 0.9s;
}

.flower span {
    font-size: 14px;
    color: #e6caff;
}

.flower:hover {
    transform: translateY(-10px) scale(1.08);
    box-shadow: 0 0 25px #d8aaff88;
}

@keyframes flowerBloom {
    from {
        opacity: 0;
        transform: scale(0);
    }

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

#wishDisplay {
    max-width: 400px;
    min-height: 55px;
    color: #f2eaff;
    line-height: 1.7;
    padding: 10px;
}
/* Final birthday screen */

.final-screen {
    display: none;
    min-height: 100vh;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    gap: 25px;
    animation: reveal 1.5s ease-out;
}

.final-screen h1 {
    color: #ffd6f3;
    text-shadow: 0 0 20px #e78bff;
}

.final-subtitle {
    color: #e6caff;
}

/* Cake */

.birthday-cake {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 35px 0;
    animation: cakeFloat 3s ease-in-out infinite;
}

.cake-top {
    width: 120px;
    height: 30px;
    background: #ffb6d9;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff9ed4;
}

.cake-middle {
    width: 150px;
    height: 45px;
    background: linear-gradient(90deg, #9e61cc, #e9a9ff);
    border-radius: 8px 8px 15px 15px;
}

.cake-bottom {
    width: 180px;
    height: 45px;
    background: linear-gradient(90deg, #663b9b, #b77ce0);
    border-radius: 8px 8px 15px 15px;
}

.candles {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.candle {
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.candle:hover {
    transform: translateY(-8px);
}

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

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

/* Birthday letter */

.birthday-letter {
    width: min(100%, 450px);
    padding: 30px;
    margin-top: 20px;
    background: #ffffff12;
    border: 1px solid #d8aaff77;
    border-radius: 20px;
    line-height: 1.9;
    box-shadow: 0 0 30px #7545a844;
}

.birthday-letter h2 {
    color: #ffd6f3;
    margin-bottom: 20px;
}

.birthday-letter p {
    margin: 15px 0;
    font-size: 16px;
}
/* Responsive layout for phones, tablets and laptops */

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .envelope-container {
        gap: 40px;
    }

    .envelope {
        width: 130px;
        height: 130px;
    }

    .garden {
        grid-template-columns: repeat(4, 130px);
        gap: 25px;
    }

    .final-screen {
        padding: 50px;
    }
}

@media (max-width: 767px) {
    .garden {
        grid-template-columns: repeat(2, minmax(110px, 130px));
    }

    .envelope {
        width: 95px;
        height: 95px;
    }

    .birthday-cake {
        transform: scale(0.85);
    }
}
.birthday-letter {
    display: none;
}
/* Voice message */

.voice-message {
    width: min(100%, 400px);
    padding: 25px;
    background: #ffffff12;
    border: 1px solid #d8aaff77;
    border-radius: 20px;
    box-shadow: 0 0 25px #7545a844;
}

.voice-message h2 {
    color: #ffd6f3;
    margin-bottom: 12px;
}

.voice-message p {
    font-size: 15px;
    margin-bottom: 18px;
}

.voice-message audio {
    width: 100%;
}
/* Smooth screen transitions */

@keyframes screenReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.screen-transition {
    animation: screenReveal 0.9s ease-out both;
}
/* Interactive cosmic sparkles */

.cosmic-spark {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    font-size: 18px;
    animation: sparkleBurst 800ms ease-out forwards;
}

@keyframes sparkleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--move-x), var(--move-y))
                   scale(1.5) rotate(180deg);
    }
}