/* The game's entrance: original village art, bronze framing, quiet controls. */
#auth:not(.character-selection){--entry-ink:#11130f;--entry-bronze:#7d6337;--entry-gold:#d1a75a;--entry-paper:#ede0bd;position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(16px,3vw,40px);align-content:safe center;overflow:auto;background:#11130f;color:var(--entry-paper);isolation:isolate}
#auth.hidden{display:none}
.auth-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#11130f12 0%,#11130f26 35%,#11130fee 68%,#11130f 100%),linear-gradient(0deg,#11130f 0%,#11130f66 45%,#11130fbb 100%),url('/ui/assets/auth/gateway.webp') 22% 55%/cover no-repeat;pointer-events:none}
#auth:not(.character-selection):after{content:'';position:absolute;inset:18px;border:1px solid #b18b4433;z-index:-1;pointer-events:none}
.auth-identity{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:360px;max-width:660px;padding-bottom:36px;position:relative;text-shadow:0 3px 16px #000}
.auth-wordmark{width:100%;max-width:660px;margin:0 0 24px;line-height:0;filter:drop-shadow(0 5px 12px #0008)}
.game-wordmark{display:block;width:100%;height:auto;object-fit:contain}
.brand>.game-wordmark{width:185px;max-height:56px}
.selection-brand{display:block;width:220px;max-width:65%;line-height:0}
.selection-brand>.game-wordmark{width:100%;height:auto}
.drawer-title>strong{display:block;min-width:0;width:190px;max-width:calc(100% - 52px);line-height:0}
.drawer-title .game-wordmark{width:100%;height:auto}
.auth-wordmark span{color:#c69b50}
.auth-identity>p{font:clamp(16px,1.7vw,21px)/1.6 Georgia,'Times New Roman',serif;margin:0;color:#d3c4a4}
.auth-identity-note{position:absolute;left:0;bottom:6px;display:flex;align-items:center;gap:12px;max-width:290px;font:13px/1.65 Arial,sans-serif;color:#c1b596}
.auth-identity-note img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}
#auth:not(.character-selection)>.auth-card{position:relative;box-sizing:border-box;width:min(100%,410px);max-width:410px;margin:0;justify-self:center;padding:20px 22px 18px;background:#1b1b14eb;border:1px solid #826737;box-shadow:0 18px 70px #0005;text-align:left}
#auth:not(.character-selection)>.auth-card:before{content:'';position:absolute;top:-1px;left:-1px;width:30px;height:30px;border-top:3px solid #d1a75a;border-left:3px solid #d1a75a;pointer-events:none}
#auth:not(.character-selection)>.auth-card>h1{font:normal 28px/1.2 Georgia,serif;letter-spacing:-.4px;margin:0 0 6px;color:#ede0bd}
#auth:not(.character-selection) .auth-description{font:13px/1.65 Arial,sans-serif;color:#b6aa8d;margin:0 0 16px}
#auth:not(.character-selection) #login-form{display:grid;gap:12px}
#auth:not(.character-selection) #login-form label{display:grid;gap:5px;font:12px/1.4 Arial,sans-serif;color:#cfbea0}
#auth:not(.character-selection) #login-form input{box-sizing:border-box;min-width:0;width:100%;height:40px;padding:8px 10px;border:1px solid #6d5b3c;border-radius:2px;background:#0e110d;color:#ede0bd;font:15px/1.4 Arial,sans-serif;box-shadow:inset 0 1px 5px #0004}
#auth:not(.character-selection) #login-form input::placeholder{color:#8f8975}
#auth:not(.character-selection) #login-form input:focus-visible{outline:2px solid #d1a75a;outline-offset:2px;border-color:#d1a75a}
.auth-password-field{position:relative;display:block}.auth-password-field input{padding-right:58px!important}
#auth .auth-password-toggle{position:absolute;right:1px;top:1px;box-sizing:border-box;width:40px;height:38px;min-height:0;padding:9px;border:0;margin:0;background:transparent;box-shadow:none;color:#b7aa89;border-radius:0;display:grid;place-items:center}
.auth-password-toggle svg{width:21px;height:21px}.auth-password-toggle:hover{color:#eed7a1}.auth-password-toggle:focus-visible{outline:2px solid #d1a75a;outline-offset:-2px}
#auth:not(.character-selection) #login-button{box-sizing:border-box;display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:40px;margin:2px 0 0;padding:8px 14px;font:600 14px/1.4 Arial,sans-serif;border:1px solid #ae8543;border-radius:2px;color:#f3dfb1;background:linear-gradient(#61401d,#3d2714);box-shadow:inset 0 0 0 3px #c99c4120}
#auth:not(.character-selection) #login-button:not(:disabled):hover{border-color:#ebc278;background:linear-gradient(#735024,#48301a)}
#auth:not(.character-selection) #login-button:focus-visible{outline:2px solid #edca83;outline-offset:4px}
#auth:not(.character-selection) #login-button:disabled{opacity:.65;cursor:wait}
#auth:not(.character-selection) #auth-message{font:12px/1.6 Arial,sans-serif;min-height:0;margin:12px 0 0;color:#c9b585;overflow-wrap:anywhere}
#auth:not(.character-selection) .auth-footer{font:11px/1.6 Arial,sans-serif;color:#998f75;border-top:1px solid #7d633744;padding-top:12px;margin-top:14px}
.auth-client-loader{display:none;text-align:center;padding:4px 0 15px}.auth-loading-emblem{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:4px auto 27px}
.auth-loading-emblem:before{content:'';position:absolute;inset:0;border:1px solid #ad884740;border-radius:50%}
.auth-loading-emblem:after{content:'';position:absolute;inset:7px;border:2px solid #a5823c25;border-top-color:#d1a75a;border-radius:50%;animation:auth-orbit 2.8s linear infinite}
.auth-loading-emblem img{width:72px;height:76px;object-fit:contain;filter:drop-shadow(0 3px 6px #0008)}
#auth .auth-client-loader h2{font:normal 28px/1.3 Georgia,serif;color:#ede0bd;margin:0 0 12px}.auth-client-loader>p{font:13px/1.7 Arial,sans-serif;color:#b6aa8d;margin:0 auto;max-width:27ch}
.auth-loading-track{height:2px;margin:24px 0 0;background:#69553066;position:relative;overflow:hidden}.auth-loading-track span{position:absolute;inset:0 auto 0 -35%;width:35%;background:linear-gradient(90deg,transparent,#e6c27d,transparent);animation:auth-loading-pass 2.6s ease-in-out infinite}
#auth[data-entry=boot]:not(.character-selection) #auth-content,#auth[data-entry=boot]:not(.character-selection)>.auth-card>h1,#auth[data-entry=boot]:not(.character-selection)>.auth-card>.auth-description{display:none}
#auth[data-entry=boot]:not(.character-selection) .auth-client-loader{display:block}
#auth[data-entry=boot]:not(.character-selection) #auth-message{display:none}
/* A native disconnect must not flash credential fields before the next frame. */
body.auth-restoring #auth:not(.character-selection) #auth-content,body.auth-restoring #auth:not(.character-selection)>.auth-card>h1,body.auth-restoring #auth:not(.character-selection)>.auth-card>.auth-description,body.auth-restoring #auth:not(.character-selection) #auth-message{display:none}
body.auth-restoring #auth:not(.character-selection) .auth-client-loader{display:block}
#auth:not(.character-selection) #auth-message:before{display:none}
#auth:not(.character-selection) #auth-message.auth-status-error{color:#e5a18c}
#auth .auth-client-loader #auth-reload{margin:20px auto 0;min-height:40px;font-size:13px}
#auth .auth-client-loader #auth-reload[hidden]{display:none}
body.auth-restoring #auth:not(.character-selection) #login-button:before{content:'';width:13px;height:13px;border:2px solid #f1d59b40;border-top-color:#f1d59b;border-radius:50%;animation:auth-orbit 1s linear infinite}
#auth.character-selection>.auth-backdrop,#auth.character-selection>.auth-identity,#auth.character-selection .auth-client-loader{display:none}
@keyframes auth-orbit{to{transform:rotate(360deg)}}@keyframes auth-loading-pass{to{left:100%}}
@media(max-width:760px){#auth:not(.character-selection){grid-template-columns:1fr;gap:16px;padding:20px 18px;align-content:safe center}#auth:not(.character-selection):after{inset:10px}.auth-backdrop{background-position:45% 35%;background-image:linear-gradient(0deg,#11130f 0%,#11130fd9 55%,#11130f55 100%),url('/ui/assets/auth/gateway.webp')}.auth-identity{min-height:0;align-self:auto;padding:4px 0 0;text-align:center;align-items:center}.auth-wordmark{font-size:66px;letter-spacing:-3px;margin-bottom:9px}.auth-identity>p{font-size:16px}.auth-identity-note{display:none}#auth:not(.character-selection)>.auth-card{width:min(100%,410px);padding:18px 18px 16px}#auth:not(.character-selection)>.auth-card>h1{font-size:29px}.auth-loading-emblem{width:88px;height:88px;margin-bottom:22px}}
@media(max-height:600px) and (min-width:761px){#auth:not(.character-selection){padding:28px 6vw}.auth-identity{min-height:280px;padding-bottom:28px}#auth:not(.character-selection)>.auth-card{padding:18px 20px 16px}.auth-wordmark{font-size:76px}}
@media(prefers-reduced-motion:reduce){.auth-loading-emblem:after,.auth-loading-track span,body.auth-restoring #auth #login-button:before{animation:none}.auth-loading-track span{left:25%;width:50%}}

/* Compact recovery replaces the form; it never stacks beneath it. */
#auth:not(.character-selection) #auth-message:empty{display:none}
body.session-recovering #auth:not(.character-selection) #login-form,body.session-recovering #auth:not(.character-selection) .auth-description{display:none}
#auth:not(.character-selection) .session-recovery{padding:12px;margin-top:12px}
#auth .session-recovery p{margin:0 0 12px;font:12px/1.55 Arial,sans-serif}
#auth .session-recovery>div{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
#auth .session-recovery button{flex:1 1 auto;min-width:0;width:auto;min-height:36px;margin:0;padding:7px 10px;font:12px/1.4 Arial,sans-serif}
#auth .session-recovery button[hidden]{display:none}
#auth .auth-register-link{font:12px/1.5 Arial,sans-serif;text-align:center;margin:14px 0 0;color:#b7ac94}
#auth .auth-register-link a{color:#edcd8b;text-decoration:underline;text-underline-offset:3px}
#auth .kingdom-choice>[data-empire]{justify-content:flex-start;gap:16px;min-height:62px;padding:10px 14px}
#auth .kingdom-choice img{display:block;width:64px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 3px #0006)}
#auth .kingdom-choice span{font-size:15px}
#auth .auth-client-loader{padding:0 0 8px}#auth .auth-loading-emblem{width:88px;height:88px;margin:2px auto 18px}#auth .auth-loading-emblem img{width:62px;height:66px}#auth .auth-client-loader h2{font-size:24px;margin-bottom:8px}#auth .auth-loading-track{margin-top:18px}
@media(max-width:760px){#auth:not(.character-selection)>.auth-card>h1{font-size:26px}#auth .session-recovery button{min-height:44px}#auth:not(.character-selection) #login-button{min-height:44px}}