/* ===== 德州扑克 SNG - 微信风格白色主题 =====
   配色规范（唯一允许的颜色集合，其余一律用透明度/明暗变体）：
   1. 全局背景  #FFFFFF
   2. 卡片背景  #F7F7F7
   3. 分隔线    #E5E5E5
   4. 主色      #07C160（微信绿）
   5. 主要文字  #1A1A1A
   6. 次要文字  #888888
   7. 弃牌红    #C62828
   8. 底部导航  #FFFFFF + 顶部 1px #E5E5E5 分隔线
   牌桌本体保留深绿毛毡（线下牌桌本色），属于牌桌内部专用色，不参与全局背景。
   其余颜色一律不得出现。 */
:root {
  /* —— 规范 8 色（基准） —— */
  --c-bg: #FFFFFF;           /* 1. 全局背景（纯白） */
  --c-card: #F7F7F7;         /* 2. 卡片背景（浅灰） */
  --c-line: #E5E5E5;         /* 3. 分隔线（极浅灰） */
  --c-green: #07C160;        /* 4. 主色调（微信绿） */
  --c-ink: #1A1A1A;          /* 5. 主要文字（深黑） */
  --c-gray: #888888;         /* 6. 次要文字（灰） */
  --c-fold: #C62828;         /* 7. 危险/弃牌（暗红） */
  --c-nav: #FFFFFF;          /* 8. 底部导航背景 */

  /* —— 牌桌本体专用色（深绿毛毡，仅牌桌内部使用） —— */
  --c-felt-hi: #142618;      /* 桌面渐变起点 */
  --c-felt-lo: #070a08;      /* 桌面渐变终点 */

  /* —— 操作按钮色（保持红/绿/蓝） —— */
  --c-btn-call: #1b5e20;     /* 跟注绿 */
  --c-btn-raise: #1976d2;    /* 加注蓝 */

  /* —— 兼容别名：旧变量名映射到新语义（避免遗漏引用） —— */
  --c-white: var(--c-ink);   /* 原「白色文字」→ 白底上的深黑文字 */
  --c-orange: var(--c-green);/* 原「主色橙」→ 微信绿 */

  /* —— 语义别名（全部映射到 8 色，不引入新色相） —— */
  --bg-black: var(--c-bg);
  --bg-dark: var(--c-bg);
  --bg-table-outer: var(--c-bg);
  --bg-table-inner: var(--c-felt-hi);
  --bg-table-felt: var(--c-felt-hi);
  --rail-dark: var(--c-bg);
  --rail-darker: var(--c-bg);
  --gold-hi: var(--c-green);        /* 原金色高亮 → 微信绿 */
  --gold-soft: var(--c-green);
  --line-gray: var(--c-line);       /* 分隔线浅灰 */
  --text-white: var(--c-ink);       /* 主要文字 → 深黑（白底可读） */
  --text-gray: var(--c-gray);       /* 次要文字灰 */
  --accent-orange: var(--c-green);  /* 主色 → 微信绿 */
  --accent-gold: var(--c-green);
  --accent-orange-deep: var(--c-green);
  --card-bg: var(--c-white-card);
  --card-text: var(--c-ink);
  --card-red: var(--c-fold);        /* 扑克牌红桃/方块 → 弃牌红 */
  /* 扑克牌黑桃/梅花文字：必须为深色（白牌面上的黑字），与全局背景解耦 */
  --card-black: #1A1A1A;
  --c-white-card: #FFFFFF;          /* 扑克牌白底 */
  --fold-gray: var(--c-gray);
  --btn-fold: var(--c-fold);
  --btn-check: var(--c-btn-call);
  --btn-call: var(--c-btn-call);
  --btn-raise: var(--c-btn-raise);
  --btn-allin: var(--c-btn-call);
  --btn-delay: var(--c-gray);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 全局背景：微信风格纯白 */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;   /* 全局唯一字体栈 */
  font-size: 15px;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100vw;
  height: 100vh;
  /* 移动端（微信/Safari）地址栏会占高，100vh 会溢出：
     一律用 JS 实测的 --app-h，不再依赖 dvh（微信 X5 内核支持不稳） */
  height: var(--app-h, 100vh);
  display: flex;
  flex-direction: column;
  /* 屏幕背景：纯白 */
  background: var(--c-bg);
  position: relative;
  /* 底部导航栏高度：内容区预留，避免玩家手牌/操作按钮被导航遮挡 */
  padding-bottom: 56px;
  /* 牌桌半高（牌桌高 62vh 的一半）：用于座位骑边与加注抬升的几何换算 */
  --table-half: 31vh;
  --nav-h: 56px;
}
/* 白色主题：去除木质噪点纹理 */
#app::before {
  content: none;
}
/* 白色主题：去除暗角 vignette */
#app::after {
  content: none;
}

/* ===== 顶部状态栏已移除（阶段显示迁移至底池胶囊旁，音效开关迁移至“我的资料”） ===== */

/* ===== 我的资料：设置项列表 ===== */
.settings-list {
  margin: 8px 12px 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  min-height: 44px;
}
.setting-label {
  font-size: 15px;
  color: var(--c-ink);
}
.setting-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  color: var(--c-gray);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.setting-switch:active { transform: scale(0.96); }
.setting-switch[aria-checked="true"] {
  color: var(--c-green);
  border-color: rgba(7,193,96,0.35);
}
.setting-switch .vol-icon { font-size: 14px; }

/* ===== 牌桌内：阶段文字（极小字号灰色，跟在盲注后，不单独占一条） ===== */
.pot-blinds .pot-street {
  margin-left: 8px;
  font-size: 11px;
  color: var(--c-gray);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* ===== 我的资料：音量滑块（迁移自原顶部状态栏，默认展示） ===== */
.volume-slider-wrap {
  display: flex;
  align-items: center;
}
.volume-slider {
  width: 140px;
  accent-color: var(--c-green);
}
/* 静音态：音量滑块变灰并禁用，提示当前不发声 */
.volume-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.volume-slider-wrap.is-disabled { opacity: 0.7; }
.setting-switch.is-muted {
  background: #F2F2F2;
  border-color: #E6E6E6;
  color: #B0B0B0;
}

/* =====================================================================
   我的资料页（微信白绿）：头部信息 + 历史战绩 + 设置 + 关于弹窗
   ===================================================================== */
.page.page-profile {
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 90px;
  gap: 10px;
  box-sizing: border-box;
  background: #F7F7F7;
}
/* ① 头部：纯白卡片 + 底部浅灰分隔线 */
.pf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  background: #FFFFFF;
  border-radius: 16px;
  border-bottom: 1px solid #EDEDED;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pf-avatar {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(7, 193, 96, 0.25);
}
.pf-avatar svg { display: block; width: 100%; height: 100%; }
.pf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-name {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-id { font-size: 12px; color: #9A9A9A; letter-spacing: 0.5px; }
/* 总积分大卡片：浅绿底 + 大号微信绿数字 */
.pf-points-card {
  flex: 0 0 auto;
  min-width: 82px;
  padding: 10px 12px;
  text-align: center;
  background: #EAF9F0;
  border: 1px solid #D6F0E1;
  border-radius: 12px;
}
.pf-points-value { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: #07C160; }
.pf-points-value b { font-size: 24px; font-weight: 800; line-height: 1; }
.pf-points-value span { font-size: 11px; font-weight: 700; }
.pf-points-label { margin-top: 4px; font-size: 11px; color: #7FA98E; letter-spacing: 1px; }

/* ② 历史战绩 */
.pf-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 0; }
.pf-sec-title { font-size: 15px; font-weight: 700; color: #1A1A1A; }
.pf-sec-sub { font-size: 11px; color: #999999; }
.pf-history { display: flex; flex-direction: column; gap: 8px; }
.pf-history-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pf-rank {
  flex: 0 0 58px;
  padding: 6px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #8A8A8A;
  background: #F4F4F4;
  border-radius: 8px;
}
.pf-rank.gold { color: #B8860B; background: #FFF7E0; }
.pf-hist-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-hist-blinds { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.pf-hist-time { font-size: 11px; color: #9A9A9A; }
.pf-delta { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #07C160; white-space: nowrap; }
.pf-delta.zero { color: #B0B0B0; }
.pf-delta.minus { color: #E64340; }
/* 空战绩占位 */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 16px;
  background: #FFFFFF;
  border: 1px dashed #E0E0E0;
  border-radius: 12px;
  color: #9A9A9A;
  font-size: 13px;
}
.pf-empty svg { width: 44px; height: 44px; opacity: 0.55; }

/* ③ 设置列表：复用 .settings-list，仅调整间距与分隔线 */
.pf-settings { margin: 0; border-radius: 12px; }
.pf-settings .setting-row { border-bottom: 1px solid #F2F2F2; }
.pf-settings .setting-row:last-child { border-bottom: none; }
.pf-link-row {
  width: 100%;
  background: #FFFFFF;
  border: none;
  border-top: none;
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-arrow { font-size: 20px; line-height: 1; color: #C4C4C4; }

/* 关于与帮助：居中弹窗（高于底部导航 9999） */
.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-modal[hidden] { display: none; }
.pf-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.pf-modal-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 20px 18px 16px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  animation: pfModalIn 0.18s ease-out;
}
@keyframes pfModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pf-modal-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: #1A1A1A; }
.pf-modal-body {
  max-height: 50vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}
.pf-modal-body p { margin: 0 0 8px; }
.pf-modal-body b { color: #1A1A1A; }
.pf-modal-btn {
  width: 100%;
  margin-top: 12px;
  padding: 11px 0;
  background: #07C160;
  border: none;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.pf-modal-btn:active { transform: scale(0.98); }

/* ===== 游戏规则弹窗：微信白背景 + 三 Tab ===== */
.rules-card { max-width: 380px; }
.rules-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 12px;
  background: #F2F2F2;
  border-radius: 10px;
}
.rules-tab {
  flex: 1;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #666666;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rules-tab.active {
  background: #FFFFFF;
  color: #07C160;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.rules-body { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rules-pane { display: none; font-size: 13px; line-height: 1.85; color: #333333; }
.rules-pane.active { display: block; }
.rules-item { padding: 8px 0; border-bottom: 1px solid #F5F5F5; }
.rules-item:last-child { border-bottom: none; }
.rules-item b { color: #07C160; }
.rules-note {
  margin-top: 8px;
  padding: 8px 10px;
  background: #F7F7F7;
  border-radius: 8px;
  font-size: 12px;
  color: #8A8A8A;
  line-height: 1.7;
}

/* 视觉隐藏：仅供 JS 读取/写入，不占据布局、不可见 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 主游戏区：flex 竖向分配（牌桌居中、玩家区贴底） ===== */
.game-area {
  flex: 1;
  position: relative;
  min-height: 0;
  padding: 0;
  z-index: 1;
  perspective: 1400px;
}

/* ===== 牌桌详情页：全屏深色沉浸背景（彻底消除手牌下方/四周的白色断层） =====
   ① 详情页、游戏区统一铺同一种深色底，任何溢出/露底都不会出现色差；
   ② 屏幕中心一抹极淡的墨绿光晕，让牌桌像“陷进”暗场里，而不是贴在白纸上；
   ③ 顶部/底部导航条同步深色化，页面上下不再有白边。 */
.game-detail.game-detail-table {
  height: 100vh;
  height: var(--app-h, 100vh);
  min-height: 0;
  /* 牌桌视图：彻底铺满屏幕，压在页面内容之上 */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  transform-origin: center center;
  /* ⚠️ 绝不加 will-change/backface-visibility：全屏大层一旦被钉成 GPU 合成层，
     内部任何内容变化（倒计时遮罩 100ms 一刷、气泡、筹码）都会触发整层按缩放后
     分辨率重栅格化 → 手机浏览器上就是周期性频闪。旋转是静态的，无需硬件加速。 */
}
/* ===== 伪横屏（竖屏拿手机 + 牌桌沉浸）：整个详情页顺时针转 90° =====
   所有子元素（table-wrapper + raise-panel + action-bar + timerCorner + statusCorner）
   自动一起转，不用分别处理。transform 只负责旋转，尺寸/居中靠下面的属性。

   旋转后视觉上：
   - 原视口宽(w) → 旋转后变"高"方向
   - 原视口高(h) → 旋转后变"宽"方向
   所以容器 CSS 盒模型尺寸必须交换：width=可视高, height=可视宽。
   ⚠️ 绝不用裸 100vh/100vw：手机浏览器地址栏弹出时 100vh 比真实可视高大 60~80px，
      旋转后牌桌物理宽度溢出 → 右侧被裁、按钮点不到；地址栏一收一放就是频闪。
      一律用 JS 实测的 --app-h/--app-w（visualViewport 口径）。 */
.game-detail.game-detail-table.portrait {
  width: var(--app-h, 100vh);
  height: var(--app-w, 100vw);
  left: 50%;
  top: 50%;
  /* 必须清掉基础规则的 inset:0，否则 left:50% + right:0 会互相打架 */
  right: auto;
  bottom: auto;
  margin-left: calc(var(--app-h, 100vh) / -2);
  margin-top: calc(var(--app-w, 100vw) / -2);
  transform: rotate(90deg);
}
/* ===== 伪横屏文字反向旋转（终极修法 v2）
   ⚠️ 只给纯文本叶子节点反向旋转，绝对不碰 flex/absolute 布局容器！
   v1 版本把 display:inline-block + rotate(-90deg) 加到了布局容器上，炸掉 flex/absolute。
   v2：纯文本 span/div 本身就是叶子节点（不是容器），直接加 rotate 即可，
   且完全不加 display 属性（保持原始 display：inline 的 span 还是 inline，block 的 div 还是 block）。 */
.game-detail.portrait .bet-line-label > span,  /* 下注金额 label 里的 span */
.game-detail.portrait .timer-text > span {     /* 倒计时里的 span */
  /* 与 hero 手牌同方向：不再反向旋转 */
  transform: none !important;
  transform-origin: center center !important;
  pointer-events: none;                        /* 关键！反向旋转 hitbox 会错位 */
  white-space: nowrap;
  line-height: 1;
  /* 名字/筹码/底池数值已由 v217 的「整块旋转」统一处理，
     这里不再逐个旋转，避免两套方案叠加成 180° 倒置。 */
}
/* 视觉小容器（有边框/背景/padding，内部有文字）：与手牌同方向，只保留居中位移
   ⚠️ 这些元素原本自带 translateX(-50%) 居中定位，portrait 规则必须完整保留，
   否则会把它们整体左移半个宽度，和相邻信息叠在一起。 */
.game-detail.portrait .hand-type-box {
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  pointer-events: none;
}
.game-detail.portrait .equity-badge {
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  pointer-events: none;
}
/* AI 行动提示气泡 / Reback·延时卡胶囊：与 hero 手牌同方向 */
.game-detail.portrait .action-bubble,
.game-detail.portrait .status-pill,
.game-detail.portrait .ai-reback-pill {
  transform: none !important;
  transform-origin: center center !important;
  pointer-events: none;
  /* 不设置 display —— 保持原始 flex/block */
}
/* ===== 伪横屏：座位信息区（名字 / 筹码 / 状态标签）间距 =====
   父容器旋转 90° 后，座位内的「纵向堆叠」在视觉上变成「横向排开」，
   原来的 gap 5px 到视觉上仍然只有 5px，三行文字挤在一起。
   这里把间距拉到 16px，并把字号收小，视觉上三块信息清爽分离。 */
.game-detail.portrait .seat-mid {
  gap: 16px !important;
}
.game-detail.portrait .seat-id-row {
  gap: 6px !important;
}
.game-detail.portrait span.player-name {
  font-size: 11px !important;
}
.game-detail.portrait [id^="chips-"] {
  font-size: 11px !important;
}
.game-detail.portrait .ai-reback-pill {
  margin-top: 4px !important;
  font-size: 8px !important;
}
/* ===== 伪横屏：底池 + 盲注区 =====
   旋转后底池数字的视觉"高度"= 原宽度，32px 字号会挤掉上下两行盲注信息。
   缩小字号 + 拉开 pot-info 行距 + 收窄胶囊内边距。 */
.game-detail.portrait .pot-value {
  font-size: 27px !important;
  line-height: 1.1 !important;
}
.game-detail.portrait .pot-blinds {
  font-size: 12px !important;
  letter-spacing: 0.4px !important;
}
.game-detail.portrait .pot-info {
  gap: 7px !important;
  line-height: 1.15 !important;
}
.game-detail.portrait .pot-display {
  min-width: 170px !important;
  padding: 10px 30px 12px !important;
}
.game-detail.portrait .blind-level-tip {
  font-size: 9px !important;
  margin-top: 3px !important;
}
/* ===== 伪横屏：公共牌间距 =====
   底盘 430px 可容纳 5x70 + 4x16 = 414px，牌与牌之间拉开到 16px，不再挤在一起。 */
.game-detail.portrait .community-area {
  width: 414px !important;
  max-width: 100% !important;
  gap: 16px !important;
}
/* 横屏/非伪横屏：清除 portrait 相关属性 */
.game-detail.game-detail-table:not(.portrait) {
  /* ⚠️ 这里绝对不能写 width/height:auto + left/top:auto：
     #gameDetail 是 position:fixed，一旦宽高 auto 且没有 left/top 约束，
     就会退化成 shrink-to-fit，整个详情页塌陷成 0×0 缩到视口右下角
     （table-wrapper 是 absolute 不撑开父级）→ 表现就是“白屏只剩按钮”。
     非伪横屏必须继续铺满视口。 */
  width: 100%;
  height: var(--app-h, 100vh);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-left: 0;
  margin-top: 0;
  transform: none;
  background: #0a0a0a;
}
.game-detail.game-detail-table .game-area {
  position: relative;
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%,
      #16241d 0%,
      #101a15 38%,
      #0b0f0d 72%,
      #080a09 100%);
}
/* 顶部栏：深色玻璃质感，与牌桌场景连成一体 */
.game-detail.game-detail-table .detail-head {
  background: #0b0f0d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.game-detail.game-detail-table .detail-title,
.game-detail.game-detail-table .detail-back { color: #EDEDED; }
.game-detail.game-detail-table .game-status-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
.game-detail.game-detail-table .gsc-title { color: #F2F2F2; }
.game-detail.game-detail-table .gsc-sub { color: rgba(255, 255, 255, 0.55); }
/* 右下角状态胶囊（延时卡 / Reback）：深底浅字，避免白底胶囊在深色场里刺眼 */
.game-detail.game-detail-table .status-pill {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
.game-detail.game-detail-table .status-pill.available {
  color: #7CF5AC;
  border-color: rgba(7, 193, 96, 0.45);
}
/* 延时卡按 ID 定制的浅色背景需一并深色化，否则会残留白块 */
.game-detail.game-detail-table #pillDelay {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
/* 牌桌右上角模式/编号角标：深底浅字 */
.game-detail.game-detail-table .corner-tag {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
}
.game-detail.game-detail-table .corner-tag.room span { color: rgba(255, 255, 255, 0.85); }
/* 顶部状态栏隐藏后，牌桌场景的背景全部由 #gameDetail 承担；底部操作按钮区不做任何白底填充 */

/* =====================================================================
   牌桌沉浸模式 + 固定设计稿（1280×720）等比缩放
   ① 进入牌桌时强制隐藏顶部标题栏与底部导航，只留牌桌；
   ② 所有牌桌元素都排在 1280×720 的画布里（.table-wrapper），
      由 JS 计算 scale = min(vw/1280, vh/720) 整体缩放，任何屏幕都不会挤压重叠；
   ③ transform 只改变视觉大小，不改布局盒尺寸，故用负 margin 居中，绝不产生滚动条。
   ===================================================================== */
body.table-mode .detail-head,
body.table-mode .bottom-nav { display: none !important; }

.table-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  /* 负 margin 居中：生产验证过的方案，不受 transform 影响，最稳 */
  margin-left: -640px;
  margin-top: -360px;
  transform-origin: center center;
  /* 横屏/桌面：只缩放 */
  transform: scale(var(--table-scale, 1));
  background: transparent;
  /* 竖向分配：游戏区占满剩余高度，玩家区（.seat-zone-bottom）贴画布底边 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 尺寸容器：内部媒体查询一律按设计稿尺寸判定，不再受真实视口宽高影响 */
  container-type: size;
  container-name: table-design;
  /* ⚠️ 绝不加 will-change/backface-visibility：1920×720 巨层钉成 GPU 合成层后，
     内部每次重绘（倒计时/发牌/筹码动画）都会整层重栅格化 → 手机浏览器频闪根源。 */
}
/* 伪横屏模式：父容器 #gameDetail.portrait 已经整体 rotate(90deg)
   table-wrapper 自己只负责 scale，不旋转（否则叠加 180° 倒过来） */
.table-wrapper.portrait {
  transform: scale(var(--table-scale, 1));
}
/* 游戏区铺满设计画布的剩余高度，作为牌桌所有绝对定位元素的坐标系 */
.table-wrapper .game-area {
  position: relative;
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  perspective: 1400px;
}
/* 玩家区紧贴画布底边（原 #gameDetail flex 列布局语义） */
.table-wrapper > .seat-zone-bottom {
  flex: 0 0 auto;
  margin-top: auto;
}
/* 座位椭圆半径：固定设计稿下不允许被真实视口的 50vw 收缩，一律取设计稿基准 */
.table-wrapper .table-layer .seat.seat-ai { --seat-rx: 44%; --seat-ry: 38%; }

/* 沉浸模式浮动返回键：顶部标题栏隐藏后仍能退出牌桌 */
.table-exit {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 60;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 44px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.table-exit:active { transform: scale(0.92); }

/* ===== 环境氛围灯：顶部光锥 + 中央光池，把打光集中在公牌区与底池 ===== */
.ambient-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  display: block;
}
/* 光锥：从屏幕顶部（灯源）向下扩散的暖琥珀色光锥（rgba(255,200,100,0.08)）。
   radial-gradient 以屏幕顶部中点为圆心向下辐射，覆盖公共牌区与底池，
   边缘随距离自然衰减。 */
.light-cone {
  position: absolute;
  top: 0;
  left: 50%;
  width: 160%;
  height: 96%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 74% at 50% 0%,
      rgba(255,200,100,0.08) 0%,
      rgba(255,200,100,0.062) 26%,
      rgba(255,200,100,0.038) 48%,
      rgba(255,200,100,0.016) 68%,
      rgba(255,200,100,0.0) 88%);
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.30) 62%, transparent 88%);
  mask-image:
    linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.30) 62%, transparent 88%);
  /* ⚠️ 绝不写 filter: blur —— 全屏大元素挂大半径模糊时，任何局部重绘都会
     逼浏览器重算整片模糊（低端国产内核上 = 整桌频闪 + 卡死的放大器）。
     径向渐变本身已边缘透明，模糊对观感几乎无影响。 */
}
/* 光池：公共牌 / 底池核心高亮（暖琥珀，边缘自然过渡，使桌面边缘变暗） */
.light-pool {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 70%;
  height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 58% at 50% 46%,
    rgba(255,200,100,0.085) 0%,
    rgba(255,200,100,0.058) 32%,
    rgba(255,200,100,0.030) 54%,
    rgba(255,200,100,0.011) 72%,
    transparent 90%);
  /* 同上：绝不写 filter: blur（全屏模糊 = 弱内核频闪/卡死放大器） */
}
/* 屏幕四周暗角：全屏暗角遮罩，压暗牌桌外圈的背景，把视线聚焦到中央公牌区/底池 */
.screen-vignette {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;                    /* 位于牌桌之下：只压暗屏幕背景，不压暗牌桌本体 */
  background:
    radial-gradient(ellipse 66% 60% at 50% 46%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0.22) 62%,
      rgba(0, 0, 0, 0.55) 84%,
      rgba(0, 0, 0, 0.78) 100%);
}

/* 牌桌背景层：牌桌在本层内水平居中、垂直居中（不再整层下移，
   由 max-height 预留上下各 6vh 呼吸空间，顶栏 AI 不再贴屏幕顶端）。 */
.table-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;           /* 垂直居中于游戏区 */
  justify-content: center;       /* 水平严格居中 */
  padding-bottom: 16px;          /* 牌桌下边缘与玩家区之间的安全间距 */
  transform: translateY(0);      /* 取消整体下移，牌桌回到视觉中心 */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;                    /* 高于暗角层：牌桌不受四周暗角压暗 */
}

/* 中央公共区：位于牌桌内部（center-zone 是 .poker-table 的子元素，inset:0 即牌桌范围），
   公共牌 + 底池作为一个整体：水平严格居中，垂直位于牌桌中心【略偏上一点点】；绝不越界。 */
.center-zone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;           /* 先整体垂直居中 */
  justify-content: center;       /* 水平严格居中 */
  pointer-events: none;
  z-index: 6;
}
.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;           /* 公共牌底盘 / 底池 / 下注线共用同一垂直中轴线 */
  gap: 0;                        /* 各分区间距由内部 margin 精确控制 */
  /* 公共牌区整体下移 64px（原偏上 24px），拉开与 AI-4/AI-5（pos-top 上方座位）的间距。
     上方座位已通过 SEAT_ORBIT_RY=0.82 往上推远，这里双重保险确保不遮挡公共牌。 */
  transform: translateY(+40px);
}

/* ===== ① 发牌区底盘：桌面正中央专属深灰底盘（视觉锚点） =====
   5 张牌背后垫一整块深灰底，牌不再「悬空」；宽度略宽于 5 张牌（390px） */
.board-plate {
  /* 需求：宽度略宽于 5 张牌（5x70 + 4x10 = 390），取 430px；
     同时用 min() 夹紧上限，保证低分屏下不超出牌桌本体 */
  width: min(430px, 86%);
  height: 120px;                 /* 需求：高度比牌面略高（牌 100px） */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;                /* 强制水平居中，避免受父级对齐影响 */
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.30);                       /* 深灰底盘：专属发牌区 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;                                   /* 需求：圆角 12px */
  /* ===== 关键修复：永远不拦截触摸/点击事件 ===== */
  pointer-events: none;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.55),                 /* 内凹：牌嵌在绒布上 */
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.35),                      /* 底盘自身投影 */
    0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 5;                    /* 层级规范：公共牌区 = 5 */
}

/* ===== ② 底池筹码区：位于公共牌底盘正下方 15px，严格水平居中 ===== */
.pot-zone {
  height: auto;
  display: flex;
  flex-direction: column;        /* 底池胶囊在上、盲注升级信息行在下，纵向堆叠 */
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;              /* 需求：底盘正下方 15px */
  z-index: 5;                    /* 层级规范：底池 = 5 */
}

/* ===== 盲注升级提示：底池胶囊正下方，倒计时 + 下一级盲注 =====
   极小字号、低饱和配色，作为牌桌边缘的辅助信息，不抢底池视觉重心。 */
.blind-level-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: rgba(232, 232, 232, 0.55);   /* 极淡灰，弱于底池 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.blind-level-tip.hidden { opacity: 0; visibility: hidden; }
.blind-level-tip .blind-next b {
  color: rgba(255, 200, 100, 0.9);    /* 金橙色，与牌桌金边呼应 */
  font-weight: 700;
}
.blind-level-tip .blind-countdown b {
  color: rgba(255, 200, 100, 0.9);
  font-weight: 700;
}
/* 升级瞬间的强调动画：整行轻微放大回弹一次 */
.blind-level-tip.bump { animation: blindTipBump 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes blindTipBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); color: rgba(255, 200, 100, 0.95); }
  100% { transform: scale(1); }
}

/* ===== ③ 下注线：分隔公共牌区（上）与玩家手牌区（下） =====
   极细半透明圆弧，弧度贴合牌桌椭圆轮廓；玩家头像/手牌必须位于其下方。 */
.bet-line {
  position: relative;
  width: min(560px, 92%);
  height: 12px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);        /* 需求：1px 半透明白色弧线 */
  border-radius: 50% / 100%;     /* 椭圆弧，贴合桌面轮廓 */
  z-index: 4;                    /* 低于公共牌/底池，不遮挡内容 */
  pointer-events: none;
}

/* 顶部 AI 区 / 底部玩家区：#app 内流元素（非绝对定位），位于牌桌外侧上下方，
   水平严格居中；内部模块用自然 flex 流纵向堆叠。 */
.seat-zone {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.seat-zone-top { align-items: flex-start; }
/* 底部玩家区：水平居中、紧贴牌桌下边缘；操作按钮为绝对定位，
   由 padding-bottom 预留「按钮高度 + 贴底间距」，手牌/名字/筹码与按钮之间不再有大片空白。 */
.seat-zone-bottom {
  align-items: flex-end;
  position: relative;
  width: 100%;
  padding-bottom: 6px;          /* 仅保留按钮贴底安全余量（空白由 90px 展示位自然过渡） */
  transform: none;              /* 取消下移，玩家信息紧贴牌桌下缘 */
  /* 玩家区紧贴屏幕底部：下方残余空间全部由深色背景承接，不再露白 */
  margin-top: auto;
}

/* ===== 扑克桌（高端实体桌质感：16px 实木扶手 + 深绿毛毡 + 悬浮阴影） ===== */
.poker-table {
  position: relative;
  /* 牌桌成为画面绝对主体：宽 94%、高 74%（均相对游戏区，与座位椭圆共用同一基准，
     保证座位始终贴着桌沿，不会因牌桌被高度上限压缩而跑进桌面内部）。 */
  width: 94%;
  height: 74%;
  /* 在固定设计稿画布内，用 4% 而非 4vh：vh 是真实视口高度百分比，不同设备差异大；
     4% 是游戏区高度百分比（game-area 约 600px → 24px），效果恒定 */
  max-height: calc(100% - 4%);
  max-width: 1600px;
  flex: 0 0 auto;                /* 绝不参与 flex 收缩，防止被 game-area 高度压扁 */
  box-sizing: border-box;
  /* 需求：长条圆角矩形（120px / 80px），告别扁平托盘 */
  border-radius: 120px / 80px;
  /* 2.5D 俯视透视：整体略微前倾，像真实实体桌的俯视角度 */
  transform: perspective(1400px) rotateX(6deg);
  transform-style: preserve-3d;
  /* 1. 实体实木扶手：16px 厚边框，深褐近黑，彻底取代原先 1px 细线 */
  border: 16px solid #1a1512;
  background: #120e0b;           /* 扶手压住的暗底，避免内圈漏白 */
  box-shadow:
    /* 悬浮感：极大、极深的外阴影，让牌桌完全浮在深色背景之上 */
    0 30px 60px rgba(0, 0, 0, 0.9),
    0 14px 34px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.04),
    /* 扶手外沿暗边 + 内侧暗金金属镶边（内发光） */
    inset 0 0 0 1px rgba(0, 0, 0, 0.85),
    inset 0 0 10px rgba(255, 215, 0, 0.20);
}

/* 桌面：深绿毛毡 + 中心略提亮的径向渐变，边缘压深形成凹陷 */
.table-felt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 92% 86% at 50% 42%,
      #1F6B47 0%,      /* 中心：略微提亮的深绿 */
      #185739 40%,
      #10402A 68%,
      #08251A 100%);
  /* 与 16px 扶手内缘贴合的内圆角（120-16 / 80-16） */
  border-radius: 104px / 64px;
  box-shadow:
    inset 0 0 10px rgba(255, 215, 0, 0.20),  /* 内侧暗金镶边内发光 */
    inset 0 0 30px rgba(0, 0, 0, 0.95),      /* 最内圈纯黑内阴影：边缘深凹 */
    inset 0 18px 44px rgba(0, 0, 0, 0.45);   /* 顶部压暗，强化下沉立体感 */
  z-index: 0;
  overflow: hidden;
}
/* 桌面内圈：极细暗金内嵌线，替代原半透明白线 */
.table-felt::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  border: 1px solid rgba(255, 215, 0, 0.10);
  pointer-events: none;
}
/* 底部毛玻璃反光：极淡白色渐变 + backdrop-filter 模糊，营造玻璃桌面质感；
   位于桌面最下方、透明度极低，绝不遮挡公共牌/底池/文字 */
