/* Lớp giao diện của arena — nạp SAU `hungkings-tokens.css`.
 * Ở đây KHÔNG được khai màu thương hiệu (navy/vàng/mực): những màu đó là `--hk-*`.
 * Chỉ khai thứ riêng của arena: hai phe và bàn cờ. */

:root {
  /* --- Hai phe -------------------------------------------------------------
   * Không phải màu thương hiệu nên sống ở lớp arena. Mỗi phe có BA vai tách
   * bạch (chấm / nền dải / mực trên dải) vì một màu không cõng nổi cả ba —
   * đúng bài học `--hk-primary` vs `--hk-link` của tệp token. */
  --ar-nam: #7fa9ff;          /* chấm, viền — 7,39:1 trên thẻ */
  --ar-nam-nen: #1c3560;
  --ar-nam-muc: #d6e4ff;      /* 9,49:1 trên nền dải */
  --ar-nu: #ff8fbb;           /* 8,11:1 trên thẻ */
  --ar-nu-nen: #4d2338;
  --ar-nu-muc: #ffdcea;       /* 10,34:1 trên nền dải */

  /* --- Bàn cờ --------------------------------------------------------------
   * CỐ Ý không đổi theo theme: gỗ là gỗ, và bàn cờ là NỘI DUNG chứ không phải
   * khung trang.
   *
   * ĐỪNG chỉnh hai màu ô cho "đẹp hơn" mà không đo lại. Với quân trắng #fff và
   * quân đen #000, luminance L của một ô phải nằm trong [0,10 ; 0,30] thì CẢ HAI
   * màu quân mới đạt 3:1 trên ô đó:
   *     quân trắng: 1,05/(L+0,05) ≥ 3  ⟹  L ≤ 0,30
   *     quân đen  : (L+0,05)/0,05 ≥ 3  ⟹  L ≥ 0,10
   * Bản cũ để ô sáng #e4d3ac (L = 0,66) — ngoài dải — nên quân trắng chỉ còn
   * 1,45:1, tức gần như không nhìn thấy. Hai giá trị dưới đây có L = 0,277 và
   * 0,114: thân quân thấp nhất 3,21:1, và vì mỗi quân còn đeo viền màu ngược
   * (`--ar-vien-*`) nên biên quân thấp nhất là 6,41:1. */
  --ar-o-sang: #a98b5e;       /* L = 0,277 */
  --ar-o-toi: #7a5836;        /* L = 0,114 */
  --ar-quan-trang: #ffffff;
  --ar-quan-den: #000000;
  --ar-vien-trang: #000000;   /* viền quanh quân TRẮNG */
  --ar-vien-den: #ffffff;     /* viền quanh quân ĐEN */
  --ar-nuoc-cuoi-2: #1a1000;  /* dải trong của khung nước cuối — 5,76:1 trên ô sáng */
}

@media (prefers-color-scheme: light) {
  :root:not(.dark):not([data-theme]) {
    --ar-nam: #2f56b5; --ar-nam-nen: #dbe6ff; --ar-nam-muc: #1c3a78;
    --ar-nu: #b32a63; --ar-nu-nen: #ffe1ec; --ar-nu-muc: #7a1d43;
  }
}
html.light, :root[data-theme='light'] {
  --ar-nam: #2f56b5; --ar-nam-nen: #dbe6ff; --ar-nam-muc: #1c3a78;
  --ar-nu: #b32a63; --ar-nu-nen: #ffe1ec; --ar-nu-muc: #7a1d43;
}

/* --- Nền chung --------------------------------------------------------------
 * KHÔNG ghim gốc rem bằng px: cài đặt cỡ chữ của trình duyệt phải còn tác dụng. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--hk-bg-page);
  color: var(--hk-text);
  font-family: var(--hk-font-ui);
  line-height: 1.55;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Bỏ qua phần đầu — người dùng bàn phím không phải tab qua header mỗi trang. */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 20;
  background: var(--hk-accent); color: var(--hk-on-accent);
  padding: 10px 16px; border-radius: var(--hk-radius-control); font-weight: 600;
}
.skip:focus { top: 8px; }

a { color: var(--hk-accent-text); }

:focus-visible {
  outline: var(--hk-focus-width) solid var(--hk-focus-color);
  outline-offset: var(--hk-focus-offset);
}

