/* Language picker (assets/i18n.js) + the no-flash wait for a non-English page. Monochrome on purpose (chalk look). */

/* nav-boot.js adds .i18n-wait before first paint when a non-English language is saved; i18n.js removes it once the
   dictionary is applied. Failsafe: shown anyway after 1.2 s. The home page's own .loading wait (styles.css) keeps
   its 3 s failsafe, so this only starts once that's gone. */
.i18n-wait:not(.loading) main, .i18n-wait:not(.loading) .site-footer, .i18n-wait .header-inner > :not(.wordmark) { opacity: 0; animation: pg-i18n-show 0s 1.2s forwards; }
@keyframes pg-i18n-show { to { opacity: 1; } }

/* ---------- header (desktop): globe + code, opens a small list. Shares the header's last column with the follow button.
   SITE_LANGS (launch switch, assets/i18n.js) hides the languages it leaves out, and every picker when only English
   is left ([hidden]; styles.css makes that display: none). */
.lang-pick { position: relative; grid-column: 3; grid-row: 1; justify-self: end; }
.header-inner:has(> .lang-pick:not([hidden])) > .btn.follow-head { grid-column: 3; grid-row: 1; margin-right: 74px; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 64px; height: 36px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: #0b0c0e; color: #fff; font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s; }
.lang-btn .lang-ico { flex: none; width: 18px; height: 18px; object-fit: contain; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.45); }
.lang-btn:focus-visible, .lang-row button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 184px; padding: 6px; background: #0b0c0e; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85); }
.lang-pop[hidden] { display: none; }
.lang-pg { display: block; width: 56px; height: 56px; margin: 2px auto 2px; object-fit: contain; }
.lang-list { margin: 0; padding: 0; list-style: none; font: 500 0.875rem/1.2 var(--sans); outline: none; }
.lang-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 6px; color: rgba(255, 255, 255, 0.72); cursor: pointer; outline: none; white-space: nowrap; }
.lang-list li:hover, .lang-list li.on { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lang-list li:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.lang-list li[aria-selected="true"] { color: #fff; }
.lang-list li[aria-selected="true"]::after { content: "✓"; font-size: 0.8125rem; }

/* ---------- rows of buttons: inside the phone menu, and in the footer */
.lang-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 0.8125rem/1.2 var(--sans); }
.lang-row-h { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: rgba(255, 255, 255, 0.6); }
.lang-row-h .lang-ico { flex: none; width: 16px; height: 16px; object-fit: contain; }
.lang-row button { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: #0b0c0e; color: rgba(255, 255, 255, 0.75); font: inherit; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.lang-row button:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.lang-row button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0b0c0e; }
.lang-nav { display: none; }
.lang-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

@media (max-width: 900px) {
  .lang-pick { display: none; }
  .header-inner:has(> .lang-pick:not([hidden])) > .btn.follow-head { grid-column: auto; grid-row: auto; margin-right: 0; }
  .nav .lang-nav { display: flex; padding: 16px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

/* terms / privacy (translated): one line saying the English version applies if they differ */
.lang-legal-note { margin: 0 0 18px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: #0b0c0e; color: rgba(255, 255, 255, 0.8); font: 500 0.875rem/1.45 var(--sans); }

/* translated pages: headings that wrap to the full width (e.g. Japanese, no spaces) would push chalk.css's sparkle
   doodle (h2::after, right: -0.9em) past the screen edge; leave room for it. English is untouched. */
html:not([lang="en"]) #games .sec-head h2, html:not([lang="en"]) #extras .sec-head h2, html:not([lang="en"]) #recent h2 { max-width: calc(100% - 1em); }

/* translated terms / privacy: one long word in a big heading (German "Datenschutzerklärung") is wider than a 360px
   phone; let it hyphenate or break instead of scrolling the page sideways. */
html:not([lang="en"]) .doc h1, html:not([lang="en"]) .doc h2 { hyphens: auto; overflow-wrap: break-word; }