/* MXTR.SU — модалка входа в стиле ASCII RADAR (фон-радар + карточка) */

/* ===== ОВЕРЛЕЙ ВЕСЬ ЭКРАН ===== */
#authModal{
  position:fixed;inset:0;z-index:2000;display:none;
  background:#000;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
#authModal.active{display:block}

/* ===== РАДАР (фон) ===== */
#authModal #amRadar{
  position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;
}
#authModal .am-vig{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.85) 100%);
}

/* ===== ЭКРАН-ЦЕНТРИРОВАНИЕ ===== */
#authModal .am-stage{
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;pointer-events:none;
}
#authModal .am-card-wrap{
  position:relative;width:400px;height:250px;pointer-events:none;transform-origin:center;
}
@media (max-width:460px){ #authModal .am-card-wrap{transform:scale(0.86)} }
@media (max-width:380px){ #authModal .am-card-wrap{transform:scale(0.74)} }

/* ===== КАРТОЧКА КОДА ===== */
#authModal .am-card{
  position:absolute;inset:0;width:400px;height:250px;box-sizing:border-box;
  border-radius:28px;
  background:rgba(8,8,8,0.86);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 30px 90px rgba(0,0,0,0.9),
    0 0 70px rgba(255,158,44,0.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;opacity:0;pointer-events:none;
  transition:opacity 320ms ease,border-color 260ms ease,box-shadow 260ms ease;
  box-sizing:border-box;
}
#authModal .am-card.visible{opacity:1;pointer-events:auto}
#authModal .am-card.active{
  border-color:rgba(255,158,44,0.55);
  box-shadow:
    0 0 0 1px rgba(255,158,44,0.18),
    0 30px 90px rgba(0,0,0,0.9),
    0 0 60px rgba(255,158,44,0.20),
    inset 0 0 34px rgba(255,158,44,0.06);
}

/* ===== ЗАКРЫТИЕ ===== */
#authModal .am-close{
  position:absolute;top:12px;right:12px;z-index:50;
  width:30px;height:30px;border:none;background:transparent;
  color:rgba(255,255,255,0.4);font-size:22px;line-height:1;cursor:pointer;
  pointer-events:auto;transition:color .2s,transform .15s;
}
#authModal .am-close:hover{color:#FFB454;transform:scale(1.12)}

/* ===== ИНТРО (форма) ===== */
#authModal .am-intro{
  position:relative;width:400px;min-height:460px;box-sizing:border-box;border-radius:28px;
  background:rgba(8,8,8,0.86);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 30px 90px rgba(0,0,0,0.9),
    0 0 70px rgba(255,158,44,0.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:34px 36px 30px;
  pointer-events:auto;
  transition:opacity 300ms ease;
}
#authModal .am-intro.hiding{opacity:0;pointer-events:none}

/* табы Вход / Регистрация */
#authModal .am-tabs{
  display:flex;gap:8px;position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;padding:4px;z-index:5;
}
#authModal .am-tab{
  border:none;background:transparent;color:rgba(255,255,255,0.45);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:0.14em;text-indent:0.14em;
  text-transform:uppercase;padding:7px 16px;border-radius:999px;cursor:pointer;
  transition:color .2s,background .2s,box-shadow .2s;
}
#authModal .am-tab:hover{color:rgba(255,255,255,0.75)}
#authModal .am-tab.active{
  color:#FFB454;background:rgba(255,158,44,0.14);
  box-shadow:0 0 16px rgba(255,158,44,0.28),inset 0 0 0 1px rgba(255,158,44,0.35);
}

#authModal .mail-icon{
  width:64px;height:48px;color:#FFB454;
  filter:drop-shadow(0 0 16px rgba(255,158,44,0.55));
  transition:transform 620ms cubic-bezier(.4,0,.2,1),opacity 620ms ease;
  pointer-events:none;
}
#authModal .mail-icon.flying{
  transform:translate(110px,-170px) rotate(22deg) scale(0.35);
  opacity:0;
}

#authModal .am-name{
  font-size:16px;font-weight:700;letter-spacing:0.22em;text-indent:0.22em;
  color:rgba(255,255,255,0.85);text-transform:uppercase;text-align:center;
}
#authModal .am-introtext{
  font-size:11px;letter-spacing:0.14em;text-indent:0.14em;
  color:rgba(255,255,255,0.4);text-transform:uppercase;text-align:center;margin-top:-12px;
}

