/* The language switcher in the header, and the fonts for Korean, Chinese and Japanese.
   Archivo, Gochi Hand and VT323 have no Korean, Chinese or Japanese letters, so each stack falls back to the system's
   own face for those letters while Latin letters and numbers keep the brand fonts. */

.lang { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1.5px solid rgba(251, 248, 239, .28); background: rgba(0, 0, 0, .18); }
.lang a { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2;
  color: var(--label); opacity: .72; text-decoration: none; white-space: nowrap; }
.lang a:hover { opacity: 1; }
.lang a[aria-current="true"] { opacity: 1; color: var(--ink); background: var(--label); }
.lang a:focus-visible { outline: 3px solid var(--sticker, #ffd83a); outline-offset: 1px; opacity: 1; }
.lang .l-short { display: none; }
.lang a:lang(ko), .lang a:lang(zh-CN), .lang a:lang(ja) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", var(--ui); }
.bar > .lang + .snd { margin-left: 0; }

/* The header only has room for the full names on a wide screen; narrower, the pill shows EN 한 中 日. */
@media (max-width: 1219px) and (min-width: 521px) {
  .lang .l-full { display: none; }
  .lang .l-short { display: inline; }
  .lang a { padding: 4px 8px; }
}
@media (max-width: 1159px) and (min-width: 861px) {
  /* On the landing page there is not enough room beside the menu here: the pill takes a slim row of its own, so the
     main row stays as it was. The app's header already has a second row for its tabs. */
  .bar:not(:has(> nav.tabs)) > .lang { order: 5; margin: -8px 0 0 auto; }
}
@media (max-width: 860px) {
  .bar > .lang { margin-left: auto; }
  .bar > .lang ~ .snd, .bar > .lang ~ .btn { margin-left: 0; }
}
@media (max-width: 520px) {
  /* On a phone the header row is full: the switcher drops to its own small row under the menu. */
  .bar > .lang { order: 4; margin: 0 auto; }
  .bar > .lang ~ .snd { margin-left: auto; }
  .lang a { padding: 4px 10px; }
}

:root[lang="ko"] {
  --ui: Archivo, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --hand: "Gochi Hand", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", cursive;
}
:root[lang="zh-CN"] {
  --ui: Archivo, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --hand: "Gochi Hand", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", cursive;
}
:root[lang="ja"] {
  --ui: Archivo, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --hand: "Gochi Hand", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", cursive;
}
/* Korean keeps words whole when a line wraps; Chinese wraps between characters as usual. */
:root[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

/* The VT323 places (the terminal, the arcade board, the Bear Den, badges) get the same fallbacks. */
:root[lang="ko"] :is(.t-head, .t-status, .t-cols, .t-tabs button, .t-table th, .t-keys, .t-paused, .t-frames button, .arc-title, .arc-hall h4, .den-tk, .t-badges-k, .t-badges-none, .t-badge, #tWatch .tw-bear),
:root[lang="ko"] .arcade, :root[lang="ko"] .arcade * {
  font-family: VT323, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-monospace, monospace;
}
:root[lang="zh-CN"] :is(.t-head, .t-status, .t-cols, .t-tabs button, .t-table th, .t-keys, .t-paused, .t-frames button, .arc-title, .arc-hall h4, .den-tk, .t-badges-k, .t-badges-none, .t-badge, #tWatch .tw-bear),
:root[lang="zh-CN"] .arcade, :root[lang="zh-CN"] .arcade * {
  font-family: VT323, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-monospace, monospace;
}
:root[lang="ja"] :is(.t-head, .t-status, .t-cols, .t-tabs button, .t-table th, .t-keys, .t-paused, .t-frames button, .arc-title, .arc-hall h4, .den-tk, .t-badges-k, .t-badges-none, .t-badge, #tWatch .tw-bear),
:root[lang="ja"] .arcade, :root[lang="ja"] .arcade * {
  font-family: VT323, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", ui-monospace, monospace;
}

/* Korean, Chinese and Japanese read best a touch less stretched: the brand's wide display cut is for Latin letters. */
:root[lang="ko"] :is(h1, h2, h3, .ttl), :root[lang="zh-CN"] :is(h1, h2, h3, .ttl), :root[lang="ja"] :is(h1, h2, h3, .ttl) { letter-spacing: 0; }
/* Japanese wraps like Chinese, but never before small kana or closing punctuation. */
:root[lang="ja"] body { line-break: strict; }

/* The note at the top of a translated Terms or Privacy page. */
.legal .governs { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 216, 58, .12);
  border: 1px solid rgba(255, 216, 58, .45); font-size: 15px; line-height: 1.5; }