:root {
    /* Colors */
    --primary-bg: #1a1a2e;
    --secondary-bg: #16213e;
    --accent-color: #e94560;
    --text-color: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Cake Colors (Default) */
    --cake-flavor: #f4a460;
    --cake-icing: #ff69b4;

    /* Fonts */
    --font-main: 'Outfit', sans-serif;
    --font-display: 'Playfair Display', serif;
}

[data-theme="light"] {
    --primary-bg: #fdf2f8;
    --secondary-bg: #ffffff;
    --accent-color: #db2777;
    --text-color: #1f2937;
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--primary-bg);
    color: var(--text-color);
    overflow: hidden;
    /* Prevent scrollbars for immersive feel */
    transition: background-color 0.5s ease, color 0.5s ease;
}

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

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.primary-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: var(--font-main);
    font-weight: 500;
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.icon-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.icon-btn:hover {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}

/* Theme Toggle */
#theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

[data-theme="light"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: none;
}

/* Overlays & Modals */
.overlay,
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay.active,
.modal:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

.overlay-content,
.modal-content {
    text-align: center;
    padding: 40px;
    max-width: 90%;
    width: 400px;
}

.overlay-content p,
.modal-content p {
    margin-bottom: 25px;
}

.hidden {
    display: none !important;
}

/* Cake Stage Placeholder */
.cake-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: hidden;
}

/* Blow Button */
.blow-btn {
    margin-top: 40px;
    padding: 16px 40px;
    font-size: 1.4rem;
    font-family: var(--font-main);
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    z-index: 100;
}

.blow-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

.blow-btn:active {
    transform: translateY(0) scale(0.98);
}

.cake-container {
    position: relative;
    transform-style: preserve-3d;
    width: 300px;
    height: 300px;
    transform: rotateX(-20deg) rotateY(0deg);
    transition: transform 0.5s ease;
}

/* Plate */
.plate {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #f8f9fa 20%, #e9ecef 60%, #dee2e6 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(-50px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.8);
    border: 2px solid #ced4da;
}

/* Cake Body */
.cake {
    position: absolute;
    width: 250px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.cake-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cake-flavor);
    border-radius: 50%;
    transform: rotateX(90deg);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 3D Sides approximation using multiple layers or pseudo-elements is complex in pure CSS.
   We will use a cylindrical look using a stacked approach or a simple CSS cylinder.
   For simplicity and performance, we'll use a "stack" of layers to simulate 3D volume.
*/
.layer {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: var(--cake-flavor);
    border-radius: 50%;
    transform: rotateX(90deg) translateZ(var(--z-offset));
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.layer:nth-child(odd) {
    background-color: color-mix(in srgb, var(--cake-flavor), black 5%);
}

/* Icing */
.icing-top {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: var(--cake-icing);
    border-radius: 50%;
    transform: rotateX(90deg) translateZ(75px);
    /* Top of the cake */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
    z-index: 10;
}

.icing-drip {
    position: absolute;
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(74px);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}

/* Candles */
.candles-container {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(25px);
    transform-style: preserve-3d;
    z-index: 20;
    pointer-events: none;
}

.candle {
    position: absolute;
    width: 10px;
    height: 50px;
    background: linear-gradient(90deg,
            #f8e8d0 0%,
            #fff5e6 20%,
            #fffaf0 50%,
            #fff5e6 80%,
            #f0d8b8 100%);
    border-radius: 3px 3px 4px 4px;
    transform-origin: bottom center;
    box-shadow:
        1px 2px 4px rgba(0, 0, 0, 0.2),
        inset -2px 0 4px rgba(0, 0, 0, 0.05);
    transform-style: preserve-3d;
    overflow: visible;
}

/* Colorful stripe on candle */
.candle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 100, 150, 0.5) 8px,
            rgba(255, 100, 150, 0.5) 12px,
            transparent 12px,
            transparent 20px,
            rgba(100, 200, 255, 0.5) 20px,
            rgba(100, 200, 255, 0.5) 24px,
            transparent 24px,
            transparent 32px,
            rgba(255, 200, 100, 0.5) 32px,
            rgba(255, 200, 100, 0.5) 36px);
    border-radius: 3px;
}

/* Wax drip effect */
.candle::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: linear-gradient(180deg, #fff5e6 0%, #f8e8d0 100%);
    border-radius: 50% 50% 40% 40%;
}

/* Wick */
.wick {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, #1a1a1a 0%, #333 40%, #555 100%);
    border-radius: 1px;
}

/* Burnt wick tip */
.wick::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ff6600 20%, #333 60%, #111 100%);
    border-radius: 50%;
}

/* Flame - enhanced candle flame */
.flame {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 18px;
    background: linear-gradient(0deg,
            #fff 0%,
            #fffbe6 15%,
            #ffe066 30%,
            #ffaa00 50%,
            #ff6600 75%,
            #ff4400 90%,
            #cc2200 100%);
    border-radius: 50% 50% 50% 50% / 100% 100% 40% 40%;
    animation: flicker 0.15s infinite ease-in-out alternate;
    transform-origin: center bottom;
    transition: opacity 0.3s, transform 0.3s;
    filter: brightness(1.2);
    box-shadow:
        0 0 3px 2px rgba(255, 255, 200, 1),
        0 0 8px 4px rgba(255, 180, 50, 0.8),
        0 0 16px 6px rgba(255, 120, 20, 0.5),
        0 0 30px 10px rgba(255, 80, 0, 0.25);
}

/* Bright hot core */
.flame::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 230, 0.95) 40%,
            rgba(255, 240, 180, 0.7) 70%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 100% 100% 40% 40%;
}