.table-felt::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.035) 55%,
    rgba(255, 255, 255, 0.015) 100%);
  /* ⚠️ 绝不写 backdrop-filter：背景模糊会把「整片背景」拉进每次重绘，
     低端国产内核上 = 任何动画都引发整桌频闪/卡死。渐变本身保留观感。 */
  pointer-events: none;
}

/* 桌面分区线：横向细线，划分「公共牌区（上）」与「玩家下注/手牌区（下）」 */
.poker-table .table-divider {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 57%;
  height: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50% / 100%;
  pointer-events: none;
  z-index: 2;
}
/* 公共牌放置区：正中央极微弱的圆形轮廓线 */
.poker-table .table-center-ring {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 42%;
  height: 52%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 2;
}

/* 桌面正中央品牌水印：统一由 .table-watermark 绘制，避免双层水印叠加 */
.poker-table::before {
  content: none;
}

/* 内圈：极弱的桌面凹陷层次，不再使用厚重内阴影 */
.table-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
  z-index: 4;
  pointer-events: none;
}
/* ===== 下注线已迁移至 .bet-line（center-stack 内），此处不再绘制重复弧线 =====
   .table-ring 仅保留桌面下沉凹陷。下方仅保留底部 "SNG" Logo。 */
/* 桌面底部：小型 "SNG" 字样 Logo（极淡，透明度 0.06） */
.table-ring::after {
  content: 'SNG';
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 8px;
  text-indent: 8px;
  color: #FFFFFF;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* ===== 桌腿底座：极简电竞风改为悬浮牌桌，移除厚重梯形支撑柱 ===== */
.table-base {
  display: none;
}

/* ===== 桌面水印：正中央极淡 ♠ 品牌水印（透明度 0.03） ===== */
.table-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;                     /* 层级规范：桌面水印 = 2（高于牌桌背景 1，低于其余所有元素） */
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 200px;               /* 需求：大小 200px */
  line-height: 1;
  color: #FFFFFF;
  opacity: 0.03;                  /* 需求：极淡、极淡的品牌水印 */
  pointer-events: none;           /* 不影响任何点击/交互 */
  user-select: none;
  -webkit-user-select: none;
  text-shadow: none;
}
/* 原 DOM 中的 ♦ 字符隐藏，改用 ♠ 水印（纯样式替换，不改结构） */
.table-watermark span { display: none; }
.table-watermark::after {
  content: '♠';
  font-size: 200px;
  line-height: 1;
  color: #FFFFFF;
}

/* 桌面四周暗角晕影（强化聚焦，极淡） */
.poker-table::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 64% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.32) 100%);
  pointer-events: none;
  z-index: 3;
}

/* 公共牌区：严格在发牌底盘内水平居中，5 个占位框用 Flexbox 均匀排布；
   固定内容宽度 = 5x70 + 4x10 = 390px，虚线框与已发出的牌尺寸/位置完全一致，绝不错位。 */
.community-area {
  display: flex;
  width: 390px;                   /* 5x70 + 4x10：保证与底盘同心，两张牌绝不错位 */
  max-width: 100%;
  padding: 0;                     /* 间距由 gap 精确控制，避免与底盘内边距叠加 */
  box-sizing: border-box;
  gap: 10px;                      /* 需求：牌与牌间距严格 10px */
  perspective: 800px;
  pointer-events: none !important;  /* 移动端绝对不拦截！桌面端 @media 覆盖 */
  justify-content: center;        /* 5 张牌整体水平居中 */
  align-items: center;            /* 虚线框与已发出的牌同一水平线，垂直居中 */
  flex-wrap: nowrap;
  /* ===== 关键修复：移动端绝对不拦截触摸事件 =====
     桌面端 @media (hover:hover, pointer:fine) 会覆盖为 auto 以启用 hover 效果 */
  pointer-events: none !important;
}
/* Bug 3：新手牌开始瞬间清空上一局公共牌前的 150ms 淡出过渡 */
.community-area.community-fade-out {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
.community-card {
  width: 70px;
  height: 100px;                                       /* 已发牌：与虚线框完全一致的 70x100 */
  flex: 0 0 70px;                                      /* 固定尺寸：绝不收缩、不撑破底盘 */
  min-width: 0;
  max-width: 70px;
  border-radius: 6px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);   /* 纯白牌面 */
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.30),
    inset 0 0 4px rgba(0,0,0,0.06);
  position: relative;
  z-index: 5;                                          /* 层级规范：公共牌 = 5 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);   /* 标准动画 200ms */
}
/* 未发牌：现代细线圆角占位框（1px 半透明细线，取代虚线灰框），与已发牌尺寸一致 */
.community-card.empty {
  width: 70px;
  height: 100px;
  flex: 0 0 70px;
  min-width: 0;
  max-width: 70px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  opacity: 1;
}

/* 行动顺序指示条已移除（透明文字来源） */
.action-order-bar { display: none !important; }

/* ===== 盲注 + 底池 合并胶囊：深色毛玻璃 + 细描边，底池数字高亮发光 ===== */
.pot-display {
  position: relative;                           /* 使 z-index 生效 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 220px;                             /* 底池胶囊放大，强化视觉锚点（v216 再放大） */
  background: rgba(9, 11, 15, 0.55);            /* 深色半透明玻璃底 */
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;                         /* 胶囊形状 */
  padding: 14px 48px 16px;                      /* v216 放大 */
  /* 不写 backdrop-filter：底池位于牌桌中心，背景模糊会把公牌/筹码的
     每次重绘都放大成整片重栅格化（弱内核频闪/卡死放大器） */
  z-index: 5;                                   /* 层级规范：公共牌/底池 = 5 */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pot-icon { display: none; }
.pot-info { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pot-blinds {
  font-size: 14px;                              /* 盲注小字（v216 11→14 放大） */
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.pot-blinds span { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.pot-value {
  /* 现代无衬线数字：大字号、加粗、轻微白色发光 */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", sans-serif;
  font-size: 40px;                              /* 底池数字放大，确保视觉重心（v216 32→40） */
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.35),
    0 0 32px rgba(7, 193, 96, 0.18);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  line-height: 1.15;
}

/* ===== 座位：居中列；内含 .seat-mid（信息/展示位/筹码）与覆盖层 ===== */
.seat {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}
/* 底部玩家座位：操作按钮为绝对定位（脱离文档流），其占位高度已由
   .seat-zone-bottom 的 padding-bottom 统一预留，故此处不再重复预留，
   避免手牌被重复推高、与按钮间距过大。 */
.seat.seat-bottom {
  padding-bottom: 0;
}
/* 玩家位置字母：极简小字，低饱和灰（底部位于白色页面区域，需深色才可见） */
.seat.seat-bottom .seat-badge-line { color: rgba(26, 26, 26, 0.42); }
/* 玩家区行距：位置标签 → 名字 → 筹码 → 手牌/头像 紧凑排布，行距 5px */
.seat.seat-bottom .seat-mid { gap: 5px; }

/* 座位中部：自然 flex 纵向流（筹码/展示位/信息行按 DOM 顺序），
   覆盖层（下注筹码/牌型框）相对它绝对定位，锚点固定不随状态漂移。 */
.seat-mid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;                     /* 需求：行距 5px（展示位/名字/筹码紧凑排列） */
}
.seat-id-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;                     /* 需求：位置标签与名字行距 3px */
}
.seat-chips-row {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* 主体展示位：固定尺寸，手牌与头像都在同一位置绝对居中，
   两者切换完全重叠、绝不跳动。高度 = 手牌高度（90px），使筹码与手牌间距
   严格等于 .seat-mid 的 gap（5px），无额外留白。宽度须容纳两张 60x90 手牌（126 宽）。 */
.seat-slot {
  position: relative;
  width: 200px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 手牌 / 头像：绝对居中于展示位；默认（无 has-hand）显示头像、隐藏手牌；
   .has-hand 时反之。用 opacity + visibility 做 150ms 淡入淡出（Bug 4 规格）。 */
.seat-slot > .hero-hand,
.seat-slot > .ai-hand,
.seat-slot > .avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
}
.seat-slot > .hero-hand,
.seat-slot > .ai-hand {
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), visibility 150ms;
}
.seat-slot > .avatar {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1), visibility 150ms;
}
.seat.has-hand .seat-slot > .hero-hand,
.seat.has-hand .seat-slot > .ai-hand {
  opacity: 1;
  visibility: visible;
}
.seat.has-hand .seat-slot > .avatar {
  opacity: 0;
  visibility: hidden;
}

/* 玩家（seat 0）完全删除头像：无论有/无手牌都不再显示机器人头像与头像圆盘。
   保留倒计时环（.timer-ring）；同时隐藏头像上的庄位小绿点（.hero-badge）。
   并中和「当前行动 / 赢家」在头像上的发光环，避免留下空圆盘光晕。 */
.seat-bottom .seat-slot > #avatar-0 {
  background: none;
  border-color: transparent;
  box-shadow: none;
  animation: none;
}
.seat-bottom .seat-slot > #avatar-0::before,
.seat-bottom .seat-slot > #avatar-0::after,
.seat-bottom .seat-slot > #avatar-0 > svg,
.seat-bottom .seat-slot > #avatar-0 > .hero-badge {
  display: none;
}
.seat-bottom .seat.active .seat-slot > #avatar-0,
.seat-bottom.seat.active .seat-slot > #avatar-0,
.seat-bottom .seat.winner-seat .seat-slot > #avatar-0,
.seat-bottom.seat.winner-seat .seat-slot > #avatar-0 {
  border-color: transparent;
  box-shadow: none;
  animation: none;
}

/* ===== AI 座位专用（WePoker 式：位置标签 → 头像 → 名字 → 筹码，垂直居中，行距 3px）
   整座位模块严格位于牌桌上方流内，底部与公共牌区（game-area）保持 ≥20px 间距。 ===== */
.seat.seat-top {
  /* 座位模块与下方公共牌区之间预留安全间距，绝不向下侵入 */
  padding-bottom: 20px;
}
.seat.seat-top .seat-mid {
  gap: 3px;                     /* 需求：所有元素行间距 3px */
  z-index: 12;                  /* 需求：不被公共牌/牌桌遮挡 */
}
/* 位置标签行：模块第 1 行，固定最小高度，避免空标签时布局跳动 */
.seat-badge-line-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13px;
}
.seat.seat-top .seat-badge-line-wrap .seat-badge-line {
  font-size: 10px;              /* 极简小字，弱化位置标签 */
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
  min-height: 0;
}
/* 头像行：水平居中（AI 下注胶囊已移出此行，改为座位纵向流中的独立一行） */
.avatar-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* AI 展示位：仅容纳头像（64px）；牌背绝对定位于头像右下角叠层，
   不参与布局流、不撑高、绝不与名字/筹码/下注额重叠 */
.seat.seat-top .seat-slot {
  width: 64px;
  height: 64px;
  flex-direction: column;
  gap: 0;
}
.seat.seat-top .seat-slot > .avatar {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;                   /* 头像常驻显示 */
  visibility: visible;
  z-index: 2;                   /* 头像压在牌背之上 */
}
/* AI 牌背：绝对定位叠层于头像右下角的【内部区域】，仅压住头像一角，
   绝不向下越过头像底边进入名字行（避免与名字/筹码重叠） */
.seat.seat-top .seat-slot > .ai-hand {
  position: absolute;
  left: auto;
  right: -10px;
  top: auto;
  bottom: 2px;                  /* 底边不超出头像下沿，防止压到名字 */
  transform: none;
  margin: 0;
  gap: 2px;                     /* 两张牌背紧凑叠放 */
  z-index: 1;                   /* 位于头像之下，仅在右下角露出 */
}
/* 【关键覆写】WePoker 式 AI 座位：头像恒常显示，AI 手牌仅作为头像右下角的小叠层；
   绝不让 .has-hand 隐藏头像（否则名字/筹码/下注额会失去视觉主体、布局错乱）。 */
.seat.seat-top.has-hand .seat-slot > .avatar,
.seat.seat-top .seat-slot > .avatar {
  opacity: 1;
  visibility: visible;          /* 覆盖 .has-hand 的 visibility:hidden */
  z-index: 2;
}
.seat.seat-top.has-hand .seat-slot > .ai-hand,
.seat.seat-top .seat-slot > .ai-hand {
  opacity: 1;
  visibility: visible;          /* 有牌时常显；无牌时由 :empty 规则隐藏 */
}
/* 未发牌时（.ai-hand 为空）不显示任何牌背，仅显示头像 */
.seat.seat-top .seat-slot > .ai-hand:empty {
  opacity: 0;
  visibility: hidden;
}
/* AI 名字：模块第 3 行，13px 白色居中 */
.seat.seat-top .seat-id-row {
  gap: 0;
}
/* AI 筹码：模块第 4 行，16px 深黑加粗居中 */
.seat.seat-top .seat-chips-row.player-chips {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
}

/* 覆盖层（下注筹码/牌型框/行动气泡）绝对定位于座位中轴线 */
.seat .bet-chip,
.seat .action-bubble,
.seat .hand-type-box,
.seat .equity-badge {
  position: absolute;
  left: 50%;
}
.seat .bet-chip,
.seat .action-bubble { translate: -50% 0; }

/* 当前行动者：座位整体轻微上浮 */
.seat.active .seat-mid { transform: translateY(-5px); }
/* 非当前行动者：展示内容略暗（AI 座位不适用——头像/牌背需常驻清晰，子元素 opacity 由 seat-top 规则固定） */
.seat-bottom:not(.active) .seat-slot > .avatar,
.seat-bottom:not(.active) .seat-slot > .hero-hand,
.seat-bottom:not(.active) .seat-slot > .ai-hand { opacity: 0.85; }
.seat-bottom.has-hand:not(.active) .seat-slot > .hero-hand,
.seat-bottom.has-hand:not(.active) .seat-slot > .ai-hand { opacity: 0.85; }
.seat-bottom:not(.has-hand):not(.active) .seat-slot > .avatar { opacity: 0.85; }
/* Bug 4：弃牌 / 牌局结束 / 等待态统一显示头像、隐藏手牌（与 .has-hand 逻辑互补）。
   弃牌后手牌已被清空且 has-hand 被移除，此处让头像恢复常驻，避免"展示位留空"。 */


/* 位置标签（BTN/SB、BB）：极简小字，灰白 10px，不喧宾夺主 */
.seat-badge {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 0;
  background: transparent;
  white-space: nowrap;
  line-height: 1.2;
}
/* 位置标签统一为灰白色，不再用橙/蓝区分 */
.seat-badge.btn,
.seat-badge.bb { color: rgba(255, 255, 255, 0.42); }
/* 信息区内的位置标签行：三行居中 */
.seat-badge-line {
  display: block;
  min-height: 13px;
  text-align: center;
}

/* ===== 头像：极简单圈细描边 + 半透明玻璃底，去除笨重双层圆环 ===== */
.avatar {
  /* 玩家头像 72px（AI 由下方 .seat-top .avatar 覆写为 64px） */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 单圈 1px 半透明白细描边，克制、干净 */
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 10;
  transition: box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 头像落地投影：约头像 1.2 倍宽的椭圆深影 + 高斯模糊，营造「坐在桌边」的实体感 */
.avatar::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 120%;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.28) 46%,
    rgba(0, 0, 0, 0) 72%);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}
/* 内圈不再绘制第二道圆环（极简风） */
.avatar::before { display: none; }
/* AI 头像 64px；玩家头像保持 72px */
.seat-top .avatar { width: 64px; height: 64px; }
.seat-bottom .avatar { width: 80px; height: 80px; }
/* AI 头像外圈：保持细描边，当前行动时由下方 .seat.active .avatar 覆写为微信绿发光环 */
.seat-top .avatar { border-width: 1px; border-color: rgba(255, 255, 255, 0.16); }
.avatar svg { width: 34px; height: 34px; fill: rgba(255, 255, 255, 0.58); position: relative; z-index: 2; }
/* 当前行动：微信绿发光环（细描边 + 柔和外发光） */
.seat.active .avatar {
  background: rgba(7, 193, 96, 0.10);
  border-color: rgba(7, 193, 96, 0.85);
  box-shadow:
    0 0 0 1px rgba(7, 193, 96, 0.35),
    0 0 20px rgba(7, 193, 96, 0.40);
}
.seat.active .avatar::before { display: none; }
.hero-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  background: var(--c-green);
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 6px rgba(7,193,96,0.7);
  z-index: 3;
}

/* ===== 读秒：头像外圈的橙色倒计时环 + 环中央白色加粗秒数（玩家/AI 完全一致） ===== */
/* 环覆盖在头像外圈之上，居中同心；环中央数字用 flex 居中，绝不与头像/筹码/手牌重叠 */
.seat .timer-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  transform: translate(-50%, -50%);
  /* ⚠️ 不加 will-change：实测在部分国产浏览器内核上，旋转大层内的合成小层
     反而导致周边内容（手牌/信息区）渲染缺失 */
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;                   /* 必须高于头像(10)与手牌/名字/筹码，确保光环保留在上层 */
}
/* 当前行动者：光环显示并带微信绿发光 */
.seat.active .timer-ring {
  opacity: 1;
  box-shadow: 0 0 18px rgba(7,193,96,0.55);
}
.timer-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  /* 不写 filter: drop-shadow —— 滤镜会强制高频重绘时整层重新栅格化（频闪根源） */
}
.timer-progress {
  stroke-dasharray: 169.65;
  stroke-dashoffset: 0;
  /* 不写 transition: stroke —— JS 每 100ms 连续改色，transition 永远完不成，
     只会不断重启过渡白耗性能（颜色本身已是逐帧平滑插值） */
  stroke-width: 4;             /* 圆弧：清晰可见 */
}
/* 环正中央剩余秒数：白色加粗 24px，必须清晰可见 */
.timer-text {
  position: relative;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.98),
    0 0 6px rgba(0,0,0,0.95),
    0 0 2px rgba(10,10,10,1);
  pointer-events: none;
  z-index: 3;
}

/* ===== 屏幕右下角浮动倒计时：已废弃（倒计时统一显示在行动者头像光环上） ===== */
.timer-corner {
  display: none !important;      /* 彻底隐藏：不再在屏幕边缘显示绿色秒数 */
}
/* 玩家头像上的绿色倒计时环：需求要求取消，仅保留机器人（AI）头像上的倒计时 */
#timer-0 {
  display: none !important;
}
/* 剩余 10 秒：靠透明度闪烁提醒；绝不在 keyframes 里动 filter（模糊滤镜动画
   每帧强制重新栅格化，是手机浏览器频闪重灾区） */
.timer-ring.warning { animation: timer-flash 0.5s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.timer-ring.warning .timer-text {
  color: var(--c-white);
  font-weight: 700;
  text-shadow:
    0 0 8px rgba(7,193,96,0.95),
    0 0 16px rgba(7,193,96,0.6),
    0 2px 5px rgba(0,0,0,0.95);
}
@keyframes timer-flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* 第一行：玩家名（深黑 13px） */
.player-name {
  font-size: 13px;
  color: var(--c-ink);
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* 第三行：筹码（金色加粗，深色半透明胶囊底，现代数字排版） */
.player-chips {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 800;             /* 筹码数字统一加粗 */
  color: #FFD700;               /* 高亮金色 */
  background: rgba(0, 0, 0, 0.5);   /* 深色半透明胶囊 */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  text-shadow: none;
}
.seat.active .player-chips {
  color: #7CF5AC;               /* 当前行动：亮绿色 */
  border-color: rgba(7, 193, 96, 0.35);
  text-shadow: none;
}
.chip-icon { display: none; }

/* ===== 手牌容器：展示位内两张手牌平行并排，间距 6px，水平居中 ===== */
.hero-hand, .ai-hand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;                      /* 需求：玩家两张手牌间距 6px */
  z-index: 8;                     /* 层级规范：手牌 = 8 */
  pointer-events: none;
  white-space: nowrap;
}
.ai-hand {
  filter: drop-shadow(0 8px 8px rgba(0,0,0,0.5));
}
.hero-hand {
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.55));   /* 手牌下方投影：营造「放在桌面上」的实感 */
}