/* --- Đầu trang -------------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--hk-border);
  background: var(--hk-bg-elev);
}
header .day { flex: 1 1 0; min-width: 0; }

/* Wordmark: mark + "HungKings" NGUYÊN KHỐI một màu (BRAND mục 3 — không cắt đôi
 * wordmark thành hai màu như bản cũ). */
/* Wordmark là control ĐỘC LẬP (đứng riêng ở header, không nằm giữa câu) nên phải đủ
 * 44px vùng bấm — đo được 24,8px trước khi thêm min-height. */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--hk-touch); padding: 4px 2px;
  font-weight: 700; color: var(--hk-text); text-decoration: none;
}
/* Vẽ mark bằng background-image, KHÔNG dùng mask (BRAND mục 1, luật cứng).
 * Đường dẫn TƯƠNG ĐỐI so với chính tệp css này ⇒ tự đúng dưới tiền tố `/giai-app`
 * mà không cần placeholder. Mark vàng giữ nguyên ở cả hai theme: WCAG 1.4.11 miễn
 * trừ logo, và chữ "HungKings" ngay cạnh vẫn đủ tương phản. */
.brand .mark {
  width: 22px; height: 22px; flex: none;
  background: url('favicon.svg') center/contain no-repeat;
}
.brand .phu { font-weight: 400; color: var(--hk-text-dim); }

/* Lối về site chính. Server ghi đích vào `__HK_HOME__`: nhúng dưới tiền tố thì về
 * `/` (gốc site), chạy độc lập thì về hungkings.com. */
.ve-site {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--hk-touch); padding: 6px 12px;
  border-radius: var(--hk-radius-chip); border: 1px solid var(--hk-border);
  color: var(--hk-text); text-decoration: none; font-size: .92rem;
}
.ve-site:hover { border-color: var(--hk-accent); }

/* --- Control ---------------------------------------------------------------- */
button {
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: var(--hk-touch); padding: 10px 18px;
  border: 0; border-radius: var(--hk-radius-control);
  background: var(--hk-accent); color: var(--hk-on-accent);
}
button.ghost { background: transparent; color: var(--hk-text); border: 1px solid var(--hk-border); }
button[disabled], input[disabled] { opacity: .55; cursor: not-allowed; }

/* Viền ô nhập phải tự phân biệt với nền — nền lõm chỉ hơn thẻ 1,09:1 nên viền là
 * thứ DUY NHẤT vạch ra control. `--hk-border` chỉ 1,31:1 (báo cáo 03 gọi đúng tên
 * lỗi này ở `phong.html:44`); `--hk-text-dim` cho 7,83:1 tối / 6,56:1 sáng. */
input[type='text'] {
  flex: 1; min-width: 0; min-height: var(--hk-touch); padding: 10px 12px;
  border-radius: var(--hk-radius-control); border: 1px solid var(--hk-text-dim);
  background: var(--hk-bg-sunken); color: var(--hk-text); font: inherit;
}

/* Nút dạng chữ: vẫn là control ĐỘC LẬP (đứng riêng một dòng) nên phải đủ 44px
 * vùng bấm — WCAG 2.5.8 chỉ miễn cho link chữ INLINE giữa câu. Bản cũ đặt
 * `min-height:0`. */
.linkish {
  background: none; border: 0; padding: 6px 4px;
  min-height: var(--hk-touch); color: var(--hk-accent-text);
  text-decoration: underline; cursor: pointer; font: inherit; font-weight: 400;
}

/* `min-height` ở trên chỉ ăn với <button>; thẻ <a> là inline nên nó bị BỎ QUA lặng lẽ —
 * đo được 160×39px ở `#ve-ds`. Link đứng RIÊNG một dòng thêm lớp này để đủ 44px.
 * KHÔNG áp cho link inline giữa câu: WCAG 2.5.8 miễn đúng trường hợp đó, và ép `inline-flex`
 * vào một link giữa câu sẽ bẻ gãy dòng chữ quanh nó. */
a.linkish.dung-rieng { display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  button, .ve-site { transition: transform var(--hk-transition), border-color var(--hk-transition); }
  button:active { transform: scale(.98); }
}

