/* ============================================================
   css/chat/chat-game-pk.css — PK小游戏
   子游戏选择器 / 猜拳 / 五子棋 / 围棋
   韩系法式花艺 · 玫瑰金装饰 · 回合选择 · 帮助sheet · 再战弹层
   ============================================================ */

/* ===== 子游戏选择器 ===== */
.pk-sub-selector {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 14px;
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
}
.pk-sub-header {
  text-align: center;
  margin-bottom: 16px;
  padding-top: 4px;
}
.pk-sub-title {
  font-family: var(--font-reading);
  font-size: 20px; font-weight: 600;
  letter-spacing: 3px;
  color: var(--text-primary);
}
.pk-sub-subtitle {
  margin-top: 2px;
  font-family: var(--font-reading);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold, #C4A86A);
  opacity: 0.7;
}
.pk-sub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 子游戏卡片 */
.pk-sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    var(--shadow-xs),
    var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.22,0.61,0.36,1);
  position: relative;
}
.pk-sub-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 0.5px solid rgba(196,168,106,0.1);
  border-radius: 10px;
  pointer-events: none;
}
.pk-sub-card:hover {
  border-color: var(--rose);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    var(--shadow-sm),
    var(--shadow-md),
    var(--shadow-glow);
  transform: translateY(-2px);
}
.pk-sub-card:active { transform: scale(0.97); }

.pk-sub-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--rose-light, rgba(201,168,168,0.12));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 2px 8px rgba(201,168,168,0.1);
}
.pk-sub-icon svg {
  width: 26px; height: 26px;
  stroke: var(--rose);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pk-sub-info { flex: 1; min-width: 0; }
.pk-sub-name {
  font-family: var(--font-reading);
  font-size: 15px; font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.pk-sub-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pk-sub-rounds {
  display: flex;
  gap: 5px;
}
.pk-round-chip {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-reading);
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
}
.pk-round-chip:hover { border-color: var(--rose); color: var(--rose); }
.pk-round-chip.on {
  border-color: var(--rose);
  background: var(--rose);
  color: #fff;
}
.pk-sub-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-family: var(--font-reading);
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-left: 6px;
}

/* ===== 共享PK顶栏（gomoku + go 共用；只有标题+比分，居中，不放按钮）===== */
.pk-game-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px 12px;
  /* ★ iOS 刘海（2028 实锤，长期规则 #65）：全屏游戏层里最顶的元素要自己让出安全区，
     否则被状态栏/刘海盖住、右上角按钮点不到（安卓 env=0 零影响）。 */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  gap: 8px;
}
.pk-game-title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pk-game-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.pk-score {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.5px;
}
.pk-score .pk-score-num {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--rose);
  font-weight: 600;
  margin: 0 2px;
}
.pk-score-you { color: var(--text-primary); }
.pk-score-vs { color: var(--text-muted); margin: 0 2px; }
.pk-score-ai { color: var(--rose); }

/* ===== 通用PK顶栏按钮 ===== */
.pk-back-btn, .pk-exit-btn, .pk-help-btn {
  border: none; background: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 6px;
  display: flex; align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}
.pk-back-btn:hover, .pk-exit-btn:hover, .pk-help-btn:hover {
  color: var(--rose);
  background: var(--rose-light, rgba(201,168,168,0.12));
}
.pk-back-btn:active, .pk-exit-btn:active { transform: scale(0.95); }

/* ★ 统一 PK 顶栏按钮 → 与共享 .game-back / .game-btn 视觉一致（韩系法式） */
.pk-back-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-light);
  background: var(--surface-solid);
  justify-content: center;
  padding: 0;
  color: var(--text-secondary);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.pk-back-btn:hover {
  color: var(--rose); border-color: var(--rose);
  background: var(--rose-light, rgba(201,168,168,0.12));
  transform: scale(1.05);
}
.pk-help-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.pk-help-btn:hover { color: var(--rose); border-color: var(--rose); }
.pk-exit-btn {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--rose);
  color: var(--rose);
  background: transparent;
  font-size: 13px;
  letter-spacing: 1px;
}
.pk-exit-btn:hover { background: var(--rose-light, rgba(201,168,168,0.12)); transform: translateY(-1px); }

