/* Accounts: login / sign-up / account pages, Throne Room (admin), leaderboard, top-bar chip. Classic + RPG looks. */
.acct-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .82rem; font-weight: 700; white-space: nowrap; max-width: 160px; }
.acct-chip:hover { text-decoration: none; filter: brightness(1.1); }
.acct-chip-txt { overflow: hidden; text-overflow: ellipsis; }
.acct-dot { width: 9px; height: 9px; border-radius: 50%; background: #8a93a6; flex: none; }
.acct-dot.s-synced { background: #34d399; } .acct-dot.s-pending, .acct-dot.s-syncing, .acct-dot.s-checking { background: #facc15; }
.acct-dot.s-offline, .acct-dot.s-error, .acct-dot.s-expired { background: #f87171; } .acct-dot.s-guest, .acct-dot.s-unavailable { background: #8a93a6; }
body.rpg .acct-chip { font-family: var(--px); font-size: .55rem; background: #0f1440; border: 2px solid #8090ff; color: #fff; border-radius: 4px; padding: 7px 8px; }

.acct-page { max-width: 880px; margin: 0 auto; padding: 8px 4px 40px; }
.acct-page h1 { margin: 6px 0 14px; }
.acct-panel { padding: 16px 18px; margin: 0 0 16px; }
.acct-panel h2 { margin-top: 0; }
.acct-form { display: grid; gap: 12px; max-width: 460px; }
.acct-form label { display: grid; gap: 4px; font-weight: 600; }
.acct-form label small { font-weight: 400; font-size: .8rem; }
.acct-form input { font: inherit; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); width: 100%; box-sizing: border-box; }
.acct-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.acct-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.acct-msg { min-height: 1.2em; margin: 0; }
.acct-warn { padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); }
.acct-privacy summary { cursor: pointer; font-weight: 600; }
.acct-ask { padding: 16px 18px; max-width: 560px; }
.acct-ask-q { font-size: 1.05rem; font-weight: 600; }
.acct-role { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--card2); border: 1px solid var(--border); vertical-align: middle; margin-left: 6px; }
.acct-role.role-owner { background: #ffd84a; color: #2a1d00; border-color: #c99a00; }
.acct-role.role-admin { background: #5b7cff; color: #fff; border-color: #3a55c9; }
.acct-flag { display: inline-block; font-size: .7rem; padding: 1px 7px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--border); }
.acct-flag.bad { border-color: var(--bad); color: var(--bad); }
.acct-home { padding: 14px 18px; margin: 16px 0; }
.acct-home h2 { margin: 0 0 6px; font-size: 1.05rem; }
.acct-denied { font-size: 1.05rem; }

/* Throne Room */
.tr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.tr-tile { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: var(--card2); border: 1px solid var(--border); text-align: center; }
.tr-tile b { font-size: 1.3rem; } .tr-ic { font-size: 1.2rem; }
.tr-filter { font: inherit; width: 100%; max-width: 360px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); margin-bottom: 12px; box-sizing: border-box; }
.tr-users { display: grid; gap: 12px; }
.tr-user { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card2); }
.tr-user.is-disabled { opacity: .7; }
.tr-user header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
.tr-name { font-size: 1.05rem; margin-right: 4px; }
.tr-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.tr-site { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--border); }
.tr-site.none { opacity: .7; }
.tr-tracks { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; }
.tr-tk { padding: 1px 6px; border-radius: 6px; background: var(--bg2); }
.tr-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-temp { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); }
.tr-tp { font-size: 1.1rem; font-family: var(--mono); padding: 2px 8px; background: var(--bg2); border-radius: 6px; user-select: all; }
.tr-del { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-del input { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--bad); background: var(--bg2); color: var(--text); }
.tr-log { padding-left: 18px; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.lb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lb-list li { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--card2); }
.lb-list li.me { outline: 2px solid var(--accent); }
.lb-rank { font-weight: 800; text-align: center; }

/* RPG look */
body.rpg .acct-page h1 { font-family: var(--px); }
body.rpg .acct-panel h2, body.rpg .acct-home h2 { font-family: var(--px); font-size: .72rem; line-height: 1.7; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); margin: 0 0 10px; }
body.rpg .acct-panel, body.rpg .acct-home { color: #f4f1ff; }
body.rpg .acct-panel .muted, body.rpg .acct-home .muted { color: #c9c2f0; }
body.rpg .acct-form label > span { font-family: var(--px); font-size: .55rem; color: var(--gold); letter-spacing: .04em; }
body.rpg .acct-form input, body.rpg .tr-filter, body.rpg .tr-del input { font-family: var(--vt); font-size: 1.35rem; padding: 4px 10px; background: #0f1440; color: #fff; border: 2px solid #f4f1ff; box-shadow: 0 0 0 2px var(--ink); border-radius: 3px; }
body.rpg .acct-warn, body.rpg .tr-temp { background: rgba(255, 216, 74, .15); border: 2px solid var(--gold); color: #fff; }
body.rpg .tr-tile, body.rpg .tr-user, body.rpg .lb-list li { background: rgba(10, 12, 50, .55); border: 2px solid #8090ff; border-radius: 4px; }
body.rpg .tr-site { border-color: #6f7ad8; }
body.rpg .tr-tk { background: rgba(255,255,255,.08); }
body.rpg .tr-tp { background: #0f1440; color: var(--gold); font-family: var(--vt); font-size: 1.5rem; }
body.rpg .throne h1::after { content: ""; }
body.rpg .throne > .lead { color: #f1eeff; }
body.rpg .acct-role { font-family: var(--px); font-size: .5rem; padding: 4px 6px; border-radius: 3px; background: #0f1440; color: #fff; border: 2px solid #8090ff; }
body.rpg .acct-role.role-owner { background: #ffd84a; color: #2a1d00; border-color: #fff3b0; }
body.rpg .acct-role.role-admin { background: #5b7cff; color: #fff; border-color: #c9d3ff; }
body.rpg .acct-flag { border-color: #8090ff; }
body.rpg .acct-ask { color: #f4f1ff; }
body.rpg .acct-privacy summary { font-family: var(--px); font-size: .55rem; color: var(--gold); }
.pbtn.danger { background: #7a1022; }
body.rpg .st-ok { color: #7dffb0; } body.rpg .st-bad { color: #ff9a9a; }

@media (max-width: 1439px) { body.rpg .acct-chip-txt { display: none; } body.rpg .acct-chip::before { content: "👤"; font-size: .8rem; } }
@media (max-width: 1100px) { .acct-chip-txt { display: none; } .acct-chip::before { content: "👤"; } }
@media (max-width: 640px) {
  .tr-sites { grid-template-columns: 1fr; }
  .acct-chip, body.rpg .acct-chip { padding: 4px 5px; gap: 3px; max-width: 60px; }
  .acct-dot { width: 7px; height: 7px; }
  /* phones: the sound toggle (and the theme toggle in RPG mode) stay in HQ / Guild Hall settings and the title screen, freeing room for the account chip */
  #soundBtn, body.rpg #themeBtn { display: none; }
  body.rpg .topbar-right { gap: 4px; }
  .lb-list li { grid-template-columns: 30px 1fr auto; } .lb-xp { display: none; }
}