/* 积分大屏样式 —— 20:9 画布，基于 vw/vh/rem 等比适配，内容绝不变形
 * 原理：--u = 1 个设计像素对应的实际长度 = min(100vw/2835, 100vh/1276)
 *       html 字号设为 --u，于是 1rem = 1 设计像素，所有尺寸数值与设计稿一致。
 *       横竖共用同一系数 -> 恒定 20:9、无拉伸变形；非 20:9 视口自动留边。
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 1 设计像素 = 视口宽/2835 与 视口高/1276 的较小值 */
  --u: min(calc(100vw / 2835), calc(100vh / 1276));
}

html { font-size: var(--u); }

html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }

.stage {
  position: absolute; top: 50%; left: 50%;
  width: 2835rem; height: 1276rem;
  transform: translate(-50%, -50%);
  background: #7a0000 url('../img/bg.jpg') center / cover no-repeat;
}

.panel { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }

/* ---- 左上 战区排名 ---- */
.panel-rank { left: 110rem; top: 95rem; width: 1434rem; height: 773rem; }
.bars {
  position: absolute; left: 90rem; right: 90rem; top: 120rem; bottom: 70rem;
  display: flex; align-items: flex-end; justify-content: space-around;
}
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 260rem; }
.bar-track { width: 190rem; height: 470rem; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill {
  width: 150rem; height: 0;
  background: linear-gradient(180deg, #fff2c4 0%, #ffcf6b 35%, #f0a63a 70%, #d9821f 100%);
  border-radius: 8rem 8rem 0 0;
  box-shadow: 0 0 18rem rgba(255,190,80,.45), inset 0 2rem 6rem rgba(255,255,255,.6);
  transition: height .8s cubic-bezier(.22,.61,.36,1);
}
.bar-name { color: #fff; font-size: 46rem; font-weight: 800; margin-top: 18rem; letter-spacing: 2rem; text-shadow: 0 2rem 8rem rgba(0,0,0,.55); }

/* ---- 右上 通关播报 ---- */
.panel-broadcast { left: 1634rem; top: 95rem; width: 1092rem; height: 768rem; }
.broadcast-viewport { position: absolute; left: 80rem; right: 60rem; top: 130rem; bottom: 70rem; overflow: hidden; }
.broadcast-list { list-style: none; will-change: transform; }
.broadcast-list li {
  color: #fff; font-size: 44rem; font-weight: 700; line-height: 84rem; height: 84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  text-shadow: 0 2rem 6rem rgba(0,0,0,.5);
}
.broadcast-list li .hl { color: #ffcf6b; font-weight: 800; }
.broadcast-scrolling { animation: bcScroll linear infinite; }
@keyframes bcScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---- 下方 竞速榜 ---- */
.panel-sprint { left: 132rem; top: 930rem; width: 2570rem; height: 303rem; }
.sprint-grid {
  position: absolute; left: 70rem; right: 70rem; top: 92rem; bottom: 26rem;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr);
  column-gap: 18rem; row-gap: 14rem;
}
.sprint-item {
  position: relative; display: flex; align-items: center;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  padding-left: 100rem; padding-right: 14rem;
}
.sprint-item .rk-num {
  /* 非 1/2/3 名：不再绘制底框，直接用 bg4-0.png 自带的圆形框，
   * 该圆位于图片最左侧、上下贴边，圆心约在 x=6.9%、y=50%，故数字在此居中 */
  position: absolute; left: 6.9%; top: 50%; transform: translate(-50%, -50%);
  color: #ffd394; font-size: 34rem; font-weight: 800; line-height: 1; text-align: center;
  text-shadow: 0 1rem 3rem rgba(0,0,0,.45);
}
.sprint-item .txt { flex: 1; text-align: left; color: #ffd394; font-size: 38rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1rem 4rem rgba(0,0,0,.5); }
.sprint-item .txt .nm { color: #ffd394; margin-left: 6rem; }
.sprint-empty { color: #ffd394; font-size: 24rem; justify-content: center; padding-left: 0; }