/* Everstead account gate: portrait-friendly sign-in overlay preceding gameplay.
 * Works in portrait and landscape (only world sessions require landscape).
 * Touch targets stay at least 48 px; layouts respect safe-area insets. */
#everstead-account-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse 75% 50% at 50% 42%, rgba(255, 178, 102, 0.22), transparent 70%),
    linear-gradient(180deg, #4a2c1a 0%, #2a1a12 55%, #120906 100%);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff5ea;
}
#everstead-account-root[hidden] { display: none !important; }
.everstead-account-card {
  box-sizing: border-box;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 24px;
  border: 1px solid #6e4a33;
  border-radius: 16px;
  background: #241610;
  box-shadow: 0 16px 64px #0008;
}
.everstead-account-title { margin: 0 0 4px; font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; }
.everstead-account-copy { margin: 8px 0; color: #e8cfae; font-size: 14px; }
.everstead-account-status { min-height: 1.5em; margin: 8px 0 12px; color: #e8cfae; font-size: 14px; }
.everstead-account-status.everstead-account-error { color: #ffb4a2; }
.everstead-account-form { display: grid; gap: 12px; }
.everstead-account-label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.everstead-account-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #6e4a33;
  border-radius: 10px;
  background: #120906;
  color: #fff5ea;
  font: inherit;
}
.everstead-account-input:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
.everstead-account-primary {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #ffc94a;
  border-radius: 10px;
  background: #ffc94a;
  color: #2a1a12;
  font: 600 16px/1.4 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.everstead-account-primary:disabled { opacity: 0.6; cursor: wait; }
.everstead-account-primary:focus-visible { outline: 2px solid #fff5ea; outline-offset: 2px; }
.everstead-account-links { display: grid; gap: 4px; margin-top: 12px; }
.everstead-account-link {
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #ffc94a;
  font: 600 14px/1.4 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  text-underline-offset: 3px;
}
.everstead-account-link:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
/* Compact account button on the title menu only: a small pill in the
 * safe-area corner. Small and quiet so it never covers the centred title
 * card on phones (portrait or landscape). It hides once a world session
 * starts (see refreshChipVisibility) so it never fights the HUD during
 * play; required decisions (import/conflict offers, blocked sign-out)
 * force it back visible. */
.everstead-account-chip {
  position: fixed;
  z-index: 25;
  top: max(8px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: block;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff5ea;
  font: 13px/1.4 system-ui, sans-serif;
}
.everstead-account-chip[hidden] { display: none !important; }
.everstead-account-toggle,
#everstead-account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(44vw, 200px);
  min-width: 48px;
  min-height: 48px;
  padding: 6px 12px 6px 8px;
  border: 1px solid #6e4a33;
  border-radius: 999px;
  background: #241610ee;
  color: #fff5ea;
  font: 600 13px/1.4 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.everstead-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4a2f1d;
  color: #ffd98a;
  font: 700 14px/1 system-ui, sans-serif;
  text-transform: uppercase;
}
.everstead-account-chip-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.everstead-account-offline-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd98a;
}
.everstead-account-chip-offline {
  padding: 2px 8px;
  border-radius: 999px;
  background: #57371f;
  color: #ffd98a;
  font-size: 11px;
  font-weight: 700;
}
/* Anchored account panel: the sign-in card style, small popover below the
 * button with the full username and the same actions. Closes by tapping
 * outside, pressing Escape, or tapping the button again. */
.everstead-account-panel {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: min(70vw, 320px);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 76px);
  overflow-y: auto;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #6e4a33;
  border-radius: 16px;
  background: #241610;
  box-shadow: 0 16px 64px #0008;
  color: #fff5ea;
  font: 13px/1.4 system-ui, sans-serif;
}
.everstead-account-panel[hidden] { display: none !important; }
.everstead-account-panel-user {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 700;
  color: #fff5ea;
}
.everstead-account-panel-offline {
  margin: 0;
  font-size: 12px;
  color: #ffd98a;
}
.everstead-account-chip-button {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid #6e4a33;
  border-radius: 999px;
  background: #4a2f1d;
  color: #fff5ea;
  font: 600 13px/1.4 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.everstead-account-panel .everstead-account-chip-button { width: 100%; }
.everstead-account-chip-button:focus-visible,
.everstead-account-toggle:focus-visible,
#everstead-account-button:focus-visible { outline: 2px solid #ffc94a; outline-offset: 2px; }
.everstead-account-chip.everstead-account-busy { opacity: 0.7; }
.everstead-account-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 0;
  color: #ffd98a;
  font-size: 12px;
}
.everstead-account-offer-copy { flex-basis: 100%; }
@media (max-height: 480px) {
  .everstead-account-card { padding: 20px; }
  .everstead-account-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #everstead-account-root *, .everstead-account-chip, .everstead-account-panel, .everstead-account-toggle { transition: none !important; animation: none !important; }
}