/* Auth module: isolated public presentation for login, registration and recovery. */
body[data-tab="login"],
body[data-tab="register"]{
  min-height:100svh;
  background:
    linear-gradient(90deg,rgba(2,2,2,.72) 0%,rgba(4,3,3,.28) 48%,rgba(2,2,2,.66) 100%),
    linear-gradient(180deg,rgba(1,1,1,.08) 0%,rgba(1,1,1,.40) 100%),
    url('/madwars.ru/assets/brand/v2/hero-1920.jpg') center/cover fixed no-repeat;
}

body[data-tab="login"] .topbar,
body[data-tab="register"] .topbar{
  position:relative;
  z-index:5;
  background:rgba(3,3,3,.88);
  backdrop-filter:blur(12px);
}

body[data-tab="login"] .site-breadcrumbs,
body[data-tab="register"] .site-breadcrumbs{display:none}

.auth-main.stats-main{
  position:relative;
  display:grid;
  width:100%!important;
  max-width:none!important;
  min-height:calc(100svh - 72px);
  place-items:center;
  margin:0!important;
  padding:clamp(24px,4vh,46px) 24px!important;
  overflow:hidden;
  isolation:isolate;
}

.auth-main::before{
  position:absolute;
  z-index:-1;
  inset:0;
  content:'';
  background:radial-gradient(circle at 50% 48%,rgba(238,74,34,.16),transparent 38%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.30));
  pointer-events:none;
}

.auth-main.stats-main>.auth-panel{
  width:min(100%,560px)!important;
  max-width:560px!important;
  margin:0!important;
  padding:clamp(24px,3.2vw,38px);
  border:1px solid rgba(205,109,66,.38);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:linear-gradient(145deg,rgba(20,13,10,.94),rgba(3,4,5,.93)),url('/madwars.ru/assets/brand/v3/metal-surface.jpg') center/cover;
  box-shadow:inset 0 1px 0 rgba(255,190,130,.09),0 26px 72px rgba(0,0,0,.64),0 0 34px rgba(216,61,24,.07);
}

