/* ============================================================
 * 金花世界 —— 全站样式 v2（20260907 改版）
 * 高端棋牌俱乐部：炭黑绿底 + 鎏金 + 翡翠牌桌 + 磨砂玻璃
 * 设计令牌见 :root；结构/断点与 v1 保持一致
 * ============================================================ */

:root {
  /* 品牌 */
  --gold: #e8c268;
  --gold-deep: #c9a24a;
  --gold-dark: #8a6d2f;
  /* 背景：炭黑绿（页面底色），翡翠只留给牌桌 */
  --bg-1: #0a0f0c;
  --bg-2: #101913;
  /* 牌桌：翡翠绒面 */
  --felt-1: #1a5238;
  --felt-2: #0f3524;
  /* 磨砂玻璃面板 */
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --panel-border: rgba(255, 255, 255, 0.10);
  --gold-border: rgba(232, 194, 104, 0.35);
  /* 文字 */
  --text: #f2eee2;
  --text-dim: #a8b0a6;
  --text-faint: #8a948a;
  /* 状态色 */
  --red: #e05252;
  --green-ok: #57d68a;
  --danger: #d9534f;
  --radius: 20px;
  --radius-sm: 14px;
  /* 字体栈：衬线标题 / 无衬线正文 / 等宽数字 */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: "Outfit", "SF Pro Display", "PingFang SC", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: radial-gradient(ellipse at 50% -10%, var(--bg-2) 0%, var(--bg-1) 70%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* 牌局中防止下拉误触刷新页面 */
  overscroll-behavior-y: contain;
}

.gold { color: var(--gold); }
.muted { color: var(--text-faint); font-size: 13px; }

/* 数字统一等宽感 */
.seat-chips, .chip-tag, .pot b, .stat-inline b, .lb-chips,
.cs-sub b, .net-stake-line b, .game-meta b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 通用按钮（胶囊体系） ---------------- */
.btn {
  border: none;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  letter-spacing: 1px;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
/* P0-4 操作反馈：按下时轻微缩放，给明确的"点到了"触感 */
.btn:active { transform: scale(.93); filter: brightness(1.18); }
/* P0-4 按钮缩放（用于加注档位等持久按钮，与主操作的 :active 触感互补） */
.btn-pop { animation: btnPop .26s ease; }
@keyframes btnPop {
  0% { transform: scale(1); }
  45% { transform: scale(.92); }
  100% { transform: scale(1); }
}
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* 图标按钮：无文字，用于顶部返回/规则/邀请等 */
.btn-icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}

/* 移动端触控加固：快速连点不触发双击缩放 / 误选文字 */
.btn, .tab, .raise-panel .opt, .opseat.selectable, .mode-card {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn-gold {
  background: linear-gradient(160deg, #f3d98b, var(--gold) 45%, var(--gold-deep));
  color: #1a1206;
  border: none;
  box-shadow: 0 6px 22px rgba(232, 194, 104, .32);
}
.btn-ghost { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.btn-danger { background: linear-gradient(160deg, #e07070, var(--danger)); color: #fff; border: none; }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-mini { padding: 3px 10px; font-size: 12px; border-radius: 8px; line-height: 1.5; }

/* ==================== 登录页 ==================== */
#view-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(232,194,104,.08) 0%, transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(26,82,56,.28) 0%, transparent 45%);
}
#view-auth .beian {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  opacity: .75;
}
#view-auth .beian a { color: var(--text-faint); text-decoration: none; }
/* 备案信息通用排布：两个号（工信部 + 公安）并排，窄屏自动换行，避免挤成一条 */
.beian {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 6px;
}
.beian-sep { opacity: .55; }
.auth-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 36px 34px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.brand { text-align: center; margin-bottom: 26px; }
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(160deg, #f3d98b, var(--gold) 55%, var(--gold-deep));
  filter: drop-shadow(0 6px 16px rgba(232,194,104,.4));
}
.brand-logo svg { width: 32px; height: 32px; display: block; }
.brand h1 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 6vw, 32px);
  letter-spacing: 6px;
  line-height: 1.25;
  margin: 12px 0 6px;
  background: linear-gradient(160deg, #f7e7b0, var(--gold) 50%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: keep-all;
}
.brand-sub { color: var(--text-faint); font-size: 13px; letter-spacing: 2px; line-height: 1.6; max-width: 280px; margin: 0 auto; }

.tabs { display: flex; gap: 4px; margin-bottom: 22px; padding: 4px; background: rgba(0,0,0,.2); border-radius: 999px; border: 1px solid rgba(255,255,255,.08); }
.tab {
  flex: 1;
  padding: 9px 10px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
}
.tab.active { background: rgba(232,194,104,.18); color: var(--gold); box-shadow: 0 2px 8px rgba(232,194,104,.12); }

#auth-form label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--text-dim); }
#auth-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#auth-form input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(232,194,104,.12); }
.form-error { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
#btn-guest { margin-top: 12px; }
.btn-ghost { transition: all .15s; }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }

/* 落地页三大入口 + 社交小字（20260930q） */
.entry-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.entry-row .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.auth-panel { margin-bottom: 6px; animation: panelIn .22s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.auth-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--text-faint); }
.auth-links a { color: var(--text-faint); text-decoration: none; transition: color .15s; cursor: pointer; }
.auth-links a:hover { color: var(--gold); }
.auth-links .dot { opacity: .5; }

/* 排行榜弹窗 */
.lb-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.lb-modal-card { width: 100%; max-width: 380px; max-height: 80vh; overflow-y: auto; background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 20px 20px 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lb-modal-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.lb-modal-close { cursor: pointer; font-size: 18px; color: var(--text-faint); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .15s; }
.lb-modal-close:hover { background: rgba(255,255,255,.1); color: var(--text); }

/* ==================== 大厅 ==================== */
.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
}
.lobby-user { display: flex; align-items: center; gap: 10px; font-size: 15px; }

/* 玩法说明下方：品牌 + 自己的信息 */
.lobby-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 900px) {
  .lobby-footer { flex-direction: column; gap: 8px; text-align: center; }
  .footer-stats { margin-left: 0; padding-left: 0; border-left: none; }
}

/* 底栏内联统计（总对局/胜场/胜率，紧跟筹码后） */
.footer-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 14px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.stat-inline { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.stat-inline b { font-size: 17px; font-weight: 700; color: var(--gold); }
.stat-inline label { font-size: 11px; color: var(--text-faint); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(232,194,104,.12);
  border: 1px solid var(--gold-border);
  font-size: 19px;
}
.chip-tag {
  background: rgba(232,194,104,.12);
  border: 1px solid var(--gold-border);
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--gold);
  font-weight: 700;
}

.lobby-main { max-width: 960px; margin: 0 auto; padding: 40px 20px; text-align: center; min-width: 0; }

/* ==================== 大厅 Hero 品牌区 ==================== */
.lobby-hero {
  position: relative;
  padding: 46px 20px 40px;
  margin-bottom: 22px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26,82,56,.55) 0%, transparent 68%),
    radial-gradient(ellipse at 50% 120%, rgba(232,194,104,.10) 0%, transparent 60%),
    var(--panel);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(232,194,104,.10);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.hero-kicker::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(232,194,104,.9);
}
.lobby-hero h2 {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 6px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 14px;
}
.lobby-hero h2 .gold { text-shadow: 0 0 24px rgba(232,194,104,.35); }
.hero-sub { color: var(--text-dim); font-size: 15px; line-height: 1.9; margin-bottom: 24px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { padding: 14px 40px; font-size: 16px; }

/* ==================== 筹码补充站 ==================== */
.chip-station {
  margin-bottom: 18px;
  padding: 12px 16px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(232,194,104,.10), rgba(232,194,104,.04));
  border: 1px solid var(--gold-border);
  box-shadow: 0 4px 14px rgba(232,194,104,.08);
  text-align: left;
}
.cs-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-icon { font-size: 20px; filter: drop-shadow(0 2px 5px rgba(232,194,104,.4)); }
.cs-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
}
.cs-sub { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.cs-sub b { font-size: 13px; }
.cs-note { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }

/* 奖励中心：每日签到 / 在线礼包 */
.reward-center { margin-top: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 16px; padding: 12px; }
.rc-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-card { flex: 1 1 200px; background: rgba(0,0,0,.22); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rc-card-head { display: flex; align-items: center; gap: 8px; }
.rc-icon { font-size: 22px; }
.rc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.rc-sub { font-size: 11px; color: var(--text-faint); }
.rc-progress { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.rc-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; transition: width .4s; }
.rc-card .btn { align-self: flex-start; }
/* 离线奖励弹窗 */
.offline-reward-card { text-align: center; max-width: 320px; }
.or-icon { font-size: 40px; margin-bottom: 6px; }
.offline-reward-card h2 { font-size: 18px; color: var(--gold); margin-bottom: 8px; }
.offline-reward-card p { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 16px; }

.cs-tiers { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.cs-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.06);
}
.cs-tier-icon { font-size: 14px; }
.cs-tier-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cs-tier-info b { font-size: 12px; color: var(--gold); }
.cs-tier-rule { font-size: 10px; color: var(--text-faint); }
.cs-tier-state { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.cs-tier-state.ready { color: var(--green-ok); font-weight: 700; }
.cs-tier .btn-sm { padding: 3px 14px; font-size: 11px; }

/* 领取规则说明 */
.cs-rules {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(232,194,104,.32);
}
.cs-rules-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--gold);
  margin-bottom: 3px;
}
.cs-rules-list { margin: 0; padding: 0; list-style: none; }
.cs-rules-list li {
  position: relative;
  padding-left: 10px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: justify;
}
.cs-rules-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .8em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .65;
}
.cs-rules-list li b { color: rgba(255,255,255,.88); font-weight: 600; }

/* 归零引导回首页时的高亮闪烁 */
.chip-station.cs-flash { animation: chipFlash .7s ease-in-out 5; }
@keyframes chipFlash {
  0%, 100% { box-shadow: 0 8px 30px rgba(232,194,104,.12); border-color: rgba(232,194,104,.4); }
  50% { box-shadow: 0 0 34px 6px rgba(232,194,104,.55); border-color: var(--gold); }
}
@media (max-width: 700px) {
  .chip-station { padding: 8px 8px 6px; }
  .cs-head { flex-direction: column; text-align: center; }
  .cs-tier { flex-wrap: wrap; padding: 3px 7px; }
  .cs-tier-state { width: 100%; order: 3; }
  .cs-rules { padding: 5px 7px; }
}

