/* ============================================================
   game.css 猜数字游戏页共享样式（三主题单份，随 /game-static 部署）。
   2026-09-18 Task 7 初版；2026-09-19 按《你就是唯一》原型全面重做：
   红 #E4393C（强调/徽章/打码数字）+ 橙 #F5A623（参与/提交操作）活动风，
   居中窄容器消息流叙事（PC ~720px），底部通栏参与栏。
   活动页跳出主题品牌色（用户拍板参照原型）：强调/操作色用 game 专属令牌，
   不消费 --color-primary；灰阶文字/边框仍消费主题令牌带 fallback，
   zjg 无令牌走 fallback（原 scoped 蓝覆写随本批删除）。
   本文件覆盖页面壳区块与 game.js 引擎默认渲染类（renderFeed /
   renderMyNumbers / renderMinUnique 产物类名，主题覆写钩子时自行配样式）。
   兼容基线：微信 WebView（传统 rgba / @media max-width，不用 :has()）。
   版本缓存：game.html 引用带 ?v= 手动版本号（与 game.js 同步升版）。
   ============================================================ */

/* ---- game 专属令牌（局部定义，不碰主题文件） ---- */
:root {
  --game-accent: #E4393C;        /* 主红：领先徽章/数字高亮/打码数字 */
  --game-accent-soft: #fdecec;   /* 红的浅底 */
  --game-action: #F5A623;        /* 操作橙：参与栏/提交按钮 */
  --game-action-deep: #e08e0d;   /* 橙按压态 */
  --game-ok: #52c41a;
  --game-ok-soft: #f0f9eb;
  --game-danger: #f5222d;
  --game-danger-soft: #fef0f0;
  --game-warn: #fa8c16;
  --game-warn-soft: #fdf6ec;
}

/* ---- 页面骨架：居中窄容器（原型消息流叙事，PC 不铺满 1200） ---- */
.game-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 0 72px; /* 底部让出参与栏 */
  color: var(--text-1, #1d2129);
}
.game-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.game-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-1, #1d2129);
}
.game-slogan {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-3, #86909c);
}

/* ---- 批 2 页首互动件：收藏按钮 / 浏览量 / 页内签到（ADR-39 红橙） ---- */
.game-head-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.game-favorite-btn {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--game-accent-soft);
  color: var(--game-accent);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}
.game-favorite-btn.active {
  background: var(--game-accent);
  color: #fff;
}
.game-favorite-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.game-views {
  margin-left: 10px;
  color: var(--text-3, #86909c);
}
.game-views .fas {
  margin-right: 2px;
}
.game-checkin-btn {
  margin-left: 12px;
  padding: 2px 12px;
  border: none;
  border-radius: 14px;
  background: var(--game-action);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
}
.game-checkin-btn:hover:not(:disabled) {
  background: var(--game-action-deep);
}
.game-checkin-btn:disabled {
  background: var(--game-ok-soft);
  color: var(--game-ok);
  cursor: default;
}
.game-state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.game-state.is-open { background: var(--game-ok-soft); color: var(--game-ok); }
.game-state.is-notstarted { background: var(--game-warn-soft); color: var(--game-warn); }
.game-state.is-settled { background: var(--game-accent-soft); color: var(--game-accent); }
.game-state.is-cancelled { background: var(--game-danger-soft); color: var(--game-danger); }

/* ---- 通用卡片 ---- */
.game-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.game-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-1, #1d2129);
}

/* ---- 待领横幅 / 终局过渡提示（game.js 显式时才显示） ---- */
.game-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--game-accent-soft);
  border: 1px solid var(--game-accent);
  color: var(--text-1, #1d2129);
  font-size: 14px;
}
.game-banner a { color: var(--game-accent); font-weight: 600; }
.game-final-notice {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--game-warn-soft);
  border: 1px solid var(--game-warn);
  color: var(--text-1, #1d2129);
  font-size: 14px;
}

