/**
 * 游戏桌布局 v2 - 占满边界，三家牌背堆叠，我在左下 + 27 张横排
 */

/* ========== 牌桌容器：占满可用宽度，撑开高度 ========== */
.game-table {
  position: relative;
  /* width:auto 是关键：配合负 margin 才能真正向两侧撑开。
     若写 width:100%，负 margin 只会整体左移，右侧留空。
     -16px 对应 .section 的 16px 内边距，正好铺到卡片边界。 */
  width: auto;
  max-width: none;
  height: 560px;
  margin: 0 -16px 16px;
  background:
    radial-gradient(ellipse 50% 45% at 50% 50%,
      rgba(20, 60, 60, 0.7),
      rgba(10, 38, 38, 0.92));
  border-top: 2px solid rgba(212, 175, 55, 0.35);
  border-bottom: 2px solid rgba(212, 175, 55, 0.35);
  box-shadow:
    inset 0 4px 20px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ========== 三家座位：头像卡片 + 牌背堆叠 ========== */
.table-seat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 头像卡片（竖版，类似真实玩家信息卡） */
.ts-card {
  /* Positioning context for the .ts-team badge pinned to the bottom edge. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Extra bottom padding keeps the name clear of the overlapping badge. */
  padding: 5px 5px 12px;
  background: linear-gradient(160deg, #f5f1e6, #ddd5c0);
  border: 2px solid var(--wood-med, #5d4037);
  border-radius: 10px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* 正方形：四位玩家统一 */
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  line-height: 1;
  transition: all 0.2s;
}

.table-seat.active .ts-card {
  border-color: var(--btn-red-start, #e85d5d);
  box-shadow:
    0 0 20px rgba(232, 93, 93, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: seat-pulse 1.5s ease-in-out infinite;
}

@keyframes seat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ts-face {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.ts-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* The bare [hidden] attribute only sets display:none at UA level, which loses to
   .seat-row's author-level display:grid in style.css. State it explicitly here.
   The row must stay in the DOM (hidden, not removed): it is the data source the
   table cards proxy into for rename / set-teammate. */
.seat-row[hidden] { display: none; }

/* Editable name field on the card: reads as plain text until focused. */
.ts-name-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  border-bottom: 1px dashed transparent;
  text-align: center;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dark, #1a1a1a);
  padding: 0 1px;
  line-height: 1.2;
}

.ts-name-input:hover { border-bottom-color: rgba(0, 0, 0, 0.3); }

.ts-name-input:focus {
  outline: none;
  background: #fff;
  border-bottom-color: var(--btn-blue-start, #4a90e2);
  border-radius: 3px;
}

/* Ally/opponent badge: nameplate straddling the card's bottom edge. */
.ts-team {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  padding: 1px 8px;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  background: #fdecea;
  color: #c0392b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

/* Turn marker: hidden by default, shown only on the seat carrying .active,
   so it rotates around the four players as the turn advances. */
.ts-turn {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  /* No opacity transition: the marker should switch seats instantly, and a
     fade also makes rendered-state assertions timing-dependent. */
  z-index: 4;
}

.table-seat.active .ts-turn {
  opacity: 1;
  animation: turn-bounce 1s ease-in-out infinite;
}

@keyframes turn-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

/* Top seat sits near the table's upper edge: drop its marker below the card
   instead, otherwise it would overflow outside the felt. */
.ts-top .ts-turn { top: auto; bottom: -30px; }

@keyframes turn-bounce-up {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

.ts-top.active .ts-turn {
  transform: translateX(-50%) rotate(180deg);
  animation: turn-bounce-top 1s ease-in-out infinite;
}

@keyframes turn-bounce-top {
  0%, 100% { transform: translateX(-50%) rotate(180deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(180deg) translateY(4px); }
}

/* Avoid stacking the marker under the action bubble on the active seat. */
.table-seat.active .ts-bubble.show { top: -52px; }
.ts-top.active .ts-bubble.show { top: -32px; }

.ts-team.is-partner { background: #eafaf1; color: #1e8449; }
.ts-team:hover:not(.is-fixed) { filter: brightness(1.08); }
.ts-team.is-fixed { cursor: default; opacity: 0.9; }

.ts-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dark, #1a1a1a);
  text-align: center;
  max-width: 68px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-count {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-gold, #ffd700);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ts-bubble {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.ts-bubble.show { display: block; }
.ts-bubble.pass { color: #fbbf24; font-weight: 600; }

/* 牌背堆叠（3-4 张错位叠放） */
.ts-stack {
  display: flex;
  gap: 0;
  position: relative;
}

.stack-card {
  width: 48px;
  height: 70px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg,
      #1e3a3a 0, #1e3a3a 6px,
      #2a4e4e 6px, #2a4e4e 12px),
    linear-gradient(160deg, #1a4d4d, #0f3030);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: absolute;
  left: 0;
}

.stack-card:nth-child(2) { left: 6px; top: 3px; }
.stack-card:nth-child(3) { left: 12px; top: 6px; }
.stack-card:nth-child(4) { left: 18px; top: 9px; }

/* ========== 我的牌堆图标：「分析」按钮正下方、贴手牌上沿 ==========
   水平上与 .table-actions 同样以 left:50% 居中，正好落在中间那颗「分析」下方。
   垂直上用 bottom 顶到手牌区上沿：手牌区高 96px + .bottom-row 的 bottom 16px
   = 112px，再留 6px 空隙。 */
.my-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 118px;
  width: 52px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 12;
  -webkit-tap-highlight-color: transparent;
}

/* 三张叠放的牌背，比他家的堆叠小一号，并带金边表明「可点」 */
.ms-card {
  position: absolute;
  width: 30px;
  height: 42px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg,
      #1e3a3a 0, #1e3a3a 5px,
      #2a4e4e 5px, #2a4e4e 10px),
    linear-gradient(160deg, #1a4d4d, #0f3030);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  transition: transform 0.14s;
}
.ms-card:nth-child(2) { left: 6px; top: 1px; }
.ms-card:nth-child(3) { left: 12px; top: 2px; }

/* 最上面那张露出张数，让人一眼看出这是我的牌堆而非又一家的牌背 */
.ms-top {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--gold-accent, #d4af37);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(212, 175, 55, 0.45);
}
.ms-top strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-gold, #f0d98c);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* 按下/悬停时整堆轻微展开，给出「可点开」的暗示 */
.my-stack:active .ms-card:nth-child(3) { transform: translate(3px, -2px); }
.my-stack:active .ms-card:nth-child(1) { transform: translate(-3px, 2px); }

@media (hover: hover) and (pointer: fine) {
  .my-stack:hover .ms-card:nth-child(3) { transform: translate(3px, -2px); }
  .my-stack:hover .ms-card:nth-child(1) { transform: translate(-3px, 2px); }
}

/* ========== 记牌小标识：紧贴我的牌堆右侧，尺寸与单张牌背一致 ==========
   间距按「可见边缘」而非盒子边缘算：.my-stack 盒子宽 52px(右缘 50%+26)，
   但最上面那张牌 left:12px + 宽 30px 只到 50%+16，右侧有 10px 空盒子。
   故牌堆可见右缘 = 50% + 16px，这里留 10px 间隙 → 50% + 26px。 */
.note-btn {
  position: absolute;
  left: 50%;
  margin-left: 26px;
  bottom: 118px;
  width: 30px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--gold-accent, #d4af37);
  border-radius: 4px;
  background: linear-gradient(160deg, #1a4d4d, #0f3030);
  color: var(--text-gold, #f0d98c);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s, box-shadow 0.14s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(212, 175, 55, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .note-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(212, 175, 55, 0.5);
  }
}

/* ========== 语音播报开关：紧贴速记牌右侧，同尺寸同风格 ==========
   速记牌左缘 50% + 26px、宽 30px → 右缘 50% + 56px；同样留 10px 间隙。
   两处间隙都是 10px，三个元素视觉上等距。 */
.speak-btn {
  position: absolute;
  left: 50%;
  margin-left: 66px;
  bottom: 118px;
  width: 30px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--gold-accent, #d4af37);
  border-radius: 4px;
  background: linear-gradient(160deg, #1a4d4d, #0f3030);
  color: var(--text-gold, #f0d98c);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s, box-shadow 0.14s, opacity 0.14s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 关闭态：整体压暗，一眼能看出没在播 */
.speak-btn:not(.is-on) {
  opacity: 0.5;
  border-color: rgba(212, 175, 55, 0.4);
}

/* 开启态：金色微光，与「正在生效」的语义呼应 */
.speak-btn.is-on {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 7px rgba(212, 175, 55, 0.45);
}

.speak-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(212, 175, 55, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .speak-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(212, 175, 55, 0.5);
  }
}

/* ========== 三家定位 ========== */
.ts-top {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.ts-left {
  left: 20px;
  top: 30%;
}

.ts-right {
  right: 20px;
  top: 30%;
  flex-direction: row-reverse;
}

/* ========== 底部行：我的头像（左固定）+ 27 张手牌（右边横排） ========== */
.bottom-row {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* 我的座位在底部行内，跟随 flex 而非绝对定位 */
.ts-bottom {
  position: relative;
  flex-shrink: 0;
}

/* 手牌区占满剩余宽度 */
.my-hand-zone {
  position: relative;
  flex: 1;
  min-width: 0;
}

.my-hand-fan {
  position: relative;
  width: 100%;
  height: 96px;
  /* 27 张重叠后每张只露 7~11px，手机上逐张点准几乎不可能，故支持横向划选。
     pan-y 让纵向拖动仍能滚页面，只把横向手势交给我们处理。 */
  touch-action: pan-y;
}

/* ========== 中央：出牌区 + 按钮 + 计时器 ========== */
.table-center {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 56%;
}

.played-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  flex-wrap: wrap;
}

.played-empty {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

/* 中央打出的牌 */
.pc {
  width: 38px;
  height: 56px;
  border-radius: 4px;
  background: linear-gradient(160deg, #fefefe, #f0f0f0);
  border: 1px solid #d0d0d0;
  box-shadow: 2px 0 4px rgba(0,0,0,0.25), 0 2px 6px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
  margin-left: -10px;
  flex-shrink: 0;
}

.pc:first-child { margin-left: 0; }
.pc.red { color: #d32f2f; }
.pc.black { color: #1a1a1a; }
.pc.wild {
  background: linear-gradient(160deg, #fff8dc, #f5deb3);
  border-color: var(--gold-accent, #d4af37);
  color: #8b6914;
}

.pc-suit { font-size: 0.72rem; opacity: 0.85; }

/* ========== 操作按钮：中央偏下 ========== */
.table-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.tbtn {
  border: none;
  border-radius: 22px;
  padding: 11px 30px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.15s;
}

.tbtn:hover { transform: translateY(-2px); }
.tbtn:active { transform: translateY(0); }

/* 按参考图顺序：不出(灰) | 提示(红) | 出牌(蓝) */
.tbtn-pass {
  background: linear-gradient(160deg, #8d9aa8, #5f6b78);
}
.tbtn-pass:hover {
  background: linear-gradient(160deg, #9daab8, #4e5a66);
}

.tbtn-hint {
  background: linear-gradient(160deg, #e85d5d, #d42121);
}
.tbtn-hint:hover {
  background: linear-gradient(160deg, #f06f6f, #e02020);
}

/* 分析按钮呼吸灯：轮到我且有「还没看过的新分析」时动态提示。
   只做发光+极轻微缩放，不做位移——按钮是点击目标，让它移动会更难点中。
   金色发光：绿色已被网格推荐牌的呼吸灯占用（recommendPulse），避免两者混淆。 */
@keyframes hintBreath {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(212, 175, 55, 0.55),
      0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 14px 5px rgba(212, 175, 55, 0.75),
      0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
  }
}

.tbtn-hint.hint-pulse:not(:disabled) {
  animation: hintBreath 1.5s ease-in-out infinite;
}

/* 尊重系统「减弱动态效果」：改为静态高亮，仍有提示但不闪动 */
@media (prefers-reduced-motion: reduce) {
  .tbtn-hint.hint-pulse:not(:disabled) {
    animation: none;
    box-shadow: 0 0 10px 3px rgba(212, 175, 55, 0.7);
  }
}

.tbtn-play {
  background: linear-gradient(160deg, #4a90e2, #2171d4);
}
.tbtn-play:hover {
  background: linear-gradient(160deg, #5ea1ed, #1565c0);
}

.tbtn:disabled {
  background: linear-gradient(160deg, #6b7580, #4f5862);
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ========== 计时器：提示按钮正上方 ==========
   作为 .table-center 的 flex 子项，由 align-items:center 自动水平居中，
   并天然排在 .table-actions 之上，无需绝对定位换算。 */
.turn-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #16281a, #0c1810);
  border: 1px solid rgba(46, 204, 113, 0.35);
  border-radius: 11px;
  padding: 4px 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  min-width: 40px;
}

.timer-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2ecc71;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  text-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
  text-align: center;
}

/* 计时器 + 状态条：同一行。整行作为 .table-center 的 flex 子项自动水平居中，
   两者在行内垂直居中对齐。 */
.turn-bar {
  display: flex;
  flex-direction: row;   /* 显式声明：这一行的重点就是「不竖排」 */
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* 计时器不参与压缩：状态条文字再长也不能把秒数挤变形 */
.turn-bar .turn-timer { flex: 0 0 auto; }

/* 状态条搬进牌桌后需要深色版：原样式（style.css 的浅底）是给牌桌下方白色面板用的，
   放到深色桌面上会是一块突兀的亮条。
   用后代选择器而不是加类，因为 _refreshRoundUI 每次都会重写它的 className。 */
.table-center .round-status {
  margin-bottom: 0;            /* 间距交给 flex 的 gap，避免双重留白 */
  /* 宽度随文字自动伸缩：不生长(grow:0)，宽度由内容决定；仍可收缩(shrink:1)
     且允许收缩到比内容更窄(min-width:0)，长文案才不会把整行顶出中央区。
     max-width 兜住上限，超出后靠下面的 overflow-wrap 折行。 */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  /* 内容决定宽度：短文案就短，长文案才铺开 */
  width: auto;
  text-align: center;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 12px;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(10, 32, 20, 0.92), rgba(6, 20, 13, 0.92));
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #6ee7a0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  /* 长文案（如「需压 下家 的 三带二（5张）」）允许折行，不撑破中央区宽度 */
  overflow-wrap: break-word;
}

.table-center .round-status.free-play {
  background: linear-gradient(180deg, rgba(10, 32, 20, 0.92), rgba(6, 20, 13, 0.92));
  border-color: rgba(46, 204, 113, 0.35);
  color: #6ee7a0;
}

.table-center .round-status.need-beat {
  background: linear-gradient(180deg, rgba(42, 31, 16, 0.92), rgba(26, 18, 8, 0.92));
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.timer-num.warning {
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  animation: timer-blink 0.8s ease-in-out infinite;
}

@keyframes timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========== 手牌：横向铺开，密排重叠 ========== */
.hc {
  position: absolute;
  bottom: 0;
  width: 56px;
  height: 84px;
  border-radius: 6px;
  background: linear-gradient(160deg, #fefefe, #f2f2f2);
  border: 1px solid #cfcfcf;
  box-shadow:
    2px 0 4px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.12s;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

/* 悬停抬牌只在真有指针的设备上生效。手机上 :hover 会在点击后「粘」住，
   让人误以为选中了，是手感糊的一部分原因。 */
@media (hover: hover) and (pointer: fine) {
  .hc:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    z-index: 100 !important;
  }
}

/* 触屏即时反馈：手指压到就抬起来，不等 class 回写 */
.hc:active {
  transform: translateY(-10px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  z-index: 100 !important;
}

/* 选中待出：明显上抬 */
.hc.picked {
  transform: translateY(-22px);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(212, 175, 55, 0.8);
  border-color: var(--gold-accent, #d4af37);
  border-width: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .hc.picked:hover { transform: translateY(-28px); }
}
/* 已选中的牌再被按住：比未选中的抬更高，保证叠在一起也分得清 */
.hc.picked:active { transform: translateY(-28px); }

.hc-rank {
  font-size: 1.05rem;
  font-weight: 800;
}

.hc-suit {
  font-size: 0.9rem;
  margin-top: 1px;
}

.hc.red { color: #d32f2f; }
.hc.black { color: #1a1a1a; }

.hc.wild {
  background: linear-gradient(160deg, #fff8dc, #f5deb3);
  border-color: var(--gold-accent, #d4af37);
  color: #8b6914;
}

.hc.wild .hc-rank { font-size: 0.85rem; }

/* 炸弹（同点数 ≥4 张）：淡粉底 + 火苗 */
.hc.bomb-cand {
  background: linear-gradient(160deg, #fff0f0, #ffdede);
  border-color: #ef9a9a;
}


.hc-mini {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.75;
  transform: rotate(180deg);
}

/* 密排时（步进 < 20px）隐藏副点数与花色，只保留左上角点数，避免糊成一片 */
.my-hand-fan.dense .hc-mini,
.my-hand-fan.dense .hc-suit { display: none; }
.my-hand-fan.dense .hc-rank { font-size: 0.85rem; }

/* 折叠按钮：位于牌桌之外的白色面板上，故用浅色样式 */
.grid-toggle,
.seat-toggle {
  display: block;
  width: 100%;
  background: #f4f6f8;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 8px;
  color: var(--text, #2c3e50);
  padding: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}

.grid-toggle:hover,
.seat-toggle:hover {
  background: #e9edf1;
  border-color: var(--secondary, #3498db);
  color: var(--secondary, #3498db);
}

.seat-toggle { font-size: 0.8rem; padding: 7px; }

/* ========== 窄屏适配 ========== */
@media (max-width: 600px) {
  .game-table {
    height: 440px;
    /* 窄屏 .section 内边距是 12px 8px，左右按 8px 抵消 */
    margin: 0 -8px 14px;
  }

  /* 窄屏同样保持正方形 */
  .ts-card {
    width: 56px;
    height: 56px;
    padding: 3px 3px 10px;
    border-radius: 8px;
    gap: 1px;
  }

  .ts-name-input { font-size: 0.58rem; }

  .ts-team {
    bottom: -8px;
    font-size: 0.55rem;
    padding: 0 5px;
    border-radius: 8px;
  }

  .ts-turn { top: -18px; font-size: 0.9rem; }
  .ts-top .ts-turn { bottom: -26px; }

  /* 56px 方块内要塞头像+名字+张数，头像压小给文字留行距 */
  .ts-face { font-size: 1rem; }
  .ts-name { font-size: 0.58rem; max-width: 50px; }
  .ts-count { font-size: 0.82rem; }

  /* 窄屏：手牌区 72px + .bottom-row bottom 10px = 82px，再留 5px 空隙 */
  .my-stack { bottom: 87px; width: 42px; height: 34px; }
  .ms-card { width: 23px; height: 32px; border-radius: 3px; }
  .ms-card:nth-child(2) { left: 5px; top: 1px; }
  .ms-card:nth-child(3) { left: 10px; top: 2px; }
  .ms-top strong { font-size: 0.68rem; }

  /* 同样按可见边缘算：窄屏牌堆盒子宽 42px(右缘 50%+21)，最上面那张牌
     left:10px + 宽 23px 只到 50%+12。故可见右缘 = 50% + 12px，留 8px 间隙。
     记牌按钮与单张牌背同尺寸。 */
  .note-btn {
    margin-left: 20px;
    bottom: 87px;
    width: 23px;
    height: 32px;
    font-size: 0.9rem;
    border-radius: 3px;
  }

  /* 记牌按钮左缘 50%+20、宽 23 → 右缘 50%+43；同样留 8px，三者等距 */
  .speak-btn {
    margin-left: 51px;
    bottom: 87px;
    width: 23px;
    height: 32px;
    font-size: 0.82rem;
    border-radius: 3px;
  }

  .stack-card { width: 34px; height: 50px; }
  .stack-card:nth-child(2) { left: 4px; top: 2px; }
  .stack-card:nth-child(3) { left: 8px; top: 4px; }
  .stack-card:nth-child(4) { left: 12px; top: 6px; }

  .table-seat { gap: 6px; }
  .ts-left { left: 8px; top: 26%; }
  .ts-right { right: 8px; top: 26%; }
  .ts-top { top: 12px; }

  .table-center { width: 76%; gap: 8px; top: 44%; }

  .pc { width: 30px; height: 44px; font-size: 0.72rem; margin-left: -9px; }
  .pc-suit { font-size: 0.6rem; }

  .tbtn {
    padding: 9px 16px;
    font-size: 0.92rem;
    letter-spacing: 1px;
  }
  .table-actions { gap: 8px; }

  .turn-timer {
    padding: 3px 7px;
    min-width: 32px;
    border-radius: 9px;
  }
  .timer-num { font-size: 0.95rem; }

  /* 窄屏中央区只有 76% 宽，还要和计时器同处一行，状态条再缩一档并收紧内距 */
  .turn-bar { gap: 6px; }
  .table-center .round-status {
    font-size: 0.62rem;
    padding: 4px 6px;
    border-radius: 10px;
    line-height: 1.3;
  }

  .bottom-row { bottom: 10px; left: 8px; right: 8px; gap: 5px; }

  .my-hand-fan { height: 72px; }

  .hc {
    width: 40px;
    height: 62px;
    border-radius: 5px;
    padding: 2px 3px;
  }

  .hc-rank { font-size: 0.85rem; }
  .hc-suit { font-size: 0.7rem; }
  .hc-mini { display: none; }
}