/* Larger, readable sign-in and onboarding panels, before the landscape game. */
body.account-loading{overflow:hidden}
body.account-loading>header,body.account-loading>main{overflow:hidden;max-width:100%}
.account-gate{padding:16px;background:#050507}
.gate-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:30px;width:min(1000px,100%);max-width:none;max-height:calc(100dvh - 32px);padding:28px;background:#17151d;color:#faf9fd;border-color:#68606f;overflow:hidden;border-radius:20px}
.gate-heading,.gate-actions{min-width:0;max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b1697c #28222d}
.gate-heading{align-self:center;padding-right:4px}
.gate-actions{padding:2px 6px 2px 2px}
.gate-card .gate-brand{width:min(240px,100%);height:96px;max-width:100%;margin:0 0 22px;background:#fff;border-radius:9px}
.gate-heading>.eyebrow{font-size:15px;line-height:1.6;letter-spacing:1px;color:#ff9dae;display:block}
.gate-card h1{font-size:44px;line-height:1.12;letter-spacing:-.5px;margin:14px 0 18px;color:#fff}
.gate-card p,.gate-card .check,.gate-card form>label:not(.check){font-size:20px;line-height:1.6;color:#e0dce7}
.gate-card #gate-status{font-size:20px;line-height:1.65;overflow-wrap:anywhere;margin:0}
.gate-card form>label:not(.check){display:flex;flex-direction:column;gap:10px;margin-top:18px;font-weight:600}
.gate-card form>label:first-child{margin-top:0}
.gate-card input:not([type]),.gate-card input[type=email],.gate-card input[type=password],.gate-card input[type=text]{font-size:22px;line-height:1.4;min-height:64px;width:100%;max-width:100%;margin:0;padding:15px 16px;border:1px solid #918597;border-radius:10px;background:#28232f;color:#fff;box-sizing:border-box}
.gate-card input::placeholder{color:#c6bdcf;opacity:1}
.gate-card .primary,.gate-card .secondary{font-size:21px;line-height:1.4;width:100%;min-height:60px;padding:15px 18px;border-radius:10px;margin-top:16px}
.gate-card .primary{background:#df102b;color:#fff}
.gate-card .secondary{background:#302735;border:1px solid #8d758c;color:#fff}
.gate-card .small-link{font-size:19px;line-height:1.5;min-height:48px;padding:10px 0;color:#ffb4c1}
.gate-card form>button{width:100%;margin-top:16px}
.gate-card .check{font-size:19px;line-height:1.6;gap:12px;align-items:flex-start;margin:20px 0}
.gate-card .check input{flex:none;width:24px;height:24px;margin:4px 0;accent-color:#e91d38}
.gate-card #login-error,.gate-card #gate-error{font-size:19px;line-height:1.6;color:#ffb6c4;overflow-wrap:anywhere}
.gate-card #login-error:empty,.gate-card #gate-error:empty{display:none}
.gate-card #verify-actions{display:flex;flex-direction:column;gap:12px}
.gate-card #verify-actions button{margin:0}
.gate-card #auth-signout{width:100%;margin-top:12px}
.gate-card:has(#login-form[hidden]):has(#join-form[hidden]):has(#invitation-form[hidden]){display:block;width:min(820px,100%);overflow-y:auto}
.gate-card:has(#login-form[hidden]):has(#join-form[hidden]):has(#invitation-form[hidden]) .gate-heading,.gate-card:has(#login-form[hidden]):has(#join-form[hidden]):has(#invitation-form[hidden]) .gate-actions{max-height:none;overflow:visible}
@media(min-width:600px) and (max-height:500px){
 .gate-card{padding:20px;gap:24px}
 .gate-heading,.gate-actions{max-height:calc(100dvh - 74px)}
 .gate-card .gate-brand{width:190px;height:76px;margin-bottom:14px}
 .gate-heading>.eyebrow{font-size:14px}
 .gate-card h1{font-size:38px;margin:12px 0 14px}
 .gate-card #gate-status{font-size:18px;line-height:1.55}
}
@media(max-width:599px){
 .account-gate{padding:12px}
 .gate-card{display:block;width:100%;max-height:calc(100dvh - 24px);padding:24px 20px;overflow-y:auto}
 .gate-heading,.gate-actions{max-height:none;overflow:visible;padding:0}
 .gate-card .gate-brand{width:200px;height:80px;margin-bottom:16px}
 .gate-card h1{font-size:40px;margin:12px 0 16px}
 .gate-heading>.eyebrow{font-size:14px}
 .gate-card #gate-status{font-size:19px;margin-bottom:24px}
 .gate-card form>label:not(.check),.gate-card p{font-size:19px}
 .gate-card input:not([type]),.gate-card input[type=email],.gate-card input[type=password],.gate-card input[type=text]{min-height:62px;font-size:21px;padding:15px}
 .gate-card .primary,.gate-card .secondary{font-size:20px;min-height:60px}
}
/* The first post-login rotation screen follows the same larger type scale. */
#game-rotate .game-rotate-card{width:100%;max-width:520px;max-height:calc(100dvh - 40px);overflow-y:auto;padding:4px}
#game-rotate .game-rotate-card h2{font-size:clamp(44px,9vw,58px)}
#game-rotate .game-rotate-card p{font-size:22px;line-height:1.6}
#game-rotate .game-rotate-card .primary{font-size:21px;min-height:64px;width:100%;padding:16px}
#game-rotate .game-rotate-card small{font-size:17px;line-height:1.6}

.gate-card #invitation-error{font-size:19px;line-height:1.6;color:#ffb6c4;overflow-wrap:anywhere}
.gate-card #invitation-error:empty{display:none}