/* Auth-only presentation; unrelated application screens retain their styles. */
body:has(#authView:not([hidden])) > :is(.navbar,.site-footer,.whatsapp-float,.neon-background) { display:none!important; }
body:has(#authView:not([hidden])) .main-content { margin:0!important; padding:0!important; max-width:none; }
.auth-view { min-height:100dvh; padding:48px 5vw; display:grid; place-items:center; background:#080808; color:#111; font-family:Arial,Helvetica,sans-serif; }
.auth-view[hidden] {display:none}
.auth-view * {box-sizing:border-box}
.auth-view .auth-card {display:grid;grid-template-columns:1fr 1fr;max-width:1280px;width:100%;min-height:780px;padding:8px;border-radius:54px;background:#fff;box-shadow:0 32px 90px #10182b55;overflow:hidden}
.auth-media {position:relative;min-width:0;border-radius:46px;overflow:hidden;background:#100f2b}
.auth-poster,.auth-animation {position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.auth-logo {position:absolute;top:44px;left:15%;width:70%;display:flex;justify-content:center}
.auth-panel {position:relative;align-self:center;padding:58px 48px;min-width:0}
.auth-view .auth-header {display:block;padding:0;border:0;margin:0 0 16px}
.auth-view .auth-header h1 {font:500 clamp(30px,3.4vw,52px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-2px;color:#080808;margin:0;overflow-wrap:normal}
.auth-eyebrow {font-size:11px;letter-spacing:5px;color:#777;margin:0 0 18px}
.auth-view .auth-intro {font-size:14px;line-height:1.6;color:#555;margin:18px 0}
.auth-view .auth-form {padding:0;margin-top:42px}
.auth-view .auth-field {margin-bottom:25px}
.auth-view .auth-field label {display:block;font-size:16px;margin-bottom:9px;color:#111;font-weight:400}
.auth-input {position:relative}
.auth-view .auth-field input {width:100%;min-width:0;min-height:54px;border:1px solid #ccc;border-radius:30px;padding:14px 20px;background:#fff;color:#111;font:16px Arial,sans-serif;box-shadow:none}
.auth-view .auth-field input::placeholder {color:#929292}
.auth-view .auth-field small {font-size:12px;line-height:1.5;color:#666;display:block;margin-top:6px}
.auth-view .auth-input:has(.auth-toggle) input {padding-right:68px}
.auth-view .auth-toggle {position:absolute;right:10px;top:5px;min-height:44px;border:0;background:transparent;color:#333;padding:0 10px;cursor:pointer}
.auth-view .auth-link {border:0;background:none;color:#111;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:8px 0}
.auth-view .auth-actions {display:block;padding:0;border:0;margin:0;font-size:17px;color:#111}
.auth-view .auth-actions p {margin:0}
.auth-view .auth-actions .auth-link {font-weight:600}
.auth-view .auth-form > .auth-link {display:block;margin:-18px 0 22px auto;font-size:14px;font-weight:600}
.auth-view .btn-primary,.auth-view .auth-secondary {width:100%;min-height:58px;border-radius:32px;border:1px solid #000;background:#000;color:white;font:17px Arial,sans-serif;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer;padding:12px 18px}
.auth-view .auth-secondary {background:#fff;color:#111;border-color:#aaa;min-height:52px;margin-top:8px}
.auth-view .btn-primary:hover {background:#242424;transform:none}
.auth-view .auth-message {color:#9d2020;line-height:1.5;font-size:14px;overflow-wrap:anywhere;margin:12px 0}
.auth-view .auth-message:empty {display:none}
.auth-view .auth-back {text-decoration:none;font-size:28px;margin-bottom:52px;min-width:44px;text-align:left}
.auth-view :is(button,input,a):focus-visible {outline:2px solid #333;outline-offset:4px}
.auth-view button:disabled {opacity:.55;cursor:wait}
.auth-view .auth-note {font-size:17px;color:#333;line-height:1.5}
.auth-view .otp-boxes {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.auth-view .otp-boxes input {border-radius:18px;text-align:center;font-size:25px;padding:10px 0;height:68px}
.auth-view #otpCode[type=hidden] {display:none}
.auth-view #resendOtp {display:block;margin:10px 0 0 auto;font-size:14px}
.auth-view .auth-actions:has(#resendOtp) {margin-top:16px}
.auth-view .auth-actions:has(#resendOtp) [data-auth-go],.auth-view .auth-panel > .auth-actions:last-child:not(:has(#resendOtp)) {display:none}
@media(min-width:801px){.auth-panel:has(#registerForm){padding-top:35px;padding-bottom:35px}.auth-panel:has(#registerForm) .auth-form{margin-top:24px}.auth-panel:has(#registerForm) .auth-field{margin-bottom:17px}}
@media(max-width:1000px){.auth-panel{padding:40px 28px}.auth-view{padding:28px}.auth-view .auth-card{min-height:740px}}
@media(max-width:800px){.auth-view{padding:20px}.auth-view .auth-card{grid-template-columns:1fr;max-width:600px;border-radius:32px;min-height:0}.auth-media{height:190px;border-radius:25px}.auth-poster{object-position:50% 54%}.auth-logo{top:18px;left:25%;width:50%}.auth-logo img{height:60px}.auth-panel{padding:32px 25px 36px}.auth-view .auth-header h1{font-size:36px;letter-spacing:-1.4px}.auth-view .auth-back{margin-bottom:20px}.auth-view .auth-form{margin-top:28px}}
@media(max-width:390px){.auth-view{padding:10px}.auth-panel{padding:28px 16px}.auth-media{height:145px}.auth-view .auth-header h1{font-size:30px}.auth-view .auth-actions{font-size:14px}.auth-view .otp-boxes{gap:6px}.auth-view .otp-boxes input{height:52px;border-radius:12px}}
@media(prefers-reduced-motion:reduce){.auth-animation{display:none}}
.auth-view .auth-header h1:focus {outline:none}
/* Keep the entire approved portrait readable, including the gamer and foreground.
   A compact mobile panorama would cut both out, so mobile uses a full portrait. */
.auth-media {background:radial-gradient(ellipse at 55% 45%,#352046,#090813 75%);isolation:isolate}
.auth-poster {object-fit:contain;object-position:50% 50%;animation:auth-camera 18s ease-in-out infinite alternate;will-change:transform}
.auth-media::after {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 62% 30%,#ffbe6b24,transparent 46%);mix-blend-mode:screen;animation:auth-light 6s ease-in-out infinite alternate}
.auth-animation {pointer-events:none}
.auth-logo {z-index:2;filter:drop-shadow(0 2px 8px #000)}
@keyframes auth-camera {from{transform:scale(1) translateY(0)}to{transform:scale(1.045) translateY(-.7%)}}
@keyframes auth-light {from{opacity:.2}to{opacity:.85}}
@media(max-width:800px){.auth-poster{object-position:85% 50%;transform-origin:85% 50%}.auth-view .auth-logo{left:5%;width:53%;top:50%;transform:translateY(-50%)}.auth-view .auth-logo .brand-logo{font-size:22px}}
@media(prefers-reduced-motion:reduce){.auth-poster,.auth-media::after{animation:none;will-change:auto}.auth-media::after{display:none}}
.auth-view .auth-logo {align-items:center;gap:14px;text-decoration:none;color:white}
.auth-view .auth-privacy {font-size:11px;color:#666;line-height:1.5;margin-top:20px}
.auth-view .auth-privacy summary {cursor:pointer}
.auth-view .auth-privacy p {margin-top:8px}
.auth-view .auth-logo .brand-logo {font-size:26px}
@media(max-width:800px){.auth-view .auth-logo {left:10%;width:80%}.auth-view .auth-logo .brand-logo {font-size:24px}}
.auth-media::after {animation-play-state:var(--auth-motion-state,running)}

.auth-view .auth-terms {display:flex;align-items:flex-start;gap:12px;margin:22px 0;font-size:14px;line-height:1.6;color:#222}
.auth-view .auth-terms input {flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:#111;cursor:pointer}
.auth-view .auth-terms label {cursor:pointer}
.auth-view .auth-terms a {color:#111;text-decoration:underline;text-underline-offset:3px}
.auth-view .auth-terms-hint {font-size:12px;color:#555}
