/* Общая политика для того, что иначе рисуют браузер и операционная система.
   Подключается после CSS страницы на всех четырёх публичных страницах и в
   игровом клиенте. Здесь только то, что должно выглядеть одинаково везде;
   размеры и раскладка конкретных экранов остаются в их файлах. */

/* ─────────── полосы прокрутки ───────────

   Класс, а не `*::-webkit-scrollbar`: политику получают только контейнеры с
   видимой полосой. Глобальный селектор задел бы `.gallery-track`, где полоса
   спрятана намеренно, и всякий будущий скроллер — молча и не там, где надо.

   Стилизация вебкитовой полосы делает две вещи сразу. Красит её — и отменяет
   накладной режим macOS: полоса становится постоянной и занимает место, как в
   Windows и Linux. То есть расхождение в раскладке (там жёлоб съедает ширину
   панели, здесь нет) закрывается тем же действием, что и расхождение в цвете. */
.scrollable::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollable::-webkit-scrollbar-track {
  background: #151a24;
  border-left: 1px solid #3a4558;
}
.scrollable::-webkit-scrollbar-thumb {
  background: #3a4558;
  border: 2px solid #151a24;
  border-radius: 0;
}
.scrollable::-webkit-scrollbar-thumb:hover {
  background: #55617a;
}
.scrollable::-webkit-scrollbar-corner {
  background: #151a24;
}

/* Firefox вебкитовых псевдоэлементов не знает. Стандартные свойства дают цвет и
   толщину, но не форму, поэтому там полоса останется системной по рисунку —
   принято сознательно, свой скроллер поверх `overflow: hidden` не пишем.

   Условие обязательно: в Chromium `scrollbar-color` на элементе ОТКЛЮЧАЕТ на
   нём `::-webkit-scrollbar`, и без `@supports` правила выше просто не доедут. */
@supports not selector(::-webkit-scrollbar) {
  .scrollable {
    scrollbar-color: #3a4558 #151a24;
    scrollbar-width: thin;
  }
}

/* ─────────── фокус с клавиатуры ───────────

   Единственное место, где это правило живёт. Раньше оно было в `lobby.css` и
   `landing.css`, а в `game.css` не было вовсе — игровой экран показывал то, что
   нарисует движок: Chrome свою чёрно-белую обводку, Safari свечение
   `-webkit-focus-ring-color`, которое следует системному акцентному цвету
   macOS, Firefox своё. */
:focus-visible {
  outline: 2px solid #e0a23a;
  outline-offset: 2px;
}

/* ─────────── выделение текста ───────────

   Не было задано ни в одном файле, поэтому двойной клик по подписи кнопки
   красил её системным цветом — на macOS тем же настраиваемым акцентом.
   `#3a4558` — та же линия, что у панелей и у ползунка выше. */
::selection {
  background: #3a4558;
  color: #e7e1d3;
}

/* ─────────── подсветка тапа ───────────

   Стояла только на лендинге. Без неё тап по кнопке вспыхивает платформенным
   цветом: синим в Android Chrome, серым в iOS Safari. */
button,
a,
[role="option"] {
  -webkit-tap-highlight-color: transparent;
}

/* ─────────── числовое поле ───────────

   Поле остаётся `type="number"`, снимается только рисование: стрелки-спиннеры
   Chrome показывает по наведению, Firefox держит всегда, Safari рисует
   по-своему — из-за этого полезная ширина поля разная в трёх движках, а на
   узкой колонке лобби это заметно. */
.stepper {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.stepper[hidden] {
  display: none;
}
.stepper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  flex: 1;
  min-width: 0;
  border-radius: 4px 0 0 4px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-button {
  flex: 0 0 auto;
  width: 30px;
  padding: 0;
  background: #1d2433;
  color: #9ea6b3;
  border: 1px solid #3a4558;
  border-left: 0;
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.stepper-button:last-child {
  border-radius: 0 4px 4px 0;
}
.stepper-button:hover {
  background: #2a344a;
  color: #e7e1d3;
}
/* `disabled` стоит на поле, а не на кнопках: гасим их вслед за ним, чтобы
   выключенный контрол не предлагал действие, которого не выполнит. */
.stepper:has(input:disabled) .stepper-button {
  opacity: 0.45;
  cursor: default;
}
.stepper:has(input:disabled) .stepper-button:hover {
  background: #1d2433;
  color: #9ea6b3;
}

/* ─────────── флажок ───────────

   Единственный `type="checkbox"` в клиенте — «по прибытии» под маршем.
   Нативный он рисуется тремя движками по-разному и берёт системный акцентный
   цвет, как слайдер; здесь снято рисование и задан свой квадрат в палитре
   кнопок. Состояние и клавиатура остаются у самого `input`. */
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ea6b3;
  font-size: 12px;
}
.check-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  background: #151a24;
  border: 1px solid #3a4558;
  border-radius: 3px;
  display: grid;
  place-content: center;
}
.check-row input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #e0a23a;
  transform: scale(0);
}
.check-row input[type="checkbox"]:checked::before {
  transform: scale(1);
}
/* Смешанное состояние группы: полоска вместо квадрата. */
.check-row input[type="checkbox"]:indeterminate::before {
  transform: scale(1);
  height: 2px;
}
.check-row input[type="checkbox"]:checked,
.check-row input[type="checkbox"]:indeterminate {
  border-color: #c78232;
}
.check-row input[type="checkbox"]:disabled {
  opacity: 0.45;
}
.check-row:has(input:disabled) {
  opacity: 0.7;
}