/* --- Khối trạng thái: đang tải / lỗi / mách nước ---------------------------- */
.note {
  padding: 12px 14px; border-radius: var(--hk-radius-card);
  background: var(--hk-bg-elev); border-left: 3px solid var(--hk-accent);
  font-size: .94rem;
}
.note.loi { border-left-color: var(--hk-bad); }
.note.loi .thu-lai { margin-top: 10px; }
.note p + .thu-lai { display: inline-flex; }

/* Con quay: có nhánh reduced-motion (tệp token đã hạ mọi animation xuống 0.01ms,
 * nên ở đó chấm này đứng yên — vẫn nhìn ra là "đang tải" nhờ chữ đi kèm). */
.nap { display: inline-flex; align-items: center; gap: 10px; color: var(--hk-text-dim); }
.nap::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--hk-border); border-top-color: var(--hk-accent);
  animation: ar-quay 800ms linear infinite;
}
@keyframes ar-quay { to { transform: rotate(360deg); } }

/* --- Dải phe ---------------------------------------------------------------- */
.pill { padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.pill.male { background: var(--ar-nam-nen); color: var(--ar-nam-muc); }
.pill.female { background: var(--ar-nu-nen); color: var(--ar-nu-muc); }

.count { font-variant-numeric: tabular-nums; color: var(--hk-text-dim); font-size: .9rem; }
.dim { color: var(--hk-text-dim); font-size: .9rem; }
#ban-2d-note { margin-top: 4px; }
.bang-ket-noi { max-width: 1100px; width: calc(100% - 32px); margin: 14px auto 0; }
/* Nối lại được rồi thì khối này biến mất; còn hỏng thì nó là dải ĐỎ, không phải chữ mờ. */
.bang-ket-noi.mat { border-left-color: var(--hk-bad); }
.bang-ket-noi .thu-lai { margin-left: 10px; padding: 6px 12px; }

/* ============================================================================
 * TRANG CHỌN PHE
 * ========================================================================== */
main { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.6rem; margin-bottom: 8px; line-height: 1.25; }
p.lead { color: var(--hk-text-dim); margin-bottom: 20px; }

.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.team {
  border: 1px solid var(--hk-border); border-radius: var(--hk-radius-card);
  padding: 18px; background: var(--hk-bg-elev); box-shadow: var(--hk-shadow-card);
}
.team h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.team .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.team.male .dot { background: var(--ar-nam); }
.team.female .dot { background: var(--ar-nu); }
.team p { font-size: .94rem; color: var(--hk-text-dim); margin: 8px 0 14px; }
.team .pick { margin-top: 12px; width: 100%; }

#status, #loi, #dang-tai { margin-bottom: 20px; }

/* Link đăng nhập đứng RIÊNG một dòng ⇒ control độc lập, phải đủ 44px (đo được 20px
 * lúc để nguyên là link chữ). */
#login { display: inline-flex; align-items: center; min-height: var(--hk-touch); }

/* ============================================================================
 * PHÒNG BÀN CHUNG
 * ========================================================================== */
.wrap {
  display: grid; gap: 18px;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 380px);
  max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px;
}
@media (max-width: 900px) { .wrap { grid-template-columns: 1fr; } }

.panel {
  background: var(--hk-bg-elev); border: 1px solid var(--hk-border);
  border-radius: var(--hk-radius-card); padding: 14px; min-width: 0;
}

.meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; font-size: .94rem; }
#dongho { font-variant-numeric: tabular-nums; font-weight: 700; }

#ban { position: relative; }
#board, #board3d {
  aspect-ratio: 1; border-radius: var(--hk-radius-control); overflow: hidden;
  border: 3px solid var(--hk-border);
}
#board { display: grid; grid-template-columns: repeat(8, 1fr); container-type: inline-size; }
#board3d canvas { display: block; width: 100% !important; height: 100% !important; }

#board div { display: flex; align-items: center; justify-content: center; line-height: 1; font-size: min(8vw, 2.4rem); }
/* Cỡ quân bám theo BỀ NGANG BÀN chứ không theo cửa sổ: ô = 12,5cqi, quân 9,5cqi
 * ⇒ luôn ~76% ô ở mọi bề ngang, và luôn ≥24px (ngưỡng "chữ lớn" của WCAG) khi bàn
 * ≥253px — bàn hẹp nhất đo được ở 380px là 314px. */