/* ===== 悔棋「他在想」小泡泡（棋盘中央）===== */
.pk-board-frame { position: relative; }
.pk-undo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
}
.pk-undo-overlay.show { opacity: 1; }
.pk-undo-think {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pk-undo-dots { display: flex; gap: 4px; }
.pk-undo-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  animation: pkUndoBounce 1s infinite ease-in-out;
}
.pk-undo-dots span:nth-child(2) { animation-delay: 0.15s; }
.pk-undo-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pkUndoBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ===== 猜拳 ===== */
.pk-rps-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 16px;
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
}
.pk-rps-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: 8px;
  /* ★ iOS 刘海（长期规则 #65）：猜拳顶栏在游戏层最顶，要自己让出安全区。 */
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
/* 猜拳顶栏也统一：只放比分居中，?帮助靠右上（退出统一走最顶部游戏栏返回） */
.pk-rps-topbar .pk-rps-help {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.pk-rps-score-area {
  text-align: center;
  font-family: var(--font-reading);
  font-size: 12px;
  color: var(--text-secondary);
}
.pk-rps-score-area .pk-score-num {
  font-family: var(--font-decorative);
  font-size: 18px; font-style: italic;
  color: var(--rose);
  font-weight: 600;
  margin: 0 2px;
}

/* RPS arena */
.pk-rps-arena {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.pk-rps-result-area {
  text-align: center;
}
.pk-rps-round-label {
  font-family: var(--font-decorative);
  font-size: 14px;
  font-style: italic;
  color: var(--gold, #C4A86A);
  opacity: 0.7;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.pk-rps-vs {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pk-rps-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pk-rps-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-reading);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pk-rps-move-display {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 1.5px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.22,0.61,0.36,1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    var(--shadow-xs);
}
.pk-rps-move-display svg { width: 32px; height: 32px; stroke: var(--text-secondary); }
.pk-rps-move-display.winner {
  border-color: var(--gold);
  background: var(--gold-light, rgba(196,168,106,0.15));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 24px rgba(196,168,106,0.25);
  transform: scale(1.1);
}
.pk-rps-vs-text {
  font-family: var(--font-decorative);
  font-size: 16px; font-style: italic;
  color: var(--text-muted);
  text-align: center;
  min-width: 70px;
}
.pk-win-text { color: var(--sage); font-weight: 600; }
.pk-lose-text { color: var(--text-muted); font-weight: 600; }
.pk-draw-text { color: var(--lavender); font-weight: 600; }

/* 出拳按钮 — 卡片化设计 */
.pk-rps-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 8px;
  flex-shrink: 0;
}
.pk-rps-btn {
  width: 88px; height: 108px;
  border-radius: 16px;
  border: 2px solid var(--gold-light);
  background: linear-gradient(175deg, var(--surface-solid), var(--bg-chat) 70%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-reading);
  font-size: 12px;
  color: var(--text-primary);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.6) inset,
    var(--shadow-xs),
    var(--shadow-sm);
  transition: all 0.22s cubic-bezier(0.22,0.61,0.36,1);
  position: relative;
}
.pk-rps-btn::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  border: 0.5px solid rgba(196,168,106,0.15);
  pointer-events: none;
}
.pk-rps-btn svg { stroke: var(--text-secondary); width: 30px; height: 30px; transition: stroke 0.2s; }
/* 猜拳手势 = Noto 官方矢量，CSS 去色单色化（常态次级灰、悬停提亮，随主题深浅微调） */
.pk-rps-btn svg.rps-emoji,
.pk-rps-move-display svg.rps-emoji {
  stroke: none;
  width: 34px; height: 34px;
  filter: grayscale(1) contrast(1.12) brightness(0.72);
}
.pk-rps-btn:hover svg.rps-emoji {
  filter: grayscale(1) contrast(1.1) brightness(0.92);
}
[data-theme-mode="dark"] .pk-rps-btn svg.rps-emoji,
[data-theme-mode="dark"] .pk-rps-move-display svg.rps-emoji {
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}
[data-theme-mode="dark"] .pk-rps-btn:hover svg.rps-emoji {
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}
.pk-rps-btn:hover {
  border-color: var(--rose);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.6) inset,
    var(--shadow-sm),
    var(--shadow-md),
    var(--shadow-glow);
  transform: translateY(-4px);
}
.pk-rps-btn:hover::after { border-color: rgba(201,168,168,0.2); }
.pk-rps-btn:hover svg { stroke: var(--rose); }
.pk-rps-btn:active { transform: scale(0.94); }
.pk-rps-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: var(--shadow-xs); }
.pk-rps-btn-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.pk-rps-btn-en {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--font-decorative);
  font-style: italic;
}

