/* ============================================================
   theme.css · 视觉打磨附加层（现代极简 / Modern Minimal Poker）
   ------------------------------------------------------------
   加载顺序：styles.css 之后。本文件是【覆盖层】，不重写布局结构，
   只重塑材质、层次、状态可读性与操作手感。

   硬约束（自检通过）：
   - 零外部资源：无图片、无字体、无 CDN，全部 CSS 渐变 / 阴影 / 伪元素
   - 深色主题，所有色值对齐 design/art/art-direction.md v1.4 §2 token 表
   - 所有选择器均在 client/index.html 或 client/js/render.js 中有对应元素
   - 动画一律尊重 prefers-reduced-motion（文件末尾统一降级）
   - 闪烁频率均 < 3Hz（防光敏），呼吸类动画周期 >= 1.2s
   ============================================================ */

/* ─────────────────────────────────────────────
   0. 设计令牌（覆盖 styles.css 的 :root）
   ───────────────────────────────────────────── */
:root {
  /* 基础层 */
  --c-bg-deep:        #0E1412;
  --c-felt-core:      #2A5446;
  --c-felt-edge:      #1B342C;
  --c-felt-spot:      #35695A;
  --c-felt-vignette:  #10231C;
  --c-rail:           #33251A;
  --c-rail-hi:        #5A4230;
  --c-surface:        #18211E;
  --c-surface-raised: #212C28;
  --c-line:           #33413C;

  /* 文字 */
  --c-text-hi:        #F2EFE8;
  --c-text-mid:       #B4BCB8;
  --c-text-low:       #7B8681;

  /* 牌面 */
  --c-card-face:      #FAF7F0;
  --c-card-face-hi:   #FDFBF6;
  --c-card-face-lo:   #EDE7DA;
  --c-card-edge:      #D2CBBC;
  --c-suit-red:       #C62828;
  --c-suit-dark:      #1A1F1D;

  /* 语义动作色（art-direction §2.3，全部 WCAG AA 实测达标） */
  --c-act-fold:       #5A6763;
  --c-act-fold-line:  #7B8681;
  --c-act-check:      #6EA6CE;
  --c-act-call:       #3FB58A;
  --c-act-raise:      #E0913C;
  --c-act-allin:      #BC3F36;
  --c-act-disabled:   #2A3330;
  --c-on-bright:      #0E1412;   /* 亮底按钮上的深色文字 */

  /* 强调与状态 */
  --c-gold:           #D4A548;
  --c-gold-soft:      #8A6D2E;
  --c-win:            #5FD3A0;
  --c-warn:           #E8C255;
  --c-focus:          #7FD4FF;

  /* 缓动与时长（art-direction §3.4.5） */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-std:    cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-press:  100ms;
  --d-fast:   160ms;
  --d-mid:    220ms;

  /* 结构参数 */
  --rail-w:      8px;   /* 桌沿厚度，随断点调整 */
  --deal-step:  70ms;   /* 发牌错峰间隔（任务要求 60~80ms） */

  /* 回填 styles.css 的旧变量，让未被本文件直接覆盖的规则也跟着变 */
  --felt-dark: var(--c-felt-vignette);
  --felt:      var(--c-felt-edge);
  --felt-light:var(--c-felt-core);
  --gold:      var(--c-gold);
  --gold-dim:  var(--c-gold-soft);
  --ink:       var(--c-bg-deep);
  --text:      var(--c-text-hi);
  --text-dim:  var(--c-text-mid);
  --danger:    var(--c-act-allin);
  --ok:        var(--c-act-call);
  --call:      var(--c-act-check);
  --raise:     var(--c-act-raise);
  --card-face: var(--c-card-face);
  --shadow:    0 6px 20px rgba(0, 0, 0, .45);
}

