/* ============================================================
   鎏金夜宴 · 排行榜电视大屏
   藏蓝紫夜色 + 明亮琥珀金，猎人榜香槟银 + 深藏蓝
   ============================================================ */

:root,
[data-theme="navy-gold"] {
  --ink-0: #050b1a;
  --ink-1: #0a1530;
  --ink-2: #141c4a;
  --gold-rgb: 242, 201, 106;
  --gold: rgb(242, 201, 106);
  --gold-hi: #ffe6a6;
  --gold-lo: #9c6f1e;
  --ember-rgb: 240, 164, 104;
  --ember: rgb(240, 164, 104);
  --silver-rgb: 219, 231, 245;
  --blue-rgb: 110, 168, 255;
  --emerald: #57c98a;
  --cream: #f6f2e8;
  --muted: #bcc6d8;
  --font-title: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  --font-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

[data-theme="neon"] {
  --gold-rgb: 94, 231, 255;
  --gold: rgb(242, 201, 106);
  --gold-hi: #d8fbff;
  --gold-lo: #1b8fb0;
  --ember-rgb: 255, 94, 219;
  --ember: rgb(240, 164, 104);
  --silver-rgb: 186, 220, 255;
  --blue-rgb: 255, 94, 219;
  --cream: #eaf7ff;
  --muted: #9ec4e4;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
 * 小米盒子 Android 6.0 WebView 核弹级兼容覆盖
 * 干掉所有动画、过渡、backdrop-filter、CSS变量、gap
 * 让布局退化到最原始的 CSS2.1 水平
 * ════════════════════════════════════════════════════════════════ */
html[data-tv="1"] *,
html[data-tv="1"] *::before,
html[data-tv="1"] *::after {

  backdrop--webkit-backdrop-gap: 0 !important;
}
/* 强制所有元素使用 display:block 或 flex + -webkit-box，
   彻底废掉任何 display:grid / display:inline-grid */
html[data-tv="1"] .board-area {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
}

body {
  background:
    linear-gradient(180deg, rgba(5, 10, 26, 0.6) 0%, rgba(5, 10, 26, 0.72) 100%),
    url("./assets/bg-live.jpg") center center / cover no-repeat,
    linear-gradient(160deg, #14100a 0%, #0d0a06 55%, #0a0704 100%);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #f6f2e8;
  cursor: none;
  user-select: none;
}

/* ============================================================
 * 超级保守模式：老 WebView (Chromium 49) 崩溃预防
 * legacy-css 已无条件加给所有 <html>（display.js 开头）
 * 干掉 backdrop-filter、复杂阴影、CSS 变量引用等
 * ============================================================ */
.legacy-css * {
  -webkit-backdrop-backdrop--webkit-}
.legacy-css .board,
.legacy-css .frame,
.legacy-css .champion,
.legacy-css .rank-row,
.legacy-css .header,
.legacy-css .footer {
  -webkit-}

/* ============ 舞台背景 ============ */
/* 完全照搬赛狮 TV 在小米盒子上验证过的方案：
   CSS: #stage { top:50%; left:50%; transform-origin:center center; transform:translate(-50%,-50%); }
   JS:  fitStage 只更新 scale，百分比 translate 交给 CSS 固定
   赛狮小米盒子 Android 6.0.1 已验证能用！ */
#stage {
  position: fixed;
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(132, 92, 214, 0.30), transparent 62%),
    radial-gradient(760px 520px at 88% 12%, rgba(70, 108, 226, 0.28), transparent 62%),
    radial-gradient(700px 500px at 92% 88%, rgba(206, 94, 176, 0.22), transparent 64%),
    radial-gradient(720px 520px at 6% 92%, rgba(58, 138, 220, 0.22), transparent 64%),
    radial-gradient(1000px 700px at 50% 115%, rgba(128, 78, 196, 0.20), transparent 66%),
    radial-gradient(600px 400px at 50% 26%, rgba(242, 201, 106, 0.22), transparent 70%),
    linear-gradient(180deg, #1a2458 0%, #121a40 46%, #0b1026 100%);
  overflow: hidden;
}

/* 多彩星尘 */
#stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    radial-gradient(2px 2px at 6% 12%, rgba(255, 230, 166, 0.9), transparent),
    radial-gradient(1.6px 1.6px at 18% 34%, rgba(255, 230, 166, 0.7), transparent),
    radial-gradient(2.4px 2.4px at 30% 8%, rgba(255, 248, 221, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 44% 22%, rgba(255, 230, 166, 0.6), transparent),
    radial-gradient(2px 2px at 58% 6%, rgba(255, 248, 221, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 72% 18%, rgba(255, 230, 166, 0.7), transparent),
    radial-gradient(2.4px 2.4px at 86% 10%, rgba(255, 248, 221, 0.85), transparent),
    radial-gradient(1.6px 1.6px at 94% 32%, rgba(255, 230, 166, 0.6), transparent),
    radial-gradient(2px 2px at 10% 78%, rgba(255, 230, 166, 0.65), transparent),
    radial-gradient(1.6px 1.6px at 24% 92%, rgba(255, 248, 221, 0.7), transparent),
    radial-gradient(2.4px 2.4px at 40% 84%, rgba(255, 230, 166, 0.6), transparent),
    radial-gradient(1.6px 1.6px at 62% 94%, rgba(255, 230, 166, 0.6), transparent),
    radial-gradient(2px 2px at 78% 82%, rgba(255, 248, 221, 0.75), transparent),
    radial-gradient(1.6px 1.6px at 90% 92%, rgba(255, 230, 166, 0.65), transparent),
    radial-gradient(2px 2px at 96% 66%, rgba(255, 248, 221, 0.6), transparent),
    radial-gradient(1.8px 1.8px at 14% 52%, rgba(186, 156, 255, 0.85), transparent),
    radial-gradient(1.4px 1.4px at 26% 44%, rgba(148, 190, 255, 0.8), transparent),
    radial-gradient(2.2px 2.2px at 38% 58%, rgba(255, 156, 228, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 52% 46%, rgba(186, 156, 255, 0.75), transparent),
    radial-gradient(1.8px 1.8px at 66% 48%, rgba(148, 190, 255, 0.8), transparent),
    radial-gradient(1.4px 1.4px at 74% 62%, rgba(255, 156, 228, 0.65), transparent),
    radial-gradient(2.2px 2.2px at 84% 54%, rgba(186, 156, 255, 0.75), transparent),
    radial-gradient(1.6px 1.6px at 92% 74%, rgba(148, 190, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 34% 96%, rgba(255, 220, 150, 0.8), transparent),
    radial-gradient(2px 2px at 70% 98%, rgba(255, 220, 150, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 4% 40%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.3px 1.3px at 9% 62%, rgba(186, 220, 255, 0.8), transparent),
    radial-gradient(1.7px 1.7px at 16% 88%, rgba(255, 180, 230, 0.75), transparent),
    radial-gradient(1.3px 1.3px at 21% 18%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.9px 1.9px at 35% 26%, rgba(200, 170, 255, 0.8), transparent),
    radial-gradient(1.4px 1.4px at 47% 12%, rgba(255, 210, 240, 0.75), transparent),
    radial-gradient(1.6px 1.6px at 55% 32%, rgba(170, 210, 255, 0.8), transparent),
    radial-gradient(1.3px 1.3px at 64% 10%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 76% 40%, rgba(255, 190, 235, 0.75), transparent),
    radial-gradient(1.4px 1.4px at 82% 72%, rgba(190, 225, 255, 0.8), transparent),
    radial-gradient(1.7px 1.7px at 95% 52%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 88% 96%, rgba(255, 200, 235, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 48% 68%, rgba(255, 230, 170, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 30% 48%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.6px 1.6px at 68% 66%, rgba(200, 180, 255, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 58% 86%, rgba(255, 255, 255, 0.65), transparent);
  opacity: 0.7;
  animation: dustTwinkle 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes dustTwinkle {
  from { opacity: 0.45; }
  to { opacity: 0.8; }
}

/* 四角压暗，突出中央舞台 */
#stage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
}

/* 飘落金色光点 */
.spark-field {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.spark-field i {
  position: absolute;
  top: -5%;
  left: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6e0 0%, rgba(242, 201, 106, 0.85) 42%, rgba(242, 201, 106, 0) 72%);
  opacity: 0;
  animation: sparkFall 12s linear 0s infinite;
}

.spark-field i.em {
  background: radial-gradient(circle, #ffffff 0%, rgba(236, 226, 200, 0.8) 42%, rgba(236, 226, 200, 0) 72%);
  }

@keyframes sparkFall {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  8% { opacity: 0.75; }
  55% { transform: translate3d(26px, 560px, 0) scale(1); opacity: 0.6; }
  100% { transform: translate3d(-14px, 1120px, 0) scale(0.7); opacity: 0; }
}

/* 葫芦品牌水印 */
.gourd {
  position: absolute;
  width: 300px;
  height: 380px;
  color: #f2c96a;
  opacity: 0.05;
  pointer-events: none;
}

.gourd-tl {
  left: -90px;
  top: 30px;
  transform: rotate(-16deg);
}

.gourd-br {
  right: -80px;
  bottom: -40px;
  transform: rotate(14deg);
  width: 340px;
  height: 430px;
  opacity: 0.045;
}

.cloud-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.26;
}

/* ============ 外框 ============ */
.frame {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  left: 18px;
  border: 1px solid rgba(242, 201, 106, 0.55);
  }

.frame::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border: 1px solid rgba(242, 201, 106, 0.26);
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
  pointer-events: none;
}

.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; transform: rotate(90deg); }
.corner-br { bottom: 0; right: 0; transform: rotate(180deg); }
.corner-bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* ============ 标题 ============ */
.header {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -90px;
  width: 1180px;
  height: 330px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(242, 201, 106, 0.14) 0%, transparent 66%);
  pointer-events: none;
}

.header::after {
  content: "";
  position: relative;
  margin-top: 12px;
  width: 420px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 201, 106, 0.5), transparent);
}

.eyebrow {
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: 9px;
  color: rgba(242, 201, 106, 0.6);
  text-indent: 9px;
}

.title-row {
  display: flex;
  align-items: center;
  }

/* 自定义 LOGO：固定在标题左侧，带金色投影 */
.header-logo {
  position: absolute;
  left: 96px;
  top: 50%;
  transform: translateY(-50%);
  height: 84px;
  max-width: 240px;
  object-fit: contain;
  }

.header-logo[hidden] {
  display: none;
}

.title-orn {
  display: flex;
  align-items: center;
  color: #f2c96a;
}

.title-orn i {
  display: block;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 201, 106, 0.8));
}

.title-orn:last-child i {
  background: linear-gradient(90deg, rgba(242, 201, 106, 0.8), transparent);
}

.title-orn b {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: #f2c96a;
  clip-path: polygon(50% 0%, 56% 38%, 100% 50%, 56% 62%, 50% 100%, 44% 62%, 0% 50%, 44% 38%);
  opacity: 0.85;
  }

.header h1 {
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 11px;
  line-height: 1.06;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe9bd 34%, #f2c96a 74%, #b8862f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGlow 7s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    }
  50% {
    }
}

.subtitle {
  margin-top: 9px;
  font-size: 14px;
  letter-spacing: 6px;
  color: rgba(226, 235, 252, 0.6);
  position: relative;
  padding: 0 84px;
  text-indent: 6px;
}

.subtitle::before,
.subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 62px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 201, 106, 0.5));
}

