/* ============================================================================
   Edit Profile modal (partial/modal/account.html) — a green-bordered arcade card on
   the shared `.modal` shell (modal.css gives the backdrop, open/close wiring + pop).
   Loaded on EVERY page (base.html) because it opens from the header dropdown. Reuses
   the `.auth-field` / `.auth-input` field styles from auth.css. CSP forbids inline
   styles, so every value below is a class, never a style="" attribute.
   ============================================================================ */

/* Backdrop: darker + softer blur than the generic modal. */
.modal-account {
  padding: 36px 24px;
  background: rgba(5, 4, 15, .9);
  backdrop-filter: blur(3px);
}

/* The card: a 460px green-bordered panel with a green glow + hard ledge; lifts in on open. */
.account-card {
  width: 460px;
  max-width: 100%;
  border: 4px solid var(--color-green);
  background: var(--color-panel);
  box-shadow:
    0 0 0 3px var(--color-ink),
    0 0 34px rgba(62, 240, 139, .4),
    12px 14px 0 rgba(0, 0, 0, .55);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}
.modal.is-open .account-card { transform: none; }

/* Title bar: pencil + "EDIT PROFILE" on the left, green ✕ on the right, dashed rule below. */
.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px dashed #3a3670;
}
.account-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  color: #8affc0;
}
.account-head-pencil { display: inline-flex; }
/* the green close X is the shared `.btn btn-green modal-close` (see modal.css) */

/* Body + field labels. */
.account-body { padding: 22px; }
.account-field-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--color-faint);
  margin: 0 0 8px;
}
/* Name + email focus green (this card's accent), overriding auth-input's cyan. */
.account-card .auth-input:focus { border-color: var(--color-green); }

/* The WALLET banner, first in the card. The money is the headline — the biggest thing here, in
   real-money green; a small gold label above it and a plain line under it; OPEN › (a compact base
   .btn) sits to the side as the way in, never louder than the number. A gold-edged panel with a
   faint gold wash, so it reads as money at a glance and apart from the profile fields below. */
.account-wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  margin: 0 0 22px;
  padding: 16px;
  border: 2px solid rgba(255, 210, 63, .45);
  background: rgba(255, 210, 63, .06);
}
/* the pixel wallet, blown up in a gold tile */
.account-wallet-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-gold);
  background: rgba(255, 210, 63, .12);
}
.account-wallet-icon svg { width: 26px; height: 22px; }
.account-wallet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.account-wallet-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--color-gold);
}
.account-wallet-money {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--color-green);
  text-shadow: 0 0 12px rgba(62, 240, 139, .35);
}
.account-wallet-note {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  color: var(--color-text-dim);
}

/* Change-password collapsible (native <details>): a full-width summary row, then a bordered well of
   fields below it. */
.account-pw { margin: 4px 0 0; }
.account-pw-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid #3a3670;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--color-text-dim);
}
.account-pw-summary::-webkit-details-marker { display: none; }
.account-pw-lock { display: inline-flex; flex: none; }
.account-pw-optional {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--color-faint);
}
.account-pw-fields {
  border: 2px solid #3a3670;
  border-top: none;
  padding: 16px 14px 4px;
}
/* The password inputs carry no inset icon, so drop the extra left padding auth-input reserves. */
.account-pw-input { padding-left: 12px; }
.account-pw-input:focus { border-color: var(--color-pink); }
/* Same for the game-details title input (partial/modal/game_details.html): no icon, so it
   sits flush at 12px like the description textarea under it. Focus stays the card's green. */
.account-title-input { padding-left: 12px; }

/* Footer: a friendly error line, then right-aligned CANCEL / SAVE (the .btn system). */
.account-actions { margin-top: 20px; }
.account-error {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-pink-light);
}
.account-actions-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 560px) {
  .account-body { padding: 18px; }
}