/* 全局：等宽数字，防止筹码/倒计时变化时横向抖动 */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #1A2E28 0%, transparent 60%),
    radial-gradient(100% 70% at 50% 110%, #12201C 0%, transparent 65%),
    var(--c-bg-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────
   1. 牌桌质感
   ───────────────────────────────────────────── */

.felt-wrap { padding: 10px 10px 6px; }

.felt {
  /* 桌布：织物斜纹 × 2 + 吊灯聚光 + 边缘暗角 + 底色，全部纯 CSS */
  background:
    repeating-linear-gradient(45deg,  rgba(255, 255, 255, .018) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .038)       0 2px, transparent 2px 4px),
    radial-gradient(58% 40% at 50% 33%, rgba(93, 158, 135, .30) 0%, transparent 72%),
    radial-gradient(125% 95% at 50% 58%, transparent 50%, var(--c-felt-vignette) 100%),
    radial-gradient(ellipse 72% 62% at 50% 42%, var(--c-felt-core) 0%, var(--c-felt-edge) 62%, #14261F 100%);
  /* 桌沿：木色实体 rail */
  border: var(--rail-w) solid var(--c-rail);
  box-shadow:
    inset 0 0 0 1px rgba(212, 165, 72, .20),   /* 呢面与 rail 交界的金线 */
    inset 0 4px 12px rgba(0, 0, 0, .60),        /* 呢面下沉 */
    inset 0 -2px 8px rgba(0, 0, 0, .35),
    inset 0 0 60px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(0, 0, 0, .55),               /* rail 外轮廓 */
    0 16px 36px rgba(0, 0, 0, .55);             /* 整桌落影 */
}

/* rail 立体：顶部受光高光 + 底部厚度阴影（光来自正上方） */
.felt::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--rail-w));
  border-radius: 46% / 34%;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 2px 3px rgba(255, 255, 255, .05),
    inset 0 -3px 6px rgba(0, 0, 0, .50);
}

/* 内圈装饰线（原 styles.css 已有此伪元素，此处只改观感） */
.felt::after {
  inset: 9%;
  border-color: rgba(212, 165, 72, .14);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .18);
}

/* 公共牌区：轻微凹槽，给牌一个明确落点 */
.community {
  gap: 5px;
  padding: 5px 8px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 35%, rgba(0, 0, 0, .30), rgba(0, 0, 0, .12));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 1px 0 rgba(255, 255, 255, .04);
}

