/* Persian (fa-IR) typography + RTL layer for the OpiTo lobby bundle.
   Loaded after the bundle CSS from index.html. Every rule is scoped to html[dir="rtl"]
   so the English/LTR path is untouched. No source for the SPA — override only. */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://gpack.traviangames.ir/fonts/Vazirmatn.woff2) format('woff2');
}
/* Estedad (OFL) — display face: headings, buttons, hero, brand. Vazirmatn stays the reading face. */
@font-face {
  font-family: 'Estedad';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://gpack.traviangames.ir/fonts/Estedad.woff2) format('woff2');
}
html[dir="rtl"] { --displayFont: Estedad, Vazirmatn, Tahoma, Arial, sans-serif; }

/* ---- type scale: Persian needs a size step up and more leading than Noto Sans 13/1.3 ---- */
html[dir="rtl"], html[dir="rtl"] .modal {
  --fontFamily: Vazirmatn, Tahoma, 'Segoe UI', Arial, sans-serif;
}
html[dir="rtl"] :is(h1, h2, h3, main h1, .modal h1, .modal h3, button, .calendarGameworldPreview h3, .newsPreview .title, #news .newsArticle .title, .gameworldName) {
  --fontFamily: var(--displayFont);
  font-family: var(--displayFont);
}
html[dir="rtl"] { --fontSize: 14px; }
html[dir="rtl"] body { line-height: 1.75; font-variant-numeric: tabular-nums; }
html[dir="rtl"] :is(h1, h2, h3, h4) { line-height: 1.4; }
html[dir="rtl"] :is(button, input, select, textarea) { font-family: inherit; }
html[dir="rtl"] :is(input, textarea, select) { font-size: 14px; line-height: 1.6; }
html[dir="rtl"] button { font-size: 14px; }

/* Latin display tricks that break the connected script */
html[dir="rtl"] :is(h1, h2, h3, .gameworldName, .subtitle, .weekday, .region .title, .title, .bankSection h2, .bankBal .l, label, button) {
  letter-spacing: 0;
  font-variant: normal;
  text-transform: none;
}
html[dir="rtl"] svg text { font-family: var(--displayFont); letter-spacing: 0; text-transform: none; }

/* ---- header ---- */
html[dir="rtl"] header .logo { --scaleXFactor: 1; }
html[dir="rtl"] header button.buttonSecondary { --buttonMinHeight: 36px; font-size: 14px; font-weight: 600; }

/* ---- hero stage (SVG) ---- */
html[dir="rtl"] #stage .stageSVG .headlineContainer text.headline { font-family: var(--displayFont); font-weight: 900; font-size: 150px; }
html[dir="rtl"] #stage .stageSVG .foreignObjectContainer div {
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  line-height: 1.55;
  text-transform: none;
  text-wrap: pretty;
}
html[dir="rtl"] #stage .stageSVG .foreignObjectContainer foreignObject div { font-size: 30px; max-width: 34%; }
html[dir="rtl"] .playNowCTAButton .inner svg text { --fontFamily: var(--displayFont); font-family: var(--displayFont); font-weight: 800; }
/* stage layers missing from the asset export (also 404 on the reference host) */
#stage image[href$="2.webp"], #stage image[href$="3.webp"] { display: none; }

