body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #ffe6f0 0%, #f9f6ff 100%);
    font-family: 'Segoe UI', '微软雅黑', Arial, sans-serif;
    min-height: 100vh;
}

.cake-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

.cake {
    position: relative;
    width: 220px;
    height: 220px;
    margin-bottom: 24px;
}

.cake-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 60px;
    background: #fff0f5;
    border-radius: 90px 90px 60px 60px / 60px 60px 40px 40px;
    box-shadow: 0 8px 24px rgba(255, 105, 180, 0.15);
    z-index: 3;
}

.cake-middle {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 60px;
    background: #ffb6c1;
    border-radius: 90px 90px 60px 60px / 60px 60px 40px 40px;
    box-shadow: 0 4px 16px rgba(255, 182, 193, 0.18);
    z-index: 2;
}

.cake-bottom {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 60px;
    background: #fff;
    border-radius: 90px 90px 60px 60px / 60px 60px 40px 40px;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.12);
    z-index: 1;
}

.candle {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    width: 16px;
    height: 48px;
    z-index: 10;
}

.candle::before {
    content: '';
    display: block;
    width: 8px;
    height: 32px;
    background: linear-gradient(90deg, #ffe4e1 60%, #ff69b4 100%);
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(255, 105, 180, 0.15);
}

.flame {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 60% 40%, #ffd700 60%, #ff8c00 100%);
    border-radius: 50%;
    animation: flame-move 1.2s infinite alternate cubic-bezier(.5,1.5,.5,-0.5), flame-flicker 0.8s infinite alternate;
    box-shadow: 0 0 16px 8px #ffd70088;
}

@keyframes flame-move {
    0% { left: 50%; }
    25% { left: 48%; }
    50% { left: 52%; }
    75% { left: 51%; }
    100% { left: 50%; }
}

@keyframes flame-flicker {
    0% { opacity: 1; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 0.85; transform: translateX(-50%) scaleY(1.15); }
}

.sprinkles {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 60px;
    pointer-events: none;
}
.sprinkles::before, .sprinkles::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
}
.sprinkles::before {
    width: 8px; height: 8px; background: #ff69b4; left: 20px; top: 12px;
    box-shadow: 40px 8px #ffd700, 80px 16px #87cefa, 120px 24px #32cd32;
}
.sprinkles::after {
    width: 6px; height: 6px; background: #32cd32; left: 60px; top: 36px;
    box-shadow: 30px 12px #ff69b4, 90px 18px #ffd700, 110px 28px #87cefa;
}

.cake-text {
    text-align: center;
    color: #ff69b4;
    margin-top: 8px;
}
.cake-text h1 {
    font-size: 2.2em;
    margin: 0 0 8px 0;
    font-weight: bold;
    letter-spacing: 2px;
}
.cake-text p {
    font-size: 1.2em;
    margin: 0;
    color: #333;
}

.ai-chatbox {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 420px;
    max-width: 98vw;
    height: 320px;
    background: rgba(255,255,255,0.97);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 32px rgba(120, 80, 180, 0.12);
    font-family: 'Segoe UI', '微软雅黑', Arial, sans-serif;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-chatbox-header {
    background: linear-gradient(90deg, #ff69b4 60%, #ffd700 100%);
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 12px 0;
    letter-spacing: 2px;
}

.ai-chatbox-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #fafafa;
    font-size: 1em;
}

.ai-chatbox-input {
    display: flex;
    border-top: 1px solid #eee;
    padding: 12px;
    background: #fff;
}

.ai-chatbox-input input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1em;
    outline: none;
    margin-right: 8px;
}

.ai-chatbox-input button {
    background: #ff69b4;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s;
}
.ai-chatbox-input button:hover {
    background: #ff85c2;
}

.user-msg {
    text-align: right;
    color: #ff69b4;
    margin-bottom: 8px;
}
.ai-msg {
    text-align: left;
    color: #333;
    margin-bottom: 8px;
}

.fireworks {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 120px;
    pointer-events: none;
    z-index: 20;
}

.firework {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    top: 60px;
    animation: firework-explode 1.8s infinite;
}
.firework:nth-child(1) { background: #ffd700; animation-delay: 0s; }
.firework:nth-child(2) { background: #ff69b4; animation-delay: 0.3s; }
.firework:nth-child(3) { background: #32cd32; animation-delay: 0.6s; }
.firework:nth-child(4) { background: #87cefa; animation-delay: 0.9s; }
.firework:nth-child(5) { background: #ffb6c1; animation-delay: 1.2s; }
.firework:nth-child(6) { background: #ffa500; animation-delay: 1.5s; }
.firework:nth-child(7) { background: #8a2be2; animation-delay: 1.8s; }
.firework:nth-child(8) { background: #00ced1; animation-delay: 2.1s; }

@keyframes firework-explode {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(0);
        box-shadow: none;
    }
    10% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    30% {
        opacity: 1;
        /* 8个方向发散，距离和颜色各异 */
        box-shadow:
            0 -48px 0 6px #ffd700,
            34px -34px 0 6px #ff69b4,
            48px 0 0 6px #32cd32,
            34px 34px 0 6px #87cefa,
            0 48px 0 6px #ffb6c1,
            -34px 34px 0 6px #ffa500,
            -48px 0 0 6px #8a2be2,
            -34px -34px 0 6px #00ced1;
    }
    80% {
        opacity: 0.5;
        transform: scale(1.2) translateY(-40px);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(0);
        box-shadow: none;
    }
}

@media screen and (max-width: 600px) {
    .cake-container { min-height: 50vh; }
    .cake { width: 140px; height: 140px; }
    .cake-top, .cake-middle, .cake-bottom { width: 110px; height: 36px; }
    .ai-chatbox {
        width: 98vw;
        height: 48vh;
        bottom: 12px;
        border-radius: 12px 12px 0 0;
    }
}