/* ============================================================
   Экран входа: сцена с монетами + карточка формы.
   Отдельный файл, потому что это единственный экран с 3D и он
   не должен тянуть свои трансформации в остальной интерфейс.
   ============================================================ */

.auth{
  position:relative;
  min-height:100dvh;              /* dvh, а не vh: иначе адресная строка мобильного браузера режет низ */
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- сцена ---------- */
.auth-scene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.auth-scene canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Мягкое свечение под монетами: даёт сцене глубину и притягивает взгляд
   к центру, где стоит форма. */
.auth-glow{
  position:absolute;
  left:50%; top:50%;
  width:min(920px,120vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    color-mix(in srgb, var(--orange) 22%, transparent) 0%,
    transparent 62%);
  filter:blur(38px);
  opacity:.55;
}

/* ---------- карточка входа ---------- */
.auth-card{
  position:relative;
  z-index:1;                      /* сцена рисуется под карточкой, а не поверх */
  width:100%;
  max-width:376px;
  display:grid;
  gap:16px;
  padding:32px;
  border-radius:16px;
  background:color-mix(in srgb, var(--ink2) 88%, transparent);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(14px) saturate(1.15);
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:Archivo,sans-serif;
  font-weight:900;
  font-size:15px;
  letter-spacing:-.02em;
  color:var(--white);
}
.auth-brand i{ width:10px; height:10px; border-radius:2px; background:var(--orange); }
.auth-h{
  font-family:Archivo,sans-serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:-.025em;
  line-height:1.1;
  margin-bottom:2px;
}
.auth-card .f label{ font-size:12px; }
.auth-card input{
  height:46px;                    /* от 44px: комфортная площадь нажатия на телефоне */
  font-size:16px;                 /* меньше 16px — iOS зумит страницу при фокусе */
  border-radius:10px;
}
.auth-pw{ position:relative; }
.auth-pw input{ padding-right:46px; }
.auth-eye{
  position:absolute;
  right:4px; top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:8px;
  color:var(--mut);
}
.auth-eye:hover{ color:var(--white); }
.auth-eye.on{ color:var(--orange); }
.auth-err{
  min-height:18px;
  font-size:12px;
  line-height:1.4;
  color:var(--bad);
}
.auth-card .btn{
  height:46px;
  border-radius:10px;
  font-size:14px;
}

/* ---------- адаптив ---------- */
/* Ноутбук: сцена уже, монеты подтягиваются ближе, чтобы не резались краем. */
/* Планшет и телефон: монеты мельче и уходят в углы — форма важнее сцены. */
@media (max-width:760px){
  .auth{ padding:18px; }
  .auth-card{ padding:26px 22px; max-width:100%; }
  .auth-glow{ opacity:.4; }
}
/* Низкий экран в альбомной ориентации: сцена только мешает. */
@media (max-height:520px){
  .auth-scene canvas{ display:none; }
  .auth-glow{ opacity:.25; }
}

/* Движение отключено — сцена остаётся, но замирает. */
@media (prefers-reduced-motion:reduce){
  /* Канвас сам рисует один статичный кадр — см. initCoins(). */
  .auth-glow{ opacity:.3; }
}

/* ---------- чекбокс в формах админки ----------
   Живёт здесь, а не в style.css: это единственное место, где он нужен,
   и отдельного правила в дизайн-системе он пока не заслуживает. */
.chk{
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-size:13px;
  user-select:none;
}
/* min-height и padding приходят из общего правила input в style.css и height
   не отменяют: без сброса галочка вытягивалась в овал 18×40 (на телефоне
   18×44 — там --tap поднимает минимум ещё выше). */
.chk input{
  width:18px;
  height:18px;
  min-height:18px;
  flex:0 0 18px;
  margin:0;
  padding:0;
  accent-color:var(--orange);
  cursor:pointer;
}
.chk span{ line-height:1.35; }

/* ---------- ячейка «таблица города» ----------
   Поле ввода и кнопка открытия в одной строке: ID длинный, поле должно
   тянуться, а кнопка — оставаться на месте и не сжиматься. */
/* align-items:stretch, а не center: у поля высота своя (40px, на телефоне 44),
   у кнопки была фиксированная 36 — в одной строке они стояли разной высоты
   и на каждом брейкпоинте расходились по-новому. */
.sheet-cell{
  display:flex;
  align-items:stretch;
  gap:8px;
  min-width:260px;
}
.sheet-cell .sheet-in{
  flex:1 1 auto;
  min-width:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;
}
.sheet-cell .btn{
  flex:0 0 auto;
  padding:0;
  width:40px;
  min-height:0;
  display:grid;
  place-items:center;
}
/* Формат сообщения для чата: короткий список рядом с полем, а не во всю
   ячейку — иначе он оттесняет ID чата, ради которого ячейка и нужна. */
.sheet-cell .tg-fmt{
  flex:0 0 auto;
  width:auto;
  min-width:104px;
  font-size:12px;
}

@media (max-width:700px){
  .sheet-cell{ min-width:0; }
}