@supports (font-size: 1cqi) { #board div { font-size: 9.5cqi; } }

#board .l { background: var(--ar-o-sang); }
#board .d { background: var(--ar-o-toi); }
/* Mỗi quân đeo viền màu NGƯỢC với thân: thân lo ngưỡng 3:1 (chữ lớn / đồ hoạ),
 * viền kéo biên quân lên 6,41:1 trên cả hai màu ô. */
#board .w { color: var(--ar-quan-trang); --ar-vien: var(--ar-vien-trang); }
#board .b { color: var(--ar-quan-den); --ar-vien: var(--ar-vien-den); }
#board .w, #board .b { -webkit-text-stroke: .075em var(--ar-vien); paint-order: stroke fill; }
@supports not (-webkit-text-stroke: 1px #000) {
  #board .w { text-shadow: 1px 1px 0 var(--ar-vien), -1px 1px 0 var(--ar-vien), 1px -1px 0 var(--ar-vien), -1px -1px 0 var(--ar-vien); }
  #board .b { text-shadow: 1px 1px 0 var(--ar-vien), -1px 1px 0 var(--ar-vien), 1px -1px 0 var(--ar-vien), -1px -1px 0 var(--ar-vien); }
}
/* Khung nước cuối: HAI dải ngược sáng-tối, nên dù rơi vào ô nào cũng có một dải
 * đạt ≥3:1 (vàng/ô tối 3,88:1 · mực/ô sáng 5,76:1). */
#board .last { box-shadow: inset 0 0 0 3px var(--hk-accent), inset 0 0 0 5px var(--ar-nuoc-cuoi-2); }

#chat { height: min(46vh, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.msg { font-size: .93rem; overflow-wrap: anywhere; }
.msg .who { font-weight: 600; }
.msg .tag {
  font-size: .78rem; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  background: var(--hk-bg-sunken); color: var(--hk-accent-text); white-space: nowrap;
}
.msg .bo { color: var(--hk-text-dim); }

form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
form button { flex: none; }

.loi-vao { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

/* --- Xem lại ván (M3.2) ------------------------------------------------------ */
/* Hàng nút tua. `flex-wrap` + `gap` chứ không cố ép một hàng: ở 380px × chữ lớn 1,25x thì
 * năm control 44px cộng ô "12/486" KHÔNG vừa một hàng, mà tràn ngang là lỗi nặng hơn
 * xuống hàng. Ô vị trí dùng `tabular-nums` để số không nhảy khi tua. */
.tua {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px;
}
.tua button { padding: 10px 14px; min-width: var(--hk-touch); }
#vi-tri {
  font-variant-numeric: tabular-nums; color: var(--hk-text-dim);
  padding: 0 4px; font-size: .95rem;
}
/* Thanh trượt là control độc lập → phải đủ vùng chạm 44px, không chỉ 4px lõi thanh. */
#thanh {
  width: 100%; margin-top: 10px; min-height: var(--hk-touch);
  accent-color: var(--hk-accent);
}
#nuoc-hien { margin-top: 8px; }

.ds-van { list-style: none; margin-top: 10px; }
.ds-van li { border-top: 1px solid var(--hk-border); padding: 2px 0; }
.ds-van li:last-child { border-bottom: 1px solid var(--hk-border); }
/* Mỗi dòng là một liên kết ĐỘC LẬP đứng riêng → 44px, cùng lý do với `.linkish`. */
.ds-van a {
  display: inline-flex; align-items: center; min-height: var(--hk-touch);
  color: var(--hk-accent-text);
}

#bienban { margin-top: 14px; font-size: .9rem; }
#bienban h2 { font-size: 1rem; margin-bottom: 6px; }
#bienban details { border-top: 1px solid var(--hk-border); padding: 8px 0; }
#bienban summary { cursor: pointer; min-height: var(--hk-touch); display: flex; align-items: center; }
#bienban table { width: 100%; border-collapse: collapse; margin-top: 6px; }
#bienban td { padding: 2px 4px; }
#bienban .mo { color: var(--hk-text-dim); }

/* Bảng đọc thế cờ bằng chữ — người dùng giọng đọc không "nhìn" được lưới ô. */
#doc-the { margin-top: 10px; font-size: .9rem; }
#doc-the summary { min-height: var(--hk-touch); display: flex; align-items: center; cursor: pointer; }
#doc-the p { color: var(--hk-text-dim); }