/* ===== 扑克牌：纸张质感牌面（非纯白，2:3 比例，浮于桌面） ===== */
.hole-card,
.card-front {
  width: 80px;
  height: 120px;                                       /* 与 80px 宽构成 2:3 */
  border-radius: 6px;                                  /* 卡片牌面统一 6px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.15);                  /* 极细灰色内边框 */
  /* 纯白牌面 */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  /* 投影 + 内侧微暗：真实"浮在桌面上" */
  box-shadow:
    0 8px 16px rgba(0,0,0,0.30),
    inset 0 0 4px rgba(0,0,0,0.06);
  will-change: transform;
  transform: translateZ(0);
  /* 悬停上浮过渡（电脑端） */
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);   /* 标准动画 200ms */
}
/* 点数字体：加粗无衬线，横屏幕清晰不模糊 */
.hole-card .rank,
.card-front .rank {
  font-size: 20px;
  font-weight: 700;             /* 数字统一加粗 700 */
  line-height: 1;
  letter-spacing: -0.02em;
}
.hole-card .suit,
.card-front .suit { font-size: 22px; line-height: 1; }
/* 花色配色：黑色 / 红色（黑=深黑字，红=弃牌红） */
.hole-card.red, .card-front.red { color: var(--c-fold); }
.hole-card.black, .card-front.black { color: var(--card-black); }
.hole-card.red .rank, .card-front.red .rank { color: var(--c-fold); }
.hole-card.red .suit, .card-front.red .suit { color: var(--c-fold); }
.hole-card.black .rank, .card-front.black .rank { color: var(--card-black); }
.hole-card.black .suit, .card-front.black .suit { color: var(--card-black); }

/* 左上角：点数在上、花色在下（默认行内流式排布） */
.hole-card .rank, .card-front .rank,
.hole-card .suit, .card-front .suit {
  position: absolute;
  z-index: 2;
  text-align: center;
}
.hole-card .rank, .card-front .rank { top: 6px; left: 7px; }
.hole-card .suit, .card-front .suit { top: 28px; left: 7px; }

/* 右下角：同样的点数 + 花色，旋转 180° */
.hole-card::before,
.card-front::before {
  content: attr(data-r) "\A" attr(data-s);
  position: absolute;
  right: 7px;
  bottom: 6px;
  white-space: pre;
  text-align: center;
  font-weight: 700;             /* 数字统一加粗 700 */
  font-size: 20px;
  line-height: 1;
  transform: rotate(180deg);
  z-index: 2;
}
.hole-card.red::before, .card-front.red::before { color: var(--c-fold); }
.hole-card.black::before, .card-front.black::before { color: var(--card-black); }
/* 牌背不显示右下角对角符号 */
.hole-card.back::before { content: none; }

/* 中心花色水印：极淡（透明度 0.08） */
.hole-card::after,
.card-front::after {
  content: attr(data-s);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  line-height: 1;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
}
.hole-card.red::after, .card-front.red::after { color: var(--c-fold); }
.hole-card.black::after, .card-front.black::after { color: var(--card-black); }

/* 电脑端悬停：轻微上浮 + 阴影加深 */
@media (hover: hover) and (pointer: fine) {
  /* ⚠️ community-area 加了 !important none（移动端防穿透），这里也必须 !important 才能覆盖 */
  .hero-hand, .ai-hand { pointer-events: auto; }
  .community-area { pointer-events: auto !important; }
  .hole-card:hover, .card-front:hover {
    transform: translateY(-5px);
    box-shadow:
      0 16px 28px rgba(0,0,0,0.85),
      inset 0 0 4px rgba(0,0,0,0.12);
    z-index: 30;
  }
}

/* 玩家手牌：72x108（2:3），展示位内平行并排，不倾斜不重叠。 */
/* 需求：玩家手牌上移，使手牌纵向中心落在牌桌下边边缘（约 1/2 手牌越出牌桌上、1/2 在桌下），
   避免手牌与底部交互按钮、剩余后手信息三者互相遮挡。仅用手牌容器 transform 位移，
   不影响头像位置与外部布局流（头像与手牌共用 .seat-slot 绝对居中，故单独提手牌）。 */
.seat-zone-bottom .seat-bottom .hero-hand {
  transform: translate(-50%, calc(-50% - 160px));
}

.seat-bottom .hero-hand .hole-card {
  position: relative;
  top: 0;
  width: 72px;
  height: 108px;
  transform: none;
}
.seat-bottom .hero-hand .hole-card .rank { font-size: 18px; top: 5px; left: 6px; }
.seat-bottom .hero-hand .hole-card .suit { font-size: 19px; top: 26px; left: 6px; }
.seat-bottom .hero-hand .hole-card::before {
  font-size: 18px;
  right: 6px;
  bottom: 5px;
}
.seat-bottom .hero-hand .hole-card::after { font-size: 46px; }
.seat-bottom .hero-hand .hole-card:nth-child(1) { z-index: 2; }
.seat-bottom .hero-hand .hole-card:nth-child(2) { z-index: 1; }

/* 玩家名字 / 筹码：筹码在信息行下方、手牌上方（金色数字 + 深色胶囊） */
.seat-bottom .player-name { font-size: 13px; }
.seat-bottom .seat-chips-row.player-chips {
  font-size: 17px;
  font-weight: 800;
  color: #FFD700;                 /* 高亮金色 */
  text-shadow: none;
}

/* AI 名字 / 筹码（筹码在展示位上方，名字在下方信息行） */
.seat-top .player-name { font-size: 13px; }
.seat-top .seat-chips-row.player-chips { font-size: 15px; font-weight: 800; }

/* AI 手牌：蓝色牌背，34x51（2:3），叠层显示于头像右下，间距由 .ai-hand 控制 */
.ai-hand .hole-card { width: 34px; height: 51px; }
/* 玩家手牌：60x90（2:3），两张平行并排（间距 6px 由 .hero-hand 控制） */
.seat-bottom .hero-hand .hole-card { width: 60px; height: 90px; }
.seat-bottom .hero-hand .hole-card .rank { font-size: 16px; top: 4px; left: 5px; }
.seat-bottom .hero-hand .hole-card .suit { font-size: 18px; top: 22px; left: 5px; }
.seat-bottom .hero-hand .hole-card::before { font-size: 16px; right: 5px; bottom: 4px; }
.seat-bottom .hero-hand .hole-card::after { font-size: 44px; }
.ai-hand .hole-card .rank { font-size: 11px; top: 3px; left: 3px; }
.ai-hand .hole-card .suit { font-size: 12px; top: 14px; left: 3px; }
.ai-hand .hole-card::before { font-size: 11px; right: 3px; bottom: 2px; }
.ai-hand .hole-card::after { font-size: 26px; }
.ai-hand .hole-card:nth-child(1) { transform: none; z-index: 2; }
.ai-hand .hole-card:nth-child(2) {
  transform: none;
  z-index: 1;
}
/* 牌背：微信绿底 + repeating-linear-gradient 菱形/斜纹几何纹理（规范色） */
.hole-card.back,
.card-back {
  /* 1px 白色内边框 + 6px 圆角 + 几何纹理牌背 */
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 6px;
  background-color: var(--c-green);
  background-image:
    /* 斜纹（透明度 0.15） */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1.5px,
      transparent 1.5px, transparent 8px),
    /* 反向斜纹（透明度 0.15）——两向叠加形成菱形网格 */
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1.5px,
      transparent 1.5px, transparent 8px),
    /* 底色：微信绿到深绿 */
    linear-gradient(135deg, #07C160 0%, #06AD56 50%, #048C46 100%);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.18),
    inset 0 0 8px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
/* 牌背中心菱形徽标（增强厚度与工艺感） */
.hole-card.back::after,
.card-back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 46%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 6px;           /* 卡片牌面统一 6px */
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  opacity: 1;
}

/* 公共牌统一尺寸：与虚线占位框严格一致（70x100），解除扇形倾斜、恒定居中。
   发出的牌必须精确落在对应虚线框位置，绝不放大/错位。 */
.community-area .hole-card,
.community-area .hole-card:nth-child(1),
.community-area .hole-card:nth-child(2) {
  width: 70px;
  height: 100px;
  flex: 0 0 70px;
  max-width: 70px;
  margin: 0;
  transform: none;
  margin-right: 0;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.7),
    inset 0 0 4px rgba(0,0,0,0.1);
}
/* 发牌入场动画期间：保持与占位框同尺寸、同位置（仅做翻转/淡入，不做位移） */
.community-area .hole-card.sliding,
.community-area .hole-card.revealing {
  transform: none;
}
.community-area .hole-card .rank { font-size: 19px; top: 5px; left: 6px; }
.community-area .hole-card .suit { font-size: 21px; top: 26px; left: 6px; }
.community-area .hole-card::before { font-size: 19px; right: 6px; bottom: 5px; }
.community-area .hole-card::after { font-size: 52px; }

/* ===== 下注筹码显示：小胶囊（位于头像与公共牌之间） ===== */
.bet-chip {
  position: absolute;
  width: 50px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);              /* 深色毛玻璃胶囊 */
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #7CF5AC;                               /* 微信亮绿，贴合牌桌暗色场 */
  z-index: 9;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* 硬币图标 */
.bet-chip .coin-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(7,193,96,0.85), rgba(7,193,96,0.55) 62%, rgba(4,140,70,0.9));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.20);
}
.bet-chip.show { opacity: 1; animation: betPop 0.3s cubic-bezier(0.25, 1, 0.5, 1); }   /* 核心动画 300ms */
/* AI 下注：作为座位纵向排列流的独立一行（位于手牌/头像下方、名字上方），
   小胶囊居中，绝不与头像/名字/筹码/手牌重叠。 */
.seat-top .bet-chip {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  translate: none;
  transform: none;
  width: auto;
  min-width: 34px;
  max-width: 64px;
  height: 18px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 7px;
  margin: 2px 0;
  box-sizing: border-box;
  z-index: 13;
}
/* 玩家下注：玩家模块（手牌/头像→信息）上方，朝向底池 */
.seat-bottom .bet-chip {
  bottom: calc(100% + 6px);
  z-index: 13;
}
@keyframes betPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 底池变化动画：胶囊轻微弹跳（300ms） */
.pot-display.bump { animation: potBump 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes potBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 筹码变化动画 */
.player-chips.bump { animation: chipBump 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes chipBump {
  0% { transform: scale(1); }
  50% { color: var(--c-green); transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ===== 摊牌：赢家筹码数字跳动更新（scale 1.2 → 1.0） ===== */
.player-chips.chip-pop { animation: chipPop 0.4s cubic-bezier(0.25, 1, 0.5, 1); }   /* 大型动画 400ms */
@keyframes chipPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.2); color: var(--c-orange); }
  100% { transform: scale(1); }
}

/* ===== 发牌动画系统 ===== */
/* 牌堆：位于牌桌正中心，z-index 50（最高层，发牌起点） */
.deck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 100px;
  margin: -50px 0 0 -35px;   /* 居中 */
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0);
}
.deck.show { opacity: 1; }
/* 牌堆中的单张牌（堆叠成一副） */
.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 6px;           /* 卡片牌面统一 6px */
  background: linear-gradient(135deg, #07C160 0%, #06AD56 50%, #048C46 100%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.30);
  will-change: transform;
}
.deck-card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 6px;           /* 卡片牌面统一 6px */
  border: 1px solid rgba(255,255,255,0.30);
}

/* 洗牌：牌堆快速缩放 + 轻微平移交替（缩短至 90ms，配合发牌提速） */
.deck.shuffling .deck-card { animation: deckShuffle 0.09s cubic-bezier(0.25, 1, 0.5, 1); }   /* 发牌提速：90ms */
.deck-card:nth-child(1) { animation-delay: 0s; }
.deck-card:nth-child(2) { animation-delay: 0.03s; }
.deck-card:nth-child(3) { animation-delay: 0.06s; }
.deck-card:nth-child(4) { animation-delay: 0.09s; }
@keyframes deckShuffle {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(-6px, -3px) scale(1.06) rotate(-3deg); }
  50%  { transform: translate(5px, 3px) scale(0.96) rotate(3deg); }
  75%  { transform: translate(-3px, 2px) scale(1.03) rotate(-2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* 切牌：牌堆分成两半再合并（缩短至 90ms，配合发牌提速） */
.deck.cutting .deck-card:nth-child(1) { animation: deckCutTop 0.09s cubic-bezier(0.25, 1, 0.5, 1); }
.deck.cutting .deck-card:nth-child(2) { animation: deckCutBottom 0.09s cubic-bezier(0.25, 1, 0.5, 1); }
.deck.cutting .deck-card:nth-child(3) { animation: deckCutTop 0.09s cubic-bezier(0.25, 1, 0.5, 1) 0.02s; }
.deck.cutting .deck-card:nth-child(4) { animation: deckCutBottom 0.09s cubic-bezier(0.25, 1, 0.5, 1) 0.02s; }
/* 上半叠：向右分开再合回 */
@keyframes deckCutTop {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(34px, -10px); }
  100% { transform: translate(0, 0); }
}
/* 下半叠：向左分开再合回（产生"交错"切牌感） */
@keyframes deckCutBottom {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(-30px, 8px); }
  100% { transform: translate(0, 0); }
}

/* 飞行中的牌：DOM 预渲染 + WAAPI 在合成器线程驱动（约 126ms）。
   位移一律走 transform: translate3d（GPU 合成层，零重排），绝不触碰 top/left/margin；
   初始 opacity:0，起飞时由关键帧接管淡入 */
.hole-card.flying {
  position: absolute;
  z-index: 50;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  pointer-events: none;
}
/* 飞向 AI 座位的牌采用 AI 手牌尺寸（50×75），与落位后一致 */
.hole-card.flying.card-ai { width: 50px; height: 75px; }
/* 落位回弹：scale 1.1 → 1.0（缩短至 120ms，配合发牌提速） */
.hole-card.landed {
  animation: cardLand 0.12s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 发牌提速：120ms */
}
@keyframes cardLand {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* 玩家底牌翻开：3D rotateY 180°→0°（缩短至 200ms） */
.hole-card.flip-open {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: holeFlipOpen 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 发牌提速：200ms */
}
@keyframes holeFlipOpen {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* 公共牌：从牌堆滑入（滑入时长由 --slide-ms 控制，翻牌 300ms / 转牌·河牌 400ms） */
.community-card.sliding {
  z-index: 5;
  animation: communitySlideIn var(--slide-ms, 300ms) cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 核心动画 300-400ms */
  will-change: transform, opacity;
}
@keyframes communitySlideIn {
  0% {
    transform: translate(var(--slide-x), var(--slide-y)) scale(0.85) rotateY(0deg);
    opacity: 0;
  }
  15% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotateY(0deg); opacity: 1; }
}
/* 公共牌：3D 翻转亮牌（rotateY 180 → 0，300ms） */
.community-card.revealing {
  animation: communityReveal 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 核心动画 300ms */
}
@keyframes communityReveal {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* 烧牌：一张牌背从牌堆飞向桌中并淡出 */
.burn-card {
  position: absolute;
  width: 72px;
  height: 108px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.85);
  background-color: var(--c-green);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.30) 0px, rgba(255,255,255,0.30) 2px,
      transparent 2px, transparent 8px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.26) 0px, rgba(255,255,255,0.26) 2px,
      transparent 2px, transparent 8px),
    linear-gradient(135deg, #07C160 0%, #06AD56 52%, #048C46 100%);
  z-index: 50;
  pointer-events: none;
  animation: burnCard 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 标准动画 200ms */
}
@keyframes burnCard {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--burn-x), var(--burn-y)) scale(0.7) rotate(24deg); opacity: 0; }
}

/* 亮牌：3D 翻转（rotateY 180 → 0） */
.hole-card.reveal {
  animation: cardReveal 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 大型动画 400ms */
}
@keyframes cardReveal {
  0% { transform: rotateY(180deg); opacity: 0.6; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* 弃牌：两张手牌平行向外滑出屏幕 + 透明度 1→0 + 轻微旋转 15°（300ms）
   缓动统一 cubic-bezier（加速离场，终点平滑停住） */
.hole-card.folding {
  animation: foldSlideOut 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 核心动画 300ms */
  will-change: transform, opacity;
}
@keyframes foldSlideOut {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(var(--fold-dir) * -150px), calc(var(--fold-dir) * 210px)) rotate(calc(var(--fold-dir) * 15deg)) scale(0.85); opacity: 0; }
}

/* 弃牌后展示位显示头像（观战态），头像/名字/筹码均不变暗。
   手牌的滑出/飞走由 .folding / .fly-away 动画负责。 */

/* AI 弃牌：两张牌背向屏幕上方/侧边飞走，透明度 1→0（300ms，ease-out）。
   --fly-x 由 JS 设置为 -1/+1，使两张牌略微左右散开。 */
.ai-hand .hole-card.fly-away {
  animation: aiFoldFlyAway 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}
@keyframes aiFoldFlyAway {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% {
    transform: translate(calc(var(--fly-x, 0) * 60px), -190px) rotate(calc(var(--fly-x, 0) * 12deg)) scale(0.8);
    opacity: 0;
  }
}

/* ===== 新版弃牌视觉：手牌**保留原位但变暗置灰**，不再飞走 =====
   v191 起弃牌不再清空/隐藏手牌 DOM，而是加 class 原地展示"这手牌已 fold"。 */
.seat.folded {
  opacity: 0.55;                                    /* 整个座位半透明 */
  filter: grayscale(30%);                           /* 轻微置灰（手牌 + 头像 + 名字） */
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.seat.folded .seat-avatar { filter: grayscale(60%); }   /* 头像额外置灰 */
.seat.folded .seat-name { text-decoration: line-through; opacity: 0.7; }  /* 名字划线 */

/* 手牌容器 + 每张 hole-card：变暗 + 全置灰 */
.hand-container.folded-hand,
.hole-card.folded-hand {
  opacity: 0.35 !important;                         /* 手牌更暗，突出"弃牌"语义 */
  filter: grayscale(100%) brightness(0.85) !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
/* 弃牌后手牌绝对不能再参与任何高亮/胜利脉冲 */
.seat.folded .hole-card.winning-pulse,
.seat.folded.winner-pulse .hole-card { animation: none !important; box-shadow: none !important; }

/* "弃牌"小标签：灰色小徽章，定位在座位信息旁 */
.fold-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  color: rgba(255,255,255,0.7);
  background: rgba(120, 120, 120, 0.55);
  border-radius: 8px;
  letter-spacing: 0.5px;
  user-select: none;
  -webkit-user-select: none;
}

/* 【可见性兜底】持牌座位（has-hand）下的手牌必须绝对可见：
   任何路径残留的弃牌飞走动画类（fly-away/folding，forwards 终态 opacity:0）
   在持牌状态下一律作废——修复「AI 持有手牌却透明不显示」的偶发 Bug。
   注意：不含 .dimmed（摊牌输家变暗是持牌态下的正常演出，不能误伤）。 */
.seat.has-hand .hole-card.fly-away,
.seat.has-hand .hole-card.folding {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-hand .hole-card.winner, .ai-hand .hole-card.winner,
.hero-hand .hole-card.reveal.winner, .ai-hand .hole-card.reveal.winner {
  box-shadow:
    0 0 12px 2px rgba(7,193,96,0.75),
    0 0 0 1px rgba(255,255,255,0.85);
}

/* ===== 摊牌：赢家头像脉冲光环（1000ms 循环） ===== */
.seat.winner-seat .avatar {
  animation: winnerPulse 1s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes winnerPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(7, 193, 96, 0.65),
      0 0 16px rgba(7, 193, 96, 0.38);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(7, 193, 96, 0.90),
      0 0 28px rgba(7, 193, 96, 0.60);
    transform: scale(1.06);
  }
}
/* ===== 摊牌：赢家手牌上方浮现牌型文字（绿色高亮） ===== */
.hand-name-badge {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%) scale(0.6);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-green);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  animation: handNamePop 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 核心动画 300ms */
}
@keyframes handNamePop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  60% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ===== 筹码移动动画：小圆片沿贝塞尔曲线飞向底池/赢家 ===== */
.chip-fly {
  position: absolute;
  z-index: 100; /* 需求 5：筹码飞行期间层级最高 */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3ddc84 0%, var(--c-green) 55%, #06AD56 80%, #048C46 95%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 2px 8px rgba(0,0,0,0.20), inset 0 1px 2px rgba(255,255,255,0.35);
  pointer-events: none;
  will-change: transform, opacity;
}
.chip-fly::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(232,232,232,0.35);
}
/* 默认降落点（--to-x/--to-y）；弧线由 JS 逐帧插值 + 抬升实现 */
@keyframes chipFlyArc {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
@keyframes chipFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--to-x), var(--to-y)) scale(0.5); opacity: 0; }
}

.thinking-indicator { display: none !important; }

/* ===== 行动反馈 ===== */
/* 行动气泡：紧贴对应玩家头像/手牌旁的小字提示，深色半透明底 + 微弱橙色描边，
   14px 字号；显示 1.5s 后淡出。绝对定位于座位中轴线，不遮挡公共牌与底池。 */
.action-bubble {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  box-sizing: border-box;
  max-width: 140px;
  padding: 3px 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #FFFFFF;
  background: rgba(15, 17, 22, 0.72);      /* 深色毛玻璃背景 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  transform-origin: center bottom;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 30;                             /* 浮于牌桌/牌之上，仍低于筹码飞行 */
}
/* AI 头像在上方 → 气泡锚定【头像左侧】，与右侧下注胶囊分列两侧，
   垂直居中对齐头像中线，绝不向下侵入公共牌区 */
.seat-top .action-bubble {
  left: auto;
  right: calc(100% + 15px);
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  transform: translateY(-50%) scale(0.9);
}
.seat-top .action-bubble.show { transform: translateY(-50%) scale(1); }
/* 玩家头像在下方 → 气泡出现在其上方（朝向公共牌但不重叠） */
.seat-bottom .action-bubble { bottom: calc(100% + 30px); transform: translateY(50%) scale(0.9); }

.action-bubble.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.seat-bottom .action-bubble.show { transform: translateY(50%) scale(1); }

