/* Compact introduction and login; full game content is linked at /games. */
.shell>header .brand-off-image{display:block;width:174px;height:auto;max-width:100%;flex-shrink:0}
@media(max-width:600px){.shell>header .brand-off-image{width:148px}}
body.has-auth:not(#_){min-height:100dvh;display:flex;flex-direction:column}
body.has-auth:not(#_) .shell{display:flex;flex:1;flex-direction:column;width:100%;max-width:1000px;padding:28px 32px 20px}
body.has-auth:not(#_) .shell>header{margin:0;min-height:48px;flex:0 0 auto}
body.has-auth:not(#_) .shell>header>div:first-child b{font-size:21px;letter-spacing:.055em}
body.has-auth:not(#_) .shell>header>div:first-child span{font-size:10px;color:#8e9db5}
#auth.welcome-page{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:0;width:100%;max-width:880px;margin:auto;padding:32px 0;border:0;border-radius:0;box-shadow:none;background:none}
#auth.welcome-page[hidden]{display:none!important}
#auth.welcome-page::before{display:none}
#auth .welcome-intro{padding:0 38px 12px 10px}
#auth h1{margin:0;font-size:clamp(34px,4vw,46px);line-height:1.25;letter-spacing:-.065em;font-weight:800;word-break:keep-all}
#auth h1 span{color:#b5a6f4}
#auth .welcome-brand{line-height:1;margin:0 0 26px}
#auth .welcome-brand img{display:block;width:min(330px,100%);height:auto}
@media(max-width:700px){#auth .welcome-brand{margin-bottom:18px}#auth .welcome-brand img{width:240px;max-width:100%}}
#auth .welcome-lead{margin:18px 0 22px;font-size:14px;line-height:1.85;color:#aab8ce;word-break:keep-all}
#auth .welcome-browse{display:inline-flex;min-height:44px;align-items:center;gap:14px;color:#d3c9fa;font-size:13px;text-decoration:none}
#auth .welcome-browse:hover{color:#fff}
#auth .welcome-browse:focus-visible{outline:2px solid #b5a6f4;outline-offset:5px;border-radius:4px}
#auth .welcome-login{min-width:0;padding:34px 30px 24px;border:1px solid #b1c2eb22;border-radius:22px;background:linear-gradient(150deg,#282a33,#1d1e25);box-shadow:0 16px 50px #0002;scroll-margin-top:16px}
#auth .welcome-login h2{margin:0;font-size:23px;line-height:1.4;letter-spacing:-.04em}
#auth .welcome-login-intro{margin:8px 0 25px;color:#aab8ce;font-size:13px}
#auth .welcome-login .oauth-button{min-height:50px;padding-inline:40px;font-size:14px}
#auth #auth-error{margin:14px 0 0;font-size:12px;overflow-wrap:anywhere}
#auth #auth-error:empty{display:none}
#auth #legacy-login{margin-top:20px}
#auth #legacy-login summary{min-height:44px;padding:12px 4px 0}
#auth #legacy-login .legacy-login-body{padding-top:4px}
body.has-auth:not(#_) .public-site-footer{display:flex;flex:0 0 auto;width:min(936px,calc(100% - 64px));margin:0 auto;padding:18px 0 24px;border-top-color:#ffffff0d;color:#8e9db5}
body.has-auth:not(#_) .public-site-footer a{color:#a0aec2}
body.has-auth:not(#_) .public-site-footer a[href="/about"],body.has-auth:not(#_) .public-site-footer a[href="/games"],body.has-auth:not(#_) .public-site-footer a[href="/community"]{display:none}
/* The hidden lobby must not fix the login page to a clipped game viewport. */
html.mobile-layout.has-auth:not(#_){width:100%;height:auto;overflow:auto}
html.mobile-layout body.has-auth:not(#_){position:static;inset:auto;width:100%;height:auto;min-height:100dvh;overflow:visible;overscroll-behavior:auto}
html.mobile-layout body.has-auth:not(#_) .shell{height:auto;min-height:0;overflow:visible}
html.mobile-layout body.has-auth:not(#_) .shell>header{display:flex;align-items:center}
@media(max-width:620px){
 body.has-auth:not(#_) .shell{padding:18px 22px 12px}
 html.mobile-layout body.has-auth:not(#_) .shell{padding:18px 22px 12px}
 body.has-auth:not(#_) .shell>header{min-height:42px}
 body.has-auth:not(#_) .shell>header>div:first-child b{font-size:18px}
 body.has-auth:not(#_) .shell>header>div:first-child span{display:none}
 #auth.welcome-page{grid-template-columns:minmax(0,1fr);max-width:400px;padding:16px 0}
 #auth .welcome-intro{position:relative;padding:0 0 22px}
 #auth h1{font-size:29px;line-height:1.25}
 #auth .welcome-lead{margin:12px 0 0;font-size:12px;line-height:1.7}
 #auth .welcome-lead br{display:none}
 #auth .welcome-browse{min-height:38px;margin-top:3px;font-size:12px}
 #auth .welcome-login{padding:25px 23px 17px;border-radius:19px}
 #auth .welcome-login h2{font-size:21px}
 #auth .welcome-login-intro{margin-bottom:20px;font-size:12px}
 body.has-auth:not(#_) .public-site-footer{width:calc(100% - 44px);align-items:center;gap:10px;padding:12px 0 max(18px,env(safe-area-inset-bottom));font-size:9px}
 body.has-auth:not(#_) .public-site-footer nav{justify-content:center;gap:14px}
}
@media(max-height:500px) and (min-width:621px){
 body.has-auth:not(#_) .shell{padding-top:12px}
 body.has-auth:not(#_) .shell>header{min-height:30px}
 #auth.welcome-page{padding:12px 0}
 #auth h1{font-size:32px}
 #auth .welcome-lead{margin:10px 0 0;font-size:12px}
 #auth .welcome-login{padding:20px 24px 14px}
 #auth .welcome-login-intro{margin-bottom:14px}
 #auth #legacy-login{margin-top:12px}
 body.has-auth:not(#_) .public-site-footer{padding:10px 0 12px}
}
/* Show the wordmark once on the welcome screen; the game header returns after login. */
body.has-auth:not(#_) .shell>header,
html.mobile-layout body.has-auth:not(#_) .shell>header{display:none}