@import url("game_fonts.css?v=fonts-3");

html,
body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
touch-action:manipulation;
overscroll-behavior:none;
background:#050101;
font-family:var(--font-ui);
}

*{
box-sizing:border-box;
}

.auth-page{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:#fff4ce;
}

.auth-scene{
position:relative;
container-type:inline-size;
width:min(100vw, calc(100dvh * 852 / 1846));
height:min(100dvh, calc(100vw * 1846 / 852));
max-width:852px;
max-height:1846px;
background-position:center;
background-repeat:no-repeat;
background-size:100% 100%;
overflow:hidden;
}

.auth-login .auth-scene{
background-image:url("img/mobile/login.png");
}

.auth-registration .auth-scene{
background-image:url("img/mobile/login.png");
}

.auth-form{
position:absolute;
inset:0;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}

.auth-input{
position:absolute;
left:21.1%;
width:57.7%;
height:5.25%;
border:0;
outline:0;
border-radius:0;
background:transparent;
color:#fff4ce;
font-size:clamp(16px, 5.7cqw, 26px);
font-weight:700;
text-align:left;
text-shadow:0 2px 4px rgba(0,0,0,.95);
padding:0 3.6% 0 12%;
appearance:none;
-webkit-appearance:none;
}

.auth-registration .auth-input{
font-size:clamp(12px, 4.45cqw, 19px);
padding-left:13%;
padding-right:2.2%;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus{
-webkit-text-fill-color:#fff4ce;
transition:background-color 9999s ease-in-out 0s;
box-shadow:0 0 0 1000px transparent inset;
}

.auth-input::placeholder{
color:rgba(255,244,206,.46);
}

.auth-submit{
position:absolute;
border:0;
outline:0;
background:transparent;
cursor:pointer;
font-family:var(--font-accent);
font-weight:900;
letter-spacing:0;
text-transform:uppercase;
text-shadow:0 2px 2px rgba(0,0,0,.9), 0 0 10px rgba(255,197,54,.35);
}

.auth-submit:disabled{
opacity:.62;
}

.auth-login-name{top:45.35%;}
.auth-login-pass{top:52.78%;}

.auth-login-submit{
left:28.1%;
top:61.8%;
width:43.9%;
height:6.45%;
color:#ffd76a;
font-size:clamp(18px, 7.3cqw, 34px);
}

.auth-register-row{
position:absolute;
left:10%;
top:69.85%;
width:80%;
height:4.4%;
display:flex;
align-items:center;
justify-content:center;
gap:.45em;
color:#f7ede2;
font-size:clamp(11px, 3.65cqw, 17px);
font-weight:500;
text-shadow:0 2px 4px rgba(0,0,0,.95);
white-space:nowrap;
pointer-events:none;
}

.auth-register-link{
color:#ffe08a;
font-weight:700;
text-decoration:none;
text-shadow:0 2px 4px rgba(0,0,0,.95);
pointer-events:auto;
}

.install-app-btn{
position:absolute;
left:31.75%;
top:auto;
bottom:4.2%;
z-index:5;
width:36.5%;
min-height:24px;
height:2.65%;
display:flex;
align-items:center;
justify-content:center;
gap:.55em;
border:1px solid rgba(255,224,138,.58);
border-radius:8px;
background:linear-gradient(180deg,rgba(72,42,18,.92),rgba(28,14,8,.92));
color:#ffe8a6;
font-family:var(--font-ui);
font-size:clamp(9px, 2.2cqw, 11px);
font-weight:800;
line-height:1.1;
letter-spacing:0;
text-align:center;
text-shadow:0 2px 4px rgba(0,0,0,.95);
box-shadow:0 9px 22px rgba(0,0,0,.42), inset 0 0 14px rgba(255,210,98,.13);
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}

.install-app-btn[hidden]{
display:none;
}

.install-app-btn:active{
transform:translateY(1px);
}

.install-app-icon{
position:relative;
flex:0 0 auto;
width:1.55em;
height:1.55em;
border:2px solid currentColor;
border-radius:6px;
box-shadow:inset 0 -.18em 0 rgba(255,255,255,.16);
}

.install-app-icon::before,
.install-app-icon::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:.76em;
height:2px;
border-radius:2px;
background:currentColor;
transform:translate(-50%,-50%);
}

.install-app-icon::after{
transform:translate(-50%,-50%) rotate(90deg);
}