/* 动作类型配色（描边/文字微调），保持深色底的一致质感（牌桌内部保留暗色） */
.action-bubble.b-fold { color: #e8a0a0; border-color: rgba(198, 40, 40, 0.75); }
.action-bubble.b-call { color: #a8e0a8; border-color: rgba(27, 94, 32, 0.75); }
.action-bubble.b-raise { color: #8ec5ff; border-color: rgba(25, 118, 210, 0.7); }
.action-bubble.b-allin { color: #8ec5ff; border-color: rgba(25, 118, 210, 0.9); font-weight: 700; }
.action-bubble.b-check { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); }


/* ===== 摊牌牌型小框：位于头像下方，灰色圆角框（宽度不超过头像直径 60px） ===== */
.hand-type-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  transform-origin: center top;
  box-sizing: border-box;
  /* 摊牌对比强化：框体放大、允许超过头像宽度，更加醒目 */
  max-width: 120px;
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;             /* 摊牌牌型标签：加粗醒目 */
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #FFFFFF;
  background: rgba(15, 17, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px;          /* 扁平小圆角 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),   /* 标准动画 200ms */
              box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* AI 牌型框：锚定座位模块底部内侧（padding-bottom 之内），绝不侵入公共牌区 */
.seat-top .hand-type-box { top: auto; bottom: 22px; max-width: 120px; }
.seat-bottom .hand-type-box { bottom: calc(100% + 46px); max-width: 140px; }
/* 显示态 */
.hand-type-box.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* 赢家：绿色边框发光 + 文字绿色加粗（需求 5） */
.hand-type-box.winner {
  background: rgba(27, 94, 32, 0.94);
  border-color: rgba(7, 193, 96, 0.95);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow:
    0 0 14px rgba(7, 193, 96, 0.65),
    0 0 0 1px rgba(7, 193, 96, 0.55) inset;
  animation: handTypeWinner 1s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes handTypeWinner {
  0%, 100% { box-shadow: 0 0 12px rgba(7,193,96,0.55), 0 0 0 1px rgba(7,193,96,0.45) inset; }
  50% { box-shadow: 0 0 22px rgba(7,193,96,0.95), 0 0 0 1px rgba(7,193,96,0.75) inset; }
}
/* 输家 / 弃牌：灰色小框，整体变暗（需求 5） */
.hand-type-box.loser {
  background: rgba(15, 17, 22, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--c-gray);
  opacity: 0.5;
}
.hand-type-box.loser.show { opacity: 0.5; }

/* ===== 摊牌：手牌原地 3D 翻转（rotateY 180 → 0，400ms，双方向） ===== */
.hole-card.flip-3d {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* 提高特异性：覆盖 .seat-bottom .hero-hand .hole-card 的 transform: none */
.hole-card.flip-3d.flipping {
  animation: holeFlip3d 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;   /* 大型动画 400ms */
}
@keyframes holeFlip3d {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* ===== 操作按钮区（圆形拟物按钮：弃牌/过牌/加注） =====
   ⚠️ 放在 #gameDetail → .table-wrapper → .seat-zone-bottom 内：
      按钮在 hero 手牌正下方，并和手牌保持同一旋转方向。 */
.action-bar {
  position: absolute !important;      /* 位于 #gameDetail → .seat-zone-bottom 内，随牌桌一起旋转/缩放 */
  left: 50% !important;
  bottom: 10px !important;            /* hero 手牌正下方、画布最底边 */
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
}
/* ⚠️ 覆盖 display:flex !important：hidden 属性 + 强制内联 style 双重保护 */
.action-bar[hidden],
.action-bar[style*="display: none"] {
  display: none !important;
}
/* ===== 终极防护：非牌桌模式（大厅/资料/数据分析等任何页面）绝不显示对局操作栏 =====
   这条规则不依赖 JS 执行时序：只要 body 上没有 table-mode 类，按钮就不可能显示。
   任何退出路径漏调 setTableMode(false) / forceHideTableActions 时，这里兜底。 */
body:not(.table-mode) .action-bar,
body:not(.table-mode) .raise-panel {
  display: none !important;
}
/* PC/横屏保护：桌面端没有伪横屏旋转，操作栏固定在视口底部居中，
   限制最大宽度与安全间距，绝不让 fixed 定位把按钮甩到屏幕外。 */
@media (hover: hover) and (pointer: fine) {
  .action-bar:not(.portrait) {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    max-width: 92vw !important;
    flex-wrap: nowrap !important;
  }
}
/* 伪横屏：按钮在画布内 hero 手牌正下方横排，随牌桌一起旋转（与手牌同向）。 */
.action-bar.portrait {
  right: auto !important;
  top: auto !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
}
/* 伪横屏：按钮略收小 */
.action-bar.portrait .action-btn {
  width: 58px !important;
  height: 58px !important;
  font-size: 14px !important;
}
.action-bar.anim-locked { opacity: 0; pointer-events: none; }   /* 发牌/动画锁定：整栏完全隐藏且不可点 */
/* 操作栏整体透明度过渡（非玩家回合 200ms 淡入淡出） */
.action-bar { transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1); }

/* 圆形按钮通用：正圆 + 厚重复合阴影 + 玻璃质感白色内高光 */
.action-btn {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  padding: 0;                   /* 正圆不设内边距 */
  border: none;
  border-radius: 50%;           /* 正圆 */
  font-size: 16px;              /* 需求：统一 16px */
  font-weight: 800;             /* 需求：加粗 */
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;       /* 文字纵向堆叠（金额可换行） */
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.4px;
  position: relative;
  /* 玻璃质感：顶部白色内高光 + 底部暗内阴影 + 浅灰外阴影（适配白底） */
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 6px 10px rgba(255,255,255,0.18),
    inset 0 -5px 10px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.18),
    0 3px 6px rgba(0,0,0,0.12);
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 按下：缩小 5% + 阴影收敛 */
.action-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.16),
    inset 0 -2px 6px rgba(0,0,0,0.4),
    0 3px 6px rgba(0,0,0,0.16),
    0 1px 3px rgba(0,0,0,0.12);
}
/* 非玩家回合：变暗且禁止点击 */
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 非玩家回合：整栏淡出至 0.4 并禁止指针事件 */
.action-bar.turn-off { opacity: 0.4; pointer-events: none; }
/* 玩家弃牌/淘汰后：整栏隐藏（不显示半透明的行动按钮） */
.action-bar.folded { display: none !important; }
/* 弃牌按钮：面对无下注时弱化（仍可点击） */
.action-btn.fold-btn.dim { opacity: 0.7; }
.action-btn[hidden] { display: none !important; }
.action-btn.btn-hidden {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
.btn-label { font-size: 16px; font-weight: 800; line-height: 1.1; }
.btn-amount { font-size: 14px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* 弃牌：深红渐变 */
.fold-btn {
  background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
}
/* 弃牌按钮外层容器：与按钮同尺寸，作为遮罩的定位父级（不改变 action-bar 的 flex 排布） */
.fold-btn-wrapper {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 倒计时遮罩：conic-gradient 扇形随 --countdown-progress 收缩（360deg=全覆盖 → 0deg=消失）
   pointer-events:none 保证绝不拦截弃牌点击；遮罩位于按钮之下文字层之上不影响文字（文字 z-index 更高） */
.fold-btn-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(80, 80, 80, 0.55) var(--countdown-progress, 360deg), transparent 0);
  pointer-events: none;           /* 需求：绝对不能拦截用户点击 */
  z-index: 1;                     /* 覆盖按钮底色，但不遮挡按钮文字 */
  opacity: 0;                     /* 默认隐藏；轮到玩家行动时由 JS 置 1 */
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  /* 不加 will-change：国产浏览器内核上会导致按钮渲染透明 */
}
/* 轮到玩家行动：显示遮罩（JS 同时逐帧更新 --countdown-progress） */
.fold-btn-wrapper.counting .fold-btn-mask { opacity: 1; }
/* ⚠️ 不给按钮组加 will-change：实测在部分国产浏览器内核上会导致按钮渲染透明 */
/* 按钮文字层：置于遮罩之上，确保「弃牌」始终可见 */
.fold-btn .btn-label { position: relative; z-index: 2; }
/* 无下注时弃牌按钮隐藏（.btn-hidden）：容器与遮罩同步隐藏，保持布局占位不跳动 */
.fold-btn-wrapper:has(.btn-hidden) .fold-btn-mask { opacity: 0 !important; }
/* 过牌按钮外层容器：与按钮同尺寸，作为遮罩的定位父级（不改变 action-bar 的 flex 排布） */
.check-btn-wrapper {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 过牌倒计时遮罩：与弃牌键同款灰色 conic-gradient 扇形随 --countdown-progress 收缩
   pointer-events:none 保证绝不拦截过牌点击；遮罩位于按钮之下文字层之上不影响文字 */
.check-btn-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(80, 80, 80, 0.55) var(--countdown-progress, 360deg), transparent 0);
  pointer-events: none;           /* 需求：绝对不能拦截用户点击 */
  z-index: 1;                     /* 覆盖按钮底色，但不遮挡按钮文字 */
  opacity: 0;                     /* 默认隐藏；轮到玩家行动且为过牌态时由 JS 置 1 */
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  /* 不加 will-change：国产浏览器内核上会导致按钮渲染透明 */
}
/* 轮到玩家行动 + 过牌态（面对无人下注）：显示遮罩（JS 同时逐帧更新 --countdown-progress） */
.check-btn-wrapper.counting .check-btn-mask { opacity: 1; }
/* 按钮文字层：置于遮罩之上，确保「过牌」始终可见 */
.call-btn .btn-label { position: relative; z-index: 2; }
/* 无下注时过牌按钮隐藏（.btn-hidden）：容器与遮罩同步隐藏，保持布局占位不跳动 */
.check-btn-wrapper:has(.btn-hidden) .check-btn-mask { opacity: 0 !important; }
/* 过牌 / 跟注 / 全下：深绿渐变 */
.call-btn.check-mode,
.call-btn.show-call,
.call-btn.allin-mode {
  background: linear-gradient(180deg, #388e3c 0%, #1b5e20 100%);
}
/* 加注：蓝色渐变，直径 66px 与弃牌/跟注一致（保留玻璃质感内高光） */
.raise-btn {
  width: 66px;
  height: 66px;
  font-size: 16px;
  background: linear-gradient(180deg, #1976d2 0%, #0d47a1 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.55),
    inset 0 6px 10px rgba(255,255,255,0.18),
    inset 0 -5px 10px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.18),
    0 3px 6px rgba(0,0,0,0.12);
}
.raise-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.16),
    inset 0 -2px 6px rgba(0,0,0,0.4),
    0 3px 6px rgba(0,0,0,0.16),
    0 1px 3px rgba(0,0,0,0.12);
}
.raise-btn .btn-label { font-size: 16px; }
.raise-btn .btn-amount { font-size: 15px; }

/* ===== 牌桌页竖屏提示遮罩 已废弃（v187） =====
   原来竖屏时弹遮罩让用户旋转手机 → 现在牌桌进入时自动给 .table-wrapper
   加 rotate(90deg) + scale 用交换宽高，竖拿手机牌桌自动横着铺满。
   DOM 保留在 index.html 里，但 display: none 永远隐藏；如需要彻底删除可一并移除。 */
#rotate-overlay,
.rotate-overlay-inner,
.rotate-phone,
.rotate-text,
.rotate-sub,
.rotate-tip {
  display: none !important;
}

/* ===== 牌桌右上角：模式 / 牌局编号标签（填补角落空白） ===== */
.table-corner {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 40;
  pointer-events: none;
}
.corner-tag {
  font-size: 13px;
  font-weight: 400;             /* 小字（角标）：正常 400 */
  letter-spacing: 0.4px;
  color: var(--c-gray);
  padding: 4px 11px;
  border-radius: 12px;          /* 胶囊/气泡统一 12px */
  background: var(--c-card);
  border: 1px solid var(--c-line);
  box-shadow: 0 3px 9px rgba(0,0,0,0.08);
}
.corner-tag.mode { color: var(--c-green); border-color: rgba(7,193,96,0.30); }
.corner-tag.room span { color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ===== 状态指示胶囊（延时卡 / Reback）：固定于屏幕右下角，竖排右对齐 =====
   避开中央公共牌/底池与底部操作按钮，绝不重叠；z-index 低于加注面板。 */
/* 状态指示容器：固定于屏幕右下角，竖排右对齐；z-index 低于加注面板(200) */
.status-corner {
  position: absolute;             /* 锚定详情页（#gameDetail），随详情页一同显示/隐藏 */
  bottom: 20px;                 /* 距详情页底 20px，避开底部操作按钮 */
  right: 20px;                  /* 距详情页右 20px（#gameDetail 左右即视口左右） */
  display: flex;
  flex-direction: column;       /* 两个胶囊竖排 */
  gap: 8px;
  align-items: flex-end;        /* 右对齐 */
  z-index: 30;                  /* 低于加注面板(200)，可被其覆盖 */
  pointer-events: none;
}
.status-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink);
  padding: 4px 10px;            /* 需求：内边距 4px 10px */
  border-radius: 6px;           /* 需求：浅灰小框圆角 6px */
  letter-spacing: 0.3px;
  width: max-content;           /* 宽度自适应内容，保证文字完整显示不被截断 */
  max-width: none;              /* 取消旧的 100px 限宽（会导致 "Reback: ..." 截断） */
  box-sizing: border-box;
  /* 不使用 overflow:hidden / text-overflow:ellipsis —— 需求要求完整显示文字 */
  background: var(--c-card);      /* 需求：浅灰背景 */
  border: 1px solid var(--c-line);/* 需求：浅灰边框 */
  box-shadow: 0 4px 11px rgba(0,0,0,0.08);
  white-space: nowrap;          /* 保持单行，但不裁剪 */
}
.status-pill span { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.status-pill.dim { opacity: 0.4; }
/* 延时卡胶囊：浅灰小框（与 Reback 样式统一）
   可见且可点击的主入口：放开父容器 .status-corner 的 pointer-events:none */
#pillDelay {
  color: var(--c-ink);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  box-shadow: 0 4px 11px rgba(0,0,0,0.08);
  pointer-events: auto;         /* 覆盖 .status-corner 的 none，允许点击 */
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#pillDelay:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.14); }
#pillDelay:active { transform: translateY(0); }
/* 不可用（非玩家回合 / 已用尽）：变暗且不响应点击 */
#pillDelay.dim { pointer-events: none; cursor: default; }
/* 数字跳动更新（300ms） */
#pillDelay.bump { animation: delayBump 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes delayBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* Reback 小框：浅灰底、灰色边框、深色文字；已用/已关闭=灰字 */
#pillReback {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-ink);
}
#pillReback.available {
  color: var(--c-ink);
  border-color: var(--c-line);          /* 可用状态边框浅灰 */
}
#pillReback.gray {
  color: var(--c-gray);                 /* 已用/已关闭文字灰色 */
  border-color: var(--c-line);          /* 已用/已关闭边框浅灰 */
  opacity: 1;
}

/* ===== 手牌胜率 / 当前牌型 小标识（玩家手牌下方） ===== */
.equity-badge {
  position: absolute;
  top: calc(100% + 6px);          /* 玩家信息下方（座位模块底部） */
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;             /* 数字统一加粗 700 */
  color: var(--c-green);
  padding: 3px 11px;
  border-radius: 12px;          /* 胶囊/气泡统一 12px */
  letter-spacing: 0.3px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  white-space: nowrap;
  z-index: 12;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.equity-badge.show { opacity: 1; }

/* ===== 弹窗 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;                 /* 层级规范：弹窗提示 = 999 */
  transform-origin: center center;
  /* 不加 will-change/backface-visibility：全屏层钉 GPU 合成会在手机浏览器上频闪 */
}
.modal-overlay.show { display: flex; }
/* 伪横屏时弹窗也跟着整体转 90°，保持阅读方向一致。
   尺寸一律用 JS 实测的 --app-h/--app-w，不用裸 100vh/100vw（地址栏撑爆同理）。 */
.modal-overlay.portrait {
  z-index: 10000;                /* 盖过 #gameDetail 的 9999 */
  width: var(--app-h, 100vh);
  height: var(--app-w, 100vw);
  left: 50%;
  top: 50%;
  right: unset;                  /* 关键！覆盖基础 inset:0 的 right:0，否则左右拉扯拉崩盒子 */
  bottom: unset;                 /* 同上覆盖 bottom:0 */
  margin-left: calc(var(--app-h, 100vh) / -2);
  margin-top: calc(var(--app-w, 100vw) / -2);
  transform: rotate(90deg);
}

/* 结算弹窗（含筹码走势图）：强制竖屏正立显示，不跟随伪横屏旋转。
   牌桌是横着的，但结算页是给玩家阅读的，方向必须和手机握持方向一致。
   几何仍用 JS 实测的 --app-w/--app-h，避免地址栏把盒子撑破。 */
#gameOverModal.portrait {
  width: var(--app-w, 100vw);
  height: var(--app-h, 100vh);
  left: 50%;
  top: 50%;
  right: unset;
  bottom: unset;
  margin-left: calc(var(--app-w, 100vw) / -2);
  margin-top: calc(var(--app-h, 100vh) / -2);
  transform: none;
  z-index: 10000;
}
#gameOverModal.portrait .modal {
  width: 90%;
  max-width: 380px;
  max-height: calc(var(--app-h, 100vh) - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.reback-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  background: rgba(30, 32, 48, 0.92);
  border: 1px solid rgba(255, 200, 50, 0.35);
  color: #fff;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  max-width: calc(var(--app-w, 100vw) - 32px);
}
.reback-toast.show {
  opacity: 1;
  animation: reback-toast-in 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.reback-toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  animation: reback-icon-spin 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.reback-toast-msg {
  line-height: 1.4;
}
@keyframes reback-toast-in {
  from { transform: translate(-50%, -75%); opacity: 0; }
  to   { transform: translate(-50%, -60%); opacity: 1; }
}
@keyframes reback-icon-spin {
  0%   { transform: rotate(0deg) scale(0.6); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 伪横屏（竖屏手机）下 Reback Toast 也跟着旋转对齐 */
.reback-toast.portrait {
  /* 复用 modal-overlay 的旋转：顺时针 90°，让文字在用户眼里保持正向 */
  width: auto;
  max-width: calc(var(--app-h, 100vh) - 32px);
  transform: translate(-50%, -60%) rotate(90deg);
}
.reback-toast.portrait.show {
  transform: translate(-50%, -60%) rotate(90deg);
}
.modal {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 12px;          /* 弹窗统一 12px */
  padding: 20px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: var(--c-ink);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.modal-body { text-align: center; color: var(--c-ink); margin: 16px 0; line-height: 1.6; font-size: 15px; }

/* ===== 加注面板（横向滑块 + 加减号） =====
   ⚠️ 终极防护：每一个属性全加 !important！
   ⚠️ 必须在 #gameDetail 外部（body 直接子元素），position:fixed 零 rotate 继承！ */
.raise-panel {
  position: fixed !important;
  bottom: 120px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(94vw, 560px) !important;
  box-sizing: border-box !important;
  z-index: 999998 !important;              /* 仅次于 action-bar(999999) */
  display: none !important;               /* 默认隐藏 */
  pointer-events: auto !important;        /* 必须能点！ */
}
/* 伪横屏：加注面板整体 rotate(90deg)，与 hero 手牌同方向；居中弹出，不压操作按钮 */
.raise-panel.portrait {
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  bottom: auto !important;
  /* 先居中位移再旋转：旋转后视觉中心正好落在屏幕中心 */
  transform: translate(-50%, -50%) rotate(90deg) !important;
  /* 旋转后横向长度对应物理屏的长边，用 vh 度量 */
  width: min(84vh, 620px) !important;
  max-height: 92vw !important;
  overflow-y: auto !important;
}
.raise-panel.show { display: block !important; }
.raise-panel[hidden] { display: none !important; }

.raise-drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  box-sizing: border-box;
  background: var(--c-bg);              /* 白色背景 */
  border: 1px solid var(--c-line);      /* 极浅灰描边 */
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16);
  animation: raiseDrawerIn 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;             /* 绝不出现滚动条 */
}
@keyframes raiseDrawerIn {
  0%   { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* 第一排：底池比例快捷按钮（4 等分横排） */
.raise-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.quick-bet-btn {
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--c-line);         /* 浅灰边框 */
  border-radius: 17px;                     /* 精致胶囊 */
  background: var(--c-card);               /* 浅灰底 */
  color: var(--c-ink);                     /* 深色文字 */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.quick-bet-btn:hover {
  background: #EFEFEF;
  border-color: rgba(7,193,96,0.5);
  color: var(--c-green);
}
.quick-bet-btn:active { transform: scale(0.94); }
/* 点击生效瞬间：绿色高亮闪烁反馈（配合 JS 点击时播放音效） */
.quick-bet-btn.flash {
  animation: quickFlash 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes quickFlash {
  0%   { background: var(--c-green); color: #FFFFFF; border-color: var(--c-green); box-shadow: 0 0 14px rgba(7,193,96,0.55); }
  100% { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); box-shadow: none; }
}

/* 第二排：当前选中金额大数字 + 提示小字 */
.raise-amount-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.raise-amount-big {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;      /* 数字等宽，跳动时不抖动 */
}
.raise-percent {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gray);
  white-space: nowrap;
  transition: color 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.raise-percent.error { color: var(--c-fold); }
.raise-drawer.shake { animation: raiseShake 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes raiseShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}

/* 第三排：【-】横向滑块【+】 */
.raise-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 加减号圆形按钮：微信绿字符 + 按压缩放反馈 */
.raise-step-btn {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-green);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s, background 0.15s, box-shadow 0.15s;
}
.raise-step-btn:active {
  transform: scale(0.88);                  /* 按压反馈 */
  background: #E6F7EE;
  box-shadow: 0 0 0 3px rgba(7,193,96,0.15);
}

/* 横向滑块：加粗轨道（8px）+ 微信绿发光圆钮（28px） */
.raise-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;                            /* 增大可触区域，拖动手感好 */
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: none;                      /* 面板内拖动时禁用页面滚动手势 */
}
.raise-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--c-line);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
}
.raise-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;                       /* (8px 轨道 - 28px 圆钮)/2，垂直居中 */
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3ddc84 0%, var(--c-green) 55%, #06AD56 100%);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 10px rgba(7,193,96,0.55), 0 3px 6px rgba(0,0,0,0.20);
  cursor: grab;
}
.raise-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.raise-slider::-moz-range-track {
  height: 8px;
  background: var(--c-line);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
}
.raise-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3ddc84 0%, var(--c-green) 55%, #06AD56 100%);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 10px rgba(7,193,96,0.55), 0 3px 6px rgba(0,0,0,0.20);
  cursor: grab;
}

/* 第四排：弃牌 / 跟注 / 加注（与底部操作栏同色体系） */
.raise-action-row {
  display: flex;
  gap: 10px;
}
.raise-act-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.raise-act-btn:active { transform: scale(0.95); }
.raise-act-btn.fold {
  background: var(--c-card);
  color: var(--c-ink);
}
.raise-act-btn.call {
  background: #E6F7EE;
  color: var(--c-green);
  border-color: rgba(7,193,96,0.4);
}
.raise-act-btn.confirm {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(7,193,96,0.28);
}
.raise-act-btn.confirm:active {
  box-shadow: 0 3px 8px rgba(7,193,96,0.22);
}

