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

html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "思源黑体 CN", Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
li {
  list-style: none;
}

/* ===========================
   弹窗组件（三段拼接：top + content + bottom）
   top/bottom 固定高度装饰图，content 区域高度自适应
=========================== */

/* 遮罩层（淡入淡出） */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 弹窗容器（缩放过渡） */
.popup-container {
  width: 7.02rem;
  position: relative;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.popup-overlay.is-visible .popup-container {
  transform: scale(1);
  opacity: 1;
}

/* 顶部装饰（pop-up-top.jpg 702×90） */
.popup-top {
  width: 100%;
  height: 0.90rem;
  background-image: url("../images/pop-up-top.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 内容区域（pop-up-content.jpg 纵向平铺 + 同色兜底） */
.popup-content {
  width: 100%;
  min-height: 3.13rem;
  background-color: #5c0000;
  background-image: url("../images/pop-up-content.jpg");
  background-size: 100% 3.13rem;
  background-repeat: repeat-y;
  padding: 0rem 0.5rem 0rem;
  position: relative;
}

/* 内容插槽 */
.popup-body {
  font-family: "Source Han Sans CN", "思源黑体 CN", "Noto Sans SC", sans-serif;
  font-size: 0.24rem;
  color: #fff9cc;
  line-height: 1.5;
  max-height: 5.0rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条 */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
.popup-body::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* 标题区 */
.popup-title {
  font-size: 0.42rem;
  font-weight: bold;
  color: #ffe6a1;
  text-align: center;
  margin-bottom: 0.3rem;
}

.popup-title:empty {
  display: none;
}

/* 按钮区 */
.popup-actions {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.popup-actions:empty {
  display: none;
}

.popup-actions .popup-btn {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  font-size: 0.24rem;
  color: #560911;
  background: #ff6137;
  border: none;
  border-radius: 0.32rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}

.popup-actions .popup-btn:active {
  opacity: 0.85;
}

.popup-actions .popup-btn--cancel {
  background: #ffe6a1;
  color: #560911;
}

/* 我知道了按钮（sprite_004 雪碧图） */
.popup-actions .popup-btn--iknow {
  width: 2.32rem;
  height: 0.98rem;
  padding: 0;
  background-image: url("../images/btn.png");
  background-size: 8.0rem 7.58rem;
  background-position: -3.38rem -1.43rem;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  border-radius: 0;
  margin-top: 0.3rem;
}

/* 底部装饰（pop-up-bottom.jpg 702×98） */
.popup-bottom {
  width: 100%;
  height: 0.98rem;
  background-image: url("../images/pop-up-bottom.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 关闭按钮（close.png 200×200）— 底部居中 */
.popup-close {
  display: block;
  width: 0.56rem;
  height: 0.56rem;
  margin: 0.3rem auto 0;
  background-image: url("../images/close.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.popup-close:active {
  opacity: 0.8;
}

/* ===========================
   活动规则弹窗样式
=========================== */

/* 旧版列表样式（保留兼容） */
.popup-rules-list {
  padding: 0;
  margin: 0;
}
.popup-rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.1rem 0;
  font-size: 0.24rem;
  color: #fff9cc;
  line-height: 1.5;
}
.popup-rules-list li .rule-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff9cc;
  font-size: 0.2rem;
  font-weight: bold;
  flex-shrink: 0;
  line-height: 1;
}

/* 新版活动规则 */
.rules-content {
  font-family: "Source Han Sans CN", "思源黑体 CN", "Noto Sans SC", sans-serif;
}

/* 活动时间 */
.rules-time {
  font-size: 0.24rem;
  color: #fff9cc;
  line-height: 1.6;
  margin-bottom: 0.2rem;
}

/* 分区标题 */
.rules-section {
  margin-bottom: 0.2rem;
}
.rules-section:last-child {
  margin-bottom: 0;
}
.rules-section-title {
  font-size: 0.26rem;
  font-weight: bold;
  color: #ffe6a1;
  margin-top: 0.16rem;
  margin-bottom: 0.16rem;
  padding-left: 0.12rem;
  border-left: 0.06rem solid #ff6137;
  line-height: 1.4;
}
.rules-section-title:first-child {
  margin-top: 0;
}

/* 规则条目 */
.rules-item {
  display: flex;
  align-items: flex-start;
  gap: 0.08rem;
  padding: 0.05rem 0;
  font-size: 0.22rem;
  color: #fff9cc;
  line-height: 1.6;
}
.rules-item .rule-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff9cc;
  font-size: 0.18rem;
  font-weight: bold;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.04rem;
}

/* 模块标题（①共制周年蛋糕、②好运转盘、③幸运锦鲤） */
.rules-module-title {
  font-size: 0.24rem;
  font-weight: bold;
  color: #ffe6a1;
  margin-top: 0.2rem;
  margin-bottom: 0.08rem;
  padding-left: 0.12rem;
  border-left: 0.04rem solid #ffe6a1;
  line-height: 1.4;
}
.rules-module-title:first-child {
  margin-top: 0;
}

/* 温馨提示 */
.rules-warm-tip {
  font-size: 0.2rem;
  color: #ff9966;
  padding: 0.05rem 0 0.05rem 0.12rem;
  line-height: 1.5;
}

/* 辅助说明/注释 */
.rules-note {
  font-size: 0.2rem;
  color: rgba(255, 249, 204, 0.7);
  padding: 0.05rem 0 0.05rem 0.12rem;
  line-height: 1.5;
}

/* ===========================
   奖励公示表格
=========================== */
.rules-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.1rem;
}
.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.2rem;
}
.rules-table th {
  background: rgba(255, 230, 161, 0.15);
  color: #ffe6a1;
  font-weight: bold;
  padding: 0.12rem 0.08rem;
  text-align: center;
  border: 1px solid rgba(255, 230, 161, 0.25);
  font-size: 0.2rem;
  white-space: nowrap;
}
.rules-table td {
  padding: 0.1rem 0.08rem;
  color: #fff9cc;
  border: 1px solid rgba(255, 230, 161, 0.25);
  text-align: center;
  font-size: 0.18rem;
  line-height: 1.5;
  word-break: break-all;
  vertical-align: middle;
}
/* 奖励内容列左对齐 */
/* .rules-table td:nth-child(3),
.rules-table th:nth-child(3) {
  text-align: left;
} */
/* 中奖概率列右对齐 */
.rules-table td:nth-child(4),
.rules-table th:nth-child(4) {
  text-align: center;
}
/* rowspan 分类名称单元格 */
.rules-table-cat {
  font-weight: bold;
  color: #ffe6a1;
  text-align: center;
  vertical-align: middle;
  background: rgba(255, 230, 161, 0.08);
  font-size: 0.18rem;
  writing-mode: vertical-lr;
  letter-spacing: 0.04rem;
}

/* 底部补充说明 */
.rules-footer-item {
  font-size: 0.22rem;
  color: #fff9cc;
  line-height: 1.6;
  padding: 0.05rem 0;
}

/* 邀请组队弹窗内容样式 */
.popup-invite-content {
  text-align: center;
}

.popup-invite-desc {
  font-family: "Source Han Sans CN", "思源黑体 CN", "Noto Sans SC", sans-serif;
  font-size: 0.24rem;
  color: #fff9cc;
  line-height: 1.5;
  margin-bottom: 0.2rem;
}

.popup-invite-link {
  font-family: "Source Han Sans CN", "思源黑体 CN", "Noto Sans SC", sans-serif;
  font-size: 0.22rem;
  color: #ffe6a1;
  word-break: break-all;
  line-height: 1.5;
  padding: 0.15rem 0.2rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0.08rem;
}

/* 我的奖励弹窗内容样式 */
.popup-reward-list {
  padding: 0;
  margin: 0;
}

.popup-reward-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(255, 249, 204, 0.12);
}

.popup-reward-list li:last-child {
  border-bottom: none;
}

.popup-reward-info {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.popup-reward-name {
  font-size: 0.24rem;
  color: #ffe6a1;
  font-weight: bold;
  line-height: 1.3;
}

.popup-reward-time {
  font-size: 0.2rem;
  color: rgba(255, 249, 204, 0.5);
  line-height: 1.3;
}

/* ===========================
   页面容器
=========================== */
/* ===========================
   固定底部栏 (footer.png 750×161)
   页面最底部固定定位，始终贴底显示
   含 iOS 安全距离适配（env(safe-area-inset-bottom)）
=========================== */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5rem;
  height: auto;
  min-height: 1.61rem;
  padding-bottom: env(safe-area-inset-bottom);
  background-image: url("../images/footer.png");
  background-size: 100% 1.61rem;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 50;
}

/* ===========================
   底部导航栏 (footer-bar 内)
   nav.png 654×102  → 3子图 203×86 (默认态)
   nav-active.png 618×87 → 3子图 202×86 (激活态)
=========================== */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 1.61rem;
  padding-bottom: 0.16rem;
}

.footer-nav-item {
  display: block;
  width: 2.03rem;
  height: 0.86rem;
  background-image: url("../images/nav.png");
  background-size: 6.54rem 1.02rem;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}

.footer-nav-item:active {
  opacity: 0.85;
}

/* 默认态 background-position（nav.png） */
.footer-nav-item[data-target="sectionCake"]    { background-position: -0.18rem -0.02rem; }
.footer-nav-item[data-target="sectionLottery"] { background-position: -2.25rem -0.02rem; }
.footer-nav-item[data-target="sectionKoi"]     { background-position: -4.33rem -0.02rem; }

/* 激活态（nav-active.png 替换整张雪碧图 + 重算 position） */
.footer-nav-item.is-active {
  background-image: url("../images/nav-active.png");
  background-size: 6.18rem 0.87rem;
}

.footer-nav-item.is-active[data-target="sectionCake"]    { background-position: -0.01rem -0.01rem; }
.footer-nav-item.is-active[data-target="sectionLottery"] { background-position: -2.09rem -0.01rem; }
.footer-nav-item.is-active[data-target="sectionKoi"]     { background-position: -4.16rem -0.01rem; }

/* 页面底部留出 footer + 安全距离，防止内容被遮挡 */
.page-container {
  width: 7.5rem;
  margin: 0 auto;
  position: relative;
  padding-bottom: calc( 0 + env(safe-area-inset-bottom));
}

/* ===========================
   区块通用样式
=========================== */
.section {
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
  display: block;
}

/* 区块间 -1px 遮盖亚像素缝隙 */
.section + .section {
  margin-top: -1px;
}

/* ===========================
   各区块高度 + 背景图
   (图片原始尺寸 / 100 = rem)
=========================== */
.section-hero {
  height: 10.16rem;
  background-image: url("../images/bg1.jpg");
}

.section-cake-title {
  height: 3.36rem;
  background-image: url("../images/bg2.jpg");
}

.section-cake-team {
  height: 13.17rem;
  background-image: url("../images/bg3.jpg");
}

.section-content {
  height: 10.15rem;
  background-image: url("../images/bg4.jpg");
}

.section-divider {
  height: 6.58rem;
  background-image: url("../images/bg5.jpg");
}

.section-koi {
  height: 14.22rem;
  background-image: url("../images/bg6.jpg");
}

/* ===========================
   顶部导航栏 (section-hero 内)
=========================== */
.header-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.92rem;
  background-image: url("../images/bown.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.16rem;
  z-index: 10;
}

/* 左侧区域：Logo + 标题 */
.header-left {
  position: relative;
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
  top: 0.40rem;
}

.header-logo {
  width: 1.27rem;
  height: 1.27rem;
  border-radius: 0.16rem;
  background-image: url("../images/head.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  flex-shrink: 0;
  z-index: 26;
}

.header-title {
  text-align: left;
}

.header-title-main {
  width: 1.80rem;
  font-size: 0.24rem;
  font-family: "Source Han Sans CN", sans-serif;
    color: #ffe6a1;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: left;
  word-break: break-all;
}

/* ===========================
   雪碧图按钮基类（btn.png 800×758）
   公共属性抽取，各子类仅需 width/height/background-position
=========================== */
.sprite-btn {
  display: block;
  background-image: url("../images/btn.png");
  background-size: 8.0rem 7.58rem;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sprite-btn:active {
  opacity: 0.85;
}

/* 右侧按钮：立即下载（sprite_000） */
.header-btn {
  width: 1.87rem;
  height: 0.80rem;
  background-position: -0.21rem -0.02rem;
  flex-shrink: 0;
}

/* ===========================
   固定侧边栏（我的奖励 / 活动规则）
   雪碧图 btn.png sprite_001/005
=========================== */
.sidebar-group {
  position: fixed;
  right: 0;
  top: 22%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidebar-reward,
.sidebar-rules {
  width: 0.46rem;
  height: 1.50rem;
}

/* 我的奖励（sprite_001） */
.sidebar-reward {
  background-position: -7.54rem -0.15rem;
}

/* 活动规则（sprite_005） */
.sidebar-rules {
  background-position: -7.54rem -1.96rem;
}

/* ===========================
   固定左侧栏（编年史 annals.png 112×105）
=========================== */
.sidebar-annals {
  position: fixed;
  left: 0;
  top: 40%;
  z-index: 99;
  display: block;
  width: 1.12rem;
  height: 1.05rem;
  background-image: url("../images/annals.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-annals:active {
  opacity: 0.85;
}

/* ===========================
   进度条 (section-cake-team 内)
   progressbar.png 568×78 五刻度: 20/40/60/80/100
   top: 350px → 3.5rem
=========================== */
.progress-bar {
  position: absolute;
  top: 4.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.68rem;
  height: 0.78rem;
  overflow: hidden;
}

/* progressbar.png 作为遮罩浮层 */
.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/progressbar.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

/* 填充条在底层，垂直居中在白色轨道内，水平从 0 开始
   MARKERS 已包含轨道起始偏移，无需额外 left */
.progress-fill {
  position: absolute;
    /* top: 0.16rem; */
    left: 1px;
    height: 0.39rem;
    background-color: rgb(163, 134, 86);
    width: 0;
    transition: width 0.5s ease;
    z-index: 1;
    /* border-radius: 0.16rem; */
}

/* 进度数值浮层 */
.progress-value {
  position: absolute;
  right: 0.06rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.20rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  color: #fff9cc;
  z-index: 3;
  line-height: 1;
  white-space: nowrap;
}

/* ===========================
   蛋糕视觉 (section-cake-team 内)
   all.png 轮廓底 + P01~P05 进度点亮层
=========================== */
.cake-visual {
  position: absolute;
  top: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.53rem;
  height: 4.05rem;
  z-index: 1;
}

/* 底层轮廓（all.png） */
.cake-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 进度点亮层（P01~P05） */
.cake-layer {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 各层定位（从底部往上堆叠，上层微调左偏对齐蛋糕锥形） */
.cake-layer[data-threshold="20"]  { bottom: 0; width: 4.53rem; height: 1.49rem; left: 50%; transform: translateX(-50%); }
.cake-layer[data-threshold="40"]  { bottom: 0.9rem; width: 3.81rem; height: 1.39rem; left: 49%; transform: translateX(-50%); }
.cake-layer[data-threshold="60"]  { bottom: 1.8rem; width: 2.72rem; height: 0.96rem; left: 49.3%; transform: translateX(-50%); }
.cake-layer[data-threshold="80"]  { bottom: 2.54rem; width: 1.86rem; height: 0.80rem; left: 48%; transform: translateX(-50%); }
.cake-layer[data-threshold="100"] { bottom: 3.03rem; width: 2.03rem; height: 1.02rem; left: 51%; transform: translateX(-50%); }

/* 点亮状态 */
.cake-layer.is-lit {
  opacity: 1;
}

/* ===========================
   制作蛋糕按钮 (section-cake-team 内)
   雪碧图 btn.png sprite_003
   进度条下方居中
=========================== */
/* 蛋糕按钮组：参考 team-btn-group 布局 */
.cake-btn-group {
  position: absolute;
  top: 6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  justify-content: center;
}

.btn-make-cake {
  width: 2.32rem;
  height: 0.98rem;
}

/* 制作蛋糕 */
.btn-make-cake {
  background-position: -0.20rem -1.43rem;
}

/* 领取奖励按钮（btn2.png sprite_002）
   默认置灰，进度满100后激活，领取后再次置灰 */
.btn-v3 {
  width: 2.32rem;
  height: 0.98rem;
  background-image: url("../images/btn2.png");
  background-position: -0.20rem -3.40rem;
  background-size: 2.73rem 4.57rem;
}

.btn-v3.disabled {
  filter: grayscale(100%) brightness(0.7);
  cursor: not-allowed;
  pointer-events: none;
}

/* 制作蛋糕按钮禁用态（进度 100%） */
.btn-make-cake.disabled,
.btn-make-cake.disabled:active,
.btn-v3.disabled,
.btn-v3.disabled:active {
  filter: grayscale(100%) brightness(0.7);
  cursor: not-allowed;
  pointer-events: none;
}

/* ===========================
   组队区域 (section-cake-team 内)
   top: 710px → 7.1rem
   JS 动态创建 5 个槽位，后续填充头像+手机号
=========================== */
.team-section {
  position: absolute;
  top: 9.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-groups {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.team-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-height: 1.58rem;  /* 预占高度：120(头像) + 8(gap) + 30(手机号)，防止填充时抖动 */
}

.team-phone {
  color: #e3ebc5;
  font-size: 0.22rem;
  font-family: "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  white-space: nowrap;
  min-height: 0.3rem;   /* 预占高度，空槽时也保留空间 */
  line-height: 0.3rem;
}

.team-group {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 0.02rem solid #be9e6a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

/* 队长槽位：金色边框 + 光晕 */
.team-group.team-captain {
  border: 0.03rem solid #f5d67b;
  box-shadow: 0 0 0.08rem rgba(245, 214, 123, 0.4);
}

/* 队长徽标（captain.png 94×29px，宽高比 3.24:1） */
.team-captain-label {
  position: absolute;
  top: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.94rem;
  height: 0.29rem;
  background-image: url("../images/captain.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 0;
  color: transparent;
  white-space: nowrap;
  z-index: 2;
}

.team-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  object-fit: cover;
  display: block;
  background-color: #3a1a1a;
}

.team-avatar-1 {
  background-color: #4a2a2a;
}

.team-avatar-2 {
  background-color: #2a4a2a;
}

.team-add-icon {
  width: 0.5rem;
  height: 0.5rem;
  background-image: url("../images/shape.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ===========================
   组队按钮组
   雪碧图 btn.png sprite_006/009/011/008
=========================== */
.team-btn-group {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  justify-content: center;
}

.btn-create-team,
.btn-join-team,
.btn-invite-team,
.btn-rejoin {
  width: 2.32rem;
  height: 0.98rem;
}

/* 创建队伍（sprite_006） */
.btn-create-team {
  background-position: -0.20rem -3.02rem;
}

/* 加入队伍（sprite_009） */
.btn-create-team.btn-join-team {
  background-position: -3.38rem -4.61rem;
}

/* 邀请组队（sprite_011） */
.btn-create-team.btn-invite-team {
  background-position: -3.38rem -6.20rem;
}

/* 回归加赠（sprite_008） */
.btn-rejoin {
  background-position: -0.20rem -4.61rem;
}

/* ===========================
   活动任务区 (section-divider 内)
   activity-task.png 713×521 → 7.13×5.21rem
=========================== */
.activity-task-box {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 7.13rem;
  height: 5.21rem;
  background-image: url("../images/activity-task.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 任务列表 */
.task-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6rem 0.7rem 0.5rem;

}

/* 单条任务 */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0.5rem;
  line-height: 0.5rem;
  width: 100%;
}

/* 任务文字 */
.task-text {
  font-size: 0.24rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", "PingFang SC", sans-serif;
    color: #ffe6a1;
  flex: 1;
  text-align: left;
}

/* 圆点项目符号 */
.task-text::before {
  content: "\2022";
  margin-right: 0.12rem;
  color: #ffe6a1;
}

/* 右侧操作区统一容器（进度 + 按钮并排） */
.task-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin-left: 0.1rem;
}

/* 进度数字（如 1/3、0/1、0/7） */
.task-status {
  font-size: 0.22rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  color: #ffe6a1;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
}

/* 进度当前值（=0 时金色，>0 时橙红） */
.task-cur {
  font-style: normal;
  color: #ffe6a1;
}

.task-cur--active {
  color: #ff6137;
}

/* 任务按钮基础样式 */
.task-btn {
  display: inline-block;
  width: 1.1rem;
  height: 0.42rem;
  border: none;
  border-radius: 0.28rem;
  font-size: 0.2rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 0.42rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

/* 领取按钮（橙色可点击） */
.task-btn--claim {
  background: #ff6137;
  color: #560911;
}

.task-btn--claim:active {
  opacity: 0.8;
  transform: scale(0.95);
}

/* 未达成按钮（灰色禁用） */
.task-btn--disabled {
  background: rgba(255, 230, 161, 0.2);
  color: rgba(255, 230, 161, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* 已领取文字 */
.task-status-done {
  font-size: 0.2rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  color: rgba(255, 230, 161, 0.4);
  flex-shrink: 0;
  text-align: center;
  min-width: 1.1rem;
}

/* 领取按钮（旧样式，已由 .task-btn 体系替代，保留兼容） */

/* ===========================
   九宫格抽奖 (section-content 内)
   雪碧图: 01 copy 7.png 613x619px (6.13x6.19rem)
   每格: 204x206px (2.04x2.06rem)
   顺时针: 0→1→2→3→4→5→6→7
=========================== */

/* 抽奖区域容器 */
.lottery-area {
  position: absolute;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 2.04rem);
  grid-template-rows: repeat(3, 2.06rem);
  /* gap: 0.25rem; */
}

/* 奖品格子：雪碧图裁切 */
.lottery-unit {
  width: 2.04rem;
  height: 2.06rem;
  background-image: url("../images/lottery.png");
  background-size: 6.13rem 6.19rem;
  background-repeat: no-repeat;
  border-radius: 0.12rem;
  position: relative;
  transition: transform 0.1s ease;
}

/* 顺时针8格 background-position 映射 */
.lottery-unit-1 { background-position: 0 0; }                    /* index 0: 左上 */
.lottery-unit-2 { background-position: -2.04rem 0; }            /* index 1: 中上 */
.lottery-unit-3 { background-position: -4.08rem 0; }            /* index 2: 右上 */
.lottery-unit-4 { background-position: -4.08rem -2.06rem; }     /* index 3: 右中 */
.lottery-unit-5 { background-position: -4.08rem -4.12rem; }     /* index 4: 右下 */
.lottery-unit-6 { background-position: -2.04rem -4.12rem; }     /* index 5: 中下 */
.lottery-unit-7 { background-position: 0 -4.12rem; }            /* index 6: 左下 */
.lottery-unit-8 { background-position: 0 -2.06rem; }            /* index 7: 左中 */

/* 旋转经过状态：仅放大 */
.lottery-unit.spinning {
  transform: scale(1.08);
}

/* 中心抽奖按钮 */
.lottery-btn {
  width: 2.04rem;
  height: 2.06rem;
  background-image: url("../images/lottery-btn.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 0.12rem;
  -webkit-tap-highlight-color: transparent;
}

.lottery-btn:active {
  transform: scale(0.95);
}

/* 按钮无次数禁用态 */
.lottery-btn.disabled,
.lottery-btn.disabled:active {
  transform: none;
  filter: grayscale(100%) brightness(0.7);
  cursor: not-allowed;
  pointer-events: none;
}

/* ===========================
   弹幕系统 (section-koi 内)
   =========================== */
/* 弹幕显示区 */
.danmu-stage {
  position: absolute;
  top: 4.5rem;
  left: -0.5rem;
  width: calc(100% + 1rem);
  height: 5rem;
  overflow: hidden;
  pointer-events: none;
}
/* 弹幕发送区（底部） */
.danmu-send-area {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 6.12rem;
}
/* 输入框容器 */
.danmu-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* 输入框文字显示 */
.danmu-input-text {
  width: 100%;
  height: 0.84rem;
  line-height: 0.8rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.34rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", "思源黑体 CN", sans-serif;
  font-size: 0.24rem;
  color: #806074;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  text-align: center;
}
input.danmu-input-text {
  outline: none;
}
input.danmu-input-text::placeholder {
  color: #806074;
}
input.danmu-input-text:not(:placeholder-shown) {
  color: #38132a;
}
/* 预设消息列表（下拉菜单，向上弹出，默认隐藏） */
.danmu-msg-list {
  display: none;
  position: absolute;
  bottom: 0.94rem;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.18rem;
  overflow: hidden;
  box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.3);
  z-index: 10;
}
.danmu-msg-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.danmu-msg-list li {
  padding: 0.12rem 0.4rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", sans-serif;
  font-size: 0.24rem;
  color: #38132a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid rgba(56,19,42,0.1);
  text-align: center;
}
.danmu-msg-list li:last-child {
  border-bottom: none;
}
.danmu-msg-list li:active {
  background: rgba(56,19,42,0.08);
}

/* 下拉展开状态 */
.danmu-input-wrap.is-open .danmu-msg-list {
  display: block;
}
/* 发送按钮（雪碧图 sprite_009） */
.danmu-send-btn {
  width: 2.32rem;
  height: 0.98rem;
  background-position: -0.20rem -6.20rem;
}

/* ===========================
   右上角操作组（登录 + 绑定角色）
   - 绝对定位，页面右上角
   - 纵向排列，右对齐
=========================== */
.header-actions {
  position: absolute;
  top: 1.5rem;
  right: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  z-index: 100;
}

/* ===========================
   登录/登出按钮
   - use_btn.png 作为背景
   - 文字渐变 #a9310e → #600509
=========================== */
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.44rem;
  height: 0.54rem;
  text-decoration: none;
  background-image: url("../images/use_btn.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.login-btn span {
  display: inline-block;
  font-size: 0.24rem;
  font-weight: bold;
  color: #2b1204;
  text-shadow: 0 0.01rem 0.02rem rgba(255, 255, 255, 0.25);
}

/* ===========================
   绑定角色按钮
   - 位于登录按钮下方
   - 渐变色背景，与页面风格一致
=========================== */
.bind-role-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.44rem;
  height: 0.54rem;
  background: linear-gradient(180deg, #f5d67b, #c89a2c);
  border: 0.02rem solid #d4a44b;
  border-radius: 0.27rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", "思源黑体 CN", sans-serif;
  font-size: 0.22rem;
  font-weight: bold;
  color: #3d1c00;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.2);
}
.bind-role-btn:active {
  opacity: 0.85;
}

/* ===========================
   绑定信息显示（绑定角色后回填）
=========================== */
.bind-info {
  display: flex;
  flex-direction: row;
  gap: 0.08rem;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bind-info:hover {
  opacity: 0.85;
}
.bind-info:active {
  opacity: 0.75;
}
.bind-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.06rem 0.16rem;
  background: rgba(0, 0, 0, 0.45);
  border: 0.02rem solid #d4a44b;
  border-radius: 0.12rem;
  font-family: "Source Han Sans CN", "Noto Sans SC", "思源黑体 CN", sans-serif;
  font-size: 0.2rem;
  color: #ffe6a1;
  line-height: 1.4;
  white-space: nowrap;
}
.bind-info-item em {
  font-style: normal;
  color: #ffd966;
  font-weight: bold;
}

/* ===========================
   绑定角色表单（公共弹窗内）
   - 配合 popup.js 三段式弹窗
   - 标题 #ffe6a1 / 正文 #fff9cc
=========================== */
.bind-form {
  padding: 0.1rem 0;
}
.bind-form-desc {
  text-align: center;
  margin-bottom: 0.25rem;
  font-size: 0.24rem;
  color: #fff9cc;
  line-height: 1.5;
}
.bind-form-group {
  margin-bottom: 0.2rem;
}
.bind-form-label {
  display: block;
  margin-bottom: 0.08rem;
  font-size: 0.24rem;
  color: #ffe6a1;
  font-weight: bold;
}
.bind-form-select {
  width: 100%;
}

/* ===========================
   公共弹窗内 select2 样式覆盖
=========================== */
.popup-container .select2-container {
  width: 100% !important;
}

.popup-container .select2-container--default .select2-selection--single {
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 0.08rem;
}

.popup-container .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 0.5rem;
  color: #333;
  font-size: 0.24rem;
  padding-left: 0.15rem;
}

.popup-container .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 0.5rem;
}

.popup-container .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
}

.popup-container .select2-dropdown {
  border: none;
  border-radius: 0.08rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.3);
}

.popup-container .select2-results__option {
  font-family: "Source Han Sans CN", "Noto Sans SC", "思源黑体 CN", sans-serif;
  font-size: 0.24rem;
  color: #333;
  padding: 0.12rem 0.15rem;
  line-height: 1.4;
}

.popup-container .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #f5d67b;
  color: #3d1c00;
}

.popup-container .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #fff5d4;
  color: #3d1c00;
}