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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #f0f2f5;
}

.container {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/startup/beijing.png');
    background-size: cover;
    background-position: top center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 60vh;
    background-image: url('../images/startup/wenanbejing.png');
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* 主要内容区域样式 */
.main-content {
    width: 100%;
    position: absolute;
    bottom: calc(60vh - 20px);
    z-index: 2;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-area {
    text-align: center;
    margin-bottom: min(4vh, 30px);
    width: 100%;
}

.main-title {
    width: 100%;
    height: min(12vh, 100px);
    background-image: url('../images/startup/mingzi.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 按钮样式 */
.button-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: min(3vh, 20px);
    padding: 0 20px;
    width: 100%;
    max-width: 600px;
}

.btn {
    width: 45%;
    height: min(8vh, 60px);
    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reserve-btn {
    background-image: url('../images/startup/yuyue.png');
}

.start-btn {
    background-image: url('../images/startup/kaishi.png');
}

/* 功能按钮区域 */
.function-buttons {
    display: none;
}

.function-btn {
    width: calc(120 * (100vw / 750));
    height: calc(33 * (100vw / 750));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-left: auto;
}

.activity-details {
    background-image: url('../images/startup/mingxi.png');
}

.my-rewards {
    background-image: url('../images/startup/jingpin.png');
}

/* 移除活动状态样式 */
.activity-status {
    display: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .main-title {
        height: 80px;
    }
    
    .button-group {
        padding: 0 10px;
    }
    
    .btn {
        height: 50px;
    }
    
    .function-btn {
        width: 110px;
        height: 30px;
    }
    
    .function-buttons {
        padding: 0 20px;
    }
    
    .main-content {
        bottom: 45%;
        transform: translateY(35%);
    }
} 

/* 修改右上角按钮组样式 */
.top-right-buttons {
    position: fixed;
    top: calc(20 * (100vw / 750));
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: calc(15 * (100vw / 750));
    padding-right: 0;
}

/* 移除之前的 top-right 类 */
.top-right {
    display: none;
}

/* 移除之前的 function-buttons 类 */
.function-buttons {
    display: none;
} 

/* 针对窄屏幕特别处理 */
@media (max-width: 500px) and (min-height: 700px) {
    .container::after {
        height: auto;
        min-height: 65vh;
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
}

@media (max-height: 600px) {
    .container::after {
        height: auto;
        min-height: 70vh;
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
}

@media (min-height: 800px) {
    .container::after {
        height: auto;
        min-height: 55vh;
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
}

/* 针对 iPhone 尺寸 (375x667) 特别处理 */
@media screen and (width: 375px) and (height: 667px) {
    .container::after {
        height: auto;
        min-height: 65vh;
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
    }
} 

/* 更新活动结束状态的样式 */
.container.activity-ended {
    background-image: url('../images/startup/beijing2.png');
}

.container.activity-ended::after {
    background-image: url('../images/startup/xiabeijing2.png');
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.container.activity-ended .main-content {
    display: none; /* 隐藏游戏名字和按钮 */
}

/* 更新活动未开始状态的样式 */
.container.activity-not-started {
    background-image: url('../images/startup/beijing2.png') !important;
}

.container.activity-not-started::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    min-height: 300px;
    background-image: url('../images/startup/xiabubeijing3.png') !important;
    background-size: 100% auto !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

.container.activity-not-started .main-content {
    display: none;
} 

/* 弹窗遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.64);
    z-index: 9998;
}

/* 弹窗容器 */
.rules-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 弹窗内容 */
.modal-content {
    position: relative;
    width: 93.33%;
    margin: 0 auto;
    z-index: 10000;
    transform: translateY(5%);
}

/* 弹窗主体 - 根据实际比例调整 */
.modal-body {
    width: 100%;
    height: 0;
    padding-top: 194.71%; /* (1363/700) * 100 = 194.71% */
    background-image: url('../images/tanchuang/guizebeijing.png');
    background-size: 100% 100%; /* 确保图片完全填充容器 */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* 关闭按钮 - 调整位置 */
.close-btn {
    position: absolute;
    top: -2%;
    right: 0;
    width: 30%;
    height: 15.4%;
    background-image: url('../images/tanchuang/guanbianniu.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    cursor: pointer;
    z-index: 1001;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .close-btn {
        top: -2%;
    }
}

/* 针对更小屏幕的调整 */
@media (max-width: 375px) {
    .close-btn {
        top: -2%;
    }
} 

/* 冒险页面样式 */
.adventure-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #fff;
    z-index: 100;
    background-image: url('../images/kaishimaoxian/背景.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 40px;
}

/* 任务区域 - 调整位置 */
.adventure-section {
    margin-top: calc(820 * (100vw / 750));
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* 任务标题区域 */
.section-title {
    margin: 0 0 calc(70 * (100vw / 750)) 0;
    text-align: center;
}

/* 冒险任务标题图片 */
.adventure-section .section-title img {
    width: calc(496 * (100vw / 750));
    height: calc(99 * (100vw / 750));
    display: block;
    margin: 0 auto;
}

/* 幸运抽奖标题区域 */
.lucky-draw-section .section-title {
    margin: 0 0 calc(12 * (100vw / 750)) 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 幸运抽奖标题图片 */
.lucky-draw-section .section-title img {
    width: calc(587 * (100vw / 750));
    height: calc(99 * (100vw / 750));
    display: block;
    margin: 0 auto;
}

/* 任务列表样式 */
.task-list {
    width: calc(596 * (100vw / 750));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(20 * (100vw / 750));
}

.task-item {
    width: 100%;
    height: calc(65 * (100vw / 750));
    display: flex;
    align-items: center;
    padding: 0 calc(6 * (100vw / 750));
    padding-left: calc(9 * (100vw / 750));
    background: #f0edc2;
    border-radius: calc(32.5 * (100vw / 750));
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* 任务序号样式 */
.task-number {
    width: calc(40 * (100vw / 750));
    height: calc(40 * (100vw / 750));
    background: #d2ce8f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24 * (100vw / 750));
    color: #8B6140;
    margin-right: calc(16 * (100vw / 750));
    font-weight: bold;
}

.task-text {
    flex: 1;
    font-size: calc(28 * (100vw / 750));
    color: #8B6140;
}

.task-status {
    width: calc(160 * (100vw / 750));
    height: calc(48 * (100vw / 750));
    object-fit: contain;
    margin-right: 0;
}

/* 移除之前的背景图片 */
.task-item:hover {
    background: #f0edc2;
    box-shadow: none;
}

/* 点击效果 */
.task-item:active {
    transform: scale(0.98);
}

/* 抽奖区域 */
.lucky-draw-section {
    width: 93.33%;
    margin: 0 auto;
    padding-bottom: 40px;
    position: relative;
    z-index: 2;
    margin-top: calc(60 * (100vw / 750));
}

.prize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * (100vw / 750));
    margin-top: calc(24 * (100vw / 750));
    padding: 0;
    border-radius: 0;
    background: transparent;
    width: calc(642 * (100vw / 750));
    margin-left: auto;
    margin-right: auto;
}

.prize-item {
    width: calc(198 * (100vw / 750));
    height: calc(198 * (100vw / 750));
    border-radius: calc(8 * (100vw / 750));
    background: transparent;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
}

.prize-item.selected {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.prize-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

.prize-item.draw-btn {
    background: transparent;
}

.prize-item.draw-btn img {
    transform: scale(1.1);
}

/* 添加响应式调整 */
@media (max-width: 768px) {
    .section-title img {
        width: 60%;
    }
    
    .task-list {
        width: 90%;
    }
    
    .lucky-draw-section {
        width: 90%;
    }
}

@media (max-width: 375px) {
    .section-title img {
        width: 70%;
    }
    
    .prize-grid {
        gap: 6px;
        padding: 6px;
    }
} 

/* 修改险页面显示时的按钮样式 */
.adventure-page-active .top-right-buttons {
    position: fixed;
    top: calc(20 * (100vw / 750));
    right: 0;
    z-index: 1002;
} 

/* 修改抽奖提示文字样式 */
.draw-tip {
    font-size: calc(24 * (100vw / 750));
    color: #fef7e9;
    text-align: center;
    margin-top: calc(16 * (100vw / 750));
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: calc(1 * (100vw / 750));
    text-shadow: 0 calc(1 * (100vw / 750)) calc(2 * (100vw / 750)) rgba(0, 0, 0, 0.1);
} 

/* 我的奖品页面样式 */
.rewards-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/wodejiangpin/背景.png');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 999;
    overflow-y: auto;
    padding-bottom: calc(40 * (100vw / 750));
}

/* 返回按钮 */
.back-btn {
    position: fixed;
    top: calc(44 * (100vw / 750));
    left: calc(32 * (100vw / 750));
    width: calc(253 * (100vw / 750));
    height: calc(96 * (100vw / 750));
    background-image: url('../images/wodejiangpin/返回按钮.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    cursor: pointer;
    z-index: 1001;
}

/* 移除奖品标题相关样式 */
.rewards-title {
    display: none;
}

/* 移除空状态相关样式 */
.empty-rewards,
.empty-icon,
.empty-text {
    display: none;
} 

/* 修改抽奖次数提示样式 */
.draw-btn {
    position: relative;
    width: calc(203 * (100vw / 750));
    height: calc(203 * (100vw / 750));
}

.draw-chances {
    position: absolute;
    left: calc(81 * (100vw / 750));
    top: calc(107 * (100vw / 750));
    font-size: calc(32 * (100vw / 750));
    color: #b3864f;
    -webkit-text-stroke: calc(1 * (100vw / 750)) #f7e6b9;
    text-stroke: calc(1 * (100vw / 750)) #f7e6b9;
}

/* 移除原有的文字说明，只保留数字 */
.draw-chances::before {
    content: none;
}

.draw-chances::after {
    content: none;
}

.chance-number {
    color: #b3864f;
    -webkit-text-stroke: calc(1 * (100vw / 750)) #f7e6b9;
    text-stroke: calc(1 * (100vw / 750)) #f7e6b9;
}

/* 抽奖次数用完的样式 */
.draw-btn.disabled {
    opacity: 1; /* 移除透明度 */
    cursor: not-allowed;
}

.draw-btn.disabled img {
    content: url('../images/kaishimaoxian/抽奖次数已用完.png'); /* 切换到已用完的图片 */
}

/* 次数用完时隐藏数字 */
.draw-btn.disabled .draw-chances {
    display: none;
}