#account-gate {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  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));
  overflow: auto;
  overscroll-behavior: contain;
  background: linear-gradient(160deg, #143337e8, #284838cc 60%, #3b5b46d9);
  outline: none;
}

.account-gate-card {
  width: min(100%, 456px);
  margin-block: auto;
  padding: clamp(18px, 5vw, 32px);
  border: 2px solid #2a4c42;
  border-radius: 20px;
  background: #fffbed;
  color: #203c34;
  box-shadow: 0 8px 0 #132c2990;
}

.account-gate-header { margin-bottom: 20px; }

.account-gate-kicker {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #9bb298;
  border-radius: 5px;
  background: #e7eed8;
  color: #3a624e;
  font-size: 12px;
  font-weight: 800;
}

.account-gate-header h1 {
  margin: 10px 0 6px;
  color: #214438;
  font-size: clamp(27px, 7vw, 42px);
  line-height: 1.12;
  font-weight: 950;
}

.account-gate-header p {
  margin: 0;
  color: #405c4d;
  font-size: 14px;
  line-height: 1.55;
}

.account-gate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#account-gate button {
  min-height: 44px;
  padding: 7px 12px;
  font-size: 15px;
  font-weight: 800;
  touch-action: manipulation;
}

#account-gate .account-gate-primary {
  grid-column: 1 / -1;
  min-height: 52px;
  background: #ec9d59;
  color: #352717;
  border-color: #865739;
  box-shadow: 0 3px 0 #bd7948;
  font-size: 19px;
}

#account-gate .account-gate-primary:hover { background: #ffb775; }
.account-gate-primary span { margin-inline-start: 5px; }

#account-gate-back { margin-bottom: 8px; }

#account-form, #account-nickname-form {
  display: grid;
  gap: 6px;
}

#account-form label, #account-nickname-form label {
  font-size: 14px;
  font-weight: 800;
}

#account-form input, #account-nickname {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border-color: #7e9a86;
  font-size: 16px;
}

#account-form-help, #account-nickname-help {
  margin: 3px 0 5px;
  color: #4f6254;
  font-size: 12px;
  line-height: 1.5;
}

#account-credential-host iframe {
  display: block;
  width: 100%;
  height: clamp(345px, 52vh, 405px);
  height: clamp(345px, 52dvh, 405px);
  border: 1px solid #9bb298;
  border-radius: 10px;
  background: #f8fbf3;
}

#account-gate-status {
  min-height: 1.5em;
  margin: 11px 0 4px;
  color: #65482f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.account-gate-footnote {
  margin: 0;
  color: #4f6254;
  font-size: 12px;
  line-height: 1.5;
}

#account-retry { margin: 0 0 9px; }

#account-nickname-title {
  margin: 0 0 5px;
  color: #214438;
  font-size: 19px;
}

#account-nickname-back {
  justify-self: start;
  margin-top: 5px;
}

#player-display-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.hud-nav > #arena-button {
  flex: none;
  min-height: 36px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--hud-rule);
  border-radius: 6px;
  background: transparent;
  color: var(--hud-ink);
  font-size: 12px;
  font-weight: 850;
  pointer-events: auto;
  text-shadow: inherit;
  touch-action: manipulation;
  white-space: nowrap;
}

.hud-nav > #arena-button:hover { background: var(--hud-hover); }
.hud-nav > #arena-button:focus-visible { outline: 2px solid var(--hud-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #account-gate button { transition: none; transform: none; }
}