/* ════════════════════════════════════════════════════════════
   RTL OVERRIDES (Persian / فارسی)
   ════════════════════════════════════════════════════════════ */

html[dir="rtl"] body { font-family: 'Vazirmatn', var(--font-ui); }

html[dir="rtl"] .topbar { direction: rtl; }

html[dir="rtl"] .menu-title,
html[dir="rtl"] .splash-title,
html[dir="rtl"] .splash-subtitle,
html[dir="rtl"] .menu-note { letter-spacing: 0; }

html[dir="rtl"] .form-row { align-items: flex-start; }
html[dir="rtl"] .form-row label { letter-spacing: 1px; }

html[dir="rtl"] .setting-label,
html[dir="rtl"] .seg-btn,
html[dir="rtl"] .hud-label,
html[dir="rtl"] .turn-indicator { letter-spacing: 0; }

html[dir="rtl"] .room-code { letter-spacing: 4px; }

/* ════════════════════════════════════════════════════════════
   CARD CONTAINERS — ALWAYS LTR
   Cards are visual objects, not text. Their layout direction
   must NOT flip with language. Force LTR on every card host.
   ════════════════════════════════════════════════════════════ */

html[dir="rtl"] .player-hand,
html[dir="rtl"] .player-hand-wrap,
html[dir="rtl"] .opp-deck,
html[dir="rtl"] .opp-deck--north,
html[dir="rtl"] .opp-deck--west,
html[dir="rtl"] .opp-deck--east,
html[dir="rtl"] .trick-area,
html[dir="rtl"] .hand,
html[dir="rtl"] .card-gallery,
html[dir="rtl"] .gallery-tile,
html[dir="rtl"] .seat-cards {
  direction: ltr;
}

/* Reset margin-inline-start to behave as left-margin in RTL too */
html[dir="rtl"] .player-hand .card,
html[dir="rtl"] .opp-deck .card,
html[dir="rtl"] .hand .card,
html[dir="rtl"] .seat-cards .card {
  /* margin-inline-start already converts; forcing direction:ltr
     on parent makes it behave as expected (left side), but we
     also explicitly normalize to remove any inherited RTL flips. */
  unicode-bidi: isolate;
}