/* Login gate + account bits. Uses the game's own tokens (paper, ink, gold, Anton). */
#gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:calc(var(--sat) + 24px) 16px calc(var(--sab) + 24px);background:var(--abyss);overflow:auto}
#gate[hidden]{display:none}
.gate-card{width:min(460px,100%);padding:26px clamp(18px,4vw,32px) 24px;text-align:center;box-shadow:12px 12px 0 var(--ink-deep)}
.gate-card h1{font-family:var(--font-big);font-weight:400;text-transform:uppercase;font-size:clamp(54px,12vw,84px);line-height:.95;letter-spacing:.02em;margin:8px 0 6px}
.gate-card h1 em{font-style:italic;color:var(--red)}
.gate-card h2{font-family:var(--font-big);font-weight:400;text-transform:uppercase;font-size:24px;letter-spacing:.04em;margin:14px 0 6px}
.gate-card p{margin:0 0 14px;font-size:16px}
.gate-card .fine{font-size:14px;opacity:.8}
.gate-card form{display:grid;gap:12px;margin-top:6px}
.gate-card label{text-align:left;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.gate-card input{width:100%;font:inherit;font-size:18px;padding:12px 14px;border:3px solid var(--ink);background:var(--paper-bright);color:var(--ink);border-radius:0;outline:none}
.gate-card input:focus{box-shadow:4px 4px 0 var(--gold)}
.gate-card input.code{text-align:center;letter-spacing:.3em;font-size:26px;font-family:var(--font-type)}
.gate-card .btn{width:100%;cursor:pointer}
.gate-card .btn[disabled]{opacity:.5;cursor:wait}
.gate-msg{min-height:22px;font-weight:800;font-size:15px;color:var(--red);text-align:left}
.gate-msg.ok{color:var(--ink)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;cursor:pointer}
.gate-links{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px}
.gate-links .linkbtn[disabled]{opacity:.5;text-decoration:none;cursor:default}

/* account block inside the settings menu */
#acct{display:grid;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:2px dashed var(--ink)}
#acct[hidden]{display:none}
#acct .acct-name{font-size:15px}
#acct form{display:flex;gap:6px}
#acct form[hidden]{display:none}
#acct input{flex:1;min-width:0;font:inherit;font-size:15px;padding:6px 8px;border:2px solid var(--ink);background:var(--paper-bright);color:var(--ink);border-radius:0}
#acct .acct-sync{font-size:13px;font-weight:800;letter-spacing:.04em}
#acct .acct-sync.err{color:var(--red)}
#acctMsg{font-size:13px;font-weight:800;color:var(--red);min-height:0}