/* ==========================================================================
   lang-picker.css -- the globe's language menu on the game pages (RDDW-195).

   Loaded by the edge only where the menu exists (a page with more than EN/HE
   switched on, or a preview off production); see js/lang-picker.js. The
   button keeps the look each design gives .lang-toggle and gains a small
   chevron; the menu drops under it, inside the screen at 320 px, in either
   direction. Steady: no transition, no animation (Daniel's rule).

   Being the one sheet the edge adds to every page with the extra languages,
   it also carries what those languages need from the page around the menu
   (the end of this file).
   ========================================================================== */
.lang-pick { position: relative; display: inline-flex; flex: none; }
/* The edge wraps the button in .lang-pick, so the wrapper is the bar's flex item now, not the
   button. On the home page and /about the designs push the three buttons to the bar's end with an
   auto margin on #navbar's .lang-toggle (index.html and about.html under 900px, css/v2-home.css and
   css/v2-skin.css above); inside the wrapper that margin pushed nothing, and the buttons sat right
   after the logo with a gap at the end, on phones and desktops alike (Daniel's iPhone, 21 Oct 2026).
   The wrapper carries it wherever the designs give it: everywhere but 901-1069px with five or more
   links, where the links' own auto margins centre them between the logo and the buttons. */
#navbar > .lang-pick { margin-inline-start: auto; }
@media (min-width: 901px) and (max-width: 1069px) {
  #navbar:has(.nav-links > li:nth-child(5)) > .lang-pick { margin-inline-start: 0; }
}
.lang-pick > .lang-toggle::after {
  content: "";
  flex: none;
  width: .36em;
  height: .36em;
  margin-inline-start: .15em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.14em) rotate(45deg);
  opacity: .8;
}
.lang-pick > .lang-toggle[aria-expanded="true"]::after { transform: translateY(.12em) rotate(225deg); }
/* Phones: the globe and the chevron only. The language's name is longer than today's EN/HE label
   ("עברית"), and on a 360 px screen it pushed into COLOR DRAIN (RDDW-135 keeps the wordmark clear
   of this button). The button's accessible name still says the language ("Language: English"),
   and the menu names every language. */
@media (max-width: 720px) {
  .lang-pick #lang-label { display: none; }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 1000;
  box-sizing: border-box;
  min-width: 210px;
  max-width: min(300px, calc(100vw - 32px));
  margin: 0;
  padding: 6px;
  background: #1B1B3A;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  text-align: start;
}
.lang-pick[data-side="right"] > .lang-menu { right: 0; left: auto; }
.lang-pick[data-side="left"] > .lang-menu { left: 0; right: auto; }
/* js/lang-picker.js measures how far the menu would cross the screen's edge and sets the shift back */
.lang-pick[data-side] > .lang-menu { translate: var(--lang-shift, 0px) 0; }
.lang-menu[hidden] { display: none !important; }
.lang-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-menu li { margin: 0; padding: 0; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  /* break-word, not anywhere: "anywhere" let the menu shrink to its 210px floor and then split a
     word to fit, so the current language's tick pushed the ")" of "(Latinoamérica)" onto a line of
     its own (Daniel's iPhone, 21 Oct 2026). Now the menu is at least as wide as its longest word. */
  overflow-wrap: break-word;
}
.lang-menu a:hover { background: rgba(255, 255, 255, .08); }
/* 21 Oct 2026 (Daniel: "switch languages, but nicely"): each language wears its short code (EN, HE,
   ES, PT, ID, HI) and, under its own name, its name in English for someone who cannot read the
   script. Still no flags (a flag is a country, not a language) and still no motion. */
.lang-menu .lang-code {
  flex: none;
  min-width: 2.5em;
  padding: 3px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .86);
  font: 700 11px/1.3 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  letter-spacing: .05em;
  text-align: center;
}
.lang-menu a[aria-current="true"] .lang-code { background: #FFD84A; color: #12122A; }
.lang-menu .lang-names { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; }
.lang-menu .lang-en { font-size: 12px; font-weight: 500; line-height: 1.3; opacity: .62; }
.lang-menu a:focus-visible { outline: 2px solid #5B9BD5; outline-offset: -2px; }
.lang-menu a[aria-current="true"]::after {
  content: "";
  flex: none;
  width: .32em;
  height: .66em;
  margin-inline-start: auto;
  border-right: 2px solid #FFD84A;
  border-bottom: 2px solid #FFD84A;
  transform: rotate(45deg) translate(-.1em, -.1em);
}

/* Off production only: a language that is not reviewed yet says so on the page. */
.lang-draft {
  position: fixed;
  z-index: 2147483000;
  inset-inline-end: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 100px);
  padding: 6px 12px;
  border-radius: 999px;
  background: #FFD84A;
  color: #12122A;
  font: 700 12px/1.3 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* Hindi: no letter-spacing. Devanagari joins its letters under one headline (the shirorekha), and
   any tracking cuts it into pieces, the way the header's "मोबाइल गेम स्टूडियो" came apart on Daniel's
   iPhone (21 Oct 2026); the designs track their labels, buttons and titles everywhere, often with
   !important under an id. Inside a layer, an !important declaration outranks every unlayered one
   whatever its selector, so one rule covers them all; an element marked as another language
   (lang="en") keeps its own spacing. */
@layer rdd-scripts {
  :lang(hi) { letter-spacing: 0 !important; }
}

@media (forced-colors: active) {
  .lang-menu { border: 1px solid CanvasText; }
  .lang-menu a[aria-current="true"] { text-decoration: underline; }
  .lang-menu a[aria-current="true"]::after { border-color: CanvasText; }
  .lang-menu .lang-code { border: 1px solid CanvasText; }
}