/* 确认 / 取消按钮 */
.modal-btn {
  height: 30px;
  padding: 0 16px;
  border: none;
  border-radius: 15px;          /* 胶囊 */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.modal-btn:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.cancel-btn { background: var(--c-gray); }
.confirm-btn { background: var(--c-green); }

/* 加注面板为固定定位浮层（在操作按钮上方），手牌展示位在按钮下方，因此面板不会遮挡展示位。
   面板打开时把牌桌内中央堆叠移到桌内上方，保证公共牌/底池不被面板遮住。 */
body.raise-open .center-zone {
  align-items: flex-start;
}
body.raise-open .center-stack {
  margin-top: 12px;
  transform: none;               /* 面板打开时取消偏上位移，改由 align-items:flex-start 定位 */
}
body.raise-open .pot-zone {
  margin-top: 4px;
}
body.raise-open .bet-line {
  display: none;
}

/* ===== 特殊收池奖励（27o / 四条 / 同花顺 / 皇家同花顺） ===== */
.bonus-overlay {
  position: absolute;           /* 锚定详情页（#gameDetail），随详情页一同显示/隐藏 */
  inset: 0;
  background: rgba(7,193,96,0.10);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;                 /* 彩蛋闪光：高于加注面板(200)，低于弹窗(999) */
  overflow: hidden;
}
.bonus-overlay.show { display: flex; animation: bonusFlash 0.5s; }
.bonus-text { font-size: 48px; font-weight: 700; color: var(--c-green); text-shadow: 0 0 24px rgba(7,193,96,0.55); position: relative; z-index: 2; text-align: center; }
/* 按奖励类型着色：皇家(金) / 同花顺(紫) / 四条(红) / 27o(绿) */
.bonus-overlay.royal .bonus-text { color: #FFC93C; text-shadow: 0 0 28px rgba(255,201,60,0.7); }
.bonus-overlay.royal { background: rgba(255,201,60,0.12); }
.bonus-overlay.straight .bonus-text { color: #B072FF; text-shadow: 0 0 28px rgba(176,114,255,0.7); }
.bonus-overlay.straight { background: rgba(176,114,255,0.12); }
.bonus-overlay.quads .bonus-text { color: #FF5A5A; text-shadow: 0 0 28px rgba(255,90,90,0.7); }
.bonus-overlay.quads { background: rgba(255,90,90,0.12); }
.bonus-overlay.royal.show { animation: bonusFlashRoyal 0.5s; }
@keyframes bonusFlashRoyal {
  0%, 100% { background: rgba(255,201,60,0.12); }
  50% { background: rgba(255,201,60,0.30); }
}
@keyframes bonusFlash {
  0%, 100% { background: rgba(7,193,96,0.10); }
  50% { background: rgba(7,193,96,0.26); }
}

/* 摊牌胜负粒子专用态：只展示粒子，无文字、无底色闪光、不拦截点击（点击可跳过演出） */
.bonus-overlay.fx-only { background: transparent; animation: none; pointer-events: none; }
.bonus-overlay.fx-only .bonus-text { display: none; }

/* 金色粒子：以中心为原点向外扩散，2 秒后由 JS 清空 */
.bonus-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bonus-particle {
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFD54A;
  box-shadow: 0 0 10px rgba(255,213,74,0.9);
  animation: bonusParticle 1.6s ease-out forwards;
}
@keyframes bonusParticle {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

/* 赢家头像旁奖励徽章 */
.bonus-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #1a1a1a; background: linear-gradient(135deg, #FFE9A8, #FFC93C);
  box-shadow: 0 0 14px rgba(255,201,60,0.85);
  z-index: 60; animation: bonusBadgeIn 0.35s ease-out;
}
.bonus-badge.straight_flush { color: #fff; background: linear-gradient(135deg, #C79BFF, #8E44FF); box-shadow: 0 0 14px rgba(176,114,255,0.85); }
.bonus-badge.four_of_a_kind { color: #fff; background: linear-gradient(135deg, #FF8A8A, #E53935); box-shadow: 0 0 14px rgba(255,90,90,0.85); }
.bonus-badge.b27o { color: #06281a; background: linear-gradient(135deg, #8CF0B8, #07C160); box-shadow: 0 0 14px rgba(7,193,96,0.85); }
@keyframes bonusBadgeIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* 性能降级：仅关闭闪光动画；收池奖励/胜负粒子保留（36 粒 transform+opacity 开销极低，产品要求必须可见） */
.perf-degraded .bonus-overlay.show { animation: none; }

/* ===== 性能降级模式（需求 3：检测到帧率 < 30fps 时自动开启） =====
   关闭装饰性/粒子类动画（无限循环脉冲、背光呼吸、彩蛋闪光、噪点叠加），
   保留核心功能动画（发牌、翻牌、筹码位移、底池跳动）的位移与淡入淡出。
   由 JS 在 <html> 上添加 .perf-degraded 类触发。 */
.perf-degraded .seat.winner-seat .avatar,
.perf-degraded .hand-type-box.winner,
.perf-degraded .timer-ring.warning,
.perf-degraded .ambient-light {
  animation: none !important;             /* 关闭无限循环的装饰动画 */
}
/* 赢家高亮降级为静态绿框（保留胜负可辨识度，去掉脉冲开销） */
.perf-degraded .seat.winner-seat .avatar {
  box-shadow: 0 0 14px 3px rgba(7,193,96,0.85), 0 0 0 2px rgba(7,193,96,0.7);
}
.perf-degraded .hand-type-box.winner {
  box-shadow: 0 0 10px rgba(7,193,96,0.7), 0 0 0 1px rgba(7,193,96,0.55) inset;
}
/* 降级模式下倒计时不用闪烁（省开销），保留静态加粗，确保依然醒目可读。
   不写 filter: drop-shadow（滤镜重栅格化=频闪根源）。 */
.perf-degraded .timer-ring.warning .timer-text {
  color: #FFFFFF;
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(7,193,96,0.95),
    0 0 20px rgba(7,193,96,0.6),
    0 2px 6px rgba(0,0,0,0.95);
}
/* 彩蛋闪光降级为静态淡背景，不再闪烁 */
.perf-degraded .bonus-overlay.show { animation: none; background: rgba(7,193,96,0.18); }
/* 隐藏纯装饰性元素（桌面噪点、桌面暗角晕影、筹码内圈虚线），减少合成层负担 */
.perf-degraded .table-felt::before,
.perf-degraded .chip-fly::after {
  display: none;
}

/* ===== 初始化加载遮罩（旋转扑克牌 + 进度文字；加载完成后 300ms 淡出） ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 深灰渐变背景：进局加载保护期间完全遮住牌桌，任何牌桌元素都不可见 */
  background: radial-gradient(circle at 50% 40%, #2b2f36 0%, #16191e 55%, #0b0d10 100%);
  z-index: 10000;                      /* 高于牌桌全屏层(9999)，进局加载期间始终盖住牌桌 */
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);       /* 淡出 300ms */
}
.loading-overlay.hide { opacity: 0; pointer-events: none; }
.loading-overlay.hidden { display: none; }

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* 旋转的扑克牌：以 transform 驱动（合成层，60fps 友好） */
.loading-card {
  width: 64px;
  height: 92px;
  border-radius: 6px;           /* 卡片牌面统一 6px */
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F7F7 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loadingCardSpin 1.1s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  will-change: transform;
}
.loading-card-suit {
  font-size: 34px;
  line-height: 1;
  color: var(--c-green);
  text-shadow: none;
}
@keyframes loadingCardSpin {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

.loading-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #eef1f5;               /* 深色背景上改用浅色文字 */
}
.loading-percent {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--c-green);
  font-variant-numeric: tabular-nums;
}
/* 加载失败提示：替换旋转牌与进度（错误态由 JS 加类 .loading-failed 触发） */
.loading-error {
  display: none;
  max-width: 240px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #ff6b6b;
}
.loading-overlay.loading-failed .loading-card,
.loading-overlay.loading-failed .loading-bar,
.loading-overlay.loading-failed .loading-percent { display: none; }
.loading-overlay.loading-failed .loading-error { display: block; }

/* 进度条：宽度用 transform: scaleX 驱动，避免动画 width（布局属性） */
.loading-bar {
  width: 168px;
  height: 4px;
  border-radius: 12px;          /* 胶囊/气泡统一 12px */
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.loading-bar-fill {
  width: 100%;
  height: 100%;
  border-radius: 12px;          /* 胶囊/气泡统一 12px */
  background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);   /* 标准动画 200ms */
}

/* ===== AI 思考中气泡：已按需求删除（多余文字气泡，画面保持干净） ===== */

/* ===== 错误/状态提示条（半透明、居中、不遮挡核心信息） =====
   水平居中、贴在牌桌上方空白区，避开公共牌/底池/手牌等核心信息；
   半透明背景 + 毛玻璃，pointer-events:none 不拦截任何交互。 */
.error-toast {
  position: fixed;
  left: 50%;
  top: 96px;                       /* 顶部状态栏之下、牌桌核心区之上 */
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  z-index: 120;                    /* 高于行动气泡(20)/头像(10)，低于加注面板(200) */
  box-sizing: border-box;
  max-width: min(86vw, 420px);
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 12px;
  color: #FFFFFF;
  background: var(--c-fold);                    /* 暗红 */
  border: 1px solid var(--c-fold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;                          /* 绝不拦截点击 */
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);  /* 淡入淡出 300ms */
  will-change: opacity, transform;
}
.error-toast.show {
  opacity: 0.95;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* 信息类（重连/思考超时等中性提示）：深灰 */
.error-toast.info {
  color: #FFFFFF;
  background: #4A4A4A;
  border-color: #4A4A4A;
}
/* 成功/恢复类：微信绿 */
.error-toast.ok {
  color: #FFFFFF;
  background: var(--c-green);
  border-color: var(--c-green);
}

/* ===== 自动使用延时卡：屏幕居中提示框 ===== */
.auto-delay-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 150;                    /* 高于牌桌与行动气泡，低于加注面板(200) */
  box-sizing: border-box;
  max-width: min(80vw, 360px);
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.4;
  text-align: center;
  color: #FFFFFF;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid #E8A33D;       /* 橙色细边框 */
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;            /* 绝不拦截点击 */
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);   /* 淡入淡出 300ms */
  will-change: opacity, transform;
}
.auto-delay-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}



/* ===== 紧凑模式：低高度视口（≤700px）下等比缩小座位与牌桌内部元素 ===== */
@container table-design (max-height: 700px) {
  /* —— 牌桌本体：低高度视口下仍维持 2:1 长条比例，绝不扁平 —— */
  .poker-table {
    width: 88%;
    height: 72%;               /* 与座位椭圆同基准（相对游戏区），矮视口也不出断层 */
    min-height: 0;
    flex: 0 0 auto;
    border-radius: 100px / 66px;
  }
  .table-felt { border-radius: 84px / 52px; }
  /* —— 牌桌内中央公共区 —— */
  .board-plate { height: 66px; }
  /* 紧凑模式：5x36 + 4x6 = 204px，卡片与虚线框尺寸保持完全一致 */
  .community-area { width: 204px; gap: 6px; }
  .community-card { width: 36px; height: 54px; flex-basis: 36px; max-width: 36px; }
  .community-card.empty { width: 36px; height: 54px; flex-basis: 36px; max-width: 36px; }
  /* 发出的公共牌（hole-card）在紧凑模式下同样与占位框一致 36x54 */
  .community-area .hole-card,
  .community-area .hole-card:nth-child(1),
  .community-area .hole-card:nth-child(2) { width: 36px; height: 54px; flex: 0 0 36px; max-width: 36px; }
  .community-area .hole-card .rank { font-size: 12px; top: 3px; left: 3px; }
  .community-area .hole-card .suit { font-size: 13px; top: 15px; left: 3px; }
  .community-area .hole-card::before { font-size: 12px; right: 3px; bottom: 3px; }
  .community-area .hole-card::after { font-size: 24px; }
  .community-card .rank { font-size: 12px; top: 3px; left: 3px; }
  .community-card .suit { font-size: 13px; top: 15px; left: 3px; }
  .community-card::before { font-size: 12px; right: 3px; bottom: 3px; }
  .community-card::after { font-size: 24px; }
  .pot-zone { height: auto; margin-top: 12px; }
  .pot-display { min-width: 130px; padding: 4px 14px; gap: 2px; }
  .pot-blinds { font-size: 11px; }
  .pot-value { font-size: 28px; }
  .pot-icon { display: none; }
  .bet-line { height: 4px; margin-top: 3px; }
  .center-stack { transform: translateY(-16px); }

  /* —— 座位展示位 —— */
  .seat-slot { width: 150px; height: 90px; }   /* 高度 = 玩家手牌高度，保证筹码↔手牌间距 = 5px */
  /* AI 展示位：仅头像，固定尺寸；行距 3px */
  .seat.seat-top .seat-slot { width: 48px; height: 48px; gap: 0; }
  .seat.seat-top .seat-mid { gap: 3px; }
  .seat-mid { gap: 5px; }

  /* AI：位置标签 → 头像 → 名字 → 筹码 */
  .seat-top .avatar { width: 48px; height: 48px; }   /* 需求：头像最小 48px */
  .seat-top .avatar svg { width: 24px; height: 24px; }
  .seat-top .player-name { font-size: 11px; }
  .seat-top .seat-chips-row.player-chips { font-size: 14px; }
  .seat-top .seat-badge-line-wrap .seat-badge-line { font-size: 10px; }
  .ai-hand { gap: 5px; }
  .ai-hand .hole-card { width: 30px; height: 44px; border-radius: 4px; }
  .ai-hand .hole-card .rank { font-size: 10px; top: 2px; left: 3px; }
  .ai-hand .hole-card .suit { font-size: 11px; top: 13px; left: 3px; }
  .ai-hand .hole-card::before { font-size: 10px; right: 3px; bottom: 2px; }
  .ai-hand .hole-card::after { font-size: 22px; }

  /* 玩家：展示位(手牌44x66 或 头像48) → 名字 → 筹码 */
  .seat-bottom .avatar { width: 48px; height: 48px; }
  .seat-bottom .avatar svg { width: 26px; height: 26px; }
  .seat-bottom .player-name { font-size: 10px; }
  .seat-bottom .seat-chips-row.player-chips { font-size: 14px; color: #FFD700; }
  .seat-bottom .seat-badge { font-size: 9px; }
  /* 紧凑模式：按钮缩小为 56px，占位 = 80(距屏底) + 56(按钮) + 20(间距) = 156px */
  /* 紧凑模式：牌桌同样撑高，玩家区不再预留大块空白 */
  .seat-zone-bottom { padding-bottom: 6px; transform: none; }
  .seat.seat-bottom { padding-bottom: 0; }
  .hero-hand { gap: 6px; }
  .seat-bottom .hero-hand .hole-card { width: 60px; height: 90px; border-radius: 5px; }
  .seat-bottom .hero-hand .hole-card .rank { font-size: 15px; top: 4px; left: 5px; }
  .seat-bottom .hero-hand .hole-card .suit { font-size: 17px; top: 21px; left: 5px; }
  .seat-bottom .hero-hand .hole-card::before { font-size: 15px; right: 5px; bottom: 4px; }
  .seat-bottom .hero-hand .hole-card::after { font-size: 42px; }

  /* —— 操作按钮（贴屏幕底部导航位置；字号统一 16px、间距 20–30px） —— */
  .action-btn { width: 56px; height: 56px; font-size: 16px; }
  .action-btn .btn-label { font-size: 16px; }
  .raise-btn { width: 56px; height: 56px; }            /* 紧凑模式：加注键与弃牌/跟注同尺寸 */
  .fold-btn-wrapper { width: 56px; height: 56px; }   /* 遮罩容器随按钮同步缩小，保持同尺寸对齐 */
  .check-btn-wrapper { width: 56px; height: 56px; }   /* 过牌遮罩容器同步缩小，与按钮同尺寸对齐 */
  .action-bar { gap: 24px; bottom: 8px; }            /* 需求：交互按钮贴屏幕底部导航位置 */

  /* 覆盖层位置：AI 下注胶囊为纵向流一行；牌型框锚定模块底部内侧 */
  .seat-top .bet-chip { height: 18px; font-size: 11px; min-width: 32px; padding: 0 6px; }
  .seat-bottom .bet-chip { bottom: calc(100% + 4px); }
  .seat-top .hand-type-box { top: auto; bottom: 20px; }
  .seat-bottom .hand-type-box { bottom: calc(100% + 28px); }
  .equity-badge { top: calc(100% + 4px); font-size: 10px; padding: 2px 8px; }

  /* 桌腿底座隐藏 */
  .table-base { display: none; }
}

/* ===== 极矮视口（≤560px）：AI 座位进一步压缩，尽量上移、
   以最小占用换取与公共牌区的安全间距；同时收紧行距，绝不允许元素重叠 ===== */
@container table-design (max-height: 560px) {
  /* AI 座位模块：去掉底部预留、收紧行距，让模块整体尽量贴近顶部 */
  .seat.seat-top { padding-bottom: 0; }
  .seat.seat-top .seat-mid { gap: 2px; }
  .seat-badge-line-wrap { min-height: 11px; }
  .seat-top .seat-badge-line-wrap .seat-badge-line { font-size: 10px; }
  .seat-top .seat-id-row { gap: 0; }
  .seat-top .player-name { font-size: 11px; line-height: 1.05; }
  .seat-top .seat-chips-row.player-chips { font-size: 13px; line-height: 1.05; }
  .seat-top .seat-chips-row .chip-icon { width: 11px; height: 11px; flex: 0 0 11px; }
  /* 牌型框紧贴模块内侧，绝不外溢 */
  .seat-top .hand-type-box { bottom: 14px; }
  /* 下注胶囊更紧凑（纵向流一行） */
  .seat-top .bet-chip { height: 16px; font-size: 11px; padding: 0 6px; min-width: 30px; margin: 1px 0; }

  /* 极矮视口：牌桌保持居中，不再下移（避免顶部 AI 被顶出） */
  .table-layer { transform: translateY(0); }
  /* 极矮视口：公共区在压缩尺寸后整体居中略偏上，保证上不压 AI 座位、下不压玩家手牌 */
  .center-stack { transform: translateY(-2px); }
  .bet-line { display: none; }   /* 极矮模式下隐藏分隔线，回收高度、避免压住底池 */
  /* 进一步压缩公共牌底盘与底池高度，为「座位↔公共牌」和「底池↔手牌」两处间距腾出空间 */
  .board-plate { height: 52px; }
  .community-card,
  .community-card.empty,
  .community-area .hole-card { width: 30px; height: 45px; flex-basis: 30px; max-width: 30px; }
  .community-area { width: 174px; gap: 6px; }
  .community-area .hole-card .rank { font-size: 10px; top: 2px; left: 2px; }
  .community-area .hole-card .suit { font-size: 11px; top: 12px; left: 2px; }
  .community-area .hole-card::before { font-size: 10px; right: 2px; bottom: 2px; }
  .community-area .hole-card::after { font-size: 20px; }
  .community-card .rank { font-size: 10px; top: 2px; left: 2px; }
  .community-card .suit { font-size: 11px; top: 12px; left: 2px; }
  .community-card::before { font-size: 10px; right: 2px; bottom: 2px; }
  .community-card::after { font-size: 20px; }
  .pot-zone { margin-top: 6px; }
  /* 单行横向底池：盲注与底池额并排，整体高度压到 ~20px，为上下两处间距腾空间 */
  .pot-display { flex-direction: row; gap: 6px; min-width: 0; padding: 2px 12px; }
  .pot-info { flex-direction: row; gap: 6px; align-items: baseline; }
  .pot-blinds { font-size: 11px; }
  .pot-value { font-size: 26px; }
}

/* =====================================================================
   9 人桌椭圆环绕座位布局（WePoker 式）
   —— 玩家 seat-0 固定屏幕正下方（6 点钟位，沿用 .seat-zone-bottom）
   —— AI seat-1..seat-8 固定为椭圆上的 8 个等分点（CSS 占比定位，见下方 #seat-N）：
     x = cx + rx·cosθ / y = cy + ry·sinθ，θ = 130°/170°/…/50°，
     间距完全相等；JS 写入的 --seat-x/--seat-y 不再参与定位。
   ===================================================================== */
/* 座位容器：锚定在牌桌中心。left/top 由下方椭圆公式计算（百分比相对 .table-layer，
   随窗口自适应）；transform 用 !important 覆盖 JS 写入的内联位移，
   保证布局只由 CSS 决定，任何时刻都是均匀的 8 等分。 */
.table-layer .seat.seat-ai {
  --seat-rx: min(44%, calc((50vw - 100px) / 0.9848));  /* 自适应：既尽量外推，又保证左右牌背不出屏 */
  --seat-ry: 38%;               /* 椭圆垂直半径：同上，牌桌半高 37% */
  --hand-h: 45px;               /* 牌背高度：用于上下方位把牌背挪出展示位并顶住头像位置 */
  --seat-av: 28px;              /* 头像半径：座位以「头像中心」锚定椭圆点（非座位盒中心） */
  position: absolute;
  left: calc(50% + var(--seat-dx, 0) * var(--seat-rx));
  top: calc(52.5% + var(--seat-dy, 0) * var(--seat-ry));
  width: max-content;
  padding: 0;
  pointer-events: auto;
  z-index: 10;
  /* 【锚点】座位盒顶部就是头像顶部（位置标签已由 JS 移到头像下方），
     所以只需上移一个头像半径，头像圆心便精确落在椭圆（桌沿）上，
     不再受名字/筹码/下注额高度影响，也不会陷进绿色桌面。 */
  transform: translate(-50%, calc(-1 * var(--seat-av))) !important;
  /* 淘汰时平滑过渡（需求：300ms，不瞬间跳跃） */
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ===== 9 人桌椭圆座位坐标（Hero 固定 6 点钟，8 个 AI 均匀 8 等分） =====
   椭圆参数方程：x = cx + rx·cosθ，y = cy + ry·sinθ（cx=50%，cy=47%）
   θ 从 Hero(90°) 起每 40° 递增、玩家视角逆时针：seat1=130° … seat8=50°
   （各角度的 cos/sin 已预算为系数，间距绝对相等，上下左右完全对称）。 */
#seat-1 { --seat-dx: -0.6428; --seat-dy:  0.766; }   /* 左下 */
#seat-2 { --seat-dx: -0.9848; --seat-dy:  0.280; }  /* 左（略下移，与左上拉开间距） */
#seat-3 { --seat-dx: -0.8660; --seat-dy: -0.620; }  /* 左上（略上移，与左中拉开间距） */
#seat-4 { --seat-dx: -0.4500; --seat-dy: -0.9397; }  /* 顶部偏左（适度外推：避让公共牌区且不显空旷） */
#seat-5 { --seat-dx:  0.4500; --seat-dy: -0.9397; }  /* 顶部偏右（适度外推：避让公共牌区且不显空旷） */
#seat-6 { --seat-dx:  0.8660; --seat-dy: -0.620; }  /* 右上（略上移） */
#seat-7 { --seat-dx:  0.9848; --seat-dy:  0.280; }  /* 右（略下移） */
#seat-8 { --seat-dx:  0.6428; --seat-dy:  0.766; }   /* 右下 */
/* 自动收放的 --seat-rx 已按视口宽度算出「牌背不出屏」的上限：
   窄屏/横屏手机（如 608、873 宽）自动得到 37%~42%，不再一律收到 35%~38%，
   保证左右两侧 AI 尽量贴近牌桌左右边框。 */
@container table-design (max-width: 1100px) {
  .table-layer .seat.seat-ai { --seat-rx: min(44%, calc((50vw - 80px) / 0.9848)); }
}
@container table-design (max-height: 560px) {
  .table-layer .seat.seat-ai { --seat-rx: min(44%, calc((50vw - 73px) / 0.9848)); --seat-ry: 33%; }
}
/* 首次布局冻结过渡：JS 初始排座时临时挂 .pos-init，避免座位从桌心(0,0)飞出 */
.table-layer .seat.seat-ai.pos-init { transition: none !important; }

/* ===== 进局「加载保护」入场：牌桌与 AI 座位默认不可见，加载流水线完成后渐显 =====
   由 JS 在 .table-layer 上挂 .table-enter 触发；AI 座位为延迟渐入（阶段1 initAIUI 后）。
   加载遮罩 z-index 5000 全程覆盖，二者共同保证加载期间无牌桌元素穿透显示。 */
.table-layer .seat.seat-ai {
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.table-layer.table-enter .seat.seat-ai { opacity: 1; }
/* 已淘汰座位不因入场而变亮：保持灰暗 */
.table-layer.table-enter .seat.seat-ai.eliminated { opacity: 0.45; }

/* AI 座位信息排版【统一】：位置标签在头像上方（12px 极小），名字、筹码全部在头像下方，
   字号统一 12px、行距一致（seat-mid gap 2px），不再区分上下半圈翻转。
   注：JS layoutAliveSeats 会在每次布局时移除历史遗留的 .lower-half 类。 */

/* 紧凑座位体：位置标签 → 头像 → 手牌 → 下注额 → 名字 → 筹码，
   全部在 .seat-mid 纵向流中按顺序排列，行距 2px，绝不重叠。 */
.table-layer .seat.seat-ai .seat-mid {
  gap: 2px;                     /* 座位内部紧凑行距（头像/下注/名字/筹码） */
  position: relative;
  /* 固定为头像宽度：下注胶囊等更宽的元素只向两侧均匀溢出，
     不会撑宽座位盒、也不会把头像中心推离椭圆锚点。 */
  width: 56px;
  align-items: center;
  transform: none;              /* 取消 .seat.active 上浮，椭圆绝对定位下保持稳定 */
}
/* 展示位 = 头像尺寸的方盒：牌背绝对定位在盒外，因此不撑宽座位，
   头像中心始终精确落在椭圆（桌沿）基准点上。 */
.table-layer .seat.seat-ai .seat-slot {
  position: relative;
  width: 56px;
  min-width: 56px;
  height: 56px;
  display: block;
}
/* 头像回到正常文档流左侧（取消绝对居中，避免与牌背在同一位置叠压） */
.table-layer .seat.seat-ai .seat-slot > .avatar {
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  transform: none;
}
.table-layer .seat.seat-ai .avatar {
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.38);          /* 深底玻璃：头像从毛毡上“浮”出来 */
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.45),
    0 3px 10px rgba(0, 0, 0, 0.55);
}
.table-layer .seat.seat-ai .avatar svg { width: 28px; height: 28px; fill: rgba(255, 255, 255, 0.78); }
/* 【关键】AI 座位没有 .seat-top 类，必须显式覆盖 .has-hand 的「隐藏头像」规则：
   否则发牌后头像会消失，只剩两张小牌背，座位失去视觉主体。 */
.table-layer .seat.seat-ai .seat-slot > .avatar,
.table-layer .seat.seat-ai.has-hand .seat-slot > .avatar {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.table-layer .seat.seat-ai .seat-id-row { gap: 0; }
.table-layer .seat.seat-ai .seat-badge-line-wrap { min-height: 13px; }
/* 位置标签：微亮小字 + 深色描边，压在毛毡上也清晰可读 */
.table-layer .seat.seat-ai .seat-badge-line {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* AI 名字：13px 白字 + 深色描边（text-shadow 双向下压），高对比不糊 */
.table-layer .seat.seat-ai .player-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.85);
}
/* AI 筹码：黑底金字小胶囊，数字最醒目 */
.table-layer .seat.seat-ai .seat-chips-row.player-chips {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: #FFD700;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 999px;
  padding: 1px 9px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* AI 牌背：与头像横向并排（flex 子项），不叠压头像、不遮挡名字与筹码 */
.table-layer .seat.seat-ai .seat-slot > .ai-hand {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 1;
}
.table-layer .seat.seat-ai .seat-slot > .ai-hand:empty { opacity: 0; visibility: hidden; }

/* ===== 按方位调整手牌朝向：牌背永远朝「远离桌心」的一侧，绝不伸向公共牌区 =====
   JS 排座时为每个座位挂 pos-top / pos-bottom / pos-left / pos-right，
   与 #seat-1..8 的固定椭圆坐标一一对应（不随存活人数变化，避免淘汰后朝向错乱）。
   牌背绝对定位在头像盒外 4px，因此不参与布局、不会把头像顶离桌沿。 */
.table-layer .seat.seat-ai .seat-slot > .ai-hand {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 1;
}
/* 上半圈（seat-4 / seat-5）：牌背在头像正上方（桌外），名字/筹码仍在下方靠向桌心。
   牌背占用了展示位上方的留白，因此锚点要一并把这段留白算进去，
   头像中心才仍然落在椭圆（桌沿）基准点上。 */
.table-layer .seat.seat-ai.pos-top .seat-slot { margin-top: calc(var(--hand-h) + 4px); }
.table-layer .seat.seat-ai.pos-top .seat-slot > .ai-hand {
  left: 50%;
  right: auto;
  top: calc(-1 * (var(--hand-h) + 4px));
  bottom: auto;
  transform: translateX(-50%);
}
.table-layer .seat.seat-ai.pos-top {
  transform: translate(-50%, calc(-1 * (var(--seat-av) + var(--hand-h) + 4px))) !important;
}
/* 下半圈（seat-1 / seat-8）：牌背在头像正下方，文字信息顺次排在其下，不遮名字与筹码。
   牌背只占用展示位「下方」留白，不影响头顶锚点，故无需额外位移。 */
.table-layer .seat.seat-ai.pos-bottom .seat-slot { margin-bottom: calc(var(--hand-h) + 4px); }
.table-layer .seat.seat-ai.pos-bottom .seat-slot > .ai-hand {
  left: 50%;
  right: auto;
  top: calc(100% + 4px);
  bottom: auto;
  transform: translateX(-50%);
}
/* 左侧（seat-2 / seat-3）：牌背在头像左侧（桌外） */
.table-layer .seat.seat-ai.pos-left .seat-slot > .ai-hand {
  left: auto;
  right: calc(100% + 4px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
/* 右侧（seat-6 / seat-7）：牌背在头像右侧（桌外） */
.table-layer .seat.seat-ai.pos-right .seat-slot > .ai-hand {
  left: calc(100% + 4px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
/* 牌背放大到 30x45，仍只从头像右下角探出，不侵入名字行 */
.table-layer .seat.seat-ai .ai-hand .hole-card { width: 30px; height: 45px; border-radius: 4px; }
.table-layer .seat.seat-ai .ai-hand .hole-card .rank { font-size: 11px; top: 2px; left: 3px; }
.table-layer .seat.seat-ai .ai-hand .hole-card .suit { font-size: 12px; top: 15px; left: 3px; }
.table-layer .seat.seat-ai .ai-hand .hole-card::before { font-size: 11px; right: 3px; bottom: 2px; }
.table-layer .seat.seat-ai .ai-hand .hole-card::after { font-size: 22px; }

/* 下注胶囊：黑底黄字小胶囊，比名字更抢眼（金额是行动信息里最需要被读到的数字） */
.table-layer .seat.seat-ai .bet-chip {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  translate: none;
  transform: none;
  width: auto;
  min-width: 40px;
  max-width: 76px;
  height: 19px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  margin: 2px 0;
  z-index: 13;
}
/* 没有下注时彻底不占位（原本是一个 40×19 的隐形黑胶囊，会把头像顶高） */
.table-layer .seat.seat-ai .bet-chip:not(.show) { display: none; }

/* ===== 摊牌牌型框（AI）：摊牌瞬间实时显示，朝牌桌中央方向贴近公共牌区，
   放大醒目；靠方位类分向定位，绝不压住公共牌与其他 AI 的信息框 ===== */
.table-layer .seat.seat-ai .hand-type-box {
  left: 50%;
  right: auto;
  top: auto;
  bottom: auto;
  transform: translateX(-50%) !important;
  max-width: 130px;
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(10, 14, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
  z-index: 48;                  /* 高于公共牌层，确保摊牌牌型清晰可读 */
}
.table-layer .seat.seat-ai .hand-type-box.show {
  transform: translateX(-50%) scale(1) !important;
}
/* 顶部座位（AI4/AI5）：框在座位正下方 → 朝中央公共牌区 */
.table-layer .seat.seat-ai.pos-top .hand-type-box {
  top: calc(100% + 4px) !important;
}
/* 底部角落座位：框在座位正上方 → 朝中央，避开操作栏 */
.table-layer .seat.seat-ai.pos-bottom .hand-type-box {
  bottom: calc(100% + 4px) !important;
}
/* 左侧座位：框在座位右侧 → 朝中央，垂直居中 */
.table-layer .seat.seat-ai.pos-left .hand-type-box {
  left: calc(100% + 6px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.table-layer .seat.seat-ai.pos-left .hand-type-box.show {
  transform: translateY(-50%) scale(1) !important;
}
/* 右侧座位：框在座位左侧 → 朝中央，垂直居中 */
.table-layer .seat.seat-ai.pos-right .hand-type-box {
  right: calc(100% + 6px) !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.table-layer .seat.seat-ai.pos-right .hand-type-box.show {
  transform: translateY(-50%) scale(1) !important;
}
/* 赢家牌型框：加强金色-绿色发光，更醒目 */
.table-layer .seat.seat-ai .hand-type-box.winner {
  border-color: #22E57F;
  box-shadow: 0 0 22px rgba(7,193,96,0.95), 0 0 0 2px rgba(7,193,96,0.5) inset;
}

/* ===== 摊牌牌型框（Hero）：贴在黑框信息右侧（+x 方向），不遮挡黑框，尺寸略小于黑框 ===== */
#seat-0 .hand-type-box {
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  max-width: 96px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  transform: translateY(-50%) !important;   /* 垂直居中于黑框 */
  transform-origin: left center;
  z-index: 48;
}
#seat-0 .hand-type-box.show {
  transform: translateY(-50%) scale(1) !important;
}

/* 行动气泡：信息统一在头像下方 → 气泡固定在座位正上方，始终远离牌桌中央 */
.table-layer .seat.seat-ai .action-bubble.bubble-ai {
  left: 50%;
  bottom: calc(100% + 8px);
  top: auto;
  right: auto;
  transform: translateX(-50%) scale(0.9);
}
.table-layer .seat.seat-ai .action-bubble.bubble-ai.show { transform: translateX(-50%) scale(1); }

/* ===== 最上方两个 AI 座位（固定在 #seat-4 / #seat-5）专属排版 =====
   座位坐标已改为 CSS 固定椭圆 8 等分，最顶端始终是 seat-4 / seat-5；
   这里用固定 ID 锁定，避免 JS 按存活人数动态切换 .seat-crown 时误标到别的座位。
   ① 头像/手牌/筹码/Reback 整体略微下移，避开牌桌上缘与中央公共牌区；
   ② 行动提示（气泡）不再悬于座位上方，改到 Reback 提示下方。 */
.table-layer #seat-4.seat-crown .seat-mid,
.table-layer #seat-5.seat-crown .seat-mid {
  transform: none;              /* 座位已贴桌沿外侧，不再需要下移 */
}
.table-layer #seat-4.seat-crown .action-bubble.bubble-ai,
.table-layer #seat-5.seat-crown .action-bubble.bubble-ai {
  top: calc(100% + 6px);
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.9);
}
.table-layer #seat-4.seat-crown .action-bubble.bubble-ai.show,
.table-layer #seat-5.seat-crown .action-bubble.bubble-ai.show {
  transform: translate(-50%, -50%) scale(1);
}

/* 当前行动者：头像细绿环 + 柔和外发光（不再位移，避免椭圆布局跳动） */
.table-layer .seat.seat-ai.active .avatar {
  /* 行动中头像放大 1.1×（头像已是 flex 子项，只需纯缩放，不能再叠加 -50% 位移） */
  transform: scale(1.1);
  background: rgba(7, 193, 96, 0.14);
  border-color: #22DE6E;
  box-shadow:
    0 0 0 1px rgba(34, 222, 110, 0.55),
    0 0 26px rgba(34, 222, 110, 0.65),
    0 0 52px rgba(7, 193, 96, 0.30);
}
/* 行动开始/结束时：头像与倒计时环 200ms 平滑缩放，不做瞬跳 */
.table-layer .seat.seat-ai .avatar {
  transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 200ms cubic-bezier(0.25, 1, 0.5, 1),
              border-color 200ms cubic-bezier(0.25, 1, 0.5, 1),
              background 200ms cubic-bezier(0.25, 1, 0.5, 1),
              opacity 150ms cubic-bezier(0.25, 1, 0.5, 1),
              visibility 150ms;
}
/* ===== AI 倒计时环：加宽、加粗、亮绿高亮 =====
   环内 SVG 以 60 为 viewBox，stroke-width 5 实际约 6px；配合头像 1.1× 缩放
   后直径约 84px，一眼可见。 */
.table-layer .seat.seat-ai .timer-ring {
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              width 200ms cubic-bezier(0.25, 1, 0.5, 1),
              height 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.table-layer .seat.seat-ai.active .timer-ring {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  box-shadow: 0 0 26px rgba(34, 222, 110, 0.60);
}
.table-layer .seat.seat-ai .timer-ring .timer-track {
  stroke: rgba(255, 255, 255, 0.20);
  stroke-width: 5;
}
.table-layer .seat.seat-ai .timer-ring .timer-progress {
  stroke: #2BE87B;                       /* 亮绿：压过深绿毛毡，行动焦点极醒目 */
  stroke-width: 5;
  /* 不写 filter: drop-shadow —— 圆弧每 100ms 重绘一次，模糊滤镜会强制整层
     每 tick 重新栅格化（国产浏览器上 AI 头像区域频闪的直接根源）。
     发光感已由 .seat.active .timer-ring 的静态 box-shadow 提供。 */
}
/* 环中央秒数：AI 座位不再显示文字，只保留外圈转动的绿色光圈
   （深色毛毡上白字 + 黑色多层描边会糊成一团，观感极差，故彻底隐藏） */
.table-layer .seat.seat-ai .timer-text {
  display: none !important;
}
.table-layer .seat.seat-ai.active .seat-badge-line { color: var(--c-green); }

/* ===== 全下（All-in）专属 UI：ALL IN 标签 + 双方全下中央提示 =====
   层级约束：高于牌桌(0)/公共牌(5)/底池(5)/头像(10)，但远低于底部操作按钮(10 但在独立
   堆叠上下文)与加注面板(200)/弹窗(999)；pointer-events:none 绝不阻挡任何点击。 */
/* 单个玩家全下标签：动态创建于该座位上方（.seat 内 position:absolute 锚点） */
.allin-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);        /* 悬于座位/头像正上方 */
  transform: translateX(-50%) scale(0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 20px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFD700;                    /* 亮金色 */
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 0 20px #FF8C00;
  box-shadow: 0 0 24px rgba(255, 140, 0, 0.55);
  z-index: 60;                       /* 高于牌桌/头像，低于加注面板(200) */
  pointer-events: none;              /* 绝不拦截点击 */
  opacity: 0;
  will-change: transform, opacity;   /* 合成层，保证 60fps */
}
/* 金额 > 10000 时标签下方小字：全下 12,400 */
.allin-tag .allin-tag-sub {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-shadow: none;
}
/* 脉冲入场：scale(0.5)→scale(1.1)→scale(1.0)，400ms；随后淡出（总时长 2.1s 后移除） */
.allin-tag.show {
  animation: allinTagPulse 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             allinTagFade 2100ms ease-in-out forwards;
}
@keyframes allinTagPulse {
  0%   { transform: translateX(-50%) scale(0.5); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.0); opacity: 1; }
}
@keyframes allinTagFade {
  0%, 76%  { opacity: 1; }           /* 前 ~1.6s 保持可见 */
  100%     { opacity: 0; }           /* 后段淡出 */
}

/* 双方全下中央提示：牌桌中央（公共牌区上方），白色加粗 20px，深色半透明 + 边框 */
.allin-showdown-tag {
  position: absolute;
  left: 50%;
  top: 34%;                          /* 公共牌区上方 */
  transform: translate(-50%, -50%) scale(0.85);
  padding: 10px 26px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 215, 0, 0.55);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.6);
  z-index: 60;                       /* 高于牌桌/公共牌，低于加注面板(200) */
  pointer-events: none;              /* 绝不拦截点击 */
  opacity: 0;
  will-change: transform, opacity;
}
.allin-showdown-tag.show {
  animation: allinShowdownIn 300ms ease-out forwards,
             allinShowdownOut 400ms ease-in 1700ms forwards;  /* 保留 2s 后淡出 */
}
@keyframes allinShowdownIn {
  0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes allinShowdownOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== 庄位水晶（Dealer Button）=====
   圆形小圆片，直径 28px；半透明白→金径向渐变，细金描边 + 轻微发光；中心大写「D」。
   由 gameClient.js 依据 btnIndex 计算 left/top（座位头像朝牌桌中心方向偏移约 20px），
   位置变更走 300ms ease-in-out 过渡 → 庄位轮转时平滑移动，不瞬间跳跃。
   层级：高于牌桌背景(0/1)与公共区(5)，低于头像(10)/手牌 → z-index 8 不遮挡任何玩家信息。 */
.dealer-button {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* 半透明水晶质感：中心亮白 → 边缘暖金 */
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 236, 200, 0.82) 42%,
    rgba(255, 200, 100, 0.6) 100%);
  border: 1.5px solid rgba(255, 200, 100, 0.8);
  box-shadow:
    0 0 12px rgba(255, 200, 100, 0.7),
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(180, 120, 20, 0.4);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  /* 位置由 JS 写 left/top；transform 只负责居中，父层坐标切换时 300ms 平滑过渡 */
  transform: translate(-50%, -50%);
  transition: left 300ms ease-in-out, top 300ms ease-in-out, opacity 300ms ease-in-out;
  opacity: 0;                       /* 默认隐藏，定位成功后淡入 */
  pointer-events: none;             /* 绝不遮挡/拦截点击 */
  z-index: 8;                       /* 高于牌桌(1)/公共区(5)，低于头像(10)/手牌(8 同层但不重叠) */
  will-change: left, top;
}
.dealer-button.show { opacity: 1; }
/* 首次定位冻结过渡：避免水晶从 (0,0) 左上角飞出 */
.dealer-button.pos-init { transition: none !important; }

/* ===== 淘汰座位（AI）===== 需求：淘汰玩家【不再占据椭圆轨道主座位】，
   JS layoutAliveSeats 会立即给淘汰座位加 .seat-removed（整个 display:none 完全隐藏），
   并在屏幕左右上角以极小极淡灰字列出（.eliminated-list）。
   淘汰座位不进入存活集合 → 存活座位仍在整圈椭圆上均匀均分，无空缺位。 */
.table-layer .seat.seat-ai.seat-removed { display: none !important; }

/* ===== 淘汰玩家角标列表：牌桌区左上角 / 右上角，极小极淡灰字（由 JS 动态创建/更新）
   绝对定位锚定详情页 #gameDetail（绝不能 fixed 漂浮到列表页），详情页隐藏时随容器一并消失 ===== */
.eliminated-list {
  position: absolute;
  top: 12px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  z-index: 40;
  pointer-events: none;
}
/* 右上角镜像列表：文本右对齐，与左上角对称 */
.eliminated-list.eliminated-list-right {
  left: auto;
  right: 16px;
  align-items: flex-end;
}
.eliminated-list:empty { display: none; }
.eliminated-list .eliminated-item {
  font-size: 11px;
  line-height: 1.2;
  color: var(--c-gray);
  opacity: 0.55;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ===== AI 座位 Reback 状态小框：作为该 AI 座位模块的子元素，紧贴筹码行下方 =====
   深色小胶囊（半透明黑底）+ 白色文字 + 10px 字号；宽度自适应内容，完整显示不截断；
   绝不用 fixed / 绝对定位漂浮到牌桌外，纯随座位模块流式排列。 */
.table-layer .seat.seat-ai .ai-reback-pill {
  margin-top: 1px;
  font-size: 9px;               /* 极简小字，弱化状态标签 */
  font-weight: 500;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.62);
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.2px;
  width: max-content;           /* 宽度自适应内容，绝不截断文字 */
  max-width: none;
  white-space: nowrap;          /* 单行显示，但不裁剪、不加省略号 */
  box-sizing: border-box;
  pointer-events: none;         /* 纯展示，不拦截任何交互 */
}
/* 可用：白色文字（深色胶囊上对比清晰） */
.table-layer .seat.seat-ai .ai-reback-pill.available {
  color: rgba(255, 255, 255, 0.72);
}
/* 已用 / 已关闭：略淡但仍可读 */
.table-layer .seat.seat-ai .ai-reback-pill.gray {
  color: rgba(255, 255, 255, 0.42);
}
/* 该 AI 已被淘汰：彻底隐藏其 Reback 小框（不占位、不显示） */
.table-layer .seat.seat-ai .ai-reback-pill.hidden-eliminated {
  display: none !important;
}

/* 玩家 seat-0 淘汰（游戏结束场景）：保留灰化样式，仅作用于底部座位区 */
.seat-zone .seat.eliminated {
  opacity: 0.32;
  filter: grayscale(1) brightness(0.7);
  pointer-events: none;
}
.seat-zone .seat.eliminated .player-name::after {
  content: " · 淘汰";
  color: var(--c-gray);
  font-size: 10px;
}

/* 中低视口：牌桌高度由 min(62vh, 100%) 自适应，无需再手动降级；
   仅座位内容随视口收紧，避免顶部/底部座位与中央公共区重叠 */
/* 中低视口：座位紧凑下调，避免与中央公共区/底池重叠 */
@container table-design (max-width: 1100px) {
  /* 展示位宽度必须与头像一致（牌背是盒外绝对定位，不参与布局） */
  .table-layer .seat.seat-ai .seat-slot { width: 52px; min-width: 52px; height: 52px; }
  .table-layer .seat.seat-ai .avatar { width: 52px; height: 52px; }
  /* 锚点半径与座位盒宽度随头像同步收缩，头像圆心仍压在椭圆上 */
  .table-layer .seat.seat-ai { --seat-av: 26px; }
  .table-layer .seat.seat-ai .seat-mid { width: 52px; }
  .table-layer .seat.seat-ai .avatar svg { width: 26px; height: 26px; }
  .table-layer .seat.seat-ai .player-name { font-size: 12px; }
  .table-layer .seat.seat-ai .seat-chips-row.player-chips { font-size: 12px; }
  /* 窄屏收紧牌背，避免相邻座位在椭圆轨道上相撞（横向并排后模块变宽） */
  .table-layer .seat.seat-ai .ai-hand .hole-card { width: 22px; height: 33px; }
  .table-layer .seat.seat-ai { --hand-h: 33px; }
  .table-layer .seat.seat-ai .ai-hand .hole-card .rank { font-size: 9px; top: 1px; left: 2px; }
  .table-layer .seat.seat-ai .ai-hand .hole-card .suit { font-size: 10px; top: 11px; left: 2px; }
}
@container table-design (max-height: 560px) {
  .table-layer .seat.seat-ai .seat-slot { width: 46px; min-width: 46px; height: 46px; }
  .table-layer .seat.seat-ai .avatar { width: 46px; height: 46px; }
  .table-layer .seat.seat-ai { --seat-av: 23px; }
  .table-layer .seat.seat-ai .seat-mid { width: 46px; }
  .table-layer .seat.seat-ai .avatar svg { width: 22px; height: 22px; }
  .table-layer .seat.seat-ai .player-name { font-size: 11px; }
  .table-layer .seat.seat-ai .seat-chips-row.player-chips { font-size: 11px; }
  .table-layer .seat.seat-ai .bet-chip { margin: 1px 0; height: 17px; font-size: 11px; }
  .table-layer .seat.seat-ai .ai-hand .hole-card { width: 20px; height: 30px; }
  .table-layer .seat.seat-ai { --hand-h: 30px; }
}

/* =====================================================================
   页面容器：底部导航通过 display:none/block 切换，无路由跳转
   四个页面叠放在 #app 内容流中，同一时刻仅一个可见
   ===================================================================== */
.page { display: none; }
.page.active { display: flex; }
/* 比赛进行页：纵向排列（状态卡片 + 游戏区），占满内容区高度 */
.page-play {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  width: 100%;
}
/* 其余页面：居中占位内容 */
.page-simple {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.page-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 1px;
}
.page-empty {
  font-size: 13px;
  color: var(--c-gray);
}

/* =====================================================================
   牌局状态卡片：比赛进行页顶部（无牌局 / 进行中 / 未完成 三态）
   浅灰背景 #F7F7F7、圆角 8px、浅灰细边框、内边距 12px
   ===================================================================== */
.game-status-card {
  flex-shrink: 0;
  margin: 8px 12px 0;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  position: relative;
  z-index: 40;
}
.gsc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gsc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
}
.gsc-sub {
  font-size: 13px;
  color: var(--c-gray);
  white-space: nowrap;
}
.gsc-sub:empty { display: none; }
.gsc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 卡片按钮：小圆角胶囊，浅灰背景 + 微信绿/灰边框，按下 scale 0.95 */
.gsc-btn {
  padding: 6px 14px;
  min-width: 56px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.2s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.gsc-btn:active { transform: scale(0.95); }
.gsc-btn.primary {
  color: #FFFFFF;
  border-color: var(--c-green);
  background: var(--c-green);
}
.gsc-btn.danger {
  color: var(--c-fold);
  border-color: rgba(198,40,40,0.5);
  background: var(--c-bg);
}

/* =====================================================================
   底部导航栏：固定屏幕最底部，宽度 100%，高度 56px，四项横向均分
   ===================================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  z-index: 9999;                /* 最高层：结算遮罩(9000)之上，牌局结束等待复盘时导航依然可见可点 */
  display: flex;
  align-items: stretch;
  background: var(--c-nav);
  border-top: 1px solid var(--c-line);
}
/* 牌桌全屏视图下隐藏底部导航（display:flex 会覆盖默认 [hidden]，需显式声明） */
.bottom-nav[hidden] { display: none !important; }
.nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--c-gray);
  cursor: pointer;
  transition: color 200ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-icon {
  font-size: 18px;
  line-height: 1;
  transition: font-size 200ms ease;
}
.nav-item .nav-label {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1;
}
/* 选中：图标与文字微信绿，图标略大，文字加粗 */
.nav-item.active { color: var(--c-green); }
.nav-item.active .nav-icon { font-size: 21px; }
.nav-item.active .nav-label { font-weight: 700; }

/* 未读红点（微信式）：图标右上角，绝对定位，微信红 + 白边 */
.nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-dot {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FA5151;
  border: 1.5px solid #FFFFFF;
  box-sizing: content-box;
  pointer-events: none;
}
.nav-dot[hidden] { display: none !important; }

/* =====================================================================
   牌局列表（比赛进行页）：像微信聊天列表，每张卡片对应一个牌局
   ===================================================================== */
.games-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.games-list-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}
.games-list-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 1px;
}
.games-new-btn { min-width: 0; }
.games-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ===== 一键快速体验按钮（酒馆老板秒懂入口） ===== */
.quick-start-wrap {
  flex-shrink: 0;
  padding: 10px 12px 6px;
  display: flex;
  justify-content: center;   /* 居中，不横跨全屏 */
}
.quick-start-btn {
  width: auto;
  max-width: 320px;
  min-width: 220px;
  background: linear-gradient(135deg, #07c160 0%, #059a4d 100%);
  color: #fff;
  border: none;
  border-radius: 999px;      /* 圆角胶囊，而非整行铺满 */
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(7, 193, 96, 0.3);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.quick-start-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(7, 193, 96, 0.25);
}
.quick-start-wrap[hidden] { display: none !important; }
.quick-start-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.quick-start-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.quick-start-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-left: 2px;
  font-weight: 400;
  white-space: nowrap;
}
/* ===== 合规免责声明（低调灰色底部一行） ===== */
.disclaimer-row {
  flex-shrink: 0;             /* 固定在列表容器底部，不参与滚动 */
  margin-top: auto;           /* 内容不足时也贴底 */
  padding: 10px 16px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a0a0a6;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.games-empty {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--c-gray);
}