/* RPS 局数进度格：开局预留固定位置（总局数由 roundLimit 决定），每局结束点亮一格，
   绝不追加新行 → 结果再多画面也不上移、布局不变 */
.pk-rps-history {
  padding: 6px 0 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}
.pk-rps-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  font-family: var(--font-reading);
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.pk-rps-slot .pk-rps-slot-no {
  font-size: 9px;
  line-height: 1;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.pk-rps-slot .pk-rps-slot-out {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  min-height: 14px;
}
.pk-rps-slot.empty { opacity: 0.62; }
.pk-rps-slot.done.win {
  border-color: rgba(146,164,141,0.55);
  background: rgba(146,164,141,0.16);
}
.pk-rps-slot.done.win .pk-rps-slot-out { color: var(--sage); }
.pk-rps-slot.done.lose {
  border-color: rgba(130,130,130,0.35);
  background: rgba(130,130,130,0.12);
}
.pk-rps-slot.done.lose .pk-rps-slot-out { color: var(--text-muted); }
.pk-rps-slot.done.draw {
  border-color: rgba(184,168,196,0.5);
  background: rgba(184,168,196,0.16);
}
.pk-rps-slot.done.draw .pk-rps-slot-out { color: var(--lavender); }
@media (max-width: 370px) {
  .pk-rps-slot { height: 38px; }
  .pk-rps-slot .pk-rps-slot-no { font-size: 8px; }
  .pk-rps-slot .pk-rps-slot-out { font-size: 13px; }
}

/* ===== 五子棋 ===== */
.pk-gomoku-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
  overflow-y: auto;
}
.pk-gomoku-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.pk-gomoku-top-left { display: flex; align-items: center; gap: 4px; }
.pk-gomoku-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  overflow: auto;
}
.pk-gomoku-board-wrap canvas {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  max-width: 100%;
  height: auto;
}
.pk-gomoku-status {
  text-align: center;
  padding: 8px 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-reading);
  flex-shrink: 0;
}
.pk-gomoku-status .pk-win-text, .pk-gomoku-status .pk-lose-text { font-weight: 600; }

/* ★ 2026-10 陪伴感：他在棋盘旁放话的气泡区（就地在游戏内出现，不跳回聊天） */
.pk-gomoku-comments {
  max-height: 76px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 2px;
  margin: 2px auto 0;
  width: min(100%, 300px);
  flex-shrink: 0;
  scrollbar-width: thin;
}
.pk-gomoku-bubble {
  align-self: flex-start;
  max-width: 84%;
  background: linear-gradient(135deg, rgba(201,168,168,0.14), rgba(201,168,168,0.06));
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  font-family: var(--font-reading);
  padding: 6px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(201,168,168,0.22);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  animation: pkBubbleIn 0.35s ease;
}
@keyframes pkBubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* 落子历史 + 悔棋 */
.pk-gomoku-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-shrink: 0;
  justify-content: center;
}
.pk-move-history {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  flex: 1;
}
.pk-move-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.pk-move-dot.black { background: #3a3a3a; border-color: #555; }
.pk-move-dot.white { background: #f5f0ea; border-color: #ccc; }
/* ===== 局内底部动作键（围棋/五子棋统一）：横排等宽 · 线条图标+文字 · 柔和底框 ===== */
.pk-undo-btn, .pk-go-pass-btn, .pk-go-resign-btn {
  padding: 7px 10px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  flex-shrink: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pk-undo-btn:hover:not(:disabled), .pk-go-pass-btn:hover, .pk-go-resign-btn:hover {
  border-color: var(--rose);
  color: var(--rose);
  background: var(--rose-light, rgba(201,168,168,0.12));
}
.pk-go-resign-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(216,168,152,0.08); }
.pk-undo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 一行等宽按钮（围棋三键 / 五子棋动作行共用） */
.pk-go-foot button, .pk-gomoku-actions button {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.pk-go-foot button svg, .pk-gomoku-actions button svg { width: 15px; height: 15px; flex-shrink: 0; }
.pk-go-foot button span, .pk-gomoku-actions button span { white-space: nowrap; line-height: 1.1; }
.pk-go-foot button:active, .pk-gomoku-actions button:active { transform: scale(0.95); }
/* 悔棋「剩N次」小角标 */
.pk-undo-count {
  font-style: normal;
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-chat, rgba(0, 0, 0, 0.05));
  border-radius: 7px;
  padding: 1px 5px;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== 围棋 ===== */
.pk-go-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
  overflow-y: auto;
}
.pk-go-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.pk-go-top-left { display: flex; align-items: center; gap: 4px; }
.pk-go-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pk-go-pass-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}
.pk-go-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  overflow: auto;
}
.pk-go-board-wrap canvas {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  max-width: 100%;
  height: auto;
}
.pk-go-status {
  text-align: center;
  padding: 8px 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-reading);
  flex-shrink: 0;
}

