/** * Arabic (RTL) overrides. * * The base stylesheet uses logical properties (inset-inline, margin-inline, * padding-inline), so the layout mirrors on its own once is * set. What is left here is typography, the few physical transforms, and the * bits of the 3D scene that should NOT mirror. */ :root { --font: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic", Tahoma, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } body { font-size: 17.5px; line-height: 1.85; letter-spacing: 0; } h1, h2, h3, h4 { letter-spacing: 0; line-height: 1.28; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); } /* Uppercasing does nothing to Arabic but shouts at the Latin words mixed into it (iOS, RTL), so the small-caps labels drop the transform here. */ .eyebrow, .kicker, .stat-row span, .footer-grid h4, .store-badge-text span, .mode .tag, .ui-label, .player .host-tag, .entry-meta { letter-spacing: 0; text-transform: none; } /* Latin fragments inside Arabic copy (iOS, 50/50, %) keep their own run. */ .lang-switch a[lang="en"], .store-badge-text, .room-code, .ui-word, .ui-coins, .stat-row b { direction: ltr; unicode-bidi: isolate; } /* The brand marks stay left-to-right: SIFT is a wordmark, not a sentence. */ .cube, .marquee-track, .board { direction: ltr; } .marquee span { direction: rtl; } /* Physical transforms that would otherwise slide the wrong way. */ .player:hover { transform: translateX(-6px); } .phone::before { transform: translateX(50%); } /* Arabic numerals in the stat row read better a touch larger. */ .stat-row b { font-size: 1.75rem; }