/* 牌局卡片：浅灰 #F7F7F7、圆角 8px、极浅描边、内边距 12px；按下 scale 0.98 */
.game-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.game-card:active { transform: scale(0.98); }
.game-card.is-unfinished { border-color: var(--c-line); }
.game-card-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--c-green);
  background: rgba(7,193,96,0.12);
  border: 1px solid rgba(7,193,96,0.4);
}
.game-card.is-unfinished .game-card-avatar {
  color: var(--c-gray);
  background: rgba(136,136,136,0.12);
  border-color: rgba(136,136,136,0.4);
}
.game-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.game-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card-sub {
  font-size: 13px;
  color: var(--c-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.game-card-state {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--c-green);
  border: 1px solid rgba(7,193,96,0.5);
}
.game-card.is-unfinished .game-card-state {
  color: var(--c-gray);
  border-color: rgba(136,136,136,0.5);
}
.game-card-time { font-size: 11px; color: var(--c-gray); }

/* =====================================================================
   牌局详情页：全屏覆盖内容区（像微信进入某个聊天对话框）；牌桌视图下底部导航隐藏，故铺满全屏
   ===================================================================== */
.game-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  overflow: hidden;
}
.game-detail[hidden] { display: none !important; }
/* 层级穿透防护：详情页隐藏时，内部所有子元素一律不渲染（倒计时环/操作按钮/下注面板/弹窗等） */
.game-detail[hidden] * { display: none !important; }
.detail-head {
  flex-shrink: 0;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.detail-back {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}
.detail-back:active { transform: scale(0.9); }
.detail-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
}
.game-detail .game-status-card {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 8px;
}
/* 详情页内游戏区占满剩余高度 */
.game-detail .game-area { flex: 1; min-height: 0; }

/* =====================================================================
   微信式多牌局（poker_games 数组）：滑动过渡 / 状态标签 / 长按菜单
   ===================================================================== */
.games-head-actions { display: flex; align-items: center; gap: 8px; }

/* 归档切换按钮：小号灰色胶囊 */
.games-archive-toggle {
  padding: 4px 10px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-gray);
  background: transparent;
  border: 1px solid rgba(136,136,136,0.45);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s cubic-bezier(0.25,1,0.5,1);
}
.games-archive-toggle:active { transform: scale(0.95); }

/* 详情页滑入/滑出（从右侧，300ms） */
.game-detail {
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.game-detail.detail-slide-in,
.game-detail.detail-slide-out { transform: translateX(100%); }

/* 卡片边框：统一极浅描边（取代按状态变色的边框） */
.game-card { border: 1px solid var(--c-line); }
.game-card.is-unfinished { border-color: var(--c-line); }

/* 头像按状态变色：进行中绿 / 已暂停灰 / 已结束灰 */
.game-card.st-paused .game-card-avatar,
.game-card.st-finished .game-card-avatar {
  color: var(--c-gray);
  background: rgba(136,136,136,0.12);
  border-color: rgba(136,136,136,0.4);
}

/* 状态标签：进行中绿底白字 + 绿色呼吸圆点 / 已暂停绿 / 已结束灰 */
.game-card-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.game-card-state.st-ongoing {
  color: #FFFFFF;
  background: var(--c-green);
  border-color: var(--c-green);
}
.game-card-state.st-paused {
  color: var(--c-green);
  background: transparent;
  border-color: rgba(7,193,96,0.5);
}
.game-card-state.st-finished {
  color: var(--c-gray);
  background: transparent;
  border-color: rgba(136,136,136,0.5);
}
/* 呼吸圆点：微信绿，透明度 + 光晕 1.2s 循环 */
.state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  animation: state-breath 1.2s ease-in-out infinite;
}
@keyframes state-breath {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(7,193,96,0.6); }
  50%      { opacity: 0.35; box-shadow: 0 0 0 4px rgba(7,193,96,0); }
}
@media (prefers-reduced-motion: reduce) {
  .state-dot { animation: none; }
}

/* 长按卡片菜单 */
.card-menu {
  position: fixed;
  z-index: 1000;
  min-width: 132px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0;
  transform: scale(0.92);
  transform-origin: top right;
  transition: opacity 150ms ease, transform 150ms ease;
}
.card-menu.show { opacity: 1; transform: scale(1); }
.card-menu-item {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.card-menu-item:hover,
.card-menu-item:active { background: rgba(0,0,0,0.05); }
.card-menu-item.danger { color: var(--c-fold); }

/* =====================================================================
   AI 教练系统：结算页 / 精彩手牌列表 / 复盘 / API Key 设置
   ===================================================================== */

/* ===== 结算页（玩家淘汰 / 夺冠）===== */
.settlement-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.settle-rank {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-green);
}
.settle-chips {
  font-size: 13px;
  color: var(--c-gray);
}
/* 结算页底部提示：AI 教练后台生成复盘 */
.settle-review-hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-gray);
  text-align: center;
}

/* ===== 精彩手牌页：列表占满页面、顶部对齐、可滚动 ===== */
#page-highlights {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}

/* 顶端分类标签：横向可滑动，微信白主题 */
.hl-cats {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 8px 12px 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hl-cats::-webkit-scrollbar { display: none; }
/* 精彩手牌保留期限提示（顶部小字，右对齐） */
.hl-retention-hint {
  flex-shrink: 0;
  font-size: 12px;
  color: #888888;
  text-align: right;
  padding: 0 12px 8px;
  box-sizing: border-box;
  width: 100%;
}
.hl-cat {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--c-ink);
  background: #F7F7F7;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 6px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hl-cat.active {
  color: #FFFFFF;
  background: var(--c-green);
  border-color: var(--c-green);
}
.hl-cat:active { transform: scale(0.97); }