/* 围棋信息行 */
.pk-go-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0;
  flex-shrink: 0;
}
.pk-go-capture-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--gold-light);
  background: rgba(255,255,255,0.4);
  font-size: 11px;
  font-family: var(--font-reading);
  color: var(--text-secondary);
}
.pk-go-capture-card .cap-num {
  font-family: var(--font-decorative);
  font-size: 15px; font-style: italic;
  color: var(--rose);
  font-weight: 600;
}
.pk-go-territory {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-reading);
}
.pk-go-foot-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 4px 0;
  flex-shrink: 0;
}

/* ===== 帮助Sheet ===== */
.pk-help-section {
  margin-bottom: 14px;
}
.pk-help-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.pk-help-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  letter-spacing: 0.3px;
}
.pk-help-icon-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 8px 0;
}
.pk-help-icon-item {
  text-align: center;
}
.pk-help-icon-item svg {
  width: 32px; height: 32px;
  stroke: var(--rose);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pk-help-icon-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ===== 再战弹层 ===== */
.pk-rematch-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 0 14px;
  font-size: 12px;
  font-family: var(--font-reading);
  color: var(--text-secondary);
}
.pk-rematch-stat-num {
  font-family: var(--font-decorative);
  font-size: 22px; font-style: italic;
  color: var(--rose);
  font-weight: 600;
  display: block;
}
.pk-rematch-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ===== 空态 ===== */
.pk-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-decorative);
  font-size: 16px; font-style: italic;
  color: var(--text-muted);
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
}

/* ================================================================
   窄屏适配 (≤370px)
   ================================================================ */
@media (max-width: 370px) {
  .pk-sub-card { padding: 12px 10px; gap: 10px; }
  .pk-sub-icon { width: 44px; height: 44px; }
  .pk-sub-name { font-size: 14px; }
  .pk-sub-desc { font-size: 10px; }

  .pk-rps-btn { width: 68px; height: 82px; font-size: 11px; border-radius: 12px; }
  .pk-rps-btn svg { width: 24px; height: 24px; }
  .pk-rps-move-display { width: 66px; height: 66px; }
  .pk-rps-move-display svg { width: 26px; height: 26px; }
  .pk-rps-vs { gap: 12px; }
  .pk-rps-vs-text { font-size: 14px; min-width: 60px; }

  .pk-gomoku-board-wrap canvas { max-width: 96%; }
  .pk-go-board-wrap canvas { max-width: 96%; }
  .pk-go-pass-btn, .pk-go-resign-btn { font-size: 10px; padding: 4px 10px; }
  .pk-go-top-actions { gap: 3px; }
  .pk-go-capture-card { padding: 3px 8px; font-size: 10px; }
  .pk-go-capture-card .cap-num { font-size: 13px; }

  .pk-move-dot { width: 14px; height: 14px; }
  .pk-undo-btn { font-size: 10px; padding: 3px 8px; }
}

/* ============================================================
   2026-11 PK 精修：棋盘居中加固 / 训练场 / 邀请卡 / 战绩系统卡 / 语音陪伴区
   ============================================================ */

