/* Right-to-left languages such as Arabic. The page layout mirrors, but the board, its
   coordinates, the clocks and the move list notation keep their fixed left-to-right geometry. */
[dir="rtl"] .board, [dir="rtl"] .board * { direction: ltr; }
[dir="rtl"] .sqs, [dir="rtl"] .coord, [dir="rtl"] .clock, [dir="rtl"] .rating-svg,
[dir="rtl"] .room-code, [dir="rtl"] .setup-timer, [dir="rtl"] .invite-box input,
[dir="rtl"] .stat-line b, [dir="rtl"] .go-rating b, [dir="rtl"] .gr-rc { direction: ltr; unicode-bidi: isolate; }

/* Arabic text set in the monospace font gets a poor fallback: use the normal text font */
[dir="rtl"] .tc-btn, [dir="rtl"] .lc-num, [dir="rtl"] .lc-meta, [dir="rtl"] .go-rating, [dir="rtl"] .stat-line b { font-family: inherit; }

/* sidebar */
[dir="rtl"] .nav a { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .nav a.active { border-right-color: var(--green); }
[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .vip-tag { margin-left: 0; margin-right: 6px; }

/* arrows and other pictures that point along the reading direction */
[dir="rtl"] .ico-prev svg, [dir="rtl"] .ico-next svg, [dir="rtl"] .ico-first svg, [dir="rtl"] .ico-last svg,
[dir="rtl"] .ico-logout svg { transform: scaleX(-1); }

/* text that app.css aligns to a fixed side */
[dir="rtl"] .legal-page, [dir="rtl"] .auth-card, [dir="rtl"] .card,
[dir="rtl"] .menu-btn, [dir="rtl"] .menu-item, [dir="rtl"] .mb-plan, [dir="rtl"] .vote-card,
[dir="rtl"] .lesson-text td, [dir="rtl"] .lesson-text th, [dir="rtl"] table.chart tbody th { text-align: right; }
[dir="rtl"] .army-table .cnt, [dir="rtl"] .gr-rc, [dir="rtl"] .gr-date, [dir="rtl"] .lb-rating { text-align: left; }

/* spacing set on one side */
[dir="rtl"] .modal-x { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tab .badge { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .player-bar .caps .more { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .move-cell .res { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-msg b { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .setup-timer { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hero-stats b { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .bot-card .bc-rating { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chip { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .lesson-text ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] table.chart tbody th .rh { padding-right: 0; padding-left: 6px; }

/* coloured edges */
[dir="rtl"] .toast { border-left: 1px solid var(--line); border-right: 4px solid var(--green); }
[dir="rtl"] .toast.error { border-right-color: var(--red-soft); }
[dir="rtl"] .toast.warn { border-right-color: var(--gold); }
[dir="rtl"] .task-box { border-left: 0; border-right: 4px solid var(--green); }
[dir="rtl"] .task-box.fail { border-right-color: var(--red-soft); }

/* the computer's speech bubble points at its avatar, which is now on the right */
[dir="rtl"] .speech::before { left: auto; right: -8px; border-right: 0; border-left: 8px solid #fff; border-top-color: transparent; border-bottom-color: transparent; }

/* lesson cards: number and tick swap corners */
[dir="rtl"] .lesson-card .lc-num { left: auto; right: 12px; }
[dir="rtl"] .lesson-card .lc-done { right: auto; left: 10px; }

@media (max-width: 860px) {
  [dir="rtl"] .nav a { border-right: 0; }
  [dir="rtl"] .side-bottom { margin: 0 auto 0 0; }
}