.hl-list {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  transition: opacity 0.15s ease;   /* 切换分类时淡出/淡入 */
}
.hl-list.hl-fade { opacity: 0; }
.hl-card.hl-hidden { display: none; }

/* 手牌卡片 */
.hl-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.hl-card:active { transform: scale(0.98); }
.hl-card.expanded { border-color: rgba(7,193,96,0.45); }

.hl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hl-cards {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: 1px;
}
.hl-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.hl-badge.win  { color: #FFFFFF; background: var(--c-green); }
.hl-badge.lose { color: var(--c-gray); background: rgba(136,136,136,0.15); }
.hl-delta { font-size: 14px; font-weight: 800; }
.hl-delta.pos { color: var(--c-green); }
.hl-delta.neg { color: var(--c-fold); }
.hl-pot {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-gray);
  white-space: nowrap;
}
/* 新生成的复盘：小红点 + NEW 标签（点击卡片查看后消失） */
.hl-new-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FA5151;
  box-shadow: 0 0 0 1.5px #FFFFFF;
  flex-shrink: 0;
}
.hl-new-tag {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  color: #FFFFFF;
  background: #FA5151;
}

.hl-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.hl-tag {
  font-size: 11px;
  color: var(--c-green);
  border: 1px solid rgba(7,193,96,0.4);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.hl-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-gray);
  white-space: nowrap;
}

/* 展开的详情 */
.hl-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hl-board {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
}
.hl-log {
  margin: 0;
  padding: 8px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-gray);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

/* 复盘四层结构 */
.hl-review {
  border-left: 3px solid var(--c-green);
  padding: 4px 0 4px 10px;
}
.hl-review-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-green);
  margin-bottom: 4px;
}
.hl-review-title.err { color: var(--c-fold); }
.hl-review-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.hl-review-body.pending { color: var(--c-gray); }
.hl-review-body.err { color: var(--c-fold); font-size: 12px; }

/* ===== DeepSeek API Key 设置行 ===== */
.apikey-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}
.apikey-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  outline: none;
}
.apikey-input:focus { border-color: var(--c-green); }
.apikey-save {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-green);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.apikey-save:active { transform: scale(0.95); }
.apikey-status-row { padding-top: 0; min-height: 0; }
.apikey-status {
  font-size: 12px;
  color: var(--c-gray);
}
.apikey-status.ok { color: var(--c-green); }

/* =====================================================================
   AI 教练复盘页（page-review）：微信白主题
   白底 / 深黑文字 / 主色 #07C160 / 分隔线 #E5E5E5
   ===================================================================== */
.page-review {
  flex: 1;
  min-height: 0;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--c-bg);
}

/* 顶部栏：返回 + 标题 + 进度 */
.rv-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.rv-back {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
  color: var(--c-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.rv-back:active { opacity: 0.5; }
.rv-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.5px;
}
.rv-progress {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-gray);
  white-space: nowrap;
}

/* 手牌小卡片列表：横向滚动、可点击回看 */
.rv-hlist {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.rv-hlist:empty { display: none; }
.rv-hmini {
  flex-shrink: 0;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  font-size: 12px;
  color: var(--c-gray);
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.2s ease;
}
.rv-hmini:active { transform: scale(0.96); }
.rv-hmini .rv-hmini-idx {
  display: block;
  font-size: 10px;
  color: var(--c-gray);
}
.rv-hmini .rv-hmini-cards {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: 0.5px;
}
.rv-hmini.done .rv-hmini-idx::after { content: ' ✅'; }
.rv-hmini.active {
  border-color: var(--c-green);
  background: rgba(7,193,96,0.08);
}
.rv-hmini.active .rv-hmini-idx { color: var(--c-green); }

/* 主滚动区 */
.rv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

/* ========== AI HUD 数据面板（微信白主题） ========== */
.hud-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  /* ⚠️ 必须高于牌桌全屏层 #gameDetail(9999)：原来 1200 会被整层盖住，
     点 AI 头像其实已经打开了面板，但用户完全看不见 → 表现为「头像点不动」 */
  z-index: 100000;
}
.hud-overlay.show { display: flex; }

.hud-panel {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 20px;
  width: 90%;
  max-width: 360px;
  box-sizing: border-box;
  max-height: 88vh;
  overflow-y: auto;
  color: #1A1A1A;
}

/* 头部：头像 + 名字/位置/筹码 */
.hud-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 14px;
}
.hud-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F2F2F2;
  border: 1px solid #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hud-avatar svg { width: 34px; height: 34px; fill: none; stroke: #07C160; stroke-width: 2; stroke-linecap: round; }