/* ---- 容器与棋盘居中加固（370 / 400+ / 480 一律居中，不靠左） ---- */
#game-container,
#game-container .pk-gomoku-game,
#game-container .pk-go-game {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
#game-container .pk-gomoku-game,
#game-container .pk-go-game {
  align-items: center;
}
#game-container .pk-gomoku-game .pk-board-frame,
#game-container .pk-go-game .pk-board-frame {
  width: min(100%, 460px);
  box-sizing: border-box;
  margin: 0 auto;
}
#pk-gomoku-canvas,
#pk-go-canvas {
  display: block;
  margin: 0 auto;
  touch-action: manipulation;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* ---- 训练场：选择页入口 chip ---- */
.pk-train-chip {
  border-color: rgba(196,168,106,0.55) !important;
  color: var(--gold, #B08A3E) !important;
  background: rgba(196,168,106,0.1) !important;
}
.pk-train-chip:hover { box-shadow: 0 0 0 3px rgba(196,168,106,0.12); }

/* ---- 训练场：难度选择页 ---- */
.pk-train-intro {
  text-align: center;
  margin: 10px 0 18px;
  padding: 16px 14px;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(196,168,106,0.10), transparent 60%),
    var(--surface-solid);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}
.pk-train-title {
  font-family: var(--font-reading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.pk-train-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-family: var(--font-reading);
}
.pk-train-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
.pk-train-level {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, var(--shadow-xs), var(--shadow-sm);
  transition: all 0.25s cubic-bezier(0.22,0.61,0.36,1);
}
.pk-train-level:hover {
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm), var(--shadow-md), var(--shadow-glow);
}
.pk-train-level:active { transform: scale(0.97); }
.pk-train-level-name {
  font-family: var(--font-reading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-primary);
}
.pk-train-level-desc {
  font-size: 11px;
  color: var(--text-muted);
}
[data-theme-mode="dark"] .pk-train-level,
[data-theme-mode="dark"] .pk-train-intro {
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-xs), var(--shadow-sm);
}

