/* ==========================================================================
   Frontline — переключатель аудитории на страницах входа.

   У платформы две двери: /auth для владельцев VR-арен и /player-auth для
   игроков. Обе страницы рисуют одну и ту же карточку, поэтому переключатель
   стоит первым блоком внутри неё — человек называет себя до того, как начнёт
   что-то печатать. Плитки повторяют язык темы reborn: 2px чернильная рамка,
   жёсткая тень со смещением, заливка акцентом у выбранного варианта.
   ========================================================================== */

.auth-audience {
  margin: 0 0 18px;
}

.auth-audience__label {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--reset-muted, var(--muted, #8b9ab1));
}

.auth-audience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.auth-audience__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 13px;
  border: 2px solid var(--reset-cream, rgba(255, 255, 255, .16));
  border-radius: 14px;
  background: var(--reset-surface, rgba(255, 255, 255, .04));
  color: var(--reset-cream, var(--ink, #fff));
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.auth-audience__option:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
  text-decoration: none;
}

.auth-audience__option:focus-visible {
  outline: 3px solid var(--reset-ink-sky, #67afd1);
  outline-offset: 3px;
}

.auth-audience__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 10px;
  font-size: .95rem;
  flex: none;
}

.auth-audience__title {
  display: block;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
}

.auth-audience__hint {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  line-height: 1.35;
  font-weight: 600;
  opacity: .72;
}

/* Выбранная дверь заливается своим цветом: янтарь — бизнес, небо — игроки.
   Оба фона светлые в обеих темах, поэтому текст на них всегда тёмный. */
.auth-audience__option[aria-current="page"] {
  background: var(--reset-sun, rgba(255, 140, 43, .18));
  color: #2a200e;
  transform: none;
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
  cursor: default;
}

.auth-audience__option[data-audience="player"][aria-current="page"] {
  background: var(--reset-sky, rgba(0, 229, 255, .18));
  color: #10222b;
}

.auth-audience__option[aria-current="page"] .auth-audience__hint {
  opacity: .8;
}

.auth-audience__flag {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 8px;
  border: 2px solid var(--reset-cream, rgba(255, 255, 255, .2));
  border-radius: 999px;
  background: var(--reset-panel-raised, #1d2027);
  color: var(--reset-cream, #fff);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.auth-audience__option[aria-current="page"] .auth-audience__flag {
  display: none;
}

/* Пока идёт OAuth-возврат или человек уже внутри анкеты, выбор двери только
   мешает — он больше не относится к тому, что происходит на экране. */
html.oauth-in-progress .auth-audience,
.auth-card.is-profile-completion .auth-audience,
.auth-card.is-focus-panel .auth-audience {
  display: none !important;
}

.auth-card.is-focus-panel .auth-tabs {
  display: none !important;
}

@media (max-width: 400px) {
  .auth-audience__grid {
    grid-template-columns: 1fr;
  }

  .auth-audience__option {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .auth-audience__flag {
    right: 12px;
  }
}

/* ==========================================================================
   Развилка: человек вошёл не в ту дверь.

   Аккаунт один на всю платформу, поэтому пароль подойдёт к обеим формам.
   Вместо анкеты «назовите свою арену» игрок видит эту карточку и одну кнопку
   в свой кабинет.
   ========================================================================== */

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

.auth-crossroad__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border: 2px solid var(--reset-cream, rgba(255, 255, 255, .18));
  border-radius: 16px;
  background: var(--reset-sky, rgba(0, 229, 255, .16));
  color: #10222b;
  font-size: 1.4rem;
  box-shadow: 3px 3px 0 var(--reset-shadow, rgba(0, 0, 0, .45));
}

.auth-crossroad__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}

.auth-crossroad__text {
  margin: 0 0 20px;
  line-height: 1.55;
}

.auth-crossroad__email {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 12px;
  border: 2px solid var(--reset-cream, rgba(255, 255, 255, .16));
  border-radius: 999px;
  background: var(--reset-surface, rgba(255, 255, 255, .04));
  font-weight: 700;
  font-size: .85rem;
  word-break: break-all;
}

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

/* Подсказка под формой активации на /player-auth: владелец арены, зашедший
   в дверь игрока, должен видеть путь обратно, а не только форму никнейма. */
.auth-sidedoor {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 2px dashed var(--reset-line-strong, rgba(255, 255, 255, .28));
  border-radius: 14px;
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
}

.auth-sidedoor.is-visible {
  display: block;
}

.auth-sidedoor a {
  font-weight: 800;
  text-decoration: underline;
}

/* styles.css задаёт .auth-form { display: grid }, поэтому одного HTML-атрибута
   hidden недостаточно: author-стиль перекрывает браузерный hidden. Для
   владельца арены форма игрока должна исчезать безусловно. */
#panel-activate .auth-form[hidden],
#panel-activate .profile-completion-copy[hidden] {
  display: none !important;
}