/* ---- 奖品 banner（原型：通栏大图 + 「活动奖品：xxx」红条） ---- */
.game-prize-banner {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e6eb);
  background: var(--bg-primary, #fff);
}
.game-prize-link { display: block; text-decoration: none; color: inherit; }
.game-prize-link:active { opacity: 0.85; }
.game-prize-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  background-color: var(--bg-secondary, #f7f8fa);
}
.game-prize-bar {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-2, #4e5969);
  background: var(--bg-primary, #fff);
}
.game-prize-bar b {
  font-size: 15px;
  color: var(--game-accent);
  font-weight: 700;
}
.game-prize-bar .game-prize-more {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3, #86909c);
  text-decoration: none;
  flex-shrink: 0;
}

/* 作废/终态视图奖品名（banner 条只在进行中视图出现） */
.game-prize-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #1d2129);
}

/* ---- 领先者卡（原型核心：头像+昵称+手机掩码 | 红徽章 | 唯一且最小） ---- */
.game-min-card { padding: 14px 16px; }
.game-min-label {
  font-size: 12px;
  color: var(--text-3, #86909c);
  margin: 0 0 8px;
}
#gameMinUnique { min-height: 64px; }
.game-min-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.game-min-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.game-min-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary, #f7f8fa);
}
.game-min-avatar-empty {
  display: inline-block;
}
.game-min-who { min-width: 0; }
.game-min-nick {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #1d2129);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-min-phone {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3, #86909c);
}
.game-min-badge {
  flex-shrink: 0;
  min-width: 76px;
  padding: 8px 14px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 16px;
  background: var(--game-accent);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--font-mono, menlo, monaco, monospace);
}
.game-min-right {
  flex-shrink: 0;
  text-align: left;
}
.game-min-tagline {
  font-size: 14px;
  font-weight: 700;
  color: var(--game-accent);
  white-space: nowrap;
}
.game-min-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3, #86909c);
  white-space: nowrap;
}
.game-min-endcount {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color-light, #f0f1f3);
  font-size: 13px;
  color: var(--text-2, #4e5969);
  text-align: center;
}
.game-min-endcount b { font-variant-numeric: tabular-nums; }
/* .game-min-empty 样式由批 D .game-empty 统一组件提供（同元素双类） */

/* ---- 常规信息条（合计 / 人数 / 进度：弱化为一行三格） ---- */
.game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.game-stat {
  flex: 1 1 0;
  min-width: 88px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color-light, #f0f1f3);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
}
.game-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1, #1d2129);
  font-variant-numeric: tabular-nums;
}
.game-stat-label {
  font-size: 12px;
  color: var(--text-3, #86909c);
}

/* ---- 竞猜动态流（#gameGuessFeed，引擎渲染；页面自然滚动，不限高） ---- */
/* .game-feed-empty 样式由批 D .game-empty 统一组件提供（同元素双类） */
.game-feed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-color-light, #f0f1f3);
  font-size: 13px;
  line-height: 20px;
}
.game-feed-item:last-child { border-bottom: none; }
.game-feed-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.game-feed-nick {
  color: var(--text-2, #4e5969);
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.game-feed-self .game-feed-nick { color: var(--game-accent); font-weight: 600; }
.game-feed-act {
  color: var(--text-3, #86909c);
  font-size: 12px;
  flex-shrink: 0;
}
.game-feed-num {
  color: var(--game-accent);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-mono, menlo, monaco, monospace);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.game-feed-collide .game-feed-occ { color: var(--game-warn); }
.game-feed-occ {
  color: var(--text-3, #86909c);
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.game-feed-time {
  margin-left: auto;
  color: var(--text-3, #86909c);
  font-size: 12px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- 我的数字（#gameMyNumbers，引擎渲染） ---- */
/* .game-my-empty 样式由批 D .game-empty 统一组件提供（同元素双类） */
.game-my-login {
  padding: 14px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3, #86909c);
}
.game-my-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border-color-light, #f0f1f3);
  font-size: 14px;
}
.game-my-item:last-child { border-bottom: none; }
.game-my-num {
  font-weight: 700;
  font-family: var(--font-mono, menlo, monaco, monospace);
  min-width: 56px;
  color: var(--game-accent);
}
.game-my-occ { color: var(--text-3, #86909c); font-size: 13px; }
.game-my-tag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: var(--game-accent-soft);
  color: var(--game-accent);
}
.game-my-dead .game-my-num {
  color: var(--text-3, #86909c);
  text-decoration: line-through;
}
.game-my-dead .game-my-occ { color: var(--game-danger); }

/* ---- 竞猜面板（#gamePanel，data-phase 供主题分支） ---- */
.game-countdown {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--game-warn);
}
.game-num-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text-1, #1d2129);
  background: var(--bg-primary, #fff);
  -webkit-tap-highlight-color: transparent;
}
.game-num-input:focus {
  outline: none;
  border-color: var(--game-action);
  box-shadow: inset 0 0 0 1px var(--game-action);
}
.game-num-input:disabled { background: var(--bg-secondary, #f7f8fa); color: var(--text-3, #86909c); }
.game-input-hint {
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--text-3, #86909c);
}
.game-cost-preview {
  min-height: 20px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--text-2, #4e5969);
}
.game-submit-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 24px;
  background: var(--game-action);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.game-submit-btn:active { opacity: 0.88; background: var(--game-action-deep); }
.game-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- 底部参与栏（引擎生成 #gameJoinBar，原型「+ 我要参与」通栏） ---- */
.game-join-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900; /* 低于 AI 客服浮球与弹层 */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--game-action);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
}
.game-join-bar:active { background: var(--game-action-deep); }
/* 未开始形态：静态引导文案弱化主行动色 */
.game-join-bar--pending { background: #909399; font-weight: 500; }
.game-join-bar--pending:active { background: #7d8189; }
/* 页底让出参与栏高度（引擎 toggle body 类） */
body.game-has-joinbar .game-page { padding-bottom: 84px; }

/* ---- 常规信息卡 ---- */
.game-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color-light, #f0f1f3);
}
.game-info-row:last-of-type { border-bottom: none; }
.game-info-label { color: var(--text-3, #86909c); flex-shrink: 0; }
.game-info-actions { margin-top: 10px; text-align: center; }
.game-rules-btn {
  padding: 8px 20px;
  border: 1px solid var(--game-action);
  border-radius: 18px;
  background: var(--bg-primary, #fff);
  color: var(--game-action-deep);
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.game-rules-btn:active { background: #fdf3e3; }
/* 直播大屏入口（anchor 形态补齐 button 展示属性；进行中与终态回看共用） */
a.game-live-entry {
  display: inline-block;
  text-decoration: none;
  margin-right: 8px;
  line-height: 1.5;
}

/* ---- 结果视图（已开奖，PRD 3.2） ---- */
.game-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.game-result-time { font-size: 13px; color: var(--text-3, #86909c); }
.game-result-number {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 16px;
  background: var(--game-accent);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  font-family: var(--font-mono, menlo, monaco, monospace);
}
.game-result-explain {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--text-2, #4e5969);
}
.game-result-void {
  margin: 0;
  font-size: 15px;
  color: var(--text-2, #4e5969);
}

/* 被猜数字分布：中奖 / 唯一 / 撞车 分色 */
.game-dist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.game-dist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 4px;
  background: var(--bg-secondary, #f7f8fa);
}
.game-dist-num {
  font-weight: 700;
  font-family: var(--font-mono, menlo, monaco, monospace);
  min-width: 64px;
}
.game-dist-holders { color: var(--text-3, #86909c); font-size: 13px; }
.game-dist-tag {
  margin-left: auto;
  padding: 1px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.game-dist-item.is-win { background: var(--game-accent-soft); }
.game-dist-item.is-win .game-dist-num { color: var(--game-accent); }
.game-dist-item.is-win .game-dist-tag { background: var(--game-accent); color: #fff; }
.game-dist-item.is-unique .game-dist-num { color: var(--game-ok); }
.game-dist-item.is-unique .game-dist-tag { background: var(--game-ok-soft); color: var(--game-ok); }
.game-dist-item.is-collide .game-dist-num {
  color: var(--text-3, #86909c);
  text-decoration: line-through;
}
.game-dist-item.is-collide .game-dist-tag { background: var(--game-danger-soft); color: var(--game-danger); }

/* 我的参与 / 中奖进度 */
.game-my-refund {
  font-size: 14px;
  color: var(--game-ok);
  font-weight: 600;
}
.game-my-none { font-size: 13px; color: var(--text-3, #86909c); }
.game-win-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.game-win-pending a {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--game-action);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
}
.game-win-pending a:active { opacity: 0.88; }

/* ---- 领奖表单（PRD 3.3：横幅点击展开，game.js 渲染；Task 8.5） ---- */
.game-claim-panel { margin-bottom: 12px; }
.game-claim-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1, #1d2129);
}
.game-claim-label {
  font-size: 13px;
  color: var(--text-2, #4e5969);
  margin: 12px 0 6px;
}
.game-claim-skus {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-claim-sku {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  cursor: pointer;
}
.game-claim-sku:active { opacity: 0.85; }
.game-claim-sku input { flex-shrink: 0; margin: 0; }
.game-claim-sku input:checked ~ .game-claim-sku-info .game-claim-sku-name {
  color: var(--game-accent);
  font-weight: 600;
}
.game-claim-sku-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--bg-secondary, #f7f8fa);
  flex-shrink: 0;
}
.game-claim-sku-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.game-claim-sku-name {
  font-size: 14px;
  color: var(--text-1, #1d2129);
}
.game-claim-sku-spec {
  font-size: 12px;
  color: var(--text-3, #86909c);
}
.game-claim-nosku {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-secondary, #f7f8fa);
  font-size: 13px;
  color: var(--text-2, #4e5969);
}
.game-claim-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-1, #1d2129);
  background: var(--bg-primary, #fff);
}
.game-claim-input:focus {
  outline: none;
  border-color: var(--game-action);
  box-shadow: inset 0 0 0 2px #fdf3e3;
}
.game-claim-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 24px;
  background: var(--game-action);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.game-claim-btn:active { opacity: 0.88; }
.game-claim-btn[disabled] { opacity: 0.6; }
.game-claim-tip {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-3, #86909c);
}
.game-claim-loading {
  padding: 16px;
  font-size: 14px;
  color: var(--text-3, #86909c);
  text-align: center;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 12px;
}
.game-claim-done {
  padding: 18px 14px;
  border-radius: 12px;
  background: var(--game-ok-soft);
  border: 1px solid var(--game-ok);
  color: var(--game-ok);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* ---- 作废视图 ---- */
.game-cancel-explain {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--text-2, #4e5969);
}
.game-cancel-reason {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-3, #86909c);
}
.game-cancel-refund {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--game-ok);
  font-weight: 600;
}

/* ---- zjg 适配：容器自带 padding（zjg 壳把 container 与 game-page 合并同一元素）；
     主题蓝 scoped 覆写已随活动令牌批删除（红橙为原型既定视觉） ---- */
.game-page--zjg {
  max-width: 720px;
  padding: 18px 15px 72px;
}

/* ---- 批 3 发现面：标签行 / 相关游戏 / 上下期导航（自带样式不依赖主题类） ---- */
.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}
.game-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e5e6eb);
  background: var(--bg-secondary, #f7f8fa);
  color: var(--text-2, #4e5969);
  font-size: 12px;
  transition: border-color 0.2s, color 0.2s;
}
.game-tag:active { opacity: 0.75; }
.game-tag i { font-size: 10px; color: var(--game-accent); }

.game-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.game-related-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-color, #e5e6eb);
  border-radius: 10px;
  background: var(--bg-secondary, #f7f8fa);
  text-decoration: none;
}
.game-related-card:active { opacity: 0.75; }
.game-related-cover {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-primary, #fff);
}
.game-related-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 容器定死 16:10，封面以裁切为主流形态（fitImage 由主题全局处理时自然接管） */
}
.game-related-title {
  color: var(--text-1, #1d2129);
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.game-sibling-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.game-sibling-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e5e6eb);
  background: var(--bg-secondary, #f7f8fa);
  text-decoration: none;
  min-width: 0;
}
.game-sibling-link:active { opacity: 0.75; }
.game-sibling-link.next { text-align: right; }
.game-sibling-placeholder { flex: 1; }
.game-sibling-label {
  font-size: 11px;
  color: var(--text-3, #86909c);
}
.game-sibling-title {
  font-size: 13px;
  color: var(--text-1, #1d2129);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   批 D 状态体系与动效（2026-09-21 UI 全面优化批）：
   骨架屏（SSR 预置、引擎首帧原子替换）/ 空态统一组件 / SSE 断流横幅 /
   满次进度条 / toast 与规则浮层类化 / 增量动态流进场动画 /
   prefers-reduced-motion 统一降级（本文件自带，不依赖主题 media-queries——zjg 无）
   ============================================================ */

/* ---- 骨架屏：引擎接管区（领先者卡/动态流）专用，SSR 直出区不用 ---- */
.game-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-secondary, #f7f8fa);
}
.game-skeleton::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: gameSkeleton 1.4s linear infinite;
}
.game-skeleton--line {
  height: 44px;   /* 与 .game-feed-item 实际行高接近，替换无跳版 */
  margin: 10px 0;
  border-radius: 8px;
}
.game-skeleton--card {
  height: 64px;   /* 领先者卡无唯一数字时的空态块高度 */
  border-radius: 10px;
}
@keyframes gameSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- 空态统一组件：纯 CSS 骰子图形（不依赖 FA——zjg 无 font-awesome）---- */
.game-empty {
  padding: 26px 0 22px;
  text-align: center;
  color: var(--text-3, #86909c);
  font-size: 13px;
}
.game-empty::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  box-sizing: border-box;
  border: 2px solid var(--border-color, #e5e6eb);
  border-radius: 10px;
  background:
    radial-gradient(circle at 13px 13px, var(--border-color, #e5e6eb) 3px, transparent 3.5px),
    radial-gradient(circle at 27px 27px, var(--border-color, #e5e6eb) 3px, transparent 3.5px);
}

/* ---- SSE 断流横幅（#gameOffline，引擎 .show 控制；CLOSED 永久断才出现）---- */
.game-offline {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--game-warn);
  border-radius: 999px;
  background: var(--game-warn-soft);
  color: var(--game-warn);
  font-size: 13px;
  transform: translate(-50%, -160%); /* 藏在屏外，.show 滑入 */
  transition: transform .25s ease-out;
}
.game-offline.show {
  transform: translate(-50%, 0);
}
.game-offline-btn {
  padding: 3px 12px;
  border: none;
  border-radius: 999px;
  background: var(--game-action);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.game-offline-btn:active {
  background: var(--game-action-deep);
}

/* ---- 满次进度条（count 型；SSR 初值后端预计算，引擎随帧更新宽度）---- */
.game-progress {
  height: 6px;
  margin: 10px 0 4px;
  border-radius: 999px;
  background: var(--bg-secondary, #f7f8fa);
  overflow: hidden;
}
.game-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--game-action);
  transition: width .3s ease-out;
}

/* ---- toast（game.js 类化产物；滑入动画，移除仍由 JS 定时收口）---- */
.game-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 99999;
  max-width: 86%;
  padding: 10px 20px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: 14px;
  text-align: center;
  transform: translateX(-50%);
  animation: gameToastIn .25s ease-out;
}
@keyframes gameToastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- 规则浮层容器（game.js 类化产物；显隐走 display，动画靠 keyframes 重触发）---- */
.game-rules-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .55);
  animation: gameRulesFadeIn .2s ease-out;
}
.game-rules-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 16px;
  background: #fff;
  border-radius: 12px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: gameRulesBoxIn .24s ease-out;
}
.game-rules-close {
  position: absolute;
  right: 8px;
  top: 4px;
  padding: 4px 8px;
  font-size: 24px;
  line-height: 1;
  color: #999;
  cursor: pointer;
}
.game-rules-nav {
  margin-top: 14px;
  text-align: center;
}
.game-rules-nav-btn {
  margin-right: 10px;
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #f7f7f7;
  font-size: 14px;
  cursor: pointer;
}
.game-rules-nav-btn:active {
  opacity: .8;
}
.game-rules-nav-primary {
  margin-right: 0;
  padding: 8px 26px;
  border: none;
  background: var(--game-action);
  color: #fff;
}
.game-rules-nav-primary:active {
  background: var(--game-action-deep);
}
@keyframes gameRulesFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gameRulesBoxIn {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, calc(-50% + 12px));
    transform: translate(-50%, calc(-50% + 12px));
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

/* ---- 动效清单（120-300ms，只用 transform/opacity）---- */
/* 动态流新条目进场（增量渲染 .is-new，重连首帧全量替换不触发） */
.game-feed-item.is-new {
  animation: gameFeedIn .24s ease-out;
}
@keyframes gameFeedIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 唯一最小数换人轻弹 */
.game-min-badge.is-pop {
  animation: gamePop .18s ease-out;
}
@keyframes gamePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* 统计值变更轻闪（纯 opacity） */
.game-stat-value.is-tick {
  animation: gameTick .16s ease-out;
}
@keyframes gameTick {
  from { opacity: .4; }
  to { opacity: 1; }
}
/* 底部参与栏首次生成上滑出场 */
.game-join-bar {
  animation: gameJoinIn .24s ease-out;
}
@keyframes gameJoinIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
/* 奖品大图入场淡入 */
.game-prize-img {
  animation: gameFadeIn .3s ease-out;
}
/* 终局过渡提示淡入 */
.game-final-notice {
  animation: gameFadeIn .2s ease-out;
}
@keyframes gameFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 减少动画（用户偏好；game-static 自带降级——zjg 无主题级通配降级）---- */
@media (prefers-reduced-motion: reduce) {
  .game-skeleton::after,
  .game-rules-mask,
  .game-rules-box,
  .game-min-badge.is-pop,
  .game-join-bar,
  .game-prize-img,
  .game-final-notice {
    animation: none;
  }
  /* 反馈必需项降为纯 opacity 短闪（≤120ms），不用位移/缩放 */
  .game-feed-item.is-new,
  .game-stat-value.is-tick,
  .game-toast {
    animation: gameTick .12s linear;
  }
  .game-progress-bar,
  .game-offline {
    transition: none;
  }
}

/* ---- 响应式（仅既有断点，禁新增） ---- */
@media (max-width: 1240px) {
  .game-page { padding: 16px 16px 72px; }
}
@media (max-width: 768px) {
  .game-page { padding: 12px 12px 72px; }
  .game-min-badge { font-size: 24px; min-width: 64px; padding: 6px 12px; }
  .game-min-right { display: none; } /* 窄屏省「唯一且最小」右列，徽章自带语义 */
  .game-min-phone { display: none; }
  .game-prize-img { max-height: 220px; }
}
@media (max-width: 480px) {
  .game-page { padding: 10px 0 64px; }
  .game-card { padding: 12px; border-radius: 10px; }
  .game-title { font-size: 18px; }
  .game-result-number { font-size: 32px; }
  .game-stat { flex: 1 1 calc(50% - 8px); }
  .game-min-avatar { width: 38px; height: 38px; }
  .game-min-badge { font-size: 22px; min-width: 56px; }
  .game-feed-nick { max-width: 36%; }
  .game-feed-act { display: none; } /* 极窄屏省「发送数字」前缀保密度 */
  .game-join-bar { font-size: 15px; }
  .game-related-grid { grid-template-columns: repeat(2, 1fr); }
  .game-sibling-nav { flex-direction: column; align-items: stretch; }
  .game-sibling-placeholder { display: none; }
  .game-sibling-link.next { text-align: left; }
}