/* ============ 猜数字游戏 · 局直播大屏（跨主题共享，demo v15 定稿移植） ============ */
/* 视觉基准 .claude/tmp-live-demo.html（2026-09-19 用户验收）：拉斯维加斯赌场风，
   深底金色主调 + 克制动效（投屏长时间盯看无频繁闪烁）；红橙 ADR-39 辅助色。
   移动端断点仅 max-width:768px；微信 WebView 基线：传统 rgba 语法 + -webkit- 前缀。
   共享模板为独立完整页面（无主题 CSS 共存），沿用 demo 全局选择器（.gl-* 前缀已隔离） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    repeating-radial-gradient(circle at 50% 0%, rgba(212,175,55,0.028) 0 2px, transparent 2px 26px),
    radial-gradient(1100px 520px at 50% -8%, #23205a 0%, #141a3d 38%, #0e1330 68%, #070b18 100%);
  color: #f0ece0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 26px;
}
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; }

/* 居中自转：光环/放射光芒共用（0% 隐式取元素基础 transform） */
@keyframes gl-spin-centered { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}
/* 通用发光呼吸（耗电治理 2026-09-19）：元素挂静态峰值 shadow/filter，呼吸感由
   opacity（GPU 合成）表达——替代逐帧动画 box-shadow/filter 的每帧重绘 */
@keyframes gl-glow-breathe {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ---------- 四周大跑马灯（赌场招牌边框） ----------
   性能口径（2026-09-19 耗电治理）：追逐用 transform 位移（GPU 合成零重绘）而非
   background-position（每帧重绘全屏四边）；steps(4) 保留跳点追逐视觉；光晕做进
   渐变色阶而非常驻 drop-shadow（滤镜随动画每帧重算是移动端耗电大户） */
.gl-edges { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.gl-edge { position: absolute; }
.gl-edge.top, .gl-edge.bottom {
  left: 0; right: 0; height: 24px;
  background-image: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.35) 5px, transparent 6px);
  background-size: 36px 24px;
  background-repeat: repeat-x;
}
.gl-edge.top { top: 0; }
.gl-edge.bottom { bottom: 0; }
.gl-edge.left, .gl-edge.right {
  top: 0; bottom: 0; width: 24px;
  background-image: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.35) 5px, transparent 6px);
  background-size: 24px 36px;
  background-repeat: repeat-y;
}
.gl-edge.left { left: 0; }
.gl-edge.right { right: 0; }
.gl-edge.top::before, .gl-edge.bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 100%; /* 双份平铺，transform 位移一个周期后无缝衔接 */
  background-image: radial-gradient(circle at 50% 50%,
    #fffbe8 1.5px, #f7dc8a 5px, rgba(240,199,94,0.5) 7px, rgba(240,199,94,0.16) 10px, transparent 11px);
  background-size: 144px 24px;
  background-repeat: repeat-x;
  animation: gl-chase-x 0.72s steps(4) infinite;
  will-change: transform;
}
.gl-edge.left::before, .gl-edge.right::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 200%;
  background-image: radial-gradient(circle at 50% 50%,
    #fffbe8 1.5px, #f7dc8a 5px, rgba(240,199,94,0.5) 7px, rgba(240,199,94,0.16) 10px, transparent 11px);
  background-size: 24px 144px;
  background-repeat: repeat-y;
  animation: gl-chase-y 0.72s steps(4) infinite;
  will-change: transform;
}
.gl-edge.bottom::before { animation-direction: reverse; }
.gl-edge.right::before { animation-direction: reverse; }
@keyframes gl-chase-x { to { transform: translateX(-144px); } }
@keyframes gl-chase-y { to { transform: translateY(-144px); } }

