/* DistAUTH — кнопка входа через www.distorting.ru.
   Одна на все поддомены: игрок должен узнавать её на любом сайте Distorting,
   поэтому своя палитра и шрифт, а не цвета конкретного сайта.
   Эталон — distauth-kit/distauth.css в репозитории www, на сайтах — копии.
   Файл подключается ПОСЛЕ стилей страницы. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800&display=swap');

.da-btn,.da-menu{
  --da-bg:#0d0b16;
  --da-ink:#f4f2ff;
  --da-dim:rgba(244,242,255,.66);
  --da-a:#8b5cf6;
  --da-b:#22d3ee;
}
.da-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:11px;
  height:44px;padding:0 18px 0 6px;flex-shrink:0;
  border:1px solid transparent;border-radius:12px;
  background:
    linear-gradient(var(--da-bg),var(--da-bg)) padding-box,
    linear-gradient(120deg,rgba(139,92,246,.95),rgba(34,211,238,.75) 55%,rgba(139,92,246,.95)) border-box;
  color:var(--da-ink);
  font:600 13.5px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;text-transform:none;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 14px rgba(0,0,0,.35);
  transition:transform .18s ease,box-shadow .25s ease;
}
/* Блик, пробегающий по кнопке при наведении. */
.da-btn::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
  transform:translateX(-120%);
}
.da-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 28px rgba(139,92,246,.32),0 0 0 1px rgba(139,92,246,.25);
}
.da-btn:hover::after{transform:translateX(120%);transition:transform .8s ease}
.da-btn:active{transform:translateY(0) scale(.985)}
.da-btn:focus-visible{outline:2px solid var(--da-b);outline-offset:3px}

/* Знак: «D» с замочной скважиной на градиентной плитке. */
.da-mark{
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#7c3aed 0%,#5b45f0 45%,#0ea5c6 100%);
  background-size:180% 180%;background-position:0% 0%;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 4px 12px rgba(124,58,237,.45);
  transition:background-position .6s ease;
}
.da-mark svg{width:19px;height:19px;display:block}
.da-btn:hover .da-mark{background-position:100% 100%}

.da-text{display:inline-flex;align-items:baseline;gap:6px}
.da-pre{color:var(--da-dim);font-weight:500}
.da-brand{font-family:Orbitron,Inter,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em}
.da-brand b{
  font-weight:800;
  background:linear-gradient(90deg,#c4b5fd,var(--da-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Вошёл (кнопка-меню): аватар в рамке знака и ник. */
.da-mark.has-ava{padding:2px}
.da-ava{width:100%;height:100%;border-radius:7px;object-fit:cover;display:block}
.da-name{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.da-btn.is-user{padding-right:14px}
.da-btn.is-user::before{
  content:'';order:3;width:7px;height:7px;margin-left:2px;flex-shrink:0;
  border-right:1.5px solid var(--da-dim);border-bottom:1.5px solid var(--da-dim);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.da-btn.is-user.is-open::before{transform:translateY(1px) rotate(-135deg)}

/* Меню вошедшего. Лежит в body (у кнопки overflow:hidden ради блика). */
.da-menu{
  position:fixed;z-index:10000;min-width:220px;padding:6px;
  background:var(--da-bg);color:var(--da-ink);
  border:1px solid rgba(139,92,246,.38);border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  font:500 14px/1.3 Inter,system-ui,sans-serif;
  animation:da-pop .16s ease-out;
}
@keyframes da-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.da-menu-head{padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.da-menu-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.da-menu-via{margin-top:4px;font-size:12px;color:var(--da-dim)}
.da-menu-item{
  display:block;padding:10px 12px;border-radius:8px;
  color:var(--da-ink);text-decoration:none;
}
.da-menu-item:hover,.da-menu-item:focus-visible{background:rgba(139,92,246,.16);outline:none}

/* Нажали — идёт переход на www: знак «дышит», повторный клик не нужен. */
.da-btn.is-busy{pointer-events:none}
.da-btn.is-busy .da-mark{animation:da-busy 1.1s ease-in-out infinite}
@keyframes da-busy{
  0%,100%{background-position:0% 0%;transform:scale(1)}
  50%{background-position:100% 100%;transform:scale(.9)}
}

/* В шапке сайта. */
.da-btn--hdr{margin-left:auto}

/* Крупная — там, где вход главное действие на экране: по центру своего блока. */
.da-btn--lg{display:flex;width:fit-content;margin-inline:auto;height:54px;padding:0 24px 0 8px;gap:14px;border-radius:14px;font-size:15.5px}
.da-btn--lg .da-mark{width:40px;height:40px;border-radius:11px}
.da-btn--lg .da-mark svg{width:24px;height:24px}
.da-btn--lg .da-brand{font-size:15px}

/* Узкий экран: в шапке остаётся только знак (или аватар), подпись — в aria-label. */
@media (max-width:600px){
  .da-btn--hdr{height:42px;width:42px;padding:0;gap:0;justify-content:center;border-radius:11px}
  .da-btn--hdr .da-text,.da-btn--hdr.is-user::before{display:none}
  .da-btn--hdr .da-mark{width:32px;height:32px}
}

@media (prefers-reduced-motion:reduce){
  .da-btn,.da-btn::after,.da-mark,.da-menu{transition:none!important;animation:none!important}
}