/* Account forms extend the existing Hearthstone wood, parchment and gold UI. */
#online .profile-screen .online-main { max-width: 900px; }
.player-profile-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.player-profile-layout > * { min-width: 0; }
#online .player-name-panel, #online .profile-account-panel { background: #2b1d11; border: 1px solid #806039; border-radius: 12px; }
#online .profile-screen .online-intro, #online .profile-screen .field-help { color: #ddc9a5; }
.player-name-form { display: flex; flex-direction: column; }
#online .player-name-form input { color: #f6ecd6; background: #1b1007; border-color: #a8834a; }
#online .player-name-form input[aria-invalid="true"] { border-color: #ffbab6; }
.player-name-submit { width: 100%; }
.profile-name-status { margin: 0; color: #c6dda8; font: 15px/1.6 var(--body); }
.profile-name-status:not(:empty) { margin-bottom: 18px; }
.profile-progress { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #806039; color: #ddc9a5; font: 15px/1.5 var(--body); font-variant-numeric: tabular-nums; }
.profile-account-panel > p { margin: 0 0 20px; color: #ddc9a5; font: 15px/1.6 var(--body); }
.profile-email { overflow-wrap: anywhere; }
.profile-account-panel .oauth-providers p { margin: 0; color: #ddc9a5; font: 15px/1.6 var(--body); }
.profile-account-panel .online-message:not(:empty) { margin-top: 18px; }
#online .profile-signout { min-height: 44px; margin-top: 18px; }
#online .profile-buttons { flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
#online .profile-buttons .edit-profile { min-width: 90px; }
@media (max-width: 680px) {
  .player-profile-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #online .profile-screen .online-main { margin-top: 24px; }
  #online .profile-screen .online-panel { padding: 22px 20px; }
  #online .profile-buttons { justify-content: flex-start; }
}