/* 底池：稀缺金色，做成有分量的胶囊 */
.pot-display {
  font-size: 14px;
  letter-spacing: .04em;
  padding: 4px 14px;
  color: var(--c-gold);
  background:
    linear-gradient(180deg, rgba(212, 165, 72, .16), rgba(0, 0, 0, .45));
  border: 1px solid rgba(212, 165, 72, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 2px 8px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* ─────────────────────────────────────────────
   2. 扑克牌
   ───────────────────────────────────────────── */

.card {
  border-radius: 6px;
  color: var(--c-suit-dark);
  /* 纸感：左上受光的线性渐变 + 上沿内高光 + 下沿内阴影（厚度） */
  background: linear-gradient(150deg,
    var(--c-card-face-hi) 0%,
    var(--c-card-face) 55%,
    var(--c-card-face-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(14, 20, 18, .10),
    inset 0 0 0 1px var(--c-card-edge),
    0 2px 5px rgba(0, 0, 0, .45),
    0 6px 12px rgba(0, 0, 0, .22);
  animation: dealIn var(--d-mid) var(--ease-out) both;
}

.card .card-rank {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.card .card-suit { opacity: .94; }

.card.red { color: var(--c-suit-red); }

/* 牌背：极简几何 —— 深蓝径向底 + 45 度菱形网格 + 中心徽记 */
.card.back {
  background:
    radial-gradient(circle at 42% 34%, #1E5478 0%, #164059 58%, #0F2C3E 100%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(143, 184, 208, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(10, 32, 46, .9),
    0 2px 5px rgba(0, 0, 0, .45);
}
.card.back::after {
  inset: 4px;
  border-radius: 3px;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255, 255, 255, .10) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 6px);
  box-shadow: inset 0 0 0 1px rgba(143, 184, 208, .22);
}
/* 中心徽记：一枚同心圆点，纯几何 */
.card.back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, rgba(190, 220, 236, .55), rgba(143, 184, 208, .18) 60%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(143, 184, 208, .30);
}
.card.sm.back::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; }

.card.dim { filter: saturate(.28) brightness(.62); }

.card.highlight {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 0 0 2px var(--c-win),
    0 4px 12px rgba(0, 0, 0, .5);
}

/* 入场：位移 + 透明度 + 轻微 Y 轴翻转，落定带 4% 超调 */
@keyframes dealIn {
  0%   { opacity: 0; transform: translateY(-15px) scale(.88) rotateY(16deg); }
  70%  { opacity: 1; transform: translateY(1px) scale(1.04) rotateY(0deg); }
  100% { opacity: 1; transform: none; }
}

/* 错峰入场：公共牌最多 5 张、手牌 2 张，逐张 70ms */
.community .card:nth-child(1) { animation-delay: 0ms; }
.community .card:nth-child(2) { animation-delay: calc(var(--deal-step) * 1); }
.community .card:nth-child(3) { animation-delay: calc(var(--deal-step) * 2); }
.community .card:nth-child(4) { animation-delay: calc(var(--deal-step) * 3); }
.community .card:nth-child(5) { animation-delay: calc(var(--deal-step) * 4); }
.seat-cards .card:nth-child(2) { animation-delay: calc(var(--deal-step) * 1); }

/* ─────────────────────────────────────────────
   3. 座位与状态可读性
   ───────────────────────────────────────────── */

.seat-box {
  padding: 5px 4px 12px;   /* 底部 padding 加大，让 chips/tags 与外层 bet/action 拉开 */
  border-radius: 12px;
  background:
    linear-gradient(180deg, var(--c-surface-raised) 0%, var(--c-surface) 100%);
  border: 1px solid var(--c-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 3px 8px rgba(0, 0, 0, .42);
  transition:
    border-color var(--d-fast) var(--ease-out),
    box-shadow   var(--d-fast) var(--ease-out),
    transform    var(--d-fast) var(--ease-out),
    opacity      var(--d-fast) linear;
}

.seat-name {
  font-size: 11.5px;
  color: var(--c-text-mid);
  letter-spacing: .01em;
}
/* 筹码数字：回归座位盒子内部（手牌下、名字下），保持"座位 = 完整身份单元"的视觉语义。
 * 下注额 / 动作气泡分别放在座位盒子两侧（朝向/远离底池），三者永不冲突。 */
.seat-chips {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 当前行动玩家：高亮环 + 浮起 + 呼吸（0.63Hz，远低于 3Hz） */
.seat.acting .seat-box {
  border-color: var(--c-gold);
  transform: translateY(-2px);
  animation: actingBreath 1.6s ease-in-out infinite;
}
@keyframes actingBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 2px rgba(212, 165, 72, .48),
      0 0 12px rgba(212, 165, 72, .18),
      0 5px 12px rgba(0, 0, 0, .48);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 3px rgba(212, 165, 72, .90),
      0 0 22px rgba(212, 165, 72, .38),
      0 5px 12px rgba(0, 0, 0, .48);
  }
}
.seat.acting .seat-name { color: var(--c-text-hi); }

/* 自己：冷绿描边，与"轮到谁"的金色互不抢戏 */
.seat.self .seat-box {
  border-color: rgba(95, 211, 160, .55);
  background: linear-gradient(180deg, #24322D 0%, #18211E 100%);
}
.seat.self .seat-name { color: var(--c-text-hi); font-weight: 700; }

/* 空位 */
.seat.empty .seat-box {
  opacity: .34;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

/* 弃牌：降透明度 + 去饱和。
   注意不把 opacity/filter 加在 .seat-box 上 —— 父级 opacity/filter 会把
   整个子树一起压掉，庄家位 D、SB/BB 这些"下一手行动顺序"的关键角标会跟着糊。
   改为只作用于 手牌 / 昵称 / 筹码 三处，角标保持独立图层。 */
.seat.folded .seat-box {
  opacity: 1;
  border-color: rgba(51, 65, 60, .55);
  background: linear-gradient(180deg, rgba(33, 44, 40, .55) 0%, rgba(24, 33, 30, .55) 100%);
  box-shadow: none;
}
.seat.folded .seat-cards,
.seat.folded .seat-name,
.seat.folded .seat-chips {
  opacity: .45;
  filter: saturate(.4);
}

/* 手牌槽 */
.seat-cards { gap: 3px; }

/* 角标 */
.seat-tags { gap: 3px; margin-top: 3px; }
.tag {
  font-size: 10px;
  line-height: 1.4;
  padding: 0 5px;
  border-radius: 7px;
  letter-spacing: .04em;
  color: var(--c-text-hi);
  background: var(--c-surface-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
/* 庄家钮：金色实心，扑克桌上唯一的"位置权威" */
.tag.dealer {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  color: var(--c-on-bright);
  background: radial-gradient(circle at 35% 28%, #F0DCA6, var(--c-gold) 62%, #B8862F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .5);
}
.tag.sb, .tag.bb {
  background: var(--c-surface-raised);
  color: var(--c-text-hi);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.tag.bb { box-shadow: inset 0 0 0 1px rgba(212, 165, 72, .35); }
/* 全下：全场唯一的红 */
.tag.allin {
  background: var(--c-act-allin);
  color: var(--c-text-hi);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(188, 63, 54, .5);
}
/* AI：独有紫色相 + 独有色块，绝不与真人混淆 */
.tag.bot {
  background: #5C4A72;
  color: #E7DCF5;
  box-shadow: inset 0 0 0 1px #9B7FC4;
}
/* 断线：琥珀警示，不弱化（系统还在等他） */
.tag.offline {
  background: rgba(232, 194, 85, .16);
  color: var(--c-warn);
  box-shadow: inset 0 0 0 1px rgba(232, 194, 85, .65);
}

/* 席位级状态强调（:has 为渐进增强，不支持时角标本身仍完整传达信息） */
.seat:has(.tag.allin) .seat-box {
  border-color: var(--c-act-allin);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(188, 63, 54, .55),
    0 3px 10px rgba(0, 0, 0, .45);
}
.seat:has(.tag.offline) .seat-box {
  border-style: dashed;
  border-color: var(--c-warn);
  animation: discPulse 1.4s ease-in-out infinite;
}
@keyframes discPulse {
  0%, 100% { border-color: var(--c-warn); }
  50%      { border-color: rgba(232, 194, 85, .40); }
}
/* 断线的人正好轮到他行动：保留琥珀虚线（他掉线了），但金环呼吸必须回来
   —— 全桌都在等他超时，这一格是所有人的注意力锚点 */
.seat.acting:has(.tag.offline) .seat-box {
  border-color: var(--c-warn);
  animation: actingBreath 1.6s ease-in-out infinite;
}

/* 面前的下注筹码：改成一枚真正的筹码圆片 + 金额 */
.seat-bet {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  /* top/bottom 由 render.js 根据座位位置动态设置：
   *   上半圆 → bet 在座位下方（朝向底池）
   *   下半圆 → bet 在座位上方（朝向底池） */
  font-size: 11.5px;
  padding: 2px 8px 2px 6px;
  border-radius: 11px;
  color: var(--c-text-hi);
  background: linear-gradient(180deg, rgba(20, 28, 25, .92), rgba(8, 14, 12, .92));
  border: 1px solid rgba(212, 165, 72, .5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-variant-numeric: tabular-nums;
}
.seat-bet::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F5E6BD, var(--c-gold) 55%, #8A6D2E 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 -1px 1px rgba(0, 0, 0, .35);
}

/* 最近动作气泡：金色（保留筹码视觉），永远在座位**远离底池**那一侧。
 * 上半圆 → action 在座位上方；下半圆 → action 在座位下方。
 * 与 bet 各占一侧，永不冲突。1.6s 自动淡出避免堆积。 */
.seat-action {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  /* top/bottom 由 render.js 动态设置 */
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--c-text-hi);
  background: linear-gradient(180deg, rgba(28, 38, 34, .96), rgba(12, 20, 17, .96));
  border: 1px solid rgba(212, 165, 72, .6);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
  letter-spacing: .02em;
  opacity: 1;
  transition: opacity .3s ease-out;
}
.seat-action.fading { opacity: 0; }
.seat-action::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: rgba(212, 165, 72, .6);
}
/* 下半圆座位时 action 在座位下方，箭头朝上指向座位 */
.seat-action.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(212, 165, 72, .6);
}

/* ─────────────────────────────────────────────
   4. 操作区手感（移动端优先）
   ───────────────────────────────────────────── */

.action-bar {
  padding: 10px 12px calc(12px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(14, 20, 18, .55) 0%, rgba(14, 20, 18, .88) 100%);
  border-top: 1px solid rgba(212, 165, 72, .22);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .40);
}

/* 按压反馈：scale + 内压阴影 + 亮度，不只有颜色变 */
.btn {
  border-radius: 12px;
  transition:
    transform var(--d-press) var(--ease-spring),
    filter    var(--d-press) linear,
    box-shadow var(--d-press) linear;
}
.btn:active:not(:disabled) {
  transform: scale(.965);
  filter: brightness(.92);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .38);
}

/* 四个主动作：触控目标 >= 44px（此处 52px），语义色对齐 art-direction §2.3 */
.action-row { gap: 10px; }
.action-row .btn {
  min-height: 52px;
  padding: 12px 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* 三槽比例：弃牌 1 / 过牌·跟注 1.2 / 加注 1.5（拇指最常用的最宽） */
#btn-fold  { flex: 1; }
#btn-check,
#btn-call  { flex: 1.2; }
#btn-raise,
#btn-raise-confirm { flex: 1.5; }

/* 弃牌：中性石灰 + 必须的 1px 描边（纯色块与操作区底只有 2.79:1，边界不可辨） */
.action-row .btn-fold {
  background: var(--c-act-fold);
  color: var(--c-text-hi);
  border: 1px solid var(--c-act-fold-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
/* 过牌：冷蓝 = 中立不投入 */
.action-row .btn-check {
  background: var(--c-act-check);
  color: var(--c-on-bright);
  border: none;
}
/* 跟注：薄荷绿 = 前进跟上 */
.action-row .btn-call {
  background: var(--c-act-call);
  color: var(--c-on-bright);
  border: none;
}
/* 加注：琥珀橙 = 施压升温 */
.action-row .btn-raise {
  background: var(--c-act-raise);
  color: var(--c-on-bright);
  border: none;
}
/* 确认加注：同色但加金环，强调这是"落锤"那一下 */
#btn-raise-confirm {
  box-shadow:
    0 0 0 2px rgba(212, 165, 72, .55),
    0 2px 8px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* 禁用态：不用 opacity（会连带压低文字对比度），改用专门的禁用底色。
   放在配色规则之后，保证任何按钮被禁用时都能盖住自己的语义色。 */
.btn:disabled,
.action-row .btn:disabled {
  opacity: 1;
  color: #6B7671;
  background: var(--c-act-disabled);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: none;
  filter: none;
}

/* 双环焦点：外环亮蓝 + 内衬深色，亮底暗底都至少一侧达 3:1 */
.btn:focus-visible,
.chip-btn:focus-visible,
.icon-btn:focus-visible,
.room-code:focus-visible,
.raise-slider:focus-visible,
.advanced summary:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(14, 20, 18, .95);
}

/* 主按钮（大厅创建房间 / 开始牌局）：金色 */
.btn-primary {
  background: linear-gradient(180deg, #E6C87F 0%, var(--c-gold) 55%, #B8862F 100%);
  color: #2B2107;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 10px rgba(0, 0, 0, .4);
}

.icon-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: transform var(--d-press) var(--ease-spring), background var(--d-press) linear;
}
.icon-btn:active { transform: scale(.92); background: rgba(255, 255, 255, .14); }

/* ── 加注面板 ── */
.raise-panel {
  margin-bottom: 12px;
  padding: 10px 12px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(33, 44, 40, .85), rgba(18, 26, 23, .85));
  border: 1px solid var(--c-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.raise-head { font-size: 13px; margin-bottom: 4px; }
/* 当前值大字号 */
.raise-value {
  font-size: 26px;
  line-height: 1.1;
  color: var(--c-gold);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* 滑杆：加粗轨道 + 放大把手 */
.raise-slider { height: 40px; }
.raise-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c-gold-soft) 0%, var(--c-gold) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.raise-slider::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -11px;
  border: 2px solid #8A6D2E;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #FFF6DF 0%, #F0DCA6 40%, var(--c-gold) 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 -2px 3px rgba(0, 0, 0, .25);
}
.raise-slider::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c-gold-soft) 0%, var(--c-gold) 100%);
}
.raise-slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 2px solid #8A6D2E;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #FFF6DF 0%, #F0DCA6 40%, var(--c-gold) 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
}

/* 快捷筹码按钮：筹码质感的胶囊，触控目标 44px */
.raise-quick { gap: 8px; margin-top: 6px; }
.raise-quick .chip-btn {
  position: relative;
  min-height: 44px;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 22px;
  color: var(--c-text-mid);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .14) 0%, transparent 56%),
    linear-gradient(180deg, #2C3733 0%, #1C2522 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 5px rgba(0, 0, 0, .35);
  transition:
    transform var(--d-press) var(--ease-spring),
    color     var(--d-press) linear,
    border-color var(--d-press) linear,
    box-shadow var(--d-press) linear;
}
/* 筹码内圈刻线 */
.raise-quick .chip-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, .14);
  pointer-events: none;
}
.raise-quick .chip-btn:active {
  transform: scale(.94);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
}
/* 已选档位：按钮点击后保持 focus，作为"当前选中"的视觉锚点 */
.raise-quick .chip-btn:focus {
  outline: none;
  color: var(--c-gold);
  border-color: var(--c-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 2px rgba(212, 165, 72, .30);
}
.raise-quick .chip-btn:focus::before { border-color: rgba(212, 165, 72, .40); }
/* 全下档：全场唯一的红，与其他档拉开风险层级 */
.raise-quick .chip-btn[data-frac="max"] {
  color: #E88880;
  border-color: rgba(188, 63, 54, .65);
}
.raise-quick .chip-btn[data-frac="max"]::before { border-color: rgba(188, 63, 54, .35); }
.raise-quick .chip-btn[data-frac="max"]:focus {
  color: var(--c-text-hi);
  border-color: transparent;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .18) 0%, transparent 56%),
    linear-gradient(180deg, #C9483E 0%, #9A3029 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 2px rgba(188, 63, 54, .35);
}
/* 上面两条 :focus 用 outline:none 换成了金/红环，这里把键盘焦点环补回来，
   否则纯键盘操作会丢失焦点可见性 */