.auth-kicker{
  display:block;
  margin-bottom:6px;
  color:#ec5a34;
  font:800 10px var(--mono);
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.auth-main h1{
  margin:0;
  color:#f0dfc7;
  font-family:var(--display);
  font-size:clamp(34px,5vw,52px);
  letter-spacing:1.4px;
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 5px 20px #000,0 0 24px rgba(238,74,34,.16);
  white-space:nowrap;
}

.auth-lede{max-width:470px;margin:12px 0 25px;color:#a99b8c;font-size:15px;line-height:1.55}

.auth-steam{
  display:flex;
  min-height:60px;
  align-items:center;
  gap:15px;
  padding:0 19px;
  border:1px solid #35627f;
  color:#fff;
  background:linear-gradient(135deg,rgba(27,50,72,.96),rgba(12,21,28,.96));
  box-shadow:inset 0 1px 0 rgba(164,217,255,.10),0 12px 30px rgba(0,0,0,.22);
  text-decoration:none;
  transition:border-color .15s,filter .15s,transform .15s;
}
.auth-steam span{padding:6px 8px;border:1px solid rgba(255,255,255,.28);color:#8ed4ff;font:800 11px var(--mono);letter-spacing:.14em}
.auth-steam strong{font-size:16px;letter-spacing:.02em}
.auth-steam:hover{border-color:#72c7f8;filter:brightness(1.12);transform:translateY(-1px)}

.auth-divider{display:flex;align-items:center;gap:13px;margin:21px 0;color:#7f7163;font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{height:1px;flex:1;content:'';background:rgba(212,166,87,.17)}

.auth-methods{display:grid;gap:0}.auth-email-form{gap:14px;padding:19px}.auth-password-disclosure{margin-top:14px;border:1px solid rgba(210,185,150,.14);background:rgba(0,0,0,.24)}.auth-password-disclosure>summary{display:flex;min-height:44px;align-items:center;justify-content:center;color:#c7b39c;cursor:pointer;font-size:13px;font-weight:700;list-style:none}.auth-password-disclosure>summary::-webkit-details-marker{display:none}.auth-password-disclosure>summary:after{margin-left:9px;color:#ef6842;content:'+'}.auth-password-disclosure[open]>summary{border-bottom:1px solid rgba(210,185,150,.13)}.auth-password-disclosure[open]>summary:after{content:'−'}.auth-password-form{border:0;background:rgba(0,0,0,.16)}.auth-recovery-link{color:#ef6842;text-align:center;font-size:12px}.auth-methods>.auth-captcha-box{margin-top:14px}.auth-methods>.auth-captcha-legal{display:block;margin:8px 0 0}.auth-panel>.alert.success{margin:0 0 16px;padding:11px 13px;border:1px solid rgba(86,214,155,.38);color:#a9e8c9;background:rgba(18,67,46,.28);font-size:12px}

.auth-form{display:flex;flex-direction:column;gap:18px;padding:22px;border:1px solid rgba(210,185,150,.13);background:rgba(0,0,0,.38)}
.auth-form label{display:flex;flex-direction:column;gap:8px;color:#c5ad91;font-size:15px;font-weight:700}
.auth-form input{min-height:50px;padding:11px 13px;border:1px solid rgba(210,185,150,.20);border-radius:2px;outline:none;color:#f0e7dc;background:rgba(3,3,3,.82);font-family:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.auth-form input:focus{border-color:rgba(238,88,46,.82);box-shadow:0 0 0 3px rgba(238,88,46,.10),inset 0 0 14px rgba(238,88,46,.035)}
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus{-webkit-text-fill-color:#f0e7dc;-webkit-box-shadow:0 0 0 1000px #050505 inset;caret-color:#f0e7dc}
.auth-form small{color:#817364;font:400 10px var(--mono)}
.auth-captcha-note,.auth-captcha-legal{margin:-6px 0 0;color:#817364;font:11px/1.45 var(--mono)}
.auth-captcha-legal{opacity:.82}
.auth-captcha-box{display:flex;min-height:62px;align-items:center;gap:12px;padding:11px 13px;border:1px solid rgba(86,154,183,.38);border-radius:7px;color:#cbd3dc;background:rgba(13,24,31,.76);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.auth-captcha-box>span:last-child{min-width:0}
.auth-captcha-box strong,.auth-captcha-box small{display:block}
.auth-captcha-box strong{color:#e6edf3;font-size:13px;line-height:1.3}
.auth-captcha-box small{margin-top:3px;color:#8795a0;font-size:10.5px;line-height:1.35}
.auth-captcha-shield{display:grid;width:34px;height:34px;flex:0 0 auto;place-items:center;border-radius:10px;color:#07130e;background:#56d69b;font-weight:900;box-shadow:0 0 18px rgba(86,214,155,.22)}
.auth-captcha-box.is-checking .auth-captcha-shield{border:3px solid rgba(255,255,255,.22);border-top-color:#62d9ff;color:transparent;background:transparent;box-shadow:none;animation:mw-captcha-spin .7s linear infinite}
.auth-captcha-box.is-error{border-color:rgba(235,88,69,.55);background:rgba(72,17,14,.28)}
.auth-captcha-box.is-error .auth-captcha-shield{color:#fff;background:#d94b39}
@keyframes mw-captcha-spin{to{transform:rotate(360deg)}}

.auth-form button[type="submit"]{
  position:relative;
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:2px;
  padding:11px 26px;
  border:1px solid #6b4a30;
  border-radius:4px;
  color:var(--accent);
  background-image:
    radial-gradient(circle at 6px 6px,rgba(20,12,8,.95) 0 1.4px,rgba(60,42,28,.8) 1.6px 2.8px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 6px) 6px,rgba(20,12,8,.95) 0 1.4px,rgba(60,42,28,.8) 1.6px 2.8px,transparent 3.2px),
    radial-gradient(circle at 6px calc(100% - 6px),rgba(20,12,8,.95) 0 1.4px,rgba(60,42,28,.8) 1.6px 2.8px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),rgba(20,12,8,.95) 0 1.4px,rgba(60,42,28,.8) 1.6px 2.8px,transparent 3.2px),
    linear-gradient(180deg,#4a3a2c 0%,#25180f 100%);
  background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,200,140,.22),inset 0 -1px 0 rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.55),0 0 18px rgba(255,85,48,.15);
  font:700 15px 'Cinzel',Georgia,serif;
  letter-spacing:.12em;
  text-shadow:0 1px 0 rgba(0,0,0,.85),0 0 12px rgba(255,85,48,.5);
  text-transform:uppercase;
  cursor:pointer;
  transition:filter .15s,box-shadow .18s,border-color .18s,color .15s,transform .12s;
}
.auth-form button[type="submit"]:hover{border-color:var(--accent);color:#ffd6a8;box-shadow:inset 0 1px 0 rgba(255,220,170,.32),inset 0 -1px 0 rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,85,48,.35),0 4px 18px rgba(0,0,0,.6),0 0 22px rgba(255,85,48,.55),0 0 42px rgba(255,85,48,.25);transform:translateY(-1px)}
.auth-form button[type="submit"]:active{filter:brightness(.96);transform:translateY(0)}
.auth-err{margin:0 0 18px;padding:12px 14px;border:1px solid rgba(236,72,54,.48);color:#ff9d91;background:rgba(126,22,16,.22);font-size:14px}
.auth-alt{margin:22px 0 0;color:#a99b8c;text-align:center;font-size:14px}
.auth-alt a{color:#ef6842}.auth-alt a:hover{color:#ff9b75}

@media(max-height:800px) and (min-width:641px){
  .auth-main.stats-main{padding:18px 24px!important}
  .auth-main.stats-main>.auth-panel{padding:25px 32px}
  .auth-main h1{font-size:44px}
  .auth-lede{margin:9px 0 18px}
  .auth-steam{min-height:52px}
  .auth-divider{margin:14px 0}
  .auth-form{gap:12px;padding:17px 20px}
  .auth-form label{gap:6px}
  .auth-form input{min-height:44px;padding:8px 11px}
  .auth-captcha-box{min-height:54px;padding:8px 11px}
  .auth-form button[type="submit"]{min-height:46px}
  .auth-alt{margin-top:16px}
}

@media(max-width:640px){
  body[data-tab="login"],body[data-tab="register"]{background-attachment:scroll;background-position:57% center}
  .auth-main.stats-main{min-height:calc(100svh - 62px);place-items:start center;padding:18px 12px 36px!important}
  .auth-main.stats-main>.auth-panel{padding:22px 16px}
  .auth-main h1{font-size:34px}
  .auth-lede{margin-bottom:20px;font-size:14px}
  .auth-form{gap:15px;padding:16px}
  .auth-form button[type="submit"]{padding:10px 18px;font-size:12px;letter-spacing:.08em}
  .auth-steam strong{font-size:14px}
}

@media(max-width:420px){
  .auth-main.stats-main>.auth-panel{clip-path:none}
  .auth-form{padding:14px}
  .auth-steam{padding:0 14px}
  .auth-main h1{font-size:31px}
}