.account{position:relative}
.account__entry{gap:0;padding:0;overflow:hidden}
.account__entry[data-state=authenticated]{border-color:var(--gold)}
.account__entry[data-state=expired],.account__entry[data-state=failed]{border-color:#e0a05a}
.account__label{font-size:11px;letter-spacing:.14em;color:var(--accent)}
.account__initial{font-size:14px;font-weight:600;color:var(--gold)}
.account__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.account__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:min(320px,calc(100vw - 28px));padding:16px 18px;border:1px solid var(--accent-soft);border-radius:18px;background:rgba(7,15,36,.96);backdrop-filter:blur(12px);box-shadow:0 18px 48px #0009;text-align:left}
.account__panel[hidden]{display:none}
.account__title{margin:0 0 8px;font-size:13px;letter-spacing:.08em;color:var(--accent)}
.account__name{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--gold)}
.account__note{margin:0 0 10px;font-size:12px;line-height:1.7;color:var(--dim)}
.account__stat{margin:0 0 10px;font-size:12px;line-height:1.7;color:var(--accent)}
.account__error{margin:0 0 10px;font-size:12px;line-height:1.7;color:#e79a6b}
.account__action{display:block;width:100%;margin-top:8px;padding:9px 14px;border:1px solid var(--accent-soft);border-radius:12px;background:rgba(12,26,60,.7);color:var(--accent);font-size:12px;letter-spacing:.1em;cursor:pointer}
.account__action:hover{border-color:var(--accent)}
.account__ghost{background:none;color:var(--dim)}
/* Sheet state: the panel is re-parented to <body> so that fixed positioning
   resolves against the viewport rather than a transformed ancestor in the top
   bar. --account-viewport tracks visualViewport, so an expanded address bar or
   an open keyboard shrinks the sheet instead of pushing its buttons off screen. */
.account__panel--sheet{position:fixed;top:auto;right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;
  max-height:min(72vh,calc(var(--account-viewport,100vh) - 96px));overflow-y:auto;overscroll-behavior:contain;z-index:1200}
.account__close{display:block;width:100%;margin-top:12px;padding:10px 14px;border:1px solid var(--accent-soft);border-radius:12px;
  background:transparent;color:var(--muted);font-size:12px;letter-spacing:.1em;cursor:pointer}

@media (max-width:820px){
  .account__panel{position:fixed;top:auto;right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:60vh;overflow:auto}
}

/* Identity comes from the authenticated server profile; achievements stay scoped
   to this account's browser-local claim record. */
.account__entry .account__avatar{width:32px;height:32px}
.account__identity{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.account__identity .account__avatar,.account__identity .account__initial{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover}
.account__identity .account__initial{display:grid;place-items:center;background:#ffffff0b;font-size:22px}
.account__identity .account__name{margin:0;color:#eef4f8;font-size:17px;overflow-wrap:anywhere}
.account__achievements{margin:0 0 16px;padding:14px 0;border-block:1px solid #ffffff12}
.account__section-title{font-size:12px;font-weight:500;color:#aab9c6;margin:0 0 10px}
.account__achievement{display:flex;align-items:center;gap:12px;min-height:48px}
.account__badge{width:48px;height:60px;object-fit:contain;flex:none}
.account__achievement-copy{display:grid;gap:4px}.account__achievement-copy strong{font-size:14px;font-weight:500;color:#e4edf5}.account__achievement-copy span,.account__future{font-size:11px;color:#98a9b9}
.account__future{margin:12px 0 0}