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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 50%, #0c0c1e 100%);
    min-height: 100vh;
    overflow: hidden;
    color: white;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sound Toggle Button */
.sound-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
}

.sound-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.sound-toggle:active {
    transform: scale(0.95);
}

.sound-icon {
    width: 24px;
    height: 24px;
    display: none;
}

.sound-icon svg {
    width: 100%;
    height: 100%;
}

/* Show correct icon based on state */
.sound-toggle.playing .sound-on {
    display: block;
    animation: pulse-sound 1s ease-in-out infinite;
}

.sound-toggle:not(.playing) .sound-off {
    display: block;
}

@keyframes pulse-sound {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Sound waves animation when playing */
.sound-toggle.playing::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    animation: sound-wave 1.5s ease-out infinite;
}

@keyframes sound-wave {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

#fireworks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -20px;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
}

/* Stars background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow:
        100px 50px white,
        200px 150px white,
        300px 80px white,
        400px 200px white,
        500px 100px white,
        600px 250px white,
        700px 50px white,
        800px 180px white,
        150px 300px white,
        250px 400px white,
        350px 350px white,
        450px 450px white,
        550px 380px white,
        650px 420px white,
        750px 500px white,
        50px 150px white,
        900px 300px white,
        950px 150px white,
        1000px 400px white,
        1100px 200px white;
    animation: twinkle 3s ease-in-out infinite;
}

.stars::after {
    box-shadow:
        50px 100px white,
        150px 200px white,
        250px 50px white,
        350px 250px white,
        450px 150px white,
        550px 300px white,
        650px 100px white,
        750px 230px white,
        100px 350px white,
        200px 450px white,
        300px 400px white,
        400px 500px white,
        500px 430px white,
        600px 470px white,
        700px 550px white,
        800px 100px white,
        850px 350px white,
        1000px 250px white,
        1050px 450px white,
        1150px 150px white;
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Title styles */
.title {
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    animation: word-reveal 0.8s ease-out forwards;
}

.word.happy {
    animation-delay: 0.2s;
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.word.new {
    animation-delay: 0.5s;
    background: linear-gradient(90deg, #feca57, #48dbfb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.word.year {
    animation-delay: 0.8s;
    background: linear-gradient(90deg, #48dbfb, #ff9ff3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes word-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Year display */
.year-display {
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 900;
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 0.05em;
}

.digit {
    display: inline-block;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 50%, #ff6347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    animation: digit-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

.digit:nth-child(1) { animation-delay: 1.2s; }
.digit:nth-child(2) { animation-delay: 1.4s; }
.digit:nth-child(3) { animation-delay: 1.6s; }
.digit:nth-child(4) { animation-delay: 1.8s; }

@keyframes digit-pop {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Glow animation for year */
.year-display {
    animation: glow-pulse 2s ease-in-out infinite;
    animation-delay: 2.5s;
}

@keyframes glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 100, 0, 0.5));
    }
}

/* Message */
.message {
    font-size: clamp(1rem, 3vw, 1.5rem);
    opacity: 0;
    animation: fade-in 1s ease-out 2.2s forwards;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* Sparkles */
.decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, white 0%, transparent 70%);
    border-radius: 50%;
    animation: sparkle-animation 2s ease-in-out infinite;
}

.sparkle::before,
.sparkle::after {
    content: '';
    position: absolute;
    background: white;
}

.sparkle::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.sparkle::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.sparkle-1 { top: 10%; left: 10%; animation-delay: 0s; }
.sparkle-2 { top: 20%; right: 15%; animation-delay: 0.3s; }
.sparkle-3 { top: 60%; left: 5%; animation-delay: 0.6s; }
.sparkle-4 { top: 70%; right: 10%; animation-delay: 0.9s; }
.sparkle-5 { top: 40%; left: 15%; animation-delay: 1.2s; }
.sparkle-6 { top: 30%; right: 20%; animation-delay: 1.5s; }

@keyframes sparkle-animation {
    0%, 100% {
        transform: scale(0.5) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
}

/* Celebrate button */
.celebrate-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: fade-in 1s ease-out 2.5s forwards;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.celebrate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.celebrate-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

.celebrate-btn:hover::before {
    left: 100%;
}

.celebrate-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.btn-icon {
    font-size: 1.4rem;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Responsive */
@media (max-width: 768px) {
    .title {
        gap: 0.1em;
    }

    .celebrate-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    .sound-toggle {
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
    }

    .sound-icon {
        width: 20px;
        height: 20px;
    }
}