.geegii-account-button {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 99998;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgb(245 241 232 / 0.18);
  border-radius: 999px;
  color: #f5f1e8;
  background: rgb(17 21 27 / 0.72);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.24);
  backdrop-filter: blur(10px);
  font: 800 14px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.geegii-account-popup {
  position: fixed;
  top: max(64px, calc(env(safe-area-inset-top) + 64px));
  right: max(16px, env(safe-area-inset-right));
  z-index: 99999;   /* must sit above any game/tool full-screen menu (e.g. Cinderbound #menu z-index 40) */
  display: grid;
  gap: 10px;
  width: min(292px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgb(245 241 232 / 0.16);
  border-radius: 8px;
  color: #f5f1e8;
  background: rgb(17 21 27 / 0.92);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.36);
  backdrop-filter: blur(14px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.geegii-account-popup[hidden] {
  display: none;
}

.geegii-account-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}

.geegii-account-head.is-logged-out {
  grid-template-columns: 1fr;
}

.geegii-account-avatar {
  width: 56px;
  height: 56px;
  border: 1px solid rgb(245 241 232 / 0.18);
  border-radius: 8px;
  background: #0c1017;
  image-rendering: pixelated;
}

.geegii-account-avatar[hidden] {
  display: none;
}

.geegii-account-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.geegii-account-copy strong {
  font-size: 16px;
}

.geegii-account-copy span {
  color: #cbd2c7;
  font-size: 12px;
  line-height: 1.35;
}

.geegii-account-actions {
  display: grid;
  gap: 8px;
}

.geegii-account-actions a,
.geegii-account-actions button {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgb(245 241 232 / 0.16);
  border-radius: 6px;
  color: #f5f1e8;
  background: rgb(245 241 232 / 0.08);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}

.geegii-account-actions a[hidden],
.geegii-account-actions button[hidden] {
  display: none;
}

.geegii-account-actions [data-geegii-login] {
  border-color: rgb(114 201 255 / 0.42);
  color: #dff4ff;
  background: rgb(114 201 255 / 0.16);
}

.geegii-account-actions [data-geegii-logout] {
  border-color: rgb(255 132 116 / 0.32);
  color: #ffd7d1;
  background: rgb(177 67 54 / 0.12);
}