/* play.css — màn hình "Chơi + Trợ lý" / Đấu máy (mục 3 dac-ta-giao-dien.md).
   Tông chủ đạo trầm ấm (gỗ/đồng), mobile-first, bàn cờ luôn chiếm phần lớn màn
   hình, panel phụ (chọn cấp độ, kết quả ván) đều dạng bottom sheet trượt lên —
   đúng mục 7 (quy tắc thiết kế chung) dac-ta-giao-dien.md.

   NÂNG CẤP BẮT BUỘC (mục B đồng bộ bảng màu): trước đây header dùng 1 tông nâu xám
   (#4a3826/#3a2a1a) KHÁC HẲN tông nâu hổ phách của khung bàn cờ SVG mặc định (Gỗ tự
   nhiên, frameColor #6b4423 — xem src/theme/wood-natural-theme.js), và nút Xin thua/
   Ván mới dùng chung 1 màu đỏ tươi kiểu cảnh báo (bootstrap-danger) — nhìn rời rạc,
   mất sang trọng. Nay TOÀN BỘ page dùng 1 thang màu "gỗ hổ phách/đồng cổ" DUY NHẤT,
   neo đúng theo màu khung bàn cờ mặc định (--wood-700 = #6b4423 = frameColor SVG,
   --wood-accent-soft = #eccb90 = vân gỗ sáng nhất SVG) để header/khung ngoài bàn cờ/
   nút bấm/badge đều "ăn cùng 1 hệ" — không phải nhiều tông nâu ghép lại. */

:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* ---- Hệ thống chuyển động DUY NHẤT cho toàn trang (mục 3 rà soát trải nghiệm bàn
     cờ: "toàn bộ animation dùng chung 1 bộ easing nhất quán") — CÙNG giá trị easing
     với board.js (SVG bàn cờ nhúng style riêng vì dùng chung cho nhiều trang khác
     nhau, xem board/board.js #buildStyles()), để quân cờ/banner/nút/sheet chuyển
     động "cùng 1 cảm giác", không lệch tông. */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 120ms;
  --motion-medium: 200ms;
  --motion-slow: 320ms;
  /* ---- Công thức bóng đổ DUY NHẤT, chỉ đổi "độ cao" (elevation) — dùng cho khung bàn
     cờ/banner/bottom sheet/nút nổi bật, tránh mỗi nơi tự chế 1 kiểu bóng khác nhau
     (mục 3 rà soát: "bóng đổ... có dùng chung 1 công thức nhất quán không"). */
  --shadow-elevation-low: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-elevation-mid: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-elevation-high: 0 10px 28px rgba(0, 0, 0, 0.5);
  /* ---- Thang cỡ chữ rõ ràng (mục 3 rà soát: trước đây rải rác 0.68/0.72/0.76/0.85/
     0.88rem cho các nhãn "cùng tầng quan trọng" — không có quy luật rõ, ví dụ tên theme
     (0.68rem) nhỏ hơn tiêu đề mục cài đặt (0.72rem) dù cùng là "nhãn phụ nhỏ", và banner
     cảnh báo (0.85rem) khác mô tả sheet hết lượt (0.88rem) dù cùng là "nội dung phụ"). */
  --fs-label-sm: 0.72rem; /* nhãn nhỏ: tiêu đề mục cài đặt, tên theme */
  --fs-body-sm: 0.85rem; /* nội dung phụ: banner cảnh báo/gợi ý, mô tả sheet hết lượt */
  --fs-body: 0.9rem; /* nội dung chính: nút hành động, "máy đang suy nghĩ" */
  --fs-body-md: 0.95rem; /* nhấn nhẹ: trạng thái lượt đi, lựa chọn cấp độ */
  /* Thang nâu gỗ hổ phách/đồng cổ dùng CHUNG cho mọi mảng UI (header, khung bàn cờ,
     bottom sheet, action bar) — số càng lớn càng tối, đúng quy ước thường gặp. */
  --wood-950: #1f1509;
  --wood-900: #2a1c0f;
  --wood-800: #3d2814;
  --wood-700: #6b4423; /* == frameColor SVG theme Gỗ tự nhiên, neo đồng bộ header/khung */
  --wood-600: #7d5730;
  --wood-accent: #c9a06a;
  --wood-accent-soft: #eccb90; /* == vân gỗ sáng nhất SVG theme Gỗ tự nhiên */
  /* 3 nút hành động PHẢI phân biệt nhau nhưng CÙNG hệ ấm (không dùng đỏ cảnh báo tươi). */
  --bronze-accent: #b8863c; /* "Ván mới" — vàng đồng ấm */
  --bronze-accent-hover: #9c7132;
  --antique-red: #8a3a2e; /* "Xin thua" — nâu đỏ trầm/đồng cổ, KHÔNG phải đỏ bootstrap-danger */
  --antique-red-hover: #6f2e24;
  --neutral-warm: #8a7863; /* "Đi lại" — be/xám ấm trung tính */
  --neutral-warm-hover: #746656;
  --green-accent: #4f7a52; /* CTA xác nhận (Bắt đầu/Chơi ván mới) — xanh trầm ấm, không chói */
  --green-accent-hover: #3d6140;
  --text-main: #f5ecd9;
  --text-muted: #cdb99a;
  --card-bg: #3a2814;
  --card-border: #6b4a28;
  /* Giữ lại 2 tên biến cũ (--red-accent/-hover) làm ALIAS trỏ sang --antique-red để mọi
     nơi khác đang dùng tên cũ (coach-banner cảnh báo, badge lỗi...) tự động ăn theo tông
     mới mà không phải sửa từng chỗ. */
  --red-accent: var(--antique-red);
  --red-accent-hover: var(--antique-red-hover);
}

