/* Language-specific typography uses device fonts, with no extra downloads. */
:lang(ar) { font-family: Tahoma, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
:lang(zh-Hant) { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; }
html:lang(ar) body, html:lang(ar) button, html:lang(ar) .hud-value,
html:lang(ar) .modal h1, html:lang(ar) .hud-label, html:lang(ar) .mode-score,
html:lang(ar) .result-label, html:lang(ar) .countdown > small,
html:lang(ar) .title-modal .modal-actions .primary,
html:lang(ar) .title-modal > p, html:lang(ar) .fever-block > b,
html:lang(ar) .toast { font-family: Tahoma, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
html:lang(zh-Hant) body { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; }
.brand, .brand * { font-family: "Zen Maru", system-ui, sans-serif; }
.language-picker { margin: 0 0 8px; padding: 0 0 16px; border: 0; border-bottom: 1px solid #e4d7b8; min-width: 0; }
.language-picker legend { padding: 0; font-size: 14px; color: var(--ink); }
.language-picker p { margin: 4px 0 10px; font-size: 11px; line-height: 1.7; color: #687e69; }
.language-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.language-choices button { min-height: 44px; padding: 9px 5px; border: 1px solid #d6cfaf; border-radius: 11px; background: #fff9e8; font-size: 12px; line-height: 1.5; }
.language-choices button[aria-pressed="true"] { color: #fffdf0; background: #327d6c; border-color: #256651; box-shadow: inset 0 1px 0 #ffffff38, 0 2px 0 #205d4e; }
.language-choices button:lang(ar) { font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: 14px; }
.language-choices button:lang(ja) { font-family: "Zen Maru", system-ui, sans-serif; }
.language-choices button:lang(en) { font-family: "Zen Maru", system-ui, sans-serif; }
.info-card, .setting-row { text-align: start; }
.donation-results, .gameover-results, .pause-results { text-align: center; }
.paypal-donate-link { padding: 11px 20px; min-height: 44px; border: 1px solid #e7bb48; border-radius: 14px; color: #253e52; background: #ffc95e; text-decoration: none; }
.mini-stats > span { display: inline-flex; gap: 4px; }
.title-record { gap: 7px; }
.game-btn > span { min-width: 0; }
.collection-item b { overflow-wrap: normal; word-break: normal; }
.result-value, .hud-value, .fever-title, #feverTimerText, #walletText,
#titleBestText, #comboText, .ranking-score, .ranking-coin { direction: ltr; unicode-bidi: isolate; }
.score-chip strong, .mini-stats b, .collection-stat strong { direction: ltr; unicode-bidi: isolate; }
.countdown { text-align: center; }
/* The logical reading order mirrors; the physical puzzle and arrow keys do not. */
[dir="rtl"] .icon-back { transform: scaleX(-1); }
[dir="rtl"] .modal-close { right: auto; left: 16px; }
[dir="rtl"] .mode-btn.active::after { right: auto; left: 8px; }
[dir="rtl"] .hud-block + .hud-block { border-left: 0; border-right: 1px solid #d5ddc0; }
[dir="rtl"] .bar-fill { transform-origin: right center; }
[dir="rtl"] .switch-track::after { left: auto; right: 3px; }
[dir="rtl"] .setting-row[aria-checked="true"] .switch-track::after { transform: translateX(-18px); }
[dir="rtl"] .new-animal-badge { left: auto; right: 5px; }
[dir="rtl"] .play-status strong { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .title-modal .modal-actions .primary .ui-icon { margin-right: 0; margin-left: 7px; }
html:lang(ar) .help-content { font-size: 13px; line-height: 1.9; }
html:lang(ar) .help-step small { font-size: 11px; }
html:lang(ar) .collection-item b { font-size: 12px; line-height: 1.6; }
html:lang(ar) .collection-item small { font-size: 10px; line-height: 1.7; }
html:lang(ar) .board-tip { line-height: 1.7; }
html:lang(ar) .countdown > span { font-size: clamp(56px, 16vw, 100px); }
html:lang(en) .title-nav .game-btn { font-size: 12px; }
.toast.notice { max-width: calc(100vw - 24px); white-space: normal; width: max-content; text-align: center; line-height: 1.7; }
@media (max-width: 640px) {
  .language-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .language-picker { padding-bottom: 12px; }
  html:lang(en) .title-nav .game-btn { font-size: 10px; gap: 5px; }
  html:lang(en) .controls .game-btn { font-size: 11px; gap: 5px; }
  html:lang(en) .controls .ui-icon { width: 17px; height: 17px; }
  html:lang(en) .board-tip { font-size: 10px; }
  html:lang(ar) .controls .game-btn { font-size: 12px; }
  html:lang(ar) .modal:not(.title-modal) > h1 { line-height: 1.7; }
  html:lang(ar) .title-modal .mode-name { font-size: 13px; }
  html:lang(ar) .title-modal .mode-spec { font-size: 10px; }
  html:lang(ar) .title-modal .mode-score { font-size: 9px; }
  html:lang(ar) .result-label { font-size: 11px; }
  html:lang(en) .help-step b { font-size: 10px; }
  .help-step b { overflow-wrap: normal; }
  .toast:not(.notice) { max-width: calc(100vw - 24px); width: max-content; font-size: clamp(22px, 6.4vw, 38px); text-align: center; }
}
@media (max-width: 360px) {
  html:lang(en) .board-tip { font-size: 9px; }
  html:lang(en) .title-nav .game-btn { flex-direction: column; gap: 3px; font-size: 10px; padding: 7px 3px; }
  html:lang(en) .collection-filters { gap: 4px; }
  html:lang(en) .collection-filters button { font-size: 10px; padding-inline: 6px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  [dir="rtl"] body:not([data-state="title"]) .play-status { margin-left: 0; margin-right: auto; }
  [dir="rtl"] body:not([data-state="title"]) .play-status strong { margin-left: 0; margin-right: 4px; }
  html:lang(ar) body:not([data-state="title"]) .hud-label,
  html:lang(ar) body:not([data-state="title"]) .fever-block > b { letter-spacing: 0; }
}