/* ==========================================================================
   css/i18n.css — the language flag (DECISIONS 328, js/i18n.js langPicker)
   --------------------------------------------------------------------------
   In the top bar (dark) and on the login page (light, next to the Wiki pill).
   The menu is always the game's dark panel.
   ========================================================================== */

.lang-picker { position: relative; display: inline-flex; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
}
.lang-btn:hover, .lang-btn:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; }
.lang-btn:focus-visible { box-shadow: var(--focus); }
.lang-flag { display: inline-flex; width: 20px; height: 14px; flex: none; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lang-flag svg { width: 100%; height: 100%; display: block; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 400;
  min-width: 150px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius-sm);
  background: var(--panel); border: var(--panel-border-strong);
  box-shadow: var(--shadow);
}
.lang-menu[hidden] { display: none; }
.lang-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.88rem; text-align: left;
  cursor: pointer;
}
.lang-item:hover, .lang-item:focus-visible { background: var(--panel-3); outline: none; }
.lang-item[aria-checked="true"] { background: var(--accent-soft); font-weight: 700; }

/* The login page: a white pill left of the Wiki pill (.auth-corner in css/layout.css places both,
   DECISIONS 440), in the light style of that page and just as high and bold. */
.auth-lang .lang-btn {
  height: 30px; min-height: 0; padding: 0 10px; font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.86); color: var(--ink);
  border-color: rgba(28, 39, 64, 0.16); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.auth-lang .lang-btn:hover, .auth-lang .lang-btn:focus-visible { background: #fff; }

/* The wiki's top bar (js/wiki-i18n.js, DECISIONS 345): left of "Play now". A .panel has a
   backdrop-filter, so each panel is its own stacking layer and the wiki column below (painted later)
   covered the open menu (owner, 24 September); the top bar is lifted above it. */
.wiki-lang { margin-right: 10px; }
.wiki-top { position: relative; z-index: 20; }

@media (max-width: 600px) {
  .topbar .lang-short { display: none; }   /* the flag alone in a tight top bar */
  .topbar .lang-btn { padding: 3px 7px; }
  .auth-lang .lang-btn { height: 28px; padding: 0 8px; font-size: 0.74rem; }
}