* {
  box-sizing: border-box;
}

html {
  /* Tránh layout giật khi thanh cuộn xuất hiện/biến mất lúc click quân. */
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  /* Giảm delay 300ms + tránh gesture zoom/double-tap gây "chớp" trên mobile. */
  touch-action: manipulation;
}

body {
  background: radial-gradient(ellipse at top, var(--wood-800) 0%, var(--wood-950) 70%);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* QUAN TRỌNG (sửa lỗi "Đi lại"/bàn cờ bị nút dưới cùng che khuất): trước đây chỉ có
   min-height:100vh — khi tổng nội dung (nay đã dài hơn vì có thêm nút 🔴 Gia sư/toggle
   Hồ Vinh Hoa) CAO HƠN màn hình, .action-bar (position: sticky; bottom: 0) tự "dán"
   ngay vào đáy khung nhìn NGAY CẢ KHI CHƯA CUỘN, đè lên phần dưới của SVG bàn cờ (SVG
   kích thước cố định, không tự co) — trên màn hình di động thấp, người chơi bấm không
   trúng ô cờ ở các hàng dưới. Chốt CHIỀU CAO CỐ ĐỊNH = 100vh + overflow: hidden ở đây,
   để header/action-bar không bao giờ chồng lên bàn cờ; phần .board-stage bên trong tự
   cuộn riêng (overflow-y: auto) nếu 1 màn hình quá thấp không đủ chỗ. */
.app-shell {
  width: 100%;
  max-width: 520px;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--wood-900) 0%, var(--wood-950) 100%);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ---------- Header ---------- */
/* Cùng CÔNG THỨC gradient nâu gỗ với .board-frame bên dưới (mục B: header + khung
   ngoài bàn cờ phải "ăn cùng 1 hệ", không phải 2 tông nâu ghép lại). */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--wood-700) 0%, var(--wood-800) 100%);
  border-bottom: 2px solid var(--wood-600);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar__title {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--wood-accent-soft);
  letter-spacing: 0.02em;
}

.topbar__actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wood-600);
  background: var(--wood-700);
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
}

.icon-btn:hover {
  background: var(--wood-600);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:focus {
  outline: none;
}

.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wood-accent-soft);
}