/* ---- modals (login / registration / settings) ---- */
html[dir="rtl"] .modal { --modalPadding: 18px; }
html[dir="rtl"] .modal h1 { font-size: 19px; font-weight: 700; margin-block-end: 16px; }
html[dir="rtl"] .modal h3 { font-size: 15px; font-weight: 600; }
html[dir="rtl"] .modal p, html[dir="rtl"] .modal li { line-height: 1.8; }
html[dir="rtl"] :is(#loginLobby, #registrationFlowWrapper .step) label:not(.checkbox) .label { font-size: 14px; }
html[dir="rtl"] label:where(.checkbox, .radio) .label { line-height: 1.7; }
html[dir="rtl"] button.buttonFramed { --buttonMinHeight: 40px; font-weight: 700; }
html[dir="rtl"] button.buttonFramed > div { padding-inline: 22px; }
/* social sign-in is not configured (no client ids) — hide the dead block and its "or continue with" divider */
html[dir="rtl"] #socialSignIn, html[dir="rtl"] #socialSignIn + *, html[dir="rtl"] :has(> #socialSignIn) > .divider { display: none; }

/* ---- game world calendar / tiles ---- */
html[dir="rtl"] .calendarGameworld .day .weekday { font-size: 11px; }
html[dir="rtl"] :is(.calendarGameworld, .calendarGameworldPreview, .gameworld) .title { text-transform: none; }
/* Persian-only site: no language switcher */
html[dir="rtl"] header button.language { display: none; }

/* "no new server" preview box: same rhythm as the reference (LTR) site, dividers on the RTL side */
html[dir="rtl"] .calendarGameworldPreview { --rowGap: 10px; --columnGap: 8px; grid-template-columns: auto auto auto 1fr; grid-template-rows: 1fr 50px; align-items: stretch; }
html[dir="rtl"] .calendarGameworldPreview h3 { font-size: 16px; font-weight: 700; justify-self: start; text-align: start; padding-block: 2px 0; }
html[dir="rtl"] .calendarGameworldPreview > :not(h3) { align-self: stretch; display: grid; align-content: center; padding-inline: 12px 10px; }
/* the bundle draws the cell divider on the physical left; in RTL it belongs on the right */
html[dir="rtl"] .calendarGameworldPreview > :not(:first-of-type) { border-image-slice: 0 1 0 0; border-inline-start: 1px solid; border-inline-end: 0; }
html[dir="rtl"] .calendarGameworldPreview .day { grid-area: 2 / 1; font-size: 15px; font-weight: 700; }
html[dir="rtl"] .calendarGameworldPreview .title { grid-area: 2 / 2; gap: 2px; min-width: max-content; max-width: 240px; }
html[dir="rtl"] .calendarGameworldPreview .title .name { font-family: var(--displayFont); font-size: 16px; font-weight: 700; }
html[dir="rtl"] .calendarGameworldPreview .title .subtitle { font-style: normal; font-size: 13px; opacity: .8; }
html[dir="rtl"] .calendarGameworldPreview .speed { grid-area: 2 / 3; font-size: 16px; font-weight: 700; }
html[dir="rtl"] .calendarGameworldPreview .tribes { grid-area: 2 / 4; justify-self: stretch; overflow: visible; justify-content: end; align-content: end; padding-inline-end: 4px; }
html[dir="rtl"] .calendarGameworldPreview .tribeImages { transform-origin: 50% 100%; margin-block: 0 6px; }
html[dir="rtl"] .newsPreview .title { font-size: 16px; line-height: 1.5; }
html[dir="rtl"] #news .newsArticle .title { line-height: 1.4; }

/* ---- footer ---- */
html[dir="rtl"] footer .lobbyFooterLogo svg.logo { --scaleXFactor: 1; }
html[dir="rtl"] footer nav a { font-size: 13px; padding: 10px 12px; }
html[dir="rtl"] footer .copyright { font-size: 12px; opacity: .85; }

/* ---- phones ---- */
/* Persian runs ~20% longer than English: the bundle's narrow-aspect stage text overflows its
   50%-high foreignObject, so mirror its container queries with a smaller size and wider column. */
@container tribeStage (aspect-ratio < 16 / 20) {
  html[dir="rtl"] #stage .stageSVG .tribeLayer .foreignObjectContainer div { font-size: 52px; max-width: 76%; line-height: 1.4; }
}
@container tribeStage (aspect-ratio < 16 / 27) {
  html[dir="rtl"] #stage .stageSVG .tribeLayer .foreignObjectContainer div { font-size: 60px; max-width: 78%; line-height: 1.4; }
}
@container tribeStage (aspect-ratio < 16 / 32) {
  html[dir="rtl"] #stage .stageSVG .tribeLayer .foreignObjectContainer div { font-size: 70px; max-width: 76%; line-height: 1.4; }
}
/* narrow calendar preview (phones) */
@container calendarGameworldPreviewContainer (width < 385px) {
  html[dir="rtl"] .calendarGameworldPreview { grid-template-rows: 1fr 40px; --rowGap: 0; }
  html[dir="rtl"] .calendarGameworldPreview h3 { font-size: 14px; }
  html[dir="rtl"] .calendarGameworldPreview .day, html[dir="rtl"] .calendarGameworldPreview .speed, html[dir="rtl"] .calendarGameworldPreview .title .name { font-size: 14px; }
}

/* legal pages (imprint / terms / privacy render translated HTML) */
#imprint .contentWrapper ul { list-style: disc; padding-inline-start: 1.5em; margin: .25em 0 .75em; }
#imprint .contentWrapper li { margin: .2em 0; }
#imprint .contentWrapper .legalUpdated { opacity: .75; }