/* Language picker: a flag and the language's own name in the navbar, opening
   a list of every edition of the current page. Shared by every page, so the
   privacy policy, which has its own small stylesheet, carries it too. The
   summary keeps the browser's own disclosure triangle, which turns when the
   panel opens, and the panel hangs from the bar rather than the summary, the
   same pattern as the nfcmint.com family header. */
.lang {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  flex: none;
}
.lang > summary {
  display: list-item;
  list-style-position: inside;
  width: fit-content;
  min-height: 44px;
  padding: 12px 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
}
.lang > summary::after { content: none; }
.lang[open] > summary, .lang > summary:hover { color: var(--gold); }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  vertical-align: top;
}
.lang-flag {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-panel {
  position: absolute;
  z-index: 120;
  top: 100%;
  right: 0;
  width: 220px;
  max-width: 100%;
  padding: 8px;
  background: var(--raised, var(--felt-deep));
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.lang-panel > nav { display: grid; }
.lang-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.lang-panel a:last-child { border-bottom: 0; }
.lang-panel a:hover { color: var(--gold); text-decoration: none; }
.lang-panel a[aria-current] {
  border-left: 3px solid var(--gold);
  padding-left: 5px;
  font-weight: 700;
}

/* The privacy policy has no navbar; a slim bar holds the way back and the
   picker. The bar is the panel's anchor there. */
.lang-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 20px 0;
}
.lang-bar .lang-home {
  font-weight: 600;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
}
.lang-bar .lang-home:hover { text-decoration: underline; }

/* In the navbar the picker sits after the links; translated labels run
   long, so the brand never wraps and the links keep tight padding. The
   nav-wrap is positioned, so the panel lines up with the bar's right edge. */
.navbar .lang { margin-left: 12px; }
.navbar .nav-brand { white-space: nowrap; }
.navbar .lang-panel { right: 20px; }

/* Once the links fold into the hamburger (style.css, 900px), the picker
   moves beside it at the right, so the button never floats mid-bar. */
@media (max-width: 900px) {
  .navbar .nav-brand { order: 0; }
  .navbar .lang { order: 1; margin-left: auto; margin-right: 12px; }
  .navbar .nav-toggler { order: 2; }
}

/* Phones: the flag and the triangle alone, the name stays for readers. */
@media (max-width: 480px) {
  .navbar .lang { margin-right: 8px; }
  .lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Chinese, Japanese, and Korean editions. Chinese and Japanese break lines
   by the strict rules, so small kana and closing punctuation never start a
   line, and Japanese headings, ledes, and intros break between phrases
   where the browser can find them. Korean keeps its words whole and breaks at the spaces. The
   display face is Great Circle Map's in every edition, and the system
   supplies the CJK characters it lacks, as on Great Circle. Display
   headings drop the negative tracking, which crowds CJK characters, and
   step down a size, since those characters fill the whole em square. */
html:lang(ja),
html:lang(zh) { line-break: strict; }
html:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:lang(ja) .section-title,
:lang(ja) .tagline,
:lang(ja) .lede,
:lang(ja) .section-intro,
:lang(ja) .card h3 { word-break: auto-phrase; }
:lang(ja) .section-title,
:lang(zh) .section-title,
:lang(ko) .section-title { font-size: 38px; letter-spacing: 0; }
:lang(ja) .games-sub,
:lang(zh) .games-sub,
:lang(ko) .games-sub { font-size: 29px; }
:lang(ja) .tagline,
:lang(zh) .tagline,
:lang(ko) .tagline { font-size: 24px; letter-spacing: 0; }
/* AppleMyungjo, the Korean serif on Apple devices, sets loose at display
   size, so Korean headings keep a slight negative tracking. */
:lang(ko) .section-title,
:lang(ko) .tagline { letter-spacing: -0.04em; }

@media (max-width: 760px) {
  :lang(ja) .section-title,
  :lang(zh) .section-title,
  :lang(ko) .section-title { font-size: 32px; }
  :lang(ja) .games-sub,
  :lang(zh) .games-sub,
  :lang(ko) .games-sub { font-size: 26px; }
  :lang(ja) .tagline,
  :lang(zh) .tagline,
  :lang(ko) .tagline { font-size: 22px; }
}

@media (max-width: 480px) {
  :lang(ja) .section-title,
  :lang(zh) .section-title,
  :lang(ko) .section-title { font-size: 27px; }
  :lang(ja) .games-sub,
  :lang(zh) .games-sub,
  :lang(ko) .games-sub { font-size: 23px; }
  :lang(ja) .tagline,
  :lang(zh) .tagline,
  :lang(ko) .tagline { font-size: 20px; }
}