/* Login on the intro screen (soulskingdom.com): hero name + shared password, in the theme's ink-and-gold identity. */
.login-form{display:grid;gap:12px;width:min(320px,100%);margin:0 0 6px}
.login-form label{display:grid;gap:5px}
.login-form label span{font:700 10px var(--f-caps,inherit);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300,#d4bc83)}
.login-form input{height:44px;padding:0 14px;border:1px solid var(--line-gold,#d4bc8366);border-radius:2px;background:#0b1411cc;color:var(--text,#e9e8dc);font:500 16px var(--f-ui,inherit);outline:none;transition:border-color .15s,box-shadow .15s}
.login-form input:focus{border-color:var(--gold-300,#d4bc83);box-shadow:0 0 0 2px #d4bc8333}
.login-form .primary{margin-top:6px}
.login-form .primary:disabled{opacity:.6}
.login-error{min-height:16px;margin:0!important;font-size:13px!important;line-height:1.3!important;color:#ff9c8a!important}
.login-who{margin:10px 0 0!important;font-size:13px!important;line-height:1.4!important;color:var(--text-dim,#c6cfbf)!important}
.login-who b{color:var(--gold-300,#d4bc83)}
.login-who .text-btn{display:inline;padding:0;margin:0;font-size:13px;color:var(--gold-300,#d4bc83);text-decoration:underline;cursor:pointer}
/* While the form is open the intro gets compact: no story paragraph, smaller title, so nothing hits the top bar. */
#intro.login-open>p,#intro.login-open .intro-footer{display:none}
#intro.login-open h1{font-size:clamp(46px,7vw,72px)!important;line-height:.95;margin-bottom:8px}
#intro.login-open h2{margin-bottom:16px}
@media(max-height:560px){#intro.login-open h1{font-size:40px!important}#intro.login-open .ornament,#intro.login-open h2{display:none}.login-form{gap:8px}.login-form input{height:38px}}