.subtitle::before { left: 0; }
.subtitle::after { right: 0; transform: scaleX(-1); }

/* ============ 榜单区域 ============ */
/* 方向 A: 彻底抛弃 CSS Grid，改用 flex，兼容 Android 4.x WebView */
.board-area {
  position: absolute;
  top: 174px;
  bottom: 62px;
  left: 44px;
  right: 44px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.board-area[data-board-view="week"] .board[data-type="monthChampion"],
.board-area[data-board-view="week"] .board[data-type="monthHunter"] {
  display: none;
}

.board-area[data-board-view="month"] .board[data-type="champion"],
.board-area[data-board-view="month"] .board[data-type="hunter"] {
  display: none;
}

/* ---------- 单屏积分榜 ---------- */
/* 默认隐藏积分榜，仅在 points 视图下显示；其余榜单同时隐藏 */
.board-area .board[data-type="points"] {
  display: none;
}
.board-area[data-board-view="points"] .board[data-type="champion"],
.board-area[data-board-view="points"] .board[data-type="hunter"],
.board-area[data-board-view="points"] .board[data-type="monthChampion"],
.board-area[data-board-view="points"] .board[data-type="monthHunter"] {
  display: none;
}
.board-area[data-board-view="points"] .board-divider {
  display: none;
}
.board-area[data-board-view="points"] .board[data-type="points"] {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  max-width: 1400px;
  margin: 0 auto;
}

/* Grid 时代的 grid-column/row 已废弃，用 flex 子元素宽度替代 */
.board-area > .board {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.board-area > .board-divider {
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
  width: 52px;
}

/* ---------- 榜面板 ---------- */
.board {
  --accent-rgb: 242, 201, 106;
  position: relative;
  height: 100%;
  padding: 16px 20px 14px;
  border: 1px solid rgba(242, 201, 106, 0.34);
  border-radius: 4px;
  background:
    radial-gradient(700px 320px at 14% 0%, rgba(242, 201, 106, 0.18), transparent 64%),
    radial-gradient(560px 300px at 92% 100%, rgba(70, 108, 226, 0.14), transparent 66%),
    linear-gradient(180deg, rgba(26, 34, 82, 0.92) 0%, rgba(9, 14, 38, 0.96) 100%);
  overflow: hidden;
  animation: boardViewIn 0.6s cubic-bezier(0.2, 0.75, 0.3, 1);
}

.board[data-type="hunter"],
.board[data-type="monthHunter"] {
  --accent-rgb: 219, 231, 245;
  background:
    radial-gradient(700px 320px at 14% 0%, rgba(242, 201, 106, 0.15), transparent 64%),
    radial-gradient(560px 300px at 92% 100%, rgba(58, 138, 220, 0.13), transparent 66%),
    linear-gradient(180deg, rgba(22, 32, 62, 0.94) 0%, rgba(7, 12, 30, 0.97) 100%);
}

@keyframes boardViewIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* 面板内双层描边 */
.board::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 1px solid rgba(242, 201, 106, 0.09);
  border-radius: 2px;
  pointer-events: none;
}

/* 缓慢流光 */
.board::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 38%;
  height: 180%;
  z-index: 0;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 248, 221, 0.02) 40%,
    rgba(255, 248, 221, 0.05) 52%,
    transparent 100%);
  transform: rotate(12deg);
  animation: boardSheen 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes boardSheen {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  58% { left: 125%; opacity: 0.8; }
  64%, 100% { left: 125%; opacity: 0; }
}