/* ─────────── выпадающий список ───────────

   Нативный `<select>` остаётся в разметке хранилищем вариантов и значения.
   `display: none` убирает его и с экрана, и из дерева доступности, иначе
   скринридер прочитал бы контрол дважды. */
.listbox-source {
  display: none !important;
}
.listbox {
  position: relative;
  min-width: 0;
}
.listbox[hidden] {
  display: none;
}
.listbox-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: #151a24;
  color: #e7e1d3;
  border: 1px solid #3a4558;
  border-radius: 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.listbox-button:hover:not(:disabled) {
  border-color: #4a5568;
}
.listbox-button[aria-expanded="true"] {
  border-color: #e0a23a;
}
.listbox-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.listbox-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listbox-caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  color: #9ea6b3;
}

/* Список лежит в `body` и позиционируется от прямоугольника кнопки. Внутри
   `.details-body` с `overflow-y: auto` абсолютный список обрезался бы у нижнего
   края панели, и закрытие на `scroll` этого не лечит: дефект видно раньше. */
.listbox-list {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 3px;
  overflow-y: auto;
  list-style: none;
  background: #232c3e;
  border: 1px solid #3a4558;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.55);
  font: inherit;
}
.listbox-list[hidden] {
  display: none;
}
.listbox-list:focus {
  outline: none;
}
.listbox-option {
  padding: 6px 9px;
  border-radius: 3px;
  color: #e7e1d3;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listbox-option[aria-selected="true"] {
  color: #e0a23a;
}
/* Клавиатура и мышь ведут одну и ту же подсветку, поэтому это класс, а не
   `:hover`: иначе на стрелках подсвечивалось бы два места сразу. */
.listbox-option.is-active {
  background: #2e3a4f;
}

/* ─────────── подсказка ───────────

   Вместо `title=`, который рисует система: задержку, форму, цвет и шрифт
   выбирает ОС, а на тач-экране подсказка не появляется вовсе. Одна плашка на
   страницу, в `body` и `position: fixed`: псевдоэлемент у самой цели уезжал
   за верх окна над топбаром и обрезался внутри прокручиваемой панели. Ставит
   её и показывает `js/widgets/tooltip.js` — по наведению и по `:focus-visible`,
   то есть человек с клавиатуры тоже узнаёт, что это за кнопка. */
.tooltip {
  position: fixed;
  z-index: 70;
  max-width: 260px;
  padding: 5px 8px;
  background: #0a0f17;
  color: #e7e1d3;
  border: 1px solid #3a4558;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}
.tooltip[hidden] {
  display: none;
}

/* Текст для чтеца, которого не видно глазом. Нужен там, где подпись жила
   только в `title` и вместе с ним ушла бы из озвучки. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────── взведённое подтверждение ───────────

   Красный уже значит «уход или отмена»: `.game-button--quiet:hover` и
   `.button--quiet:hover` красятся им же. Взведённая кнопка не изобретает новый
   язык, а договаривает свой. */
.is-armed {
  background: #a83a32 !important;
  border-color: #c9483c !important;
  color: #fff !important;
}
/* Language uses the same custom listbox as maps and bots. Each page decides
   only where this compact control sits. */
.language-picker {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  min-width: 0;
}

.language-picker-label {
  color: #9ea6b3;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.language-picker .listbox {
  flex: 0 0 8rem;
  width: 8rem;
}

.language-picker .listbox-button {
  padding: 0.4rem 0.55rem;
}

.language-picker [data-language-error]:empty {
  display: none;
}

.language-picker [data-language-error] {
  color: #e06d6d;
  font-size: 0.72rem;
}

/* ─────────── версия ───────────

   Мелкая подпись в правом углу шапки на лендинге, в лобби и в игре: `vX.Y`,
   подставляется сервером при рендере страницы (`{{meta.version}}`), тот же
   номер, что отдаёт `/api/version`. Ни ссылки, ни подсказки — ориентир для
   отчёта об ошибке, не элемент управления. */
.app-version {
  color: #6f7887;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  user-select: text;
}