/* MIRRIM · Вход в кабинет игрока — светлое стекло (боевая версия) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0A0A0A;--ink-2:#4A4A55;--ink-3:#7C7889;--ink-4:#A9A4B5;
  --purple-900:#2E1065;--purple-700:#5B21B6;--purple-500:#7C3AED;--purple-400:#8B5CF6;--purple-300:#A78BFA;--purple-200:#C9B8FF;--purple-100:#E7DEFF;--purple-50:#F4F0FF;
  --lime:#C6F432;--lime-deep:#8FB300;
  --success:#5DD33C;--success-ink:#2E9E1E;--warning:#F59E0B;--warning-ink:#B7791F;--error:#EF4444;
  --glass:rgba(255,255,255,.66);--glass-line:rgba(255,255,255,.88);--solid:rgba(255,255,255,.86);
  --shadow:0 18px 50px -18px rgba(46,24,92,.3);--shadow-sm:0 4px 18px rgba(46,24,92,.08);
  --r-sm:16px;--r-md:20px;--r-lg:24px;--r-xl:28px;
  --font:"Manrope",system-ui,-apple-system,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:#EFEBF8;-webkit-font-smoothing:antialiased;min-height:100vh;display:grid;place-items:center;padding:clamp(14px,4vw,40px)}
a{text-decoration:none;color:var(--purple-500)}
a:hover{color:var(--purple-700)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
img{max-width:100%;display:block}

.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(168deg,#F8F6FE 0%,#F0EBF9 52%,#F3F7EA 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(74px);opacity:.9}
.b1{width:min(560px,130vw);aspect-ratio:1;background:radial-gradient(circle,#A78BFA,transparent 68%);top:-170px;left:-120px}
.b2{width:min(480px,120vw);aspect-ratio:1;background:radial-gradient(circle,#C9B8FF,transparent 70%);top:30%;right:-150px}
.b3{width:min(440px,120vw);aspect-ratio:1;background:radial-gradient(circle,rgba(198,244,50,.44),transparent 66%);bottom:-140px;left:-110px}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* карточка */
.auth{position:relative;z-index:2;width:100%;max-width:456px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--glass-line);border-radius:var(--r-xl);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.6);padding:clamp(20px,5.4vw,30px);overflow:hidden}
.auth__top{display:flex;align-items:center;gap:12px;margin-bottom:clamp(18px,4.6vw,24px)}
.auth__logo{height:24px;width:auto}
.auth__back{width:38px;height:38px;border-radius:12px;display:none;place-items:center;background:rgba(124,58,237,.07);color:var(--ink-2)}
.auth__back.on{display:grid}
.auth__back svg{width:18px;height:18px}
.auth__back:hover{background:rgba(124,58,237,.14);color:var(--purple-500)}
.auth__step{margin-left:auto;font:800 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.pbar{height:4px;border-radius:999px;background:rgba(124,58,237,.12);overflow:hidden;margin-bottom:clamp(16px,4vw,22px)}
.pbar i{display:block;height:100%;width:33%;border-radius:999px;background:linear-gradient(90deg,var(--purple-400),var(--purple-500));transition:width .38s cubic-bezier(.32,.72,0,1)}

.step{display:none}
.step.on{display:block;animation:in .3s cubic-bezier(.32,.72,0,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.h1{font:800 clamp(22px,5.8vw,27px)/1.14 var(--font);letter-spacing:-.028em}
.sub{font:500 14.5px/1.5 var(--font);color:var(--ink-2);margin-top:9px;text-wrap:pretty}
.sub b{font-weight:800;color:var(--ink)}

.fld{display:grid;gap:7px;margin-top:16px}
.fld>label{font:800 11.5px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.fld>label i{font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink-4);margin-left:6px}
.inp{height:54px;width:100%;border-radius:16px;border:1.5px solid rgba(124,58,237,.16);background:#fff;padding:0 16px;font:600 16px/1 var(--font);outline:none;transition:.16s;color:var(--ink)}
.inp::placeholder{color:var(--ink-4);font-weight:500}
.inp:focus{border-color:var(--purple-300);box-shadow:0 0 0 4px rgba(167,139,250,.18)}
.fld.bad .inp{border-color:var(--error);box-shadow:0 0 0 4px rgba(239,68,68,.13)}
.err{display:none;font:700 12.5px/1.35 var(--font);color:var(--error)}
.fld.bad .err{display:block}
.hint{font:600 12.5px/1.4 var(--font);color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;width:100%;padding:0 20px;border-radius:16px;font:800 15.5px/1.2 var(--font);transition:.16s;text-align:center}
.btn svg{width:19px;height:19px;stroke-width:2.4;flex:0 0 auto}
.btn--lime{background:var(--lime);color:#0A0A0A;box-shadow:0 14px 30px -14px rgba(198,244,50,1),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--lime:hover{background:#D4FB55;transform:translateY(-1px);color:#0A0A0A}
.btn--tg{background:linear-gradient(150deg,#3AA7EA,#2481CC);color:#fff;box-shadow:0 14px 30px -14px rgba(36,129,204,.8)}
.btn--tg:hover{transform:translateY(-1px);color:#fff}
.btn--ghost{background:rgba(255,255,255,.6);border:1.5px solid rgba(124,58,237,.16);color:var(--ink)}
.btn--ghost:hover{background:#fff;border-color:var(--purple-300);color:var(--purple-500)}
.btn--sm{min-height:44px;width:auto;padding:0 16px;font-size:13.5px;border-radius:13px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.loading{pointer-events:none;color:transparent!important;position:relative}
.btn.loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(10,10,10,.25);border-top-color:#0A0A0A;animation:spin .7s linear infinite}
.btn--tg.loading::after,.btn--purple.loading::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.btn+.btn{margin-top:10px}
.mt{margin-top:16px}
.mt-s{margin-top:10px}

.or{display:flex;align-items:center;gap:12px;margin:18px 0;font:800 11.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(124,58,237,.14)}
.fast{display:inline-flex;align-items:center;gap:6px;font:800 11px/1 var(--font);background:rgba(198,244,50,.42);color:#4E6B00;padding:6px 10px;border-radius:999px;margin-bottom:9px}
.fast svg{width:13px;height:13px}
.legal{font:500 12px/1.5 var(--font);color:var(--ink-3);margin-top:16px;text-align:center;text-wrap:pretty}

/* ячейки кода */
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:18px}
.otp input{height:60px;width:100%;min-width:0;border-radius:15px;border:1.5px solid rgba(124,58,237,.18);background:#fff;text-align:center;font:800 24px/1 var(--font);outline:none;transition:.15s;color:var(--ink);padding:0}
.otp input:focus{border-color:var(--purple-400);box-shadow:0 0 0 4px rgba(167,139,250,.2)}
.otp input.filled{border-color:var(--purple-200);background:#FCFBFF}
.otp.bad input{border-color:var(--error);background:#FFF7F7;animation:shake .32s}
.otp.ok input{border-color:var(--success);background:#F6FFF3}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.otprow{display:flex;align-items:center;gap:12px;margin-top:15px;flex-wrap:wrap}
.otprow .hint{flex:1;min-width:150px}
.msg{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:15px;margin-top:15px;font:600 12.8px/1.45 var(--font)}
.msg svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.msg--warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#8A5A08}
.msg--err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#A32222}
.msg--ok{background:rgba(93,211,60,.1);border:1px solid rgba(93,211,60,.34);color:#22701A}
.msg--info{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.16);color:var(--purple-700)}
.msg b{display:block;font-weight:800;margin-bottom:3px}

/* telegram ожидание */
.tgwait{display:grid;justify-items:center;text-align:center;padding:22px 0 6px}
.tgwait__o{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(58,167,234,.2),transparent 70%);position:relative}
.tgwait__o::before,.tgwait__o::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(58,167,234,.45);animation:pulse 1.9s ease-out infinite}
.tgwait__o::after{animation-delay:.95s}
@keyframes pulse{from{transform:scale(.55);opacity:1}to{transform:scale(1);opacity:0}}
.tgwait__o svg{width:38px;height:38px;color:#2481CC;position:relative;z-index:2}
.tgwait b{font:800 17px/1.25 var(--font);margin-top:16px}
.tgwait span{font:600 13.5px/1.5 var(--font);color:var(--ink-2);margin-top:8px;max-width:290px}
.tgsteps{display:grid;gap:8px;margin-top:18px}
.tgsteps div{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);font:700 13px/1.3 var(--font)}
.tgsteps i{width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-style:normal;font:800 11.5px/1 var(--font);background:rgba(36,129,204,.12);color:#2481CC}

/* онбординг */
.two{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:400px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.citybox{position:relative}
.citybox__auto{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:5px;font:800 10.5px/1 var(--font);background:rgba(93,211,60,.16);color:var(--success-ink);padding:6px 9px;border-radius:999px;pointer-events:none}
.citybox.has-auto .citybox__auto{display:inline-flex}
.citybox__auto svg{width:12px;height:12px}
.citybox.has-auto .inp{padding-right:118px}
.citygeo{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:8px;min-height:46px;border-radius:14px;border:1.5px solid rgba(124,58,237,.18);background:rgba(124,58,237,.05);font:800 13.5px/1 var(--font);color:var(--purple-500);cursor:pointer}
.citygeo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.citygeo:hover{background:rgba(124,58,237,.1)}
.citygeo[disabled]{opacity:.6;pointer-events:none}
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:9;background:#fff;border:1px solid rgba(124,58,237,.14);border-radius:16px;box-shadow:0 18px 40px -14px rgba(46,24,92,.35);overflow:hidden;display:none}
.ac.on{display:block}
.ac button{display:block;width:100%;text-align:left;padding:12px 15px;font:700 14.5px/1.2 var(--font)}
.ac button:hover,.ac button.sel{background:var(--purple-50);color:var(--purple-700)}
.ac span{display:block;padding:11px 15px;font:600 13px/1.3 var(--font);color:var(--ink-3)}

.avset{display:flex;gap:7px;margin-top:12px}
.avset button{flex:1;min-height:40px;border-radius:12px;border:1.5px solid rgba(124,58,237,.16);font:800 13px/1 var(--font);color:var(--ink-2);background:rgba(255,255,255,.6);transition:.15s}
.avset button.on{background:var(--purple-500);border-color:var(--purple-500);color:#fff}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:9px;margin-top:11px}
.av{position:relative;aspect-ratio:1;border-radius:18px;border:2px solid transparent;background:rgba(255,255,255,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);padding:5px;transition:.15s;overflow:hidden}
.av img{width:100%;height:100%;object-fit:contain}
.av:hover{transform:translateY(-2px)}
.av.on{border-color:var(--lime);background:#fff;box-shadow:0 10px 22px -10px rgba(143,179,0,.7)}
.av.on::after{content:"";position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6.5'/%3E%3C/svg%3E") center/10px no-repeat}

.dob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:8px}
.sel{height:54px;width:100%;border-radius:16px;border:1.5px solid rgba(124,58,237,.16);background:#fff;padding:0 12px;font:600 16px/1 var(--font);outline:none;appearance:none;color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7889' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:16px;padding-right:30px}
.sel:focus{border-color:var(--purple-300);box-shadow:0 0 0 4px rgba(167,139,250,.18)}
.fld.bad .sel{border-color:var(--error)}

/* возрастная рамка */
.age{margin-top:16px;padding:16px;border-radius:var(--r-md);background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.34);display:none}
.age.on{display:block;animation:in .28s}
.age--kid{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.24)}
.age__hd{display:flex;gap:11px;align-items:flex-start}
.age__ic{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;background:rgba(245,158,11,.2);color:var(--warning-ink)}
.age--kid .age__ic{background:rgba(124,58,237,.12);color:var(--purple-500)}
.age__ic svg{width:17px;height:17px}
.age b{display:block;font:800 14.5px/1.25 var(--font)}
.age p{font:600 12.8px/1.5 var(--font);color:var(--ink-2);margin-top:6px}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:13px;cursor:pointer}
.check input{appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(124,58,237,.32);background:#fff;flex:0 0 auto;margin-top:1px;position:relative;cursor:pointer;transition:.15s}
.check input:checked{background:var(--purple-500);border-color:var(--purple-500)}
.check input:checked::after{content:"";position:absolute;left:6px;top:3px;width:8px;height:12px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.check.bad input{border-color:var(--error);box-shadow:0 0 0 4px rgba(239,68,68,.13)}
.check span{font:600 12.6px/1.5 var(--font);color:var(--ink-2)}
.legaldoc{font-weight:800;color:var(--purple-500)}

/* готово */
.done{display:grid;justify-items:center;text-align:center;padding:12px 0 4px}
.done__av{width:104px;height:104px;border-radius:32px;background:#fff;border:2px solid var(--lime);display:grid;place-items:center;padding:8px;box-shadow:0 16px 36px -14px rgba(143,179,0,.7);animation:pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.done__av img{width:100%;height:100%;object-fit:contain}
.done .h1{margin-top:18px}
.done .sub{max-width:300px}
.done__go{width:100%;margin-top:20px}
.conf{position:absolute;top:0;left:0;right:0;height:180px;pointer-events:none;overflow:hidden}
.conf i{position:absolute;width:7px;height:11px;border-radius:2px;animation:fall 1.5s cubic-bezier(.3,.7,.6,1) forwards}
@keyframes fall{from{transform:translateY(-30px) rotate(0);opacity:1}to{transform:translateY(210px) rotate(420deg);opacity:0}}

@media (min-width:768px){.auth{max-width:472px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}