/* =====================================================================
   auth.css — окна входа, регистрации и восстановления пароля.
   ---------------------------------------------------------------------
   Оформление переведено на язык сайта: тот же синий, что у панелей
   витрины, шрифт сцены с обводкой у заголовка, кнопки-«плитки» с жёсткой
   нижней тенью. Прежняя фиолетово-циановая палитра осталась только у
   окна открытия ящика (case.css) — оно живёт своей сценой.

   ВСЕ КЛАССЫ И СТРУКТУРА СОХРАНЕНЫ: разметку строит js/auth.ui.js, и
   переименование хоть одного хука сломало бы форму.
   ===================================================================== */

.au-backdrop{
  --cx-line:rgba(255,255,255,.14); --cx-line-2:rgba(255,255,255,.26);
  --cx-text:#FFFFFF; --cx-dim:#BBD6F5; --cx-glass:rgba(255,255,255,.06);
  --au-ink:#150a22;

  /* ВЫСОКОЕ ОКНО НЕ ДОЛЖНО ОБРЕЗАТЬСЯ СВЕРХУ.
     Было align-items:center — и на телефоне это ломало регистрацию:
     карточка там 923 px при экране 720, а flex-элемент, не влезающий в
     центрированный контейнер, вылезает за ОБА края сразу, причём
     прокрутка до верхнего не доезжает (у контейнера прокрутки нет
     отрицательной области). Верх с заголовком уходил под обрез, низ со
     ссылкой «Уже есть аккаунт?» — под кромку экрана, и до них было не
     добраться.
     flex-start + margin:auto на карточке центрирует ровно так же, пока
     окно помещается, а когда не помещается — отдаёт переполнение
     прокрутке, а не режет. Тем же приёмом уже вылечена панель меню
     (.nm-backdrop в menu.css), здесь он поднят в общий каркас, поэтому
     чинятся разом и вход, и пополнение, и вывод, и привязка Telegram —
     все они набраны этими же au-*.
     overscroll-behavior:contain — чтобы докрутив окно до конца, не
     начать прокручивать страницу под ним. */
  position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(47,131,253,.30), transparent 60%),
    radial-gradient(800px 600px at 12% 100%, rgba(31,170,244,.18), transparent 60%),
    rgba(3,12,40,.86);
  backdrop-filter:blur(10px);
  font-family:'Manrope',sans-serif;color:var(--cx-text);
  opacity:0;transition:opacity .28s ease;
}
.au-backdrop.show{opacity:1}

.au-card{
  /* margin:auto — вторая половина правила из .au-backdrop выше: она и
     центрирует карточку по обеим осям, пока та помещается. */
  position:relative;z-index:2;width:min(430px,100%);margin:auto;
  padding:34px 32px 30px;border-radius:20px;
  background:linear-gradient(180deg,#2555bb 0%,#12327f 60%,#0c2360 100%);
  border:3px solid rgba(0,30,170,.55);
  box-shadow:0 10px 0 #07184a, 0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(16px) scale(.98);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.05);
}
.au-backdrop.show .au-card{transform:none}

.au-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#0f3f9e,#0a2c72);
  border:2px solid rgba(255,255,255,.18);color:#fff;
  box-shadow:0 3px 0 rgba(2,12,45,.6);
  font-size:.85rem;transition:filter .2s ease, transform .09s ease, box-shadow .09s ease;
}
.au-close:hover{filter:brightness(1.15)}
.au-close:active{transform:translateY(3px);box-shadow:0 0 0 rgba(2,12,45,.6)}

.au-logo{
  display:flex;align-items:center;gap:9px;justify-content:center;margin-bottom:20px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.15rem;letter-spacing:.04em;color:#fff;
  -webkit-text-stroke:0.1em var(--au-ink);paint-order:stroke fill;
}
/* Значок сайта в шапке окна входа — тот же web_icon.png, что и favicon. */
.au-mark{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(2,10,45,.6))}

.au-title{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.7rem;line-height:1.1;text-align:center;margin-bottom:10px;
  letter-spacing:.04em;word-spacing:-.09em;color:#fff;   /* трекинг — см. .bs-ink */
  -webkit-text-stroke:0.1em var(--au-ink);paint-order:stroke fill;
}
.au-sub{color:var(--cx-dim);font-size:.88rem;text-align:center;line-height:1.5;margin-bottom:22px}

.au-error{
  background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4);color:#FDA4AF;
  border-radius:14px;padding:12px 14px;font-size:.86rem;font-weight:600;margin-bottom:16px;
}