/* 角灯：静态峰值阴影 + 整体 opacity 呼吸（box-shadow 动画=每帧重绘，降本口径同上） */
.gl-corner {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fffbe8, #f7dc8a 45%, #d4af37 78%, #9a7a20);
  box-shadow: 0 0 20px rgba(255,251,232,0.95), 0 0 44px rgba(240,199,94,0.65);
  animation: gl-glow-breathe 1.4s ease-in-out infinite;
}
.gl-corner.tl { top: 4px; left: 4px; }
.gl-corner.tr { top: 4px; right: 4px; }
.gl-corner.bl { bottom: 4px; left: 4px; animation-delay: .35s; }
.gl-corner.br { bottom: 4px; right: 4px; animation-delay: .35s; }
.gl-corner.tr, .gl-corner.br { animation-delay: .7s; }
.gl-edges.hot .gl-edge.top::before, .gl-edges.hot .gl-edge.bottom::before,
.gl-edges.hot .gl-edge.left::before, .gl-edges.hot .gl-edge.right::before {
  background-image: radial-gradient(circle at 50% 50%,
    #fff5f5 1.5px, #ff7a6b 5px, rgba(228,57,60,0.55) 7px, rgba(228,57,60,0.18) 10px, transparent 11px);
  animation-duration: .36s;
}
.gl-edges.hot .gl-corner {
  background: radial-gradient(circle at 42% 38%, #fff5f5, #ff7a6b 45%, #E4393C 78%, #8f1a1c);
  box-shadow: 0 0 22px rgba(255,122,107,0.95), 0 0 48px rgba(228,57,60,0.7);
}

/* ---------- 顶栏 ---------- */
.gl-topbar { display: flex; align-items: center; gap: 14px; padding: 2px 0 6px; flex-shrink: 0; }
.gl-back { color: #8a90a8; font-size: 14px; white-space: nowrap; transition: color .2s, text-shadow .2s; }
.gl-back:hover { color: #f0c75e; text-shadow: 0 0 10px rgba(240,199,94,0.6); }
.gl-title-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 46px 7px;
  background: linear-gradient(180deg, #1a1638 0%, #110f2c 55%, #0d0c22 100%);
  border: 1px solid rgba(240,199,94,0.5);
  border-radius: 64px / 36px;
  box-shadow:
    inset 0 0 26px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(251,231,162,0.28),
    0 0 24px rgba(212,175,55,0.16),
    0 6px 18px rgba(0,0,0,0.45);
}
.gl-title-wrap::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(240,199,94,0.26);
  border-radius: 60px / 32px;
  pointer-events: none;
}
.gl-title-wrap::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 15px;
  background-image:
    linear-gradient(rgba(251,231,162,0.75), rgba(212,175,55,0.12)),
    linear-gradient(rgba(251,231,162,0.75), rgba(212,175,55,0.12));
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 14% 0, 86% 0;
  pointer-events: none;
}
.gl-title {
  font-size: clamp(20px, 2.2vw, 29px);
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 霓虹呼吸：静态峰值双层 drop-shadow + opacity 呼吸（滤镜动画每帧重光栅化大字号，降本） */
  filter: drop-shadow(0 0 12px rgba(251,231,162,0.85)) drop-shadow(0 0 30px rgba(240,199,94,0.45));
  animation: gl-glow-breathe 3.2s ease-in-out infinite;
}
.gl-title-suit { font-size: .7em; margin: 0 12px; opacity: .85; text-shadow: 0 0 12px rgba(240,199,94,0.9); animation: gl-suit-blink 2.4s ease-in-out infinite; }
.gl-title-suit:last-child { animation-delay: 1.2s; }
@keyframes gl-suit-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.gl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #f0c75e;
  letter-spacing: 3px;
}
.gl-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #52c41a;
  box-shadow: 0 0 10px rgba(82,196,26,0.95);
  animation: gl-pulse 1.6s ease-in-out infinite;
}
.gl-fullscreen-btn {
  background: linear-gradient(180deg, rgba(240,199,94,0.22), rgba(212,175,55,0.10));
  border: 1px solid rgba(240,199,94,0.55);
  color: #f7dc8a;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(212,175,55,0.22), inset 0 0 8px rgba(240,199,94,0.12);
  transition: box-shadow .2s, transform .15s;
}
.gl-fullscreen-btn:hover { box-shadow: 0 0 20px rgba(240,199,94,0.5), inset 0 0 10px rgba(240,199,94,0.2); transform: translateY(-1px); }