/* поля формы */
#authModal .am-form-body{display:flex;flex-direction:column;gap:12px;width:100%}
#authModal .am-field{display:flex;flex-direction:column;gap:6px}
#authModal .am-field label{
  font-size:10px;letter-spacing:0.2em;text-indent:0.2em;
  text-transform:uppercase;color:rgba(255,255,255,0.45);
}
#authModal .am-field input{
  height:42px;padding:0 14px;box-sizing:border-box;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;color:#fff;font-size:14px;font-family:inherit;outline:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
#authModal .am-field input::placeholder{color:rgba(255,255,255,0.22)}
#authModal .am-field input:focus{
  border-color:rgba(255,180,84,0.75);background:rgba(255,158,44,0.06);
  box-shadow:0 0 0 1px rgba(255,180,84,0.2),0 0 18px rgba(255,158,44,0.22);
}

/* согласие */
#authModal .am-consent{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:10px;letter-spacing:0.04em;color:rgba(255,255,255,0.5);
  line-height:1.45;user-select:none;
}
#authModal .am-consent input{width:15px;height:15px;flex-shrink:0;accent-color:#FF9E2C;margin:0;cursor:pointer}

/* кнопка отправки */
#authModal .send-btn{
  width:100%;margin-top:4px;
  padding:13px 30px;border-radius:999px;box-sizing:border-box;
  border:1px solid rgba(255,180,84,0.5);
  background:linear-gradient(180deg,rgba(255,180,84,0.18),rgba(255,180,84,0.05));
  color:#FFB454;font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:0.24em;text-indent:0.24em;text-transform:uppercase;
  cursor:pointer;transition:background .26s,border-color .26s,box-shadow .26s,transform .12s,opacity .26s;
  outline:none;
}
#authModal .send-btn:hover{
  background:linear-gradient(180deg,rgba(255,180,84,0.30),rgba(255,180,84,0.10));
  border-color:rgba(255,180,84,0.85);box-shadow:0 0 28px rgba(255,158,44,0.45);
}
#authModal .send-btn:active{transform:scale(0.96)}
#authModal .send-btn.disabled{opacity:0;pointer-events:none}

/* ошибка формы */
#authModal .am-error{min-height:16px;font-size:11px;letter-spacing:0.1em;color:#FF3B30;text-align:center;padding-top:2px}
#authModal .am-error:empty{padding-top:0}

/* ===== PIXEL CANVAS ===== */
#authModal #amPix{
  position:absolute;inset:0;width:400px;height:250px;margin:0;
  image-rendering:pixelated;image-rendering:crisp-edges;
  opacity:0;pointer-events:none;transition:opacity 100ms linear;
  border-radius:28px;
}

/* ===== HINT ===== */
#authModal .am-hint{
  font-size:13px;font-weight:600;letter-spacing:0.26em;text-indent:0.26em;
  color:rgba(255,255,255,0.6);text-transform:uppercase;
  transition:color 240ms ease,text-shadow 240ms ease;
  white-space:nowrap;line-height:1.1;text-align:center;
}
#authModal .am-card.active .am-hint{color:#FFB454;text-shadow:0 0 18px rgba(255,158,44,0.65)}
#authModal .am-hint.ok{color:#35E07A;text-shadow:0 0 18px rgba(53,224,122,0.85)}
#authModal .am-hint.bad{color:#FF3B30;text-shadow:0 0 18px rgba(255,59,48,0.85)}

/* ===== НАЗАД ===== */
#authModal .am-back{
  position:absolute;bottom:14px;right:16px;z-index:12;
  border:none;background:transparent;color:rgba(255,255,255,0.4);
  font-family:inherit;font-size:11px;letter-spacing:0.16em;text-indent:0.16em;
  text-transform:uppercase;cursor:pointer;padding:6px 10px;
  transition:color .2s;
}
#authModal .am-back:hover{color:#FFB454}

/* ===== BOXES ===== */
#authModal .am-boxes{display:flex;gap:16px;perspective:1200px}
#authModal .am-box{
  position:relative;width:62px;height:82px;perspective:900px;will-change:transform;
  transition:transform 420ms cubic-bezier(.5,0,.3,1),opacity 300ms ease;
  transform:translate(0,0) rotate(0deg);
  pointer-events:auto;cursor:pointer;
}
#authModal .flipper{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 560ms cubic-bezier(.45,0,.25,1);transform:rotateY(0deg);
}
#authModal .am-box.flipped .flipper{transform:rotateY(180deg)}
#authModal .face{
  position:absolute;inset:0;border-radius:14px;box-sizing:border-box;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  display:grid;place-items:center;
}
#authModal .face.front{
  border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.025);
  transition:background 240ms ease,border-color 240ms ease,box-shadow 240ms ease;
}
#authModal .am-box.focused .face.front{
  border-color:rgba(255,180,84,0.85);background:rgba(255,158,44,0.06);
  box-shadow:0 0 0 1px rgba(255,180,84,0.25),0 0 20px rgba(255,158,44,0.40),inset 0 0 22px rgba(255,158,44,0.10);
}
#authModal .am-box.focused .face.front::after{
  content:'';position:absolute;top:50%;left:50%;width:2px;height:34px;
  margin:-17px 0 0 -1px;background:#FFB454;box-shadow:0 0 10px rgba(255,158,44,0.9);
  animation:amCaret 1.05s steps(1) infinite;pointer-events:none;
}
#authModal .am-box.focused.filled .face.front::after,
#authModal .am-box.focused.ok .face.front::after,
#authModal .am-box.focused.bad .face.front::after{display:none}
@keyframes amCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}