/* ---------- Board stage ---------- */
.board-stage {
  flex: 1;
  /* min-height: 0 bắt buộc để flex item này thật sự CO LẠI đúng khoảng trống còn lại
     (mặc định flex item có min-height:auto = theo kích thước nội dung, sẽ đẩy tràn ra
     ngoài .app-shell đã khoá height:100vh phía trên) — nhờ vậy overflow-y: auto ngay
     dưới đây mới có tác dụng thật (tự cuộn RIÊNG vùng này, không đẩy lệch action-bar). */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* "safe center": khi KHÔNG đủ chỗ (đã xảy ra với thêm 🔴 Gia sư/toggle Hồ Vinh Hoa
     trên màn hình thấp), tự lùi về căn ĐẦU (start) để phần trên (chọn chế độ, "Đến
     lượt") LUÔN cuộn tới xem được — nếu không, justify-content: center kết hợp
     overflow-y:auto sẽ làm tràn ĐỀU 2 phía, phía tràn lên trên sẽ KHÔNG BAO GIỜ cuộn
     tới được (giới hạn của flexbox). Dòng "center" trước là fallback cho trình duyệt
     chưa hỗ trợ "safe" (nếu "safe center" bị bỏ qua vì không nhận, dòng trên vẫn còn hiệu lực). */
  justify-content: center;
  justify-content: safe center;
  gap: 10px;
  padding: 14px 14px 6px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Chuyển đổi chế độ hỗ trợ (mục 1 che-do-choi-huan-luyen-truc-tiep.md) ----------
   4 mức (thêm 🔴 Gia sư) -> lưới 2x2 (thay lưới 1x3 cũ) để mỗi nút vẫn đủ rộng bấm thoải
   mái trên màn hình nhỏ, tránh 4 nút chữ dài dồn vào 1 hàng bị co chữ quá nhỏ. */
.support-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: min(94vw, 480px);
}

.support-mode-btn {
  background: var(--wood-900);
  border: 2px solid var(--wood-600);
  border-radius: 999px;
  padding: 8px 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.support-mode-btn:hover:not(:disabled) {
  background: var(--wood-800);
}

/* Badge trạng thái (mục B): mỗi chế độ có 1 màu ACTIVE riêng để phân biệt chức năng,
   nhưng cả 2 vẫn nằm trong hệ ấm chung (xanh ô-liu trầm / vàng đồng), không lạc màu
   như đỏ/xanh lá chói của bảng màu "app trẻ em". */
#mode-khong-chi[aria-pressed="true"] {
  border-color: #6f8f5a;
  background: #33402a;
  color: #dce8cf;
  box-shadow: 0 0 0 2px #6f8f5a inset;
}

#mode-chi-khi-sai[aria-pressed="true"] {
  border-color: var(--bronze-accent);
  background: var(--wood-700);
  color: var(--wood-accent-soft);
  box-shadow: 0 0 0 2px var(--bronze-accent) inset;
}

/* 🟠 Trợ lý — thêm 1 tông cam trầm/đất nung riêng (KHÔNG dùng cam chói), vẫn trong hệ ấm
   chung với 2 mức còn lại (mục B đồng bộ bảng màu). */
#mode-tro-ly[aria-pressed="true"] {
  border-color: #b8622e;
  background: #4a2c18;
  color: #ffd3ab;
  box-shadow: 0 0 0 2px #b8622e inset;
}

/* 🔴 Gia sư — tông đỏ trầm/đồng cổ (--antique-red), KHÁC hẳn đỏ cảnh báo tươi của nút
   "Xin thua" (--antique-red dùng riêng cho nút bấm hành động, ở đây dùng 1 tông đỏ gạch
   hơi khác #a8412f để không lẫn với trạng thái "đang chọn" của nút Xin thua). */
#mode-gia-su[aria-pressed="true"] {
  border-color: #a8412f;
  background: #4a1f18;
  color: #ffc4b0;
  box-shadow: 0 0 0 2px #a8412f inset;
}

