/* Egirl's split-screen auth composition, adapted to EloBoostGame content. */
#account{inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;padding:0;background:#0d1117;color:#f4f5f7;overflow:auto;box-shadow:none}#account[open]{animation:account-enter .4s both}#account::backdrop{background:#080c12}#account .ebg-auth-layout{display:grid;grid-template-columns:minmax(0,59.5fr) minmax(0,40.5fr);min-height:100svh}#account .ebg-auth-art{position:relative;isolation:isolate;min-height:100svh;background:#15100e;overflow:hidden}#account .ebg-auth-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% center;z-index:-2;animation:account-scene 1s both}#account .ebg-auth-art:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080c12a0,transparent 85%),linear-gradient(180deg,#080c1295,transparent 85%)}#account .ebg-auth-brand{position:absolute;left:7.6%;top:4.5%;display:block;line-height:0}#account .ebg-auth-brand img{width:220px;height:auto;display:block}#account .ebg-auth-headline{position:relative;margin-left:10.2%;padding-top:19.5svh;width:84%;animation:account-copy .7s .15s both}#account .ebg-auth-headline h2{font-family:Outfit,Arial,sans-serif;font-size:clamp(50px,4.25vw,82px);font-weight:600;line-height:1.04;letter-spacing:-2px;margin:0;text-shadow:0 3px 20px #0007}#account .ebg-auth-headline h2 span{color:#ff945e}#account .ebg-auth-headline p{font-size:17px;line-height:1.5;font-weight:400;margin:80px 0 22px;max-width:410px;text-shadow:0 2px 8px #000;color:#f4f5f7}#account .ebg-auth-explore{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:55px;padding:0 34px;border-radius:40px;background:linear-gradient(110deg,#ffac79,#ff8146);color:#1b1008;font-size:16px;font-weight:500;transition:transform .2s,box-shadow .2s}#account .ebg-auth-explore:hover{transform:translateY(-2px);box-shadow:0 8px 30px #ff814645}#account .ebg-auth-explore span{font-size:24px}#account .ebg-auth-side{position:relative;isolation:isolate;min-width:0;min-height:100svh;padding:clamp(125px,18svh,185px) clamp(30px,3.5vw,70px) 48px;background:#0d1117;overflow:hidden}#account .ebg-auth-side:before{content:'';position:absolute;inset:-60px;z-index:-2;background:linear-gradient(#20130db8,#080c12de),url('./assets/valorant-auth-fullhd.jpg') center/cover;filter:blur(32px);opacity:.72}#account .ebg-auth-side:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 30% 5%,#ff81461f,transparent 55%),radial-gradient(ellipse at 90% 75%,#ff9b6014,transparent 65%)}#account .ebg-auth-tools{position:absolute;right:7%;top:25px;display:flex;gap:22px;align-items:center;z-index:5}#account .ebg-auth-tools>a,#account .close{background:#ffffff0c;border:1px solid #ffffff04;backdrop-filter:blur(10px);border-radius:30px;transition:background .2s,transform .2s}#account .ebg-auth-tools>a{padding:14px 30px;font-size:16px}#account .close{position:static;width:50px;height:50px;display:grid;place-items:center;color:inherit}#account .close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}#account .close:hover{transform:rotate(90deg)}#account .ebg-auth-stage{position:relative;max-width:620px;margin-inline:auto}#account #authview h2{font-size:clamp(28px,2.22vw,42px);line-height:1.15;letter-spacing:-.8px;font-weight:600;margin:0 0 14px}#account .ebg-auth-subtitle{font-size:16px;line-height:1.55;margin:0 0 36px;color:#dbe0e8;font-weight:300}#account .ebg-auth-tabs{display:flex;border-radius:30px;background:#ffffff04;margin:38px 0 23px;gap:4px}#account .ebg-auth-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;width:50%;height:49px;border:1px solid transparent;border-radius:30px;background:transparent;color:#c9ced6;font-size:16px;font-weight:400;transition:background .2s,border-color .2s,color .2s}#account .ebg-auth-tabs button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}#account .ebg-auth-tabs button[aria-pressed=true]{border-color:#ff8146;color:#ffae80;background:#ff814610;box-shadow:inset 0 0 15px #ff814609}#account #authform{margin:0;display:block}#account .ebg-input-shell{display:flex;align-items:center;gap:17px;width:100%;height:59px;padding:0 21px;margin:0 0 12px;border:1px solid #ffffff0d;border-radius:20px;background:#ffffff04;transition:background .2s,border-color .2s,box-shadow .2s}#account .ebg-input-shell:focus-within{border-color:#ff945e;box-shadow:0 0 0 3px #ff945e14;background:#ffffff08}#account .ebg-input-shell>svg{width:22px;height:22px;flex-shrink:0;color:#ffe6d7;stroke:currentColor;fill:none;stroke-width:1.5}#account .ebg-input-shell input{width:100%;min-width:0;height:54px;border:0;background:transparent;padding:0;color:#fff;border-radius:0;font-size:16px;outline:none}#account input::placeholder{color:#b4b9c2}#account .ebg-auth-note{display:flex;align-items:center;gap:9px;color:#b9c0ca;font-size:12px;line-height:1.5;margin:20px 4px 23px}#account .ebg-auth-note svg{width:17px;height:17px;flex-shrink:0;color:#ff945e;fill:none;stroke:currentColor;stroke-width:1.5}#account #authsubmit{display:flex;justify-content:center;align-items:center;gap:17px;width:100%;height:55px;border-radius:35px;padding:0 27px;background:linear-gradient(105deg,#ff8146,#ffb47e 40%,#ff8146);color:#1b1008;font-size:16px;font-weight:500;transition:transform .2s,box-shadow .2s,filter .2s}#account #authsubmit:hover{transform:translateY(-2px);box-shadow:0 7px 25px #ff81462b;filter:brightness(1.07)}#account #autherror:empty{display:none}#account #autherror:not(:empty){background:#ec688212;border:1px solid #ed729431;color:#ffb5c6!important;font-size:13px;line-height:1.6;padding:12px 16px;border-radius:12px;margin-top:20px}#account .ebg-auth-divider{display:flex;align-items:center;gap:15px;margin:34px 0 24px;color:#b7bec8;font-size:13px}#account .ebg-auth-divider:before,#account .ebg-auth-divider:after{content:'';height:1px;background:#ffffff15;flex:1}#account .ebg-auth-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#account .ebg-auth-socials button{height:55px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #ffffff0a;border-radius:35px;background:#ffffff04;color:#d8dee8;font-size:14px;font-weight:400;opacity:1;cursor:default}#account .ebg-auth-socials svg{width:23px;height:23px;fill:currentColor;flex-shrink:0}#account .google-g{font-family:Arial,sans-serif;font-weight:800;font-size:28px;background:conic-gradient(#4285f4 0 90deg,#34a853 90deg 160deg,#fbbc05 160deg 215deg,#ea4335 215deg 280deg,#4285f4 280deg);background-clip:text;color:transparent}#account .discord-icon{color:#6088fc}#account .twitch-icon{color:#bc5ef4}#account .ebg-social-soon{font-size:11px;color:#b4bac4;text-align:center;margin:12px 0 0}#account .authswitch{display:block;width:100%;margin:28px 0 0;padding:8px;background:none;border:0;text-align:center;color:#ffad7a;font-size:15px;min-height:44px}#account .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#account #authview.mode-enter{animation:account-copy .3s both}#account #dashboard h2{margin-top:25px}#account #plans{max-height:45svh;overflow:auto}#account input:focus-visible{outline:none}#account button:focus-visible,#account a:focus-visible{outline-color:#ff945e}@keyframes account-enter{from{opacity:0}to{opacity:1}}@keyframes account-scene{from{transform:scale(1.025);filter:brightness(.8)}to{transform:scale(1);filter:brightness(1)}}@keyframes account-copy{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:1400px){#account .ebg-auth-side{padding-left:30px;padding-right:30px;padding-top:145px}#account .ebg-auth-headline p{font-size:14px;margin-top:60px}#account .ebg-auth-headline h2{font-size:60px}#account .ebg-auth-brand img{width:185px}#account #authview h2{font-size:29px}#account .ebg-auth-subtitle{font-size:14px}#account .ebg-auth-socials{gap:6px}#account .ebg-auth-socials button{gap:6px;font-size:12px}#account .ebg-auth-socials svg{width:20px}#account .ebg-auth-tools{gap:15px}#account .ebg-auth-tools>a{font-size:14px;padding:12px 25px}#account .ebg-auth-divider{margin-top:28px}}
@media(max-width:1050px){#account .ebg-auth-layout{grid-template-columns:1fr 1fr}#account .ebg-auth-headline{width:84%;margin-left:8%;padding-top:180px}#account .ebg-auth-headline h2{font-size:52px}#account .ebg-auth-headline p{font-size:13px;max-width:260px}#account .ebg-auth-explore{font-size:14px;min-height:49px;padding-inline:24px}#account .ebg-auth-side{padding:135px 25px 40px}#account .ebg-auth-tabs button{font-size:14px}#account .ebg-auth-socials{grid-template-columns:repeat(2,minmax(0,1fr))}#account .ebg-auth-tools{right:25px;top:24px}}
@media(max-width:760px){#account .ebg-auth-layout{grid-template-columns:1fr}#account .ebg-auth-art{min-height:360px;height:44svh;max-height:440px}#account .ebg-auth-scene{object-position:center 35%}#account .ebg-auth-art:after{background:linear-gradient(90deg,#100d0b90,transparent 95%),linear-gradient(0deg,#0d1117,transparent 55%)}#account .ebg-auth-brand{left:24px;top:22px}#account .ebg-auth-brand img{width:150px}#account .ebg-auth-headline{margin-left:25px;padding-top:125px;width:85%}#account .ebg-auth-headline h2{font-size:43px}#account .ebg-auth-headline p{display:none}#account .ebg-auth-explore{margin-top:24px;min-height:43px;padding:0 22px;font-size:13px}#account .ebg-auth-side{min-height:56svh;padding:20px 24px 45px;overflow:hidden}#account .ebg-auth-tools{position:fixed;top:22px;right:20px;gap:10px}#account .ebg-auth-tools>a{font-size:12px;padding:10px 18px;background:#21150ecc}#account .close{width:36px;height:36px;background:#21150ecc}#account .ebg-auth-stage{max-width:500px}#account #authview h2{font-size:30px}#account .ebg-auth-subtitle{font-size:14px;margin-bottom:26px}#account .ebg-auth-tabs{margin-top:26px}#account .ebg-auth-socials{grid-template-columns:repeat(4,minmax(0,1fr))}#account .ebg-auth-socials button{gap:0;height:48px}#account .ebg-auth-socials button>span{display:none}#account .ebg-auth-socials svg{width:24px;height:24px}#account .ebg-input-shell{height:56px;padding-inline:17px;border-radius:17px}#account .authswitch{margin-top:24px}#account #authsubmit{height:52px}#account #plans{max-height:none}}@media(max-width:360px){#account .ebg-auth-brand img{width:125px}#account .ebg-auth-tools{right:15px;gap:7px}#account .ebg-auth-tools>a{padding:10px 14px}}
@media(max-height:800px) and (min-width:761px){#account .ebg-auth-side{padding-top:110px;padding-bottom:24px}#account .ebg-auth-subtitle{margin-bottom:24px}#account .ebg-auth-tabs{margin:24px 0 18px}#account .ebg-auth-tabs button{height:45px}#account .ebg-input-shell{height:54px;margin-bottom:10px}#account .ebg-auth-note{font-size:11px;margin:14px 3px 18px}#account #authsubmit{height:50px}#account .ebg-auth-divider{margin:22px 0 18px}#account .ebg-auth-socials button{height:48px}#account .authswitch{margin-top:22px}#account .ebg-auth-headline p{margin-top:55px}}

/* Orange light, camera drift and staggered form entrances. */
#account .ebg-auth-art:before{content:'';position:absolute;inset:-20%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 25% 65%,#ff814630,transparent 45%),radial-gradient(ellipse at 80% 20%,#ffb47e12,transparent 38%);opacity:.8}
#account[open] .ebg-auth-art:before{animation:auth-light-drift 14s ease-in-out infinite alternate}
#account[open] .ebg-auth-scene{animation:account-scene 1.1s ease-out both,auth-camera 20s 1.1s ease-in-out infinite alternate}
#account[open] .ebg-auth-brand{animation:auth-rise .7s .08s both}
#account[open] .ebg-auth-headline{animation:auth-rise .85s .14s both}
#account[open] .ebg-auth-stage{animation:auth-rise .65s .12s both}
#account[open] .ebg-auth-tabs{animation:auth-rise .55s .2s both}
#account[open] .ebg-input-shell{animation:auth-rise .55s .26s both}
#account[open] .ebg-input-shell:nth-child(2){animation-delay:.32s}
#account[open] .ebg-input-shell:nth-child(3){animation-delay:.38s}
#account[open] #authsubmit{animation:auth-rise .6s .44s both}
#account .ebg-auth-tabs button{position:relative;transition:background .28s,border-color .28s,color .28s,box-shadow .28s}
#account .ebg-auth-tabs button:hover{background:#ff814610}
#account .ebg-auth-tabs button[aria-pressed=true]{box-shadow:inset 0 0 22px #ff814610,0 3px 18px #ff814612}
#account #authsubmit,#account .ebg-auth-explore{position:relative;overflow:hidden;background-size:180% 100%;transition:transform .25s,box-shadow .25s,background-position .5s}
#account #authsubmit:before,#account .ebg-auth-explore:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff45 50%,transparent 70%);transform:translateX(-140%)}
#account #authsubmit:hover:before,#account .ebg-auth-explore:hover:before{animation:auth-shine .8s ease-out}
#account #authsubmit:hover,#account .ebg-auth-explore:hover{background-position:100% 0;box-shadow:0 8px 28px #ff814628}
#account #authview.mode-enter{animation:auth-rise .32s ease-out both}
#account #authview.mode-enter .ebg-input-shell{animation:auth-rise .35s .04s both}
#account #authview.mode-enter .ebg-input-shell:nth-child(2){animation-delay:.09s}
#account #authview.mode-enter .ebg-input-shell:nth-child(3){animation-delay:.14s}
#account #authview.mode-enter #authsubmit{animation:auth-rise .4s .17s both}
@keyframes auth-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-camera{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes auth-light-drift{from{transform:translate(-3%,2%);opacity:.55}to{transform:translate(4%,-3%);opacity:1}}
@keyframes auth-shine{to{transform:translateX(140%)}}
@media(max-width:760px){#account .ebg-auth-headline h2{font-size:clamp(34px,8.8vw,43px);letter-spacing:-1.2px}}


/* Keep the artwork independent of form height and animate only the extra field. */
html.modal-open{overflow:hidden}
#account{scrollbar-gutter:auto;overscroll-behavior:contain}
#account .ebg-auth-subtitle{min-height:3.1em}
#account .auth-name-row{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .36s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .36s}
#account .auth-name-inner{min-height:0;overflow:hidden}
#account.is-register .auth-name-row{grid-template-rows:1fr;opacity:1;visibility:visible}
#account[open] .ebg-auth-scene{animation:account-enter .8s both;transform:none}
#account #authview.mode-enter .ebg-input-shell,#account #authview.mode-enter #authsubmit{animation:none}
#account #authview.mode-enter{animation:account-enter .28s both}
@media(min-width:761px){#account .ebg-auth-art{position:sticky;top:0;height:100svh;min-height:0;align-self:start}}
@media(prefers-reduced-motion:reduce){#account,#account *,#account *:before,#account *:after{animation:none!important;transition:none!important}}

/* Fit the desktop form without clipping content on shorter screens. */
@media(min-width:761px){
 #account .ebg-auth-side{padding-top:clamp(96px,12svh,130px);padding-bottom:24px}
 #account .ebg-auth-subtitle{margin-bottom:22px}
 #account .ebg-auth-tabs{margin:24px 0 18px}
 #account .ebg-auth-divider{margin:24px 0 18px}
 #account .authswitch{margin-top:18px}
}
@media(min-width:761px) and (max-height:800px){
 #account .ebg-auth-side{padding-top:90px;padding-bottom:16px}
 #account #authview h2{margin-bottom:10px}
 #account .ebg-auth-tabs{margin:16px 0 14px}
 #account .ebg-auth-note{margin:12px 3px 14px}
 #account .ebg-auth-divider{margin:18px 0 14px}
 #account .authswitch{margin-top:12px}
}
@media(min-width:761px) and (max-width:1050px){#account .ebg-auth-socials{grid-template-columns:repeat(4,minmax(0,1fr))}#account .ebg-auth-socials button>span{display:none}}
