.account-panel-shell {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  right: 0.9rem;
  width: auto;
  margin: 0;
  z-index: 2200;
  pointer-events: none;
  isolation: isolate;
}

.account-panel-shell[data-account-context='landing'] {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  right: 0.9rem;
  width: auto;
  margin: 0;
  z-index: 2200;
  pointer-events: none;
}

.account-panel-shell[data-account-context='arcade'] {
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  right: 0.9rem;
}

[data-account-panel] {
  display: block;
  pointer-events: auto;
}

.account-flyout {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}

.account-flyout-trigger {
  border: 1px solid rgba(179, 227, 197, 0.58);
  border-radius: 999px;
  background: rgba(10, 24, 16, 0.9);
  color: #f2f7f0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.44rem 0.82rem;
  min-height: 2.2rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
}

.account-flyout-trigger:hover {
  filter: brightness(1.06);
}

.account-flyout-trigger:focus-visible {
  outline: 2px solid rgba(186, 252, 210, 0.72);
  outline-offset: 1px;
}

.account-flyout-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(360px, calc(100vw - 1rem));
  max-height: min(78dvh, 640px);
  overflow: auto;
  display: none;
  pointer-events: auto;
}

.account-panel-shell.account-flyout-safe .account-flyout-trigger {
  filter: none;
  box-shadow: none;
}

.account-panel-shell.account-flyout-safe .account-flyout-panel {
  max-height: min(70dvh, 560px);
}

.account-flyout.is-open .account-flyout-panel {
  display: block;
}

.account-flyout-panel[hidden] {
  display: none !important;
}

.account-flyout-panel .account-card {
  padding: 0.86rem 0.95rem 0.96rem;
}

.account-card {
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(140, 220, 168, 0.22), rgba(11, 28, 20, 0) 52%),
    linear-gradient(145deg, rgba(17, 39, 30, 0.96), rgba(9, 21, 16, 0.94));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  color: #f2f6ef;
  padding: 1rem 1.1rem 1.1rem;
}

.account-kicker {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.78;
}

.account-title {
  margin: 0.22rem 0 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.03rem, 2vw, 1.24rem);
  line-height: 1.22;
}

.account-subline {
  margin: 0.2rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  opacity: 0.85;
}

.account-auth-toggle {
  margin-top: 0.85rem;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(186, 229, 200, 0.4);
  border-radius: 999px;
  overflow: hidden;
}

.account-toggle-btn {
  border: 0;
  background: transparent;
  color: #d7ece0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.88rem;
  cursor: pointer;
}

.account-toggle-btn.is-active {
  background: rgba(168, 238, 194, 0.9);
  color: #082113;
}

.account-auth-form,
.account-profile-form {
  margin-top: 0.78rem;
  display: grid;
  gap: 0.55rem;
}

.account-auth-form label,
.account-profile-form label {
  display: grid;
  gap: 0.2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.79rem;
}

.account-auth-form input,
.account-auth-form select,
.account-profile-form input,
.account-profile-form select {
  width: 100%;
  border: 1px solid rgba(163, 221, 183, 0.44);
  border-radius: 10px;
  background: rgba(7, 17, 13, 0.78);
  color: #f4f9f1;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  padding: 0.55rem 0.62rem;
}

.account-auth-form input:focus,
.account-auth-form select:focus,
.account-profile-form input:focus,
.account-profile-form select:focus {
  outline: 2px solid rgba(176, 246, 202, 0.58);
  outline-offset: 1px;
}

.account-submit-btn,
.account-signout-btn {
  border: 0;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.account-submit-btn {
  background: linear-gradient(128deg, #78d7a1, #4cb882);
  color: #072111;
  padding: 0.56rem 0.72rem;
}

.account-submit-btn:hover {
  filter: brightness(1.04);
}

.account-submit-btn:disabled,
.account-signout-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.account-profile-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.68rem;
  align-items: center;
}

.account-avatar-badge {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  border: 2px solid rgba(221, 251, 233, 0.65);
  background: radial-gradient(circle at 24% 20%, #b1f4cf, #4aa37a);
  color: #072113;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', serif;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.account-profile-copy {
  min-width: 0;
}

.account-profile-copy .account-title,
.account-profile-copy .account-kicker,
.account-profile-copy .account-subline {
  margin: 0;
}

.account-signout-btn {
  background: rgba(234, 111, 120, 0.18);
  border: 1px solid rgba(253, 152, 165, 0.42);
  color: #ffd9de;
  padding: 0.42rem 0.7rem;
}

.account-bp-block {
  margin-top: 0.72rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(169, 227, 189, 0.34);
  border-radius: 12px;
  background: rgba(8, 20, 14, 0.56);
}

.account-bp-kicker,
.account-bp-xp,
.account-bp-subline {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}

.account-bp-kicker {
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.82;
}

.account-bp-xp {
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 700;
}

.account-bp-meter {
  margin-top: 0.42rem;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(181, 237, 205, 0.18);
  overflow: hidden;
}

.account-bp-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #79e6ad, #c3fce0);
}

.account-bp-subline {
  margin-top: 0.34rem;
  font-size: 0.77rem;
  opacity: 0.86;
}

.account-notice {
  margin: 0.62rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.79rem;
}

.account-notice.tone-success {
  color: #b8fad0;
}

.account-notice.tone-error {
  color: #ffd7dd;
}

.account-notice.tone-neutral {
  color: #dce9e2;
}

body.arcade-page .account-card {
  border-color: rgba(253, 245, 133, 0.58);
  background:
    radial-gradient(circle at top right, rgba(247, 111, 202, 0.32), rgba(8, 4, 30, 0) 54%),
    linear-gradient(150deg, rgba(25, 9, 61, 0.9), rgba(5, 7, 34, 0.95));
  box-shadow: 0 0 22px rgba(255, 72, 173, 0.26), 0 14px 34px rgba(0, 0, 0, 0.44);
  color: #fef7ff;
}

body.arcade-page .account-avatar-badge {
  border-color: rgba(255, 244, 152, 0.78);
  background: radial-gradient(circle at 22% 20%, #fbe9a0, #ff6ec7);
  color: #1f0c3d;
}

body.arcade-page .account-auth-form input,
body.arcade-page .account-auth-form select,
body.arcade-page .account-profile-form input,
body.arcade-page .account-profile-form select {
  border-color: rgba(255, 223, 126, 0.54);
  background: rgba(9, 8, 34, 0.72);
  color: #fff6f8;
}

body.arcade-page .account-submit-btn {
  background: linear-gradient(125deg, #ffd56d, #ff7cc6);
  color: #2a123f;
}

@media (max-width: 760px) {
  .account-panel-shell {
    width: auto;
    margin: 0;
    right: 0.5rem;
    top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
  }

  .account-panel-shell[data-account-context='landing'] {
    width: auto;
    margin: 0;
    right: 0.5rem;
    top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
  }

  .account-flyout-trigger {
    padding: 0.4rem 0.74rem;
    min-height: 2.1rem;
    font-size: 0.77rem;
  }

  .account-flyout-panel {
    width: min(340px, calc(100vw - 1rem));
  }

  .account-profile-head {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .account-signout-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}