@import url('../assets/login-layered-v1/asset-layout.css');
@import url('../assets/login-layered-v2/asset-layout.css?v=2-simple-buttons');
@import url('../brand-refresh.css');
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/barlow-condensed-black.ttf') format('truetype');font-weight:700 900;font-display:swap}
/* Login only. Foreground characters share a ground surface; the home stays unchanged. */
body.page-login-layered{display:block;min-width:320px;background:#081f4a;color:#3c210c;overflow-x:clip}
.page-login-layered::before{display:none}
.page-login-layered .login-announcement{height:48px;font-size:12px;line-height:1.4;z-index:10}
.page-login-layered .login-announcement-track{width:max-content;min-width:max-content;animation-name:login-layered-marquee;will-change:transform}
.login-announcement-group{display:flex;flex:0 0 auto;width:max-content;min-width:0}
.login-announcement-group>span{flex:0 0 auto;text-align:center}
@keyframes login-layered-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.login-scene{position:relative;isolation:isolate;min-height:max(770px,46vw);width:100%;overflow:hidden}
.login-world{position:absolute;inset:0;z-index:-3;pointer-events:none}
.login-world img{width:100%;height:100%;object-fit:cover;object-position:center}
.login-art{display:block;position:relative;aspect-ratio:var(--art-ratio);pointer-events:none;isolation:isolate}
.login-art>img{position:absolute;left:var(--art-left);top:var(--art-top);width:var(--art-width);height:auto;max-width:none}
.login-back{position:absolute;right:2%;top:0;width:18%;max-width:360px;text-decoration:none;color:#fff1cf;z-index:5;min-height:44px}
.login-back-label{position:absolute;left:9%;right:9%;top:73.5%;height:32%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:10px;font:900 clamp(15px,1.55vw,29px)/1 Barlow,sans-serif;text-transform:uppercase;text-shadow:0 2px 3px #251207}
.login-back-label>svg{display:block;flex:0 0 1em;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.login-back-label>span{display:block;white-space:nowrap;line-height:1;transform:translateY(-.04em)}
.login-component{position:absolute;top:8px;left:50%;width:clamp(430px,32vw,630px);transform:translateX(-50%);z-index:3}
.login-brand{position:relative;display:block;left:-10%;width:120%;margin:0 0 -24px;z-index:4;filter:drop-shadow(0 5px 3px #15345944)}
.login-brand>.art-logo-new{position:absolute;width:61%;left:19.5%;top:37%}
.login-form-frame{position:relative;width:100%;aspect-ratio:.95;min-height:590px;container-type:inline-size;z-index:3}
.frame-decoration{position:absolute;inset:0;aspect-ratio:auto;z-index:-1;filter:drop-shadow(0 7px 4px #12316144)}
.frame-decoration>img{height:var(--art-height)}
.login-tabs{position:absolute;left:19%;right:19%;top:6%;display:flex;gap:3px;height:10%;z-index:2}
.login-tabs[hidden]{display:none}
.login-tabs>button{border:0;padding:0;background:transparent;isolation:isolate;position:relative;flex:1;min-width:0;min-height:44px;display:grid;place-items:center;color:#fff3d9;text-decoration:none;font:900 clamp(18px,4.1cqw,27px)/1 Barlow,sans-serif;text-transform:uppercase;text-shadow:0 2px 3px #281a0d}
.login-tabs .login-art{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
.login-tabs .login-art>img{height:var(--art-height)}
.tab-blue{display:none}
.login-tabs>[aria-selected=true] .tab-blue{display:block}
.login-tabs>[aria-selected=true] .tab-wood{display:none}
.tab-label{padding:0 3px;white-space:nowrap}
.login-form-content{position:absolute;left:17%;right:17%;top:17.5%;bottom:14%;padding:12px}
.login-form-content .login-title{margin:0;width:100%;font-size:0}
.login-divider{display:flex;align-items:center;gap:8px;margin:10px 18% 12px;color:#01b9ec;font-size:18px;line-height:1;text-shadow:1px 1px #a5341a,-1px -1px #a5341a}
.login-divider::before,.login-divider::after{content:'';height:2px;background:linear-gradient(90deg,transparent,#a26536);flex:1}
.login-divider::after{transform:rotate(180deg)}
.login-input{display:flex;position:relative;align-items:center;width:100%;margin:0 0 12px;height:clamp(52px,9cqw,62px);border:2px solid #b58b54;border-radius:5px;background:#fff9ee8c;box-shadow:inset 0 1px 3px #b08c5330,0 1px #fff8dc}
.login-input>svg{position:absolute;left:12px;width:clamp(20px,4.2cqw,26px);height:auto;stroke:#593211;fill:none;stroke-width:2;pointer-events:none}
.login-input>input{height:100%;width:100%;min-width:0;padding:0 12px 0 clamp(42px,9cqw,56px);border:0;border-radius:3px;background:transparent;color:#4b2915;font:900 clamp(16px,3.9cqw,24px)/1 Barlow,sans-serif;outline-offset:2px}
.login-input>input::placeholder{color:#a67b5c;opacity:1}
.login-input>input:focus{outline:none}
.login-input:focus-within{border-color:#8d632e}
.login-password>input{padding-right:68px}
.login-input>.show-password{top:50%;right:1px;transform:translateY(-50%);font:700 11px/1 Arial,sans-serif;color:#654722;padding:0 8px;min-height:44px}
.login-forgot{display:flex;justify-content:flex-end;align-items:center;min-height:36px;margin-top:-8px;color:#0076af;font:900 clamp(16px,3.8cqw,24px)/1 Barlow,sans-serif;text-transform:uppercase;text-shadow:0 1px #fff6d3}
/* Both panels reserve the same action slot, so switching tabs never moves it. */
.login-form-content>[data-auth-pane]{height:100%;padding-bottom:clamp(102px,7.6vw,145px)}
.login-submit{display:block;position:absolute;left:12px;right:12px;bottom:12px;width:calc(100% - 24px);height:clamp(102px,7.6vw,145px);border:0;margin:0;padding:0;background:transparent;isolation:isolate;color:#ffed9e}
.login-submit>.login-art{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
.login-submit>.login-art>img{height:auto;top:50%;transform:translateY(var(--art-center))}
.submit-label{position:absolute;inset:21% 10%;display:flex;align-items:center;justify-content:center;font:bold clamp(20px,5.8cqw,34px)/1 Georgia,serif;text-transform:uppercase;text-shadow:2px 2px #4b1605,-1px -1px #fffbd3,0 3px #8a3b08;letter-spacing:-.04em;white-space:nowrap}
.login-terms{display:flex;align-items:center;gap:10px;min-height:44px;color:#563519;font:13px/1.3 Arial,sans-serif}
.login-terms input{flex:0 0 22px;width:22px;height:22px;accent-color:#0c70c1}
.login-verification-dialog{width:min(390px,calc(100% - 28px));margin:auto;padding:0;overflow:visible;border:0;border-radius:18px;background:transparent;color:#4b2915;box-shadow:0 22px 72px #080b1acc}.login-verification-dialog::backdrop{background:#07152bbd;backdrop-filter:blur(3px)}.login-verification-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:27px 26px 25px;border:3px solid #a96727;border-radius:18px;background:linear-gradient(150deg,#fff7e7,#e8c28a);box-shadow:inset 0 0 0 2px #fff3d0,inset 0 0 22px #9e642733}.login-verification-shield{display:grid;place-items:center;width:42px;height:42px;border:2px solid #7c3f19;border-radius:50%;background:linear-gradient(145deg,#169cdc,#075a9d);box-shadow:inset 0 1px #b7f3ff,0 3px 0 #783817;color:#fff8ce;font:900 25px/1 Georgia,serif;text-shadow:0 2px #07436d}.login-verification-card h2{margin:0;color:#6b3016;font:900 25px/1.06 Barlow,sans-serif;text-align:center;text-transform:uppercase;text-shadow:0 1px #fff6d8}.login-verification-card>p{max-width:290px;margin:-3px 0 1px;color:#6e4828;font:14px/1.35 Arial,sans-serif;text-align:center}.login-verification-close{position:absolute;top:-13px;right:-13px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid #fff0c6;border-radius:50%;background:linear-gradient(#dc4b35,#951b16);box-shadow:0 2px 0 #5b160f;color:#fff8e6;font:900 28px/27px Arial,sans-serif;text-shadow:0 2px #60130e}.login-verification-close:hover{filter:brightness(1.13)}.login-turnstile{display:grid;place-items:center;min-height:66px;width:100%;overflow:hidden}.login-turnstile__widget{width:100%;min-height:65px}.login-verification-submit{position:relative;display:grid;place-items:center;width:min(100%,300px);min-height:54px;border:2px solid #752817;border-radius:10px;background:linear-gradient(#e35432,#a82218);box-shadow:inset 0 1px #ffc69c,0 3px 0 #631b13;color:#fff6d2;font:bold 20px/1 Georgia,serif;text-transform:uppercase;text-shadow:1px 2px #4d130e}.login-verification-submit:hover{filter:brightness(1.1)}.login-verification-submit .submit-label{position:static;display:block;inset:auto}.login-verification-submit.is-loading .submit-label{position:absolute;inset:0}
.login-input-help{margin:-5px 0 3px;color:#69411e;font:12px/1.4 Arial,sans-serif}
.login-recovery-intro{margin:0 0 16px;color:#69411e;font:14px/1.45 Arial,sans-serif;text-align:center}
.login-recovery-back{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:4px auto 0;padding:4px 8px;border:0;background:transparent;color:#0076af;font:900 18px/1 'Barlow Condensed',sans-serif;text-decoration:underline;text-underline-offset:3px}
.login-recovery-back:hover{color:#004e78}
.login-form-content .recovery-feedback{margin:0 0 16px;font-size:12px;line-height:1.35}
.login-form-content .form-feedback{padding:8px;margin:6px 0;font-size:12px;background:#f6ffdd;color:#395626;border-color:#b2bd6b}
.login-support{position:absolute;width:31%;bottom:0;z-index:1}
.login-support--left{left:0}
.login-support--right{right:0}
.login-ground{position:absolute;inset:0;z-index:0}
.login-ground>img{height:var(--art-height)}
.login-support--right .login-ground{transform:scaleX(-1)}
.login-boy{position:absolute;width:85%;left:3%;bottom:73%;z-index:2}
.login-girl{position:absolute;width:73%;left:17%;bottom:73%;z-index:2}
.login-pet{position:absolute;width:28%;left:70%;bottom:75%;z-index:3}
.login-contact-shadow{position:absolute;bottom:71%;left:20%;width:52%;height:6%;background:#264f248c;border-radius:50%;filter:blur(3px);z-index:1}
.login-back:hover,.login-submit:hover{filter:brightness(1.1)}
/* Same artwork, links and composition as the approved home footer. */
.login-home-footer{position:relative;isolation:isolate;aspect-ratio:2172/255;margin:0;padding:0;background:#061c49;overflow:clip;color:#fff2bf}
.login-home-footer .asset-layer{position:relative;aspect-ratio:var(--ink-aspect)}
.login-home-footer .asset-layer>img{position:absolute;top:var(--image-top);left:var(--image-left);width:var(--image-width);max-width:none;height:auto;pointer-events:none}
.login-home-footer .footer-frame-layer{position:absolute;inset:0 auto auto 0;width:100%;z-index:1}
.login-home-footer .footer-logo-layer{position:absolute;top:33%;left:5%;width:19%;z-index:3}
.login-home-footer .footer-nav{position:absolute;top:51%;left:28%;width:47%;display:flex;align-items:center;justify-content:space-between;gap:1%;transform:translateY(-50%);z-index:3}
.login-home-footer .footer-nav a{font:700 clamp(10px,1.2vw,24px)/1 'Barlow Condensed',sans-serif;white-space:nowrap;text-decoration:none}
.login-home-footer .footer-nav a:not(:last-child)::after{content:'✦';color:#ffd553;padding-left:.7vw}
.login-home-footer .footer-status{position:absolute;top:45%;right:5%;width:17%;margin:0;font:700 clamp(10px,1.2vw,23px)/1.4 'Barlow Condensed',sans-serif;z-index:3}
.login-home-footer .footer-copyright{position:absolute;right:0;bottom:1%;left:0;width:100%;margin:0;color:#aec0da;font:700 clamp(10px,.9vw,16px)/1.4 'Barlow Condensed',sans-serif;text-align:center;text-shadow:0 2px #061a48;z-index:3}
.login-home-footer .footer-status small{font-size:.74em;white-space:nowrap}
.login-home-footer .footer-status i,.login-home-footer .mobile-online i{display:inline-block;width:.7em;height:.7em;margin-right:7px;border-radius:50%;background:#7cf322;box-shadow:0 0 9px #7cf366}
.login-toast{position:fixed;z-index:50;top:clamp(58px,8vh,92px);left:50%;width:min(510px,calc(100% - 32px));padding:15px 48px 15px 18px;transform:translate(-50%,-18px);border:2px solid #ffb08a;border-radius:14px;background:linear-gradient(135deg,#9f201c,#651917);box-shadow:0 10px 30px #17050888,inset 0 1px #ffe3b688;color:#fff8eb;font:800 clamp(13px,1.1vw,16px)/1.35 Arial,sans-serif;text-align:center;opacity:0;pointer-events:none}.login-toast.is-visible{animation:login-toast-in .24s cubic-bezier(.2,.85,.35,1.15) forwards,login-toast-glow 1.15s ease-in-out .25s 3}.login-input.is-invalid{border-color:#ed3327;background:#fff0ec;box-shadow:inset 0 0 0 1px #ff978b,0 0 0 3px #f53b2e55;animation:login-input-error .52s ease-in-out 2}.login-input.is-invalid>svg{stroke:#b51f19}@keyframes login-toast-in{to{opacity:1;transform:translate(-50%,0)}}@keyframes login-toast-glow{50%{filter:brightness(1.2);box-shadow:0 10px 34px #ff503888,inset 0 1px #ffe3b688}}@keyframes login-input-error{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media(min-width:851px) and (max-width:1200px){.login-component{width:42%;min-width:390px}.login-back{width:21%}}
@media(max-width:850px){
 .page-login-layered .login-announcement{height:46px;font-size:11px}
 .login-scene{min-height:1080px;height:calc(900px + 48vw)}
 .login-world img{object-position:center top}
 .login-back{right:4%;width:160px;top:0}
 .login-back-label{font-size:18px;gap:7px}
 .login-component{width:96%;max-width:500px;min-width:0;top:86px}
 .login-brand{width:104%;left:-2%;margin-bottom:-14px}
 .login-form-frame{width:139.2%;left:-19.6%;height:610px;min-height:610px;aspect-ratio:auto}
 .login-tabs{height:52px;top:5.5%;left:17%;right:17%}
 .login-tabs>button{border:0;padding:0;background:transparent;isolation:isolate;font-size:clamp(17px,4.5cqw,23px)}
 .login-form-content{top:19%;left:17%;right:17%;bottom:14%;padding:12px}
 .login-input{height:54px;margin-bottom:12px}
 .login-input>input{font-size:18px}
 .login-forgot{min-height:44px;font-size:18px;margin-top:-8px}
 .login-form-content>[data-auth-pane]{padding-bottom:115.2px}
 .login-toast{top:56px;width:calc(100% - 24px);padding:13px 18px;font-size:13px}
 .login-submit{height:115.2px}
 .login-support{width:50%;max-width:320px}
 .login-boy{width:89%;left:0}
 .login-girl{width:84%;left:15%}
 .login-pet{width:36%;left:72%;bottom:73%}
 .login-terms{font-size:12px}
 .login-verification-card{padding:25px 18px 22px}.login-verification-card h2{font-size:23px}
 .login-home-footer{aspect-ratio:auto;background:#081f4a}
 .login-home-footer> :not(.mobile-view){display:none}
 .login-home-footer .mobile-view[hidden]{display:block!important}
 .login-home-footer .mobile-footer{position:relative;width:100%;max-width:520px;margin:auto;aspect-ratio:4/5;isolation:isolate}
 .login-home-footer .mobile-footer-frame{position:absolute;inset:0;z-index:-1}
 .login-home-footer .mobile-footer-frame img{width:100%;height:100%;object-fit:fill}
 .login-home-footer .mobile-footer-brand{position:absolute;top:22%;left:20%;width:60%;margin:0}
 .login-home-footer .mobile-footer-links{position:absolute;top:40%;left:12%;width:76%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
 .login-home-footer .mobile-footer-links a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:4px 0;font:700 clamp(16px,4.2vw,20px)/1.1 'Barlow Condensed',sans-serif;text-decoration:none}
 .login-home-footer .mobile-online{position:absolute;top:76%;width:100%;display:flex;align-items:center;justify-content:center;gap:2px;margin:0;font:700 18px/1.2 'Barlow Condensed',sans-serif}
 .login-home-footer .mobile-copyright{position:absolute;top:81%;width:100%;margin:0;text-align:center;color:#aec0da;font:13px/1.5 Arial,sans-serif}
}
@media(prefers-reduced-motion:reduce){.page-login-layered .login-announcement-track{animation:none}}

/* Metadata positions the complete transparent pet canvas without cropping. */
.login-pet{aspect-ratio:var(--ink-aspect)}
.login-pet>img{width:var(--image-width);left:var(--image-left);top:var(--image-top)}

/* The confirmation action follows the exact responsive width of Turnstile. */
.login-verification-submit{width:min(100%,300px);padding:0 12px}
.login-verification-submit .submit-label{font:900 clamp(18px,5.2vw,22px)/1 Georgia,serif;letter-spacing:-.045em;white-space:nowrap;text-shadow:1px 2px #4d130e}
.login-verification-submit.is-loading .submit-label{display:flex;align-items:center;justify-content:center;position:absolute;inset:0}
.login-toast{white-space:pre-line}.login-toast[data-tone=success]{border-color:#a8e493;background:linear-gradient(135deg,#367f34,#1e562b);box-shadow:0 10px 30px #08280e88,inset 0 1px #dcffbc;color:#f4ffe8}.login-toast[data-tone=success].is-visible{animation:login-toast-in .24s cubic-bezier(.2,.85,.35,1.15) forwards,login-toast-success-glow 1.15s ease-in-out .25s 3}@keyframes login-toast-success-glow{50%{filter:brightness(1.18);box-shadow:0 10px 34px #67dc5788,inset 0 1px #dcffbc}}

/* O aviso usa a mesma linguagem do modal de confirmação de cadastro. */
.login-launch-modal{width:min(520px,calc(100% - 32px));margin:auto;padding:0;overflow:visible;border:0;border-radius:18px;background:transparent;color:#4b2915;box-shadow:0 22px 72px #080b1acc}.login-launch-modal::backdrop{background:#07152bbd;backdrop-filter:blur(3px)}.login-launch-modal__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:29px 38px 27px;border:3px solid #a96727;border-radius:18px;background:linear-gradient(150deg,#fff7e7,#e8c28a);box-shadow:inset 0 0 0 2px #fff3d0,inset 0 0 22px #9e642733;text-align:center}.login-launch-modal__spark{display:grid;place-items:center;width:42px;height:42px;border:2px solid #7c3f19;border-radius:50%;background:linear-gradient(145deg,#169cdc,#075a9d);box-shadow:inset 0 1px #b7f3ff,0 3px 0 #783817;color:#fff8ce;font:900 25px/1 Georgia,serif;text-shadow:0 2px #07436d}.login-launch-modal h2{margin:0;color:#6b3016;font:900 25px/1.06 Barlow,sans-serif;text-align:center;text-transform:uppercase;text-shadow:0 1px #fff6d8}.login-launch-modal p{max-width:430px;margin:-2px 0 0;color:#6e4828;font:14px/1.42 Arial,sans-serif;text-align:center}.login-launch-modal p+p{margin-top:-2px;color:#6e4828}.login-launch-modal__button{margin-top:4px}.login-launch-modal[open]{animation:login-launch-modal-in .2s ease-out}@keyframes login-launch-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:850px){.login-launch-modal{width:min(390px,calc(100% - 28px))}.login-launch-modal__card{min-height:340px;padding:29px 22px 25px}.login-launch-modal h2{font-size:23px}.login-launch-modal p{max-width:292px;line-height:1.45}.login-launch-modal__button{margin-top:auto}}

.art-recovery-title{--art-ratio:2082/290;--art-left:-2.20941%;--art-top:-74.82759%;--art-width:104.32277%;--art-height:249.65517%;}

/* Keep the launch notice centered in the viewport without moving the mobile page scroll. */
.login-launch-modal{position:fixed;inset:0;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;overscroll-behavior:contain}
.login-launch-modal .login-verification-close:focus-visible{outline:none}