.board-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  }

/* 面板顶部高光边 */
.board-inner::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -20px;
  right: -20px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(242, 201, 106, 0.65) 20%,
    rgba(255, 248, 221, 0.9) 50%,
    rgba(242, 201, 106, 0.65) 80%,
    transparent);
  pointer-events: none;
}

/* ---------- 榜单标题 ---------- */
.board-head {
  display: flex;
  align-items: center;
  flex: none;
  height: 42px;
  padding: 0 2px;
}

.board-head b.star {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #f2c96a;
  clip-path: polygon(50% 0%, 56% 38%, 100% 50%, 56% 62%, 50% 100%, 44% 62%, 0% 50%, 44% 38%);
  vertical-align: middle;
  }

.board[data-type="hunter"] .board-head b.star,
.board[data-type="monthHunter"] .board-head b.star {
  background: #e6dfcd;
}

.board-head h2 {
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 5px;
  background: linear-gradient(180deg, #fffbea 0%, #ffe6a6 52%, #f2c96a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.board[data-type="hunter"] .board-head h2,
.board[data-type="monthHunter"] .board-head h2 {
  background: linear-gradient(180deg, #fffdf7 0%, #ece6d8 52%, #cdc4ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  }

.board-head .tag {
  flex: none;
  padding: 2px 10px 3px;
  border: 1px solid rgba(242, 201, 106, 0.32);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(242, 201, 106, 0.85);
  background: rgba(242, 201, 106, 0.07);
  white-space: nowrap;
}

.board-head .line {
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, rgba(242, 201, 106, 0.45), rgba(242, 201, 106, 0));
}

/* ---------- 榜首 ---------- */
.champion {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  flex: none;
  height: 210px;
  padding: 4px 16px 8px 22px;
  border-bottom: 1px solid rgba(242, 201, 106, 0.12);
}
/* champion 子元素固定宽度/自适应（替代 grid-template-columns: 176px 1fr） */
.champion > .champ-avatar-wrap {
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
  width: 176px;
}
.champion > .champ-info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.champion::before {
  content: "";
  position: absolute;
  left: -6%;
  top: 50%;
  width: 520px;
  height: 400px;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, rgba(242, 201, 106, 0.16) 0%, rgba(242, 201, 106, 0.05) 45%, transparent 72%);
  pointer-events: none;
}

.medallion {
  position: relative;
  z-index: 2;
  width: 168px;
  height: 168px;
  flex: none;
  }

/* 外层放射光刺（收敛亮度） */
.medallion::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  left: -30px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 235, 173, 0.6) 0deg 1deg,
    rgba(255, 235, 173, 0) 1deg 8deg
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 58%, #000 59% 70%, transparent 71%);
  opacity: 0.3;
  pointer-events: none;
}

.board[data-type="hunter"] .medallion::before,
.board[data-type="monthHunter"] .medallion::before {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(246, 239, 218, 0.55) 0deg 1deg,
    rgba(246, 239, 218, 0) 1deg 8deg
  );
}

/* 外层静态高光弧 */
.medallion::after {
  content: "";
  position: absolute;
  top: -11px;
  right: -11px;
  bottom: -11px;
  left: -11px;
  border-radius: 50%;
  background: conic-gradient(
    from 40deg,
    transparent 0deg 24deg,
    rgba(255, 248, 221, 0.85) 30deg 33deg,
    transparent 36deg 170deg,
    rgba(255, 230, 166, 0.6) 176deg 179deg,
    transparent 182deg 328deg,
    rgba(255, 248, 221, 0.45) 334deg 337deg,
    transparent 340deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 79% 83%, transparent 84%);
  mask: radial-gradient(circle, transparent 0 78%, #000 79% 83%, transparent 84%);
  pointer-events: none;
}

.board[data-type="hunter"] .medallion::after,
.board[data-type="monthHunter"] .medallion::after {
  background: conic-gradient(
    from 40deg,
    transparent 0deg 26deg,
    rgba(250, 244, 226, 0.7) 32deg,
    transparent 40deg 172deg,
    rgba(222, 212, 184, 0.5) 182deg,
    transparent 190deg 330deg,
    rgba(255, 248, 221, 0.4) 338deg,
    transparent 346deg
  );
}

.ring-outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    #6f5015 0deg,
    #e8c87c 34deg,
    #fff3d2 62deg,
    #f2c96a 112deg,
    #6f5015 176deg,
    #e8c87c 244deg,
    #fff3d2 292deg,
    #6f5015 360deg
  );
  animation: medalPulse 6s ease-in-out infinite;
}

.ring-outer::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 2%;
  width: 58%;
  height: 36%;
  border-radius: 50%;
  transform: rotate(-26deg);
  background: radial-gradient(ellipse at 45% 45%,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.22) 46%,
    rgba(255, 255, 255, 0) 72%);
  opacity: 0.5;
  pointer-events: none;
}

.ring-outer::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 50%;
  pointer-events: none;
}