.lobby-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 26px;
  letter-spacing: 4px;
  color: var(--text);
}

/* 动态 + 排行榜：桌面双栏 */
.lobby-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .lobby-duo { grid-template-columns: 1fr; }
}

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.mode-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 32px 24px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.mode-card:hover { transform: translateY(-4px); border-color: var(--gold-border); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.mode-card-primary {
  border-color: rgba(232,194,104,.5);
  box-shadow: 0 8px 30px rgba(232,194,104,.14);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(232,194,104,.12) 0%, transparent 60%),
    var(--panel);
}
.mode-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(160deg, #f3d98b, var(--gold));
  color: #1a1206;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(232,194,104,.35);
}
.mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(232,194,104,.08);
  border: 1px solid var(--gold-border);
}
.mode-icon svg { width: 30px; height: 30px; display: block; }
.mode-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.mode-card p { color: var(--text-dim); font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.mode-card .btn { padding: 10px 30px; }

/* ==================== 牌桌 ==================== */
#view-game,
#view-netgame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  align-items: stretch;
}
#view-game .table,
#view-netgame .table,
#view-netgame .net-table {
  align-self: stretch;
  width: auto;
}
#view-game > *,
#view-netgame > * { min-width: 0; }
#view-game .game-header,
#view-netgame .game-header { order: 0; flex: 0 0 auto; }
#view-game .table,
#view-netgame .table,
#view-netgame .net-table { order: 1; flex: 1 1 auto; min-height: 0; }
#view-game .turn-hint,
#view-netgame .turn-hint { order: 2; flex: 0 0 auto; }
#view-game .action-bar,
#view-netgame .action-bar { order: 3; flex: 0 0 auto; }
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(16,25,19,.6);
  backdrop-filter: blur(8px);
}
.game-meta { display: flex; gap: 22px; font-size: 14px; color: var(--text-dim); align-items: center; }
.game-meta b { color: var(--text); font-size: 16px; }
.game-meta b.gold { color: var(--gold); }
.game-meta .meta-sep { color: var(--panel-border); font-size: 12px; }

/* 牌桌：炭黑房间里的一张翡翠椭圆桌，金色双圈桌沿 */
.table {
  grid-area: table;
  position: relative;
  margin: 16px 20px 8px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 78%);
  border: 2px solid rgba(232,194,104,.55);
  box-shadow:
    inset 0 0 0 7px rgba(232,194,104,.10),
    inset 0 0 90px rgba(0,0,0,.5),
    0 12px 44px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 26px;
  overflow: hidden;
}
/* 桌面中央品牌水印 */
.table::after {
  content: '金 花 世 界';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 10px;
  color: rgba(232,194,104,.10);
  pointer-events: none;
  z-index: 0;
}
.table.hide-faces .card .card-face { visibility: hidden; }

