/* One typography owner for Thai reading, Roman and translation below game words.
   Values are the computed Word Order tile styles; game CSS still owns spacing and visibility. */
:root {
  --gsh-underword-reading: #993c1d;
  --gsh-underword-roman: #8b6310;
  --gsh-underword-translation: #6b6b6b;
}

body[data-gsh-game] :is(
  .wo-v2-reading, .wo-v2-answer-reading,
  .tf-read-th, .tone-answer-reading-th,
  .rev-pron, .reading-answer-thai
) {
  color: var(--gsh-underword-reading);
  font: 600 12px/1.5 "Sarabun", "Noto Sans Thai", sans-serif;
  overflow: visible;
  overflow-wrap: anywhere;
}

body[data-gsh-game] :is(
  .wo-v2-roman, .wo-v2-answer-roman,
  .tf-read-en, .tone-answer-reading-roman,
  .rev-en, .reading-roman
) {
  color: var(--gsh-underword-roman);
  font: 600 11px/1.5 "Noto Sans TC", sans-serif;
  letter-spacing: .2px;
  overflow-wrap: anywhere;
}

body[data-gsh-game] :is(
  .wo-v2-literal, .wo-v2-answer-chinese,
  .word-zh
) {
  color: var(--gsh-underword-translation);
  font: 600 11.5px/1.5 "Noto Sans TC", sans-serif;
  overflow-wrap: anywhere;
}

/* Keep the existing game-owned font toggle, using the same Thai fallback path. */
body.tf-modern-font[data-gsh-game="tone"] :is(.tf-read-th, .tone-answer-reading-th),
body.rg-modern-font[data-gsh-game="typing"] .rev-pron,
body.rg-modern-font[data-gsh-game="reading"] .reading-answer-thai,
body[data-gsh-game="word-order"] .is-modern :is(.wo-v2-reading, .wo-v2-answer-reading) {
  font-family: "Noto Sans Thai", "Sarabun", sans-serif;
}