/*
 * ОКНО ВЫБОРА ЯЗЫКА (первый заход и смена языка в настройках) — стили скрипта language-picker.js.
 *
 * Файл лежит в public/ui и подключён из <head> index.html, а не импортируется из TS: окно
 * показывается раньше, чем загрузятся модули игры, поэтому и стили обязаны приехать отдельно.
 * Окно живёт в document.body ПОВЕРХ экрана загрузки, а не в #ui. Токены интерфейса (--ink-2,
 * --pad-4 …) на первом кадре ещё не розданы — у каждого свой запасной цвет/размер, окно
 * выглядит так же, а когда токены появляются, подхватывает их.
 */

/*
 * Фон и логотип — В ТОЧНОСТИ те же, что у экрана загрузки (`index.html`): случайная фотография
 * (`--loader-bg`, ставится на `:root` ОДНИМ инлайн-скриптом на оба экрана — окно выбора рисуется
 * до его собственных модулей, поэтому переменная приходит извне) со светлой вуалью поверх и
 * текстура панелей (`--ui-texture`, `systems/UiSkinConfig.ts`, тоже накладывается ДО этого модуля
 * — см. `applyUiSkinVars()` в main.ts). Раньше окно было сплошным тёмным экраном без единой
 * приметы игры — переход «загрузка → выбор языка → снова загрузка» читался как ДВЕ РАЗНЫЕ
 * страницы; теперь фон и знак не меняются между ними, и меняется только карточка посередине.
 */
.ui-lang {
  position: fixed;
  inset: 0;
  isolation: isolate;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pad-5, 24px);
  overflow-y: auto;
  padding: var(--pad-4, 16px);
  padding-top: calc(var(--pad-4, 16px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--pad-4, 16px) + env(safe-area-inset-bottom, 0px));
  background-color: #d8d8d8;
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), var(--loader-bg, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--fg, #e9e9e9);
  font-family: var(--font, ui-sans-serif, 'Segoe UI', Roboto, system-ui, sans-serif);
}

/* Текстура панелей поверх фото, под содержимым — тот же приём, что `#loader::before`/`.ui-surface::before`. */
.ui-lang::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ui-texture, none);
  background-size: var(--ui-texture-size, auto);
  background-repeat: repeat;
  opacity: var(--ui-texture-opacity, 0);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Знак игры над карточкой — тот же файл и та же техника маски, что на экране загрузки. */
.ui-lang__logo {
  flex: none;
  inline-size: min(320px, 70%);
  aspect-ratio: 1200 / 324;
  background-color: #000;
  -webkit-mask: url('/ui/logo.svg') center / contain no-repeat;
  mask: url('/ui/logo.svg') center / contain no-repeat;
}

.ui-lang__box {
  position: relative;
  inline-size: min(560px, 100%);
  max-block-size: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pad-4, 16px);
  padding: var(--pad-5, 24px) var(--pad-4, 16px);
  border-radius: var(--r-lg, 14px);
  background: var(--ink-2, #191919);
  box-shadow: var(--elev-float, 0 12px 32px -12px #000);
}

.ui-lang__title {
  margin: 0;
  text-align: center;
  font-size: var(--fs-lg, 18px);
  font-weight: 600;
  line-height: 1.35;
}

.ui-lang__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pad-2, 8px);
}

.ui-lang__opt {
  display: flex;
  align-items: center;
  gap: var(--pad-3, 12px);
  min-block-size: 52px;
  padding: var(--pad-2, 8px) var(--pad-3, 12px);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: var(--r-md, 8px);
  background: var(--ink-3, #222222);
  color: inherit;
  font: inherit;
  font-size: var(--fs-md, 15px);
  text-align: start;
  cursor: pointer;
  transition: background var(--t-fast, 90ms) var(--ease, ease), border-color var(--t-fast, 90ms) var(--ease, ease);
}

.ui-lang__opt:hover {
  background: var(--ink-4, #2e2e2e);
}

.ui-lang__opt[aria-checked='true'] {
  border-color: var(--accent, #4c7dff);
  background: var(--ink-4, #2e2e2e);
  box-shadow: 0 0 0 1px var(--accent, #4c7dff) inset;
}

/* Флаг — картинка фиксированной пропорции: рамка отделяет светлые полосы от тёмной панели. */
.ui-lang__opt svg {
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 20px;
  border-radius: 2px;
  outline: 1px solid var(--line, rgba(255, 255, 255, 0.07));
}

.ui-lang__ok {
  min-block-size: 48px;
  padding: var(--pad-2, 8px) var(--pad-4, 16px);
  border: 1px solid var(--accent, #4c7dff);
  border-radius: var(--r-md, 8px);
  background: var(--accent, #4c7dff);
  color: #fff;
  font: inherit;
  font-size: var(--fs-md, 15px);
  font-weight: 600;
  cursor: pointer;
}

.ui-lang__ok:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .ui-lang__opt {
    transition: none;
  }
}

/* Крестик — только в режиме смены языка из настроек: на первом заходе отказаться не от чего. */
.ui-lang__cancel {
  position: absolute;
  inset-block-start: var(--pad-2, 8px);
  inset-inline-end: var(--pad-2, 8px);
  min-inline-size: 44px;
  min-block-size: 44px;
  border: 0;
  border-radius: var(--r-md, 8px);
  background: transparent;
  color: var(--fg-2, #ababab);
  font: inherit;
  font-size: var(--fs-lg, 18px);
  cursor: pointer;
}

.ui-lang__cancel:hover {
  background: var(--ink-4, #2e2e2e);
  color: var(--fg, #e9e9e9);
}