/* ==========================================================================
   Frontline — громкая обратная связь форм входа, регистрации и кабинета.

   Причина существования файла: базовые стили рисовали ошибку бледной строкой
   в 13px под полем и полупрозрачным баннером по центру карточки. Человек,
   зашедший в дверь игрока с аккаунтом владельца арены, физически не замечал,
   что ему ответили, и считал форму сломанной.

   Здесь ошибка перестаёт быть подписью и становится объектом: рамка в 2px,
   жёсткая тень со смещением (язык темы reborn), иконка, полужирный текст и
   короткий толчок при появлении. Поле с ошибкой обводится кольцом, чтобы его
   было видно даже боковым зрением.

   Подключается только на страницах форм аккаунта: /auth, /player-auth,
   /account. Магазин и загрузки продолжают жить на своих стилях.
   ========================================================================== */

.auth-page,
.account-page {
  --fl-error-ink: var(--reset-ink-danger, #ff6b6b);
  --fl-error-line: var(--reset-danger, #f06a6a);
  --fl-error-wash: color-mix(in srgb, var(--reset-danger, #f06a6a) 16%, transparent);
  --fl-warn-ink: var(--reset-ink-warn, #ffd166);
  --fl-warn-line: var(--reset-warn, #ffc02e);
  --fl-warn-wash: color-mix(in srgb, var(--reset-warn, #ffc02e) 18%, transparent);
  --fl-ok-ink: var(--reset-ink-ok, #46c98b);
  --fl-ok-line: var(--reset-ok, #46c98b);
  --fl-ok-wash: color-mix(in srgb, var(--reset-ok, #46c98b) 16%, transparent);
}

/* Браузеры без color-mix() получают простые полупрозрачные заливки. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .auth-page,
  .account-page {
    --fl-error-wash: rgba(240, 106, 106, .16);
    --fl-warn-wash: rgba(255, 192, 46, .18);
    --fl-ok-wash: rgba(70, 201, 139, .16);
  }
}

/* ==========================================================================
   1. БАННЕР НАД ФОРМОЙ

   Скрипт ставит display:flex инлайном, поэтому раскладка описана здесь как
   flex — сам блок остаётся display:none до первого сообщения.
   ========================================================================== */

.auth-page .auth-alert {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 2px solid var(--fl-error-line) !important;
  border-left-width: 7px !important;
  border-radius: 14px;
  background: var(--fl-error-wash) !important;
  color: var(--fl-error-ink) !important;
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

.auth-page .auth-alert__icon {
  flex: none;
  margin-top: 1px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.auth-page .auth-alert__text {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-page .auth-alert.warning {
  border-color: var(--fl-warn-line) !important;
  background: var(--fl-warn-wash) !important;
  color: var(--fl-warn-ink) !important;
}

.auth-page .auth-alert.success {
  border-color: var(--fl-ok-line) !important;
  background: var(--fl-ok-wash) !important;
  color: var(--fl-ok-ink) !important;
}

/* ==========================================================================
   2. ОШИБКА ПОЛЯ

   Скрипты выставляют display:block, поэтому иконка — inline-block ::before,
   а не flex-ребёнок: так строка остаётся одним блоком и не ломает сетку
   .form-field { display: grid }.
   ========================================================================== */

.auth-page .field-error,
.account-page .field-error {
  margin-top: 6px;
  padding: 9px 12px 9px 11px;
  border: 2px solid var(--fl-error-line) !important;
  border-left-width: 6px !important;
  border-radius: 10px;
  background: var(--fl-error-wash) !important;
  color: var(--fl-error-ink) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  line-height: 1.4;
}

.auth-page .field-error::before,
.account-page .field-error::before {
  content: "\f071";
  display: inline-block;
  margin-right: 8px;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

/* Пустой элемент всё равно должен молчать: скрипты гасят его через
   display:none, но подстраховка нужна для разметки без inline-стиля. */
.auth-page .field-error:empty,
.account-page .field-error:empty {
  display: none !important;
}

/* ==========================================================================
   3. ПОЛЕ, КОТОРОЕ НЕ ПРИНЯЛИ

   Кольцо вокруг поля читается периферийным зрением — именно его не хватало,
   когда ошибка была только подписью снизу.
   ========================================================================== */

.auth-page input.has-error,
.auth-page select.has-error,
.auth-page textarea.has-error,
.account-page input.has-error,
.account-page select.has-error,
.account-page textarea.has-error {
  border-color: var(--fl-error-line) !important;
  border-width: 2px !important;
  background: var(--fl-error-wash) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-error-line) 30%, transparent) !important;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .auth-page input.has-error,
  .auth-page select.has-error,
  .auth-page textarea.has-error,
  .account-page input.has-error,
  .account-page select.has-error,
  .account-page textarea.has-error {
    box-shadow: 0 0 0 3px rgba(240, 106, 106, .3) !important;
  }
}

.auth-page input.has-error:focus,
.auth-page textarea.has-error:focus,
.account-page input.has-error:focus,
.account-page textarea.has-error:focus {
  border-color: var(--fl-error-line) !important;
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45)),
              0 0 0 3px var(--fl-error-line) !important;
}

/* Метка поля с ошибкой тоже краснеет: reborn перекрашивает подписи в muted,
   поэтому нужен !important и здесь. */
.auth-page .form-field.has-error > label,
.account-page .form-field.has-error > label {
  color: var(--fl-error-ink) !important;
}

/* ==========================================================================
   4. ТОЛЧОК ПРИ ПОЯВЛЕНИИ

   Класс снимается и ставится заново из скрипта, поэтому анимация повторяется
   и на втором нажатии «Войти» с тем же неверным паролем.
   ========================================================================== */

@keyframes flErrorShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.fl-shake {
  animation: flErrorShake .42s cubic-bezier(.36, .07, .19, .97) both;
}

@media (prefers-reduced-motion: reduce) {
  .fl-shake { animation: none; }
}

/* ==========================================================================
   5. ЗАКРЫТАЯ ДВЕРЬ

   Владелец VR-арены, вошедший в форму игрока, раньше видел пустую карточку
   с пунктирной подписью в 13px. Теперь это отдельный экран с запретом,
   адресом аккаунта и двумя выходами.
   ========================================================================== */

.auth-blocker {
  text-align: center;
}

.auth-blocker[hidden] {
  display: none !important;
}

.auth-blocker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border: 2px solid var(--fl-error-line);
  border-radius: 18px;
  background: var(--fl-error-wash);
  color: var(--fl-error-ink);
  font-size: 1.5rem;
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
}

/* reborn-pages.css красит все заголовки внутри .frontline-reborn в кремовый
   через !important, а карточные абзацы — в muted. Отказ должен звучать иначе,
   поэтому оба правила приходится перебивать явно. */
.auth-blocker .auth-blocker__title {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--fl-error-ink) !important;
}

/* `.frontline-reborn .auth-card p` — это (0,2,1), поэтому селектор отказа
   тоже должен назвать тег: без `p` правило проигрывает по специфичности. */
.auth-card .auth-blocker p.auth-blocker__text {
  margin: 0 0 16px;
  line-height: 1.55;
  color: var(--reset-cream, inherit) !important;
}

/* Вторая строка — уже совет, а не отказ: её можно приглушить. */
.auth-card .auth-blocker p.auth-blocker__text--muted {
  color: var(--reset-muted, inherit) !important;
}

.auth-blocker__email {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 12px;
  border: 2px solid var(--fl-error-line);
  border-radius: 999px;
  background: var(--fl-error-wash);
  color: var(--fl-error-ink);
  font-weight: 700;
  font-size: .85rem;
  word-break: break-all;
}

.auth-blocker__actions {
  display: grid;
  gap: 10px;
}

/* styles.css задаёт .auth-footer { display: flex }, а собственный display
   всегда сильнее браузерного [hidden]. Для закрытой двери подвал с ссылкой
   «Выйти и заполнить позже» лишний — заполнять больше нечего. */
#panel-activate .auth-footer[hidden],
.auth-blocker__email[hidden] {
  display: none !important;
}