/* ---------- 终局横幅（页内终态，不切独立页） ---------- */
.gl-final-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-shrink: 0;
  margin: 0 0 14px;
  padding: 10px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(212,175,55,0.10), rgba(240,199,94,0.22) 50%, rgba(212,175,55,0.10));
  border: 1px solid rgba(240,199,94,0.55);
  box-shadow: 0 0 22px rgba(240,199,94,0.22), inset 0 0 14px rgba(212,175,55,0.10);
}
.gl-final-banner.show { display: flex; animation: gl-banner-in .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes gl-banner-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gl-final-banner.void {
  background: linear-gradient(90deg, rgba(245,166,35,0.08), rgba(245,166,35,0.20) 50%, rgba(245,166,35,0.08));
  border-color: rgba(245,166,35,0.55);
  box-shadow: 0 0 22px rgba(245,166,35,0.20), inset 0 0 14px rgba(245,166,35,0.08);
}
.gl-final-banner-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(240,199,94,0.5));
}
.gl-final-banner.void .gl-final-banner-text {
  background: none;
  -webkit-text-fill-color: #F5A623;
  filter: drop-shadow(0 0 10px rgba(245,166,35,0.5));
}
.gl-final-banner-link {
  font-size: 13px;
  font-weight: 700;
  color: #f7dc8a;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(240,199,94,0.4);
}
.gl-final-banner-link:hover { text-shadow: 0 0 14px rgba(240,199,94,0.8); }
.gl-particle {
  position: fixed;
  top: -24px;
  z-index: 45;
  font-size: 14px;
  color: #f0c75e;
  text-shadow: 0 0 8px rgba(240,199,94,0.9);
  animation: gl-fall linear forwards;
  pointer-events: none;
}
@keyframes gl-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(110vh) rotate(320deg); opacity: .5; }
}

/* ---------- 主区域：左战况 / 右转化 ---------- */
.gl-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(400px, 7fr) 5fr;
  gap: 14px;
  margin: 0 0 6px;
  min-height: 0;
}
.gl-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

