/* Kỳ phổ — khám phá ván lịch sử qua Danh thủ · Giải đấu · Ván đấu.
 *
 * Mobile-first: mọi thứ dựng cho màn hẹp trước, desktop chỉ là nới rộng. Cố ý KHÔNG dùng
 * <table> cho danh sách ván — bảng buộc cuộn ngang trên điện thoại, mà đây là bề mặt để
 * QUÉT (ai đấu ai, năm nào, giải nào) chứ không phải để so cột.
 *
 * Dùng token của shared/design.css, không tự đặt màu.
 */

.kypho {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-sm) var(--space-lg);
}

/* ---------------------------------------------------------------- đầu trang */

.kypho-head {
  margin-bottom: var(--space-md);
}

.kypho-head h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  line-height: 1.25;
}

.kypho-head .kypho-zh {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 var(--space-xs);
}

.kypho-head .kypho-summary {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.kypho-count {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.kypho-crumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.kypho-crumb a { color: var(--muted); }

/* ---------------------------------------------------------------- hai trục */
/* Hai thẻ neo #danh-thu/#giai-dau ở landing đã được tab thay (2026-08-14). Style giữ lại
   vì `kypho-axis` là khối dẫn hướng dùng chung, không riêng landing. */

.kypho-axes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
  .kypho-axes { grid-template-columns: 1fr 1fr; }
}

.kypho-axis {
  display: block;
  padding: var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}

.kypho-axis strong { display: block; font-size: 1.1rem; margin-bottom: 2px; }
.kypho-axis span { color: var(--muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------- lưới thẻ */

.kypho-section { margin-bottom: var(--space-lg); }

.kypho-section h2 {
  font-size: 1.05rem;
  margin: 0 0 var(--space-xs);
}

.kypho-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

@media (min-width: 560px) { .kypho-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .kypho-grid { grid-template-columns: repeat(4, 1fr); } }

/* Chip nay là <button> (lọc tại chỗ) chứ không còn là <a>. Phải trung hoà style mặc định
   của nút — nếu không, chữ sẽ canh giữa và font tụt về font hệ thống. */
.kypho-chip {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* 44px: ngưỡng vùng chạm tối thiểu — chip nhỏ hơn thì ngón tay bấm trượt. */
  min-height: 44px;
}

.kypho-chip:hover { border-color: var(--primary); }
.kypho-chip b { display: block; font-weight: 600; line-height: 1.3; }
.kypho-chip small { color: var(--muted); }

/* ---------------------------------------------------------------- tab */

.kypho-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  /* Bốn tab không vừa màn hẹp ⇒ cuộn ngang còn hơn xuống dòng. */
  overflow-x: auto;
  /* ⚠ `overflow-x: auto` làm `overflow-y` TỰ thành `auto` (spec: một trục khác `visible`
     thì trục kia không còn `visible` được). Nên bất cứ thứ gì nhô ra ngoài chiều cao —
     kể cả 1px — sẽ đẻ thanh cuộn DỌC. Đã dính: tab có `margin-bottom: -1px` để đè lên
     đường kẻ, cho scrollHeight 44 / clientHeight 43.
     Vạch kẻ nay vẽ bằng `inset box-shadow` nên KHÔNG chiếm layout, và tab bỏ margin âm. */
  box-shadow: inset 0 -1px 0 var(--line);
}

.kypho-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.kypho-tab:hover { color: var(--ink); }

.kypho-tab.is-active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
}

.kypho-tabpanel[hidden] { display: none; }

/* ------------------------------------------------------------ đang xem ai */

.kypho-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

.kypho-picked[hidden] { display: none; }
.kypho-picked-lab { color: var(--muted); font-size: 0.85rem; }
.kypho-picked b { font-size: 1.05rem; }
.kypho-picked small { color: var(--muted); }
.kypho-picked-link { margin-left: auto; white-space: nowrap; }

/* ---------------------------------------------------------------- bộ lọc */

.kypho-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  padding: var(--space-xs);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.kypho-filters label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--muted);
  /* Trên màn hẹp mỗi select chiếm trọn hàng thay vì bị bóp còn 60px. */
  flex: 1 1 140px;
}

.kypho-filters select {
  font: inherit;
  padding: 8px 10px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
}

.kypho-filters .kypho-clear {
  align-self: flex-end;
  flex: 0 0 auto;
  min-height: 44px;
}

/* ---------------------------------------------------------------- ván đấu */

.kypho-games { display: flex; flex-direction: column; gap: var(--space-xs); }

.kypho-game {
  display: block;
  padding: 10px var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}

.kypho-game:hover { border-color: var(--primary); }

.kypho-game-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: 4px;
}

.kypho-year { font-weight: 700; color: var(--primary-dark); font-size: 0.9rem; }