/* ---- 再战弹层：训练/战绩小注 ---- */
.pk-train-done-note {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-reading);
  letter-spacing: 0.5px;
  margin: 2px 0 12px;
}
.pk-train-done-note.pk-result-saved-note { color: var(--sage, #8CA684); }

/* ---- 语音陪伴气泡区（局内）样式微调 ---- */
.pk-gomoku-comments {
  width: min(100%, 320px);
}

/* ===== 游戏邀请卡（聊天里他发来的）===== */
.pk-invite-bubble {
  max-width: 300px;
}
.pk-invite-card {
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(201,168,168,0.12), transparent 55%),
    linear-gradient(160deg, var(--surface-solid), color-mix(in srgb, var(--surface-solid) 92%, var(--rose-light, #F5E9E9)));
  border: 1px solid var(--gold-light);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    var(--shadow-xs),
    var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.pk-invite-card::after {
  content: '';
  position: absolute;
  right: -18px;
  top: -18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,168,0.14), transparent 70%);
  pointer-events: none;
}
.pk-invite-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.pk-invite-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rose-light, rgba(201,168,168,0.16));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pk-invite-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--rose, #B98A8A);
}
.pk-invite-title {
  font-family: var(--font-reading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.pk-invite-status {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.45);
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.pk-invite-status.st-accepted { color: var(--sage, #7E9A74); border-color: rgba(126,154,116,0.4); background: rgba(126,154,116,0.08); }
.pk-invite-status.st-ing { color: var(--rose, #B98A8A); border-color: rgba(201,168,168,0.4); background: rgba(201,168,168,0.1); }
.pk-invite-status.st-completed { color: var(--sage, #7E9A74); border-color: rgba(126,154,116,0.4); background: rgba(126,154,116,0.08); }
.pk-invite-status.st-interrupted { color: var(--danger, #B0675C); border-color: rgba(176,103,92,0.35); background: rgba(176,103,92,0.08); }
.pk-invite-status.st-rejected { color: var(--danger, #B0675C); border-color: rgba(176,103,92,0.35); background: rgba(176,103,92,0.08); }
.pk-invite-status.st-finished { color: var(--gold, #B08A3E); border-color: rgba(196,168,106,0.4); background: rgba(196,168,106,0.1); }
.pk-invite-round {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 9px;
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  border: 1px solid var(--border); background: rgba(255,255,255,0.4);
  vertical-align: middle; letter-spacing: 0.5px;
}
.pk-invite-body {
  margin: 10px 4px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  font-family: var(--font-reading);
  text-align: left;
}
.pk-invite-actions {
  display: flex;
  gap: 8px;
}
.pk-invite-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
  letter-spacing: 0.5px;
}
.pk-invite-btn.ok {
  background: linear-gradient(135deg, var(--rose, #C9A8A8), #B98A8A);
  color: #fff;
  box-shadow: 0 4px 12px rgba(201,168,168,0.35);
}
.pk-invite-btn.no {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.pk-invite-btn:active { transform: scale(0.96); }
.pk-invite-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.pk-invite-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-reading);
  letter-spacing: 0.5px;
  padding: 2px 0;
}

/* ★ 2026 深色模式对比度修复（甲方实锤：邀请卡里「一局定胜负」等字变灰看不清）——
   .pk-invite-round / .pk-invite-status 默认用 --text-muted(#6A625A 深灰) + rgba(255,255,255,.4) 浅chip，
   深色底上对比度不足；深色改成更亮的 text-secondary + 深色chip。pk-lose-text 同理。 */
[data-theme-mode="dark"] .pk-invite-round,
[data-theme-mode="dark"] .pk-invite-status {
  color: var(--text-secondary);
  border-color: var(--border-faint);
  background: rgba(255,255,255,0.06);
}
[data-theme-mode="dark"] .pk-invite-btn.no { color: var(--text-secondary); }
[data-theme-mode="dark"] .pk-invite-note { color: var(--text-secondary); }
[data-theme-mode="dark"] .pk-lose-text,
[data-theme-mode="dark"] .pk-rps-slot.done.lose { color: var(--text-secondary); }
[data-theme-mode="dark"] .pk-rps-slot.done.lose { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); }
[data-theme-mode="dark"] .pk-rps-slot.done.win { border-color: rgba(146,164,141,0.4); background: rgba(146,164,141,0.14); }
[data-theme-mode="dark"] .pk-rps-slot.done.draw { border-color: rgba(184,168,196,0.35); background: rgba(184,168,196,0.12); }
[data-theme-mode="dark"] .pk-rps-slot { background: rgba(255,255,255,0.04); }

/* ===== PK 战绩系统卡（聊天里自动记录，无主提示）===== */
.pk-sys-card {
  width: min(88vw, 320px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(196,168,106,0.08), transparent 55%),
    linear-gradient(165deg, var(--surface-solid), color-mix(in srgb, var(--surface-solid) 94%, var(--rose-light, #F7EDED)));
  border: 1px solid var(--gold-light);
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    var(--shadow-xs),
    var(--shadow-sm);
}
.pk-sys-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.pk-sys-game {
  font-family: var(--font-reading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-primary);
}
.pk-sys-limit {
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(201,168,168,0.1);
  border-radius: 9px;
  padding: 2px 8px;
}
.pk-sys-tag {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.4);
  border-radius: 9px;
  padding: 2px 8px;
}
.pk-sys-winner {
  text-align: center;
  font-family: var(--font-reading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--rose, #B98A8A);
  margin-bottom: 8px;
}
.pk-sys-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 10px;
}
.pk-sys-side {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-reading);
}
.pk-sys-side b {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-decorative);
  font-style: italic;
  margin-left: 3px;
}
.pk-sys-vs {
  color: var(--gold, #C4A86A);
  font-family: var(--font-decorative);
  font-style: italic;
  font-size: 15px;
  opacity: 0.75;
}
.pk-sys-draw {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}
.pk-sys-rounds {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 2px;
  border-top: 0.5px solid rgba(196,168,106,0.2);
}
.pk-round-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font-reading);
}
.pk-round-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #C4A86A);
  opacity: 0.6;
  flex-shrink: 0;
}
.pk-round-text { min-width: 0; }
.pk-sys-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(196,168,106,0.2);
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-reading);
}
.pk-sys-said { opacity: 0.85; }

/* ============================================================
   2026-11 PK 视觉细调：棋盘桌纹理 / 比分不折行 / 顶栏微调
   ============================================================ */
#game-container .pk-board-frame {
  background:
    radial-gradient(140% 90% at 50% 10%, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
    radial-gradient(130% 70% at 50% 100%, rgba(196,168,106,0.07), transparent 55%),
    repeating-linear-gradient(45deg, rgba(196,168,106,0.03) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(196,168,106,0.03) 0 2px, transparent 2px 6px),
    var(--surface-solid);
}
.pk-score {
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.2px;
}
.pk-score .pk-score-num { font-size: 12px; font-style: italic; }
.pk-game-title-area { flex: 1 1 auto; min-width: 0; }
.pk-game-title { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   2026-11 PK 视觉细调(第二波)：局数分段/训练场角标/难度卡/再战vs居中/深色微调
   ============================================================ */
/* 选择页：局数共用分段选择器 */
.pk-round-seg {
  display: flex;
  margin: 2px auto 14px;
  width: min(100%, 320px);
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  border-radius: 12px;
  padding: 3px;
  box-shadow: var(--shadow-xs);
}
.pk-seg-btn {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: 9px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 1px;
  font-family: var(--font-reading);
  transition: all 0.2s ease;
}
.pk-seg-btn.on {
  background: linear-gradient(135deg, var(--rose, #C9A8A8), #B98A8A);
  color: #fff;
  box-shadow: 0 3px 8px rgba(201,168,168,0.3);
}
.pk-seg-btn:not(.on):hover { color: var(--rose); }
/* 卡片右上角「训练场」切换钮 */
.pk-sub-train {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #B08A3E, #C6A25A);
  box-shadow: 0 2px 8px rgba(196,168,106,0.35);
  cursor: pointer;
  font-family: var(--font-reading);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  z-index: 2;
}
.pk-sub-train:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(196,168,106,0.45); }
.pk-sub-train:active { transform: scale(0.96); }
.pk-sub-card .pk-sub-info { padding-right: 68px; }
/* 训练场难度卡（精致）：图标+难度色 */
.pk-train-intro { position: relative; overflow: hidden; }
.pk-train-intro::before {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,168,0.16), transparent 70%);
  pointer-events: none;
}
.pk-train-level { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; }
.pk-train-ico {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--rose-light, rgba(201,168,168,0.14));
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) inset, 0 2px 6px rgba(0,0,0,0.04);
}
.pk-train-ico svg { width: 26px; height: 26px; stroke: var(--rose, #B98A8A); }
.pk-train-level.lvl-easy .pk-train-ico { background: rgba(140,166,132,0.16); }
.pk-train-level.lvl-easy .pk-train-ico svg { stroke: var(--sage, #8CA684); }
.pk-train-level.lvl-hard .pk-train-ico { background: rgba(176,103,92,0.16); }
.pk-train-level.lvl-hard .pk-train-ico svg { stroke: var(--danger, #B0675C); }
.pk-train-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: center; }
.pk-train-level-name, .pk-train-level-desc { text-align: center; }
.pk-train-arrow { width: 16px; height: 16px; color: var(--text-muted); opacity: 0.6; flex-shrink: 0; }
.pk-train-arrow svg { width: 16px; height: 16px; }
/* 再战弹层：比分两侧等宽 → vs 真正居中 */
.pk-rematch-stats > div { flex: 1 1 0; min-width: 0; }
.pk-rematch-stats > div:not(:first-child):not(:last-child) { flex: 0 0 auto; padding: 0 6px; }
/* 深色主题微调 */
[data-theme-mode="dark"] .pk-train-intro,
[data-theme-mode="dark"] .pk-train-level {
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-xs), var(--shadow-sm);
}
[data-theme-mode="dark"] .pk-seg-btn { color: var(--text-secondary); }

/* ============================================================
   2026-12 PK：开局「他在想」loading / 中转站失败提示
   ============================================================ */
.pk-think {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
}
.pk-think-dot { display: flex; gap: 7px; }
.pk-think-dot span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rose, #B98A8A);
  opacity: 0.35;
  animation: pkThinkDot 1.1s ease-in-out infinite;
}
.pk-think-dot span:nth-child(2) { animation-delay: 0.18s; }
.pk-think-dot span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pkThinkDot { 0%,100% { transform: scale(0.7); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 1; } }
.pk-think-title {
  font-family: var(--font-reading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.pk-think-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-reading);
  letter-spacing: 1px;
}
.pk-think-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 1px;
  min-height: 14px;
}
.pk-think-cancel {
  margin-top: 8px;
  padding: 7px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s ease;
}
.pk-think-cancel:hover { border-color: var(--rose); color: var(--rose); }
/* 中转站失败提示 */
.pk-think-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
}
.pk-think-error .e-title {
  font-family: var(--font-reading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--danger, #B0675C);
}
.pk-think-error .e-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-family: var(--font-reading);
  max-width: 280px;
}
[data-theme-mode="dark"] .pk-think-cancel {
  background: var(--surface-solid);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-xs);
}

/* ================================================================
   2026-03 游戏改版精修：不再挤/不闪/不出现难看滚动条
   ================================================================ */

/* 棋盘区占满可用高度 → 不超容器、无竖向滚动条（网格本身通过 max-* 缩小适配） */
#game-container .pk-gomoku-game,
#game-container .pk-go-game,
#game-container .pk-rps-game {
  overflow: hidden;
}
#game-container .pk-board-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px 0;
}
#game-container .pk-board-frame canvas,
#pk-gomoku-canvas, #pk-go-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* 说话气泡区：一开始就固定留好高度（专放他说的字），绝不再顶棋盘/挤压 */
.pk-gomoku-comments, .pk-rps-comments {
  height: 62px;
  max-height: 62px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 2px;
  margin: 2px auto 0;
  width: min(100%, 300px);
  scrollbar-width: none;
  box-sizing: border-box;
}
.pk-gomoku-comments::-webkit-scrollbar, .pk-rps-comments::-webkit-scrollbar { width: 0; height: 0; }
.pk-rps-comments { width: min(100%, 260px); min-height: 0; }

/* 底部：五子棋 = 记录条一行 + 动作行；围棋 = 一行动作键（横排等宽） */
.pk-gomoku-foot, .pk-go-foot {
  flex-wrap: nowrap;
  /* 底部安全区留白：iOS 全面屏 Home 条不遮住悔棋/虚手/认输按钮（env 在无刘海设备返回 0，无副作用） */
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: 100%;
}
.pk-gomoku-foot { flex-direction: column; gap: 7px; }
.pk-move-history {
  overflow-x: hidden;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  flex-wrap: nowrap;
}
.pk-gomoku-actions { display: flex; justify-content: center; }
.pk-gomoku-actions .pk-undo-btn { flex: 0 1 auto; min-width: 126px; max-width: 62%; padding: 9px 18px; }
/* 围棋底栏：一行横排（最后定义，覆盖 column 共用类） */
.pk-go-foot { flex-direction: row; align-items: stretch; gap: 8px; }
@media (max-width: 370px) {
  .pk-go-foot button, .pk-gomoku-actions button { font-size: 11px; }
  .pk-go-foot button svg, .pk-gomoku-actions button svg { width: 13px; height: 13px; }
  .pk-gomoku-actions .pk-undo-btn { min-width: 108px; padding: 8px 12px; }
  .pk-undo-count { padding: 0 4px; }
}

/* 围棋「虚手」按钮：棋盘冷场时柔和闪一圈阴影，提示该点它结束 */
.pk-go-pass-btn.flash {
  border-color: var(--rose, #C9A8A8);
  color: var(--rose, #C9A8A8);
  animation: pkPassFlash 1.9s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(201,168,168,0.35);
}
@keyframes pkPassFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,168,0.0); }
  50% { box-shadow: 0 0 0 6px rgba(201,168,168,0.22); }
}

/* 猜拳亮拳结果：结果区入场强调 */
.pk-rps-result-area.pk-reveal { animation: pkRpsReveal 0.4s cubic-bezier(0.22,0.61,0.36,1); }
@keyframes pkRpsReveal {
  from { opacity: 0; transform: scale(0.9) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 新一局棋盘入场：淡入微缩放（不直接闪现） */
#game-container .pk-board-frame, #game-container .pk-rps-arena {
  animation: pkRoundIn 0.38s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes pkRoundIn {
  from { opacity: 0.35; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* 再战/结束弹窗：base 隐藏态 → rAF 加 .open 由 .game-popup-card 的 transition 入场（防闪：不重播） */

/* 窄屏（≤370）额外收紧 */
@media (max-width: 370px) {
  .pk-gomoku-comments, .pk-rps-comments { height: 54px; max-height: 54px; }
  .pk-rps-btn { width: 74px; height: 96px; }
  .pk-rps-btn svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-pass-btn.flash, .pk-go-pass-btn.flash, .pk-rps-result-area.pk-reveal,
  #game-container .pk-board-frame, #game-container .pk-rps-arena { animation: none; }
}