/* Avatar and stacked details inspired by mrhyddenn on Uiverse, warm-wasp-21. */
.account-menu {
  display: flex; align-items: center; gap: 7px; min-width: 0; flex-shrink: 0;
}
.account-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 8px; min-height: 48px; max-width: 230px; padding: 5px 10px 5px 5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  line-height: 1.25;
}
.account-chip:hover, .account-chip[aria-current] { border-color: var(--accent-text, var(--accent)); }
.account-chip strong, .account-chip-balance { display: block; }
.account-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.account-chip-balance { margin-top: 3px; font-size: .75rem; font-weight: 700; color: var(--accent-text, var(--accent)); }
.discord-avatar {
  position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden;
  width: 36px; height: 36px; border: 1px solid #84503f; border-radius: 50%;
  background: linear-gradient(145deg, #4b2922, #272024); color: #ffd7c9;
  font: 800 .8rem/1 system-ui, sans-serif;
}
.discord-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-recharge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 6px 10px; border: 1px solid #8a4836; border-radius: 8px;
  background: #3b231d; color: #ffe1d6; font-size: .75rem; font-weight: 800; white-space: nowrap;
}
.account-recharge:hover { border-color: var(--accent-text, var(--accent)); background: #543027; }
.account-recharge span:first-child { font-size: 1.15rem; line-height: 1; }
@media (max-width: 1160px) {
  .navigation:has(.account-menu) { flex-wrap: wrap; column-gap: 10px; row-gap: 4px; padding-block: 8px; }
  .navigation:has(.account-menu) nav { order: 3; width: 100%; flex-wrap: wrap; }
}
@media (min-width: 981px) and (max-width: 1160px) {
  .site-header:has(.account-menu) + main .home-intro { min-height: calc(100svh - 113px); }
}
@media (max-width: 550px) {
  .navigation .account-menu { order: 2; width: 100%; }
  .navigation .account-chip { flex: 1; max-width: none; }
  .top-inner .account-menu { flex-shrink: 1; }
  .top-inner .account-recharge { padding-inline: 0; width: 44px; flex: 0 0 44px; }
  .top-inner .account-recharge span:last-child { display: none; }
}