/* g53online — per-script typography + RTL layout
   ---------------------------------------------------------------------------
   Injected site-wide by build_seo.py, AFTER each game's own <style> so these
   rules win on source order. Applies at ALL widths (unlike mobile.css, which is
   inside a max-width query).

   ADR-005 — SYSTEM FONTS ONLY, zero webfonts. The site is an offline PWA with a
   service-worker precache; CJK webfonts are multi-MB each and four CJK/Thai
   locales would destroy both the offline story and the page-weight budget.

   ADR-004 — RTL MIRRORS THE CHROME, NEVER THE PLAYFIELD. Ludo tracks, Conquest
   maps, Kingdom's grid and Chain Five's board encode game geometry, not reading
   order. Mirroring a canvas changes coordinates, breaks saved state
   (g53_kingdom_save stores a grid) and disorients players who know the game.
   Card fans and seat labels DO mirror — those read left-to-right.
   --------------------------------------------------------------------------- */

/* ── 1. per-script font stacks ─────────────────────────────────────────────── */
:root { --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

:root[lang="zh"] { --ui-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
:root[lang="ja"] { --ui-font: "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif; }
:root[lang="ko"] { --ui-font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }

/* Thai and Indic glyphs are taller and will collide in the dock compacted on
   2026-08-10 unless line-height is raised. */
:root[lang="th"] { --ui-font: Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif; line-height: 1.6; }
:root[lang="hi"], :root[lang="bn"] { --ui-font: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif; line-height: 1.55; }
:root[lang="bn"] { --ui-font: "Kohinoor Bangla", "Nirmala UI", "Noto Sans Bengali", sans-serif; }

:root[lang="ar"], :root[lang="fa"] { --ui-font: "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; }
:root[lang="ur"] { --ui-font: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Geeza Pro", Tahoma, sans-serif; line-height: 1.9; }

body, button, input, select, textarea { font-family: var(--ui-font); }

/* Vietnamese stacks diacritics above capitals — give them room. */
:root[lang="vi"] { line-height: 1.5; }

/* ── 2. RTL — chrome only ──────────────────────────────────────────────────── */
[dir="rtl"] .bar,
[dir="rtl"] .dock,
[dir="rtl"] .secondary,
[dir="rtl"] .btnrow,
[dir="rtl"] .scorecard,
[dir="rtl"] .turncard,
[dir="rtl"] .menu,
[dir="rtl"] #locRow,
[dir="rtl"] #kdiffRow,
[dir="rtl"] #objStrip { flex-direction: row-reverse; }

[dir="rtl"] .hint,
[dir="rtl"] .matchrow,
[dir="rtl"] .turncard .tmeta,
[dir="rtl"] .scol { text-align: right; }

/* directional icons: the glyph must point the other way */
[dir="rtl"] .bar a.back,
[dir="rtl"] .backarrow,
[dir="rtl"] [data-dir-icon] { display: inline-block; }
[dir="rtl"] .bar a.back::first-letter { unicode-bidi: bidi-override; direction: ltr; }

/* floating clusters swap corners */
[dir="rtl"] .g53co { left: auto; right: 12px; }
[dir="rtl"] .g53e-cluster,
[dir="rtl"] .g53eng { left: 12px; right: auto; }

/* card fans and seat labels DO read L->R, so they mirror */
[dir="rtl"] .hand { flex-direction: row-reverse; }
[dir="rtl"] .seat.west { left: auto; right: 0; }
[dir="rtl"] .seat.east { right: auto; left: 0; }

/* ── 3. the playfield is EXEMPT (ADR-004) ──────────────────────────────────── */
/* Canvases and board grids keep LTR geometry no matter the document direction.
   Do not "fix" this — a mirrored Ludo track is a bug, not a feature. */
[dir="rtl"] canvas,
[dir="rtl"] .board,
[dir="rtl"] #board,
[dir="rtl"] .grid,
[dir="rtl"] .table,
[dir="rtl"] .stage > canvas,
[dir="rtl"] .foundations,
[dir="rtl"] .trick {
  direction: ltr;
}

/* ── 4. expansion safety ───────────────────────────────────────────────────── */
/* German/Russian run ~30% longer than English. The dock labels are already
   ellipsised at .58rem in English, so give long-word locales a break opportunity
   rather than letting them clip to nothing. */
:root[lang="de"] .scol .slab,
:root[lang="ru"] .scol .slab,
:root[lang="fi"] .scol .slab { hyphens: auto; overflow-wrap: anywhere; }

/* Never let a translated label silently vanish */
.scol .slab, .turncard .tname, .menu button { min-width: 0; }