/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面主体样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    overflow-x: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* 主容器：包含整个蛋糕页面的容器，限制最大宽度为390px（支持iPhone 14等设备） */
.container {
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 桌面端响应式样式：当屏幕宽度大于390px时，给容器添加阴影和圆角，模拟手机效果 */
@media (min-width: 391px) {
    body {
        padding: 20px;
    }
    .container {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        overflow: hidden;
    }
}

/* 音乐图标：右上角的音乐开关按钮，相对于蛋糕背景容器定位 */
.music-icon {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 100;
    background-image: url('http://cdn.xuelongjiang.club/icon_voice_off@2x.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/* 音乐图标播放状态：当音乐播放时，显示播放图标并添加旋转动画 */
.music-icon.playing {
    background-image: url('http://cdn.xuelongjiang.club/icon_voice_on@2x.png');
    animation: rotate 6s linear infinite;
}

/* 旋转动画：用于音乐图标的旋转效果 */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 信封图标：右下角的信封按钮，点击可打开祝福语输入框 */
.letter-icon {
    width: 75px;
    height: 75px;
    position: absolute;
    right: 0px;
    bottom: 230px;
    z-index: 100;
    background-image: url('http://cdn.xuelongjiang.club/envelope_00@2x.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    animation: letterShake 2.64s ease-out infinite;
}

/* 信封摇晃动画：让信封图标有轻微的摇晃效果，吸引用户注意 */
@keyframes letterShake {
    5% { transform: rotate(0deg); }
    15% { transform: rotate(20deg); }
    20% { transform: rotate(-20deg); }
    25% { transform: rotate(10deg); }
    30% { transform: rotate(-5deg); }
    35% { transform: rotate(0deg); }
}

/* 信封图标隐藏状态：在预览模式下隐藏信封图标 */
.letter-icon.hidden {
    display: none;
}

/* 蛋糕容器：包含所有蛋糕相关元素的容器，固定高度120vh，使用相对定位 */
.cake-container {
    position: relative;
    width: 100%;
    height: 120vh;
    padding: 20px;
    overflow: visible;
}

/* 生日快乐文字：显示"生日快乐"文字的图片元素，绝对定位在顶部 */
.birthday-text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 375px;
    height: 204px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_happy_birthday@2x.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    z-index: 10;
}

/* 生日快乐文字显示状态：在预览模式下显示 */
.birthday-text.show {
    opacity: 1;
}

/* 火苗容器：包含单个火苗的容器（用于1-9根蜡烛），绝对定位在固定位置 */
.fire-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* margin-top: -45px; */
    margin-top: -155px;
    z-index: 25;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 火苗：单个火苗的样式，有旋转动画效果 */
.fire {
    width: 160px;
    height: 160px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_flame@2x2.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    animation: fireRotate 2s linear infinite;
}

/* 火苗熄灭状态：当吹灭蜡烛后，火苗逐渐消失 */
.fire.extinguished {
    opacity: 0;
    animation: fireClose 0.5s linear forwards;
}

/* 火苗旋转动画：让火苗有闪烁和大小变化的效果 */
@keyframes fireRotate {
    0% { background-size: 100%; opacity: 1.0; }
    25% { background-size: 90%; opacity: 1.0; }
    50% { background-size: 80%; opacity: 0.9; }
    75% { background-size: 90%; opacity: 1.0; }
    100% { background-size: 100%; opacity: 1.0; }
}

/* 火苗熄灭动画：火苗逐渐缩小并消失 */
@keyframes fireClose {
    0% { background-size: 100%; opacity: 1.0; }
    100% { background-size: 50%; opacity: 0; }
}

/* 数字火苗容器：包含两个数字火苗的容器（用于10-99根蜡烛），相对于火苗容器定位 */
.fire-number-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 10; */
    z-index: 10;
    /* 调整双火苗与双蜡烛的距离，负值表示向上移动（更靠近蜡烛） */
    margin-top: 10px;
}

/* 数字火苗：单个数字火苗的样式 */
.fire-number {
    width: 100px;
    height: 160px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_flame@2x2.png');
    background-size: 160px 160px;
    background-repeat: no-repeat;
    background-position: center;
    animation: fireRotate 2s linear infinite;
}

/* 数字火苗熄灭状态：当吹灭蜡烛后，数字火苗逐渐消失 */
.fire-number.extinguished {
    opacity: 0;
    animation: fireClose 0.5s linear forwards;
}

/* 第二个数字火苗：用于两位数蜡烛，通过负边距与第一个数字重叠 */
.fire-number-two {
    /* 调整右边火苗相对于左边火苗的位置，负值表示向左移动（更靠近） */
    margin-left: -60px;
}

/* 蛋糕容器：包含蛋糕主体的容器，绝对定位在固定位置（110vh的中心位置） */
.cake-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -90px;
    z-index: 15;
}

/* 蛋糕主体：蛋糕的图片元素 */
.cake-common {
    width: 200px;
    height: 300px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* 蛋糕装饰容器：包含蛋糕装饰的容器，使用绝对定位，相对于蛋糕主体定位 */
.cake-decoration-box {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

/* 蛋糕装饰：蛋糕上的装饰图片元素 */
.cake-decoration-common {
    width: 200px;
    height: 88px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* 蜡烛容器（单个蜡烛）：用于放置单个蜡烛的容器，绝对定位在装饰上方 */
.cake-candle-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0px;
}

/* 蜡烛容器（数字蜡烛）：用于放置数字蜡烛的容器，绝对定位在装饰上方 */
.cake-number-candle-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 125px;
}

/* 单个蜡烛：0根蜡烛时显示的默认蜡烛样式 */
.cake-candle {
    width: 48px;
    height: 96px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_candle@2x.png');
    margin-top: -50px;
}

/* 数字蜡烛：1-99根蜡烛时显示的数字蜡烛样式 */
.cake-number-candle-common {
    width: 48px;
    height: 96px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -50px;
}

/* 名字输入框容器：包含名字输入框的容器，绝对定位在蛋糕下方 */
.edit-to-name-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 70px;
    z-index: 25;
}

/* 名字输入框外层容器：带有丝带背景的容器 */
.edit-to-name-container {
    height: 48px;
    width: 160px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_ribbon@2x.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 名字输入框：用于输入收蛋糕人名字的输入框 */
.edit-to-name {
    width: 108px;
    height: 25px;
    font-size: 18px;
    color: #783200;
    border: none;
    background: transparent;
    text-align: center;
    outline: none;
}

/* 名字输入框禁用状态：在预览模式下禁用输入 */
.edit-to-name:disabled {
    opacity: 0.5;
}

/* 操作按钮区域（旧版）：旧版的操作按钮容器，已废弃 */
.operator-box {
    margin-top: 64px;
    width: 100%;
    padding: 0 16px;
}

/* 操作按钮区域（新版）：包含预览、送出和编辑按钮的容器，绝对定位在底部 */
.operator-box-new {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 375px;
    padding: 0 16px;
    z-index: 30;
}

/* 操作按钮区域预览和送出：包含预览和送出按钮的容器 */
.operator-box-new-pre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* 预览按钮和送出按钮：预览和送出按钮的通用样式 */
.pre-view-container-new,
.send-container-new {
    width: 80px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
}

/* 预览按钮：半透明黑色背景的预览按钮 */
.pre-view-container-new {
    background: rgba(0, 0, 0, 0.3);
}

/* 送出按钮：红色渐变背景的送出按钮 */
.send-container-new {
    background: linear-gradient(90deg, #FE5244 0%, #FF160A 100%);
    width: 100px;
}

/* 操作按钮区域编辑：包含换背景、换蛋糕、换蜡烛、换装饰、换音乐按钮的容器 */
.operator-box-new-edit {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 16px;
}

/* 编辑按钮容器：单个编辑按钮（换背景、换蛋糕等）的容器 */
.edit-candle-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 编辑图标：编辑按钮的图标样式 */
.edit-icon-common {
    width: 48px;
    height: 48px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* 编辑按钮文字：编辑按钮下方的文字说明 */
.edit-candle-text {
    margin-top: 5px;
    font-size: 16px;
    color: #fff;
}

/* 提示容器：包含提示文字和吹蜡烛按钮的容器，绝对定位在底部 */
.tip-container {
    position: absolute;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 35;
    width: 100%;
    max-width: 375px;
}

/* 提示容器盒子：包含提示文字的白色圆角盒子 */
.tip-container-box {
    width: 236px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 提示文字：提示用户点击吹蜡烛按钮的文字 */
.tip-box {
    font-size: 18px;
    color: #FF160A;
}

/* 吹蜡烛按钮容器：红色圆形按钮，用于吹灭蜡烛 */
.blow-candle-container {
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, #FE5244 0%, #FF160A 100%);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    cursor: pointer;
}

/* 吹蜡烛按钮文字：按钮上的"吹"字 */
.candle-box {
    font-size: 24px;
    color: #fff;
    font-weight: 600;
}

/* 气球和纸屑基础样式（重复定义，已废弃） */
.balloon-base {
    width: 96px;
    height: 264px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.paper1-base {
    width: 48px;
    height: 48px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* 信封弹窗：点击信封图标后弹出的祝福语输入弹窗 */
.letter-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    min-height: 482px;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(360deg, #FFF5EB 0%, #FFEAD6 100%);
    border: 8px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    z-index: 1000;
    padding: 20px;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 信封弹窗显示状态：当弹窗显示时应用此样式 */
.letter-box.show {
    display: block;
}

/* 信封弹窗关闭按钮：弹窗右上角的关闭按钮 */
.letter-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 22px;
    height: 22px;
    background-image: url('http://cdn.xuelongjiang.club/cake_letter_window_close@2x.png');
    background-size: 22px 22px;
    cursor: pointer;
}

/* 信封弹窗文字容器：包含祝福语输入框的容器 */
.letter-text-box {
    margin-top: 20px;
}

/* 信封弹窗文字输入容器：祝福语输入框的外层容器 */
.letter-text-container {
    width: 273px;
    min-height: 225px;
    border-radius: 5px;
}

/* 信封弹窗文字输入框：用于输入祝福语的文本域 */
.letter-text {
    width: 100%;
    min-height: 250px;
    font-size: 16px;
    color: #623200;
    line-height: 32px;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
}

/* 信封弹窗操作按钮容器：包含保存按钮的容器 */
.letter-operator-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 信封弹窗操作按钮：保存祝福语的红色按钮 */
.letter-operator-box {
    width: 240px;
    height: 48px;
    background: linear-gradient(90deg, #FE5244 0%, #FF160A 100%);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

/* 底部颜色条：页面底部的装饰色条（已注释，未使用） */
.bottom-box {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* 气球动画基础样式：气球的通用样式，绝对定位在容器内 */
.balloon-base {
    width: 96px;
    height: 264px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 50;
}

/* 气球1：第一个气球的样式和位置，15秒上升动画 */
.balloon1 {
    left: 7%;
    bottom: -264px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_balloon1@2x.png');
    animation: balloonFloat 15s linear infinite;
}

/* 气球2：第二个气球的样式和位置，11秒上升动画 */
.balloon2 {
    left: 33%;
    bottom: -264px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_balloon2@2x.png');
    animation: balloonFloat 11s linear infinite;
}

/* 气球3：第三个气球的样式和位置，7秒上升动画 */
.balloon3 {
    left: 60%;
    bottom: -264px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_balloon1@2x.png');
    animation: balloonFloat 7s linear infinite;
}

/* 气球4：第四个气球的样式和位置，9.5秒上升动画 */
.balloon4 {
    left: 87%;
    bottom: -264px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_balloon3@2x.png');
    animation: balloonFloat 9.5s linear infinite;
}

/* 气球5：第五个气球的样式和位置，11.5秒上升动画 */
.balloon5 {
    left: 36%;
    bottom: -264px;
    background-image: url('http://cdn.xuelongjiang.club/pic_btc_balloon4@2x.png');
    animation: balloonFloat 11.5s linear infinite;
}

/* 气球上升动画：气球从底部向上飘动的动画效果 */
@keyframes balloonFloat {
    0% { bottom: -200px; }
    10% { bottom: 0px; }
    20% { bottom: 200px; }
    30% { bottom: 400px; }
    40% { bottom: 600px; }
    50% { bottom: 800px; }
    60% { bottom: 1000px; }
    70% { bottom: 1200px; }
    80% { bottom: 1400px; }
    90% { bottom: 1600px; }
    100% { bottom: 1800px; }
}

/* 纸屑动画基础样式：纸屑的通用样式，绝对定位在容器内 */
.paper1-base {
    width: 48px;
    height: 48px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 50;
}

/* 纸屑：添加纸屑下落动画 */
.paper {
    animation: paperFall 6s linear infinite;
}

/* 纸屑下落动画：纸屑从顶部向下飘落的动画效果 */
@keyframes paperFall {
    0% { top: -48px; }
    10% { top: 0px; }
    20% { top: 200px; }
    30% { top: 400px; }
    40% { top: 600px; }
    50% { top: 800px; }
    60% { top: 1000px; }
    70% { top: 1200px; }
    80% { top: 1400px; }
    90% { top: 1600px; }
    100% { top: 1800px; }
}

/* 烟花效果基础样式：烟花的通用样式，绝对定位在容器内 */
.yanhua-base {
    width: 150px;
    height: 150px;
    position: absolute;
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 60;
    animation: yanhuaImg 1.5s linear infinite;
}

/* 烟花1：第一个烟花的位置，位于页面左侧 */
.yanhua-base1 {
    left: 15%;
    top: 30%;
    margin-top: -75px;
    transform: translateX(-50%);
}

/* 烟花2：第二个烟花的位置，位于页面中心 */
.yanhua-base2 {
    left: 50%;
    margin-left: -75px;
    top: 30%;
    margin-top: -75px;
}

/* 烟花3：第三个烟花的位置，位于页面右侧 */
.yanhua-base3 {
    left: 85%;
    top: 30%;
    margin-top: -75px;
    transform: translateX(-50%);
}

/* 烟花图片动画：烟花图片的帧动画效果，循环播放烟花绽放的各个阶段 */
@keyframes yanhuaImg {
    0% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_0.png'); }
    10% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_1.png'); }
    20% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_2.png'); }
    30% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_3.png'); }
    40% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_4.png'); }
    50% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_5.png'); }
    60% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_6.png'); }
    70% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_7.png'); }
    80% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_8.png'); }
    90% { background-image: url('http://cdn.xuelongjiang.club/pic_firework_pink_11.png'); }
    100% { backgrounshuang:  url('http://cdn.xuelongjiang.club/pic_firework_pink_12.png'); }
}

/* 隐藏类：通用隐藏样式，用于隐藏不需要显示的元素 */
.hidden {
    display: none !important;
}

/* 响应式样式：小屏幕设备（宽度小于等于390px）- 手机端全屏显示，支持iPhone 14等设备 */
@media (max-width: 390px) {
    body {
        padding: 0;
        margin: 0;
        height: 100vh;
        overflow: hidden;
    }
    .container {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
        /* overflow-y: auto; */
        overflow-y: hidden;
        overflow-x: hidden;
    }
    .cake-common {
        width: 180px;
        height: 270px;
    }
}

/* 响应式样式：桌面端（宽度大于390px），固定容器高度为844px（iPhone 14标准高度） */
@media (min-width: 391px) {
    .container {
        height: 844px;
        min-height: 844px;
    }
}