#authModal .face.back{
  border:1px solid rgba(255,158,44,0.45);
  background:radial-gradient(circle at 50% 50%,rgba(255,158,44,0.14) 0%,rgba(0,0,0,0) 70%),
             linear-gradient(135deg,#17100a 0%,#080503 100%);
  transform:rotateY(180deg);color:#FF9E2C;font-size:14px;font-weight:700;
  letter-spacing:0.14em;text-indent:0.14em;text-shadow:0 0 12px rgba(255,158,44,0.55);
  box-shadow:0 0 0 0 rgba(0,0,0,0),inset 0 0 22px rgba(255,158,44,0.06);
  border-radius:14px;border-style:solid;
}
#authModal .face.back::before,
#authModal .face.back::after{
  content:'';position:absolute;width:8px;height:8px;border:1px solid rgba(255,158,44,0.55);
}
#authModal .face.back::before{top:6px;left:6px;border-right:0;border-bottom:0;border-top-left-radius:5px}
#authModal .face.back::after{bottom:6px;right:6px;border-left:0;border-top:0;border-bottom-right-radius:5px}

#authModal .am-box .am-d{
  font-size:30px;font-weight:600;line-height:1;color:#fff;
  opacity:0;transform:scale(0.6);z-index:2;
  transition:opacity 160ms ease,transform 160ms cubic-bezier(.2,1.6,.4,1);
  font-family:inherit;
}
#authModal .am-box.filled .am-d{opacity:1;transform:scale(1)}

#authModal .am-box.ok .face.front{
  border-color:rgba(53,224,122,0.9);background:rgba(53,224,122,0.10);
  box-shadow:0 0 22px rgba(53,224,122,0.45),inset 0 0 22px rgba(53,224,122,0.10);
}
#authModal .am-box.ok .face.front .am-d{color:#35E07A;text-shadow:0 0 18px rgba(53,224,122,0.6)}
#authModal .am-box.bad .face.front{
  border-color:rgba(255,59,48,0.9);background:rgba(255,59,48,0.10);
  box-shadow:0 0 22px rgba(255,59,48,0.45),inset 0 0 22px rgba(255,59,48,0.10);
}
#authModal .am-box.bad .face.front .am-d{color:#FF3B30;text-shadow:0 0 18px rgba(255,59,48,0.6)}

#authModal .trace{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  color:#FFB454;transition:color 200ms ease;z-index:3;
}
#authModal .trace path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px currentColor);
}
#authModal .am-box.ok .trace{color:#35E07A}
#authModal .am-box.bad .trace{color:#FF3B30}

/* ghost — прозрачная клавиатура поверх всего */
#amGhost{
  position:fixed;inset:0;width:100%;height:100%;z-index:5;opacity:0;
  border:0;outline:0;padding:0;margin:0;background:transparent;
  color:transparent;caret-color:transparent;font-size:16px;
  cursor:default;resize:none;font-family:inherit;
}

/* ===== ПАНЕЛЬ ПОЛЬЗОВАТЕЛЯ В ШАПКЕ ===== */
.am-user-panel{
  display:none;align-items:center;gap:12px;
  height:40px;padding:0 16px;box-sizing:border-box;
  border:1px solid rgba(255,158,44,0.4);
  background:rgba(255,158,44,0.08);
  border-radius:12px;user-select:none;white-space:nowrap;
}
.am-user-name{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:#FFB454;text-shadow:0 0 14px rgba(255,158,44,0.45);
}
.am-user-panel .am-user-out{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:11px;letter-spacing:0.10em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);text-decoration:none;cursor:pointer;
  border-left:1px solid rgba(255,255,255,0.14);padding-left:12px;
  transition:color .2s;
}
.am-user-panel .am-user-out:hover{color:#FF3B30}