.auth-reg-name{top:46.55%;}
.auth-reg-email{top:54.4%;}
.auth-reg-pass{top:62.12%;}
.auth-reg-pass2{top:69.9%;}

.auth-reg-submit{
left:25.1%;
top:76.68%;
width:49.9%;
height:6.1%;
color:transparent;
font-size:0;
}

.auth-login-link{
position:absolute;
left:57.8%;
top:84.75%;
width:10.8%;
height:4.5%;
display:block;
}

.auth-message{
position:fixed;
left:50%;
top:calc(10px + env(safe-area-inset-top));
z-index:26000;
width:min(86vw, 360px);
min-height:34px;
display:flex;
align-items:center;
justify-content:center;
padding:8px 13px;
border:1px solid rgba(255,120,120,.4);
border-radius:8px;
background:linear-gradient(180deg,rgba(24,13,7,.96),rgba(8,9,16,.96));
color:#ff9f9f;
font-size:clamp(12px, 4.1cqw, 20px);
font-weight:700;
line-height:1.2;
text-align:center;
text-shadow:0 2px 4px rgba(0,0,0,.95);
box-shadow:0 10px 28px rgba(0,0,0,.52), inset 0 0 14px rgba(212,151,38,.12);
transform:translateX(-50%);
pointer-events:none;
}

.auth-reg-message{
top:calc(10px + env(safe-area-inset-top));
}

.auth-message.success{
color:#baff8c;
border-color:rgba(186,255,140,.42);
}

.auth-message:empty{
display:none;
}

.auth-login{
background:
radial-gradient(circle at 20% 16%, rgba(255,240,190,.18), transparent 28%),
radial-gradient(circle at 78% 20%, rgba(38,220,255,.16), transparent 26%),
radial-gradient(circle at 62% 82%, rgba(184,82,255,.14), transparent 30%),
linear-gradient(180deg,#03050b 0%,#09070f 46%,#03030a 100%);
overflow:hidden;
}

.auth-login::before,
.auth-login::after{
content:"";
position:absolute;
inset:-20%;
pointer-events:none;
}

.auth-login::before{
background:
radial-gradient(ellipse at 18% 18%, rgba(255,246,205,.34), transparent 34%),
radial-gradient(ellipse at 82% 20%, rgba(66,225,255,.26), transparent 32%),
radial-gradient(ellipse at 30% 86%, rgba(255,213,105,.22), transparent 34%),
radial-gradient(ellipse at 78% 78%, rgba(204,96,255,.25), transparent 36%);
filter:blur(10px);
opacity:.82;
animation:authAuroraGlow 8s ease-in-out infinite;
}

.auth-login::after{
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.58), transparent 9%),
radial-gradient(circle at 70% 25%, rgba(255,214,105,.48), transparent 12%),
radial-gradient(circle at 58% 70%, rgba(69,221,255,.42), transparent 11%),
radial-gradient(circle at 22% 76%, rgba(194,82,255,.36), transparent 12%);
filter:blur(6px);
opacity:.9;
animation:authGlowPulse 6.5s ease-in-out infinite;
}

.auth-login::before,
.auth-login::after{
display:none;
}

.auth-login .auth-scene{
width:min(100vw, 430px);
height:100dvh;
max-width:430px;
max-height:none;
display:flex;
align-items:center;
justify-content:center;
padding:calc(20px + env(safe-area-inset-top)) 20px calc(86px + env(safe-area-inset-bottom));
background-image:url("img/mobile/login.png");
background-position:center;
background-repeat:no-repeat;
background-size:100% 100%;
overflow:visible;
}

.auth-login .auth-form{
position:relative;
inset:auto;
z-index:2;
width:min(100%, 360px);
display:grid;
gap:11px;
padding:20px 22px 18px;
border:0;
border-radius:18px;
background:transparent;
box-shadow:
0 24px 70px rgba(0,0,0,.62),
0 0 36px rgba(255,214,112,.16),
0 0 46px rgba(57,215,255,.12);
overflow:hidden;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.auth-login .auth-form::before{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:18px;
padding:2px;
background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,213,102,.95),rgba(67,225,255,.9),rgba(188,88,255,.78),rgba(255,255,255,.92));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
box-shadow:0 0 24px rgba(255,216,109,.34),0 0 34px rgba(67,225,255,.22);
pointer-events:none;
}

