/* Openworld -- languages (js/i18n.js): the language switcher and its menu, the
   font stacks of the scripts the Nunito subset does not cover (system fonts
   only, nothing shipped), and the right-to-left adjustments (ar, fa, he, ur:
   <html dir="rtl"> is set by i18n.js; the text aligns and the few physical
   left/right rules are turned, the scenes and the brand stay left to right).
   Linked after site.css / legal.css on every page. */

/* ---- fonts: Nunito for the Latin glyphs, then the system's fonts per script ------------- */
:root {
  --script-fonts: "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Segoe UI", "PingFang SC", "Hiragino Sans",
    "Microsoft YaHei", "Malgun Gothic", "Tahoma", sans-serif;
  --display: "Nunito", ui-rounded, system-ui, -apple-system, var(--script-fonts);
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--script-fonts);
}
/* Han characters: the variant of the language first. */
:root:lang(zh-Hans) { --display: "Nunito", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; --text: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:root:lang(zh-Hant) { --display: "Nunito", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", system-ui, sans-serif; --text: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", sans-serif; }
:root:lang(ja) { --display: "Nunito", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", system-ui, sans-serif; --text: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }
:root:lang(ko) { --display: "Nunito", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", system-ui, sans-serif; --text: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; }
:root:lang(ar), :root:lang(fa), :root:lang(ur) { --text: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif; --display: "Nunito", system-ui, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; }
:root:lang(he) { --text: system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif; }
/* Scripts that join or stack letters: no tracking, and headings need room for their marks. */
:root:lang(ar) .kicker, :root:lang(fa) .kicker, :root:lang(ur) .kicker, :root:lang(hi) .kicker, :root:lang(bn) .kicker,
:root:lang(mr) .kicker, :root:lang(ta) .kicker, :root:lang(te) .kicker, :root:lang(th) .kicker,
:root:lang(ar) .yours, :root:lang(fa) .yours, :root:lang(ur) .yours, :root:lang(ar) .chip, :root:lang(fa) .chip, :root:lang(ur) .chip { letter-spacing: 0; }
:root:lang(hi) h1, :root:lang(hi) h2, :root:lang(hi) h3, :root:lang(bn) h2, :root:lang(bn) h3, :root:lang(mr) h2, :root:lang(mr) h3,
:root:lang(ta) h2, :root:lang(ta) h3, :root:lang(te) h2, :root:lang(te) h3, :root:lang(th) h2, :root:lang(th) h3,
:root:lang(ar) h2, :root:lang(ar) h3, :root:lang(fa) h2, :root:lang(fa) h3, :root:lang(ur) h2, :root:lang(ur) h3 { line-height: 1.3; }

/* ---- the switcher --------------------------------------------------------------------- */
.langsw { position: relative; display: inline-flex; flex: none; }
.langsw-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 13px 7px 11px; border-radius: 99px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); background: rgba(10, 15, 28, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--ink, #eef3ff); font: 700 0.88rem/1.2 var(--display, system-ui); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.langsw-btn:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.1); }
.langsw-btn:focus-visible { outline: 3px solid var(--gold, #ffcc4d); outline-offset: 3px; }
.langsw-btn svg { width: 18px; height: 18px; flex: none; }
.langsw-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13em; }

/* The top bar: after the sections, before the download button. */
.topbar .langsw { margin-inline-start: 0; }
@media (max-width: 720px) {
  .topbar .langsw { margin-left: auto; margin-inline-start: auto; }
  .topbar .btn { margin-left: 0; }
}
@media (max-width: 560px) { .topbar .langsw-btn span, .bar .langsw-btn span { display: none; } .topbar .langsw-btn, .bar .langsw-btn { padding: 8px; } }
/* The hero, where the bar is not shown yet: the top corner. */
.langsw-hero { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: var(--gutter, 16px); z-index: 6; }
/* The footers. */
.footer-inner .langsw-foot { grid-column: 1 / -1; justify-self: start; }
.foot .langsw-foot { margin-inline-start: auto; }
.langsw-foot .langsw-btn { background: rgba(255, 255, 255, 0.05); }
/* The legal and notes bars: the switcher ends the row. */
.bar .langsw { margin-inline-start: 0; }
@media (max-width: 640px) { .bar .langsw { margin-inline-start: auto; } }

/* One menu for every switcher, at the body's end: a fixed panel under the bar (a bar's blur
   or transform would make it the container of a fixed child). */
.langsw-menu {
  position: fixed; z-index: 300; top: 64px; inset-inline: 12px; margin-inline: auto; max-width: 740px;
  max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow: auto; padding: 12px;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(12, 19, 36, 0.97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); color: var(--ink, #eef3ff);
}
.langsw-menu[hidden] { display: none; }
.langsw-menu ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; }
.langsw-menu button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit;
  font: 700 0.95rem/1.3 var(--text, system-ui); text-align: start; cursor: pointer;
}
.langsw-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.langsw-menu button:focus-visible { outline: 3px solid var(--gold, #ffcc4d); outline-offset: -2px; }
.langsw-menu button[aria-current] { background: rgba(126, 217, 87, 0.16); color: var(--grass, #7ed957); }

/* Someone reading a legal page in the other language than its own. */
.lang-notice { margin: 0 0 22px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); background: var(--panel, rgba(255, 255, 255, 0.045)); font-size: 0.95rem; }
.lang-notice a { font-weight: 700; }

/* ---- right to left (ar, fa, he, ur) ------------------------------------------------------ */
/* Kept left to right: the brand, the animated strips, the 3D scenes and the code. */
html[dir="rtl"] .lockup, html[dir="rtl"] .marquee, html[dir="rtl"] .parade, html[dir="rtl"] .ledge, html[dir="rtl"] .island,
html[dir="rtl"] .planet, html[dir="rtl"] .cubes, html[dir="rtl"] .story-frame, html[dir="rtl"] .license-card,
html[dir="rtl"] pre, html[dir="rtl"] code, html[dir="rtl"] kbd { direction: ltr; }
html[dir="rtl"] pre { text-align: left; }
html[dir="rtl"] .topbar-nav, html[dir="rtl"] .bar-nav { margin-left: 0; margin-inline-start: auto; }
html[dir="rtl"] .btn-xl { text-align: right; padding: 16px 22px 16px 30px; }
html[dir="rtl"] .kicker::before { margin-right: 0; margin-left: 10px; box-shadow: -3px 3px 0 var(--grass-3, #2f6b27); }
html[dir="rtl"] .stage-tag::before, html[dir="rtl"] .phone-title::before { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .bones span { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .faq summary { padding: 18px 0 18px 40px; }
html[dir="rtl"] .faq summary::after { right: auto; left: 6px; }
html[dir="rtl"] .toast { padding: 18px 20px 18px 44px; }
html[dir="rtl"] .toast-close { right: auto; left: 10px; }
html[dir="rtl"] .install-close { float: left; margin: 12px 0 0 12px; }
html[dir="rtl"] .doc ul, html[dir="rtl"] .doc ol, html[dir="rtl"] .next-steps { padding-left: 0; padding-inline-start: 1.3em; }
html[dir="rtl"] .notes blockquote { border-left: 0; border-right: 4px solid var(--grass, #7ed957); border-radius: 12px 0 0 12px; }