/* 玩湃数据视觉系统 - 公共样式（1920x1080 设计稿还原 v2） */
:root {
  --yellow: #fff001;        /* 主黄 */
  --ink: #0c0c0c;           /* 黑面板 */
  --p-label: #e4e454;       /* 黑面板标签色 */
  --p-num: #fff001;         /* 黑面板数字色 */
}

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

html, body { height: 100%; background: #101012; overflow: hidden; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  background: #ffffff;
  transform-origin: center center;
  overflow: hidden;
}

/* ============ 头部（三页一致） ============ */
.hdr {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 115px;
  background: #ffffff;
}
.hdr .logo { position: absolute; left: 30px; top: 22px; height: 72px; }
.hdr .sys {
  position: absolute; left: 385px; top: 30px;
  background: #0c0c0c; color: #ffffff;
  font-size: 25px; font-weight: 700; letter-spacing: 1px;
  padding: 13px 30px; border-radius: 40px;
  white-space: nowrap;
}
.hdr .venue {
  position: absolute; top: 40px;
  font-size: 26px; font-weight: 700; color: #141414;
  display: flex; align-items: center; white-space: nowrap;
}
.hdr .venue svg { width: 26px; height: 32px; margin-right: 10px; flex: none; display: block; }
/* 定位图标：轻跳（上下 6px，1.8s 一轮，一轮大跳 + 小跳，像心跳） */
.hdr .venue svg { animation: pinHop 1.8s cubic-bezier(.34,.1,.5,1) infinite; }
@keyframes pinHop {
  0%, 100% { transform: translateY(0); }
  10%      { transform: translateY(-6px); }
  22%      { transform: translateY(0); }
  30%      { transform: translateY(-2.4px); }
  38%      { transform: translateY(0); }
}
.hdr .date { position: absolute; top: 43px; font-size: 21px; font-weight: 700; color: #141414; white-space: nowrap; }
.hdr .date .n { font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif; }
.hdr .date .wk { color: #6b6b6b; font-weight: 400; margin-left: 6px; }
.hdr .time {
  position: absolute; top: 34px;
  font-size: 34px; font-weight: 700; color: #141414;
  font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif;
}
.hdr .temp {
  position: absolute; top: 40px;
  font-size: 25px; font-weight: 700; color: #141414;
  font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif;
}
.hdr .wicon { position: absolute; top: 26px; height: 64px; }
.hdr .wicon svg { width: 64px; height: 64px; display: block; }

/* ============ 通用数字字体 ============ */
.num {
  font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
}

/* ============ 黄色卡片表格 ============ */
.ycard {
  position: relative;
  background: var(--yellow);
  border-radius: 18px;
  padding: 14px 16px;
}
/* 页码指示（仅超出容量自动翻页时显示，藏在标题右上角，不占纵向空间） */
.ycard .yc-pg {
  position: absolute; top: 16px; right: 18px;
  font-size: 13px; color: #3c3c0c; opacity: .55;
  font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif;
}
.ycard .yc-title {
  font-size: 19px; font-weight: 700; color: #141400;
  display: flex; align-items: center; justify-content: center;
}
.ycard .yc-title img { height: 34px; margin-right: 10px; }
.ycard .yc-sub { font-size: 14px; color: #3c3c0c; font-weight: 700; text-align: center; margin-top: 2px; }
.ytable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ytable th { font-size: 14px; color: #141400; font-weight: 700; padding: 5px 2px; text-align: center; border-bottom: 1.5px solid rgba(20,20,0,.55); }
.ytable td { font-size: 14px; color: #141400; padding: 6px 2px; text-align: center; border-bottom: 1px dashed rgba(20,20,0,.3); }
.ytable tr:last-child td { border-bottom: none; }

/* ============ 黄卡表格容器：超出容量时按页上滑轮播，卡片高度恒定不跳动 ============ */
.ybody { position: relative; overflow: hidden; margin-top: 8px; }
.ybody > table.ytable { margin-top: 0; }
/* 翻页层绝对定位叠加，新页从下方滑入的同时旧页向上滑出，中间不留空白帧 */
.ybody .tpg { position: absolute; left: 0; top: 0; width: 100%; border-collapse: collapse; }
.ybody .tpg tr, .ybody > table.tbl-anim > tr { animation: tbRowIn .6s ease both; }
@keyframes tbRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }