body[data-gsh-game="tone"] {
  --tf-paper: var(--gsh-paper);
  --tf-muted: var(--gsh-muted);
  --tf-gold: var(--gsh-gold);
  --tf-gold-dark: var(--gsh-gold-dark);
  --tf-gold-light: var(--gsh-gold-light);
  --tf-cream: var(--gsh-cream);
  --tf-orange: var(--gsh-orange);
  --tf-red: var(--gsh-red);
  --tf-green: var(--gsh-green);
  --tf-question-rhythm: 14px;
}

#rg-profile-wrap {
  min-height: 57px;
  padding: 11px 14px;
  gap: 9px;
  border: 2px solid var(--tf-gold);
  border-radius: 26px;
  box-shadow: 0 4px 14px rgba(139, 99, 16, .1);
}
#rg-login-slot { display: flex; align-items: center; }
.mrt-login-button {
  min-height: 30.5px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--tf-gold-dark), var(--tf-gold));
  box-shadow: 0 2px 8px rgba(139, 99, 16, .28);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: default;
}
.tf-streak-chip.mrt-login-howto {
  min-height: 31px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(200, 151, 58, .48);
  border-radius: 999px;
  color: #7a5510;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 700;
  line-height: 13.8px;
  cursor: pointer;
}

.screen { width: 100%; }
.tf-body { padding: 20px; }
.launch-card .tf-body, .resume-card .tf-body { text-align: center; }
.tf-free-banner {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bcd5a7;
  border-radius: 999px;
  color: #4f7838;
  background: #f0f7e9;
  font-size: 12px;
}
.tf-step-badge {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--tf-gold-dark);
  background: #f8edd5;
  font-size: 11px;
  font-weight: 900;
}
.tf-step-badge.centered { margin-inline: auto; }
.launch-title, .resume-card h2 {
  margin: 0;
  color: #4b3716;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 24px;
}
.launch-copy, .resume-copy {
  max-width: 470px;
  margin: 10px auto;
  color: var(--tf-muted);
  font-size: 14px;
  line-height: 1.65;
}
.launch-count {
  margin: 10px 0 16px;
  color: var(--tf-gold-dark);
  font-size: 13px;
  font-weight: 800;
}
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.preview-note {
  margin: 12px 0 0;
  color: #978b79;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}
.resume-progress {
  max-width: 440px;
  margin: 16px auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tf-cream);
}
.resume-progress-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }

.back-button {
  min-height: 30px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  color: var(--tf-gold-dark);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.progress-track {
  height: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #e9dfcf;
}
.progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tf-orange), var(--tf-red));
  transition: width .2s ease;
}
.progress-0 { width: 0; }
.progress-1 { width: 20%; }
.progress-2 { width: 40%; }
.progress-3 { width: 60%; }
.progress-4 { width: 80%; }
.progress-5 { width: 100%; }
.resume-track { margin: 9px 0 0; }

.game-card { min-height: 0; padding-bottom: 0; font-family: "Noto Serif TC", serif; }
.game-card > .gsh-item-score { width: 100%; margin: 0; padding: 14px 20px 12px; }
.tf-word-banner {
  padding: 16px 22px 10px;
  text-align: center;
  background: linear-gradient(180deg, #efddb4 0%, #f8f0de 100%);
}
.tf-banner-word {
  margin: 0;
  color: #3a2a0a;
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.6;
  padding-block: .08em;
  overflow-wrap: anywhere;
}
.word-zh { margin: 8px 0 0; }
.tf-question-rows { display: grid; justify-items: center; gap: 8px; }
.tf-question-rows > * { margin: 0; }
.tf-guide-note {
  display: inline-block;
  margin: 8px auto 0;
  padding: 5px 10px;
  border: 1px solid rgba(184, 134, 40, .45);
  border-radius: 8px;
  color: #92400e;
  background: rgba(200, 151, 58, .16);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
}
body.tf-modern-font .thai-word, body.tf-modern-font .thai-reading,
body.tf-modern-font .tf-banner-word, body.tf-modern-font .tf-read-th,
body.tf-modern-font .syl-th, body.tf-modern-font .tone-completion-word {
  font-family: "Noto Sans Thai", "Sarabun", sans-serif !important;
}
[data-local-preference-message][hidden] { display: none !important; }
[data-local-preference-message] { max-width: calc(100vw - 40px); }
body.games-hide-zh .tf-question-rows > .word-zh:not(.zh-shown),
.tf-question-rows > .word-zh.zh-hidden-solo { display: none; }
.tone-completion-meaning { display: block !important; }
.word-controls {
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0 22px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid rgba(184, 134, 40, .5);
  background: #f8f0de;
}
.word-ctl-btn, .vault-save-btn, .zh-fab-inline {
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(139, 99, 16, .3);
  border-radius: 50%;
  color: #000;
  background: #fff;
  font: 17px/17px Arial, sans-serif;
}
.word-ctl-btn { cursor: pointer; }
.word-controls [hidden] { display: none !important; }
.zh-fab-inline { color: var(--tf-gold); box-shadow: none; }
.vault-save-btn { font-size: 18px; line-height: 18px; }
#zh-toggle-slot, #font-toggle-slot, #tf-vault-btn-slot {
  width: 40px;
  height: 40px;
  display: inline-flex;
}
#tf-pron-toggle { order: 2; }
#tf-en-toggle { order: 3; }
#zh-toggle-slot { order: 4; }
#font-toggle-slot { order: 5; }
#tf-guide-toggle { order: 6; }
#tf-particle-toggle { order: 7; }
#tf-vault-btn-slot { order: 8; }
.syl-strip[hidden] { display: none !important; }

.syl-strip {
  min-height: 0;
  margin: var(--tf-question-rhythm) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
.syl-chip {
  min-width: 46px;
  padding: 5px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 2px solid #e3d4b0;
  border-radius: 12px;
  color: #8a7a55;
  background: #fffdf7;
}
.syl-chip.cur {
  border-color: var(--tf-orange);
  color: #4a3514;
  background: #fff3d8;
}
.syl-chip.done {
  border-color: #9ccc65;
  color: #3b6d11;
  background: #eef7e3;
}
.syl-th { font-family: "Sarabun", "Noto Sans Thai", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.45; }
.syl-n { color: #bbb; font-size: 10px; line-height: 1.2; }

.play-body {
  min-height: 1.6em;
  padding: 20px 22px 18px;
  display: block;
}
.sg-question {
  margin: 0 0 18px;
  color: #5a3e0a;
  font-family: "Noto Serif TC", serif;
  font-size: 17px;
  letter-spacing: 1px;
  text-align: center;
}
.tf-qtext {
  margin: 0 0 18px;
  color: #5a3e0a;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.sg-guess-wrap {
  padding: 0;
  display: grid;
  justify-items: center;
  row-gap: var(--tf-question-rhythm);
  text-align: center;
}
.sg-guess-wrap .sg-question { margin: 0; }
.sg-divider { display: none; }
.sg-tone-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.sg-tone-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2.5px solid;
  border-radius: 50%;
  background: #fff;
  font-family: "Noto Serif TC", serif;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  cursor: pointer;
}
.sg-keyboard-hint { margin: 0; color: #a08a5a; font-size: 11px; line-height: 1.6; }
.tone-1 { color: #6cb8ff; border-color: #6cb8ff; }
.tone-2 { color: #7ec87e; border-color: #7ec87e; }
.tone-3 { color: #ff7c7c; border-color: #ff7c7c; }
.tone-4 { color: #ffb347; border-color: #ffb347; }
.tone-5 { color: #c39bff; border-color: #c39bff; }
.tf-qbox {
  margin: 0;
  padding: 16px 20px;
  border-left: 4px solid var(--tf-gold);
  border-top: 1px solid rgba(139, 99, 16, .15);
  border-right: 1px solid rgba(139, 99, 16, .15);
  border-bottom: 1px solid rgba(139, 99, 16, .15);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbf5e7 0%, #fff 100%);
}
.tf-qbox .tf-qtext { margin: 0; text-align: left; }
.tf-options { display: flex; flex-direction: column; gap: var(--tf-question-rhythm); margin: 0; }
.tf-opt-wrap { display: flex; align-items: stretch; gap: 8px; }
.tf-opt {
  flex: 1;
  min-height: 0;
  padding: 13px 18px;
  border: 1.5px solid rgba(139, 99, 16, .25);
  border-radius: 10px;
  color: #5a3e0a;
  background: #fff;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.tf-tip-btn {
  align-self: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid rgba(139, 99, 16, .30);
  border-radius: 50%;
  color: #8b6310;
  background: rgba(139, 99, 16, .10);
  font: 800 16px/1 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.tf-tip-btn:hover { background: rgba(139, 99, 16, .18); }
.tone-peek-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(33, 27, 18, .48);
}
.tone-peek-dialog {
  width: min(100%, 420px);
  max-height: min(78dvh, 640px);
  overflow: auto;
  border: 1px solid rgba(139, 99, 16, .24);
  border-radius: 20px;
  color: #3f300f;
  background: #fffdf8;
  box-shadow: 0 18px 48px rgba(58, 42, 12, .22);
}
.tone-peek-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  background: #fffdf8;
}
.tone-peek-header h2 { margin: 0; color: #000; font-size: 20px; }
.tone-peek-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  color: #8b6310;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.tone-peek-content { display: grid; gap: 12px; padding: 0 18px 18px; }
.tone-peek-entry {
  padding: 14px;
  border: 1px solid rgba(139, 99, 16, .18);
  border-radius: 12px;
  background: #fbf5e7;
}
.tone-peek-entry h3 { margin: 0 0 8px; color: #8b6310; font-size: 17px; }
.tone-peek-entry p { margin: 0; line-height: 1.65; }
.tone-peek-characters { font-family: "Noto Sans Thai", "Sarabun", sans-serif; font-size: 17px; }
.tone-peek-description { white-space: pre-line; }
.derivation-feedback {
  margin: 0;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-radius: 9px;
  font-size: 11px;
}
.tf-opt.tf-opt-hint {
  border-color: #c8973a !important;
  background: rgba(200, 151, 58, .20) !important;
  box-shadow: 0 0 0 3px rgba(200, 151, 58, .28);
}
.derivation-feedback-copy { display: flex; flex-direction: column; gap: 3px; }
.derivation-feedback.incorrect { color: #9a432b; background: #fff0e8; }
.feedback-card {
  padding: 12px;
  border-radius: 12px;
  text-align: center;
}
.feedback-card.correct { color: #47763b; background: #edf6e9; }
.feedback-card.reveal { color: #9a432b; background: #fff0e8; }
.feedback-icon { display: block; font-size: 24px; }
.feedback-card strong { display: block; }
.feedback-card p { margin: 4px 0 0; font-size: 11px; }
.advance-button { align-self: center; margin-top: 9px; }
.tone-completion-layer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(28, 20, 8, .58);
  backdrop-filter: blur(3px);
}
.tone-completion-popup {
  width: min(440px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(139, 99, 16, .28);
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 18px 60px rgba(28, 20, 8, .28);
  text-align: center;
}
.tone-completion-word {
  margin: 0;
  color: #3a2a0a;
  font: 800 38px/1.5 "Sarabun", "Noto Sans Thai", sans-serif;
}
.tone-completion-popup h2 {
  margin: 14px 0 12px;
  color: #6b4a0e;
  font-size: 20px;
  line-height: 1.5;
}
.tone-completion-status,
.tone-completion-score { color: inherit; font-size: inherit; font-weight: 900; }
.tone-completion-meta { margin: 5px 0; color: #74654e; font-size: 13px; }
.tone-first-choice { color: #887a66; }
.tone-correct-answer {
  margin: 12px auto 4px;
  padding: 10px 14px;
  border: 1px solid rgba(71, 118, 59, .24);
  border-radius: 12px;
  color: #47763b;
  background: #edf6e9;
  font-size: 20px;
  font-weight: 900;
}
.tone-answer-line { margin: 0; }
.tone-answer-reading { margin: 7px 0 0; }
.tone-answer-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
}
.tone-answer-tool {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(139, 99, 16, .32);
  border-radius: 999px;
  color: #8b6310;
  background: #fffdf8;
  font: 800 12px/1.4 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.tone-answer-tool[aria-pressed="true"] { color: #6b4a0e; background: #f6ead0; }
.tone-answer-tool:disabled { cursor: not-allowed; opacity: .5; }
.tone-correct-answer strong { color: inherit; font-size: inherit; font-weight: inherit; }
.tone-completion-actions, .tone-login-prompt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.tone-completion-actions .gsh-button { font-size: 16px; line-height: 1.5; font-weight: 800; }
.tone-save-word { border-color: #c8973a; color: #8b6310; background: #fff; font-weight: 800; }
.tone-completion-actions .advance-button { margin-top: 0; }
.tone-login-prompt { margin-top: 16px; padding: 14px; border-radius: 12px; background: #fff3d8; }
.tone-login-prompt p { margin: 0; color: #6b4a0e; font-weight: 800; }
.tone-syllable-complete { display:grid; justify-items:center; gap:10px; padding:12px 0; color:#6b4a0e; text-align:center; }
.tone-syllable-complete p { margin:0; font-weight:700; }
body[data-gsh-game="tone"] .sa-leaderboard-link,
body[data-gsh-game="tone"] .sa-account-streak,
body[data-gsh-game="tone"] .sa-badge-pin { display: none !important; }
.tone-result-game-card { padding: 0; }
.game-controls {
  padding: 8px 14px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sg-dontknow-btn {
  width: 100%;
  max-width: 280px;
  min-height: 0;
  margin: 0 auto;
  padding: 11px 20px;
  border: 1.5px dashed rgba(0, 0, 0, .18);
  border-radius: 10px;
  color: #888;
  background: rgba(0, 0, 0, .02);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

body[data-gsh-game="tone"] .gsh-level-selector {
  width: 100%;
  max-width: 640px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sg-dontknow-short { display: none; }
.tf-known-bar { margin-top: 18px; text-align: center; }
.tf-known-btn {
  padding: 9px 22px;
  border: 1.5px solid rgba(110, 170, 110, .5);
  border-radius: 22px;
  color: #3f7a3f;
  background: rgba(126, 200, 126, .12);
  font-family: "Noto Sans TC", "Sarabun", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.play-body:has(.sg-guess-wrap) { padding-top: var(--tf-question-rhythm); padding-bottom: 0; }
.play-body:has(.sg-guess-wrap) + .tf-known-bar {
  margin-top: var(--tf-question-rhythm);
  padding-bottom: var(--tf-question-rhythm);
}
.play-body:has(.tone-syllable-complete) {
  padding-top: var(--tf-question-rhythm);
  padding-bottom: 0;
}
.play-body:has(.tone-syllable-complete) + .tf-known-bar {
  margin-top: var(--tf-question-rhythm);
  padding-bottom: var(--tf-question-rhythm);
}
.play-body:has(.tf-qbox) {
  padding-top: var(--tf-question-rhythm);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tf-question-rhythm);
}
.play-body:has(.tf-qbox) > .tf-step-badge { margin: 0 auto; }
.play-body:has(.tf-qbox) + .tf-known-bar {
  margin-top: var(--tf-question-rhythm);
  padding-bottom: var(--tf-question-rhythm);
}
.help-intro { margin: 12px 0 8px; color: #444; font-size: 14px; line-height: 1.7; }
.help-list { margin: 0 0 12px; padding-left: 20px; color: #444; font-size: 14px; line-height: 1.7; }
.help-list li + li { margin-top: 2px; }
.help-score-box { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; color: #555; background: #f9f5ee; font-size: 13px; line-height: 1.9; }
.help-score-box ul { margin: 0; padding-left: 18px; }
.help-login-copy { margin: 0 0 16px; color: #444; font-size: 14px; line-height: 1.7; }
.help-details { margin: 4px 0; }
.help-details summary {
  width: 100%;
  padding: 9px 0;
  border: 1px solid var(--tf-gold);
  border-radius: 8px;
  color: var(--tf-gold-dark);
  background: var(--tf-gold-light);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.help-details summary::-webkit-details-marker { display: none; }
.help-detail-body { margin-top: 10px; padding-top: 14px; border-top: 1px dashed rgba(139,99,16,.25); color: #333; font-size: 14.5px; line-height: 1.9; }
.help-detail-body h3 { margin: 14px 0 4px; color: var(--tf-gold-dark); font-size: 14.5px; }
.help-detail-body h3:first-child { margin-top: 0; }
.help-detail-body p { margin: 0 0 10px; }
.help-note { padding: 10px 14px; border-radius: 8px; color: var(--tf-gold-dark); background: rgba(139,99,16,.07); font-size: 13px; line-height: 1.55; }
@media (hover: hover) {
  .tf-opt:hover, .sg-dontknow-btn:hover, .back-button:hover {
    border-color: var(--tf-gold);
    filter: brightness(.98);
  }
  .tf-known-btn:hover { background: rgba(126, 200, 126, .22); }
  .sg-tone-btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .sg-tone-btn { transition: none; }
}

@media (max-width: 768px) and (orientation: portrait) {
  body[data-gsh-game="tone"] { --tf-question-rhythm: 11px; }
  .game-card { min-height: 0; padding-bottom: 0; border-radius: 15px; }
  .tf-word-banner { padding: 10px 10px 6px; }
  .tf-banner-word { font-size: 34px; line-height: 1.35; }
  .word-controls { gap: 5px; padding: 0 8px 8px; }
  .tf-body { padding: 12px 10px; }
  .sg-question { margin: 0; font-size: 15px; }
  .sg-tone-grid { gap: 7px; margin: 0; flex-wrap: nowrap; }
  .sg-tone-btn { width: clamp(44px, 12vw, 52px); height: clamp(44px, 12vw, 52px); flex: 0 1 52px; border-width: 2px; font-size: 19px; }
  .sg-keyboard-hint { display: none; }
  .sg-dontknow-btn { min-height: 40px; max-width: 230px; padding: 8px 14px; font-size: 12px; }
  .play-body { min-height: 1.6em; padding: 12px 10px; }
  .game-controls { position: relative; }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 520px) {
  body[data-gsh-game="tone"] .gsh-level-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .play-body:has(.sg-guess-wrap),
  .play-body:has(.tone-syllable-complete) { padding: 0; }
  .play-body:has(.sg-guess-wrap) + .tf-known-bar,
  .play-body:has(.tone-syllable-complete) + .tf-known-bar { margin: 0 auto 42px; padding-bottom: 0; }
  .tf-known-bar {
    grid-column: 2;
    grid-row: 3;
    z-index: 4;
    width: min(100%, 190px);
    margin: 0 auto 42px;
    align-self: end;
    pointer-events: none;
  }
  .tf-known-btn {
    min-height: 32px;
    padding: 4px 16px;
    pointer-events: auto;
  }
  .sg-dontknow-wide { display: none; }
  .sg-dontknow-short { display: inline; }
  .game-screen { position: relative; }
  .game-card {
    height: calc(100dvh - clamp(52px, 14dvh, 66px));
    min-height: 0;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(4px, 1.3dvh, 10px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  .game-card.tone-result-game-card {
    width: min(100%, 760px);
    height: calc(100dvh - clamp(52px, 14dvh, 66px));
    margin: 0 auto;
    padding: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1.5px solid rgba(139,99,16,.15);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(90,62,10,.1);
  }
  .tf-word-banner {
    grid-column: 2;
    grid-row: 1 / 4;
    min-width: 0;
    min-height: 0;
    padding: 12px 10px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(139,99,16,.15);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(90,62,10,.1);
  }
  .tf-banner-word { font-size: clamp(30px, 9dvh, 42px); }
  .word-zh { font-size: clamp(11px, 3dvh, 14px); }
  .word-controls {
    position: absolute;
    z-index: 2;
    left: calc(30% + clamp(4px, 1.3dvh, 10px));
    bottom: 7px;
    width: calc(40% - (2 * clamp(4px, 1.3dvh, 10px)));
    height: auto;
    min-height: 30px;
    padding: 3px 5px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 250, 237, .86);
  }
  .word-ctl-btn, .vault-save-btn, .zh-fab-inline { min-width: 28px; min-height: 28px; width:28px; height:28px; font-size: 10px; }
  #zh-toggle-slot, #font-toggle-slot, #tf-vault-btn-slot { width:28px; height:28px; }
  .syl-strip {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    min-height: 44px;
    margin: 6px 0 8px;
    padding: 5px 8px 2px;
  }
  .syl-chip { min-width: 42px; padding: 2px 6px; }
  .syl-th { font-size: 14px; }
  .play-body {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    z-index: 3;
    min-height: 0;
    padding: 0;
    pointer-events: none;
  }
  .sg-guess-wrap { display: contents; }
  .sg-divider, .sg-question { display: none; }
  .sg-keyboard-hint { display: none; }
  .sg-tone-grid {
    position: absolute;
    inset: 0;
    margin: 0;
    padding-block: clamp(6px, 1.7dvh, 12px);
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
    grid-template-rows: repeat(3, clamp(64px, 22.5dvh, 88px));
    align-content: center;
    justify-items: center;
    column-gap: clamp(4px, 1.3dvh, 10px);
    row-gap: clamp(8px, 2dvh, 12px);
    pointer-events: none;
  }
  .sg-tone-btn {
    width: clamp(64px, 22.5dvh, 88px);
    height: clamp(64px, 22.5dvh, 88px);
    font-size: clamp(24px, 7dvh, 32px);
    pointer-events: auto;
  }
  .sg-tone-btn:nth-child(1) { grid-column: 1; grid-row: 1; }
  .sg-tone-btn:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sg-tone-btn:nth-child(3) { grid-column: 1; grid-row: 3; }
  .sg-tone-btn:nth-child(4) { grid-column: 3; grid-row: 1; }
  .sg-tone-btn:nth-child(5) { grid-column: 3; grid-row: 2; }
  .sg-guess-wrap .sg-dontknow-btn {
    position: absolute;
    right: calc((30% - clamp(64px, 22.5dvh, 88px)) / 2);
    bottom: clamp(6px, 1.7dvh, 12px);
    width: clamp(64px, 22.5dvh, 88px);
    height: clamp(64px, 22.5dvh, 88px);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(139,99,16,.5);
    border-radius: 50%;
    color: var(--tf-gold-dark);
    background: #fff;
    font-size: clamp(9px, 2.7dvh, 12px);
    line-height: 1.15;
    pointer-events: auto;
  }
  .play-body:has(.tf-qbox) {
    display: grid;
    grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(4px, 1.3dvh, 10px);
    overflow: hidden;
    justify-content: stretch;
    pointer-events: none;
  }
  .play-body:has(.tf-qbox) > .derivation-feedback,
  .play-body:has(.tf-qbox) > .tf-step-badge,
  .play-body:has(.tf-qbox) > .tf-qbox { grid-column: 1; pointer-events: auto; }
  .play-body:has(.tf-qbox) > .derivation-feedback { grid-row: 1; }
  .play-body:has(.tf-qbox) > .tf-step-badge { grid-row: 2; }
  .play-body:has(.tf-qbox) > .tf-qbox { grid-row: 3; align-self: start; }
  .play-body:has(.tf-qbox) > .tf-options {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
    pointer-events: auto;
  }
  .play-body:has(.feedback-card) {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: clamp(5px, 1.3dvh, 9px) clamp(8px, 1.5vw, 14px);
    overflow-y: auto;
    justify-content: center;
    pointer-events: auto;
  }
  .play-body:has(.tf-qbox) .tf-step-badge { margin-inline: auto; }
  .sg-question, .tf-qtext { margin-bottom: 6px; font-size: 14px; }
  .tf-step-badge { margin-bottom: 4px; padding-block: 2px; }
  .tf-qbox { margin-bottom: 5px; padding: 5px 8px; }
  .tf-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 0; }
  .tf-opt { min-height: 32px; padding: 4px 8px; font-size: 11px; }
  .derivation-feedback { margin-bottom: 4px; padding: 3px 7px; }
  .feedback-card { padding: 5px; }
  .feedback-icon { display: inline; margin-right: 4px; font-size: 17px; }
  .feedback-card strong { display: inline; font-size: 13px; }
  .feedback-card p { margin-top: 1px; }
  .advance-button { min-height: 32px; margin-top: 4px; padding: 4px 13px; }
  .game-controls { display: none; }
  .launch-card, .resume-card, .panel { max-width: 600px; margin: 5px auto 0; }
  .preview-note { display: none; }
  .launch-card .tf-body, .resume-card .tf-body, .panel { padding: 13px 18px; }
  .launch-copy, .resume-copy { margin-block: 5px; line-height: 1.45; }
  .launch-count { margin: 5px 0 8px; }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 240px) {
  .game-card { height: 320px; min-height: 320px; }
  .game-card.tone-result-game-card { height: 320px; min-height: 320px; }
  .word-controls {
    z-index: 5;
    right: 4px;
    left: 4px;
    width: auto;
    gap: 6px;
  }
}

/* Current Tone alphabet/manual surface, kept inside the Human-review document. */
.tf-alpha-overlay { position:fixed; inset:0; z-index:4100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(45,32,12,.62); }
.tf-alpha-dialog { --tf-alpha-font-scale:.85; display:flex; flex-direction:column; width:min(748px,100%); height:min(612px,calc(100vh - 40px)); font-size:85%; overflow:hidden; background:#fffefb; border:1px solid rgba(139,99,16,.28); border-radius:22px; box-shadow:0 24px 70px rgba(45,32,12,.28); }
body:not(.tf-modern-font) .tf-alpha-dialog, body:not(.tf-modern-font) .tf-alpha-dialog * { font-family:'Sarabun','Noto Sans TC',sans-serif !important; }
body.tf-modern-font .tf-alpha-dialog, body.tf-modern-font .tf-alpha-dialog * { font-family:'Noto Sans Thai','Noto Sans TC',sans-serif !important; }
.tf-alpha-overlay-head { display:grid; grid-template-columns:54px 1fr 54px; align-items:center; min-height:74px; padding:10px 22px; border-bottom:1px solid rgba(139,99,16,.18); background:#fffefb; }
.tf-alpha-overlay-title { margin:0; color:#7a5208; font-family:'Noto Serif TC',serif; font-size:calc(25px * var(--tf-alpha-font-scale)); font-weight:900; letter-spacing:1px; text-align:center; }
.tf-alpha-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(139,99,16,.28); border-radius:13px; background:#fffdf8; color:#5a3e0a; font-size:calc(26px * var(--tf-alpha-font-scale)); line-height:1; cursor:pointer; }
.tf-alpha-icon-btn:hover { background:#f7ebd1; }
.tf-alpha-back[hidden] { visibility:hidden; display:inline-flex !important; }
.tf-alpha-overlay-body { flex:1; overflow:auto; padding:20px; overscroll-behavior:contain; }
.tf-alpha-menu { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:900px; margin:0 auto; }
.tf-alpha-menu-card { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; min-height:136px; padding:20px; border:1px solid rgba(139,99,16,.28); border-radius:17px; background:linear-gradient(180deg,#fff,#fffbf3); color:#5a3e0a; text-align:left; box-shadow:0 8px 24px rgba(90,62,10,.06); cursor:pointer; }
.tf-alpha-menu > .tf-alpha-menu-card:first-child { grid-column:1 / -1; min-height:153px; border-color:#c8973a; border-left:7px solid #a97818; background:linear-gradient(135deg,#fffdf8,#faedcf); }
.tf-alpha-menu-card strong { font-family:'Noto Serif TC',serif; font-size:calc(25px * var(--tf-alpha-font-scale)); font-weight:900; }
.tf-alpha-menu-card span { color:#806d4e; font-size:calc(15px * var(--tf-alpha-font-scale)); font-weight:700; line-height:1.6; }
.tf-alpha-menu-card:hover { border-color:#b6811e; transform:translateY(-1px); }
.tf-alpha-tabs { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 22px; }
.tf-alpha-tab { padding:10px 16px; border:1px solid rgba(139,99,16,.32); border-radius:999px; background:#fffdf8; color:#74500d; font-weight:900; cursor:pointer; }
.tf-alpha-tab.is-active { background:#8b6310; color:#fff; border-color:#8b6310; }
.tf-alpha-section-title { margin:24px 0 12px; color:#815709; font-family:'Noto Serif TC',serif; font-size:calc(19px * var(--tf-alpha-font-scale)); font-weight:900; }
.tf-alpha-note { margin:16px 0; padding:13px 15px; border-radius:10px; background:#fbf4e7; color:#725d39; line-height:1.75; }
.tf-alpha-tile-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.tf-alpha-tile { position:relative; display:flex; min-height:112px; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:12px 7px; border:1px solid rgba(139,99,16,.25); border-radius:13px; background:#fff9ec; color:#493719; cursor:pointer; }
.tf-alpha-tile:hover { background:#f5e6c7; border-color:#c8973a; }
.tf-alpha-tile-th { font-family:'Noto Sans Thai',sans-serif; font-size:calc(35px * var(--tf-alpha-font-scale)); font-weight:800; }
.tf-alpha-tile-read { color:#806d4e; font-size:calc(12px * var(--tf-alpha-font-scale)); }
.tf-alpha-ending-list { display:grid; grid-template-columns:1fr; gap:10px; }
.tf-alpha-ending-btn { display:grid; grid-template-columns:105px 1fr; align-items:center; gap:15px; width:100%; min-height:70px; padding:13px 18px; border:1px solid rgba(139,99,16,.28); border-radius:12px; background:#fff9ec; color:#493719; text-align:left; cursor:pointer; }
.tf-alpha-ending-btn strong { color:#7a5208; font-size:calc(19px * var(--tf-alpha-font-scale)); }
.tf-alpha-ending-btn span { font-family:'Noto Sans Thai',sans-serif; font-size:calc(18px * var(--tf-alpha-font-scale)); line-height:1.6; }
.tf-alpha-ending-detail { margin-top:14px; padding:20px; border:1px solid rgba(139,99,16,.24); border-radius:13px; background:#fbf8f1; color:#5a4727; line-height:1.8; }
.tf-alpha-ending-detail strong { color:#7a5208; }
.tf-manual-intro { max-width:760px; margin:0 auto 18px; text-align:center; color:#765c2c; line-height:1.75; }
.tf-manual-question { max-width:760px; margin:0 auto 18px; padding:15px; border-radius:11px; background:linear-gradient(135deg,#5a3e0a,#8b6310); color:#fffaf0; font-family:'Noto Serif TC',serif; font-size:calc(19px * var(--tf-alpha-font-scale)); font-weight:900; text-align:center; }
.tf-manual-rule { max-width:820px; margin:0 auto 15px; padding:20px; border:1px solid rgba(139,99,16,.28); border-left:5px solid #c8973a; border-radius:13px; background:#fffefb; }
.tf-manual-rule.is-live { border-left-color:#7a9d59; }
.tf-manual-rule.is-dead { border-left-color:#b96650; }
.tf-manual-rule h3 { margin:0 0 12px; color:#7a5208; font-family:'Noto Serif TC',serif; font-size:calc(20px * var(--tf-alpha-font-scale)); }
.tf-manual-summary { margin-bottom:12px; padding:12px 14px; border-radius:9px; background:#f7e7c5; color:#5a3e0a; font-weight:900; line-height:1.7; }
.tf-manual-rule details { border-top:1px solid rgba(139,99,16,.16); padding-top:11px; }
.tf-manual-rule summary { display:inline-block; padding:8px 12px; border:1px solid rgba(139,99,16,.35); border-radius:9px; background:#fff9ec; color:#74500d; font-weight:900; cursor:pointer; list-style:none; }
.tf-manual-rule summary::before { content:'＋ '; }
.tf-manual-rule details[open] summary::before { content:'－ '; }
.tf-manual-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-top:14px; }
.tf-manual-detail-grid > .tf-alpha-menu-card { width:100%; min-height:150px; height:100%; padding:22px; align-items:flex-start; justify-content:center; }
.tf-manual-branch { padding:14px; border:1px solid rgba(139,99,16,.18); border-radius:10px; background:#fbf8f1; line-height:1.8; }
.tf-manual-branch b { color:#69490d; }
.tf-manual-term { display:inline-flex; margin:2px; padding:4px 9px; border:1px solid rgba(139,99,16,.38); border-radius:999px; background:#fff9ec; color:#74500d; font:inherit; font-weight:900; cursor:pointer; }
.tf-manual-tone-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.tf-manual-tone { padding:14px 8px; border:1px solid rgba(139,99,16,.25); border-radius:11px; background:#fff9ec; text-align:center; }
.tf-manual-tone b { display:block; font-family:'Noto Sans Thai',sans-serif; font-size:calc(32px * var(--tf-alpha-font-scale)); color:#7a5208; }
.tf-alpha-footer-note { margin:24px 0 0; color:#88775b; font-size:calc(13px * var(--tf-alpha-font-scale)); text-align:center; }
@media (min-width:1025px) and (min-height:601px) {
  .tf-alpha-dialog { width:min(748px,calc(86.9565vw - 34.7826px)); height:min(612px,calc(86.9565vh - 34.7826px)); transform:scale(1.15); transform-origin:center; }
}
@media (max-width:720px) {
  .tf-alpha-overlay { padding:0; align-items:stretch; }
  .tf-alpha-dialog { --tf-alpha-font-scale:.8; width:100%; height:100%; max-height:none; border:0; border-radius:0; font-size:80%; }
  .tf-alpha-overlay-head { grid-template-columns:46px 1fr 46px; min-height:64px; padding:8px 12px; }
  .tf-alpha-icon-btn { width:42px; height:42px; }
  .tf-alpha-overlay-title { font-size:calc(19px * var(--tf-alpha-font-scale)); }
  .tf-alpha-overlay-body { padding:16px; }
  .tf-alpha-menu { grid-template-columns:1fr; gap:12px; }
  .tf-alpha-menu-card, .tf-alpha-menu > .tf-alpha-menu-card:first-child { grid-column:auto; min-height:130px; padding:22px; }
  .tf-alpha-menu-card strong { font-size:calc(21px * var(--tf-alpha-font-scale)); }
  .tf-alpha-tile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tf-manual-detail-grid { grid-template-columns:1fr; }
  .tf-manual-tone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tf-alpha-ending-btn { grid-template-columns:82px 1fr; padding:12px; }
}
@media (max-width:720px) and (orientation:portrait) {
  .tf-alpha-overlay { padding:10vh 10vw; align-items:center; }
  .tf-alpha-dialog { width:80vw; height:80vh; height:80dvh; max-height:80vh; max-height:80dvh; border:1px solid rgba(139,99,16,.28); border-radius:18px; }
}