/* ---------- Toggle "Phong cách Hồ Vinh Hoa" (mục 3+5 che-do-choi-huan-luyen-truc-tiep.md) ----------
   Độc lập với 4 nút mức hỗ trợ phía trên — kiểu dáng "pill" riêng, tông vàng đồng nhấn
   (khác 4 nút mức hỗ trợ) để rõ đây là 1 lựa chọn KHÁC LOẠI (bổ trợ, không phải 1 trong 4
   mức), dù đặt liền ngay dưới theo đúng bố cục mục 5 tài liệu. */
.ho-vinh-hoa-toggle {
  width: min(94vw, 480px);
  background: var(--wood-900);
  border: 2px solid var(--wood-600);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.ho-vinh-hoa-toggle:hover:not(:disabled) {
  background: var(--wood-800);
}

.ho-vinh-hoa-toggle[aria-pressed="true"] {
  border-color: var(--wood-accent);
  background: #4a3312;
  color: var(--wood-accent-soft);
  box-shadow: 0 0 0 2px var(--wood-accent) inset;
}

/* ---------- Banner "Chiếu tướng!" (tinh tế, tự ẩn ~1s) ----------
   Compact giữa đỉnh bàn — không full-width như coach-banner, không che quân.
   Cùng font/bo góc/bóng đổ token với .coach-banner; viền hổ phách/đồng (--bronze-accent). */
.check-banner {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 5;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  background: rgba(30, 20, 12, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--bronze-accent);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--wood-accent-soft);
  white-space: nowrap;
  box-shadow: var(--shadow-elevation-mid);
  pointer-events: none;
}

.check-banner[hidden] {
  display: none;
}

/* Animation riêng — phải giữ translateX(-50%) (canh giữa); không tái dùng
   coBannerIn vì keyframes đó ghi đè transform và đẩy banner lệch sang phải. */
.check-banner:not([hidden]) {
  animation: coCheckBannerIn var(--motion-medium) var(--ease-standard) both;
}

@keyframes coCheckBannerIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Khi chiếu hiện cùng lúc với banner AI: đẩy coach/trợ lý/gia sư xuống dưới check. */
.board-frame-wrap.has-check-banner .coach-banner:not([hidden]),
.board-frame-wrap.has-check-banner .tro-ly-banner:not([hidden]),
.board-frame-wrap.has-check-banner .gia-su-banner:not([hidden]),
.board-frame-wrap.has-check-banner .gia-su-correct-banner:not([hidden]) {
  top: 48px;
}

/* ---------- Cảnh báo AI thầy cờ (chế độ 🟡 Chỉ khi sai) ----------
   QUAN TRỌNG (mục 1 rà soát trải nghiệm bàn cờ — sửa lỗi "giật/chớp"): banner định vị
   theo .board-frame-wrap (KHÔNG phải .board-stage như bản cũ) nên chỉ tràn nhẹ lên mép
   TRÊN của chính bàn cờ, KHÔNG BAO GIỜ che mất hàng nút chế độ hỗ trợ 🟢🟡🟠 hay dòng
   "Đến lượt" phía trên — trước đây banner phủ kín đúng vùng đó mỗi lần hiện lên, tạo cảm
   giác "đồ vật lạ đột ngột che khuất nút bấm" rất giật. Nền có backdrop-filter (nếu trình
   duyệt hỗ trợ) để chữ vẫn rõ trên vân gỗ sáng bên dưới. */
.coach-banner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 4;
  background: rgba(30, 20, 12, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--red-accent);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-main);
  white-space: pre-line;
  box-shadow: var(--shadow-elevation-mid);
  cursor: pointer;
  transition: top var(--motion-fast) var(--ease-standard);
}

.coach-banner[hidden] {
  display: none;
}

/* Fade-in + trượt nhẹ xuống khi banner XUẤT HIỆN (mục 1: "banner xuất hiện mượt,
   fade-in/transition, không giật bàn cờ"). Dùng CSS @keyframes (không phải transition)
   vì transition KHÔNG chạy được qua ranh giới display:none -> hiện — animation thì có,
   tự chạy lại mỗi lần phần tử hết [hidden] mà KHÔNG cần đổi timing lúc ẨN đi (giữ nguyên
   `el.hidden = true` tức thời cho các bài test tự động đang đọc thuộc tính này). */