.hud-title { flex: 1; min-width: 0; }
.hud-name {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 4px;
}
.hud-pos-chips {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: #888888;
}
.hud-pos { color: #888888; font-weight: 600; }
.hud-chips { color: #888888; font-weight: 700; }

/* 数据区 */
.hud-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.hud-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #F7F7F7;
  border-radius: 8px;
  padding: 8px 10px;
}
.hud-stat-full { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
.hud-stat-label { font-size: 12px; color: #888888; }
.hud-stat-value { font-size: 20px; font-weight: 800; color: #1A1A1A; }
.hud-stat-full .hud-stat-value { font-size: 16px; color: #07C160; }

/* 形象判定区 */
.hud-label-section {
  padding-top: 14px;
  border-top: 1px solid #E5E5E5;
  margin-bottom: 16px;
}
.hud-label-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 10px;
}
.hud-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hud-tag {
  flex: 0 0 calc(33.333% - 6px);
  padding: 8px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #F2F2F2;
  color: #555555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.hud-tag:hover { background: #E6F6EA; color: #07C160; }
.hud-tag.active {
  background: #07C160;
  border-color: #07C160;
  color: #FFFFFF;
}

/* 已淘汰 AI：灰色提示，无数据无按钮 */
.hud-body { display: block; }
.hud-eliminated {
  display: none;
  padding: 26px 0;
  text-align: center;
  font-size: 15px;
  color: #888888;
  letter-spacing: 1px;
}
.hud-eliminated.show { display: block; }

/* 底部按钮 */
.hud-actions { display: flex; justify-content: center; }
.hud-btn {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.hud-btn:active { opacity: 0.8; }
.hud-btn-primary {
  background: #F2F2F2;
  color: #1A1A1A;
}


/* 手牌卡片 */
.rv-hand-card {
  flex-shrink: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rv-hand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-ink);
}
.rv-hand-label { color: var(--c-gray); flex-shrink: 0; }
.rv-hand-cards {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
}
.rv-hand-board {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.rv-hand-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.rv-hand-badge.win  { color: #FFFFFF; background: var(--c-green); }
.rv-hand-badge.lose { color: var(--c-gray); background: rgba(136,136,136,0.15); }
.rv-hand-delta.pos { color: var(--c-green); font-weight: 800; }
.rv-hand-delta.neg { color: var(--c-fold); font-weight: 800; }
.rv-hand-pot { margin-left: auto; font-size: 12px; color: var(--c-gray); }

/* AI 输出区：四层结构 */
.rv-output {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rv-status {
  font-size: 13px;
  color: var(--c-gray);
  padding: 4px 0;
}
.rv-status.ok { color: var(--c-green); font-weight: 700; }
.rv-status.err { color: var(--c-fold); }

/* 四层分段：每层标题绿色加粗，正文深黑 */
.rv-layer {
  border-left: 3px solid var(--c-green);
  padding: 2px 0 2px 10px;
}
.rv-layer-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-green);
  margin-bottom: 3px;
}
.rv-layer-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 流式光标：闪烁的 ▊ */
.rv-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--c-green);
  font-weight: 700;
  animation: rv-blink 1s steps(1, end) infinite;
}
@keyframes rv-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 追问：问答气泡 */
.rv-ask-item { display: flex; flex-direction: column; gap: 6px; }
.rv-ask-q {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
  background: var(--c-green);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}
.rv-ask-a {
  align-self: flex-start;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 2px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 失败重试按钮 */
.rv-retry {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-green);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.rv-retry:active { transform: scale(0.96); }

/* 底部追问输入框 */
.rv-askbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
.rv-ask-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--c-ink);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  outline: none;
}
.rv-ask-input:focus { border-color: var(--c-green); }
.rv-ask-input:disabled { opacity: 0.5; }
.rv-ask-send {
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-green);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.rv-ask-send:active { transform: scale(0.95); }
.rv-ask-send:disabled { opacity: 0.45; pointer-events: none; }

/* =====================================================================
   数据分析页（微信白卡片）+ 赛后 AI 判定结算
   ===================================================================== */
.page-stats {
  justify-content: flex-start;
  align-items: stretch;
  /* 页面自身作为纵向滚动容器：底部留 96px，避免最后一行 22 被固定导航遮挡 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px 96px;
  gap: 12px;
  box-sizing: border-box;
  background: #F7F7F7;
}
.page-stats .page-title { text-align: center; margin-bottom: 2px; color: #1A1A1A; }

/* ===== 翻前范围矩阵卡片：自适应宽度 + 充足内边距 ===== */
.ds-card.ds-card-range {
  padding: 20px 20px 24px;
}
/* 筹码走势图卡片：页面最底部，与底部导航之间保留 80px 滚动空间，确保完整可见 */
.ds-card.ds-card-chart {
  margin-bottom: 80px;
  overflow: visible;           /* 不允许裁切图表区块 */
}
/* 走势区块：常规 SNG / 无尽模式上下排列，间距 20px */
.chips-chart-block + .chips-chart-block {
  margin-top: 20px;
}
.chips-chart-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
}
/* 图表容器：固定 200px 高，Chart.js 由 maintainAspectRatio:false 自适应填充 */
.chips-chart-block .chips-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 200px;
}
.chips-chart-block .chips-chart-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* 图表空数据提示：覆盖在 canvas 之上，灰色文字，不渲染空白坐标轴 */
.chips-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999999;
  text-align: center;
  padding: 0 12px;
  box-sizing: border-box;
  pointer-events: none;
}
.chips-chart-empty[hidden] {
  display: none !important;
}
/* 13x13 矩阵：水平居中、等比例缩放，minmax(0,1fr) 保证永不撑出横向滚动条 */
.range-matrix {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* 全局积分 */
.ds-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #888888;
}
.ds-points b { font-size: 18px; font-weight: 800; color: #07C160; }

/* 白色卡片 */
.ds-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  color: #1A1A1A;
  flex-shrink: 0;              /* 不压缩卡片高度：内容完整，交给页面滚动 */
}
.ds-card-coach { border-color: #E5E5E5; }
.ds-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ds-card-title { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.ds-card-sub { font-size: 12px; color: #888888; }

/* 教练风格徽章（右上角） */
.ds-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #07C160;
  background: #E6F6EA;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-badge.pending { background: #F2F2F2; color: #888888; }
.ds-advice {
  font-size: 13px;
  line-height: 1.7;
  color: #555555;
  border-left: 3px solid #07C160;
  padding-left: 10px;
}

/* 数据格子 */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ds-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #F7F7F7;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.ds-label { font-size: 11px; color: #888888; }
.ds-value { font-size: 20px; font-weight: 800; color: #07C160; }

/* 赛后 AI 判定结算模块 */
.js-result { display: none; }
.js-result.show { display: block; }
.js-score {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  background: #F7F7F7;
  border: 1px solid #E5E5E5;
  color: #1A1A1A;
  text-align: center;
}
.js-score-main { font-size: 14px; font-weight: 700; color: #07C160; line-height: 1.6; }
/* 双轨结算明细：名次奖励 / 判定奖励 / 合计 */
.js-line { font-size: 13px; line-height: 1.7; color: #555555; }
.js-line b { color: #07C160; }
.js-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E5E5E5;
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
}
.js-total b { font-size: 26px; color: #07C160; }
.js-score-sub { font-size: 12px; color: #888888; margin-top: 4px; }
.js-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.js-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #555;
  padding: 6px 10px;
  border-radius: 8px;
  background: #F7F7F7;
}
.js-row .js-name { font-weight: 700; color: #1A1A1A; flex-shrink: 0; }
.js-row .js-mid { flex: 1; text-align: right; color: #888; }
.js-row .js-tag { font-weight: 700; flex-shrink: 0; }
.js-row.ok .js-tag { color: #07C160; }
.js-row.bad .js-tag { color: #E64340; }

/* 翻前起手牌范围矩阵（微信白/绿） */
.range-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  gap: 2px;
  line-height: 1.2;
  text-align: center;
  border-radius: 4px;
  background: #F7F7F7;
  color: #888888;
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  min-width: 0;
}
/* 主牌型：14px 加粗 */
.hand-name { font-size: 14px; font-weight: 700; line-height: 1.2; }
/* 战绩：10px，防止撑破格子 */
.hand-stats {
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.range-cell.raise { background: #07C160; color: #FFFFFF; font-weight: bold; }
.range-cell.call { background: #E6F6EA; color: #07C160; }
.range-cell.fold { background: #F7F7F7; color: #888888; }
/* 战绩文字配色：绿底用半透明白，浅绿底用深绿 */
.range-cell.raise .hand-stats { color: rgba(255, 255, 255, 0.8); font-weight: normal; }
.range-cell.call .hand-stats { color: #07C160; font-weight: normal; }
/* 对子（AA~22 对角线）：加强黑色外圈，确保不被区块边框盖住 */
.range-cell-pocket {
  background: #EDEDED;
  box-shadow: 0 0 0 2px #000000;
  z-index: 3;
}
.range-cell-pocket.raise { background: #07C160; }
.range-cell-pocket.call { background: #E6F6EA; }

/* ===== 翻前范围强度分层：外围实线包围圈 + 区块淡底色 =====
   不给单个格子加框：JS 只给每个区块「最外围」的那一侧输出 edge-t/b/l/r，
   区块内部与区块之间不重复画线；open / defend 只靠底色区分（线宽 0）。 */
.range-cell { position: relative; }
.range-cell.tier-4bet { --tier-line: #1A1A1A; --tier-width: 2px; --tier-style: solid; z-index: 2; }
.range-cell.tier-3bet { --tier-line: #666666; --tier-width: 1.5px; --tier-style: solid; z-index: 1; }
.range-cell.tier-open { --tier-line: transparent; --tier-width: 0px; --tier-style: solid; }
.range-cell.tier-defend { --tier-line: transparent; --tier-width: 0px; --tier-style: solid; }
.range-cell.edge-t { border-top: var(--tier-width) var(--tier-style) var(--tier-line); }
.range-cell.edge-b { border-bottom: var(--tier-width) var(--tier-style) var(--tier-line); }
.range-cell.edge-l { border-left: var(--tier-width) var(--tier-style) var(--tier-line); }
.range-cell.edge-r { border-right: var(--tier-width) var(--tier-style) var(--tier-line); }
/* 区块底色规则已移除：未玩过的手牌统一保持基础灰底，只有玩过的才有绿底 */
/* 未玩过的手牌：纯灰无边框，文字浅灰 */
.range-cell.unplayed {
  background: #F7F7F7;
  color: #AAAAAA;
  box-shadow: none;
  border: 0;
}
/* 对子标识与是否玩过无关：未玩过的对子仍强制保留黑色外框 */
.range-cell.unplayed.range-cell-pocket { box-shadow: 0 0 0 2px #000000; }

/* AI 教练跟踪报告 */
.ds-track {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #E5E5E5;
}
.ds-track-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #07C160;
  margin-bottom: 6px;
}
.ds-track-at { font-size: 11px; font-weight: 400; color: #AAAAAA; }
.ds-track-body {
  font-size: 12px;
  line-height: 1.6;
  color: #555555;
}

/* ===== 新建牌局弹窗：Bot 强度选择（微信白绿 Toggle） ===== */
.bot-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 12px;
  padding: 10px 12px;
  background: #F7F7F7;
  border-radius: 10px;
}
.bot-mode-label {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
}
.bot-mode-opts {
  display: flex;
  gap: 8px;
}
.bot-mode-opt {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  color: #8A8A8A;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bot-mode-opt.active {
  border-color: #07C160;
  color: #07C160;
  font-weight: 700;
  background: #E6F6EA;
}

/* ===== 新建牌局弹窗：三步式选择（微信白绿） ===== */
.new-game-modal {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ng-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ng-head .modal-title {
  flex: 1;
  margin-bottom: 0;
  text-align: left;
}
.ng-rules-btn {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #07C160;
  border-radius: 14px;
  background: #FFFFFF;
  color: #07C160;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ng-step {
  margin-bottom: 14px;
}
.ng-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ng-step-no {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #07C160;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ng-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}
.ng-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ng-opt-grid[hidden] {
  display: none !important;
}
.ng-opt {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #F5F5F5;
  color: #555555;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ng-opt.active {
  background: #07C160;
  border-color: #07C160;
  color: #FFFFFF;
}
.ng-opt-main {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;          /* 文案长短不一也保持单行、水平居中，不换行错位 */
}
.ng-opt-sub {
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
  opacity: 0.75;
}
.ng-balance {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
  color: #8A8A8A;
}
.ng-balance b {
  color: #07C160;
}
.ng-balance.insufficient,
.ng-balance.insufficient b {
  color: #E64340;
}
.ng-pace-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ng-pace-row[hidden] {
  display: none !important;
}
.ng-buy-tip {
  min-height: 16px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #E64340;
}
.ng-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
}
.ng-start-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #07C160;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(7, 193, 96, 0.28);
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ng-start-btn:active {
  transform: scale(0.99);
  opacity: 0.9;
}
.ng-start-btn:disabled {
  background: #D9D9D9;
  color: #FFFFFF;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}
.ng-cancel {
  width: 100%;
  height: 36px;
  margin-top: 0;
  border: none;
  border-radius: 18px;
  background: #F2F2F2;
  color: #666666;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== 无尽模式：顶部事件 Toast（AI 补位） ===== */
.endless-toast {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 1600;
  max-width: min(88vw, 460px);
  box-sizing: border-box;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(31, 41, 55, 0.96);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.endless-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== 无尽模式：屏幕中央大字动画（盲注升级 / 筹码封顶） ===== */
.endless-center-banner {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.16) 0%, rgba(15, 23, 42, 0) 62%);
  animation: endlessBannerFade 2.1s ease forwards;
}
.ecb-card {
  text-align: center;
  padding: 0 24px;
  animation: endlessBannerPop 2.1s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}
.ecb-title {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.15;
  color: #FDE68A;
  text-shadow: 0 0 24px rgba(251, 191, 36, 0.85), 0 0 52px rgba(245, 158, 11, 0.55);
}
.ecb-sub {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}
.ecb-sub b {
  color: #34D399;
}
.endless-center-banner.cap .ecb-title {
  font-size: clamp(30px, 6.6vw, 50px);
  color: #FFF7CC;
}
@keyframes endlessBannerPop {
  0% { transform: scale(0.72) translateY(10px); opacity: 0; }
  14% { transform: scale(1.06) translateY(0); opacity: 1; }
  24% { transform: scale(1); }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.04); opacity: 0; }
}
@keyframes endlessBannerFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* =====================================================================
   内测邀请码：全屏半透明白底 + 毛玻璃，居中白色卡片
   ===================================================================== */
.invite-gate {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.invite-gate[hidden] { display: none; }
.invite-card {
  width: min(340px, 88vw);
  padding: 26px 22px 22px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  text-align: center;
}
.invite-title {
  font-size: 18px;
  font-weight: 800;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.invite-sub {
  font-size: 12px;
  color: #8A8A8A;
  margin-bottom: 18px;
}
.invite-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  background: #FAFAFA;
  color: #1A1A1A;
  font-size: 15px;
  font-family: inherit;
  letter-spacing: 2px;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
}
.invite-input:focus {
  border-color: #07C160;
  background: #FFFFFF;
}
.invite-error {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #E64340;
  text-align: center;
}
.invite-btn {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border: none;
  border-radius: 10px;
  background: #07C160;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.invite-btn:active { opacity: 0.86; }
.invite-card.shake { animation: inviteShake 0.28s ease; }
@keyframes inviteShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* =====================================================================
   新手引导：蒙层高亮底部导航（spotlight + 说明卡片）
   ===================================================================== */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 19999;
}
.tut-overlay[hidden] { display: none; }
/* 点击拦截层：引导期间禁止操作底层界面 */
.tut-catcher {
  position: fixed;
  inset: 0;
  z-index: 0;
}
/* 高亮挖孔：巨大外阴影形成四周蒙层，边框标出目标 */
.tut-spotlight {
  position: fixed;
  z-index: 1;
  border-radius: 12px;
  border: 2px solid rgba(7, 193, 96, 0.9);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}
.tut-card {
  position: fixed;
  z-index: 2;
  width: min(300px, 84vw);
  padding: 16px 16px 14px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
  transition: top 0.22s ease, left 0.22s ease;
}
.tut-step {
  font-size: 11px;
  font-weight: 700;
  color: #07C160;
  margin-bottom: 6px;
}
.tut-text {
  font-size: 14px;
  line-height: 1.55;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.tut-btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #07C160;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tut-btn:active { opacity: 0.86; }



/* ===== 无尽模式动画 ===== */
@keyframes blindUpPulse {
  0%   { transform: scale(0.5); opacity: 0; filter: blur(10px); }
  20%  { transform: scale(1.15); opacity: 1; filter: blur(0); }
  35%  { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes popScale {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =====================================================================
   v206 · 座位信息终极修复（按产品给出样式强制落地）
   DOM：.seat > .seat-mid > (.avatar-wrapper + .info-wrapper) + .bet-chip
   - .avatar-wrapper：只放头像（+ 牌背），承担椭圆锚点与方位留白
   - .info-wrapper ：绝对定位在头像正下方，半透明黑底，纵向排列
   - .bet-chip     ：独立绝对定位在头像右上角，绝不压文字
   ===================================================================== */
.table-layer .seat.seat-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.table-layer .seat.seat-ai .seat-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: max-content;
  min-width: 0;
  transform: none;
}
.table-layer .seat.seat-ai .avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
}
/* 方位留白放在头像容器上，保持“座位顶边 = 头像顶边”的椭圆锚点 */
.table-layer .seat.seat-ai.pos-top .seat-slot { margin-top: 0; }
.table-layer .seat.seat-ai.pos-bottom .seat-slot { margin-bottom: 0; }
.table-layer .seat.seat-ai.pos-top .avatar-wrapper { margin-top: calc(var(--hand-h) + 4px); }
.table-layer .seat.seat-ai.pos-bottom .avatar-wrapper { margin-bottom: calc(var(--hand-h) + 4px); }

/* —— 信息区：头像正下方，黑底（深色字压在绿毛毡上根本看不清） —— */
.table-layer .seat.seat-ai .info-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;                            /* v216 放大 */
  border-radius: 6px;
  z-index: 10;
  white-space: nowrap;
  width: max-content;
  max-width: 150px;                             /* v216 112→150 */
  margin: 0;
}
/* 名字 / 位置 / 筹码：类名映射 .player-name / .seat-badge-line / .seat-chips-row */
.table-layer .seat.seat-ai .info-wrapper .player-name {
  font-size: 14px; color: #fff; line-height: 1.2; font-weight: 700;   /* v216 11→14 */
}
.table-layer .seat.seat-ai .info-wrapper .seat-badge-line-wrap { min-height: 0; }
.table-layer .seat.seat-ai .info-wrapper .seat-badge-line {
  font-size: 11px; color: #aaa; line-height: 1.2; font-weight: 500; min-height: 0;   /* v216 9→11 */
}
.table-layer .seat.seat-ai .info-wrapper .seat-chips-row.player-chips {
  font-size: 15px; color: #fbbf24; line-height: 1.2; font-weight: bold;   /* v216 12→15 */
  background: transparent; border: none; padding: 0; min-height: 0; text-shadow: none;
}
/* Reback 文字不再摆桌面（手机上太占地方，HUD 内查看） */
.table-layer .seat.seat-ai .info-wrapper .ai-reback-pill { display: none !important; }

/* —— 下注筹码：独立定位在头像右上，绝不盖住信息区 —— */
.table-layer .seat.seat-ai .bet-chip {
  position: absolute;
  top: -20px;
  right: -20px;
  left: auto;
  bottom: auto;
  translate: none;
  transform: none;
  background: #000;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  height: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  z-index: 15;
}

/* =====================================================================
   玩家区（.seat-hero 实际 class 为 .seat-bottom / #seat-0）
   手牌在最前，筹码 + 名字紧贴手牌正下方，下注标签浮在手牌上方靠外
   ===================================================================== */
/* 座位盒保持 133px：牌桌/椭圆几何不变；手牌位移 160→117 相抵，视觉位置不变 */
.seat-bottom .seat-mid { min-height: 133px; }
.seat-zone-bottom .seat-bottom .hero-hand {
  transform: translate(-50%, calc(-50% - 117px));
}
/* 信息区：手牌底边下方 5px（手牌底边位于座位盒顶上方 18px ⇒ top: -13px） */
.seat-bottom .info-wrapper {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: transparent;
  white-space: nowrap;
  z-index: 10;
}
.seat-bottom .info-wrapper .seat-chips-row.player-chips {
  background: transparent; border: none; padding: 0; text-shadow: none;
}
.seat-bottom .info-wrapper .seat-id-row { margin: 0; }
/* 下注标签：浮在手牌上方（朝底池一侧），与手牌/筹码保持 8px 间距 */
.seat-bottom .bet-chip {
  top: auto;
  bottom: calc(100% + 134px);
  left: 50%;
  translate: -50% 0;
  transform: none;
  z-index: 15;
}

/* =====================================================================
   伪横屏：操作按钮贴物理右边缘竖向排列
   已改为纯类名 body.portrait-body（见文件末尾 v220 段），此处不再使用媒体查询。
   ===================================================================== */

/* =====================================================================
   v207 · 产品指定终极覆盖（按用户原稿逐条落地，全部 !important）
   类名映射（原稿类名 → 真实 DOM 类名）：
   .btn → .action-btn；.pot-container → .pot-display；.seat-hero → .seat-bottom
   ===================================================================== */

/* 【一】强制 AI 信息垂直排列（干掉并排） */
.info-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  gap: 2px !important;
  line-height: 1 !important;
}
.info-wrapper .player-name,
.info-wrapper .seat-badge-line,
.info-wrapper .seat-chips-row {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* 【二】操作按钮靠右垂直排列 —— 只在竖屏（伪横屏场景）生效。
   已改为纯类名 html body.portrait-body ...（见文件末尾 v220 段）：
   body 由 JS 按 innerHeight > innerWidth 直接加 portrait-body 类，
   不再依赖 (pointer: coarse)，避免微信内置浏览器判定失败导致规则整体失效。 */

/* 【三】强制修复玩家手牌与筹码错位 */
.seat-bottom .info-wrapper {
  position: static !important;
  margin-top: 8px !important;
  background: transparent !important;
  transform: none !important;   /* 抵消上一版居中用的 translateX(-50%)，否则静态流会向左偏半格 */
}
/* 下注标签上移：手牌整体上移 117px，原稿 top:-25px 会压在手牌上，
   这里等价换成「手牌顶边上方 8px」，避免再次叠字 */
.seat-bottom .bet-chip {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 134px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 15 !important;
}

/* 【四】底池缩小并右移，别挡公共牌 —— ⚠️ 只在伪横屏生效。
   原来这条是全局规则，电脑端也被 left:55% + scale(0.85) 命中，
   表现就是「电脑端底池歪斜/偏右」。 */
.game-detail.portrait .pot-container,
.game-detail.portrait .pot-display {
  position: relative !important;
  transform: scale(0.85) !important;
  left: 55% !important;
}

/* =====================================================================
   v208 · 已废弃（反向旋转方案被产品否决，整块删除，恢复文字原有的反向旋转）
   ===================================================================== */

/* =====================================================================
   v209 · 幽灵按键终极隔离（纯 CSS 兜底，不依赖 JS 执行时序）
   ⚠️ 类名说明：JS 的 setTableMode(on) 切换的是 body.table-mode，
      项目中不存在 in-table-mode。这里必须用真实类名，否则按钮会永久不显示。
   特异性说明：旧规则 .action-bar.portrait{display:flex!important} 是 (0,2,0)，
   body .action-bar 只有 (0,1,1) 压不住它 —— 所以这里统一加 html 前缀并带上
   .portrait / .show 变体，保证任何页面（含伪横屏）都藏得住。
   ===================================================================== */
/* ① 默认（非牌桌模式）全局隐藏：大厅 / 我的 / 数据分析 / 精彩手牌 全部生效 */
html body:not(.table-mode) .action-bar,
html body:not(.table-mode) .action-bar.portrait,
html body:not(.table-mode) .raise-panel,
html body:not(.table-mode) .raise-panel.show {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ② 只有进入牌桌（body 有 table-mode）才允许显示；排除 folded / hidden 两种内部隐藏态 */
html body.table-mode .action-bar:not(.folded):not([hidden]) {
  display: flex !important;
}
html body.table-mode .raise-panel.show:not([hidden]) {
  display: block !important;
}

/* =====================================================================
   v210 · 产品指定「死板写死」方案（彻底停用反向旋转；伪横屏 AI 信息 absolute 写死）
   选择器带上 .table-layer .seat-ai，特异性 (0,5,0)，稳压 v206 的 (0,4,0)，
   保证这条一定是最后生效的那一条，不再出现「写了没用」。
   ===================================================================== */
.game-detail.portrait .table-layer .seat-ai .info-wrapper {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;   /* 头像正下方 */
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 0, 0, 0.8) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  width: max-content !important;
  max-width: 150px !important;
  z-index: 100 !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper > div {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  line-height: 1.2 !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper .player-name {
  font-size: 14px !important;
  color: #fff !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper .seat-badge-line {
  font-size: 11px !important;
  color: #aaa !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper .seat-chips-row {
  font-size: 15px !important;
  color: #fbbf24 !important;
}

/* 【第四步】玩家手牌区：信息区回归最简单的文档流，靠左显示，不再绝对定位 */
.game-detail.portrait .seat-bottom .info-wrapper {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.game-detail.portrait .seat-bottom .info-wrapper > div {
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* =====================================================================
   v211 · 产品原稿（原封不动追加）
   ===================================================================== */
.portrait .info-wrapper {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0,0,0,0.8) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  width: max-content !important;
  z-index: 100 !important;
}
.portrait .info-wrapper > div {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  line-height: 1.2 !important;
}
.portrait .info-wrapper .player-name { font-size: 11px !important; color: #fff !important; }
.portrait .info-wrapper .seat-badge-line { font-size: 9px !important; color: #aaa !important; }
.portrait .info-wrapper .seat-chips-row { font-size: 15px !important; color: #fbbf24 !important; }

.portrait .action-bar {
  position: fixed !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  z-index: 9999 !important;
}
.portrait .action-bar .action-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  margin: 0 !important;
}

/* =====================================================================
   v211 · 强制生效层
   原稿里 `.portrait .action-bar` 永远匹配不到（action-bar 是 body 子元素，
   不在 #gameDetail 内），这里用媒体查询补一份；AI 信息容器则把选择器提到
   (0,5,0)，压过 v206 的 (0,4,0)，保证「写了就一定生效」。
   ===================================================================== */
/* v211 的媒体查询操作栏规则已删除：改用纯类名 body.portrait-body（见文件末尾 v220 段） */
.game-detail.portrait .table-layer .seat-ai .info-wrapper {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0,0,0,0.8) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  width: max-content !important;
  z-index: 100 !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper > div {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  line-height: 1.2 !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper .player-name { font-size: 14px !important; color: #fff !important; }
.game-detail.portrait .table-layer .seat-ai .info-wrapper .seat-badge-line { font-size: 11px !important; color: #aaa !important; }
.game-detail.portrait .table-layer .seat-ai .info-wrapper .seat-chips-row { font-size: 15px !important; color: #fbbf24 !important; }

/* =====================================================================
   v212 · 收尾三项
   ① AI 座位点击热区：抬高层级 + 恢复 pointer-events，保证头像可点
   ② 右侧操作栏缩小并贴边，减少对右侧 AI 座位的遮挡
   ③ AI 信息黑底框统一宽度，名字超长截断
   ===================================================================== */

/* ① 座位整体抬到最高层，头像/头像容器都是可点区域（点击委托挂在 document 上，
     只要事件目标是 .seat-ai 内部节点即可触发 openHudPanel） */
.table-layer .seat.seat-ai {
  z-index: 999 !important;
  pointer-events: auto !important;
}
.table-layer .seat.seat-ai .avatar-wrapper,
.table-layer .seat.seat-ai .avatar,
.table-layer .seat.seat-ai .seat-slot {
  pointer-events: auto !important;
}
.table-layer .seat.seat-ai .avatar {
  position: relative !important;
  z-index: 999 !important;
}

/* ② 操作栏尺寸/贴边规则已移到文件末尾 v220 段（纯类名 body.portrait-body，不再用媒体查询） */

/* ③ 黑底信息框统一宽度 84px（v216 60→84 放大），文字不换行、超长省略 */
.game-detail.portrait .table-layer .seat-ai .info-wrapper {
  min-width: 84px !important;
  width: 84px !important;
  max-width: 84px !important;
  overflow: hidden !important;
}
.game-detail.portrait .table-layer .seat-ai .info-wrapper .player-name,
.game-detail.portrait .table-layer .seat-ai .info-wrapper .seat-chips-row {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =====================================================================
   v213 · 桌面端兜底
   未进入牌桌时，详情页与加载遮罩绝不占屏（防止透明层盖住大厅导致“点了没反应”）
   ===================================================================== */
#gameDetail[hidden],
#gameDetail[hidden] *,
#loadingOverlay[hidden] {
  display: none !important;
}

/* v216 的电脑端画布规则已删除：几何统一由文件末尾 v221 的媒体查询负责，
   否则 (1,2,0) 的特异性会压过后面的横屏规则、导致画布被二次缩放。 */

/* =====================================================================
   v217 · 伪横屏文字反向旋转（整块转，内部不再逐字转）
   画布被 rotate(90deg) 后，文字会被转倒；这里把「信息整块」反向转回来，
   块内的 flex 纵排在屏幕上就是真正的竖排，且不会出现同轴挤压。
   ===================================================================== */
/* =====================================================================
   v227 · 统一朝向：整张牌桌上的一切（信息框 / 底池 / 提示）都与 hero 手牌同方向
   父容器已 rotate(90deg)，这里不再做任何反向旋转，只保留各自的居中位移。
   ===================================================================== */
/* AI 座位信息框：保留 left:50% 的水平居中位移 */
#gameDetail.portrait .table-layer .seat-ai .info-wrapper {
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
}
/* 玩家信息框（绝对定位 + translateX(-50%) 居中） */
#gameDetail.portrait .seat-bottom .info-wrapper {
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
}
/* 信息框内部的文字/行一律不再单独旋转 */
#gameDetail.portrait .seat .info-wrapper span.player-name,
#gameDetail.portrait .seat .info-wrapper [id^="chips-"],
#gameDetail.portrait .seat .info-wrapper .seat-badge-line,
#gameDetail.portrait .seat .info-wrapper .seat-chips-row,
#gameDetail.portrait .seat .info-wrapper .seat-id-row,
#gameDetail.portrait .seat .info-wrapper .player-chips,
#gameDetail.portrait .seat .info-wrapper .player-name {
  transform: none !important;
}
/* 底池胶囊：与手牌同方向，只做轻微缩放，内部数值不再单独旋转 */
#gameDetail.portrait .pot-display {
  transform: scale(0.9) !important;
  transform-origin: center center !important;
}
#gameDetail.portrait .pot-display #potValue,
#gameDetail.portrait .pot-display .pot-value,
#gameDetail.portrait .pot-display .pot-blinds {
  transform: none !important;
}

/* =====================================================================
   v218 · 收口
   ① 详情页隐藏时，body 下的浮动操作栏/加注面板绝不允许单独残留
      （否则大厅白底 + 悬浮按钮 = 用户看到的「白屏只剩按钮」）
   ② 座位热区：显式可点，且不因公共牌区的 pointer-events 规则被牵连
   ===================================================================== */
body:has(#gameDetail[hidden]) .action-bar,
body:has(#gameDetail[hidden]) .raise-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#gameDetail .table-layer .seat,
#gameDetail .table-layer .seat .avatar-wrapper,
#gameDetail .table-layer .seat .seat-slot,
#gameDetail .table-layer .seat .avatar,
#gameDetail .table-layer .seat .ai-hand,
#gameDetail .table-layer .seat .hero-hand {
  pointer-events: auto !important;
}
/* 座位(10) 已在 .table-layer 的层叠上下文里高于公共牌区(center-zone 6)；
   这里只保证 AI 座位不被后写入的规则压回去 */
#gameDetail .table-layer .seat.seat-ai {
  z-index: 999 !important;
}

/* =====================================================================
   v222 · 纯 JS 类名 + 原生 CSS（零媒体查询 / 零 dvh）
   · gameClient.js 初始化时只判定一次 window.innerHeight > window.innerWidth，
     给 <html> 加/移除 .is-mobile-portrait，绝不在 resize 里循环。
   · 下面的几何规则只认这个类名，不依赖任何 @media 与动态视口单位。
   ===================================================================== */

/* ---------- ① 竖屏手机：整页锁死，禁止一切滑动 / 回弹 ----------
   地址栏不收放 → 不会触发 resize → 不会再有高频重绘（闪烁的根源） */
html.is-mobile-portrait,
html.is-mobile-portrait body {
  overflow: hidden !important;
  width: 100vw !important;
  /* 用 JS 实测的可视高度（innerHeight），比 100vh 更贴近真实屏幕：
     iOS/微信地址栏占高时 100vh 会多出 60px，底部导航被顶出屏幕 */
  height: var(--app-h, 100vh) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  overscroll-behavior: none !important;
}
/* 只有对局中才禁手势；大厅列表（.games-list-body 等内部滚动容器）仍可正常滑动 */
html.is-mobile-portrait body.table-mode,
html.is-mobile-portrait body.raise-open {
  touch-action: none !important;
}

/* ---------- ② 对整个对局页 rotate(90deg)，铺满物理屏幕 ---------- */
html.is-mobile-portrait #gameDetail {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  /* 宽高对调：宽 = 物理可视高度，高 = 物理可视宽度。
     用 JS 实测的 --app-h/--app-w，绝不用裸 100vh/100vw（手机浏览器地址栏会撑爆）。 */
  width: var(--app-h, 100vh) !important;
  height: var(--app-w, 100vw) !important;
  transform: rotate(90deg) translateY(-100%) !important;
  transform-origin: top left !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  display: block !important;
  z-index: 9999 !important;
}
/* ⚠️ 特异性必须高于上面的 display:block（(1,2,1) > (1,2,0)）：
   否则退出对局后牌桌不会真正隐藏，而是浮在大厅上 */
html.is-mobile-portrait #gameDetail[hidden] {
  display: none !important;
}

/* 设计稿画布：在旋转后的父级里居中，只做一次 scale，绝不叠加 rotate
   宽度由 JS 按手机长宽比写入 --canvas-w（高度恒 720）：20:9 手机会得到约 1584px 宽的画布，
   旋转后正好铺满物理屏幕，左右不再留 170px 黑边；竖向几何完全不变。 */
html.is-mobile-portrait #gameDetail .table-wrapper {
  width: var(--canvas-w, 1280px) !important;
  height: 720px !important;
  left: 50% !important;
  top: 50% !important;
  margin-left: calc(var(--canvas-w, 1280px) / -2) !important;
  margin-top: -360px !important;
  transform: scale(var(--table-scale, 1)) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
}
/* 伪横屏：牌桌尽量吃满竖向空间（物理左右两侧），压缩桌沿与屏幕边缘的空隙；
   AI 座位椭圆同步外扩，保证头像仍精确贴在桌沿上。 */
html.is-mobile-portrait #gameDetail .poker-table {
  height: 82% !important;
  max-height: calc(100% - 2%) !important;
}
html.is-mobile-portrait #gameDetail .table-layer .seat.seat-ai {
  --seat-rx: 44.5%;
  --seat-ry: 40%;
}

/* ---------- ③ 操作栏：画布内、hero 手牌正下方，随牌桌一起旋转（与手牌同向） ----------
   伪横屏/横屏/桌面三种情况几何完全一致：画布底边居中，紧跟手牌与信息行之下。 */
#gameDetail .seat-zone-bottom .action-bar {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
}
/* 设计稿 1280×720 会被整体 scale，按钮按设计稿尺寸给到 72px（手机上约 39~45 物理像素） */
#gameDetail .seat-zone-bottom .action-bar .action-btn {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  font-size: 17px !important;
}

/* ---------- ③b AI 信息黑框：与玩家手牌同方向（不再反向旋转）----------
   手牌（.hero-hand / .hole-card）在伪横屏下不叠加任何反向旋转，
   黑框必须保持一致：只保留 left:50% 的水平居中位移。
   用 html 前缀把特异性提到 (1,4,1)，稳压此前 v217 的 rotate(-90deg)。 */
html.is-mobile-portrait #gameDetail .table-layer .seat-ai .info-wrapper {
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
}
/* 黑框内部的文字/行一律不单独旋转 */
html.is-mobile-portrait #gameDetail .info-wrapper > div,
html.is-mobile-portrait #gameDetail .info-wrapper span {
  transform: none !important;
}

/* ---------- ④ 电脑端 / 横屏手机：没有 is-mobile-portrait 类，完全不旋转 ----------
   必须像视频全屏一样铺满当前视口：不依赖 --app-h（窗口缩放/地址栏变化后会变旧值，
   旧值比真实视口小 → 牌桌下半截被裁掉 = 用户说的「显示不完全」）。
   画布仍由 .table-wrapper 的 1280×720 + scale 负责，这里只负责容器铺满。 */
html:not(.is-mobile-portrait) #gameDetail {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  /* 用 JS 实测的可视高度：桌面端 100% / 100vh 会多算浏览器工具栏，牌桌底部被裁 */
  height: var(--app-h, 100vh) !important;
  margin: 0 !important;
  transform: none !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  display: block !important;
}
html:not(.is-mobile-portrait) #gameDetail[hidden] {
  display: none !important;
}

/* ---------- ⑤ 对局中必须彻底藏掉所有页面级导航（含横屏/电脑端）----------
   .bottom-nav 的 z-index 也是 9999，与 #gameDetail 同级，DOM 顺序在后 → 会盖在牌桌之上，
   表现就是「横屏时大部分导航遮挡牌桌」。这里用 id 选择器 + !important 双保险。 */
body.table-mode #bottomNav,
body.table-mode #bottomNav.bottom-nav,
body.table-mode .bottom-nav,
body.table-mode .detail-head,
body.table-mode #appHeader,
body.table-mode .app-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =====================================================================
   v228 · 手机浏览器真实横屏实验已下线（红线：移动端只走伪横屏 rotate(90deg)，
   绝不用 requestFullscreen + orientation.lock，也绝不用 dvh —— 全是频闪根源）。
   原 browser-landscape-lock 规则块与 dvh @supports 块已全部删除。
   ===================================================================== */

/* =====================================================================
   v229 · 玩家区按产品坐标系重排
   坐标系（设计稿 1280×720）：+x 向右 = Reback 方向；+y 向上 = 对面桌沿方向。
   hero 手牌中心 (640, 509)，横向占 x 577~703。
     · 三个交互按钮：放在手牌 y 负半轴（下方），沿 x 从负到正横排
       （弃牌 → 过牌/跟注 → 加注），不再竖排。
     · 玩家信息：移到手牌 x 正半轴（右侧），垂直与手牌中心对齐。
     · 底池：取消 v207 的 left:55% 右移，x 回中轴 = 与手牌对齐。
   ===================================================================== */

/* ① 操作栏：横向单排，整体贴住画布底边中线（hero 手牌正下方）。
   ⚠️ 这里绝不写 display：显示权交给 .action-bar 基础规则与 .folded/[hidden] 隐藏规则。 */
html body #gameDetail .seat-zone-bottom .action-bar {
  position: absolute !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 36px !important;             /* 上移到手牌正下方，收掉手牌与按钮之间的大片空白 */
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}
html body #gameDetail .seat-zone-bottom .action-bar .action-btn {
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
}

/* ② 玩家信息（筹码 + 名字 + 位置）：手牌右侧外 15px，垂直居中于手牌。
   用 #seat-0 双 id 特异性稳压所有 .portrait 旧规则（含 position:static 那条）。 */
html body #gameDetail #seat-0 .info-wrapper {
  position: absolute !important;
  left: calc(50% + 78px) !important;    /* 手牌右缘 +63px，再留 15px */
  top: -72px !important;                /* 手牌中心线（seat-mid 顶边上方 72px） */
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  background: transparent !important;
  z-index: 20 !important;
}
html body #gameDetail #seat-0 .info-wrapper > div {
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* ③ 底池：相对定位的 left:55% 等于把整个胶囊右移半个身位；
   归零后底池回到牌桌中轴，与 hero 手牌 x 完全对齐。 */
html body #gameDetail .pot-display {
  left: 0 !important;
}

/* =====================================================================
   v230 · 弃牌隐藏 / 状态胶囊 / AI 形象判定面板
   ===================================================================== */

/* ① 弃牌 / 加载 / 非玩家回合：操作栏必须彻底消失。
   兜底规则：folded（animateFold 同步打上）或 hidden 任一成立 → display:none。
   这条特异性 (1,4,2) 高于 v229 的操作栏几何规则，任何代码路径都无法再把它“露出来”。 */
html body #gameDetail .seat-zone-bottom .action-bar.folded,
html body #gameDetail .seat-zone-bottom .action-bar[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ② 状态胶囊（延时卡 / Reback）：
   DOM 已交换为「Reback 在上、延时卡在下」；尺寸做成上小下大。
   延时卡是真正可点的主按钮 → 放大到 18px 字 + 大内边距。 */
html body #statusCorner {
  gap: 10px !important;
}
html body #statusCorner #pillReback {
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  opacity: 0.92 !important;
}
html body #statusCorner #pillDelay:not(.dim) {
  pointer-events: auto !important;          /* 压过 .game-detail.portrait .status-pill 的 none */
  cursor: pointer !important;
}
html body #statusCorner #pillDelay {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 8px 18px !important;
  border-radius: 12px !important;
}
html body #statusCorner #pillDelay span {
  font-size: 20px !important;
}

/* ③ AI 形象判定面板（#hudOverlay）：伪横屏下与 hero 手牌同方向（整体 rotate 90°）。
   根因：它只有 .hud-overlay 类、没有 .modal-overlay，从未被 updateTableScale 加上 .portrait，
   所以在旋转后的牌桌上永远是一张「竖屏的小卡片」。
   尺寸按旋转后的画布给到一块居中大公告板，头像（AI 形象）同步放大。 */
#hudOverlay.portrait {
  /* 宽高对调：宽 = 物理高度、高 = 物理宽度（用 JS 实测的 --app-h/--app-w，避开微信 100vh 偏差） */
  width: var(--app-h, 100vh);
  height: var(--app-w, 100vw);
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  margin-left: calc(var(--app-h, 100vh) / -2);
  margin-top: calc(var(--app-w, 100vw) / -2);
  transform: rotate(90deg);
  transform-origin: center center;
}
#hudOverlay.portrait .hud-panel {
  width: min(80%, 900px) !important;
  max-width: none !important;
  max-height: 86% !important;
  padding: 22px 26px !important;
}
#hudOverlay.portrait .hud-avatar {
  width: 68px !important;
  height: 68px !important;
}
#hudOverlay.portrait .hud-avatar svg {
  width: 44px !important;
  height: 44px !important;
}
#hudOverlay.portrait .hud-name {
  font-size: 20px !important;
}

/* =====================================================================
   v234 · 顶部 AI（#seat-4 / #seat-5）行动提示修复：黑框正下方
   ⚠️ 只改顶部两个座位的提示层，绝不触碰画布宽度、rotate 旋转、底部操作按钮、延时卡。
   根因：v212 给 .info-wrapper 设了 width:60px + overflow:hidden（用来裁长名字），
   v232 把气泡/下注胶囊挂进黑框内部后，子元素整块被这层 clip 裁掉 → 微信端完全看不见。
   ① 顶部两个座位整体下移 30px，完整落在可视区域内；
   ② 放开 #seat-4 / #seat-5 黑框的裁剪（其余座位仍保留 overflow:hidden）；
   ③ 气泡 + 下注胶囊以黑框为基准，绝对定位到黑框正下方，水平居中。
   ===================================================================== */

/* ① 顶部座位下移：只改 pos-top（= seat-4 / seat-5），椭圆半径与其它座位保持不变 */
.table-layer .seat.seat-ai.pos-top {
  transform: translate(-50%, calc(-1 * (var(--seat-av) + var(--hand-h) + 4px) + 30px)) !important;
}

/* ② 只放开顶部两个黑框的裁剪：子元素（气泡/胶囊）要探出 60px 宽的黑框 */
.table-layer #seat-4 .info-wrapper,
.table-layer #seat-5 .info-wrapper {
  overflow: visible !important;
}

/* ③ 黑框内部的两个浮层：绝对定位到黑框正下方，水平居中只靠 translate
   （transform 会被 betPop 动画 / .seat-crown / 伪横屏规则改写，不能用来居中） */
.table-layer #seat-4 .info-wrapper .action-bubble.bubble-ai,
.table-layer #seat-5 .info-wrapper .action-bubble.bubble-ai,
.table-layer #seat-4 .info-wrapper .bet-chip,
.table-layer #seat-5 .info-wrapper .bet-chip {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  translate: -50% 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 999 !important;
}
/* 行动气泡：黑框正下方 8px（跟注/加注额度、弃牌/过牌选择都在这条气泡里） */
.table-layer #seat-4 .info-wrapper .action-bubble.bubble-ai,
.table-layer #seat-5 .info-wrapper .action-bubble.bubble-ai {
  top: calc(100% + 8px) !important;
  max-width: 150px !important;
  padding: 3px 9px !important;
  transform: scale(0.9) !important;
  transform-origin: center top !important;
}
.table-layer #seat-4 .info-wrapper .action-bubble.bubble-ai.show,
.table-layer #seat-5 .info-wrapper .action-bubble.bubble-ai.show {
  transform: scale(1) !important;
}
/* 下注胶囊：气泡之下再排一行，绝不压住黑框文字 */
.table-layer #seat-4 .info-wrapper .bet-chip,
.table-layer #seat-5 .info-wrapper .bet-chip {
  top: calc(100% + 34px) !important;
  height: 19px !important;
  padding: 0 8px !important;
  line-height: 17px !important;
  border-radius: 999px !important;
}

/* =====================================================================
   v233 · 延时卡胶囊：微信绿主色 + 数量文案 + 用尽透明态
   文案结构已由 index.html 提供：「延时卡 ×<span id="pillDelayCount">N</span>」，
   数量更新统一走 gameClient 的 renderDelayPill()。
   ===================================================================== */
html body #statusCorner #pillDelay {
  background: #07C160 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(7, 193, 96, 0.38) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
html body #statusCorner #pillDelay span {
  color: #FFFFFF !important;
}
/* 用尽：半透明 + 不可点（保留 DOM 占位，不引起其它胶囊位移；
   淘汰 AI 奖励后 renderDelayPill 会摘掉 .depleted → 立即恢复绿色可点） */
html body #statusCorner #pillDelay.depleted {
  opacity: 0.3 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}