/* ---------- 左列：领先者全息战况卡 ---------- */
.gl-leader-wrap {
  position: relative;
  min-height: 0;
  border-radius: 18px;
  padding: 2px;
  overflow: hidden;
}
.gl-leader-wrap::before {
  content: "";
  position: absolute;
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  background: conic-gradient(
    transparent 0deg, #f7dc8a 18deg, transparent 42deg,
    transparent 120deg, #f0c75e 148deg, transparent 175deg,
    transparent 250deg, #fff7dd 278deg, transparent 305deg
  );
  animation: gl-gold-spin 5s linear infinite;
}
@keyframes gl-gold-spin { to { transform: rotate(360deg); } }
.gl-leader {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1c1637 0%, #131034 45%, #0d0c22 100%);
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}
.gl-leader-hero {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
}
.gl-leader-rays {
  position: absolute;
  left: 50%; top: 42%;
  width: 170%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(240,199,94,0.09) 0deg 5deg, transparent 5deg 14deg);
  border-radius: 50%;
  animation: gl-spin-centered 36s linear infinite;
  pointer-events: none;
}
.gl-leader-label {
  position: relative;
  font-size: 14px;
  letter-spacing: 5px;
  color: #f7dc8a;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 12px rgba(240,199,94,0.6);
}
.gl-leader-label::before, .gl-leader-label::after {
  content: "";
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37);
}
.gl-leader-label::after { background: linear-gradient(90deg, #d4af37, transparent); }
.gl-num-stage { position: relative; display: inline-block; }
.gl-num-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 172%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(251,231,162,0.16) 0deg 2.5deg, transparent 2.5deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 60%);
  mask: radial-gradient(circle, transparent 36%, #000 38%, #000 58%, transparent 60%);
  animation: gl-spin-centered 22s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(240,199,94,0.3));
}
.gl-leader-number {
  position: relative;
  font-size: clamp(64px, 12vw, 188px);
  font-weight: 900;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(240,199,94,0.5)) drop-shadow(0 4px 30px rgba(212,175,55,0.3));
  margin: 10px 0 2px;
}
.gl-leader-number.flash { animation: gl-num-burst .8s cubic-bezier(.2,1.4,.4,1); }
@keyframes gl-num-burst {
  0%   { filter: drop-shadow(0 0 44px rgba(255,247,221,1)) drop-shadow(0 0 80px rgba(240,199,94,0.8)); transform: scale(1.12); }
  60%  { transform: scale(.97); }
  100% { filter: drop-shadow(0 0 22px rgba(240,199,94,0.5)) drop-shadow(0 4px 30px rgba(212,175,55,0.3)); transform: scale(1); }
}
.gl-leader-holder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  padding: 16px 34px 12px;
}
.gl-leader-holder::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 340px; height: 92px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(240,199,94,0.22) 0%, rgba(212,175,55,0.07) 55%, transparent 80%);
  pointer-events: none;
}
.gl-leader-holder::after {
  content: "";
  position: absolute;
  top: -46px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 150px;
  background: linear-gradient(180deg, rgba(251,231,162,0.16) 0%, rgba(240,199,94,0.05) 70%, transparent 100%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  animation: gl-spot-sway 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gl-spot-sway {
  0%, 100% { transform: translateX(-50%) rotate(-1.2deg); }
  50%      { transform: translateX(-50%) rotate(1.2deg); }
}
.gl-holder-row { position: relative; display: flex; align-items: center; gap: 14px; }
.gl-crown {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(251,231,162,0.8)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: gl-crown-float 3s ease-in-out infinite;
  z-index: 2;
}
@keyframes gl-crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.gl-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(240,199,94,0.4), 0 0 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.gl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-avatar.big {
  position: relative; /* ::after 光晕层的定位上下文 */
  width: 62px; height: 62px;
  font-size: 24px;
  /* 光环呼吸走 ::after 覆盖层（opacity 合成），本体静态峰值描边——照片/首字符
     不参与呼吸（box-shadow 逐帧动画=每帧重绘 4 层阴影，耗电治理 2026-09-19） */
  box-shadow:
    0 0 0 3px rgba(251,231,162,0.95),
    0 0 0 6px rgba(240,199,94,0.3),
    0 6px 14px rgba(0,0,0,0.5);
}
.gl-avatar.big::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(240,199,94,0.65);
  animation: gl-glow-breathe 2.6s ease-in-out infinite;
  pointer-events: none;
}
.gl-leader-name { font-size: 21px; font-weight: 700; color: #f0ece0; text-shadow: 0 0 12px rgba(240,199,94,0.25); }
.gl-leader-phone { font-size: 14px; color: #8a90a8; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gl-lead-duration {
  position: relative;
  margin-top: 10px;
  font-size: 13px;
  color: #f7dc8a;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(240,199,94,0.4);
}
.gl-lead-duration b { color: #f7dc8a; }
.gl-leader-badge {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: #1a1405;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 20px;
  padding: 3px 16px;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  box-shadow: 0 0 24px rgba(251,231,162,0.7);
  animation: gl-glow-breathe 2.2s ease-in-out infinite;
}

/* 下段：游戏进行数据 */
.gl-leader-data {
  position: relative;
  flex-shrink: 0;
  padding: 14px 22px 14px;
  border-top: 1px solid rgba(240,199,94,0.35);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
  background: linear-gradient(180deg, rgba(240,199,94,0.05), rgba(0,0,0,0.24));
}
.gl-countdown { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.gl-countdown .gl-diamond {
  color: #f7dc8a;
  font-size: 11px;
  text-shadow: 0 0 8px rgba(240,199,94,0.8);
  animation: gl-pulse 2s ease-in-out infinite;
}
.gl-countdown .gl-diamond:last-child { animation-delay: 1s; }
.gl-countdown-label { font-size: 13px; color: #f0c75e; letter-spacing: 4px; white-space: nowrap; text-shadow: 0 0 8px rgba(212,175,55,0.4); }
.gl-countdown-progress { flex: 1; height: 14px; background: rgba(255,255,255,0.06); border-radius: 7px; overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,0.5); }
.gl-countdown-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  border-radius: 7px;
  box-shadow: 0 0 14px rgba(240,199,94,0.55);
  transition: width .8s cubic-bezier(.25,.8,.35,1);
  overflow: hidden;
}
.gl-countdown-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.65) 50%, transparent 75%);
  transform: translateX(-120%);
  animation: gl-shimmer 2s ease-in-out infinite;
}
@keyframes gl-shimmer { 55%, 100% { transform: translateX(120%); } }
.gl-countdown-num {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(240,199,94,0.4));
  white-space: nowrap;
}
/* 终态定格行（倒计时让位）：横幅承载结论，此行只作战况定格分隔 */
.gl-final-row {
  font-size: 13px;
  color: #f7dc8a;
  letter-spacing: 4px;
  text-align: center;
  padding: 4px 0 10px;
  text-shadow: 0 0 10px rgba(240,199,94,0.5);
}
/* time 型倒计时强化：进度条让位（满次进度无数据），大数字独占紧迫感 */
.gl-countdown.timed .gl-countdown-progress { display: none; }
.gl-countdown.timed .gl-countdown-num {
  font-size: clamp(28px, 3.4vw, 42px);
  filter: drop-shadow(0 0 16px rgba(240,199,94,0.55));
}
.gl-countdown.timed .gl-countdown-label { font-size: 14px; letter-spacing: 5px; }
/* 最后 10 分钟：红橙告警 + 秒级呼吸脉冲（克制 Vegas，红橙 ADR-39 辅助色） */
.gl-countdown.urgent .gl-countdown-num {
  background: linear-gradient(180deg, #ffd9a6 0%, #F5A623 55%, #d97e10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(245,166,35,0.75));
  animation: gl-urgent-tick 1s ease-in-out infinite;
}
.gl-countdown.urgent .gl-countdown-label { color: #F5A623; text-shadow: 0 0 12px rgba(245,166,35,0.7); }
.gl-countdown.urgent .gl-diamond { color: #F5A623 !important; text-shadow: 0 0 10px rgba(245,166,35,0.9) !important; }
@keyframes gl-urgent-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.gl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 12px; }
.gl-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,199,94,0.2);
  border-radius: 10px;
  padding: 8px 10px 7px;
  text-align: center;
  box-shadow: inset 0 0 14px rgba(212,175,55,0.05);
}
.gl-stat-label { font-size: 12px; color: #8a90a8; margin-bottom: 4px; letter-spacing: 2px; }
.gl-stat-num {
  display: inline-block;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f0ece0;
  text-shadow: 0 0 10px rgba(255,255,255,0.12);
}
.gl-stat-num.gold {
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(240,199,94,0.45));
}
.gl-stat-num.bounce { animation: gl-bounce .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes gl-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------- 空位地图（立体段牌，信息分层，ADR-41） ---------- */
.gl-terrain-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.gl-terrain-title { font-size: 13px; color: #f0ece0; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.gl-terrain-title .gl-diamond { color: #f0c75e; font-size: 9px; text-shadow: 0 0 8px rgba(240,199,94,0.8); }
.gl-terrain-legend { font-size: 11px; color: #8a90a8; }
.gl-terrain-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gl-seg {
  position: relative;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(240,199,94,0.28);
  border-top-color: rgba(251,231,162,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.09);
  animation: gl-seg-in .4s ease-out;
  text-align: center;
}
@keyframes gl-seg-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
.gl-seg-name { font-size: 11px; color: #8a90a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-seg-remain { font-size: 18px; font-weight: 800; color: #f7dc8a; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 10px rgba(240,199,94,0.45); }
.gl-seg-label { font-size: 10px; color: #8a90a8; white-space: nowrap; }
.gl-seg.hot {
  border-color: rgba(245,166,35,0.7);
  border-top-color: rgba(255,200,120,0.9);
  background: linear-gradient(180deg, rgba(245,166,35,0.14) 0%, rgba(245,166,35,0.04) 100%);
  /* 濒满呼吸：静态峰值阴影+transform 上浮（box-shadow 帧去掉，耗电治理同口径） */
  box-shadow: 0 8px 18px rgba(0,0,0,0.6), 0 0 24px rgba(245,166,35,0.5);
  animation: gl-seg-in .4s ease-out, gl-seg-hot-float 1.8s ease-in-out infinite;
  transform: translateY(-2px);
}
@keyframes gl-seg-hot-float {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(-4px); }
}
.gl-seg.hot .gl-seg-remain { color: #F5A623; text-shadow: 0 0 12px rgba(245,166,35,0.65); }
.gl-terrain-wild { margin-top: 9px; font-size: 12px; color: #8a90a8; display: flex; align-items: center; gap: 6px; }
.gl-terrain-wild b { color: #f7dc8a; }
.gl-terrain-wild::before { content: "◆"; font-size: 8px; color: rgba(240,199,94,0.6); }

/* ---------- 右列·奖品舞台（居中式） ---------- */
.gl-stage {
  position: relative;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 34%, rgba(212,175,55,0.14) 0%, transparent 70%),
    linear-gradient(170deg, #1b1638 0%, #120f2e 55%, #0d0c22 100%);
  border: 1px solid rgba(240,199,94,0.45);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35), 0 0 24px rgba(212,175,55,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 18px 12px;
}
.gl-stage-rays {
  position: absolute;
  left: 50%; top: 30%;
  width: 140%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(240,199,94,0.08) 0deg 4deg, transparent 4deg 12deg);
  border-radius: 50%;
  animation: gl-spin-centered 44s linear infinite;
  pointer-events: none;
}
.gl-stage-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #1a1405;
  padding: 4px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  box-shadow: 0 0 24px rgba(251,231,162,0.7);
  animation: gl-glow-breathe 1.8s ease-in-out infinite;
  margin-bottom: 5px;
}
.gl-stage-img {
  position: relative;
  width: 270px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-stage-img::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 240px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(240,199,94,0.4) 0%, rgba(212,175,55,0.12) 60%, transparent 85%);
  filter: blur(1px);
  pointer-events: none;
}
.gl-stage-img img {
  max-width: 92%;
  max-height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,0.72)) drop-shadow(0 0 30px rgba(240,199,94,0.38));
  animation: gl-float-hover 3.4s ease-in-out infinite;
}
@keyframes gl-float-hover {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.015); }
}
.gl-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,251,232,0.12) 46%, rgba(255,255,255,0.28) 50%, rgba(255,251,232,0.12) 54%, transparent 68%);
  transform: translateX(-130%) skewX(-6deg);
  animation: gl-showcase-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gl-showcase-shine { 45%, 100% { transform: translateX(130%) skewX(-6deg); } }