.board[data-type="hunter"] .ring-outer,
.board[data-type="monthHunter"] .ring-outer {
  background: conic-gradient(
    from 210deg,
    #5c5541 0deg,
    #ded6bf 36deg,
    #fffaf0 64deg,
    #d7ceb6 116deg,
    #5c5541 178deg,
    #cdc3a9 248deg,
    #fffaf0 294deg,
    #5c5541 360deg
  );
  animation: medalPulseMonth 6s ease-in-out infinite;
}

@keyframes medalPulse {
  0%, 100% {
    }
  50% {
    }
}

@keyframes medalPulseMonth {
  0%, 100% {
    }
  50% {
    }
}

.ring-inner {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #241d14 0%, #100d09 58%, #050405 100%);
  border: 2px solid rgba(255, 230, 166, 0.45);
  }

.board[data-type="hunter"] .ring-inner,
.board[data-type="monthHunter"] .ring-inner {
  background: radial-gradient(circle at 50% 28%, #17202c 0%, #0a1019 58%, #04060a 100%);
  border-color: rgba(234, 226, 202, 0.42);
  }

.champ-avatar {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #241d14, #0c0a08);
  border: 1px solid rgba(255, 230, 166, 0.3);
}

.champ-avatar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  /* 只保留贴边的极淡压角，不再盖住头像中心，避免照片发灰发雾（2026-10-30） */
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0) 86%,
    rgba(0, 0, 0, 0.22) 100%);
  }

.champ-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  color: #ffe6a6;
  background: radial-gradient(circle at 50% 30%, #241d14, #0c0a08);
}

.board[data-type="hunter"] .avatar-initial,
.board[data-type="monthHunter"] .avatar-initial {
  color: #ece6d8;
  background: radial-gradient(circle at 50% 30%, #17202c, #070b12);
}

.champ-avatar .avatar-initial { font-size: 68px; }
.rank-avatar .avatar-initial { font-size: 19px; }

.crown {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 74px;
  height: 44px;
  transform: translateX(-50%);
  animation: crownFloat 5s ease-in-out infinite;
}

@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* 冠军羽翼 */
.wing-img {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 168px;
  pointer-events: none;
  opacity: 0.7;
}

.wing-img-left {
  left: -62px;
  transform: translateY(-50%) rotate(-14deg);
  animation: wingFlapLeft 6s ease-in-out infinite;
}

.wing-img-right {
  left: 106px;
  transform: translateY(-50%) scaleX(-1) rotate(-14deg);
  animation: wingFlapRight 6s ease-in-out infinite;
}

/* 猎人榜翅膀转为香槟银，避免抢金色主题 */
.board[data-type="hunter"] .wing-img,
.board[data-type="monthHunter"] .wing-img {
  }

@keyframes wingFlapLeft {
  0%, 100% { transform: translateY(-50%) rotate(-17deg); }
  50% { transform: translateY(-50%) rotate(-11deg); }
}

@keyframes wingFlapRight {
  0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(-17deg); }
  50% { transform: translateY(-50%) scaleX(-1) rotate(-11deg); }
}

/* 奖章四周闪烁星光（用 clip-path 绘制四角星，避免老 WebView 字体缺字乱码） */
.medal-star {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  background: #fff8dd;
  clip-path: polygon(50% 0%, 56% 38%, 100% 50%, 56% 62%, 50% 100%, 44% 62%, 0% 50%, 44% 38%);
  pointer-events: none;
  animation: starTwinkle 3.2s ease-in-out infinite;
}

.board[data-type="hunter"] .medal-star,
.board[data-type="monthHunter"] .medal-star {
  }

.ms1 { left: -34px; top: 2px; animation-delay: 0s; }
.ms2 { right: -38px; top: 40%; width: 11px; height: 11px; animation-delay: 1.2s; }

@keyframes starTwinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.15) rotate(20deg); }
}