.kypho-tour {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
  /* Tên giải dài (có tên nhà tài trợ) không được đẩy năm ra khỏi hàng. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tên + kết quả + badge trên MỘT hàng. `wrap` để tên rất dài vẫn đẩy badge xuống thay
   vì bóp nát, nhưng ca thường thì cả hàng vừa một dòng. */
.kypho-game-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.kypho-players {
  font-size: 1rem;
  line-height: 1.45;
  /* Chiếm phần còn lại để kết quả bị đẩy sát mép phải. */
  flex: 1 1 auto;
  min-width: 0;
  /* Tên Việt của kỳ thủ dài — cho phép xuống dòng thay vì tràn. */
  overflow-wrap: anywhere;
}

.kypho-vs { color: var(--muted); margin: 0 6px; }

.kypho-result {
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  white-space: nowrap;
}

.kypho-result.is-red { background: var(--danger-soft); color: var(--danger); }
.kypho-result.is-black { background: var(--primary-soft); color: var(--primary-dark); }
.kypho-result.is-draw { background: var(--success-soft); color: var(--success); }

.kypho-badge {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------ panel bộ lọc */
/* Cùng ngôn ngữ với panel của /practice: một dải gom ô tìm + chip + đếm kết quả,
   thay vì để các điều khiển rải rác quanh danh sách. */

.kypho-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.kypho-search {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: inherit;
}

.kypho-count { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

/* `.kypho-filters` tự mang khung panel của riêng nó (trang kỳ thủ/giải dùng trực tiếp,
   không lồng). Nằm TRONG panel thì bỏ khung đi, nếu không thành hộp trong hộp. */
.kypho-panel .kypho-filters {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* Chip bị ô tìm ẩn: `hidden` của HTML thua luật display của lưới nếu không nói rõ. */
.kypho-chip[hidden] { display: none; }

/* ------------------------------------------------------------ cách sắp xếp */

.kypho-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.kypho-sort[hidden] { display: none; }
.kypho-sort-lab { color: var(--muted); font-size: 0.85rem; }

.kypho-sort-btn {
  min-height: 44px;
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.kypho-sort-btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}

/* ---------------------------------------------------------------- trạng thái */

.kypho-more {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 12px;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.kypho-more[disabled] { opacity: 0.6; cursor: default; }

.kypho-empty,
.kypho-error {
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.kypho-error { border-color: var(--danger-soft); color: var(--danger); }

.kypho-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.kypho-skeleton i {
  display: block;
  height: 74px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel) 25%, var(--bg) 37%, var(--panel) 63%);
  background-size: 400% 100%;
  animation: kypho-shimmer 1.2s ease-in-out infinite;
}

@keyframes kypho-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .kypho-skeleton i { animation: none; }
}

/* ---------------------------------------------------------------- ván đấu (P5 seam) */

.kypho-game-meta { display: flex; flex-direction: column; gap: var(--space-xs); }

.kypho-note {
  padding: var(--space-sm);
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
  color: var(--primary-dark);
}

/* ---------------------------------------------------------------- trình xem ván */

.kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* Mobile trước: bàn cờ trên, điều khiển + danh sách nước dưới. Desktop mới hai cột. */
@media (min-width: 820px) {
  .kv { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
}

.kv-board {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* Bàn cờ tướng 9x10 — giữ đúng tỉ lệ để quân không méo khi màn hẹp. */
  aspect-ratio: 9 / 10;
}

.kv-side { min-width: 0; }

.kv-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
}

.kv-controls button {
  flex: 1 1 auto;
  min-height: 44px;          /* vùng chạm */
  min-width: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.kv-controls button:hover { border-color: var(--primary); }

.kv-ply {
  flex: 0 0 auto;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
}

.kv-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-xs);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

@media (min-width: 820px) { .kv-moves { max-height: 420px; } }

.kv-move {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 8px;
  min-height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
}

.kv-move:hover { background: var(--bg); }
.kv-move.is-current { background: var(--primary-soft); border-color: var(--primary); }
.kv-no { color: var(--muted); margin-right: 4px; }
.kv-dot { color: var(--primary); margin-left: 3px; }

.kv-notes { margin-top: var(--space-sm); }

.kv-note {
  padding: var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

/* Nhãn phải nói thẳng đây là dịch máy — PM ruling KP-1. */
.kv-note-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.kv-note-vi { margin: 0 0 var(--space-xs); line-height: 1.6; }
.kv-note summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.kv-note-zh { margin: 6px 0 0; color: var(--ink); line-height: 1.7; }

/* ---------------------------------------------------------------- đối đầu */

.kv-h2h {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.kv-h2h-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kv-h2h-score b { color: var(--primary-dark); }
.kv-h2h-score span { color: var(--muted); font-size: 1rem; font-weight: 400; }

/* Phạm vi thống kê phải nằm ngay cạnh con số. Kho này KHÔNG phải toàn bộ sự nghiệp
   của hai kỳ thủ, nên con số trần sẽ bị đọc thành một tuyên bố lịch sử. */
.kv-h2h-scope {
  flex: 1 1 100%;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

.kv-h2h-legend { display: flex; gap: var(--space-xs); flex-wrap: wrap; font-size: 0.85rem; }
.kv-h2h-legend em { font-style: normal; color: var(--muted); }

/* Khối biên tập — phân biệt với danh sách đầy đủ bằng viền, không bằng màu loè loẹt. */
.kv-featured { border-left: 3px solid var(--primary); }

.kv-featured-why {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Thẻ hồ sơ kỳ thủ — dữ kiện từ 01xq. Nhỏ, không cạnh tranh với danh sách ván. */
.kp-profile { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kp-chip {
  font-size: 12px; padding: 2px 8px; border-radius: 10px;
  background: var(--kp-chip-bg, #f2f2f2); color: var(--kp-chip-fg, #333);
}