.coach-banner:not([hidden]) {
  animation: coBannerIn var(--motion-medium) var(--ease-standard) both;
}

@keyframes coBannerIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Banner chế độ 🟠 Trợ lý (mục 1-2 che-do-choi-huan-luyen-truc-tiep.md) ----------
   Khác .coach-banner (⚠️ cảnh báo tự ẩn sau vài giây): đây là thông báo CHỦ ĐỘNG, ở lại cho
   tới khi người chơi đi nước tiếp theo hoặc tự bấm "Đóng" — không auto-hide, vì người chơi
   cần thời gian bấm "Xem gợi ý" và đọc từng lớp. Cùng cách định vị + hiệu ứng xuất hiện với
   .coach-banner ở trên (đúng mục 3: nhất quán). */
.tro-ly-banner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 4;
  background: rgba(30, 20, 12, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #b8622e;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-main);
  box-shadow: var(--shadow-elevation-mid);
  transition: top var(--motion-fast) var(--ease-standard);
}

.tro-ly-banner[hidden] {
  display: none;
}

.tro-ly-banner:not([hidden]) {
  animation: coBannerIn var(--motion-medium) var(--ease-standard) both;
}

.tro-ly-banner__notice {
  margin: 0 0 6px;
  font-weight: 700;
}

.tro-ly-hint-layers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.tro-ly-hint-layers:empty {
  margin-bottom: 0;
}

.tro-ly-hint-line {
  margin: 0;
  white-space: pre-line;
}

.tro-ly-banner__actions {
  display: flex;
  gap: 8px;
}

.tro-ly-banner__hint-btn,
.tro-ly-banner__close-btn {
  padding: 7px 12px;
  font-size: 0.8rem;
  border-radius: 999px;
}

.tro-ly-banner__hint-btn {
  background: #b8622e;
  color: #2a1c0a;
}

.tro-ly-banner__hint-btn:hover:not(:disabled) {
  background: #a1541f;
}

.tro-ly-banner__close-btn {
  background: var(--neutral-warm);
}

.tro-ly-banner__close-btn:hover:not(:disabled) {
  background: var(--neutral-warm-hover);
}

.tro-ly-banner__close-btn[hidden],
.tro-ly-banner__hint-btn[hidden] {
  display: none;
}

/* ---------- Banner chế độ 🔴 Gia sư ----------
   Kế thừa NGUYÊN khung .tro-ly-banner (cùng cách định vị/hiệu ứng xuất hiện, đúng mục 3 rà
   soát: nhất quán) — chỉ đổi màu viền/nút sang tông đỏ trầm để phân biệt trực quan với
   banner Trợ lý (cam), tránh người chơi nhầm 2 chế độ khi đổi qua lại giữa ván. */
.gia-su-banner {
  border-color: #a8412f;
}

.gia-su-banner .tro-ly-banner__hint-btn {
  background: #a8412f;
  color: #fbe4dd;
}

.gia-su-banner .tro-ly-banner__hint-btn:hover:not(:disabled) {
  background: #8f3527;
}

/* ---------- Xác nhận "🔥 Chính xác!" (mục 2 che-do-choi-huan-luyen-truc-tiep.md) ----------
   Kế thừa NGUYÊN khung .coach-banner (vị trí/hiệu ứng) — đổi viền sang xanh trầm ấm (tông
   khen ngợi, KHÁC đỏ cảnh báo của .coach-banner gốc) để rõ đây là phản hồi TÍCH CỰC. */
.gia-su-correct-banner {
  border-color: var(--green-accent);
}

/* ---------- Nút "Tại sao?" (mục 4 che-do-choi-huan-luyen-truc-tiep.md) ---------- */
.btn-action--explain {
  background: var(--wood-700);
  color: var(--wood-accent-soft);
}
.btn-action--explain:hover:not(:disabled) {
  background: var(--wood-600);
}

/* 4 nút hành động (thêm "Tại sao?") -> co gọn chữ/khoảng đệm 1 chút để vẫn đủ chỗ bấm
   thoải mái trên màn hình nhỏ, không đổi kích thước vùng chạm quá nhỏ (vẫn ≥44px cao). */