/* ---- 座位 ---- */
.seat { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 6px; border-radius: 14px; transition: background .2s; position: relative; z-index: 1; }
.seat.active { background: rgba(232,194,104,.08); box-shadow: 0 0 0 1px rgba(232,194,104,.35) inset; border-radius: 16px; }
.seat-top { align-items: flex-start; }
.seat-top .seat-info { align-self: center; }
.seat-bottom { align-items: center; }
.seat-info { display: flex; align-items: center; gap: 10px; }
.seat-name { font-weight: 700; font-size: 15px; }
.seat-chips { font-size: 13px; color: var(--gold); }
.badges { display: flex; gap: 6px; }
.badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-dim);
}
.badge.on { color: var(--gold); border-color: var(--gold-deep); background: rgba(232,194,104,.10); }
.badge.fold { color: #888; border-color: #555; text-decoration: line-through; }
/* 断线座位由服务端 AI 代打：不用删除线（人还在打，只是不能自己动手），只做冷色区分 */
.badge.bot { color: #8fd3ff; border-color: rgba(143,211,255,.45); background: rgba(143,211,255,.10); }
/* P0-3 庄家角标：鎏金高亮，一眼看出本局谁坐庄 */
.badge.dealer { color: #1a1206; font-weight: 700; border: none; background: linear-gradient(160deg, #f3d98b, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 2px 10px rgba(232,194,104,.4); }

/* ---- 扑克牌 ---- */
.cards { display: flex; gap: 12px; min-height: 108px; }
.card {
  width: 72px; height: 104px;
  perspective: 600px;
}
/* 发牌动画只挂在 .deal 上：牌面 DOM 仅在真正换牌（新一局）时重建并播放动画，
 * 跟注/加注等重渲染不会重建牌面，避免发牌动画重放导致牌面“再动一次”。
 * --dx 由 JS 按座位方位写在 .cards 容器上：牌从中央牌堆斜飞到各自座位，
 * 左右两侧的座位横向偏移更大，视觉上就是"一张张甩到桌上"。 */
.card.deal { --flyY: 78px; animation: dealIn .46s cubic-bezier(.24,.9,.32,1) both; }
.card.deal:nth-child(2) { animation-delay: .12s; }
.card.deal:nth-child(3) { animation-delay: .24s; }
@keyframes dealIn {
  0% {
    opacity: 0;
    transform: translate(calc(var(--dx, 0px) * .55), calc(var(--flyY) * -1)) scale(.58) rotate(-18deg);
  }
  38% {
    opacity: 1;
    transform: translate(calc(var(--dx, 0px) * .38), calc(var(--flyY) * -.2)) scale(.9) rotate(-8deg);
  }
  68% {                                   /* 触桌：轻微下压 */
    transform: translate(calc(var(--dx, 0px) * .82), 6px) scale(1.03) rotate(-3deg);
  }
  84% {                                   /* 回弹 */
    transform: translate(calc(var(--dx, 0px) * .95), -3px) scale(1) rotate(-1deg);
  }
  100% { opacity: 1; transform: none; }
}

/* 发牌瞬间：牌桌中央泛起一圈光，暗示"牌从这里发出去" */
.table.dealing::before {
  content: '';
  position: absolute;
  left: 50%; top: 44%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,194,104,.30), rgba(232,194,104,0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: dealPulse .52s ease-out both;
}
@keyframes dealPulse {
  from { opacity: .95; transform: scale(.45); }
  to   { opacity: 0; transform: scale(1.55); }
}

/* 系统开启「减弱动态效果」时，牌直接落位，不飞不闪 */
@media (prefers-reduced-motion: reduce) {
  .card.deal { animation: none; opacity: 1; }
  .table.dealing::before { display: none; }
}
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.1,.2,1.2);
}
.card.looked .card-inner { transform: rotateY(180deg); }
.card-back, .card-face {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
/* 牌背：翡翠底 + 鎏金菱纹 */
.card-back {
  background:
    repeating-linear-gradient(45deg, rgba(232,194,104,.14) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #1a5238, #0f3524);
  border: 1.5px solid rgba(232,194,104,.55);
  font-size: 26px;
  color: rgba(232,194,104,.85);
}
.card-face {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, #fffdf6, #f1e9d2);
  color: #222;
  flex-direction: column;
  font-weight: 800;
}
.card-face.red { color: #d33a3a; }
.card-face .rank { font-size: 30px; line-height: 1; }
.card-face .suit { font-size: 24px; }
.card.small { width: 54px; height: 78px; }
.card.small .rank { font-size: 22px; }
.card.small .suit { font-size: 17px; }

/* ==================== 牌型等级提示徽章 ====================
 * 六档配色由低到高：散牌(灰) → 对子(青) → 顺子(蓝) → 金花(紫) → 顺金(橙) → 豹子(金)
 * 等级色统一走 --tc 变量：文字、等级条、描边三处共用，换档只改一处。
 */
.hand-tag {
  --tc: var(--text-faint);
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc);
  letter-spacing: 1px;
}
.hand-tag:not(:empty) {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.hand-tag .ht-name { line-height: 1; white-space: nowrap; }
/* 比牌亮牌时跟在牌型名后的牌面（联机对手座位用） */
.hand-tag .ht-detail { font-size: 10px; font-weight: 600; opacity: .75; letter-spacing: 0; }
/* 六格强度条：亮起格数 = 牌型等级，一眼看出手里牌多大 */
.hand-tag .ht-bar { display: flex; align-items: flex-end; gap: 2px; }
.hand-tag .ht-bar i {
  width: 3px; height: 9px; border-radius: 1px;
  background: rgba(255, 255, 255, .16);
}
.hand-tag .ht-bar i.on { background: var(--tc); }

.hand-tag.lv1 { --tc: #9aa39c; }
.hand-tag.lv2 { --tc: #6fd0c0; }
.hand-tag.lv3 { --tc: #5ab0ef; }
.hand-tag.lv4 { --tc: #b48cf0; }
.hand-tag.lv5 { --tc: #ff9f43; text-shadow: 0 0 8px rgba(255, 159, 67, .45); }
.hand-tag.lv6 { --tc: #ffd75e; text-shadow: 0 0 8px rgba(255, 215, 94, .5); }

/* 对手小座位：徽章收窄，强度条压到 2px，避免挤占牌面 */
.opseat .hand-tag {
  min-height: 16px;
  font-size: 11px;
  gap: 4px;
  padding: 1px 6px;
}
.opseat .hand-tag .ht-bar i { width: 2px; height: 7px; }

/* ---- 中央底池 ---- */
.pot-area {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.pot-area .pot { pointer-events: auto; }
.pot {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 999px;
  background: rgba(10,15,12,.72);
  border: 1px solid rgba(232,194,104,.5);
  font-size: 16px;
  color: var(--text-dim);
  backdrop-filter: blur(4px);
}
.pot b { font-size: 22px; color: var(--gold); margin-left: 6px; }

/* ==================== 中央本局盈亏：鎏金大字 + 呼吸发光 ==================== */
.pot-net {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--text-dim);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.pot-net.show { display: block; animation: potNetIn .4s ease-out both; }
.pot-net.up {
  color: #ff4d4f;
  animation: potNetIn .4s ease-out both, netGlowUp 1.6s ease-in-out .5s infinite, potNetPulse 2s ease-in-out 1s infinite;
}
.pot-net.down {
  color: #18a058;
  animation: potNetIn .4s ease-out both, netGlowDown 1.6s ease-in-out .5s infinite, potNetPulse 2s ease-in-out 1s infinite;
}
.pot-net.tie {
  color: var(--gold);
  animation: potNetIn .4s ease-out both, goldGlow 2s ease-in-out .5s infinite;
}
@keyframes potNetIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes potNetPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes netGlowUp {
  0%,100% { text-shadow: 0 0 12px rgba(255,77,79,.6), 0 0 28px rgba(255,77,79,.35), 0 2px 8px rgba(0,0,0,.55); }
  50% { text-shadow: 0 0 28px rgba(255,77,79,1), 0 0 56px rgba(255,77,79,.65), 0 0 90px rgba(255,77,79,.25), 0 2px 8px rgba(0,0,0,.55); }
}
@keyframes netGlowDown {
  0%,100% { text-shadow: 0 0 12px rgba(24,160,88,.6), 0 0 28px rgba(24,160,88,.35), 0 2px 8px rgba(0,0,0,.55); }
  50% { text-shadow: 0 0 28px rgba(24,160,88,1), 0 0 56px rgba(24,160,88,.65), 0 0 90px rgba(24,160,88,.25), 0 2px 8px rgba(0,0,0,.55); }
}
@keyframes goldGlow {
  0%,100% { text-shadow: 0 0 12px rgba(232,194,104,.45), 0 0 24px rgba(232,194,104,.25), 0 2px 8px rgba(0,0,0,.55); }
  50% { text-shadow: 0 0 28px rgba(232,194,104,.85), 0 0 56px rgba(232,194,104,.45), 0 0 90px rgba(232,194,104,.2), 0 2px 8px rgba(0,0,0,.55); }
}
/* 盈亏已上移中央，座位旁不再重复显示 */
.seat-net { display: none !important; }

.banner {
  padding: 18px 26px;
  border-radius: 18px;
  background: rgba(10,15,12,.85);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  animation: popIn .3s ease both;
  pointer-events: auto;
}
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.banner-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 2px;
}
.banner-sub { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; max-height: 220px; overflow-y: auto; }
.banner-actions { display: flex; gap: 10px; justify-content: center; }

/* ==================== 结算牌型阶梯 ====================
 * 把本局各家牌型按从高到低铺成阶梯，亮起格数 = 牌型等级。
 * 每行左侧牌型名、中间强度条、右侧持有者；最高一档整行鎏金高亮。
 * 等级色与座位徽章同源（tlv1~tlv6 → --tc），两套 UI 一眼对得上。
 */
/* ==================== 局末吐槽 ====================
 * 结算卡里的一行调侃。刻意做得很轻 —— 它是彩蛋，不该抢走「看牌型阶梯」的注意力。
 * 赢的局面偏金色，其余维持素色。
 */
.taunt-line {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .04);
  border-left: 2px solid rgba(255, 255, 255, .18);
}
.taunt-line:empty { display: none; }
.settle-win .taunt-line { color: var(--gold); border-left-color: var(--gold); }

/* ==================== 座位动作 ====================
 * 点对手座位弹出的反应表情。动画元素由 JS 按坐标挂到 .table 上，
 * 这样座位重绘、轮询刷新都不会把它冲掉。pointer-events:none 保证不挡_click。
 */
.seat-action {
  position: absolute;
  z-index: 40;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: seatActionPop 1.3s ease-out forwards;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}
@keyframes seatActionPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20%  { opacity: 1; transform: translate(-50%, -55%) scale(1.2); }
  55%  { opacity: 1; transform: translate(-50%, -75%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(.85); }
}
/* 可点的对手座位给个光标暗示，别让人以为是坏的 */
.seat-actable { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .seat-action { animation-duration: .8s; }
}

.hand-ladder {
  --tc: var(--text-faint);
  margin: 0 0 12px;
  padding: 8px 12px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--panel-border);
}
.hand-ladder.tlv1 { --tc: #9aa39c; }
.hand-ladder.tlv2 { --tc: #6fd0c0; }
.hand-ladder.tlv3 { --tc: #5ab0ef; }
.hand-ladder.tlv4 { --tc: #b48cf0; }
.hand-ladder.tlv5 { --tc: #ff9f43; }
.hand-ladder.tlv6 { --tc: #ffd75e; }

.hand-ladder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.hand-ladder-head b { color: var(--tc); font-size: 13px; }

.hand-ladder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2.5px 0;
  border-radius: 8px;
}
.hand-ladder-row .hl-name {
  flex: none;
  width: 34px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--tc);
  letter-spacing: .5px;
}
.hand-ladder-row .hl-bar { display: flex; gap: 2px; flex: 1 1 auto; }
.hand-ladder-row .hl-bar i {
  flex: 1; height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09);
}
.hand-ladder-row .hl-bar i.on { background: var(--tc); }
.hand-ladder-row .hl-who {
  flex: none;
  width: 118px;
  text-align: right;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 本局出现的最高牌型：整行鎏金底 + 左侧竖条 */
.hand-ladder-row.hl-top {
  background: linear-gradient(90deg, rgba(232, 194, 104, .16), transparent 70%);
  box-shadow: inset 2px 0 0 var(--tc);
}
.hand-ladder-row.hl-top .hl-name { text-shadow: 0 0 8px currentColor; }
/* 我自己拿到的牌型 */
.hand-ladder-row.hl-mine .hl-who { color: var(--gold); font-weight: 700; }

/* 阶梯只在结算时铺开，未渲染内容不留空壳 */
.hand-ladder:empty { display: none; }

/* ==================== 鎏金结算卡 ==================== */
.settle-card {
  position: relative;
  width: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 22px 30px 20px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #16211a, #0c130f) padding-box,
    linear-gradient(115deg, #8a6d2f, #e8c268 22%, #fff3cf 40%, #e8c268 58%, #8a6d2f 80%, #c9a24a) border-box;
  background-size: 100% 100%, 320% 320%;
  animation: popIn .35s ease both, borderFlow 7s linear infinite;
  box-shadow: 0 14px 48px rgba(0,0,0,.65), 0 0 34px rgba(232,194,104,.12);
}
@keyframes borderFlow { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }
/* 流光扫过 */
.settle-card::before {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%; width: 34%;
  left: -50%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,243,207,.14), transparent);
  animation: settleSheen 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes settleSheen { 0%, 55% { left: -50%; } 90%, 100% { left: 130%; } }
/* 细腻织纹 + 顶部鎏金雾光 */
.settle-card::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% -20%, rgba(232,194,104,.10), transparent 55%);
  z-index: 0;
}
.settle-card > * { position: relative; z-index: 1; }

.settle-crown {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 6px;
  text-align: center;
  margin-bottom: 4px;
  color: var(--gold);
}
.settle-card.settle-win .settle-crown {
  background: linear-gradient(90deg, #8a6d2f, #fff3cf 45%, #e8c268 60%, #8a6d2f);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: crownGlow 3s linear infinite;
}
@keyframes crownGlow { to { background-position: 200% 0; } }

.settle-card .banner-title {
  font-size: 26px;
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.settle-hand {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.settle-cards { display: flex; gap: 8px; }
.scard {
  width: 48px;
  height: 66px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(165deg, #fbf7ec, #efe8d4);
  border: 1px solid rgba(232,194,104,.45);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
  font-family: var(--font-serif);
  color: #1a1a1a;
  animation: cardIn .45s cubic-bezier(.2,.9,.3,1.2) both;
  touch-action: manipulation;
}
.scard[data-red] { color: #c43c3c; }
.scard-0 { animation-delay: .10s; }
.scard-1 { animation-delay: .22s; }
.scard-2 { animation-delay: .34s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) rotate(-6deg) scale(.85); }
  to { opacity: 1; transform: none; }
}
.scard-rank { font-size: 20px; font-weight: 700; line-height: 1; }
.scard-suit { font-size: 15px; line-height: 1; }
.settle-hand-meta { text-align: left; }
.settle-hand-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 1.3;
}
.settle-hand-detail { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.settle-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 12px;
}
.settle-pot-label { font-size: 11px; letter-spacing: 4px; color: var(--text-faint); }
.settle-pot-num {
  font-family: var(--font-num);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  font-variant-numeric: tabular-nums;
  overflow: visible;
}
.settle-pot-num .pn-sign { font-size: 38px; font-weight: 900; transform: translateY(-3px); margin-right: 1px; }
.settle-pot-num .pn-reel { display: inline-block; width: .62em; height: 1em; overflow: hidden; position: relative; vertical-align: bottom; }
.settle-pot-num .pn-col { display: flex; flex-direction: column; will-change: transform; }
.settle-pot-num .pn-col span { height: 1em; display: flex; align-items: center; justify-content: center; }
/* 赢：金红鎏金 + 强辉光 */
.settle-pot-num.is-win { color: #fff1c2; text-shadow: 0 0 18px rgba(255,196,80,.85), 0 0 38px rgba(255,140,30,.6), 0 0 64px rgba(255,90,20,.35); }
.settle-pot-num.is-win .pn-col span { color: #fff1c2; }
/* 输：冷红强调（底池归属他人，败北红） */
.settle-pot-num.is-lose { color: #ff9a9a; text-shadow: 0 0 16px rgba(255,80,80,.7), 0 0 34px rgba(220,40,40,.4); }
.settle-pot-num.is-lose .pn-col span { color: #ff9a9a; }
.settle-pot-num.pot-punch { animation: potPunch .55s cubic-bezier(.2,1.5,.4,1) both; }
.settle-pot-num.pot-punch-lose { animation: potPunchLose .5s ease both; }
@keyframes potPunch {
  0% { transform: scale(.7); opacity: .2; }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes potPunchLose {
  0% { transform: translateY(-14px) scale(1.04); opacity: 0; }
  60% { transform: translateY(3px); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.settle-pot-num .pn-shine {
  position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.9), transparent);
  transform: translateX(-220%); pointer-events: none; mix-blend-mode: screen; opacity: 0; z-index: 2;
}
.settle-pot-num .pn-shine.on { animation: pnShine .85s ease-out .1s; }
@keyframes pnShine { 0% { transform: translateX(-220%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(360%); opacity: 0; } }
/* 本局净赢展示：红=赢（涨）绿=输（跌），按用户红涨绿跌习惯 */
.settle-net { margin-top: 2px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.settle-net.up { color: #e8453c; }
.settle-net.down { color: #18a058; }
.settle-net.tie { color: var(--text-dim); }

/* 牌桌 HUD 实时盈亏（打牌中=已投入、结算后=净赢，红涨绿跌） */
.seat-net {
  font-size: 16px; font-weight: 900; line-height: 1.4; margin-top: 2px;
  letter-spacing: .5px; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.seat-net.up {
  color: #ff4d4f;
  text-shadow: 0 0 8px rgba(255,77,79,.55), 0 0 18px rgba(255,77,79,.35), 0 1px 3px rgba(0,0,0,.35);
  animation: netPulse 1.2s ease-in-out infinite;
}
.seat-net.down {
  color: #18a058;
  text-shadow: 0 0 8px rgba(24,160,88,.5), 0 0 18px rgba(24,160,88,.3), 0 1px 3px rgba(0,0,0,.35);
}
.seat-net.tie { color: var(--text-dim); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
@keyframes netPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* 全员摊牌：本局牌面集中展示在台面上，便于核对防作弊 */
.settle-all { margin: 10px 0 14px; }
.settle-all:empty { display: none; }
.showdown-all-head {
  font-size: 12px; letter-spacing: 2px; color: var(--gold);
  text-align: center; margin-bottom: 8px; opacity: .9;
}
.showdown-all-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(232,194,104,.4) transparent;
}
.showdown-all-item {
  flex: 0 0 auto; min-width: 96px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(232,194,104,.18);
  border-radius: 12px; padding: 8px 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.showdown-all-item.win {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(232,194,104,.35);
  background: rgba(232,194,104,.10);
}
.showdown-all-item.folded { opacity: .5; filter: grayscale(.6); }
.showdown-all-cards { display: flex; gap: 3px; }
.showdown-all-cards .scard { width: 30px; height: 42px; border-radius: 6px; }
.showdown-all-cards .scard-rank { font-size: 13px; }
.showdown-all-cards .scard-suit { font-size: 10px; }
.showdown-all-name { font-size: 12px; color: var(--text); font-weight: 600; }
.showdown-all-item.win .showdown-all-name { color: var(--gold); }
.showdown-all-hand { font-size: 11px; color: var(--text-dim); }
.showdown-all-net {
  margin-top: 4px; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.05);
}
.showdown-all-net.up { color: #e8453c; }
.showdown-all-net.down { color: #18a058; }
.showdown-all-net.tie { color: var(--text-dim); }

/* 失利：同一卡片骨架，收敛为冷灰，不做庆祝 */
.settle-card.settle-lose {
  background:
    linear-gradient(160deg, #131a15, #0c110e) padding-box,
    linear-gradient(115deg, #3a423c, #5a655d 50%, #3a423c) border-box;
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  animation: popIn .35s ease both;
}
.settle-card.settle-lose::before { display: none; }
.settle-card.settle-lose .settle-crown { color: var(--text-faint); animation: none; }
.settle-card.settle-lose .banner-title { color: var(--text-dim); }
.settle-card.settle-lose .settle-hand-name { color: var(--text-dim); }
.settle-card.settle-lose .settle-pot-num { font-size: 48px; }

.turn-hint {
  position: relative;
  text-align: center;
  margin: 4px 0 2px;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  z-index: 1;
}
/* 轮到自己：文字转金色轻脉冲，与联机 .my-turn 表现一致 */
.turn-hint.my-turn { color: var(--gold); font-weight: 700; animation: glow 1.4s ease-in-out infinite; }

/* ==================== 操作区 ==================== */
.action-bar {
  grid-area: action;
  padding: 12px 20px 16px;
}
.action-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.action-buttons .btn { min-width: 108px; padding: 12px 22px; font-size: 15px; }

/* P0-4 操作飘字：点击动作后从底部浮起一行提示（看牌 / 跟注 / 加注 / 弃牌 …），
 * 与音效、按钮缩放共同构成"点到了、发生了什么"的即时反馈 */
.float-action {
  position: fixed; left: 50%; bottom: 92px;
  transform: translate(-50%, 8px);
  font-weight: 800; font-size: 15px; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(10, 15, 12, .82); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  pointer-events: none; opacity: 0; z-index: 80;
  transition: transform .8s cubic-bezier(.22, .9, .3, 1), opacity .8s ease;
}
.float-action.float-show { transform: translate(-50%, -30px); opacity: 1; }
.float-look   { color: #8fd3ff; border-color: rgba(143, 211, 255, .5); }
.float-call   { color: #e9c46a; border-color: rgba(232, 194, 104, .5); }
.float-check  { color: #9fe6a0; border-color: rgba(159, 230, 160, .5); }
.float-raise  { color: #ffb86b; border-color: rgba(255, 184, 107, .5); }
.float-compare{ color: #ff9f6b; border-color: rgba(255, 159, 107, .5); }
.float-allin  { color: #ff6b6b; border-color: rgba(255, 107, 107, .6); }
.float-fold   { color: #8a948a; border-color: rgba(138, 148, 138, .5); }

/* ---------- 可行动高亮：麻将 App 那种「轮到你，按钮自己会亮」 ----------
 * 玩家不必盯着回合提示读文字，扫一眼操作条就知道现在该点哪儿。
 * 「弃牌」刻意不做高亮 —— 不该用闪烁去诱导人放弃。 */
.action-buttons.your-turn { animation: barBreath 2.4s ease-in-out infinite; }
@keyframes barBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 194, 104, 0); }
  50%      { box-shadow: 0 0 0 2px rgba(232, 194, 104, .26), 0 0 24px rgba(232, 194, 104, .15); }
}

.btn.act-hint { animation: actBreath 1.8s ease-in-out infinite; }
@keyframes actBreath {
  0%, 100% { box-shadow: 0 6px 22px rgba(232, 194, 104, .32); }
  50%      {
    box-shadow: 0 6px 22px rgba(232, 194, 104, .32), 0 0 0 4px rgba(232, 194, 104, .3);
    border-color: var(--gold);
  }
}
/* 高风险动作（全押/比牌）用更强的红金脉冲，提示代价大 */
.btn.act-hint.aggressive { animation-name: actBreathRisk; }
@keyframes actBreathRisk {
  0%, 100% { box-shadow: 0 6px 22px rgba(224, 112, 112, .3); }
  50%      {
    box-shadow: 0 6px 22px rgba(224, 112, 112, .3), 0 0 0 4px rgba(224, 112, 112, .34);
    border-color: var(--danger);
  }
}

/* 尊重系统「减少动态效果」：关掉呼吸，但仍保留静态描边让人看得见 */
@media (prefers-reduced-motion: reduce) {
  .action-buttons.your-turn { animation: none; box-shadow: 0 0 0 1px rgba(232, 194, 104, .3); }
  .btn.act-hint, .btn.act-hint.aggressive { animation: none; border-color: var(--gold); }
  .turn-hint.my-turn { animation: none; }
}

/* 操作条常驻「再来一局 / 下一局」：结算阶段无需打开右侧面板即可直接开下一局 */
.btn-next-bar {
  display: block;
  margin: 10px auto 0;
  min-width: 160px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  animation: nextBarPop .28s ease-out both;
}
.btn-next-bar:active { transform: scale(.96); }
@keyframes nextBarPop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.raise-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.raise-panel .opt {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  background: rgba(232,194,104,.1);
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.raise-panel .opt:hover { background: rgba(232,194,104,.25); }

/* ==================== 日志 ==================== */
.log-panel {
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.log-title {
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.07);
  letter-spacing: 3px;
}
.log-list { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 12.5px; line-height: 1.9; }
.log-item { padding: 2px 0; color: var(--text-dim); border-bottom: 1px dashed rgba(255,255,255,.05); }
.log-item.hot { color: var(--gold); }
.log-item.win { color: var(--green-ok); font-weight: 700; }
.log-item.sys { color: #7fb0ff; }

/* ==================== 右侧工具条 + 滑出面板 ==================== */
.side-dock {
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
}
.side-dock-btn {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(232,194,104,.45);
  background: linear-gradient(160deg, rgba(20,28,22,.92), rgba(10,15,12,.92));
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.side-dock-btn:hover {
  background: linear-gradient(160deg, rgba(232,194,104,.18), rgba(232,194,104,.08));
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 18px rgba(232,194,104,.18);
  transform: translateX(-3px);
}
.side-dock-btn:active { transform: scale(.95); }
.side-dock-btn.active {
  background: linear-gradient(160deg, rgba(232,194,104,.32), rgba(232,194,104,.14));
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(232,194,104,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.side-dock-btn .dot {
  position: absolute;
  right: 2px; top: 2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 1.5px rgba(10,15,12,.85);
  animation: dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100% { transform: scale(.9); opacity: .85; } 50% { transform: scale(1.15); opacity: 1; } }

/* ==================== 顶部更多菜单（结算 / 记录 / 发言） ==================== */
.more-menu-wrap { position: relative; }
.more-menu {
  position: fixed;
  top: 56px;
  right: 12px;
  min-width: 110px;
  background: rgba(16,25,19,.96);
  border: 1px solid rgba(232,194,104,.45);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.more-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.more-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.more-menu-item:hover,
.more-menu-item.active {
  background: rgba(232,194,104,.16);
}
.more-menu-item .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 1.5px rgba(10,15,12,.85);
  animation: dotPulse 1.4s ease-in-out infinite;
}

.side-sheet {
  position: fixed;
  right: 0; top: 0;
  width: min(420px, 82vw);
  height: 100vh;
  z-index: 80;
  background: rgba(8,12,9,.94);
  border-left: 1px solid rgba(232,194,104,.35);
  box-shadow: -12px 0 40px rgba(0,0,0,.55);
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
}
.side-sheet.open { transform: translateX(0); }
.side-sheet .close-sheet {
  position: absolute;
  right: 10px; top: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.side-sheet .close-sheet:hover { background: rgba(255,255,255,.12); color: var(--text); }

.side-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow: hidden;
}
.side-panel.active { display: flex; }

/* 结算面板在侧栏内 */
.side-panel .settle-card {
  position: static;
  transform: none;
  width: 100%;
  max-height: none;
  margin: 0;
  animation: sideSlideIn .3s ease both;
}
@keyframes sideSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* 记录面板在侧栏内 */
.side-panel.panel-log .log-panel {
  grid-area: auto;
  margin: 0;
  height: 100%;
  border: none;
  background: transparent;
}
.side-panel.panel-log .log-list { padding: 10px 0; }

/* 聊天面板在侧栏内 */
.side-panel.panel-chat .chat-wrap {
  grid-column: auto;
  height: 100%;
  align-items: stretch;
}
.side-panel.panel-chat .chat-bubbles {
  max-height: none;
  flex: 1;
  align-items: flex-start;
  overflow-y: auto;
  padding-right: 4px;
}
.side-panel.panel-chat .chat-bar {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 10px;
}

/* 空面板占位提示 */
.side-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ==================== 遮罩层 / 弹窗 ==================== */
#pass-overlay, #rules-modal, #rebuy-modal, #zero-modal, #handcount-modal, #pokedex-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
#pass-overlay { background: rgba(5,10,8,.94); }
.pass-card { text-align: center; padding: 40px; }
.pass-icon { font-size: 54px; margin-bottom: 16px; }
.pass-card h2 { font-size: 24px; margin-bottom: 10px; }
.pass-card p { color: var(--text-dim); margin-bottom: 26px; }

.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.modal-card {
  position: relative;
  width: 520px; max-width: 92vw;
  max-height: 84vh;
  overflow-y: auto;
  background: linear-gradient(170deg, #131b16, #0d1410);
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  animation: popIn .25s ease both;
}
.modal-card h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--gold);
  letter-spacing: 2px;
}
.modal-card p { line-height: 1.8; }
.pwd-card { width: 360px; max-width: 90vw; text-align: center; }
.pwd-card .muted { color: var(--text-faint); font-size: 13px; margin: -8px 0 16px; }
.pwd-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; border-radius: 12px; border: 1px solid var(--gold-border); background: rgba(0,0,0,.25); color: var(--text); margin-bottom: 18px; }
.pwd-input:focus { outline: none; border-color: var(--gold); }
.pwd-actions { display: flex; gap: 12px; justify-content: center; }
.pwd-actions .btn { flex: 1; max-width: 150px; }
.rules-body h3 { font-size: 15px; color: var(--gold); margin: 14px 0 8px; }
.rules-body ul, .rules-body ol { padding-left: 20px; line-height: 2; font-size: 14px; }
.rules-body .hand-rank li { color: var(--text); }
.rules-body b { color: var(--gold); }
#btn-rules-close { margin-top: 18px; display: block; margin-left: auto; }

/* ---- 牌型图鉴 ---- */
.pokedex-modal-card { width: 600px; max-width: 94vw; }
.pokedex-progress { font-size: 13px; color: var(--gold); margin-bottom: 14px; letter-spacing: 1px; }
.pokedex-tip { margin-top: 14px; font-size: 12px; }
.pokedex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pokedex-card {
  position: relative; padding: 14px 14px 12px;
  border: 1px solid var(--gold-border); border-radius: 14px;
  background: rgba(255,255,255,.02); transition: .2s;
}
.pokedex-card.seen {
  background: linear-gradient(160deg, rgba(232,194,104,.12), rgba(232,194,104,.02));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,194,104,.25), 0 8px 22px rgba(0,0,0,.3);
}
.pokedex-card.unseen { opacity: .66; }
.pokedex-card .pc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pokedex-card .pc-rank { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.pokedex-card .pc-desc { font-size: 13px; color: var(--text); line-height: 1.6; }
.pokedex-card .pc-example { margin-top: 8px; font-size: 16px; letter-spacing: 2px; color: var(--text); }
.pokedex-card .pc-note { margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.pokedex-card .pc-seen-badge { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--gold); }
.pokedex-card.unseen .pc-seen-badge { color: var(--text-dim); }

/* ---- 新手引导遮罩 ---- */
#tutorial-overlay { position: fixed; inset: 0; z-index: 1300; }
.tutorial-mask { position: fixed; inset: 0; background: rgba(0,0,0,.68); }
.tutorial-spot {
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(232,194,104,.45), inset 0 0 0 1px rgba(255,255,255,.1);
  background: transparent;
  pointer-events: none;
  transition: all .25s ease;
}
.tutorial-card {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  width: min(420px, 92vw);
  background: linear-gradient(170deg, #131b16, #0d1410);
  border: 1px solid var(--gold-border);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  text-align: center;
}
.tutorial-text { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 12px; }
.tutorial-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.tutorial-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tutorial-dots i.on { background: var(--gold); }
.tutorial-actions { display: flex; gap: 10px; justify-content: center; }

/* ---- 练习局数选择弹窗 ---- */
.handcount-options {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 22px 0 8px;
}
.handcount-options .btn {
  min-width: 82px;
  padding: 12px 18px;
  font-size: 15px;
  letter-spacing: 1px;
}
.handcount-options .btn-gold { box-shadow: 0 0 16px rgba(232, 194, 104, .25); }

/* ==================== 响应式 ==================== */
@media (max-width: 900px) {
  #view-game,
  #view-netgame {
    display: flex;
    flex-direction: column;
    height: auto; min-height: 100vh;
  }
  #view-game > *,
  #view-netgame > * { width: 100%; min-width: 0; }
  .table { width: 100%; }
  .lobby-duo { grid-template-columns: 1fr; }
  .card { width: 58px; height: 84px; }
}

/* ==================== 联机大厅 ==================== */
.online-lobby { padding-top: 8px; }

/* 顶部工具栏 */
.lobby-toolbar {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  padding: 20px 22px 18px;
  margin-bottom: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.toolbar-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.toolbar-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,194,104,.25), transparent);
  margin: 16px 0;
}
.net-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.net-field span {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
  padding-left: 4px;
}
.net-field input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.32);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.net-field input::placeholder { color: var(--text-faint); }
.net-field input:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 0 3px rgba(232,194,104,.12);
}
.net-nick-field { max-width: 220px; }
.net-room-field { max-width: 200px; }
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 999px;
}
.btn-pill > span { display: inline; }
.btn-pill-secondary {
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  box-shadow: none;
}
.btn-pill-secondary:hover {
  background: rgba(232,194,104,.10);
  box-shadow: 0 0 16px rgba(232,194,104,.16);
}
.btn-join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 14px;
  font-size: 14px;
}

/* 区块标题 */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 28px 0 14px;
  padding-left: 14px;
  position: relative;
  color: var(--text);
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.section-title .title-icon { font-size: 16px; filter: grayscale(.2); }
.section-title small {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}

/* 好友房列表 */
.room-list { display: flex; flex-direction: column; gap: 10px; }
.room-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.room-item:hover { border-color: var(--gold-border); box-shadow: 0 6px 22px rgba(0,0,0,.22); transform: translateY(-1px); }
.room-right { display: flex; align-items: center; gap: 10px; }

/* ==================== 6 人联机牌桌（椭圆三行网格布局） ====================
 *  上排： 左上对手   上中对手   右上对手
 *  中排： 左侧对手   中央底池   右侧对手
 *  下排：        自己（居中）
 * 座位顺序（offset 1~5）按行动顺序逆时针环绕，符合真实牌桌方位。
 */
.net-table {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(280px, 2.4fr) minmax(160px, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "tl tc tr"
    "ml center mr"
    "self self self";
  gap: 10px 14px;
  align-items: start;
  min-height: 520px;
  padding: 18px 22px 14px;
}

.net-slot { display: flex; justify-content: center; min-width: 0; }
.slot-tl { grid-area: tl; justify-content: flex-start; }
.slot-tc { grid-area: tc; }
.slot-tr { grid-area: tr; justify-content: flex-end; }
.slot-ml { grid-area: ml; justify-content: flex-start; align-self: center; }
.slot-mr { grid-area: mr; justify-content: flex-end; align-self: center; }

.opseat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .2s, box-shadow .2s, opacity .2s;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.opseat.active { background: rgba(232,194,104,.10); box-shadow: 0 0 0 1px rgba(232,194,104,.45) inset; }
.opseat.selectable { cursor: pointer; box-shadow: 0 0 0 2px var(--gold) inset; animation: pulse 1.1s infinite; }
.opseat.folded-op { opacity: .4; }
.opseat.offline-op { opacity: .5; filter: grayscale(.6); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--gold) inset; } 50% { box-shadow: 0 0 18px 2px rgba(232,194,104,.5) inset; } }

/* 空座位占位 */
.seat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 26px;
  border: 2px dashed rgba(232,194,104,.22);
  border-radius: 14px;
  color: rgba(232,194,104,.4);
  font-size: 12px;
}
.seat-empty .seat-empty-icon { font-size: 22px; }

/* 对手手牌（紧凑牌背） */
.opseat .cards { min-height: 66px; gap: 6px; }
.opseat .card { width: 44px; height: 62px; animation: none; }
.opseat .card-back, .opseat .card-face { border-radius: 6px; }
.opseat .card-face .rank { font-size: 17px; }
.opseat .card-face .suit { font-size: 13px; }

.opseat .seat-info { transform: scale(.92); transform-origin: center; }
.opseat .seat-name { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 中央区：底池 + 结算横幅 */
.net-center {
  grid-area: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.32), transparent 75%);
  min-width: 0;
  position: relative;
  z-index: 1;
}
.net-center .pot { font-size: 17px; padding: 10px 30px; }
.net-stake-line { font-size: 13px; color: var(--text-dim); }
.net-stake-line b { color: var(--gold); font-size: 16px; }

/* 回合提示条 */
.turn-hint.my-turn { color: var(--gold); font-weight: 700; animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 14px rgba(232,194,104,.8); } }

/* 房间内俏皮话：快捷发言条 + 全房可见气泡 */
.chat-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.chat-bubbles { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; max-height: 92px; overflow: hidden; }
.chat-bubble {
  max-width: 90%; padding: 6px 12px; border-radius: 999px; text-align: center;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,.06);
  color: var(--text); font-size: 13px; line-height: 1.5;
  animation: bubble-in .22s ease;
}
.chat-bubble b { color: var(--gold); font-weight: 600; margin-right: 1px; }
.chat-bubble.mine { border-color: rgba(232,194,104,.45); background: rgba(232,194,104,.12); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-bar { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chat-btn {
  padding: 5px 10px; font-size: 12px; white-space: nowrap; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--panel-border);
  background: rgba(255,255,255,.05); color: var(--text-dim); transition: .15s;
}
.chat-btn:hover { border-color: var(--gold-deep); color: var(--gold); background: rgba(232,194,104,.1); }
.chat-btn:active { transform: scale(.96); }

/* 好友房聊天对话框（仅好友房/私人房开放自由输入+表情） */
.side-panel.panel-chat .chat-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; gap:8px; }
.side-panel.panel-chat .chat-title { font-size:15px; font-weight:600; color:var(--gold); }
.side-panel.panel-chat .chat-sub { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.side-panel.panel-chat .chat-bubbles { min-height:0; }
.side-panel.panel-chat .chat-emoji { display:none; flex-wrap:wrap; gap:4px; padding:8px; margin-top:8px; background:rgba(0,0,0,.2); border-radius:12px; max-height:120px; overflow-y:auto; }
.side-panel.panel-chat .chat-emoji.open { display:flex; }
.side-panel.panel-chat .emoji-item { width:34px; height:34px; font-size:18px; line-height:1; cursor:pointer; border:none; background:transparent; border-radius:8px; transition:.15s; }
.side-panel.panel-chat .emoji-item:hover { background:rgba(232,194,104,.16); transform:scale(1.1); }
.side-panel.panel-chat .chat-input-row { display:flex; align-items:center; gap:6px; margin-top:10px; }
.side-panel.panel-chat .chat-input { flex:1; min-width:0; padding:8px 12px; font-size:13px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--panel-border); border-radius:999px; outline:none; }
.side-panel.panel-chat .chat-input:focus { border-color:var(--gold-deep); }
.side-panel.panel-chat .chat-emoji-btn { flex:0 0 auto; width:38px; height:38px; font-size:18px; cursor:pointer; border:1px solid var(--panel-border); background:rgba(255,255,255,.05); border-radius:50%; transition:.15s; }
.side-panel.panel-chat .chat-emoji-btn:hover { border-color:var(--gold-deep); background:rgba(232,194,104,.12); }
.side-panel.panel-chat .chat-send { flex:0 0 auto; padding:8px 16px; font-size:13px; cursor:pointer; white-space:nowrap; border:none; border-radius:999px; color:#1a160f; font-weight:600; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.side-panel.panel-chat .chat-send:hover { filter:brightness(1.08); }
.side-panel.panel-chat .chat-locked { display:none; align-items:center; margin-top:10px; padding:10px 12px; font-size:12px; line-height:1.5; color:var(--text-dim); background:rgba(255,255,255,.04); border:1px dashed var(--panel-border); border-radius:12px; }

/* 头像上方聊天气泡（麻将 App 同款：发言在玩家头像上方浮出，全房可见） */
.seat-info { position: relative; }
.seat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  max-width: min(220px, 70vw);
  padding: 7px 13px;
  background: #fff;
  color: #333;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  white-space: normal;
  word-break: break-word;
  z-index: 30;
  pointer-events: none;
  animation: seatBubblePop .22s ease-out, seatBubbleFade .28s ease-in 2.7s forwards;
}
.seat-bubble::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.seat-bubble.mine {
  background: #fff8dc;
  color: #4a3b00;
}
.seat-bubble.mine::after { border-top-color: #fff8dc; }
@keyframes seatBubblePop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes seatBubbleFade {
  to { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.98); }
}

/* 自己的座位 */
.seat-self {
  grid-area: self;
  justify-self: center;
  position: static;
  transform: none;
  align-items: center;
  gap: 6px;
  padding: 10px 26px;
  border-radius: 14px;
}
.seat-self.active { background: rgba(232,194,104,.1); box-shadow: 0 0 0 1px rgba(232,194,104,.45) inset; }
.seat-self .card { width: 64px; height: 92px; }

/* 等待阶段提示 */
.net-waiting-tip {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 10px;
}

@media (max-width: 900px) {
  .net-table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    min-height: 420px;
    padding: 12px 10px 10px;
    gap: 8px 8px;
  }
  .opseat { padding: 6px 6px; }
  .opseat .card { width: 32px; height: 46px; }
  .opseat .card-face .rank { font-size: 12px; }
  .opseat .card-face .suit { font-size: 10px; }
  .opseat .seat-info { transform: scale(.8); }
  /* 小屏牌桌紧凑：发牌位移同步收敛，避免牌飞出桌面被裁 */
  .card.deal { --flyY: 44px; }
  .table.dealing::before { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .seat-self { padding: 8px 12px; }
  .seat-self .card { width: 52px; height: 76px; }
  .net-center .pot { font-size: 14px; padding: 8px 18px; }
  .lobby-toolbar { padding: 16px; border-radius: 18px; }
  .toolbar-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-divider { margin: 12px 0; }
  .net-field { max-width: none; }
  .net-field input { font-size: 16px; padding: 12px 14px; }
  .toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .btn-pill { flex: 1; justify-content: center; }

  .side-sheet { width: min(360px, 86vw); }
  .side-panel { padding: 12px; }
  .side-panel .settle-card { padding: 16px 12px; }
  .side-panel .banner-title { font-size: 20px; }
  .side-panel .scard { width: 40px; height: 56px; }
  .side-panel .settle-pot-num { font-size: 44px; }
  .side-panel .settle-pot-num .pn-sign { font-size: 30px; }

  /* 移动端操作区：按钮自动换行，避免 5 个挤成一团 */
  .action-bar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .action-buttons { gap: 8px; }
  .action-buttons .btn { min-width: 78px; flex: 1 1 78px; max-width: 140px; padding: 12px 6px; font-size: 14px; }

  /* 移动端声音开关：右下角悬浮，抬高避开主操作区 */
  .sound-dock { right: 12px; left: auto; bottom: calc(170px + env(safe-area-inset-bottom)); flex-direction: column; gap: 8px; }
  .btn-sound, .btn-voice { width: 42px; height: 42px; }

  /* 移动端牌桌：给座位和底池留足空间 */
  .table { margin: 8px; padding: 12px 10px; }
  .net-table { margin: 8px; padding: 12px 10px; }
}

/* ==================== 邀请 / 退出 增强 ==================== */
.header-actions { display: flex; gap: 10px; align-items: center; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%) translateY(20px);
  max-width: 82vw;
  padding: 12px 22px;
  background: rgba(13, 20, 16, .94);
  border: 1px solid var(--gold-deep, #b98a2f);
  color: #f3e6c4;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 999;
  word-break: break-all;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.invite-tip {
  font-size: 13px;
  color: #f3e6c4;
  background: rgba(232,194,104,.12);
  border: 1px dashed rgba(232,194,104,.55);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.7;
}

/* ==================== 大厅右下角退出登录 ==================== */
.btn-corner {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
}

/* ==================== 右下角悬浮坞：语音开关 + 提示音开关 ==================== */
.sound-dock {
  position: fixed;
  right: 22px;
  bottom: 160px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-sound {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* 独立于提示音的「语音朗读」开关：开=金色高亮，关=灰暗 */
.btn-voice {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #e8c268;
  background: linear-gradient(180deg, rgba(46,52,68,.94), rgba(24,28,40,.94));
  border: 1px solid rgba(232,194,104,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: color .18s, border-color .18s;
}
/* 底部一条小横杠，像话筒的"开合"指示 */
.btn-voice::after {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #e8c268;
  margin-top: 1px;
  transition: background .18s;
}
.btn-voice.muted {
  color: #8992a3;
  border-color: rgba(255,255,255,.14);
}
.btn-voice.muted::after { background: #8992a3; }
.btn-voice:active { transform: scale(.94); }

/* ==================== 站内快讯滚动栏 ==================== */
.news-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 6px;
  background: var(--panel);
  border: 1px solid rgba(232, 194, 104, .25);
  border-radius: 999px;
  padding: 10px 18px;
  overflow: hidden;
}
.ticker-label {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 1px;
}
.ticker-wrap { overflow: hidden; flex: 1; position: relative; min-width: 0; }
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-faint);
  animation: tickerScroll 36s linear infinite;
  will-change: transform;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==================== 网友登陆动态栏 / 排行榜（磨砂玻璃卡） ==================== */
.login-feed {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px 20px 14px;
  text-align: left;
}
.feed-head {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.badge.on { background: rgba(26,82,56,.9); border-color: rgba(87,214,138,.4); color: var(--green-ok); }
.feed-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 190px;
  overflow: hidden;
}
.feed-list li {
  font-size: 13px;
  color: var(--text-dim);
  animation: feedIn .45s ease;
  line-height: 1.6;
}
.feed-list li b { color: var(--gold); font-weight: 600; }
.feed-list li.feed-enter b::before { content: '🚪 '; }
.feed-list li.feed-room b::before { content: '🀄 '; }
.feed-list li.feed-win b::before { content: '🏆 '; }
.feed-time { color: rgba(255, 255, 255, .35); font-size: 12px; margin-left: 8px; white-space: nowrap; }
@keyframes feedIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== 筹码排行榜 ==================== */
.leaderboard { margin-top: 0; }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
}
.lb-row.lb-me { border-color: var(--gold-deep); background: rgba(232,194,104,.1); }
.lb-rank { width: 30px; text-align: center; font-size: 17px; flex-shrink: 0; }
.lb-num { font-family: var(--font-num); font-size: 13px; color: var(--text-faint); font-weight: 700; }
.lb-name { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-chips { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.lb-meta { color: var(--text-faint); font-size: 12px; flex-shrink: 0; }
@media (max-width: 480px) {
  .lb-row { gap: 6px; padding: 8px 8px; }
  .lb-chips { font-size: 13px; }
  .lb-meta { font-size: 11px; }
}

/* ==================== 免费引流：晒战绩 / 邀请好友 ==================== */
.lobby-actions { display: flex; gap: 12px; margin-top: 14px; }
.lobby-actions .btn { flex: 1; }

.share-canvas-wrap {
  display: flex; justify-content: center; margin: 8px 0 4px;
}
#share-canvas {
  width: 100%; max-width: 300px; height: auto; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #10231a;
}
.share-tip { text-align: center; font-size: 12px; margin: 4px 0 10px; }
.invite-link-box {
  display: flex; gap: 8px; margin: 14px 0 8px;
}
.invite-link-box input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3);
  color: var(--text); font-size: 13px;
}
.invite-stat {
  text-align: center; color: var(--gold); font-size: 13px; font-weight: 700;
  min-height: 20px; margin-bottom: 6px;
}

@media (max-width: 900px) {
  .news-ticker { margin-bottom: 2px; }
  .feed-list { max-height: 150px; }
}

/* ============================================================
 * 移动端适配（手机竖屏 320~480px）
 * 仅媒体查询内生效，不影响桌面端布局
 * ============================================================ */
@media (max-width: 480px) {
  /* 视图容器为 JS 注入的 display:flex（行向）：窄屏改为纵向堆叠并允许收缩 */
  #view-lobby, #view-online { flex-direction: column; }
  #view-lobby > *, #view-online > * { min-width: 0; max-width: 100%; }
  #view-online .lobby-header { justify-content: space-between; }

  /* ---- 登录页 ---- */
  #view-auth { padding: 16px; }
  .auth-card { width: 100%; max-width: 100%; padding: 28px 18px 24px; border-radius: 20px; }
  .brand-logo { width: 52px; height: 52px; border-radius: 15px; }
  .brand-logo svg { width: 28px; height: 28px; }
  .brand h1 { font-size: 24px; letter-spacing: 3px; }
  .brand-sub { font-size: 12px; letter-spacing: 1px; line-height: 1.55; max-width: 240px; }
  .tabs { margin-bottom: 18px; }
  /* iOS 输入框聚焦不触发页面缩放 */
  #auth-form input, .net-nick input { font-size: 16px; padding: 13px 14px; }
  #btn-guest { margin-top: 14px; }

  /* ---- 大厅 ---- */
  .lobby-main { padding: 18px 12px 30px; }
  .lobby-hero { padding: 30px 16px 26px; border-radius: 20px; margin-bottom: 16px; }
  .lobby-hero h2 { font-size: 27px; letter-spacing: 3px; }
  .hero-sub { font-size: 13px; }
  .hero-sub br { display: none; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; padding: 14px; font-size: 15px; }
  .lobby-title { font-size: 19px; margin-bottom: 16px; letter-spacing: 2px; }
  .mode-grid { gap: 12px; margin-bottom: 20px; }
  .mode-card { padding: 22px 16px; }
  .mode-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 10px; }
  .mode-icon svg { width: 24px; height: 24px; }
  .mode-card h3 { font-size: 17px; }
  .mode-card p { margin-bottom: 14px; }
  .mode-card .btn { display: block; width: 100%; padding: 12px; font-size: 15px; }
  .mode-badge { top: 10px; right: 10px; font-size: 10px; padding: 3px 10px; }
  #btn-rules { width: 100%; }

  /* 筹码补充站：按钮加大到舒适触控尺寸 */
  .chip-station { padding: 10px 10px 8px; }
  .cs-title { font-size: 14px; }
  .cs-sub { font-size: 11px; }
  .cs-tier { padding: 6px 8px; gap: 6px; }
  .cs-tier-info b { font-size: 12px; }
  .cs-tier-rule { font-size: 10.5px; }
  .cs-tier .btn-sm { padding: 9px 16px; font-size: 12.5px; border-radius: 8px; }
  .cs-rules-list li { font-size: 11px; }

  /* 快讯 / 动态 */
  .news-ticker { padding: 8px 12px; gap: 8px; border-radius: 999px; }
  .ticker-label { font-size: 12px; }
  .ticker-track { font-size: 12px; }
  .login-feed { padding: 12px 12px 10px; }
  .feed-list li { font-size: 12.5px; }

  /* ---- 牌桌页头（人机 + 联机共用）：图标化 + 紧凑 ---- */
  .game-header { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .game-header .btn-sm.btn-icon { width: 34px; height: 34px; font-size: 16px; padding: 0; }
  .header-actions { gap: 6px; margin-left: auto; }
  .game-meta { gap: 6px 10px; font-size: 11px; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; justify-content: center; order: 3; }
  .game-meta span { white-space: nowrap; }
  .game-meta b { font-size: 12px; }

  /* ---- 牌桌 ---- */
  .table { margin: 6px 6px 4px; padding: 10px 8px; border-width: 1.5px; border-radius: 18px; box-shadow: inset 0 0 0 5px rgba(232,194,104,.10), inset 0 0 70px rgba(0,0,0,.5), 0 10px 36px rgba(0,0,0,.5); width: 100%; min-width: 0; }
  .net-table { margin: 6px 6px 4px; padding: 10px 8px; border-radius: 18px; }
  .table::after { font-size: 14px; letter-spacing: 6px; }
  .seat { width: 100%; min-width: 0; }
  .seat-top { align-items: center; }
  .seat-bottom { align-items: center; }
  .seat-info { min-width: 0; width: 100%; justify-content: center; }
  .cards { gap: 8px; min-height: 88px; }
  .card { width: 54px; height: 78px; }
  .card-face .rank { font-size: 22px; }
  .card-face .suit { font-size: 18px; }
  .seat-name { font-size: 14px; white-space: nowrap; }
  .seat-chips { font-size: 12px; white-space: nowrap; }
  .badge { font-size: 10px; padding: 2px 8px; }
  .pot { font-size: 14px; padding: 8px 18px; }
  .pot b { font-size: 18px; }
  .pot-net { font-size: 24px; letter-spacing: 3px; margin-top: 8px; }
  .pot-area { width: 100%; }
  .banner { padding: 14px 12px; margin-top: 10px; max-width: 76vw; background: rgba(8, 14, 11, .93); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .banner-title { font-size: 18px; }
  .banner-sub { font-size: 12px; word-break: break-word; }
  .banner-actions { flex-wrap: wrap; }
  .turn-hint { font-size: 12px; margin: 4px 0 2px; }

  /* ---- 操作区：按钮自动换行，触控高度 ≥44px ---- */
  .action-bar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .action-buttons { gap: 8px; }
  .action-buttons .btn { min-width: 78px; flex: 1 1 78px; max-width: 140px; padding: 12px 6px; font-size: 14px; }
  .raise-panel { gap: 6px; }
  .raise-panel span { font-size: 13px; }
  .raise-panel .opt { padding: 10px 14px; font-size: 13px; }

  /* ---- 日志 ---- */
  .log-panel { margin: 0 8px 12px; max-height: 160px; }
  .log-list { font-size: 12px; padding: 8px 10px; }

  /* ---- 弹窗 ---- */
  .modal-card { padding: 20px 16px; max-width: 94vw; max-height: 82vh; }
  .modal-card h2 { font-size: 17px; }
  .rules-body ul, .rules-body ol { font-size: 13px; line-height: 1.9; }
  #btn-rules-close { width: 100%; margin-left: 0; }
  .banner-actions .btn { flex: 1 1 auto; }

  /* ---- 联机大厅 ---- */
  .online-lobby { padding: 12px; }
  .lobby-toolbar { padding: 16px 14px; border-radius: 18px; margin-bottom: 18px; }
  .toolbar-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-divider { margin: 12px 0; }
  .net-field { max-width: none !important; }
  .net-field input { font-size: 16px; padding: 12px 14px; }
  .toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .btn-pill { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13px; }
  .btn-join { width: 100%; justify-content: center; }
  .section-title { font-size: 16px; margin: 22px 0 12px; padding-left: 12px; }
  .section-title small { font-size: 11px; }
  .table-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .table-card { padding: 12px; border-radius: 14px; gap: 10px; }
  .tc-name { font-size: 14px; }
  .room-item { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .room-right { margin-left: auto; }

  /* ---- 6 人联机牌桌：三列压缩 + 手牌扇形叠放防溢出 ---- */
  .net-table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 6px;
    min-height: 380px;
    padding: 10px 6px 8px;
  }
  .opseat { padding: 5px 4px; gap: 3px; }
  .opseat .cards { gap: 0; min-height: 48px; }
  .opseat .card { width: 30px; height: 44px; }
  .opseat .card + .card { margin-left: -9px; }  /* 扇形叠放，3 张只占 ~52px */
  .opseat .seat-info { transform: scale(.72); }
  .opseat .seat-name { font-size: 11px; max-width: 76px; }
  .seat-empty { padding: 12px 8px; font-size: 10px; gap: 4px; }
  .net-center { padding: 8px; gap: 6px; }
  .net-center .pot { font-size: 13px; padding: 7px 14px; }
  .net-stake-line { font-size: 11px; }
  .net-stake-line b { font-size: 13px; }
  .turn-hint { font-size: 12px; }
  .seat-self { padding: 6px 10px; gap: 4px; }
  .seat-self .card { width: 46px; height: 66px; }
  /* 头像上方聊天气泡：小屏再窄一点，避免盖牌 */
  .seat-bubble { max-width: min(170px, 52vw); font-size: 12px; padding: 5px 10px; }

  /* 悬浮按钮贴边留出安全区 */
  .btn-corner { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sound-dock { right: 12px; bottom: calc(170px + env(safe-area-inset-bottom)); gap: 6px; }
  .btn-sound, .btn-voice { width: 40px; height: 40px; font-size: 18px; }
  .btn-voice { font-size: 12px; }
  #toast { bottom: calc(42px + env(safe-area-inset-bottom)); }
}

/* 超窄屏（≤360px）再压一档，确保无横向滚动 */
@media (max-width: 360px) {
  .card { width: 48px; height: 70px; }
  .opseat .card { width: 26px; height: 38px; }
  .opseat .card + .card { margin-left: -8px; }
  .seat-self .card { width: 42px; height: 60px; }
  .game-meta { gap: 8px; font-size: 11px; flex-wrap: wrap; }
  .action-buttons .btn { padding: 12px 6px; font-size: 14px; }
  .mode-card { padding: 18px 12px; }
  .banner { max-width: 86vw; }
  .lobby-hero h2 { font-size: 24px; }
}

/* ==================== 鎏金结算卡 · 移动端适配 ==================== */
@media (max-width: 480px) {
  .side-panel .settle-card { width: 100%; max-height: none; padding: 16px 12px 14px; border-radius: 18px; }
  .side-panel .settle-card .banner-title { font-size: 21px; letter-spacing: 2px; }
  .side-panel .banner-sub { max-height: 90px; overflow-y: auto; font-size: 11px; line-height: 1.55; }
  /* 牌型阶梯：窄屏收紧牌型名与持有者列，强度条优先保住 */
  .side-panel .hand-ladder { padding: 6px 8px 8px; margin-bottom: 9px; }
  .hand-ladder-head { margin-bottom: 4px; }
  .hand-ladder-row { gap: 6px; }
  .hand-ladder-row .hl-name { width: 30px; font-size: 11px; }
  .hand-ladder-row .hl-who { width: 84px; font-size: 10px; }
  .side-panel .banner-actions { gap: 8px; }
  .side-panel .banner-actions .btn { padding: 10px 14px; font-size: 14px; }
  .side-panel .scard { width: 42px; height: 58px; border-radius: 8px; }
  .side-panel .scard-rank { font-size: 17px; }
  .side-panel .scard-suit { font-size: 13px; }
  .side-panel .settle-all { margin: 8px 0 12px; }
  .side-panel .showdown-all-item { min-width: 82px; padding: 6px 4px 5px; }
  .side-panel .showdown-all-cards .scard { width: 25px; height: 35px; border-radius: 5px; }
  .side-panel .showdown-all-cards .scard-rank { font-size: 11px; }
  .side-panel .showdown-all-cards .scard-suit { font-size: 9px; }
  .side-panel .showdown-all-name { font-size: 11px; }
  .side-panel .showdown-all-hand { font-size: 10px; }
  .side-panel .settle-hand { gap: 12px; margin-bottom: 10px; }
  .side-panel .settle-hand-name { font-size: 17px; }
  .side-panel .settle-pot { margin-bottom: 8px; }
  .side-panel .settle-pot-num { font-size: 46px; }
  .side-panel .settle-pot-num .pn-sign { font-size: 32px; }
  .side-panel .settle-card.settle-lose .settle-pot-num { font-size: 40px; }
  /* 操作条常驻按钮：手机上圆角胶囊，宽度自适应 */
  .btn-next-bar {
    width: auto;
    min-width: 140px;
    margin: 8px auto 0;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 1px;
  }
}
@media (max-width: 360px) {
  .side-panel .settle-hand { flex-direction: column; }
  .side-panel .settle-hand-meta { text-align: center; }
  .side-panel .banner-sub { font-size: 11px; }
  /* 超窄屏放弃持有者文字，只留牌型名 + 强度条 */
  .side-panel .hand-ladder-row .hl-who { display: none; }
  .side-panel .hand-ladder-row .hl-name { width: 32px; }
}

/* ===== 大厅固定桌网格 ===== */
.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin: 6px 0 8px;
}
.table-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.table-card:hover:not(:disabled) {
  border-color: var(--gold-border);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 14px 38px rgba(0,0,0,.28), 0 0 28px rgba(232,194,104,.10);
  transform: translateY(-2px);
}
.table-card:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.6);
}
.table-card.playing {
  border-color: rgba(232,194,104,.55);
  background: linear-gradient(160deg, rgba(232,194,104,.12), rgba(232,194,104,.04));
  box-shadow: 0 0 24px rgba(232,194,104,.12), 0 8px 26px rgba(0,0,0,.22);
}
.table-card.playing .tc-name { color: var(--gold); }

.tc-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.tc-name {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text);
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.tc-status {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,.22);
  color: var(--text-faint);
  white-space: nowrap;
}
.table-card.playing .tc-status {
  background: rgba(232,194,104,.16);
  border-color: rgba(232,194,104,.35);
  color: var(--gold);
}
.tc-tags { display: flex; align-items: center; gap: 6px; }
.tc-ai {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #fff;
  border: 1px solid rgba(143,211,255,.55);
  background: linear-gradient(160deg, #2f7fd6, #185fa5);
  box-shadow: 0 2px 10px rgba(24,95,165,.35);
  white-space: nowrap;
}
/* 人机擂台：整卡高亮，从一众普通桌中跳出来吸引点击 */
.table-card.arena {
  border-color: rgba(143,211,255,.5);
  box-shadow: 0 0 0 1px rgba(143,211,255,.25), 0 8px 26px rgba(24,95,165,.28);
}
.table-card.arena .tc-name { color: #8fd3ff; }
.table-card.arena:hover:not(:disabled) {
  border-color: rgba(143,211,255,.85);
  box-shadow: 0 0 0 1px rgba(143,211,255,.4), 0 10px 30px rgba(24,95,165,.4);
}
/* 座位上的常驻 AI 陪练：轻微冷色调，与真人区分 */
.opseat.bot-seat .seat-name { color: #8fd3ff; }

.tc-seats { display: flex; flex-direction: column; gap: 8px; }
.seat-bar {
  display: flex;
  gap: 4px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
}
.seat-segment {
  flex: 1;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  transition: background .2s;
}
.seat-segment.on {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 6px rgba(232,194,104,.35);
}
.tc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
}
.tc-foot b { color: var(--gold); font-family: var(--font-num); font-size: 14px; }
.badge.idle { background: rgba(0,0,0,.22); color: var(--text-faint); border-color: var(--panel-border); }

/* 大厅固定桌：筹码分区区块 */
.tier-block { --tier-color: var(--gold); }
.tier-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}
.tier-block:first-of-type .tier-head { margin-top: 4px; }
.tier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--tier-color);
  background: rgba(255,255,255,.05);
  border: 1px solid currentColor;
}
.tier-range { font-size: 12px; color: var(--text-faint); }
.tier-tag {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(232,194,104,.12);
  border: 1px solid var(--gold-border);
}
.tier-head-fit { border-bottom-color: var(--tier-color); }
.table-card.tier-fit {
  box-shadow: 0 0 0 1px var(--tier-color), 0 8px 26px rgba(0,0,0,.22);
}

/* ============ 社区数据中心（A 档：纯聚合统计，不暴露个人昵称） ============ */
.data-center {
  margin-top: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px 10px;
}
.dc-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 6px;
  letter-spacing: .3px;
}
.dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.dc-metric {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 5px 4px;
  text-align: center;
}
.dc-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.dc-lab { font-size: 9px; color: var(--text-faint); margin-top: 2px; }
.dc-chart-title { font-size: 9px; color: var(--text-faint); margin-bottom: 4px; }
.dc-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 36px; padding: 0 1px; }
.dc-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dc-bar {
  width: 100%;
  max-width: 18px;
  background: linear-gradient(180deg, rgba(160,170,160,.55), rgba(100,110,100,.35));
  border-radius: 3px 3px 0 0;
  position: relative;
  transition: height .4s ease;
  min-height: 1px;
}
.dc-today .dc-bar { background: linear-gradient(180deg, #7fe0a8, #2faf6a); }
.dc-bar-val { position: absolute; top: -9px; left: 0; right: 0; font-size: 7px; color: var(--text-faint); text-align: center; }
.dc-bar-lab { font-size: 8px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; }
@media (max-width: 600px) {
  .dc-grid { gap: 5px; }
  .dc-num { font-size: 14px; }
  .dc-bars { height: 32px; }
  .dc-bar-lab { font-size: 7px; }
}

/* ==================== 头像系统（A默认 + B预设库 + C本机上传） ==================== */
.avatar { position: relative; }   /* 为房主/机器人角标定位；自定义图靠自身 border-radius 裁圆，故不设 overflow 以免角标被裁 */
.avatar .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-grid .av-thumb { width: 86%; height: 86%; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 0 0 1px rgba(232,194,104,.35); }
.av-cell.selected .av-thumb { box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,.4); }
.avatar .av-initial { font-weight: 700; font-size: 17px; line-height: 1; color: var(--gold); }
.avatar .av-corner {
  position: absolute; right: -3px; bottom: -3px;
  font-size: 11px; line-height: 1;
  background: var(--panel); border: 1px solid var(--gold-border);
  border-radius: 50%; padding: 1px; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* 大厅「换头像」小按钮 */
#btn-avatar { padding: 4px 10px; font-size: 12px; margin-left: 2px; }

/* ---- 头像选择弹窗 ---- */
#avatar-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.avatar-mask { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.avatar-dialog {
  position: relative; width: 460px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(170deg, #131b16, #0d1410);
  border: 1px solid var(--gold-border); border-radius: 20px;
  padding: 22px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.65);
  animation: popIn .25s ease both;
}
.avatar-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-size: 19px; color: var(--gold); letter-spacing: 2px; }
.avatar-close { background: none; border: none; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.avatar-close:hover { color: var(--gold); }
.avatar-cur { margin: 10px 0 14px; font-size: 13px; color: var(--text-dim); }
.avatar-cur b { color: var(--gold); }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.av-cell {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 30px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--gold-border); transition: .15s;
}
.av-cell:hover { background: rgba(232,194,104,.10); transform: translateY(-2px); }
.av-cell.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(0,0,0,.35); background: linear-gradient(160deg, rgba(232,194,104,.16), rgba(232,194,104,.03)); }
.av-cell.locked { opacity: .62; }
.av-cell.locked:hover { opacity: .85; }
.av-lock {
  position: absolute; right: 4px; bottom: 4px; font-size: 10px; font-style: normal;
  background: rgba(0,0,0,.55); color: #ffd479; padding: 1px 4px; border-radius: 6px; white-space: nowrap;
}
.avatar-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.avatar-tip { margin-top: 12px; font-size: 11px; color: var(--text-faint); line-height: 1.7; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .avatar-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .av-cell { font-size: 26px; }
}

/* ---- 扫码进网站弹窗 ---- */
.qr-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.qr-mask { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.qr-dialog { position: relative; width: 320px; max-width: 92vw; background: linear-gradient(170deg, #131b16, #0d1410); border: 1px solid var(--gold-border); border-radius: 20px; padding: 22px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.65); animation: popIn .25s ease both; text-align: center; }
.qr-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-size: 18px; color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; }
.qr-close { background: none; border: none; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.qr-close:hover { color: var(--gold); }
.qr-img { width: 220px; max-width: 70vw; height: auto; border-radius: 12px; background: #fff; padding: 10px; box-sizing: border-box; }
.qr-tip { color: var(--text-dim); font-size: 13px; margin: 14px 0 16px; line-height: 1.7; }
.qr-dialog .btn-block { width: 100%; box-sizing: border-box; }
/* 首页入口「扫码进网站」按钮区 */
.auth-qr-entry { margin-top: 14px; width: 100%; display: flex; justify-content: center; }
.btn-qr-auth { width: 100%; max-width: 320px; }