.languageControl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.languageControl select { width: auto; min-width: 120px; max-width: 100%; padding: 7px 9px; font: inherit; color: #f4efe3; background: #202a24; border: 1px solid #69735c; border-radius: 6px; }
.languageControl select:focus-visible { outline: 2px solid #d7ae35; outline-offset: 2px; }
.languagePicker { display: inline-flex; width: min(100%, 260px); min-width: 120px; max-width: 100%; vertical-align: middle; text-align: start; }
.languagePicker select[hidden] { display: none !important; }
.languagePickerButton { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 9px; margin: 0; border: 1px solid #69735c; border-radius: 6px; color: #f4efe3; background: #202a24; font: inherit; line-height: 1.4; text-align: start; cursor: pointer; }
.languagePickerButton:focus-visible { outline: 2px solid #d7ae35; outline-offset: 2px; }
.languagePickerFlag { flex: 0 0 24px; width: 24px; height: 18px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff30; }
.languagePickerText { min-width: 0; flex: 1 1 auto; }
.languagePickerButton .languagePickerText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.languagePickerArrow { flex: 0 0 6px; width: 6px; height: 6px; margin-inline-start: 2px; margin-inline-end: 2px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.languagePickerMenu { position: fixed; inset: auto; z-index: 2147483647; box-sizing: border-box; margin: 0; padding: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid #84916e; border-radius: 7px; color: #f4efe3; background: #202a24; box-shadow: 0 8px 24px #0009; font: 14px/1.4 system-ui, sans-serif; text-align: start; }
.languagePickerMenu[hidden] { display: none !important; }
.languagePickerOption { display: flex; align-items: center; gap: 10px; min-height: 38px; box-sizing: border-box; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.languagePickerOption.isActive { background: #43513a; outline: 1px solid #d7ae35; outline-offset: -1px; }
.languagePickerOption[aria-selected="true"] { color: #f4d16c; font-weight: 700; }
.languagePickerOption .languagePickerText { overflow-wrap: anywhere; }
.languageControl [data-language-status]:empty { display: none; }
.languageControl [data-language-status] { flex-basis: 100%; }
.lobbyLanguage { justify-content: flex-end; padding: 0 0 12px; align-self: start; }
.lobby.mainLobbyView .lobbySide { grid-template-rows: auto minmax(0, 1fr); }
.lobby.roomLobbyView .lobbySide > .lobbyLanguage { order: -1; }
.lobby.waitingGameFullscreen .lobbyLanguage { display: none !important; }
@media (min-width: 861px) { .lobby.roomLobbyView .lobbySide { grid-template-rows: auto auto minmax(0, 1fr); } }
.gameLanguage { margin-inline-start: auto; }
.gameLanguage > span:not(.languagePicker) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gameLanguage .languagePicker { width: 100%; min-width: 0; }
/* Keep translated controls separate from the full-width desktop status row. */
@media (min-width: 861px) and (min-height: 521px) and (hover: hover) and (pointer: fine),
       (min-width: 921px) and (hover: hover) and (pointer: fine) {
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .topbar {
    position: relative; inset: auto; width: calc(100% - 320px);
    display: flex; flex-wrap: wrap; align-items: center; align-content: center;
    height: auto; min-height: 0; gap: 8px 12px;
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .playerStatusBar {
    position: relative; inset: auto; width: calc(100% - 320px);
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .resourceBar {
    order: 10; flex: 0 0 100%; width: 100%; min-width: 0;
    display: grid; grid-template-columns: none; grid-template-rows: 34px;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .resource strong { flex-shrink: 1; }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .gameLanguage {
    flex: 0 1 148px; width: 148px; min-width: 120px;
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .gameLanguage select { width: 100%; min-width: 0; }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .topToggles {
    display: flex; flex: 0 0 auto; flex-wrap: wrap; max-width: 100%;
    align-self: center; padding: 0;
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .audioChannel,
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .zoomToggleControl { flex: 0 0 auto; }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .audioChannel > input[type="range"] { width: 84px; min-width: 100%; }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .hudButtonStack {
    display: inline-flex; flex-direction: row; gap: 8px;
  }
  html:not(.mobileExperience) body:not(.broadcastGameView) .game .hudButtonStack button { min-height: 34px; }
}
html[lang]:not([lang="en"]) .brandStats { flex-wrap: wrap; }
html[lang]:not([lang="en"]) button { overflow-wrap: anywhere; }
@media (max-width: 860px) { .gameLanguage { display: none; } .lobbyLanguage { justify-content: flex-start; } }
/* Translated setup controls can grow taller than the tablet grid's fixed rows. */
@media (max-width: 860px) {
  .lobby.roomLobbyView:not(.waitingGameFullscreen) {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    height: 100dvh; min-height: 100dvh; gap: 14px; overflow-x: hidden !important; overflow-y: auto !important;
  }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .brand { display: none !important; }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .setup,
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .lobbySide,
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .lobbyChat {
    grid-area: auto; position: static; width: 100%; height: auto; max-height: none !important;
    min-height: 0; flex: 0 0 auto; align-self: stretch; overflow: visible !important;
  }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .setup { order: 1; }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .lobbySide { order: 2; grid-template-rows: auto auto; }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .lobbyChat { order: 3; min-height: 160px; }
  .lobby.roomLobbyView:not(.waitingGameFullscreen) .roster { max-height: none; overflow: visible; }
}
html[data-language-pending] body > :not(#frontierLanguageGate), html[data-language-pending] body > :not(#frontierLanguageGate) * { visibility: hidden !important; }
#frontierLanguageGate { position: fixed; inset: 0; z-index: 2147483647; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; background: #111811; color: #f5f0df; font: 1.1rem/1.5 system-ui, sans-serif; text-align: center; }
#frontierLanguageGate button { padding: .6rem 1.2rem; border: 1px solid #a68d4d; border-radius: .4rem; background: #293329; color: inherit; font: inherit; cursor: pointer; }
#frontierLanguageGate select { width: min(100%, 22rem); padding: .6rem 1rem; border: 1px solid #a68d4d; border-radius: .4rem; background: #293329; color: inherit; font: inherit; }
#frontierLanguageGate .languagePicker { width: min(100%, 22rem); }
#frontierLanguageGate .languagePickerButton { padding: .6rem 1rem; }
/* Keep physical game geometry, desktop status rows, mobile controls and TV
   canvases in their established order. Only text-bearing UI reads RTL. */
html[dir="rtl"] body { direction: ltr; }
html[dir="rtl"] [data-language-text] { direction: rtl; unicode-bidi: isolate; }
html[dir="rtl"] :is(p, h1, h2, h3, h4, li, dt, dd)[data-language-text] { text-align: start; }
html[dir="rtl"] :is(select:not([data-language-select]), textarea) { direction: rtl; }
.languagePicker, .languagePickerMenu, .languagePickerOption, .languagePickerButton { direction: ltr; }
.languagePickerText { unicode-bidi: isolate; text-align: start; }
/* Names/chat choose their own paragraph direction. Do not treat the language
   picker's untranslated wrapper or the loading gate as user-authored text. */
html[dir="rtl"] :is([translate="no"]:not(.languagePicker):not(.languagePickerMenu):not(#frontierLanguageGate), #roomTitle, .roomRow strong, .playerStatusName, .gamePlayerKickIdentity strong, #mobileContinue small) { unicode-bidi: plaintext; }
html[dir="rtl"] :is(#nameInput, #roomNameInput, #roomNamePlayerInput, #chatInput, #developerMessageInput) { unicode-bidi: plaintext; direction: ltr; }
html[dir="rtl"] :is(#roomTimer, #turnClock, #gameClock, #replayFrameText, #replaySpeedText, #replayScrubber, input[type="number"], input[type="range"], #neutralInput, [data-language-number], [data-language-date], [data-language-duration]) { direction: ltr; unicode-bidi: isolate; }