.auth-login .auth-form::after{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:14px;
background:
radial-gradient(circle at 20% 12%, rgba(255,238,178,.28), transparent 30%),
radial-gradient(circle at 88% 28%, rgba(83,226,255,.2), transparent 34%),
radial-gradient(circle at 54% 94%, rgba(201,96,255,.18), transparent 36%),
rgba(0,0,0,.2);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 0 18px rgba(255,215,105,.2), inset 0 0 16px rgba(73,220,255,.1);
animation:authPanelGlow 5.4s ease-in-out infinite;
pointer-events:none;
}

.auth-login .auth-form{
box-shadow:0 18px 44px rgba(0,0,0,.46);
}

.auth-login .auth-form::before{
box-shadow:none;
}

.auth-login .auth-form::after{
background:rgba(0,0,0,.2);
box-shadow:none;
animation:none;
}

.auth-login .auth-card-head::after{
box-shadow:none;
}

.auth-login .auth-input{
box-shadow:none;
}

.auth-login .auth-input:focus{
box-shadow:none;
}

.auth-card-head{
position:relative;
z-index:1;
display:grid;
gap:10px;
margin-bottom:0;
text-align:center;
justify-items:center;
}

.auth-card-head strong{
color:#fff7cf;
font-family:var(--font-title);
font-size:clamp(24px, 7vw, 31px);
line-height:1;
letter-spacing:.02em;
text-shadow:
0 0 9px rgba(255,255,255,.42),
0 0 18px rgba(255,213,103,.4),
0 0 26px rgba(45,222,255,.22);
}

.auth-card-head::after{
content:"";
width:72%;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#fff7ca,#ffd665,#46e6ff,#b25cff,#fff7ca);
background-size:220% 100%;
box-shadow:none;
animation:authTitleLineFlow 3.2s linear infinite;
}

.auth-login .auth-field{
position:relative;
z-index:1;
display:grid;
gap:7px;
}

.auth-login .auth-field > span:not(.auth-password-wrap){
padding-left:3px;
color:#fff1bd;
font-size:12px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
text-shadow:0 0 10px rgba(255,212,97,.42);
}

.auth-login .auth-input{
position:relative;
left:auto;
top:auto;
width:100%;
height:45px;
border:1px solid rgba(255,220,126,.4);
border-radius:12px;
background:
linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
rgba(4,7,16,.06);
color:#fff;
font-size:17px;
font-weight:800;
text-align:left;
text-shadow:0 0 12px rgba(255,255,255,.2);
padding:0 15px;
box-shadow:none;
}

.auth-login .auth-input:focus{
border-color:rgba(93,231,255,.86);
box-shadow:none;
}

.auth-login .auth-input::placeholder{
color:rgba(255,255,255,.5);
font-weight:700;
}

.auth-login .auth-input:-webkit-autofill,
.auth-login .auth-input:-webkit-autofill:hover,
.auth-login .auth-input:-webkit-autofill:focus{
-webkit-text-fill-color:#fff;
box-shadow:0 0 0 1000px rgba(8,10,18,.18) inset;
}

.auth-login .auth-submit{
position:relative;
left:auto;
top:auto;
z-index:1;
width:100%;
height:48px;
margin-top:4px;
border:1px solid rgba(255,255,255,.4);
border-radius:13px;
background:
linear-gradient(90deg,#fff6ca 0%,#ffd665 20%,#46e6ff 52%,#b25cff 76%,#fff6ca 100%);
background-size:220% 100%;
color:#140b18;
font-size:19px;
letter-spacing:.06em;
text-shadow:0 1px 0 rgba(255,255,255,.55);
box-shadow:0 12px 30px rgba(0,0,0,.42), 0 0 24px rgba(255,215,105,.25);
animation:authButtonFlow 4.8s linear infinite;
}

.auth-login .auth-submit:active{
transform:translateY(1px) scale(.99);
}

.auth-login .auth-register-row{
position:relative;
left:auto;
top:auto;
z-index:1;
width:100%;
height:auto;
margin-top:0;
font-size:13px;
color:rgba(255,255,255,.78);
}

.auth-login .auth-register-link{
color:#fff0a8;
text-shadow:0 0 12px rgba(255,215,105,.5);
}

.auth-login .auth-message{
top:calc(14px + env(safe-area-inset-top));
}

.auth-login .install-app-btn{
left:50%;
bottom:calc(18px + env(safe-area-inset-bottom));
width:min(82vw, 300px);
height:42px;
min-height:42px;
transform:translateX(-50%);
border-radius:12px;
background:rgba(10,12,22,.76);
backdrop-filter:blur(8px);
}

.auth-password-wrap{
position:relative;
display:block;
}

.auth-password-wrap .auth-input{
padding-right:52px;
}

.password-toggle{
position:absolute;
right:7px;
top:50%;
z-index:2;
width:38px;
height:38px;
margin:0;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.04);
box-shadow:0 0 14px rgba(84,226,255,.12);
transform:translateY(-50%);
cursor:pointer;
appearance:none;
-webkit-appearance:none;
}