/* ---------- поля ---------- */
.au-form{display:flex;flex-direction:column;gap:14px}
.au-field{display:flex;flex-direction:column;gap:7px}
.au-label{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cx-dim)}
.au-input-wrap{position:relative;display:block}
.au-input{
  /* РОВНО 16 px, И ЭТО НЕ ВКУСОВЩИНА. Safari на iPhone САМ приближает
     страницу, когда фокус встаёт в поле с кеглем МЕНЬШЕ 16 px, — и
     обратно её не отдаляет: человек вводит почту, а сайт остаётся
     увеличенным, шапка уезжает за край, и дальше он листает уже
     раздвинутую страницу. Прежние .95rem давали 15.2 px, то есть под
     это правило попадали ВСЕ поля сайта: вход, регистрация, пополнение,
     промокод, рефералка.
     Ставим 1rem, а не 16px: у пользователя может быть свой базовый
     кегль, и он должен работать. На вид разница в 0.8 px незаметна. */
  width:100%;padding:14px 16px;border-radius:14px;font-family:'Manrope',sans-serif;
  font-size:1rem;font-weight:600;color:var(--cx-text);
  background:rgba(3,16,54,.55);border:2px solid rgba(255,255,255,.16);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.au-input::placeholder{color:#7FA3D6}
.au-input:focus{
  outline:none;border-color:#55B8FF;background:rgba(6,32,96,.7);
  box-shadow:0 0 0 4px rgba(85,184,255,.22);
}
.au-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:transparent;border:none;color:var(--cx-dim);font-size:.95rem;opacity:.7;
  transition:opacity .2s ease,color .2s ease;
}
.au-eye:hover,.au-eye.on{opacity:1;color:#fff}
.au-hint{font-size:.76rem;color:var(--cx-dim);min-height:14px}
.au-hint.is-error{color:#FDA4AF}
.au-hint.is-ok{color:#6EE7B7}

/* индикатор надёжности пароля */
.au-strength{display:flex;align-items:center;gap:5px;margin-top:-6px}
.au-strength span{
  flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.09);transition:background .3s ease;
}
.au-strength span.on{background:linear-gradient(90deg,#55B8FF,#2278DE)}
.au-strength[data-score="1"] span.on{background:#F87171}
.au-strength[data-score="2"] span.on{background:#FBBF24}
.au-strength[data-score="3"] span.on{background:#34D399}
.au-strength em{
  flex:0 0 auto;font-style:normal;font-size:.72rem;color:var(--cx-dim);min-width:58px;text-align:right;
}

.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.au-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.86rem;color:var(--cx-text)}
.au-check input{
  width:18px;height:18px;border-radius:6px;cursor:pointer;accent-color:#2F83FD;
}

/* СОГЛАСИЕ С УСЛОВИЯМИ на экране регистрации. Три отличия от «запомнить
   меня», и все три вынужденные: строка длинная и обязана переноситься
   (inline-flex → flex), при переносе отметка должна остаться у ПЕРВОЙ
   строки, а не уехать в середину блока (align-items:flex-start), и
   ссылки внутри должны быть видны как ссылки — их читают. */
.au-consent{
  display:flex;align-items:flex-start;
  font-size:.82rem;line-height:1.5;
  margin-top:2px;
}
.au-consent input{flex:0 0 auto;margin-top:1px}
.au-consent a{color:#7FC7FF;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.au-consent a:hover{color:#BBE2FF}
.au-link{
  background:none;border:none;cursor:pointer;color:#7FC7FF;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:.86rem;padding:2px 0;transition:color .2s ease;
}
.au-link:hover{color:#BBE2FF;text-decoration:underline}

.au-submit{
  position:relative;overflow:hidden;cursor:pointer;border:none;border-radius:16px;
  padding:14px 20px 18px;margin-top:6px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.1rem;letter-spacing:.04em;color:#fff;
  -webkit-text-stroke:0.1em var(--au-ink);paint-order:stroke fill;
  background:linear-gradient(180deg,#63E06E 0%,#34B747 100%);
  box-shadow:0 5px 0 #1C7A2E, 0 12px 20px -8px rgba(2,10,45,.7);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .09s ease, box-shadow .09s ease, filter .14s ease;
}
.au-submit:hover:not(:disabled){filter:brightness(1.08)}
.au-submit:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 #1C7A2E}
.au-submit:disabled{opacity:.75;cursor:default}
.au-spinner{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:au-spin .7s linear infinite;
}
@keyframes au-spin{to{transform:rotate(1turn)}}

/* ---------- провайдеры ---------- */
.au-sep{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--cx-dim);font-size:.78rem}
.au-sep::before,.au-sep::after{content:"";flex:1;height:1px;background:var(--cx-line)}
/* Кнопка провайдера осталась одна — Google. Раньше она была набрана
   тонким Manrope белым по светло-синему и на фоне окна читалась хуже
   всего остального: ни обводки у текста, ни границы у самой кнопки,
   а разноцветный значок Google тонул в синем. Теперь у неё язык
   остальных кнопок сайта: тёмная обводка по контуру, шрифт сцены с
   обводкой у надписи и белая плитка под значком. */
.au-providers{display:flex;flex-direction:column;gap:10px}
.au-provider{
  display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  padding:12px 18px 15px;border-radius:16px;
  background:linear-gradient(180deg,#55B8FF 0%,#2278DE 100%);
  border:3px solid var(--au-ink);color:#fff;
  box-shadow:0 5px 0 #123F72, 0 12px 20px -8px rgba(2,10,45,.7);
  transition:filter .16s ease, transform .09s ease, box-shadow .09s ease;
}
.au-provider:hover{filter:brightness(1.09)}
.au-provider:active{transform:translateY(5px);box-shadow:0 0 0 #123F72}
.au-plabel{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1rem;letter-spacing:.04em;word-spacing:-.09em;
  -webkit-text-stroke:0.1em var(--au-ink);paint-order:stroke fill;
}
/* Белая плитка с той же тёмной обводкой: разноцветный значок Google
   держится на ней сам, без подгонки цветов под синий фон кнопки. */
.au-pico{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:28px;height:28px;border-radius:9px;
  background:#fff;border:2px solid var(--au-ink);
  box-shadow:0 2px 0 rgba(2,10,45,.45);
}
.au-note{margin-top:12px;font-size:.76rem;color:var(--cx-dim);text-align:center;line-height:1.5}

.au-bottom{margin-top:20px;text-align:center;font-size:.88rem;color:var(--cx-dim)}

/* ---------- экран успеха ---------- */
.au-success{text-align:center;padding:8px 0}
.au-success-ic{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  font-size:1.8rem;color:#fff;background:linear-gradient(180deg,#63E06E,#34B747);
  box-shadow:0 5px 0 #1C7A2E, 0 0 34px rgba(52,211,153,.4);
  animation:au-pop .5s cubic-bezier(.2,.9,.2,1.3) both;
}
@keyframes au-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.au-success .au-submit{width:100%;margin-top:20px}

/* Экран блокировки антифродом. Тот же макет, что у успеха, но красный
   кружок вместо зелёного: человек должен понять статус до чтения текста.
   Ссылка на поддержку выглядит как основная кнопка — она здесь и есть
   единственное осмысленное действие. */
.au-blocked .au-success-ic{
  background:linear-gradient(180deg,#FB7185,#E11D48);
  box-shadow:0 5px 0 #9F1239, 0 0 34px rgba(225,29,72,.4);
}
.au-blocked .au-sub{margin:0 auto;max-width:34ch;line-height:1.5}
.au-blocked a.au-submit{display:block;text-decoration:none;text-align:center}
.au-blocked .au-link{margin-top:14px}

.shake{animation:au-shake .4s ease}
@keyframes au-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ---------- кнопка «Войти» в шапке ---------- */
.auth-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 22px;border-radius:999px;font-family:'Manrope',sans-serif;font-weight:800;font-size:.92rem;
  color:#fff;background:linear-gradient(120deg,#8B5CF6,#22D3EE);
  border:none;box-shadow:0 10px 26px -12px rgba(139,92,246,.9);
  transition:transform .25s ease, box-shadow .25s ease;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(139,92,246,1)}

@media (max-width:540px){
  .au-card{padding:22px 16px 20px;border-radius:22px}
  .au-title{font-size:1.3rem}
  /* ВЕРТИКАЛЬНЫЙ РИТМ УЖАТ. Регистрация на телефоне выходит 923 px при
     экране 720 — прокрутка теперь работает (см. .au-backdrop выше), но
     листать форму от почты до кнопки всё равно приходится. Урезано
     только ПУСТОЕ место между блоками; сами поля не тронуты — у них
     53 px высоты, и это ровно тот размер, в который попадают пальцем.
     Итог 923 -> ~810: форма помещается в экран почти целиком. */
  .au-logo{margin-bottom:12px}
  .au-sub{margin-bottom:14px}
  .au-sep{margin:14px 0 10px}
  .au-note{margin-top:8px}
  .au-bottom{margin-top:14px}
  .au-field{gap:5px}
  /* ЦЕЛИ ПОД ПАЛЕЦ. Крестик 36 и «глаз» 34 — это мышиные размеры;
     касанием в них попадают через раз. Сорок — тот минимум, ниже
     которого промахи начинаются у всех. Внутрь поля «глаз» помещается:
     у поля 53 px высоты. Флажок согласия крупнее не только ради
     попадания — без него регистрация не проходит, и он не должен
     выглядеть мелкой формальностью. */
  .au-close{width:40px;height:40px}
  .au-eye{width:40px;height:40px}
  .au-check input{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .au-backdrop,.au-card,.au-submit,.au-provider,.au-success-ic{transition:none!important;animation:none!important}
}

/* Атрибут hidden должен побеждать display:inline-flex у кнопок шапки */
.auth-btn[hidden],
.profile-btn[hidden]{display:none !important}

/* ---------- отыгрыш бонуса ----------
   Полоска, а не одна цифра остатка: «осталось 75 ₽» без второго числа не
   отличить от «осталось 75 из 80» и от «из 750», а это разница между
   «почти всё» и «даже не начал». */
.au-wager{margin:0 0 18px}
.au-wager-bar{
  height:12px;border-radius:8px;overflow:hidden;
  background:rgba(3,16,54,.55);border:2px solid rgba(255,255,255,.12);
}
.au-wager-bar i{
  display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#FFE45C,#FFB020);
  transition:width .3s ease;
}
.au-wager-line{
  display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  font-size:.82rem;font-weight:700;color:#BBD6F5;
}
.au-wager-line span:last-child{color:#FFE45C}