.raise-quick .chip-btn:focus-visible,
.raise-quick .chip-btn[data-frac="max"]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ── 倒计时条 ──
   render.js 只按 inline width 收缩、并在剩余 <10s 时加 .warn。
   做法：把"安全→警示"的渐变铺在轨道上，fill 透明只作为取景窗，
   fill 右侧用 ::after 盖住已消耗段。于是剩余越少，露出的颜色越警示。 */
.turn-timer {
  height: 5px;
  margin-top: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--c-act-allin) 0%,
    #D9663C 12%,
    var(--c-warn) 26%,
    var(--c-act-call) 52%,
    var(--c-act-call) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.turn-timer-fill {
  position: relative;
  background: transparent;
  transition: width .25s linear;
}
.turn-timer-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100vw;
  background: rgba(255, 255, 255, .07);
}
/* 最后 10 秒（render.js 的 .warn 阈值）：转为实心红 + 呼吸脉冲 0.83Hz。
   脉冲只动 box-shadow，不动 opacity —— 动 opacity 会把上面那层
   ::after 遮罩一起淡掉，已消耗段会漏出轨道渐变、变成彩色闪烁。 */
.turn-timer-fill.warn {
  background: linear-gradient(90deg, #8E2F28 0%, var(--c-act-allin) 100%);
  animation: timerPulse 1.2s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(188, 63, 54, .45); }
  50%      { box-shadow: 0 0 16px 2px rgba(224, 90, 80, .90); }
}

