/* Inter self-host (Vương Quốc Cờ) — variable, subset latin/latin-ext/vietnamese.
   Fix lỗi font chữ Việt (Ế, Í...) khi weight nặng: font hệ thống fallback
   render lệch dấu. Self-host để không phụ thuộc Google Fonts runtime (CSP
   prod + offline). 3 file phủ mọi weight 400..900. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display + UI fonts for the game shell — VARIABLE fonts (R3.0 fix font Việt).
   Trước đây chỉ load subset "vietnamese" tĩnh (600/700/800, KHÔNG có
   unicode-range, KHÔNG có base latin) → chữ latin rơi về font hệ thống,
   dấu chồng vỡ ("Tàn cuộc" thành "Tàn cuôc"). Nay dùng variable font đủ 3
   subset latin + latin-ext + vietnamese với unicode-range chuẩn (copy nguyên
   văn từ @fontsource-variable). Mỗi family khai 2 tên: 'X Variable' (tên mới)
   và 'X' (alias giữ CSS cũ chạy) — cùng file, stable URL, không phụ thuộc CDN. */

/* ===== Baloo 2 Variable (wght 400-800) ===== */
@font-face {
  font-family: 'Baloo 2 Variable';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Baloo 2 Variable';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2 Variable';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Alias 'Baloo 2' — CSS cũ dùng tên tĩnh vẫn resolve đúng variable font. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/theory-game/baloo-2-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===== Nunito Sans Variable (wght 200-1000) ===== */
@font-face {
  font-family: 'Nunito Sans Variable';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Nunito Sans Variable';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans Variable';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Alias 'Nunito Sans' — CSS cũ dùng tên tĩnh vẫn resolve đúng variable font. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-vietnamese-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/theory-game/nunito-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Production typography contract: Baloo 2 for display hierarchy, Nunito Sans
   for UI/body copy and counters. Both families ship dedicated Vietnamese
   subsets above; icon-font nodes stay outside these overrides. */
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) {
  --ck-game-font-display: 'Baloo 2 Variable', 'Baloo 2', 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', sans-serif;
  --ck-game-font: 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --ck-game-ui-font: 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  font-family: var(--ck-game-font) !important;
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(
  a, button, input, select, textarea, label,
  p, span, strong, b, em, small
):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.material-icons):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--ck-game-font) !important;
  letter-spacing: 0;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(
  h1, h2, h3, h4, h5, h6,
  .ck-study-title,
  .ck-study-section-title,
  .ck-practice-heading,
  .ck-move-tree-title,
  .ckintro-title,
  .ckdone-title,
  .ckfx-settings-title
),
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(
  h1, h2, h3, h4, h5, h6,
  .ck-study-title,
  .ck-study-section-title,
  .ck-practice-heading,
  .ck-move-tree-title,
  .ckintro-title,
  .ckdone-title,
  .ckfx-settings-title
) :where(span, strong, b, em, small) {
  font-family: var(--ck-game-font-display) !important;
  font-weight: 800;
  line-height: 1.25 !important;
  letter-spacing: 0;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(h1, h2, h3, h4, h5, h6, .ck-study-title, .ck-study-section-title, .ck-practice-heading) {
  margin-block: 0;
  padding-block: 0.04em;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(
  button,
  input,
  select,
  textarea,
  .ck-study-control-btn,
  .ck-study-item-btn,
  .ck-toc-toggle,
  .ck-movetree-toggle
) {
  font-family: var(--ck-game-ui-font) !important;
  line-height: 1.25 !important;
  letter-spacing: 0;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"]
) :where(.ck-study-control-btn, .ck-study-item-btn, .ck-toc-toggle, .ck-movetree-toggle) {
  box-sizing: border-box;
  min-height: 2.75rem;
  align-items: center;
  padding-block: 0.12em;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) :where(
  p,
  .ck-study-item-desc,
  .ck-study-intro-content,
  .ck-move-intro,
  .ck-move-note-inline,
  .ck-practice-question,
  .ck-practice-notice,
  .ckintro-copy
) {
  line-height: 1.45 !important;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"]
) :where(.ck-study-item-title, .ck-toc-label, .ck-study-item-desc, small) {
  line-height: 1.35 !important;
  overflow-wrap: break-word;
  word-break: normal;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"]
) :where(
  .ck-study-item-badge,
  .ck-toc-count,
  .ck-practice-turn,
  .ck-move-seq,
  .ck-study-games,
  [data-study-role="game-position"],
  [data-study-role="game-count"]
) {
  font-family: var(--ck-game-ui-font) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.25 !important;
  white-space: nowrap;
}

/* The pre-exercise intro is appended dynamically and still carries older
   font declarations. Keep its text on the same role-based family contract. */
.ckintro {
  --ck-game-font-display: 'Baloo 2 Variable', 'Baloo 2', 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', sans-serif;
  --ck-game-font: 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --ck-game-ui-font: 'Nunito Sans Variable', 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  font-family: var(--ck-game-font) !important;
  letter-spacing: 0;
}

.ckintro :where(
  button, a, input, select, textarea, label,
  p, span, strong, b, em, small
):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.material-icons):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--ck-game-font) !important;
  letter-spacing: 0;
}

.ckintro :where(h1, h2, h3, h4, h5, h6, .ckintro-title),
.ckintro :where(h1, h2, h3, h4, h5, h6, .ckintro-title) :where(span, strong, b, em, small) {
  font-family: var(--ck-game-font-display) !important;
  font-weight: 800;
  line-height: 1.25 !important;
  letter-spacing: 0;
}
/* Replace browser-gray scroll chrome on every live game panel. */
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
),
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) * {
  scrollbar-color: #f5c84c #0a4d89;
  scrollbar-width: thin;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
)::-webkit-scrollbar,
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) *::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
)::-webkit-scrollbar-track,
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) *::-webkit-scrollbar-track {
  border: 2px solid #8d5a13;
  border-radius: 999px;
  background: #0a4d89;
}

:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
)::-webkit-scrollbar-thumb,
:where(
  .ck-theories-viewer-shell.is-royal,
  .ck-theory-learn,
  .ck-practice-learn,
  body.tg-game-island-board [data-study-app="theory-study"],
  .ckdone-overlay,
  .ckintro-overlay,
  .ckfx-settings-modal
) *::-webkit-scrollbar-thumb {
  border: 2px solid #8d5a13;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3a6, #f5c84c 56%, #d98b15);
}

@media (pointer: coarse), (max-width: 768px) {
  :where(
    .ck-theories-viewer-shell.is-royal,
    .ck-theory-learn,
    .ck-practice-learn,
    body.tg-game-island-board [data-study-app="theory-study"],
    .ckdone-overlay,
    .ckintro-overlay,
    .ckfx-settings-modal
  ),
  :where(
    .ck-theories-viewer-shell.is-royal,
    .ck-theory-learn,
    .ck-practice-learn,
    body.tg-game-island-board [data-study-app="theory-study"],
    .ckdone-overlay,
    .ckintro-overlay,
    .ckfx-settings-modal
  ) * {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :where(
    .ck-theories-viewer-shell.is-royal,
    .ck-theory-learn,
    .ck-practice-learn,
    body.tg-game-island-board [data-study-app="theory-study"],
    .ckdone-overlay,
    .ckintro-overlay,
    .ckfx-settings-modal
  )::-webkit-scrollbar,
  :where(
    .ck-theories-viewer-shell.is-royal,
    .ck-theory-learn,
    .ck-practice-learn,
    body.tg-game-island-board [data-study-app="theory-study"],
    .ckdone-overlay,
    .ckintro-overlay,
    .ckfx-settings-modal
  ) *::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}