/* ============================================================
   双11 战况大屏 · 样式
   设计基准 1920×1080，html 根字号等比缩放（1rem = 10px @1920）
   ============================================================ */

:root {
  --bg:       #070A13;
  --panel:    #101828;
  --line:     rgba(255, 255, 255, .10);
  --text:     #FFFFFF;
  --muted:    #93A0B4;
  --dim:      #5C667A;

  --gold:     #FFC93C;
  --gold-l:   #FFF3C4;
  --gold-d:   #C98A12;
  --silver:   #C4CAD8;
  --silver-d: #8D96A8;
  --bronze:   #D08C5A;
  --bronze-d: #9A6035;
}

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

html { font-size: calc(100vw / 192); }

body {
  width: 100%; height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "微软雅黑", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 底色：左上冷蓝、右下暖焰，中间压深，避免纯黑发闷 */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1150px 820px at 10% -8%, rgba(28, 76, 162, .34), transparent 66%),
    radial-gradient(1050px 760px at 94% 110%, rgba(255, 148, 32, .18), transparent 66%),
    linear-gradient(156deg, #0A1226 0%, #06090F 50%, #0C0912 100%);
  pointer-events: none;
}

/* ---------- 烫金 ---------- */

.gold {
  background: linear-gradient(172deg,
    #FFFCEB 0%, #FFE9A0 22%, #FFC93C 48%, #E0A21A 72%, #FFDE7A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 170, 32, .40));
}

/* ---------- 骨架 ---------- */

.app {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.8rem 3rem 1.2rem;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.brand { display: flex; align-items: center; gap: 1.2rem; flex: 0 0 auto; }

.brand-mark {
  width: .45rem; height: 3.8rem;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
}

.brand-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.15;
}

.brand-text p {
  font-size: 1.15rem;
  color: var(--muted);
  letter-spacing: .06em;
  margin-top: .25rem;
}

.tabs { display: flex; gap: .65rem; flex: 1 1 auto; justify-content: center; overflow: hidden; }

.tab {
  flex: 0 0 auto;
  padding: .65rem 1.4rem;
  font-size: 1.3rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
  font-family: inherit;
}

.tab:hover { color: var(--text); background: rgba(255, 255, 255, .08); }

.tab.active {
  color: #241703;
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
}

.meta { display: flex; align-items: center; gap: 1.3rem; flex: 0 0 auto; }

.live {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.25rem; color: #6BE39A; letter-spacing: .1em;
}

.live i {
  width: .75rem; height: .75rem; border-radius: 50%;
  background: #22C55E;
  animation: pulse 2s infinite;
}

.live.off { color: #FF6B5A; }
.live.off i { background: #FF6B5A; animation: none; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 .8rem rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.clock {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.stage {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding-top: .8rem;
}

/* ============================================================
   双端并排
   ============================================================ */

.duo { flex: 1 1 auto; display: flex; min-height: 0; }

.mod {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1rem 2.6rem 0;
  border-radius: 1rem;
}

/* 左右各一层色晕，冷蓝 / 暖金，让两半在视觉上分开 */
.mod-a { background: linear-gradient(180deg, rgba(30, 74, 158, .12) 0%, rgba(30, 74, 158, 0) 48%); }
.mod-b { background: linear-gradient(180deg, rgba(178, 112, 20, .11) 0%, rgba(178, 112, 20, 0) 48%); }

.mod + .mod { margin-left: 1.6rem; }

.mod-head { flex: 0 0 auto; text-align: center; padding-bottom: .2rem; }

.mod-title {
  font-size: 3.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.1;
}

.mod-sub {
  font-size: 1.2rem;
  color: var(--muted);
  letter-spacing: .18em;
  margin-top: .4rem;
}

/* 领奖台 */

.podium {
  flex: 0 0 auto;
  height: 46rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.8rem;
  padding-bottom: .4rem;
}

.slot {
  width: 23rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.who { text-align: center; padding-bottom: .9rem; }

.crown {
  display: block;
  margin: 0 auto .4rem;
  width: 3.8rem;
  filter: drop-shadow(0 0 1.4rem rgba(255, 201, 60, .55));
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  font-family: Calibri, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

.slot-1 .rank-badge { background: linear-gradient(180deg, #FFE38A, var(--gold-d)); color: #2A1B03; box-shadow: 0 0 2rem rgba(255, 201, 60, .55); }
.slot-2 .rank-badge { background: linear-gradient(180deg, #E8ECF5, var(--silver-d)); color: #1B2029; }
.slot-3 .rank-badge { background: linear-gradient(180deg, #E8AE7E, var(--bronze-d)); color: #2B1507; }

.who .name { font-size: 3.3rem; font-weight: 700; letter-spacing: .05em; line-height: 1.15; }
.slot-1 .who .name { font-size: 4rem; }

.who .sub { font-size: 1.15rem; color: var(--muted); margin-top: .4rem; letter-spacing: .04em; }

.who .amount {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 2.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: .55rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

.who .amount i {
  font-style: normal;
  display: inline-block;
  min-width: 4.4em;   /* 固定占位，滚动数字不会左右跳 */
  text-align: center;
}
.slot-1 .who .amount { font-size: 3.6rem; }
.slot-2 .who .amount { color: var(--silver); }
.slot-3 .who .amount { color: var(--bronze); }

.who .amount span { font-size: 1.2rem; font-weight: 400; color: var(--muted); margin-left: .3rem; }

/* 台阶：从 0 长起来 */

.stand {
  position: relative;
  flex: 0 0 0;
  border-radius: .6rem .6rem 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: .9rem;
  overflow: hidden;
  transition: flex-basis 1.15s cubic-bezier(.22, .9, .3, 1);
  transition-delay: var(--d, 0ms);
}

.slot-1 .stand.grow { flex-basis: 24rem; }
.slot-2 .stand.grow { flex-basis: 19rem; }
.slot-3 .stand.grow { flex-basis: 15rem; }

.stand::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 58%);
}

.stand .n {
  position: relative; z-index: 1;
  font-family: Calibri, sans-serif;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1;
}

/* 柱形比以前短，把空间让给姓名和金额 */
.slot-1 .stand { --h: 30rem; background: linear-gradient(180deg, #7A5A18, #2E1F07); border-top: 2px solid var(--gold); }
.slot-2 .stand { --h: 24rem; background: linear-gradient(180deg, #3C4356, #171B25); border-top: 2px solid var(--silver); }
.slot-3 .stand { --h: 19rem; background: linear-gradient(180deg, #54341F, #20140C); border-top: 2px solid var(--bronze); }

.slot-1 .stand .n { color: rgba(255, 201, 60, .30); }
.slot-2 .stand .n { color: rgba(196, 202, 216, .26); }
.slot-3 .stand .n { color: rgba(208, 140, 90, .28); }

/* ---------- 第四、第五名：收窄、加高、居中 ---------- */

.chasers {
  flex: 0 0 auto;
  width: 76%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-bottom: .6rem;
}

.chaser {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(90deg, rgba(255, 201, 60, .09), rgba(16, 24, 40, .92) 48%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: .5rem;
}

.c-rank {
  font-family: Calibri, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--dim);
  width: 2.2rem;
  text-align: center;
  flex: 0 0 auto;
}

.c-body { flex: 1 1 auto; min-width: 0; }

.c-name {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-sub { font-size: 1.1rem; color: var(--muted); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c-val {
  font-family: Calibri, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
  flex: 0 0 auto;
}

.c-gap {
  flex: 0 0 auto;
  min-width: 13rem;
  text-align: right;
  padding-left: 1.3rem;
  border-left: 1px dashed rgba(255, 255, 255, .14);
}

.c-gap .cap { display: block; font-size: 1.1rem; color: var(--muted); letter-spacing: .1em; margin-bottom: .1rem; }

.c-gap .num {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #FF7A68;
  text-shadow: 0 0 2rem rgba(255, 107, 90, .38);
}

/* ============================================================
   战区 PK
   ============================================================ */

.zone {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 1.8rem;
  min-height: 0;
  padding: .6rem .6rem 0;
}

.zside {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 1rem;
  padding: 1.7rem 2rem 1.8rem;
  border: 1px solid var(--line);
}

/* 两个战区用不同底色，一眼分清阵营 */
.zside.z1 { background: linear-gradient(180deg, #0E2748 0%, #071120 100%); }
.zside.z2 { background: linear-gradient(180deg, #35240F 0%, #150E07 100%); }

.zside.z1 { border-color: rgba(86, 148, 240, .30); }
.zside.z2 { border-color: rgba(255, 176, 60, .30); }

/* 领先方：外框加粗到 4px + 外发光，隔着几米也看得出 */
.zside.lead {
  border-width: 4px;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 201, 60, .28),
              0 0 4rem rgba(255, 201, 60, .30),
              0 0 8rem rgba(255, 201, 60, .12) inset;
}

.zname {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  text-align: center;
}

.zside.z1 .zname { color: #8FB6F0; }
.zside.z2 .zname { color: #F0C48A; }
.zside.lead .zname { color: var(--gold); }

.ztotal {
  font-family: Calibri, sans-serif;
  font-size: 6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  margin: .8rem 0 .4rem;
}

.ztotal i { font-style: normal; }
.zside .ztotal { color: var(--silver); }
.zside.lead .ztotal { color: var(--gold); }

.zunit { font-size: 1.4rem; color: var(--muted); font-weight: 400; margin-left: .3rem; }

.zteams {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: .7rem;
  margin-top: 1rem;
  min-height: 0;
}

/* 每个团队一条自己的颜色，左侧竖条 + 底条都用它 */
.zteam {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1.4rem;
  background: rgba(0, 0, 0, .28);
  border-radius: .5rem;
  border-left: 4px solid var(--tc, #666);
  overflow: hidden;
  min-height: 0;
}

.zteam .zbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg,
    var(--tc, #666) 0%,
    var(--tc, #666) 45%,
    transparent 100%);
  opacity: .52;
  z-index: 0;
}

.zteam > *:not(.zbar) { position: relative; z-index: 1; }

/* 数值压在条上时保证可读 */
.zteam .tv { text-shadow: 0 1px 8px rgba(0, 0, 0, .75); }
.zteam.zero .zbar { display: none; }
.zteam.zero { opacity: .55; }

.zteam .tl {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--tc, #fff);
}

.zteam .tn {
  flex: 1 1 auto;
  font-size: 1.4rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zteam .tv {
  font-family: Calibri, sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 中间：先喊出谁领先，再给差额 */

.zmid {
  flex: 0 0 32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.vs {
  font-family: Calibri, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: .24em;
  margin-bottom: 1rem;
}

.leadline {
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text);
  text-align: center;
}

.leadline em {
  font-style: normal;
  color: var(--gold);
  text-shadow: 0 0 2.4rem rgba(255, 201, 60, .45);
}

.gapnum {
  font-family: Calibri, sans-serif;
  font-size: 8.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-top: .4rem;
}

.gapnum i { font-style: normal; }

.gaplabel {
  font-size: 1.25rem;
  color: var(--muted);
  letter-spacing: .28em;
  margin-top: .2rem;
}

/* ---------- 空状态 ---------- */

.empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--dim);
}

.empty .big { font-size: 2.5rem; letter-spacing: .1em; }
.empty .small { font-size: 1.2rem; }

/* ---------- 底栏 ---------- */

.footbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: 1.35rem;
  color: var(--muted);
  letter-spacing: .05em;
}

.source { font-family: Calibri, "Microsoft YaHei", sans-serif; color: var(--dim); font-size: 1.2rem; }

.flash { animation: flash .6s ease; }

@keyframes flash {
  0%   { background-color: rgba(255, 201, 60, .18); }
  100% { background-color: transparent; }
}

/* ---------- 小屏兜底 ---------- */

@media (max-width: 1100px) {
  html { font-size: calc(100vw / 130); }
  .duo { flex-direction: column; }
  .mod + .mod { margin-left: 0; margin-top: .8rem; }
  .zone { flex-direction: column; }
  .zmid { flex: 0 0 auto; padding: 1rem 0; }
  .gapnum { font-size: 5rem; }
  .chasers { width: 100%; }
}

/* 静态模式：关闭过渡，直接出终态（截图 / 调版式用） */
.no-anim .stand { transition: none !important; }

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  .stand { transition: none; }
}

/* ============================================================
   目标进度（goal）
   ============================================================ */

.goal {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .6rem 3rem 0;
}

/* 三个大数字 */
.ghead {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 9rem;
  padding: 1rem 0 .4rem;
}

.ghead > div { text-align: center; }

.ghead i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
  letter-spacing: -.01em;
}

.gnum-main i { font-size: 8.2rem; }
.grate-main i { font-size: 6rem; }
.gtarget-main i { font-size: 4.6rem; color: var(--silver); }

.ghead .unit {
  font-size: 1.5rem;
  color: var(--muted);
  margin-left: .4rem;
}

.ghead .cap {
  font-size: 1.35rem;
  color: var(--muted);
  letter-spacing: .22em;
  margin-top: 1rem;
}

/* 巨型进度条 */
.gprogress {
  flex: 0 0 auto;
  padding: 2.2rem 2rem 1.6rem;
}

.gtrack {
  position: relative;
  height: 3.4rem;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1.7rem;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .55);
}

.gfill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 1.7rem;
  background: linear-gradient(90deg, #C98A12 0%, #FFC93C 55%, #FFF3C4 100%);
  box-shadow: 0 0 3rem rgba(255, 201, 60, .55), 0 0 1.2rem rgba(255, 201, 60, .8);
  transition: width 1.5s cubic-bezier(.22, .9, .3, 1);
}

.gfill.grow { width: var(--w); }

.tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.tick b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: .8rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dim);
  white-space: nowrap;
}

.gremain {
  text-align: center;
  font-size: 1.8rem;
  color: var(--muted);
  letter-spacing: .08em;
  margin-top: 1.4rem;
}

.gremain b {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #FF7A68;
  margin: 0 .3rem;
  text-shadow: 0 0 2rem rgba(255, 107, 90, .35);
}

/* 团队拆分 */
.gteams-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

.gteams-title {
  flex: 0 0 auto;
  font-size: 1.25rem;
  color: var(--dim);
  letter-spacing: .24em;
  margin-bottom: 1.2rem;
}

.gteams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.9rem 3.6rem;
  align-content: start;
}

.gteam { min-width: 0; }

.gtop {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.gname {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.ggroup {
  flex: 1 1 auto;
  font-size: 1.2rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grate {
  font-family: Calibri, sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
  white-space: nowrap;
}

.grate.good { color: var(--gold); text-shadow: 0 0 1.6rem rgba(255, 201, 60, .45); }

.grate i { font-size: 1.2rem; font-style: normal; margin-left: .1rem; }

.gbar {
  height: 1rem;
  background: rgba(0, 0, 0, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .4rem;
  overflow: hidden;
  margin: .5rem 0 .45rem;
}

.gbar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: .35rem;
  background: linear-gradient(90deg, #C98A12, #FFC93C);
  transition: width 1.2s cubic-bezier(.22, .9, .3, 1);
}

.gbar > i.grow { width: var(--w); }

.gnums {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 1.35rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.gnums span { color: var(--dim); }

/* ============================================================
   战区页 · 顶部今日 KPI + 两军对垒
   ============================================================ */

.zone-page {
  flex: 1 1 auto;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .4rem 0 0;
}

.daykpi {
  flex: 0 0 auto;
  align-self: center;
  text-align: center;
  padding: 1rem 4.4rem 1.2rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(255, 201, 60, .17), rgba(255, 201, 60, .03));
  border: 1px solid rgba(255, 201, 60, .40);
  border-radius: 1.2rem;
  box-shadow: 0 0 .4rem rgba(255, 201, 60, .14), 0 0 4rem rgba(255, 201, 60, .10) inset;
}

.dk-label {
  font-size: 1.5rem;
  color: #F2DFB4;
  letter-spacing: .32em;
  margin-bottom: .35rem;
}

.dk-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .45rem;
}

.dk-value i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 5.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
}

.dk-value span {
  font-size: 1.45rem;
  color: var(--muted);
}

/* 去掉 VS 后，中间内容整体下移一点 */
.zmid {
  padding-top: 1rem;
  padding-bottom: 4rem;
}

/* 团队行：固定高度 + 居中排列，不再被拉成一条条黑带 */
.zteams {
  justify-content: center;
  gap: 1rem;
}

.zteam {
  flex: 0 0 auto;
  height: 7.2rem;
  background: rgba(255, 255, 255, .045);
}

/* KPI 卡与下方战区拉开一点 */
.daykpi { margin-top: .4rem; }

/* ============================================================
   战区页 · 中间列：上方今日KPI，下方领先差额
   左右两张战区卡保持原有满高，不被挤压
   ============================================================ */

.zone {
  align-items: stretch;
}

.zmid {
  flex: 0 0 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0 2.6rem;
}

.zmid-main {
  text-align: center;
  width: 100%;
}

/* KPI 卡改成适配窄列 */
.daykpi {
  width: 100%;
  align-self: auto;
  text-align: center;
  padding: 1.1rem 1.4rem 1.3rem;
  margin-bottom: 0;
  background: linear-gradient(135deg, rgba(255, 201, 60, .17), rgba(255, 201, 60, .03));
  border: 1px solid rgba(255, 201, 60, .40);
  border-radius: 1.2rem;
  box-shadow: 0 0 .4rem rgba(255, 201, 60, .14), 0 0 4rem rgba(255, 201, 60, .10) inset;
}

.dk-label {
  font-size: 1.35rem;
  color: #F2DFB4;
  letter-spacing: .2em;
  margin-bottom: .45rem;
}

.dk-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
}

.dk-value i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 4.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
}

.dk-value span {
  font-size: 1.3rem;
  color: var(--muted);
}

/* 中间列内容整体收紧，确保不超出战区卡底部 */
.zmid {
  padding: 1rem 0 1.4rem;
  justify-content: space-between;
}

.zmid .leadline {
  font-size: 2.9rem;
}

.zmid .gapnum {
  font-size: 6.6rem;
  margin-top: .2rem;
}

.zmid .gaplabel {
  font-size: 1.15rem;
  margin-top: .1rem;
}

.zmid-main {
  padding-bottom: .2rem;
}

/* 中间列：KPI 与差额作为一组整体居中，不再上下分家 */
.zmid {
  justify-content: center;
  gap: 3.6rem;
  padding: 0 0 .6rem;
}

/* 团队行分散铺满卡片，避免上半截空、下半截挤 */
.zteams {
  justify-content: space-evenly;
  gap: 0;
  padding-top: .6rem;
}

.zteam {
  height: 9rem;
}

/* ============================================================
   累计阶梯奖励（ladder）
   ============================================================ */

.ladder-page {
  flex: 1 1 auto;
  display: flex;
  gap: 2rem;
  min-height: 0;
  padding: .8rem .6rem 0;
}

.ldr-left {
  flex: 1.15 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.6rem 2.4rem 1.8rem;
  background: linear-gradient(180deg, rgba(255, 201, 60, .12), rgba(255, 201, 60, .02));
  border: 1px solid rgba(255, 201, 60, .35);
  border-radius: 1rem;
}

.ldr-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.6rem 2.2rem 1.8rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 1rem;
}

.ldr-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}

.ldr-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.4rem;
}

.ldr-main i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
}

.ldr-main .u { font-size: 1.5rem; color: var(--muted); }

.ldr-next {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: center;
  margin: 1.6rem 0 1.4rem;
}

.ldr-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

.ldr-row .k { font-size: 1.5rem; color: var(--muted); letter-spacing: .1em; }

.ldr-row .v {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.ldr-row .v.red { color: #FF7A68; text-shadow: 0 0 2rem rgba(255, 107, 90, .35); }
.ldr-row .v b { font-size: 3rem; }

.ldr-steps {
  display: flex;
  gap: .8rem;
  margin-top: auto;
}

.ldr-step {
  flex: 1 1 0;
  text-align: center;
  padding: .9rem .4rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line);
  border-radius: .5rem;
}

.ldr-step.next {
  border-color: var(--gold);
  box-shadow: 0 0 2.2rem rgba(255, 201, 60, .28);
  background: rgba(255, 201, 60, .10);
}

.ldr-step.hit {
  background: rgba(255, 201, 60, .22);
  border-color: rgba(255, 201, 60, .6);
}

.ldr-at {
  font-family: Calibri, sans-serif;
  font-size: 1.45rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ldr-bonus {
  font-family: Calibri, sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ldr-tag { font-size: 1.05rem; color: var(--dim); margin-top: .1rem; }

.ldr-ranks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  flex: 1 1 auto;
  margin-top: 1.2rem;
}

.ldr-rank {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  background: rgba(255, 255, 255, .04);
  border-radius: .6rem;
  border-left: 4px solid var(--dim);
}

.ldr-rank.r1 { border-left-color: #FFD700; background: rgba(255, 215, 0, .10); }
.ldr-rank.r2 { border-left-color: #C8C8C8; background: rgba(200, 200, 200, .07); }
.ldr-rank.r3 { border-left-color: #CD7F32; background: rgba(205, 127, 50, .08); }

.lr-no {
  font-family: Calibri, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  width: 2rem;
  text-align: center;
  color: var(--muted);
}

.lr-owner {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lr-team {
  flex: 1 1 auto;
  font-size: 1.25rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-val {
  font-family: Calibri, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
}

.lr-bonus {
  font-family: Calibri, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 7.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lr-bonus i { font-size: 1.1rem; font-style: normal; color: var(--muted); margin-left: .1rem; }

/* ============================================================
   巅峰冲刺（sprint）
   ============================================================ */

.sprint-page {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  min-height: 0;
  padding: .8rem .6rem 0;
}

.sp-side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1.8rem 2.2rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
}

.sp-side.left { background: linear-gradient(180deg, #0E2748, #071120); border-color: rgba(86, 148, 240, .30); }
.sp-side.right { background: linear-gradient(180deg, #35240F, #150E07); border-color: rgba(255, 176, 60, .30); }

.sp-label {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  text-align: center;
}

.sp-value {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-top: 1.4rem;
}

.sp-value i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 6.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
}

.sp-value .u { font-size: 1.4rem; color: var(--muted); }

.sp-cap { font-size: 1.2rem; color: var(--muted); letter-spacing: .2em; margin-top: .3rem; }

.sp-next {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-top: 1.2rem;
  padding: .8rem 1.6rem;
  background: rgba(0, 0, 0, .25);
  border-radius: .5rem;
}

.sp-next .k { font-size: 1.3rem; color: var(--muted); }
.sp-next .v {
  font-family: Calibri, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-next .v.red { color: #FF7A68; }

.sp-bonusbig {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1.4rem;
}

.sp-bonusbig .k { font-size: 1.5rem; color: var(--muted); letter-spacing: .1em; }

.sp-bonusbig i {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 4.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  line-height: 1;
}

.sp-bonusbig .u { font-size: 1.4rem; color: var(--muted); }

.sp-tiers {
  display: flex;
  gap: .5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1.6rem;
}

.sp-tier {
  flex: 1 1 0;
  text-align: center;
  padding: .8rem .2rem;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  border-radius: .4rem;
  opacity: .55;
}

.sp-tier.hit {
  opacity: 1;
  background: rgba(255, 201, 60, .18);
  border-color: rgba(255, 201, 60, .55);
}

.sp-at {
  font-family: Calibri, sans-serif;
  font-size: 1.15rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sp-bonus {
  font-family: Calibri, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.sp-vs {
  flex: 0 0 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-vs span {
  font-family: Calibri, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: .2em;
}

/* ============================================================
   五人制排行榜（five）
   ============================================================ */

.podium5 {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .7rem;
  min-height: 0;
  padding-bottom: .4rem;
}

.slot5 {
  width: 15.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.who5 { text-align: center; padding-bottom: .7rem; }

.badge5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-family: Calibri, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .5rem;
  background: rgba(255, 255, 255, .12);
  color: var(--muted);
}

.slot5.s1 .badge5 { background: linear-gradient(180deg, #FFE38A, var(--gold-d)); color: #2A1B03; box-shadow: 0 0 1.8rem rgba(255, 201, 60, .5); }
.slot5.s2 .badge5 { background: linear-gradient(180deg, #E8ECF5, var(--silver-d)); color: #1B2029; }
.slot5.s3 .badge5 { background: linear-gradient(180deg, #E8AE7E, var(--bronze-d)); color: #2B1507; }

.name5 { font-size: 2.4rem; font-weight: 700; letter-spacing: .03em; line-height: 1.15; }
.slot5.s1 .name5 { font-size: 2.9rem; }

.sub5 { font-size: 1rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.amt5 {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: .4rem;
  color: var(--silver);
}
.slot5.s1 .amt5 { font-size: 2.4rem; }
.amt5 i { font-style: normal; }
.amt5 span { font-size: 1rem; color: var(--muted); margin-left: .2rem; }

.stand5 {
  border-radius: .5rem .5rem 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: .8rem;
  overflow: hidden;
  transition: height 1.1s cubic-bezier(.22, .9, .3, 1);
  height: var(--h5, 20rem);
}

.stand5 span {
  font-family: Calibri, sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .18);
  line-height: 1;
}

.slot5.s1 .stand5 { height: 20rem; background: linear-gradient(180deg, #7A5A18, #2E1F07); border-top: 2px solid var(--gold); }
.slot5.s2 .stand5 { height: 15rem; background: linear-gradient(180deg, #3C4356, #171B25); border-top: 2px solid var(--silver); }
.slot5.s3 .stand5 { height: 15rem; background: linear-gradient(180deg, #3C4356, #171B25); border-top: 2px solid var(--silver); }
.slot5.s4 .stand5 { height: 10rem; background: linear-gradient(180deg, #54341F, #20140C); border-top: 2px solid var(--bronze); }
.slot5.s5 .stand5 { height: 10rem; background: linear-gradient(180deg, #54341F, #20140C); border-top: 2px solid var(--bronze); }

.chasers5 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .4rem 1rem 0;
}

.chase5 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.2rem;
  background: rgba(255, 255, 255, .03);
  border-radius: .4rem;
  font-size: 1.35rem;
}

.c5-no { font-family: Calibri, sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--dim); width: 1.8rem; }
.c5-name { font-size: 1.55rem; font-weight: 700; }
.c5-val { flex: 1 1 auto; text-align: right; font-family: Calibri, sans-serif; font-variant-numeric: tabular-nums; color: var(--silver); }
.c5-gap { color: var(--muted); min-width: 9rem; text-align: right; }
.c5-gap b { color: #FF7A68; font-family: Calibri, sans-serif; font-size: 1.6rem; }

/* ---------- 三屏统一收紧：内容居中，别上下分家 ---------- */

.ldr-left { justify-content: center; }
.ldr-next { margin: 1.8rem 0 0; }
.ldr-steps { margin-top: 2.6rem; }

.ldr-ranks {
  justify-content: center;
  gap: 1.4rem;
}

.ldr-rank { padding: 1.8rem 1.6rem; }
.lr-owner { font-size: 2.2rem; }
.lr-val { font-size: 2.2rem; }
.lr-bonus { font-size: 3rem; }

/* 冲刺：奖金与业绩同级醒目 */
.sp-side { justify-content: center; }
.sp-next { margin-top: 1.6rem; }
.sp-bonusbig { margin-top: 2rem; }
.sp-bonusbig i { font-size: 5.6rem; }
.sp-bonusbig .k { font-size: 1.7rem; }
.sp-tiers { margin-top: 3rem; }
.sp-tier { padding: 1.1rem .3rem; }
.sp-at { font-size: 1.3rem; }
.sp-bonus { font-size: 2.2rem; }

/* 五人台：固定高度，整体居中 */
.podium5 { flex: 0 0 auto; height: 42rem; }
.slot5.s1 .stand5 { height: 22rem; }
.slot5.s2 .stand5 { height: 16rem; }
.slot5.s3 .stand5 { height: 16rem; }
.slot5.s4 .stand5 { height: 10rem; }
.slot5.s5 .stand5 { height: 10rem; }

/* ---------- 细节收尾 ---------- */

/* 阶梯条的"还差多少"要看得见 */
.ldr-tag {
  font-size: 1.25rem;
  color: var(--muted);
  margin-top: .25rem;
}
.ldr-at { font-size: 1.6rem; }
.ldr-bonus { font-size: 2.5rem; }

/* 冲刺：奖金做成独立奖牌块，和业绩区分开 */
.sp-value i { font-size: 7.6rem; }
.sp-bonusbig {
  padding: 1.4rem 2.6rem;
  background: linear-gradient(135deg, rgba(255, 201, 60, .16), rgba(255, 201, 60, .04));
  border: 1px solid rgba(255, 201, 60, .40);
  border-radius: .9rem;
  box-shadow: 0 0 3rem rgba(255, 201, 60, .14);
  margin-top: 2.2rem;
}
.sp-bonusbig i { font-size: 6.2rem; }

/* 五人台整体往下压一点 */
.podium5 { margin-top: 1rem; }

/* ============================================================
   轮播开关 + 右上角放大
   ============================================================ */

.rotate-btn {
  padding: .65rem 1.7rem;
  font-size: 1.45rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  background: rgba(255, 201, 60, .10);
  border: 1px solid rgba(255, 201, 60, .45);
  border-radius: .5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.rotate-btn:hover {
  background: rgba(255, 201, 60, .22);
  border-color: rgba(255, 201, 60, .8);
}

.rotate-btn.paused {
  color: #6BE39A;
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .5);
}

.rotate-btn.paused:hover {
  background: rgba(34, 197, 94, .22);
}

/* 状态与时间：字号比左侧标题大一档，字体统一 */
.live {
  font-size: 2.8rem;
  font-family: inherit;
  letter-spacing: .06em;
}

.live i {
  width: 1.1rem;
  height: 1.1rem;
}

.clock {
  font-size: 2.8rem;
  font-family: inherit;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.meta { gap: 2rem; }

/* 标签字号提一档，和放大的右上角协调 */
.tab {
  font-size: 1.5rem;
  padding: .7rem 1.6rem;
}

.tabs { gap: .9rem; }

/* 标题也提一点，避免被右侧压过 */
.brand-text h1 { font-size: 2.7rem; }

/* 状态与时间再上一档，明显大于左侧标题 */
.live { font-size: 3.2rem; }
.clock { font-size: 3.2rem; }
.live i { width: 1.2rem; height: 1.2rem; }

/* ============================================================
   最强王者 · 右侧改成领奖台（与左侧同为金框）
   ============================================================ */

.ldr-right {
  background: linear-gradient(180deg, rgba(255, 201, 60, .12), rgba(255, 201, 60, .02));
  border: 1px solid rgba(255, 201, 60, .35);
  box-shadow: 0 0 3rem rgba(255, 201, 60, .10) inset;
}

.rp-podium {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  min-height: 0;
  padding: 1rem 0 .5rem;
}

.rp-slot {
  width: 12.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.rp-who { text-align: center; padding-bottom: .6rem; }

.rp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-family: Calibri, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .4rem;
  background: rgba(255, 255, 255, .12);
  color: var(--muted);
}

.rp1 .rp-badge { background: linear-gradient(180deg, #FFE38A, var(--gold-d)); color: #2A1B03; box-shadow: 0 0 1.6rem rgba(255, 201, 60, .5); }
.rp2 .rp-badge { background: linear-gradient(180deg, #E8ECF5, var(--silver-d)); color: #1B2029; }
.rp3 .rp-badge { background: linear-gradient(180deg, #E8AE7E, var(--bronze-d)); color: #2B1507; }

.rp-name { font-size: 2rem; font-weight: 700; letter-spacing: .03em; line-height: 1.2; }
.rp1 .rp-name { font-size: 2.4rem; }

.rp-team { font-size: 1.05rem; color: var(--muted); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-val {
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
  margin-top: .3rem;
}
.rp1 .rp-val { font-size: 2.2rem; color: var(--gold); }
.rp-val i { font-style: normal; }
.rp-val span { font-size: .9rem; color: var(--muted); margin-left: .15rem; }

.rp-bonus {
  display: inline-block;
  margin-top: .5rem;
  padding: .2rem .9rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2A1B03;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
  border-radius: 2rem;
}

.rp-stand {
  border-radius: .5rem .5rem 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: .7rem;
  overflow: hidden;
}

.rp-stand span {
  font-family: Calibri, sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .18);
  line-height: 1;
}

.rp1 .rp-stand { height: 11rem; background: linear-gradient(180deg, #7A5A18, #2E1F07); border-top: 2px solid var(--gold); }
.rp2 .rp-stand { height: 7.5rem; background: linear-gradient(180deg, #3C4356, #171B25); border-top: 2px solid var(--silver); }
.rp3 .rp-stand { height: 7.5rem; background: linear-gradient(180deg, #3C4356, #171B25); border-top: 2px solid var(--silver); }

.rp-chasers {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-top: .4rem;
}

.rp-chasers .chaser { padding: 1rem 1.2rem; gap: 1rem; }
.rp-chasers .c-name { font-size: 1.8rem; }
.rp-chasers .c-val { font-size: 1.9rem; }
.rp-chasers .c-gap { min-width: 11rem; padding-left: 1rem; }
.rp-chasers .c-gap .num { font-size: 2.2rem; }
.rp-chasers .c-gap .cap { font-size: .95rem; }

/* ============================================================
   十大魅力人物：整体上移 + 6-8 名收窄加高
   ============================================================ */

.mod-five {
  justify-content: flex-start;
  padding-top: .4rem;
}

.chasers5 {
  width: 74%;
  margin: 0 auto;
  gap: .9rem;
  padding: .6rem 0 0;
}

.chase5 {
  padding: 1.25rem 1.6rem;
  gap: 1.2rem;
}

.c5-no { font-size: 2rem; width: 2.2rem; }
.c5-name { font-size: 1.9rem; }
.c5-val { font-size: 1.7rem; }
.c5-gap { font-size: 1.3rem; min-width: 10rem; }
.c5-gap b { font-size: 2rem; }

/* ============================================================
   整体进度：拉开标签与进度条的间距，放大刻度与团队区
   ============================================================ */

.gprogress { padding: 3.6rem 2rem 2.2rem; }

.tick b {
  font-size: 1.5rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.gteams-title { font-size: 1.5rem; letter-spacing: .28em; }

.gteams {
  width: 86%;
  margin: 0 auto;
  gap: 3.2rem 4rem;
  align-content: space-between;
}

.gname { font-size: 2.15rem; }
.ggroup { font-size: 1.35rem; }
.grate { font-size: 2.5rem; }
.grate i { font-size: 1.4rem; }
.gnums { font-size: 1.5rem; }
.gbar { height: 1.1rem; }
.gbar > i { border-radius: .45rem; }

/* 右侧：领奖台固定高度，与左侧节奏对齐 */
.rp-podium {
  flex: 0 0 auto;
  height: 30rem;
}

.ldr-right { justify-content: center; }

/* 五人榜 6-8 名与台子留出呼吸 */
.chasers5 { padding-top: 1.4rem; }

/* 最强王者：左侧内容撑饱满，避免比右侧空 */
.ldr-left { padding-bottom: 2.6rem; }

.ldr-step {
  padding: 1.5rem .5rem;
  border-radius: .6rem;
}

.ldr-at { font-size: 1.55rem; }
.ldr-bonus { font-size: 2.7rem; }
.ldr-tag { font-size: 1.2rem; margin-top: .35rem; }

.ldr-main i { font-size: 7.6rem; }

.ldr-next { margin-top: 2.2rem; }
.ldr-steps { margin-top: 3.2rem; }

/* ============================================================
   最强王者 · 左侧档位加宽加高、右侧领奖台放大
   ============================================================ */

/* 档位：整体收窄、单格加高、字放大 */
.ldr-steps {
  width: 94%;
  margin: 3rem auto 0;
  gap: 1.1rem;
}

.ldr-step {
  padding: 2.2rem .5rem;
}

.ldr-at { font-size: 1.85rem; }
.ldr-bonus { font-size: 3.4rem; line-height: 1.15; }
.ldr-tag { font-size: 1.4rem; margin-top: .55rem; }

/* 右侧领奖台：向双端争霸看齐 */
.ldr-right { padding: 1.2rem 1.6rem 1.4rem; }

.ldr-right .ldr-title { font-size: 1.9rem; }

.rp-podium {
  height: 33rem;
  gap: 1.2rem;
  padding: .6rem 0 .4rem;
}

.rp-slot { width: 15.2rem; }

.rp-badge { width: 2.8rem; height: 2.8rem; font-size: 1.6rem; margin-bottom: .5rem; }
.rp-name { font-size: 2.3rem; }
.rp1 .rp-name { font-size: 2.8rem; }
.rp-team { font-size: 1.1rem; margin-top: .25rem; }
.rp-val { font-size: 2.1rem; margin-top: .4rem; }
.rp1 .rp-val { font-size: 2.5rem; }
.rp-bonus { font-size: 1.4rem; padding: .28rem 1.1rem; margin-top: .6rem; }

.rp1 .rp-stand { height: 14rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 10rem; }
.rp-stand span { font-size: 4.2rem; }

/* 4、5 名：收窄拉高 */
.rp-chasers {
  width: 88%;
  margin: 0 auto;
  gap: .8rem;
  padding-top: .6rem;
}

.rp-chasers .chaser { padding: 1.35rem 1.4rem; }
.rp-chasers .c-name { font-size: 1.95rem; }
.rp-chasers .c-val { font-size: 2.1rem; }
.rp-chasers .c-gap .num { font-size: 2.4rem; }
.rp-chasers .c-gap .cap { font-size: 1rem; }

/* 收一档高度，避免领奖台压到 4、5 名 */
.rp-podium { height: 28.5rem; }
.rp1 .rp-stand { height: 13rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 9rem; }

/* ============================================================
   本轮调整：左右平分 + 领奖台再放大 + 档位再收窄
   ============================================================ */

/* 冲刺：去掉 PK 后左右各占一半，撑满 */
.sprint-page { gap: 1.8rem; }
.sp-side { flex: 1 1 0; }

/* 最强王者：左右平分，不再一边宽一边窄 */
.ldr-left { flex: 1 1 0; }
.ldr-right { flex: 1 1 0; }

/* 档位再收窄，字大小不动 */
.ldr-steps {
  width: 87%;
  gap: .9rem;
}

.ldr-step { padding: 2.2rem .3rem; }

/* 右侧领奖台：卡位加宽、台子加高，向双端争霸看齐 */
.rp-podium {
  height: 31rem;
  gap: 1.4rem;
}

.rp-slot { width: 21rem; }

.rp1 .rp-stand { height: 17rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 12rem; }
.rp-stand span { font-size: 5rem; }

/* 4、5 名压紧一点，把高度让给台子 */
.rp-chasers { gap: .7rem; padding-top: .4rem; }
.rp-chasers .chaser { padding: 1.15rem 1.3rem; }

/* 台子锁定高度，不被 flex 压缩；领奖台区域给足空间 */
.rp-stand { flex: 0 0 auto; }

.rp-podium { height: 30rem; }

.rp1 .rp-stand { height: 16rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 11rem; }

/* 领奖台区域锁定，避免被压缩后顶到标题 */
.rp-podium {
  flex: 0 0 auto;
  height: 29rem;
  padding-top: 1.2rem;
}

.ldr-right .ldr-title {
  margin-bottom: .6rem;
  flex: 0 0 auto;
}

/* 台子略收，给 4、5 名留出位置 */
.rp1 .rp-stand { height: 15rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 10.5rem; }

/* 给领奖台足够空间，内容不再向上溢出压标题 */
.rp-podium {
  height: 33rem;
  padding-top: .8rem;
}

/* 压缩卡片内元素，把空间让给台子 */
.ldr-right .crown { width: 2.6rem; margin-bottom: .2rem; }
.rp-badge { margin-bottom: .3rem; }
.rp-bonus { margin-top: .4rem; }

.rp1 .rp-stand { height: 14.5rem; }
.rp2 .rp-stand, .rp3 .rp-stand { height: 10rem; }

/* ============================================================
   档位进度条
   ============================================================ */

.tierbar {
  width: 100%;
  padding: 2.4rem 0 4.4rem;
}

.tb-track {
  position: relative;
  height: 3.4rem;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.7rem;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .5);
}

.tb-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 1.7rem;
  background: linear-gradient(90deg, #C98A12 0%, #FFC93C 62%, #FFF3C4 100%);
  box-shadow: 0 0 2.6rem rgba(255, 201, 60, .55);
  transition: width 1.4s cubic-bezier(.22, .9, .3, 1);
}

.tb-fill.grow { width: var(--w); }

.tb-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .22);
}

.tb-tick.hit {
  background: rgba(255, 201, 60, .75);
  box-shadow: 0 0 1rem rgba(255, 201, 60, .6);
}

.tb-label {
  position: absolute;
  top: 100%;
  margin-top: .95rem;
  font-family: Calibri, "Microsoft YaHei", sans-serif;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .02em;
}

.tb-label.mid { transform: translateX(-50%); }
.tb-label.start { transform: translateX(-8%); }
.tb-label.end { transform: translateX(-92%); }
.tb-label.hit { color: var(--gold); font-weight: 700; }

/* 刻度标签奇偶错行，密集时不打架 */
.tb-label.row1 { margin-top: 3.1rem; }

/* 进度条本身再高一点，位置收紧 */
.tierbar { padding: 2rem 0 6.4rem; }
.tb-track { height: 3.8rem; }

/* 业绩极小时也留一丝可见宽度 */
.tb-fill { min-width: 1.2rem; }

.tb-label { font-size: 1.5rem; }

/* 刻度现在等分，不需要错行了 */
.tb-label.row1 { margin-top: .95rem; }
.tierbar { padding: 2rem 0 4.2rem; }

/* 进度条与上下内容的间距，让整块居中 */
.tierbar { padding: 1.8rem 0 3.6rem; }