/* ── WildLegacy — регистрация: надстройка над css/login.css ──
   Токены, стекло, поля, кнопка и мобильная механика карточки приходят из
   login.css; здесь только отличия register: карточка по центру (нет боковой
   панели и нижней навигации), подсказки и inline-ошибки полей.            */

/* Карточка по центру + собственный скролл: полей больше, чем у логина,
   на невысоких ноутбуках карточка выше вьюпорта. */
.register-card {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 36px 34px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.register-card::-webkit-scrollbar { width: 6px; }
.register-card::-webkit-scrollbar-track { background: transparent; }
.register-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .25);
  border-radius: 3px;
}

/* Чуть плотнее вертикальный ритм, чем у логина */
.register-card .pills { margin: 22px 0 24px; }

/* Подсказка под полем — видна всегда (формат ника, требования пароля) */
.field-hint {
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .48);
}

/* Inline-ошибка поля (показывается по мере ввода, не только на submit) */
.field-error {
  display: none;
  margin: 6px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #ffb4b4;
}
.field-error.visible { display: block; }

/* Ошибка вытесняет подсказку того же поля (иначе «Минимум 6 символов»
   дублируется хинтом и ошибкой). Без :has — безвредное дублирование. */
.input-group:has(.field-error.visible) .field-hint { display: none; }

.auth-input.is-invalid { border-color: rgba(239, 94, 94, .70); }
.auth-input.is-invalid:focus {
  border-color: rgba(239, 94, 94, .85);
  box-shadow: 0 0 0 4px rgba(239, 94, 94, .16);
}

/* Мобилка: login.css прижимает низ карточки над нижней навигацией (102px) —
   у регистрации навигации нет, отдаём эту полосу карточке. */
@media (max-width: 560px) {
  .register-card {
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    max-height: none;
  }
}