/* The language menu (5 Nov 2026): a quiet two-letter code in the bar, the app's languages in their own names. */
.lang-pick { position: relative; }
.lang-pick summary { list-style: none; cursor: pointer; padding: 6px 0; font-size: 12px; font-weight: 500; letter-spacing: .2em;
  color: rgba(242,244,242,.68); transition: color 200ms var(--ease); -webkit-user-select: none; user-select: none; }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; vertical-align: 2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .7; }
.lang-pick summary:hover, .lang-pick summary:focus-visible, .lang-pick[open] summary { color: var(--ink); }
.lang-pick ul { position: absolute; top: calc(100% + 10px); inset-inline-end: -14px; z-index: 60; margin: 0; padding: 8px 0; list-style: none;
  min-width: 168px; max-height: min(70vh, 520px); overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(6,9,11,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.lang-pick a { display: block; padding: 8px 18px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; letter-spacing: .01em; }
.lang-pick a:hover, .lang-pick a:focus-visible { color: var(--ink); background: rgba(242,244,242,.05); }
.lang-pick a[aria-current] { color: var(--gold); }
[dir="rtl"] .topbar .links { margin-left: 0; margin-right: 44px; }
[dir="rtl"] .topbar .acts { margin-left: 0; margin-right: auto; }
/* Arabic and Hindi letters join, so the bar's wide letter spacing would break the words apart. */
html[lang="ar"] body *, html[lang="hi"] body * { letter-spacing: 0 !important; }
/* Before Play on a translated page (Louis, 5 Nov): the examples are English, he works in your language. */
.room-lang { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 28px 28px 120px; text-align: center; background: rgba(3,6,8,.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none; transition: opacity 400ms var(--ease), visibility 400ms; }
.room-lang p { max-width: 26ch; margin: 0; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.4; color: var(--ink); }
.room-play { z-index: 3; }
.room[data-state="playing"] .room-lang, .room[data-state="paused"] .room-lang, .room[data-state="ended"] .room-lang { opacity: 0; visibility: hidden; }
/* Right to left, the newsletter's hidden spam trap (left: -9999px) would widen the page into a sideways scroll on phones. */
[dir="rtl"] .gotcha { left: auto !important; right: -9999px !important; }
html[dir="rtl"], html[dir="rtl"] body { overflow-x: clip; }