.action-bar button {
  font-size: 0.78rem;
  padding: 11px 4px;
}

/* ---------- Panel "Tại sao?" (bottom sheet, mục 4 tài liệu + mục 3 dac-ta-giao-dien.md) ---------- */
.explain-move-sheet {
  max-height: 82vh;
  overflow-y: auto;
}

.explain-move-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.explain-move-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.explain-move-section__title {
  margin: 0 0 4px;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--wood-accent-soft);
}

.explain-move-section__text {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-main);
  white-space: pre-line;
  line-height: 1.45;
}

.turn-status {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-body-md);
  color: var(--wood-accent-soft);
  text-align: center;
  min-height: 1.3em;
}

.turn-status.is-check {
  color: #ff8a80;
}

/* Khung neo (mục 1 rà soát: chỗ dựa vị trí DUY NHẤT cho 2 banner cảnh báo/gợi ý — xem
   ghi chú ở .coach-banner phía trên) — cùng bề rộng với .board-frame, không thêm padding
   riêng để banner con (position:absolute theo khung này) luôn khớp đúng mép bàn cờ. */
.board-frame-wrap {
  position: relative;
  width: min(94vw, 480px);
}

/* Khung ngoài quanh bàn cờ — DÙNG CHUNG công thức gradient với .topbar (mục B: header +
   khung ngoài bàn cờ phải "ăn cùng 1 hệ nâu gỗ", không phải 2 tông nâu ghép lại). Đây là
   lớp "casing" CSS bên ngoài SVG — màu khung bên TRONG SVG vẫn đổi theo theme đã chọn
   (theme/registry.js), lớp casing này chỉ tạo phần chuyển tiếp nhất quán giữa header và
   bàn cờ, không phụ thuộc theme đang chọn (đúng tinh thần "tông đã chốt cho cả app"). */
.board-frame {
  width: 100%;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--wood-700) 0%, var(--wood-800) 100%);
  /* Bóng đổ chuyển sang khung CSS (ổn định) — KHÔNG gắn filter:drop-shadow lên SVG
     vì mỗi lần đổi highlight/chọn quân buộc recalculate filter toàn SVG → chớp/giật.
     Dùng chung công thức --shadow-elevation-high với các khối "nổi" khác (mục 3). */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--shadow-elevation-high);
}

.board-container {
  width: 100%;
  display: flex;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.board-container svg,
#board-svg,
#board-pieces-layer,
#board-highlight-layer,
#board-grid-layer {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.board-container svg,
#board-svg {
  display: block;
  /* Không dùng filter CSS trên SVG (gây chớp khi đổi node con). */
  filter: none;
}

.thinking-indicator {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-muted);
  min-height: 1.3em;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.86);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 12px;
}

.pause-overlay[hidden] {
  display: none;
}

/* ---------- Bottom action bar ---------- */
.action-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--wood-800) 0%, var(--wood-700) 100%);
  border-top: 2px solid var(--wood-600);
  position: sticky;
  bottom: 0;
}

.action-bar button {
  flex: 1;
}

button {
  /* Mặc định trung tính ấm (KHÔNG còn đỏ cảnh báo làm màu mặc định cho MỌI nút — đúng
     mục B: chỉ nút "Xin thua" mới mang tông đỏ trầm, có class riêng bên dưới). */
  background: var(--neutral-warm);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 11px 10px;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  /* Cùng easing/thời lượng với toàn trang (mục 3 rà soát: nhất quán chuyển động) —
     trước đây :active đổi transform TỨC THỜI (không transition), bấm nút có cảm giác
     "khô/rẻ tiền" so với phần còn lại của app đã có hiệu ứng mượt. */
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

button:disabled {
  background: #6b6156;
  color: #cfc6b8;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background: var(--neutral-warm-hover);
}

button:active:not(:disabled) {
  transform: scale(0.97);
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wood-accent-soft);
}