.champ-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.plaque {
  padding: 3px 22px 4px;
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #33210a;
  background: linear-gradient(180deg, #fffbe8 0%, #f3d894 42%, #d8a24c 74%, #b5862f 100%);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  }

.board[data-type="hunter"] .plaque,
.board[data-type="monthHunter"] .plaque {
  background: linear-gradient(180deg, #fffdf7 0%, #ece5d6 44%, #c6bda6 100%);
  color: #2c2618;
}

.champ-name {
  margin-top: 12px;
  max-width: 100%;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe9bd 42%, #f2c96a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.champ-meta {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  }

.champ-cards {
  display: flex;
  align-items: baseline;
  color: #ffe6a6;
}

.board[data-type="hunter"] .champ-cards,
.board[data-type="monthHunter"] .champ-cards {
  color: #f2ecdd;
}

.champ-cards .label {
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(226, 235, 252, 0.55);
}

.champ-cards b {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  }

.ico-card {
  width: 20px;
  height: 20px;
  flex: none;
  align-self: center;
}

.champ-cards .ico-card {
  width: 23px;
  height: 23px;
  margin-right: 2px;
}

/* ---------- 2-10 名 ---------- */
/* 方向 A: 彻底抛弃 grid-template-rows，改用 flex column 等分布局 */
.rank-list {
  flex: 1;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.rank-list > .rank-row {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-height: 0;
}

.rank-row {
  position: relative;
  /* 方向 A: 彻底抛弃 grid 4 列，改用 flex + 子元素固定宽度 */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 14px 0 6px;
  border-bottom: 1px solid rgba(242, 201, 106, 0.1);
  animation: rowIn 0.5s cubic-bezier(0.22, 0.8, 0.26, 1) both;
}
/* 子元素固定宽度/自适应（替代 grid-template-columns: 42px 44px 1fr 236px） */
.rank-row > .rank-no { -webkit-box-flex: 0; -webkit-flex: 0 0 42px;  flex: 0 0 42px; }
.rank-row > .rank-avatar { -webkit-box-flex: 0; -webkit-flex: 0 0 44px;  flex: 0 0 44px; }
.rank-row > .rank-name   { -webkit-box-flex: 1; -webkit-flex: 1 1 0;     flex: 1 1 0; min-width: 0; }
.rank-row > .rank-cards  { -webkit-box-flex: 0; -webkit-flex: 0 0 236px; flex: 0 0 236px; }
/* { margin-left: 14px; }

/* 名次行入场延迟统一由 JS 通过 --row-in-delay 变量控制（见下方 .rank-row 定义）。
   这里不要再写 :nth-child 静态延迟：其特异性高于 .rank-row，会压制变量延迟，
   导致依次入场失效。 */

@keyframes rowIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.rank-row:last-child {
  border-bottom: none;
}

/* 前三名左侧金色标识条 */
.rank-row.rank-2::before,
.rank-row.rank-3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 52%;
  transform: translateY(-50%);
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(110, 168, 255, 0.95), transparent);
}

.rank-row.rank-3::before {
  background: linear-gradient(180deg, transparent, rgba(240, 164, 104, 0.9), transparent);
}

.rank-row.rank-2 {
  background: linear-gradient(90deg,
    rgba(110, 168, 255, 0.14) 0%,
    rgba(110, 168, 255, 0.03) 46%,
    transparent 100%);
}

/* 第三名：深蓝渐变高亮 + 外发光，区别于 4-10 名（周/猎人/月榜通用） */
.rank-row.rank-3 {
  background: linear-gradient(90deg, rgba(86, 146, 214, 0.30) 0%, rgba(86, 146, 214, 0.10) 46%, transparent 100%);
  box-shadow: 0 0 12px rgba(86, 146, 214, 0.30), inset 3px 0 0 rgba(110, 168, 255, 0.85);
}
.board[data-type="hunter"] .rank-row.rank-3,
.board[data-type="monthHunter"] .rank-row.rank-3 {
  background: linear-gradient(90deg, rgba(86, 146, 214, 0.30) 0%, rgba(86, 146, 214, 0.10) 46%, transparent 100%);
  box-shadow: 0 0 12px rgba(86, 146, 214, 0.30), inset 3px 0 0 rgba(110, 168, 255, 0.85);
}

.rank-no {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #000000;
  background: rgba(242, 201, 106, 0.08);
  border: 1px solid rgba(242, 201, 106, 0.24);
}

.rank-row.rank-2 .rank-no {
  color: #000000;
  background: rgba(110, 168, 255, 0.14);
  border-color: rgba(110, 168, 255, 0.55);
  }

.rank-row.rank-3 .rank-no {
  color: #000000;
  background: rgba(240, 164, 104, 0.14);
  border-color: rgba(240, 164, 104, 0.5);
  }

.rank-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(242, 201, 106, 0.45);
  background: #0c0a08;
  flex: none;
}

.board[data-type="hunter"] .rank-avatar,
.board[data-type="monthHunter"] .rank-avatar {
  background: #070b12;
}

.rank-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffe9c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

.rank-cards {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
  color: #ffe6a6;
}

.board[data-type="hunter"] .rank-cards,
.board[data-type="monthHunter"] .rank-cards {
  color: #f0eade;
}

.rank-cards .label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(205, 216, 235, 0.66);
}

.rank-cards b {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  }

.rank-cards .ico-card {
  width: 15px;
  height: 15px;
  align-self: center;
}

/* 空位 */
.rank-row.empty {
  border-bottom-color: rgba(242, 201, 106, 0.06);
}
.rank-row.empty > .rank-no.ghost { -webkit-box-flex: 0; -webkit-flex: 0 0 42px; flex: 0 0 42px; }
.rank-row.empty > .empty-text   { -webkit-box-flex: 1; -webkit-flex: 1 1 0;   flex: 1 1 0; min-width: 0; }

.rank-no.ghost {
  color: rgba(242, 201, 106, 0.22);
  background: transparent;
  border-style: dashed;
  border-color: rgba(242, 201, 106, 0.18);
}

.empty-text {
  position: relative;
  font-size: 13px;
  letter-spacing: 5px;
  color: rgba(205, 216, 235, 0.24);
}

.empty-text::after {
  content: "";
  position: absolute;
  left: 86px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 201, 106, 0.14), transparent);
}

/* 整榜为空 */
.board-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(205, 216, 235, 0.5);
}

.board-empty strong {
  font-family: "STKaiti", "KaiTi", "楷体", "Source Han Serif SC", "Noto Serif SC", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 6px;
  color: rgba(242, 201, 106, 0.72);
}

.board-empty span {
  font-size: 15px;
  letter-spacing: 3px;
}

/* ---------- 中央光柱 ---------- */
.board-divider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  color: #f2c96a;
}

.board-divider::before {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(242, 201, 106, 0.45) 10%,
    #fff3c9 42%,
    #fff8dd 50%,
    #fff3c9 58%,
    rgba(242, 201, 106, 0.45) 90%,
    transparent 100%
  );
  animation: beamPulse 5s ease-in-out infinite;
}

@keyframes beamPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

.board-divider i {
  display: none;
}

.board-divider b {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: rgba(242, 201, 106, 0.85);
  transform: rotate(45deg);
  }

/* ============ 底部 ============ */
.footer {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 12px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border-top: 1px solid rgba(242, 201, 106, 0.09);
  font-size: 13px;
  color: rgba(205, 216, 235, 0.72);
  letter-spacing: 1.5px;
}

.footer-cs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: rgba(240, 228, 202, 0.88);
  }

.live-tag {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.live-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2c96a;
  animation: livePulse 2.6s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

.update-text {
  text-align: right;
  white-space: nowrap;
}

/* ============ 覆盖层 ============ */
.blank-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 50;
}

.blank-layer.show {
  opacity: 1;
  pointer-events: auto;
}

.net-badge {
  position: absolute;
  top: 40px;
  right: 56px;
  padding: 6px 16px;
  border: 1px solid rgba(242, 201, 106, 0.3);
  border-radius: 20px;
  background: rgba(10, 9, 8, 0.9);
  color: #bcc6d8;
  font-size: 14px;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 40;
}

.net-badge.show {
  opacity: 1;
}

/* ============================================================
   原版还原（对照 2026-10-23 用户提供的原版大屏截图）
   深紫夜蓝底 · 青蓝标题 · 金色冠军装饰 · 白字选手名 · 蓝/琥珀名次章
   ============================================================ */

/* ---------- 舞台底色：实景夜场照片背景（超浅遮罩，整体提亮） ---------- */
#stage {
  background:
    linear-gradient(180deg, rgba(5, 10, 26, 0.2) 0%, rgba(5, 10, 26, 0.04) 38%, rgba(5, 10, 26, 0.26) 100%),
    url("./assets/bg-live.jpg") center center / cover no-repeat;
}

#stage::before {
  content: none;
}

#stage::after {
  background: radial-gradient(ellipse at 50% 46%, transparent 72%, rgba(3, 6, 16, 0.2) 100%);
}