/* ── 房主条 / 补码条 / 等待提示 ── */
.host-bar, .rebuy-bar, .waiting-hint {
  background: linear-gradient(180deg, rgba(14, 20, 18, .5), rgba(14, 20, 18, .82));
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.host-bar .btn, .rebuy-bar .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.rebuy-bar { color: var(--c-text-mid); font-size: 13px; }
.waiting-hint { color: var(--c-text-mid); font-size: 13.5px; letter-spacing: .02em; }

/* ─────────────────────────────────────────────
   5. 顶栏 / 日志 / 浮层 / 提示
   ───────────────────────────────────────────── */

.topbar {
  padding: calc(6px + var(--safe-top)) 12px 6px;
  background: linear-gradient(180deg, rgba(14, 20, 18, .92), rgba(14, 20, 18, .55));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.room-code-label { font-size: 11px; color: var(--c-text-low); }
.room-code {
  min-height: 36px;
  padding: 3px 10px;
  border: 1px dashed rgba(212, 165, 72, .55);
  border-radius: 9px;
  background: rgba(212, 165, 72, .07);
  font-variant-numeric: tabular-nums;
  transition: background var(--d-press) linear, transform var(--d-press) var(--ease-spring);
}
.room-code:active { transform: scale(.95); background: rgba(212, 165, 72, .18); }
#phase-label { letter-spacing: .04em; }
#hand-no { color: var(--c-text-low); font-variant-numeric: tabular-nums; }

.log {
  background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .18));
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--c-text-low);
  font-size: 12px;
}
.log .hi { color: var(--c-gold); }

