/* Cinematic private-hosting entry. Motion is transform/opacity only. */
.login-body:has(.auth-shell) { min-height:100svh; margin:0; display:block; background:#08121d; overflow-x:hidden; color:#edf4ff; }
.auth-scene { position:fixed; inset:0; overflow:hidden; pointer-events:none; background:#0c1c2a; }
.auth-camera { position:absolute; inset:-3%; transform:translate3d(0,0,0) scale(1.035); transform-origin:58% 46%; transition:transform 1.65s cubic-bezier(.22,1,.36,1); will-change:transform; }
.auth-art { position:absolute; inset:0; background:url('/assets/games/private-hosting-login-v1.png') center center/cover no-repeat; animation:auth-world-drift 30s ease-in-out infinite alternate; }
.auth-shade { position:absolute; inset:0; background:linear-gradient(90deg,#02091325 0%,#06101b0a 48%,#06101b44 100%),linear-gradient(0deg,#030a14eb 0%,#040b1566 24%,transparent 65%,#030b1544 100%); }
.auth-atmosphere { position:absolute; inset:-10%; opacity:.36; background:radial-gradient(ellipse at 22% 68%,#69e4d116,transparent 40%),radial-gradient(ellipse at 85% 22%,#85b7ff20,transparent 30%); animation:auth-mist-drift 18s ease-in-out infinite alternate; }
.auth-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(370px,.9fr); grid-template-rows:auto 1fr auto; column-gap:clamp(35px,6vw,120px); min-height:100svh; width:min(100%,1760px); margin:0 auto; padding:clamp(28px,4vw,64px) clamp(28px,5vw,88px) 28px; }
.auth-brand { grid-column:1/-1; align-self:start; padding:0; margin:0; gap:12px; }
.auth-brand .brand-mark { box-shadow:0 8px 30px #0004; }
.auth-brand strong { font-size:22px; }.auth-brand small { color:#c5d2e5; font-size:10px; }
.auth-story { align-self:end; padding:100px 0 80px; max-width:720px; text-shadow:0 2px 25px #0008; transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity 1s ease; }
.auth-kicker { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:650; letter-spacing:.19em; color:#9befd4; margin-bottom:24px; }
.auth-kicker .ui-icon { width:18px; height:18px; }
.auth-story h1 { font-size:clamp(38px,4vw,64px); line-height:1.12; letter-spacing:-2.3px; font-weight:650; margin:0; text-wrap:balance; }
.auth-story h1 em { font-style:normal; color:#a8ebd9; }
.auth-story p { font-size:17px; line-height:1.7; color:#c0cfe1; margin:24px 0 0; }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:60px 0; }
.auth-card { position:relative; width:100%; max-width:450px; padding:32px 34px 24px; border-radius:26px; border:1px solid #c7e3ff30; background:linear-gradient(145deg,#172538e8,#0c1523e0); box-shadow:0 36px 100px #0007,inset 0 1px 0 #ffffff13; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); animation:auth-card-arrive .9s cubic-bezier(.16,1,.3,1) both; }
.auth-card-top { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:25px; }
.auth-seal { display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; color:#a9eddb; border:1px solid #a9eddb30; border-radius:14px; background:#7eddc513; box-shadow:inset 0 1px 0 #ffffff13; }
.auth-seal .ui-icon { width:23px; height:23px; }
.auth-progress { display:flex; align-items:center; gap:12px; color:#9eaec6; font-size:11px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.auth-progress-line { display:block; width:60px; height:3px; border-radius:3px; background:#61748c4d; overflow:hidden; }
.auth-progress-line i { display:block; width:100%; height:100%; background:#84e0c8; border-radius:3px; transform:scaleX(.5); transform-origin:left; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.auth-deck { display:grid; gap:28px; }
.auth-step { min-width:0; border:0; }
.auth-step-eyebrow { display:block; font-size:11px; font-weight:650; letter-spacing:.17em; color:#91abc7; margin:0 0 12px; }
.auth-step h2 { font-size:32px; font-weight:650; line-height:1.18; letter-spacing:-1.15px; margin:0 0 14px; }
.auth-step p { min-height:42px; font-size:14px; color:#b2c3d9; line-height:1.6; margin:0 0 25px; }
.auth-step label { display:block; font-size:14px; font-weight:500; color:#d6e2f3; margin:0 0 10px; }
.auth-input { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:0 15px; border-radius:12px; border:1px solid #9bb2cf36; background:#07111a80; transition:border-color .25s ease,box-shadow .25s ease; }
.auth-input:focus-within { border-color:#8de8ce; box-shadow:0 0 0 4px #8de8ce12,inset 0 0 0 1px #8de8ce16; }
.auth-input>span { display:inline-flex; color:#91a9c5; flex-shrink:0; }
.auth-input input { display:block; width:100%; min-width:0; min-height:54px; padding:0; background:transparent; border:0; outline:none!important; box-shadow:none; color:#edf6ff; font-size:17px; }
.auth-input input::placeholder { color:#6f849e; }
.auth-input input:autofill { -webkit-text-fill-color:#edf6ff; caret-color:#edf6ff; box-shadow:0 0 0 1000px #101d2d inset; }
.auth-primary { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:54px; padding:14px 18px; margin:23px 0 0; border:1px solid #b7ffe54d; border-radius:12px; color:#052b23; background:linear-gradient(110deg,#8be6ce,#63cfbb); box-shadow:0 6px 24px #60d5bd18,inset 0 1px 0 #ffffff44; font-size:15px; font-weight:700; cursor:pointer; transition:transform .22s ease,box-shadow .22s ease,filter .22s ease; }
.auth-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px #65d5ba30; filter:brightness(1.07); }
.auth-primary:active { transform:translateY(0) scale(.985); }
.auth-primary:focus-visible,.auth-back:focus-visible,.auth-reveal:focus-visible { outline:2px solid #a5eed9; outline-offset:4px; }
.auth-primary:disabled { cursor:wait!important; opacity:.8; }
.auth-back { display:inline-flex; align-items:center; gap:8px; background:transparent; color:#a1b8d0; border:0; padding:0; margin:0 0 20px; font-size:13px; cursor:pointer; }
.auth-back:hover { color:#d8fff2; }
.auth-back .ui-icon { width:17px; height:17px; }
.auth-user-line strong { color:#bceedd; font-weight:600; overflow-wrap:anywhere; }
.auth-reveal { display:inline-flex; align-items:center; justify-content:center; width:32px; height:40px; flex:0 0 32px; margin-right:-5px; border:0; background:transparent; color:#9eb3cc; cursor:pointer; border-radius:6px; }
.auth-card-footer { display:flex; align-items:center; gap:8px; border-top:1px solid #afc9ec18; padding-top:21px; margin-top:23px; color:#97abc3; font-size:12px; line-height:1.5; }
.auth-card-footer .ui-icon { width:16px; height:16px; flex-basis:16px; color:#90bbaa; }
.auth-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#a9bbd0; font-size:11px; letter-spacing:.12em; padding-top:18px; border-top:1px solid #b4d0ef22; }
.auth-footer>span:last-child { letter-spacing:.02em; }
.auth-card .login-error { display:none; margin:0 0 20px; padding:13px 14px; border:1px solid #f69bae50; border-radius:10px; color:#ffc4cf; background:#692b3c30; font-size:13px; line-height:1.6; }
.auth-no-script { color:#bdcce1; font-size:13px; line-height:1.6; }
.auth-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.auth-shell [hidden] { display:none!important; }

/* Both native fields remain usable if JavaScript is unavailable. */
.auth-enhanced .auth-deck { grid-template-columns:minmax(0,1fr); gap:0; min-height:320px; overflow:hidden; }
.auth-enhanced .auth-step { grid-area:1/1; align-self:start; transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .45s ease,visibility 0s; }
.auth-enhanced[data-auth-step="username"] .auth-password-step { transform:translate3d(65px,0,0); opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,0s,.8s; }
.auth-enhanced[data-auth-step="password"] .auth-username-step { transform:translate3d(-65px,0,0); opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s,0s,.8s; }
.auth-enhanced[data-auth-step="password"] .auth-password-step,.auth-enhanced[data-auth-step="username"] .auth-username-step { transform:translate3d(0,0,0); opacity:1; visibility:visible; transition-delay:.08s,.12s,0s; }
[data-auth-step="password"] .auth-camera { transform:translate3d(-3.5%,2%,0) scale(1.16); }
[data-auth-step="password"] .auth-progress-line i { transform:scaleX(1); }
[data-auth-step="password"] .auth-story { transform:translate3d(-12px,0,0); opacity:.84; }
.auth-submitting .auth-primary .ui-icon { animation:state-spin 1.2s linear infinite; }
.auth-submitting .auth-seal { animation:auth-seal-glow 1.8s ease-in-out infinite; }
@keyframes auth-world-drift { from { transform:scale(1.015) translate3d(-.3%,0,0); } to { transform:scale(1.045) translate3d(.3%,-.3%,0); } }
@keyframes auth-mist-drift { from { transform:translate3d(-2%,0,0); opacity:.2; } to { transform:translate3d(2%,-1%,0); opacity:.55; } }
@keyframes auth-card-arrive { from { opacity:0; transform:translate3d(0,24px,0) scale(.98); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes auth-seal-glow { 50% { box-shadow:0 0 25px #86e6ca40; } }
@media (min-width:1700px) { .auth-card { max-width:480px; padding:38px 40px 28px; }.auth-step h2 { font-size:36px; }.auth-enhanced .auth-deck { min-height:330px; } }
@media (max-width:1000px) { .auth-shell { grid-template-columns:minmax(0,1fr) minmax(330px,1fr); column-gap:28px; padding-inline:32px; }.auth-story h1 { font-size:40px; }.auth-card { padding:28px 25px 24px; }.auth-story { padding-bottom:70px; } }
@media (max-width:760px) {
  .auth-shell { display:flex; flex-direction:column; gap:0; min-height:100svh; padding:26px 22px 22px; max-width:520px; }
  .auth-brand { margin-bottom:36px; }.auth-brand strong { font-size:20px; }
  .auth-story { align-self:stretch; padding:0; margin:0 0 26px; text-shadow:0 2px 18px #000; }
  .auth-kicker { font-size:10px; margin-bottom:14px; gap:8px; }.auth-story h1 { font-size:32px; letter-spacing:-1.1px; }.auth-story p { display:none; }
  .auth-panel { width:100%; padding:0 0 36px; margin:auto 0; }
  .auth-card { max-width:none; padding:25px 24px 20px; border-radius:22px; background:linear-gradient(145deg,#172538ed,#0c1523e8); }
  .auth-step h2 { font-size:29px; }.auth-enhanced .auth-deck { min-height:318px; }
  .auth-card-top { margin-bottom:23px; }.auth-card-footer { margin-top:18px; }
  .auth-footer { margin-top:auto; font-size:9px; width:100%; }
  .auth-art { background-position:48% center; }
  .auth-shade { background:linear-gradient(0deg,#040c18bb,transparent 75%),linear-gradient(90deg,#04111d4d,#06121b22); }
  [data-auth-step="password"] .auth-camera { transform:translate3d(-4%,1%,0) scale(1.17); }
}
@media (max-height:740px) and (min-width:761px) { .auth-shell { padding-top:28px; }.auth-panel { padding:30px 0; }.auth-story { padding-bottom:30px; } }
@media (prefers-reduced-motion:reduce) {
  .auth-shell *,.auth-scene * { animation:none!important; transition:none!important; }
  .auth-camera,[data-auth-step="password"] .auth-camera { transform:none; }
  .auth-art { transform:none; }.auth-atmosphere { opacity:.2; }
  [data-auth-step="password"] .auth-story { transform:none; opacity:1; }
}