.password-toggle:active{
transform:translateY(-50%) scale(.96);
}

.password-eye-icon{
position:absolute;
left:50%;
top:50%;
width:22px;
height:13px;
border:2px solid rgba(255,238,178,.86);
border-radius:50% / 58%;
transform:translate(-50%,-50%);
box-shadow:0 0 10px rgba(255,217,105,.34);
}

.password-eye-icon::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:6px;
height:6px;
border-radius:50%;
background:rgba(93,231,255,.95);
box-shadow:0 0 9px rgba(93,231,255,.72);
transform:translate(-50%,-50%);
}

.password-toggle.is-visible .password-eye-icon{
border-color:#5de7ff;
box-shadow:0 0 13px rgba(93,231,255,.55);
}

.auth-registration{
background:linear-gradient(180deg,#03050b 0%,#09070f 46%,#03030a 100%);
overflow:hidden;
}

.auth-registration::before,
.auth-registration::after{
display:none;
}

.auth-registration::before{
background:
radial-gradient(ellipse at 18% 18%, rgba(255,246,205,.34), transparent 34%),
radial-gradient(ellipse at 82% 20%, rgba(66,225,255,.26), transparent 32%),
radial-gradient(ellipse at 30% 86%, rgba(255,213,105,.22), transparent 34%),
radial-gradient(ellipse at 78% 78%, rgba(204,96,255,.25), transparent 36%);
filter:blur(10px);
opacity:.82;
animation:authAuroraGlow 8s ease-in-out infinite;
}

.auth-registration::after{
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.58), transparent 9%),
radial-gradient(circle at 70% 25%, rgba(255,214,105,.48), transparent 12%),
radial-gradient(circle at 58% 70%, rgba(69,221,255,.42), transparent 11%),
radial-gradient(circle at 22% 76%, rgba(194,82,255,.36), transparent 12%);
filter:blur(6px);
opacity:.9;
animation:authGlowPulse 6.5s ease-in-out infinite;
}

.auth-registration .auth-scene{
width:min(100vw, 430px);
height:100dvh;
max-width:430px;
max-height:none;
display:flex;
align-items:center;
justify-content:center;
padding:calc(18px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
background-image:url("img/mobile/login.png");
background-position:center;
background-repeat:no-repeat;
background-size:100% 100%;
overflow:visible;
}

.auth-registration .auth-form{
position:relative;
inset:auto;
z-index:2;
width:min(100%, 360px);
display:grid;
gap:8px;
padding:18px 22px 17px;
border:0;
border-radius:18px;
background:transparent;
box-shadow:0 18px 44px rgba(0,0,0,.46);
overflow:hidden;
animation:authPanelEnter .42s ease-out both;
}

.auth-registration .auth-form::before{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:18px;
padding:2px;
background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,213,102,.95),rgba(67,225,255,.9),rgba(188,88,255,.78),rgba(255,255,255,.92));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
box-shadow:none;
pointer-events:none;
}

.auth-registration .auth-form::after{
content:"";
position:absolute;
inset:0;
z-index:0;
border-radius:14px;
background:
rgba(0,0,0,.2);
border:1px solid rgba(255,255,255,.22);
box-shadow:none;
animation:none;
pointer-events:none;
}

.auth-registration .auth-field{
position:relative;
z-index:1;
display:grid;
gap:6px;
}

.auth-registration .auth-field span:not(.auth-password-wrap):not(.password-eye-icon){
padding-left:3px;
color:#fff1bd;
font-size:11px;
font-weight:900;
letter-spacing:.09em;
text-transform:uppercase;
text-shadow:none;
}

