/* Language support: type for scripts Google Sans has no glyphs for, the two
   places the switcher appears, and the handful of things that must not flip
   when the document turns right to left. */

/* ---- Type per script ----------------------------------------------------
   Google Sans stays in front of every stack. Font fallback is per glyph, so
   Latin inside a translated page — RISE, FPS, spezz.exchange — keeps the brand
   face while the surrounding script falls through to a face that covers it.
   These are the faces macOS, Windows and Android ship, so nothing is fetched. */

html[lang="zh"] {
  --ui-font: "Google Sans", "Google Sans Text", "Product Sans", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
             "Source Han Sans SC", sans-serif;
}

html[lang="ja"] {
  --ui-font: "Google Sans", "Google Sans Text", "Product Sans", "Hiragino Sans",
             "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP",
             sans-serif;
}

html[lang="hi"] {
  --ui-font: "Google Sans", "Google Sans Text", "Product Sans",
             "Kohinoor Devanagari", "Noto Sans Devanagari",
             "Devanagari Sangam MN", Mangal, sans-serif;
}

html[lang="bn"] {
  --ui-font: "Google Sans", "Google Sans Text", "Product Sans", "Kohinoor Bangla",
             "Noto Sans Bengali", "Bangla Sangam MN", Vrinda, sans-serif;
}

html[lang="ar"] {
  --ui-font: "Google Sans", "Google Sans Text", "Product Sans", "SF Arabic",
             "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* The section copy uses its own variable, and wants the same treatment. */
html[lang="zh"], html[lang="ja"], html[lang="hi"], html[lang="bn"], html[lang="ar"] {
  --content-font: var(--ui-font);
}

/* Devanagari and Bengali stack marks above and below the line, and Arabic runs
   taller than Latin at the same size. Give those three a little more leading so
   nothing collides in the headings. */
html[lang="hi"] .content-title,
html[lang="bn"] .content-title,
html[lang="ar"] .content-title { line-height: 1.24; }

html[lang="hi"] .tagline,
html[lang="bn"] .tagline,
html[lang="ar"] .tagline { line-height: 1.35; }

/* ---- Right to left ------------------------------------------------------
   Only the reading order flips. The captures are photographs of a left-to-right
   game, and the overlays are positioned against them in percentages, so frames
   and their contents stay as they were shot. */

[dir="rtl"] .compare,
[dir="rtl"] .compare-wrap,
[dir="rtl"] .vk-fps {
  direction: ltr;
}

/* The copy laid over a capture is prose, so it reads right to left again. */
[dir="rtl"] .content-copy {
  direction: rtl;
}

/* Latin runs inside translated copy — spezz.exchange, RISE, FPS, 45k+ — need an
   explicit direction or the punctuation around them lands on the wrong side. */
[dir="rtl"] .stats,
[dir="rtl"] .rating {
  direction: rtl;
}

[dir="rtl"] .rating .on-text a { direction: ltr; unicode-bidi: isolate; }

/* ---- The switcher --------------------------------------------------------
   One object: the mark and the current language live inside the same pill,
   rather than a label sitting beside a separate control. */

.lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--ui-font);
  color: inherit;
}

/* Inside the pill, on the leading edge. Not interactive, so clicks pass
   through to the select underneath it. */
.lang-picker-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

[dir="rtl"] .lang-picker-icon { left: auto; right: 12px; }

/* The pill is labelled by its own value and its mark, so the word "Language"
   is kept for screen readers only, in every position. */
.lang-picker-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lang-picker-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 980px;
  padding: 9px 30px 9px 34px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;

  /* Chevron drawn in the box so no image is needed and it inherits the colour. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

[dir="rtl"] .lang-picker-select {
  padding: 9px 34px 9px 30px;
  background-position: left 9px center, left 14px center;
}

.lang-picker-select:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-picker-select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The list itself is drawn by the OS, which uses the page's colours for it. */
.lang-picker-select option {
  color: #111;
  background: #fff;
}

[data-i18n-switcher="topbar"] { display: flex; align-items: center; }

[data-i18n-switcher="topbar"] .lang-picker-select {
  font-size: 13px;
  padding: 8px 28px 8px 31px;
}

[dir="rtl"] [data-i18n-switcher="topbar"] .lang-picker-select {
  padding: 8px 31px 8px 28px;
}

[data-i18n-switcher="topbar"] .lang-picker-icon { width: 14px; height: 14px; left: 11px; }
[dir="rtl"] [data-i18n-switcher="topbar"] .lang-picker-icon { left: auto; right: 11px; }

/* Sits between the mark and Buy, so the group at the right of the bar reads as
   one cluster of controls. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Footer -------------------------------------------------------------- */

.site-foot {
  position: relative;
  z-index: 1;
  background: #000;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--ui-font);
  font-size: 13px;
  padding: 34px clamp(16px, 4vw, 40px) 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-foot-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-foot .lang-picker-label {
  color: rgba(255, 255, 255, 0.62);
}

.site-foot-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
}

/* A machine-drafted language says so, until a person has signed it off. */
.site-foot-draft {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 980px;
  background: rgba(255, 199, 88, 0.14);
  color: #ffce7a;
  font-size: 12px;
}

.site-foot-draft:empty { display: none; }

@media (max-width: 640px) {
  .site-foot-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Emphasis in scripts without an italic ------------------------------
   Titles pick a word out with *asterisks*, which renders italic. Neither CJK nor
   Arabic has a true italic, so the browser shears the glyphs instead and it
   reads as a rendering fault rather than as emphasis.

   Chinese and Japanese get the convention those scripts actually use: a mark
   over each emphasised character. Arabic has no equivalent, so the weight the
   mark already carries does the work on its own. Both inherit the text colour,
   so a heading that was set black stays black. */
html[lang="zh"] .title-mark,
html[lang="ja"] .title-mark,
html[lang="ar"] .title-mark {
  font-style: normal;
}

html[lang="zh"] .title-mark,
html[lang="ja"] .title-mark {
  text-emphasis: filled dot currentColor;
  -webkit-text-emphasis: filled dot currentColor;
  text-emphasis-position: over right;
  -webkit-text-emphasis-position: over right;
}

/* The footer belongs to the real page. Embedded views — the admin's preview,
   the map and its cards — are framed crops of the content and should not grow
   a page-level footer inside the frame. */
.is-content-preview .site-foot,
.is-editor-preview .site-foot,
.is-map-preview .site-foot,
.is-map-card .site-foot {
  display: none;
}