/* ---------- 标题：暖金发光字（强发光） ---------- */
.header h1 {
  background: linear-gradient(180deg, #fffef8 0%, #fff0c8 46%, #ffc578 100%);
  -webkit-background-clip: text;
  background-clip: text;
  }

.eyebrow {
  color: rgba(255, 214, 150, 0.85);
  }

.subtitle {
  color: #c3cde4;
  }

.subtitle::before,
.subtitle::after {
  background: linear-gradient(90deg, transparent, rgba(240, 210, 150, 0.75));
  }

/* ---------- 榜面板：青蓝描边 ---------- */
/* ---------- 榜面板：真·玻璃，整体提亮 + 外发光 ---------- */
.board {
  --accent-rgb: 255, 198, 110;
  border-color: rgba(242, 201, 106, 0.55);
  background:
    radial-gradient(620px 300px at 12% 0%, rgba(255, 198, 110, 0.16), transparent 66%),
    linear-gradient(180deg, rgba(58, 40, 18, 0.3) 0%, rgba(26, 18, 9, 0.44) 100%);
  backdrop--webkit-backdrop-}

.board[data-type="hunter"],
.board[data-type="monthHunter"] {
  --accent-rgb: 255, 178, 92;
  border-color: rgba(242, 201, 106, 0.52);
  background:
    radial-gradient(620px 300px at 12% 0%, rgba(255, 178, 92, 0.16), transparent 66%),
    linear-gradient(180deg, rgba(58, 40, 18, 0.3) 0%, rgba(26, 18, 9, 0.44) 100%);
}

/* 名次行自加衬底，保证透明玻璃上的可读性（提亮版） */
.rank-row {
  background: rgba(34, 24, 10, 0.34);
  border-radius: 6px;
}

.board[data-type="hunter"] .rank-row,
.board[data-type="monthHunter"] .rank-row {
  background: rgba(34, 24, 10, 0.34);
}

/* 奖章光晕：全面增强 */
.medallion {
  }

.board[data-type="hunter"] .medallion,
.board[data-type="monthHunter"] .medallion {
  }

/* ---------- 榜头 ---------- */
.board-head b.star {
  background: rgba(255, 226, 168, 1);
  }

.board[data-type="hunter"] .board-head b.star,
.board[data-type="monthHunter"] .board-head b.star {
  background: rgba(255, 226, 168, 1);
  }

.board-head h2 {
  background: linear-gradient(180deg, #fffef8 0%, #fff0c8 52%, #ffc578 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.board[data-type="hunter"] .board-head h2,
.board[data-type="monthHunter"] .board-head h2 {
  background: linear-gradient(180deg, #fffef8 0%, #ffe6b8 52%, #ffb868 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  }

.board-head .tag {
  color: rgba(242, 201, 106, 1);
  border-color: rgba(242, 201, 106, 0.55);
  background: rgba(242, 201, 106, 0.14);
  }

/* ---------- 冠军区 ---------- */
.champ-name {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-size: 46px;
  }

.champ-cards {
  color: #ffffff;
}

.champ-cards .label {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: rgba(255, 222, 170, 0.96);
  }

.board[data-type="hunter"] .champ-cards .label,
.board[data-type="monthHunter"] .champ-cards .label {
  color: rgba(255, 222, 170, 0.96);
  }

.champ-cards b {
  color: #ffffff;
  font-size: 32px;
  }

.champ-cards .ico-trophy {
  width: 22px;
  height: 22px;
  align-self: center;
  color: #f2c96a;
  }

/* 冠军区：左侧留出羽翼空间，奖章右移（与原版一致）；gap 收窄让选手信息整体左移 */
.champion {
  padding: 4px 16px 8px 132px;
  }

/* 羽翼：适度收拢并向上扬起，羽尖不再压住选手信息 */
.wing-img {
  width: 200px;
  opacity: 1;
  top: 44%;
  }

.wing-img-left {
  left: -4px;
  transform: translateY(-50%) rotate(-12deg);
}

.wing-img-right {
  left: 168px;
  transform: translateY(-50%) scaleX(-1) rotate(-12deg);
}

@keyframes wingFlapLeft {
  0%, 100% { transform: translateY(-50%) rotate(-14deg); }
  50% { transform: translateY(-50%) rotate(-9deg); }
}

@keyframes wingFlapRight {
  0%, 100% { transform: translateY(-50%) scaleX(-1) rotate(-14deg); }
  50% { transform: translateY(-50%) scaleX(-1) rotate(-9deg); }
}

/* ---------- 名次行 ---------- */
.rank-name {
  color: #fffdf8;
  font-size: 22px;
  font-weight: 600;
  }

/* 第二名：金色渐变高亮 + 外发光，区别于 4-10 名（周/猎人/月榜通用） */
.rank-row.rank-2 {
  background: linear-gradient(90deg,
    rgba(242, 201, 106, 0.42) 0%,
    rgba(242, 201, 106, 0.14) 70%,
    rgba(242, 201, 106, 0.03) 100%);
  border-radius: 4px;
  border-bottom-color: transparent;
  box-shadow: 0 0 12px rgba(242, 201, 106, 0.35), inset 3px 0 0 rgba(242, 201, 106, 0.9);
}
.board[data-type="hunter"] .rank-row.rank-2,
.board[data-type="monthHunter"] .rank-row.rank-2 {
  background: linear-gradient(90deg,
    rgba(242, 201, 106, 0.42) 0%,
    rgba(242, 201, 106, 0.14) 70%,
    rgba(242, 201, 106, 0.03) 100%);
  box-shadow: 0 0 12px rgba(242, 201, 106, 0.35), inset 3px 0 0 rgba(242, 201, 106, 0.9);
}

.rank-row.rank-2::before,
.rank-row.rank-3::before {
  display: none;
}

/* 名次章：亮面圆形，偶数蓝白、奇数琥珀金（数字统一黑色，电视上更醒目） */
.rank-no {
  width: 36px;
  height: 36px;
  color: #000000;
  font-size: 19px;
  background: linear-gradient(180deg, #f6faff 0%, #c6d8ee 100%);
  border: none;
  }

.rank-row.rank-3 .rank-no,
.rank-row.rank-5 .rank-no,
.rank-row.rank-7 .rank-no,
.rank-row.rank-9 .rank-no {
  color: #000000;
  background: linear-gradient(180deg, #ffe9bd 0%, #e2a463 100%);
  }

.rank-row.rank-2 .rank-no,
.rank-row.rank-4 .rank-no,
.rank-row.rank-6 .rank-no,
.rank-row.rank-8 .rank-no,
.rank-row.rank-10 .rank-no {
  color: #000000;
  background: linear-gradient(180deg, #ffffff 0%, #bcd2e9 100%);
  }

/* 头像细金环：提亮 + 金色微光 */
.rank-avatar {
  border-color: rgba(240, 214, 158, 0.8);
  background: #101a38;
  }

/* 数值：白色主数字（发光）+ 淡标签 */
.rank-cards {
  color: #ffffff;
}

.rank-cards .label {
  color: rgba(224, 232, 248, 0.78);
}

.rank-cards b {
  color: #ffffff;
  }

.rank-cards .ico-card {
  color: #f2c96a;
  }

/* ---------- 底部：提亮 ---------- */
.footer {
  color: rgba(216, 226, 244, 0.82);
  border-top-color: rgba(242, 201, 106, 0.16);
}

.update-text {
  }

/* ---------- 背景快捷键提示（B / Shift+B / 0） ---------- */
.bg-toast {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%) translateY(-8px);
  padding: 10px 28px;
  font-size: 15px;
  letter-spacing: 2px;
  color: rgba(255, 240, 210, 0.96);
  background: rgba(18, 12, 4, 0.72);
  border: 1px solid rgba(242, 201, 106, 0.45);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.bg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 电视轻量模式（display.html?tv=1）
   电视 GPU 较弱：关闭毛玻璃、常驻动画与流光，并把面板固定为独立合成层，
   切换榜单时只做图层合成，避免整块重绘导致掉帧 */
html[data-tv="1"] .board,
html[data-tv="1"] .board[data-type="hunter"],
html[data-tv="1"] .board[data-type="monthHunter"] {
  backdrop--webkit-backdrop-/* 面板整块提升为合成层：渐变背景/描边/发光只栅格化一次，动画期间不再重绘 */
  transform: translateZ(0);
  background: linear-gradient(180deg, rgba(34, 23, 10, 0.76) 0%, rgba(13, 9, 4, 0.86) 100%);
}

/* 关闭扫光层：它带 blur(18px) 大面积模糊，是电视端最贵的一层重绘来源 */
html[data-tv="1"] .board::after {
  display: none;
}

html[data-tv="1"] .spark-field {
  display: none;
}

/* 电视端默认背景改用压缩版，首屏更快出图
   transform/transform-origin 完全交给 JS fitStage 动态处理 */
html[data-tv="1"] #stage {
  background:
    linear-gradient(180deg, rgba(5, 10, 26, 0.2) 0%, rgba(5, 10, 26, 0.04) 38%, rgba(5, 10, 26, 0.26) 100%),
    url("./assets/bg-live-tv.jpg") center center / cover no-repeat;
}

html[data-tv="1"] body {
  background:
    linear-gradient(180deg, rgba(5, 10, 26, 0.6) 0%, rgba(5, 10, 26, 0.72) 100%),
    url("./assets/bg-live-tv.jpg") center center / cover no-repeat;
}

/* 电视端：标题发光降为单层，切换榜单时减少 GPU 重绘 */
html[data-tv="1"] .header h1 {
  }

html[data-tv="1"] .board-head h2 {
  }

/* 电视端彻底移除常驻动画：直接置空 animation-name，浏览器连动画时间线都不创建
   （只留 0.001s 仍会为十几个动画建立 Animation 对象，占用主线程） */
html[data-tv="1"] *:not(.rank-row),
html[data-tv="1"] *:not(.rank-row)::before,
html[data-tv="1"] *:not(.rank-row)::after {
  animation-name: none !important;
  animation-iteration-count: 1 !important;

}


/* ---------- 周/月切换：名次行翻转滚入（冠军区不动） ---------- */

/* 电脑端专属 3D 翻滚：底边为轴 rotateX(-82°→0°) 翻滚入场。
   rowRollIn 的 3D perspective + rotateX 在老电视 WebView 上渲染失败，
   故通过 html[data-tv="1"] .rank-row 规则强制切换为 rowRollInTvFallback（见下方）。
   电脑端（无 data-tv 属性）正常使用 rowRollIn。 */
@keyframes rowRollIn {
  0%   { opacity: 0; transform: perspective(900px) translate3d(0, 54px, 0) rotateX(-82deg) scale(0.94); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg) scale(1); }
}

/* 电视端专用：纯 2D "翻滚"入场。
   视觉上靠 scaleY 从底边（transform-origin: 50% 100%）向上"翻起"，
   配合 translateY 模拟下坠后被翻起的感觉。
   全程只用 translate3d + scaleY + opacity，无 3D perspective，
   Android System WebView 42+ 全兼容。 */
@keyframes rowRollInTvFallback {
  0%   { opacity: 0; transform: translate3d(0, 44px, 0) scaleY(0.15) scaleX(0.92); }
  35%  { opacity: 1; transform: translate3d(0, 10px, 0) scaleY(0.55) scaleX(0.97); }
  70%  { opacity: 1; transform: translate3d(0, -6px, 0) scaleY(1.02) scaleX(1.0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1) scaleX(1); }
}

/* 旧版左右滑入（保留备用，改回只需把 JS 里的 rowRollIn 换回 rowInLeft/rowInRight） */
@keyframes rowInLeft {
  from { opacity: 0; transform: translate3d(-190px, 0, 0); }
  15%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rowInRight {
  from { opacity: 0; transform: translate3d(190px, 0, 0); }
  15%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* .rank-row 基础定义（电脑端 + 电视端共用）
   依次入场延迟由 JS 通过 setProperty('--row-in-delay') 写入；
   CSS 变量穿透内联 animationDelay 声明（JS 只能写普通声明，无法 !important）。
   fill-mode: both 确保动画前 opacity:0 让行不可见，动画结束自然显示。 */
.rank-row {
  /* 以行的底边为轴向上翻起，视觉上像"翻滚"进榜 */
  transform-origin: 50% 100%;
  --row-in-delay: 0ms;
  animation-name: rowRollIn;
  animation-duration: 700ms;
  animation-delay: var(--row-in-delay);
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

/* 电视端覆盖：
   1. animation-name 切换到纯 2D 的 rowRollInTvFallback（老 WebView 全兼容）
   2. will-change 去掉 transform 维度（部分老 WebView 有合成层 bug）
   3. backface-visibility 去掉（老 WebView 对 3D + backface-visibility 组合支持差） */
/* 电视端：完全关闭入场动画
   根因：老电视 WebView 对 CSS keyframes 动画支持极差——
   - 有的压根不触发 @keyframes
   - 有的不认 CSS 变量 --row-in-delay
   - fill-mode: both 让行永远停在 opacity:0 初始状态
   - JS 兜底也被 CSS !important 压过
   
   为了 100% 兼容所有电视 WebView，电视端直接不做入场动画，
   rank-row 从 DOM 生成起就是 opacity:1，无任何 transition/animation。
   电脑端继续保留 rowRollIn 3D 翻滚入场。 */
html[data-tv="1"] .rank-row {
  /* 关键修复 1：原来的 opacity:1 !important / transform !important 优先级高于 CSS 动画关键帧，
     导致动画在跑但画面毫无变化（用户看到的就是瞬间切换）。现在放开，交给关键帧驱动。
     关键修复 2：显式指定纯 2D 的 rowRollInTvFallback，避免继承电脑端 3D rowRollIn
     （3D perspective + rotateX 在老电视 WebView 上会导致渲染失败甚至进程崩溃）。 */
  animation-name: rowRollInTvFallback;
  will-change: auto;
}

/* 也覆盖月榜/猎人榜等所有 rank-row（上面通用规则已覆盖，但显式写一次更稳） */
html[data-tv="1"] .rank-row.champion,
html[data-tv="1"] .rank-row.hunter {
}

/* 兜底：JS 动画结束或超时后加 .anim-done，强制最终态，
   防止老 WebView 不触发 @keyframes 时行永久停在 opacity:0 */
html[data-tv="1"] .rank-row.anim-done {
  animation: none !important;
  -webkit-animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 电脑端：用 backface-visibility 让翻过背面后不再绘制 */
body:not([data-tv]):not(html) .rank-row,
.app:not([data-tv]):not(html) .rank-row,
:root:not([data-tv]) .rank-row {
  backface-visibility: hidden;
}


/* 电视端：翅膀只保留单层发光，多层大模糊滤镜在部分电视 GPU 上会导致整张图不渲染 */
html[data-tv="1"] .wing-img {
  }

html[data-tv="1"] .board[data-type="hunter"] .wing-img,
html[data-tv="1"] .board[data-type="monthHunter"] .wing-img {
  }

/* ============================================================
   旧电视 WebView 降级布局（JS 检测不支持 grid 时给 html 加 .legacy-css）
   grid → flex/block，gap → margin，保证 TCL 旧电视能渲染出基础布局
   ============================================================ */

/* 榜单区域：3 列 grid → 横向 flex，左右各 1 份，分隔条固定宽 */
.legacy-css .board-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.legacy-css .board {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}
.legacy-css .board-divider {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 52px;
  flex: 0 0 52px;
}

/* 榜首：2 列 grid → flex，奖章固定宽 + 信息自适应 */
.legacy-css .champion {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.legacy-css .champion .medallion {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 176px;
  flex: 0 0 176px;
  margin-right: 30px;
}
.legacy-css .champ-info {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}

/* 榜单列表：grid 9 行 → flex 列均分 */
.legacy-css .rank-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.legacy-css .rank-row {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-height: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.legacy-css .rank-row > * + * { margin-left: 14px; }
.legacy-css .rank-row .rank-no     { -webkit-box-flex: 0; -webkit-flex: 0 0 42px;  flex: 0 0 42px; }
.legacy-css .rank-row .rank-avatar { -webkit-box-flex: 0; -webkit-flex: 0 0 44px;  flex: 0 0 44px; }
.legacy-css .rank-row .rank-name   { -webkit-box-flex: 1; -webkit-flex: 1 1 0;     flex: 1 1 0; min-width: 0; }
.legacy-css .rank-row .rank-cards  { -webkit-box-flex: 0; -webkit-flex: 0 0 236px; flex: 0 0 236px; }
.legacy-css .rank-row.empty .empty-text { -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0; }

/* 榜头：原本的 flex gap → margin 兜底 */
.legacy-css .board-head > * + * { margin-left: 10px; }
.legacy-css .title-row > * + * { margin-left: 9px; }
.legacy-css .champ-meta > * + * { margin-left: 10px; }
.legacy-css .champ-cards > * + * { margin-left: 8px; }
.legacy-css .rank-cards > * + * { margin-left: 8px; }
.legacy-css .live-tag > * + * { margin-left: 7px; }
.legacy-css .footer > * + * { margin-left: 24px; }

/* 空态：grid 2 列 → flex 居中 */
.legacy-css .board-empty {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.legacy-css .board-empty > * + * { margin-top: 12px; }

/* 旧电视 GPU 弱，关掉高开销毛玻璃和多层阴影 */
.legacy-css .board {
  -webkit-backdrop-backdrop-}
.legacy-css .medallion { -webkit-}
.legacy-css .champ-name,
.legacy-css .rank-name,
.legacy-css .plaque { }

/* 已统一用 transform-origin: 0 0（top left）+ JS 像素值 translate，
   删掉旧的 50% 50% 覆盖，避免和 top-left 原点打架 */
/* .legacy-css #stage { transform-origin: 50% 50%; } —— 已废弃 */

/* ════════════════════════════════════════════════════════════════
 * 旧电视 flex fallback：把所有 CSS Grid 布局改成 flex 布局
 * 老 WebView (Chromium < 57) 不认识 display: grid
 * legacy-css 类已在 TV 模式自动加到 <html> 上
 * ════════════════════════════════════════════════════════════════ */

/* .board-area: grid 三列 → flex 三列等宽 + 中间固定 52px 分隔条 */
.legacy-css .board-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  }
.legacy-css .board-area > .board {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.legacy-css .board-area > .board-divider {
  width: 52px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}

/* .champion: grid 两列 → flex 两列 */
.legacy-css .champion {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.legacy-css .champion > .champ-avatar-wrap {
  width: 176px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.legacy-css .champion > .champ-info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

/* .rank-list: grid 9 行等高 → flex column */
.legacy-css .rank-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* .rank-row: grid 4 列 → flex 4 列（每个子元素固定宽度/自适应） */
.legacy-css .rank-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.legacy-css .rank-row > .rank-no {
  width: 42px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.legacy-css .rank-row > .rank-avatar {
  width: 44px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.legacy-css .rank-row > .rank-name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.legacy-css .rank-row > .rank-cards {
  width: 236px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}

/* .rank-row.empty: grid 2 列 → flex 2 列 */
.legacy-css .rank-row.empty {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.legacy-css .rank-row.empty > .rank-no.ghost {
  width: 42px;
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.legacy-css .rank-row.empty > .empty-text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

/* 隐藏 TV DEBUG 面板（?debug=1 时 JS 给 html 打 data-debug 属性后放行） */
html:not([data-debug="1"]) #tvDebug { display: none !important; }

/* ===== 冠军羽翼：右翼镜像左翼，左右完全对称且不压住右侧文字（2026-10-30） ===== */
.champion > .champ-info {
  margin-left: 105px;
  position: relative;
  z-index: 3;
}
.wing-img-left {
  left: -4px;
}
.wing-img-right {
  left: 244px;
}
/* ---------- 配对角标（未配对时左下角常驻） ---------- */
.tv-pair-badge {
  position: fixed;
  left: 28px;
  bottom: 24px;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-radius: 10px;
  background: rgba(10, 14, 28, 0.82);
  border: 1px solid rgba(242, 201, 106, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.tv-pair-badge .tpb-label {
  font-size: 18px;
  letter-spacing: 3px;
  color: rgba(240, 228, 200, 0.6);
}
.tv-pair-badge .tpb-code {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #ffe8c0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 210, 130, 0.5);
}
.tv-pair-badge .tpb-hint {
  font-size: 15px;
  letter-spacing: 1px;
  color: rgba(240, 228, 200, 0.42);
}