/* account.css - the Account link, avatar and sheet, shared by the portal,
   the seat page and the play page. Tokens from theme.css with their own
   values as fallbacks: index.html does not load theme.css. Never --amber
   (tests/web/test_theme.py). */
.account-link { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--gild-dim, #8f7838); border-radius: 999px; padding: .2rem .7rem .2rem .2rem; color: var(--parchment, #e6dcc4); font: inherit; cursor: pointer; }
.account-link:hover, .account-link:focus-visible { border-color: var(--gild, #d8b45a); }
.account-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--gild, #d8b45a); color: var(--ink, #0a1420); flex: none; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initial { font-weight: 700; font-size: .9em; }
.account-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow: auto; z-index: 20; padding: 1rem 1.25rem 1.5rem; background: var(--ink-rise, #13263d); border-top: 1px solid var(--gild, #d8b45a); color: var(--parchment, #e6dcc4); }
.account-head { display: flex; align-items: center; justify-content: space-between; }
.account-title { margin: 0; font-size: 1.25rem; }
.account-close { background: none; border: 0; color: var(--dim, #7f95ae); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.account-form { display: grid; gap: .5rem; margin: 1rem 0; }
.field-label { display: grid; gap: .25rem; color: var(--dim, #7f95ae); }
.field-input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--rule, #24405c); border-radius: 4px; background: var(--field, #16283f); color: var(--parchment, #e6dcc4); }
.field-input:focus-visible { outline: 0; border-color: var(--gild, #d8b45a); }
.btn-primary { font: inherit; padding: .55rem 1rem; border: 1px solid var(--gild, #d8b45a); border-radius: 4px; background: var(--gild, #d8b45a); color: var(--ink, #0a1420); cursor: pointer; }
.btn-ghost { font: inherit; padding: .5rem 1rem; border: 1px solid var(--gild-dim, #8f7838); border-radius: 4px; background: none; color: var(--parchment, #e6dcc4); cursor: pointer; }
.login-panel { max-width: 24rem; margin: 2rem auto; padding: 1.25rem; border: 1px solid var(--rule, #24405c); border-radius: 6px; background: var(--ink-rise, #13263d); }
.login-form { display: grid; gap: .5rem; }