.auth-registration .auth-input{
position:relative;
left:auto;
top:auto;
width:100%;
height:42px;
border:1px solid rgba(255,220,126,.4);
border-radius:12px;
background:
linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
rgba(4,7,16,.06);
color:#fff;
font-size:16px;
font-weight:800;
text-align:left;
text-shadow:none;
padding:0 15px;
box-shadow:none;
}

.auth-registration .auth-password-wrap .auth-input{
padding-right:52px;
}

.auth-registration .auth-input:focus{
border-color:rgba(93,231,255,.86);
box-shadow:none;
}

.auth-registration .auth-submit{
position:relative;
left:auto;
top:auto;
z-index:1;
width:100%;
height:46px;
margin-top:4px;
border:1px solid rgba(255,255,255,.4);
border-radius:13px;
background:
linear-gradient(90deg,#fff6ca 0%,#ffd665 20%,#46e6ff 52%,#b25cff 76%,#fff6ca 100%);
background-size:220% 100%;
color:#140b18;
font-size:16px;
letter-spacing:.04em;
text-shadow:none;
box-shadow:0 12px 26px rgba(0,0,0,.38);
animation:authButtonFlow 4.8s linear infinite;
}

.auth-registration .password-toggle.is-visible .password-eye-icon{
box-shadow:none;
}

.auth-registration .auth-register-row{
position:relative;
left:auto;
top:auto;
z-index:1;
width:100%;
height:auto;
font-size:13px;
color:rgba(255,255,255,.78);
}

@keyframes authPanelEnter{
from{opacity:0;transform:translateY(16px) scale(.96);}
to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes authAuroraGlow{
0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.62;}
38%{transform:translate3d(3%, -2%, 0) scale(1.05);opacity:.92;}
70%{transform:translate3d(-2%, 3%, 0) scale(1.03);opacity:.76;}
}

@keyframes authGlowPulse{
0%,100%{opacity:.65;transform:scale(1);}
50%{opacity:1;transform:scale(1.04);}
}

@keyframes authPanelGlow{
0%,100%{opacity:.78;filter:saturate(1);}
45%{opacity:.95;filter:saturate(1.2);}
72%{opacity:.86;filter:saturate(1.08);}
}

@keyframes authButtonFlow{
0%{background-position:0% 50%;}
100%{background-position:220% 50%;}
}

@keyframes authTitleLineFlow{
0%{background-position:0% 50%;filter:hue-rotate(0deg);}
100%{background-position:220% 50%;filter:hue-rotate(18deg);}
}

.install-help{
position:fixed;
inset:0;
z-index:28000;
display:none;
align-items:center;
justify-content:center;
padding:22px;
background:rgba(4,4,8,.72);
}

.install-help.is-open{
display:flex;
}

.install-help-card{
position:relative;
width:min(90vw, 380px);
max-height:min(84vh, 520px);
overflow:auto;
padding:24px 22px 22px;
border:1px solid rgba(255,224,138,.52);
border-radius:8px;
background:linear-gradient(180deg,rgba(32,19,12,.98),rgba(9,10,18,.98));
color:#fff4ce;
box-shadow:0 18px 48px rgba(0,0,0,.62), inset 0 0 20px rgba(255,210,98,.11);
}

.install-help-close{
position:absolute;
right:10px;
top:8px;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#ffe8a6;
font-size:28px;
line-height:30px;
font-weight:400;
cursor:pointer;
}

.install-help-card h2{
margin:0 34px 12px 0;
color:#ffe08a;
font-size:22px;
line-height:1.18;
letter-spacing:0;
}

.install-help-card p{
margin:0 0 14px;
color:#f7ede2;
font-size:15px;
line-height:1.42;
}

.install-help-card ol{
margin:0;
padding-left:22px;
color:#fff4ce;
font-size:16px;
line-height:1.42;
}

.install-help-card li + li{
margin-top:8px;
}

#orientationLock{
display:none;
position:fixed;
inset:0;
z-index:30000;
padding:24px;
background:rgba(8,8,12,.96);
color:#fff;
align-items:center;
justify-content:center;
text-align:center;
font-size:22px;
font-weight:700;
line-height:1.3;
}

@media (orientation:landscape) and (max-width:1023px){
.auth-scene{
visibility:hidden;
pointer-events:none;
}

#orientationLock{
display:flex;
}
}