/* Development 1.1: accessible Firebase account drawer. Does not change gameplay layout. */
#accountBtn{font-size:12px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
#account-root{position:fixed;z-index:10030;inset:0;display:grid;place-items:center;background:#020610dd;overflow:auto;padding:12px;color:#edf4ff}
#account-root[hidden]{display:none!important}
.account-sheet{width:min(490px,100%);max-height:95vh;overflow-y:auto;background:linear-gradient(160deg,#1a2940,#0e1727 80%);border:1px solid #7390b8;border-radius:18px;padding:20px;box-shadow:0 18px 70px #000c;font:14px/1.48 system-ui,Segoe UI,sans-serif}
.account-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.account-heading h2{margin:2px 0 5px;font-size:22px;color:#fff}
.account-eyebrow{font-size:10px;letter-spacing:2px;color:#e1b77a}
.account-close{color:#fff;background:#354862;border:1px solid #7591b4;border-radius:9px;padding:8px 12px;font-size:16px;cursor:pointer}
.account-explain{font-size:13px;color:#c0d0e6;margin:3px 0 18px}
.account-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px}
.account-tabs button{padding:9px;flex:1;min-width:85px;background:#1c314b;border:1px solid #3b5879;border-radius:10px;color:#cedcf2;cursor:pointer;font:inherit;font-size:12px}
.account-tabs button.on{background:#2b486b;border-color:#b9d2fa;color:#fff}
#account-form{display:grid;gap:7px}
#account-form label{font-size:12px;color:#d9e8ff;font-weight:650;margin-top:5px}
#account-form label small{font-weight:400;color:#93a8c9}
#account-form input{width:100%;box-sizing:border-box;min-height:42px;padding:10px 12px;border:1px solid #58749a;border-radius:9px;background:#09172a;color:#fff;font:inherit;font-size:14px}
#account-form input:focus-visible{outline:2px solid #f4cb83;outline-offset:1px}
.account-primary{margin-top:12px;background:linear-gradient(90deg,#e1b469,#c9984b)!important;color:#102039!important;border:0!important;font-weight:750!important;border-radius:9px!important;min-height:44px;cursor:pointer}
.account-actions{display:grid;gap:9px;margin:12px 0}
.account-actions button,.account-secondary{color:#fff;background:#294260;border:1px solid #59769b;border-radius:9px;padding:11px;font:inherit;cursor:pointer}
.account-user{border:1px solid #55739d;border-radius:12px;padding:13px;background:#15253b}
.account-user-title{font-size:19px;font-weight:700}.account-email{font-size:12px;color:#b4c9e5;word-break:break-all}
.account-flag{display:inline-block;margin-top:10px;padding:5px 9px;border-radius:20px;font-size:11px;background:#4b3b35;color:#ffe4ab}
.account-flag.is-verified{background:#244b3d;color:#aaf3d0}
.account-feedback{font-size:12px;min-height:18px;margin:13px 0}
.account-feedback.is-error{color:#ffc1c1}.account-feedback.is-notice{color:#b9edcf}
.account-local{background:#0c1b2d;border-radius:10px;padding:12px;color:#c6d8ea;font-size:12px}
.account-local p{margin:7px 0 10px}.account-local button{font-size:12px;width:100%}
.account-note{font-size:11px;color:#adc0da;margin:13px 0 0}
@media(max-width:420px){#accountBtn{max-width:90px;font-size:10px}.account-sheet{padding:14px}.account-heading h2{font-size:19px}}

@media(max-width:500px){.masthead{flex-wrap:wrap}.masthead .brand{flex:1 1 100%;padding-bottom:1px}.masthead>div:last-child{margin-left:auto}#accountBtn{max-width:none;min-width:112px;height:39px;font-size:11px}}