/* 3 nút hành động màn Đấu máy (mục B) — mỗi nút 1 màu chức năng riêng nhưng CÙNG hệ ấm:
   Đi lại = be/xám ấm trung tính, Xin thua = nâu đỏ trầm/đồng cổ, Ván mới = vàng đồng ấm. */
.btn-action--undo {
  background: var(--neutral-warm);
}
.btn-action--undo:hover:not(:disabled) {
  background: var(--neutral-warm-hover);
}

.btn-action--resign {
  background: var(--antique-red);
}
.btn-action--resign:hover:not(:disabled) {
  background: var(--antique-red-hover);
}

.btn-action--newgame {
  background: var(--bronze-accent);
  color: #2a1c0a;
}
.btn-action--newgame:hover:not(:disabled) {
  background: var(--bronze-accent-hover);
}

.btn-primary {
  width: 100%;
  background: var(--green-accent);
  padding: 13px 10px;
  font-size: 1rem;
  margin-top: 14px;
}

.btn-primary:hover:not(:disabled) {
  background: var(--green-accent-hover);
}

.btn-secondary {
  background: var(--wood-700);
  border: 1px solid var(--card-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--wood-600);
}

/* ---------- Sheet hết lượt Trợ lý miễn phí/ngày (mục 4 dac-ta-giao-dien.md) ---------- */
.tro-ly-limit-desc {
  margin: 0 0 16px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Bottom sheets (chọn cấp độ / kết quả ván) ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10;
}

.sheet-backdrop:not([hidden]) {
  animation: coBackdropIn var(--motion-medium) var(--ease-standard) both;
}

@keyframes coBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, var(--wood-700) 0%, var(--wood-800) 100%);
  border-radius: 18px 18px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  z-index: 11;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}

/* Trượt lên mượt khi mở (mục 3 rà soát: comment cũ đã ghi "trượt lên từ dưới" nhưng
   trước đây chỉ bật/tắt [hidden] tức thời, không có chuyển động thật — nay khớp đúng
   mô tả). Giữ nguyên translateX(-50%) đang dùng để canh giữa ngang. */
.bottom-sheet:not([hidden]) {
  animation: coSheetIn var(--motion-medium) var(--ease-standard) both;
}

@keyframes coSheetIn {
  from {
    transform: translateX(-50%) translateY(28px);
    opacity: 0.5;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.bottom-sheet__handle {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--wood-600);
  margin: 6px auto 14px;
}

.bottom-sheet h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  text-align: center;
  color: var(--wood-accent-soft);
}

/* ---------- Cài đặt ⚙: đổi theme bàn cờ + cấp độ máy (mục 5 de-xuat-thiet-ke-quan-co-ban-co.md) ---------- */
.sheet-section-title {
  margin: 0 0 8px;
  font-size: var(--fs-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.sound-toggle {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--wood-900);
  border: 2px solid var(--wood-600);
  border-radius: 10px;
  color: var(--text-main);
  font-size: var(--fs-body-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.sound-toggle[aria-pressed="true"] {
  border-color: var(--wood-accent);
  background: var(--wood-700);
  color: var(--wood-accent-soft);
}

.sound-toggle[aria-pressed="false"] {
  color: var(--text-muted);
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--wood-900);
  border: 2px solid var(--wood-600);
  border-radius: 10px;
  padding: 10px 2px 8px;
  color: var(--text-main);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.theme-option[aria-pressed="true"] {
  border-color: var(--wood-accent);
  background: var(--wood-700);
  color: var(--wood-accent-soft);
  box-shadow: 0 0 0 2px var(--wood-accent) inset;
}

.theme-option__swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.level-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.level-option {
  background: var(--wood-900);
  border: 2px solid var(--wood-600);
  border-radius: 10px;
  padding: 14px 8px;
  color: var(--text-main);
  font-size: var(--fs-body-md);
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.level-option[aria-pressed="true"] {
  border-color: var(--wood-accent);
  background: var(--wood-700);
  box-shadow: 0 0 0 2px var(--wood-accent) inset;
}

.level-option__depth {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.result-text {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 4px 0 0;
  color: var(--wood-accent-soft);
  white-space: pre-line;
}