.gl-stage-caption { position: relative; text-align: center; margin-top: 4px; }
.gl-stage-name {
  font-size: 21px;
  font-weight: 800;
  background: linear-gradient(180deg, #fbe7a2 0%, #f0c75e 40%, #d4af37 75%, #b8912b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(240,199,94,0.4));
}
.gl-stage-hook { font-size: 13px; color: #f0ece0; margin-top: 4px; }
.gl-stage-hook b { color: #f7dc8a; }
.gl-stage-cost {
  display: inline-block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  padding: 4px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff9a3d, #F5A623 55%, #d97e10);
  box-shadow: 0 0 22px rgba(245,166,35,0.75);
  animation: gl-glow-breathe 2s ease-in-out infinite;
}
/* 二维码：右下角浮贴（扫码参战转化入口；canvas 640px 渲染 max-width 缩放保清晰） */
.gl-stage-qr {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.gl-qr-box {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  padding: 6px;
  background: #fffdf6;
  border: 2px solid rgba(240,199,94,0.65);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 16px rgba(240,199,94,0.3);
  /* 二维码不做呼吸动画：可扫性优先（明暗闪动干扰对焦），静态阴影即可 */
}
.gl-qr-box canvas, .gl-qr-box img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 3px;
}
.gl-qr-caption {
  font-size: 12px;
  font-weight: 700;
  color: #f7dc8a;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,0,0,0.8), 0 0 10px rgba(240,199,94,0.5);
}
.gl-qr-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}

/* ---------- 右列·动态流（紧凑单行 + 底部渐隐遮罩） ---------- */
.gl-feed-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.gl-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 9px;
  border-bottom: 1px solid rgba(240,199,94,0.15);
  flex-shrink: 0;
}
.gl-feed-title { font-size: 14px; color: #f0ece0; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.gl-feed-title .gl-diamond { color: #f0c75e; font-size: 10px; text-shadow: 0 0 8px rgba(240,199,94,0.8); }
.gl-feed-live {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ff5050, #E4393C);
  border-radius: 5px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 14px rgba(228,57,60,0.55);
}
.gl-feed-live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: gl-pulse 1.1s ease-in-out infinite;
}
.gl-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}
.gl-feed::-webkit-scrollbar { width: 5px; }
.gl-feed::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 3px; }
.gl-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.055);
  animation: gl-slide-in .4s cubic-bezier(.34,1.56,.64,1);
}
.gl-feed-item:hover { background: rgba(255,255,255,0.06); }
.gl-feed-item.fresh { border-color: rgba(240,199,94,0.55); animation: gl-slide-in .4s cubic-bezier(.34,1.56,.64,1), gl-fresh-fade 2.4s ease-out; }
@keyframes gl-fresh-fade {
  0% { background: rgba(240,199,94,0.16); box-shadow: 0 0 14px rgba(240,199,94,0.22); }
  100% { background: rgba(255,255,255,0.035); box-shadow: none; }
}
@keyframes gl-slide-in {
  from { opacity: 0; transform: translateY(-14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gl-feed-item .gl-avatar { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 2px rgba(240,199,94,0.18); }
.gl-feed-name { font-size: 13px; font-weight: 600; color: #f0ece0; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.gl-feed-number {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #8a90a8;
}
.gl-feed-number.plain { color: #f7dc8a; text-shadow: 0 0 12px rgba(240,199,94,0.55); }
.gl-feed-occ {
  font-size: 11px;
  color: #8a90a8;
  white-space: nowrap;
  border-radius: 10px;
  padding: 1px 9px;
  border: 1px solid rgba(255,255,255,0.09);
  margin-left: auto;
}
.gl-feed-occ.crash {
  color: #fff;
  border-color: rgba(228,57,60,0.5);
  background: rgba(228,57,60,0.28);
  box-shadow: 0 0 10px rgba(228,57,60,0.35);
  animation: gl-crash-in .5s ease-out;
}
@keyframes gl-crash-in {
  0% { background: rgba(228,57,60,0.85); }
  100% { background: rgba(228,57,60,0.28); }
}
.gl-feed-time { font-size: 10px; color: rgba(138,144,168,0.55); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------- 全屏闪光层（换领先者时爆发） ---------- */
.gl-flash-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(720px 420px at 50% 45%, rgba(251,231,162,0.5), rgba(240,199,94,0.18) 55%, transparent 75%);
}
.gl-flash-layer.boom { animation: gl-boom .65s ease-out; }
@keyframes gl-boom {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 离线重连浮层 ---------- */
.gl-offline {
  position: fixed;
  left: 50%; top: 24px;
  transform: translateX(-50%) translateY(-140%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(26, 14, 14, 0.92);
  border: 1px solid rgba(228,57,60,0.6);
  box-shadow: 0 0 24px rgba(228,57,60,0.35);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.gl-offline.show { transform: translateX(-50%) translateY(0); }
.gl-offline-text { font-size: 13px; color: #f0ece0; }
.gl-offline-btn {
  background: linear-gradient(180deg, #ff5050, #E4393C);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 5px 14px;
  box-shadow: 0 0 12px rgba(228,57,60,0.5);
}

/* ---------- 省电模式（耗电治理 2026-09-19） ----------
   页内「✦ 动效」开关切 html.gl-lite（localStorage 记忆，默认全效）；系统级
   减动效偏好自动生效。装饰动画全停，数据渲染/倒计时/SSE 照常（均为 JS textContent） */
html.gl-lite *, html.gl-lite *::before, html.gl-lite *::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
.gl-fx-btn {
  background: linear-gradient(180deg, rgba(240,199,94,0.22), rgba(212,175,55,0.10));
  border: 1px solid rgba(240,199,94,0.55);
  color: #f7dc8a;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(212,175,55,0.22), inset 0 0 8px rgba(240,199,94,0.12);
}
html.gl-lite .gl-fx-btn { opacity: .6; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  body { overflow: auto; height: auto; min-height: 100vh; padding: 20px 16px; }
  .gl-topbar { flex-wrap: wrap; padding: 6px 0 4px; gap: 8px; }
  .gl-title-wrap { order: -1; width: 100%; flex: none; padding: 7px 18px 6px; border-radius: 44px / 26px; }
  .gl-title-wrap::before { border-radius: 40px / 22px; }
  .gl-back { order: 1; }
  .gl-fx-btn { padding: 6px 10px; }
  .gl-fullscreen-btn { order: 2; margin-left: auto; padding: 6px 10px; }
  .gl-countdown { gap: 8px; flex-wrap: wrap; }
  .gl-countdown-label { font-size: 11px; letter-spacing: 2px; }
  .gl-countdown-num { font-size: 15px; }
  .gl-stat-num { font-size: 20px; }
  .gl-leader-data { padding: 10px 12px 12px; }
  .gl-terrain-row { grid-template-columns: repeat(2, 1fr); }
  .gl-main { grid-template-columns: 1fr; margin: 0 0 6px; gap: 10px; }
  .gl-leader-wrap { min-height: 560px; }
  .gl-right { gap: 10px; }
  .gl-stage-img { width: 200px; height: 165px; }
  .gl-stage-name { font-size: 19px; }
  .gl-stage-qr { right: 10px; bottom: 10px; }
  .gl-qr-box { width: 88px; height: 88px; padding: 5px; }
  .gl-qr-caption { font-size: 10px; letter-spacing: 1px; }
  .gl-final-banner { flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
  .gl-final-banner-text { font-size: 14px; }
  .gl-feed-panel { min-height: 300px; }
}