/* Outer glow layer */
.flame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 12px;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 200, 0.6) 50%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 100% 100% 40% 40%;
    filter: blur(1px);
}

.flame.out {
    opacity: 0;
    transform: translateX(-50%) scale(0);
    box-shadow: none;
    filter: none;
}

/* Smoke */
.smoke {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 16px;
    background: radial-gradient(ellipse, rgba(180, 180, 180, 0.7) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0;
    pointer-events: none;
}

.smoke.puff {
    animation: smoke-rise 1.2s forwards ease-out;
}

@keyframes flicker {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }

    100% {
        transform: translateX(-50%) scaleY(1.15) scaleX(0.9);
    }
}

@keyframes wobble {

    0%,
    100% {
        transform: translateX(-50%) translateZ(60px) rotate(0deg);
    }

    25% {
        transform: translateX(-52%) translateZ(60px) rotate(-2deg);
    }

    75% {
        transform: translateX(-48%) translateZ(60px) rotate(2deg);
    }
}

@keyframes smoke-rise {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(2.5);
    }
}

/* Age Balloon */
.balloon {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 80px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%, #ff9a9e, #fad0c4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.1), 5px 10px 15px rgba(0, 0, 0, 0.2);
    animation: float 3s ease-in-out infinite;
    z-index: 50;
}

.balloon::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #fad0c4;
}

.balloon::before {
    /* String */
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
}

@keyframes float {

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

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

/* Message Display */
.fullscreen-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-bg);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

#birthday-message {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.5;
    max-width: 800px;
    margin-bottom: 40px;
    white-space: pre-wrap;
    /* Preserve newlines */
}

/* Gift Box */
#gift-box-container {
    margin-top: 50px;
    perspective: 1000px;
    cursor: pointer;
}

.gift-box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(45deg);
    transition: transform 0.5s;
}

.gift-box:hover {
    transform: rotateX(-20deg) rotateY(45deg) scale(1.1);
}

.gift-box .box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    transform: translateZ(-50px);
    /* Center it roughly */
    /* Simple cube approximation for CSS-only box */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* We need a real 3D cube for the box to look good */
.gift-box div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff6b6b;
    border: 2px solid #ee5253;
}

/* Constructing a simple cube */
.gift-box .front {
    transform: translateZ(50px);
}

.gift-box .back {
    transform: rotateY(180deg) translateZ(50px);
}

.gift-box .right {
    transform: rotateY(90deg) translateZ(50px);
}

.gift-box .left {
    transform: rotateY(-90deg) translateZ(50px);
}

.gift-box .top {
    transform: rotateX(90deg) translateZ(50px);
    background: #ff9ff3;
}

.gift-box .bottom {
    transform: rotateX(-90deg) translateZ(50px);
}

/* Lid */
.gift-box .lid {
    position: absolute;
    width: 110px;
    height: 110px;
    background: #ff9ff3;
    top: -5px;
    left: -5px;
    transform: translateZ(50px);
    /* On top */
    transform-origin: top;
    transition: transform 1s;
}

/* Open Animation */
.gift-box.open .lid {
    transform: translateZ(50px) rotateX(-120deg);
}

/* Surprise Image */
#surprise-image-container img {
    max-width: 80vw;
    max-height: 60vh;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .cake-stage {
        padding: 20px;
    }

    .cake-container {
        transform: rotateX(-20deg) rotateY(0deg) scale(0.7);
    }

    .plate {
        width: 280px;
        height: 280px;
    }

    .blow-btn {
        padding: 14px 32px;
        font-size: 1.2rem;
        margin-top: 20px;
    }

    .overlay-content,
    .modal-content {
        padding: 25px;
        width: 90%;
    }

    .overlay-content h1 {
        font-size: 1.5rem;
    }

    .overlay-content p,
    .modal-content p {
        font-size: 0.95rem;
    }

    .primary-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }

    #birthday-message {
        font-size: 1.3rem;
        padding: 0 15px;
    }

    #gift-box-container {
        margin-top: 30px;
    }

    .gift-box {
        transform: rotateX(-20deg) rotateY(45deg) scale(0.7);
    }

    .gift-box:hover {
        transform: rotateX(-20deg) rotateY(45deg) scale(0.8);
    }

    .gift-box.open .lid-container {
        transform: translateY(-60px) rotateX(-110deg);
    }

    #surprise-image-container img {
        max-width: 90vw;
        max-height: 50vh;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .cake-container {
        transform: rotateX(-20deg) rotateY(0deg) scale(0.55);
    }

    .blow-btn {
        padding: 12px 28px;
        font-size: 1.1rem;
    }

    #birthday-message {
        font-size: 1.1rem;
    }
}