/* ═══════════════════════════════════════════════════════════
   RIGHT-TO-LEFT + PERSIAN/ARABIC FONT  (css/rtl.css)  —  CHANGE: new file (translation)
   Loads LAST (see index.html). Everything here only applies when <html dir="rtl"> (set by js/i18n.js) — English etc. are untouched.
   The page itself flips by just having dir="rtl": flex rows, text alignment, inputs and lists follow the reading direction.
   This file only holds what does NOT flip by itself. It was written from an audit of every left / right / margin-left /
   padding-left / text-align:left rule in style.css and party-games.css (about 90). style.css and party-games.css stay unchanged.

   DECISIONS (so you can change your mind in one place):
   • The two top corners (profile chip on the left, sound / colour buttons on the right) STAY where they are: they are fixed to the screen.
   • The game picker (diagonal discs, arrows) is NOT mirrored; only its words change.
   • Boards (chess, backgammon, Connect Four, Dots & Boxes, Memory, the drawing canvas, the colouring picture) are NOT mirrored.
   • Slide-in animations and decorative arrows are left alone.
   ═══════════════════════════════════════════════════════════ */

/* ── font: Sahel (Persian + Latin). Files in fonts/ : sahel-400.woff and sahel-700.woff.
   Sahel has no Cyrillic or Turkish letters: for ru / tr add a font for that language later (Arabic works with Sahel too). ── */
@font-face { font-family: 'Sahel'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/sahel-400.woff') format('woff'); }
@font-face { font-family: 'Sahel'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/sahel-700.woff') format('woff'); }

html[dir="rtl"] { --font: 'Sahel', 'Outfit', system-ui, sans-serif; }
html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: var(--font); }

/* ── letter-spacing must be 0: spreading the letters of Persian / Arabic words breaks the joined script.
      style.css uses letter-spacing a lot (labels, buttons), so this one rule fixes all of them. ── */
html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: normal !important; }
/* the game picker added a little left padding to balance that letter-spacing (party-games.css, "equal padding on the left"): not needed now */
html[dir="rtl"] .games-hint, html[dir="rtl"] .games-row.diag .game-name, html[dir="rtl"] .games-row.diag .game-sub, html[dir="rtl"] .games-row.diag .games-title { padding-left: 0; }

/* ── boards, move list and dice are NOT mirrored: chess a–h and backgammon points keep their real positions.
      #g-stage holds every board AND some words of the party games, so the words get their direction back just below. ── */
html[dir="rtl"] #g-stage, html[dir="rtl"] #g-moves { direction: ltr; }
html[dir="rtl"] .mm2-round, html[dir="rtl"] .mm2-prompt, html[dir="rtl"] .mm2-wait, html[dir="rtl"] .mm2-how,
html[dir="rtl"] .dg-top, html[dir="rtl"] .dg-round, html[dir="rtl"] .dg-time, html[dir="rtl"] .dg-word, html[dir="rtl"] .dg-log, html[dir="rtl"] .cl-result { direction: rtl; }

/* ── e-mail and password are typed in Latin letters: keep them left-to-right inside the field ── */
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"] { direction: ltr; }

/* ── arrows that mean "back" / "forward" point the other way ── */
html[dir="rtl"] .st-back, html[dir="rtl"] .st-chev, html[dir="rtl"] #g-leave { transform: scaleX(-1); }

/* ── text that was forced to the left → follows the reading direction ── */
html[dir="rtl"] .sheet-search, html[dir="rtl"] .country-item, html[dir="rtl"] .chat-row .q-input, html[dir="rtl"] #login-sheet .q-input,
html[dir="rtl"] .g-title, html[dir="rtl"] .pm-row { text-align: start; }
html[dir="rtl"] .f-group .q-select { text-align: start; text-align-last: start; }

/* ── drop-down arrow + its space (it sits on the right in English) ── */
html[dir="rtl"] .q-select { padding-right: 14px; padding-left: 32px; background-position: left 12px center; }
html[dir="rtl"] .q-row .q-select { padding-right: 10px; padding-left: 26px; background-position: left 9px center; }

/* ── numbered rules list (Terms), perk list and the ✓ in the country list ── */
html[dir="rtl"] .rules-list li { padding-left: 0; padding-right: 34px; }
html[dir="rtl"] .rules-list li::before { left: auto; right: 0; }
html[dir="rtl"] .perk-list li { padding-left: 0; padding-right: 14px; border-left: 0; border-right: 2px solid var(--neon-glow-soft); }
html[dir="rtl"] .country-item.selected::after { float: left; }

/* ── buttons pushed to the far end of a row (friends list, challenge banner, game page header) ── */
html[dir="rtl"] .fr-actions, html[dir="rtl"] .ch-actions { margin-left: 0; margin-inline-start: auto; }
@media (max-width: 420px) { html[dir="rtl"] .fr-actions, html[dir="rtl"] .ch-actions { margin-inline-start: 50px; } }
html[dir="rtl"] .fr-pick-label { margin-right: 0; margin-left: 2px; }
html[dir="rtl"] .g-pinfo .adv { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .g-pinfo .cap { margin-right: 0; margin-left: -3px; }

/* ── CHANGE (phase 11): the backgammon dice row sits inside #g-stage (forced left-to-right above), so the Undo button's own Persian label and its ↷ arrow
      were laid out left-to-right. Only the button's inside gets its direction back; the order of Roll / dice / Undo in the row is unchanged.
      (The arrow itself is the mirrored ↷ in the Persian texts gp.undo / gp.bgUndo in i18n.js; English keeps ↶.) ── */
html[dir="rtl"] .bg-dice .pill, html[dir="rtl"] .bg-dice .roll-btn { direction: rtl; }

/* ── CHANGE (game picker, 2026-10-09): the title is now a flex row "fading line - TEXT - fading line", rotated along the diagonal
      (js/game-carousel.js + css/party-games.css). Three things need their reading direction back in right-to-left:
      • direction:ltr on the title row keeps the two fading lines on the correct sides (a right-to-left flex row would swap them,
        and each line would fade inwards instead of outwards);
      • the English rule that pulls the text back by .34em (it cancels the letter-spacing after the last letter) must go: letter-spacing is
        0 here (rule at the top of this file), so the pull would only push the Persian title off-centre;
      • the Persian words (and the numbers of the live "online" line under the title) read right-to-left again. ── */
html[dir="rtl"] .games-row.diag .games-title { direction: ltr; }
html[dir="rtl"] .games-row.diag .games-title > span:first-child { margin-right: 0 !important; direction: rtl; unicode-bidi: isolate; }
html[dir="rtl"] .games-row.diag .games-activity { direction: rtl; }