.result-card {
  background: linear-gradient(180deg, #1D2C27 0%, #0F1A16 100%);
  border: 1px solid rgba(212, 165, 72, .38);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.result-card h3 { letter-spacing: .06em; }
.result-row { font-size: 14px; padding: 7px 0; border-bottom-color: rgba(255, 255, 255, .06); }
.result-win {
  color: var(--c-win);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* 摊牌是全桌唯一的信息揭晓时刻 —— 浮层里空间足够，把牌放大到可读 */
.result-cards { gap: 4px; margin-top: 5px; }
.result-cards .card.sm { width: 38px; height: 54px; border-radius: 6px; }
.result-cards .card.sm .card-rank { font-size: 17px; }
.result-cards .card.sm .card-suit { font-size: 14px; }

.toast {
  background: linear-gradient(180deg, rgba(33, 44, 40, .96), rgba(14, 20, 18, .96));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.conn-banner {
  background: linear-gradient(180deg, #C9483E, #8E2F28);
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* ─────────────────────────────────────────────
   6. 大厅
   ───────────────────────────────────────────── */

.lobby-card {
  background: linear-gradient(180deg, rgba(33, 44, 40, .82) 0%, rgba(10, 18, 15, .88) 100%);
  border: 1px solid rgba(212, 165, 72, .20);
  border-radius: 22px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lobby-title {
  letter-spacing: 6px;
  color: var(--c-gold);            /* 不支持 background-clip:text 时的兜底，标题不会消失 */
  background: linear-gradient(180deg, #F0DCA6, var(--c-gold) 70%, #B8862F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lobby-sub { color: var(--c-text-low); }
.field input, .advanced-grid input {
  min-height: 46px;
  font-size: 16px;              /* >= 16px 防止 iOS 聚焦时页面缩放 */
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  transition: border-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
}
.field input:focus, .advanced-grid input:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 72, .16);
}
.advanced-grid input { min-height: 42px; }
.advanced summary { min-height: 32px; color: var(--c-text-mid); }
#btn-join, #btn-create { min-height: 50px; font-size: 16px; }
.lobby-status { color: var(--c-warn); }

/* ─────────────────────────────────────────────
   7. 响应式 —— 手机竖屏为主战场
   ───────────────────────────────────────────── */

/* 窄屏（<=360px）：收薄桌沿、收紧间距，保证不溢出 */
@media (max-width: 360px) {
  :root { --rail-w: 6px; }
  .action-row { gap: 8px; }
  .action-row .btn { font-size: 14px; padding: 12px 4px; min-height: 50px; }
  .raise-quick { gap: 6px; }
  .raise-quick .chip-btn { font-size: 12px; }
  .community { padding: 4px 6px; gap: 4px; }
}

/* 矮屏：与 styles.css 的 max-height:700px 档对齐，同步收紧本层新增的内边距 */
@media (max-height: 700px) {
  .felt-wrap { padding: 8px 8px 4px; }
  .community { padding: 4px 6px; }
  .raise-panel { margin-bottom: 8px; padding: 8px 10px 6px; }
  .raise-value { font-size: 22px; }
  .raise-slider { height: 34px; }
  .action-row .btn { min-height: 48px; }
  .raise-quick .chip-btn { min-height: 42px; }
}

/* 主力机型 390~430px：把桌面吃满一点，公共牌更清晰 */
@media (min-width: 390px) and (min-height: 700px) {
  .community { gap: 6px; padding: 6px 9px; }
}

/* 平板 / 桌面：适度放大，不拉变形。
   必须同时限定 min-height —— 笔记本常见的"宽而矮"窗口若也放大牌面，
   会顶掉 styles.css 里 max-height:700px 的收缩档，牌桌纵向溢出。 */
@media (min-width: 721px) and (min-height: 701px) {
  :root { --rail-w: 12px; }
  .felt-wrap { padding: 16px 16px 10px; }
  .card { width: 56px; height: 78px; border-radius: 7px; }
  .card .card-rank { font-size: 24px; }
  .card .card-suit { font-size: 20px; }
  .card.sm { width: 42px; height: 60px; }
  .card.sm .card-rank { font-size: 18px; }
  .card.sm .card-suit { font-size: 15px; }
  .community { min-height: 80px; gap: 8px; padding: 8px 12px; }
  .seat { width: 96px; }
  .seat-name { font-size: 12.5px; }
  .seat-chips { font-size: 14px; }
  .action-row .btn { min-height: 56px; font-size: 17px; }
  .log { height: 64px; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   8. 动效降级（prefers-reduced-motion）
   倒计时条的宽度变化属功能信息，必须保留。
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card {
    animation: none !important;
    animation-delay: 0ms !important;
    opacity: 1;
    transform: none;
  }
  /* 无呼吸动画时，用一圈静态强环保证"轮到谁"依然一眼可见 */
  .seat.acting .seat-box {
    animation: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 3px var(--c-gold),
      0 5px 12px rgba(0, 0, 0, .48);
  }
  .seat:has(.tag.offline) .seat-box { animation: none !important; }
  .turn-timer-fill {
    transition: width .25s linear !important;
    animation: none !important;
    opacity: 1;
  }
}