/* Only the account forms change; the other animal panels retain their motion. */
.selectionLayer--family .selectionActions.accountPanel {
  box-sizing: border-box;
  width: clamp(320px, calc(24vw + 44px), 378px);
  min-height: 0;
  max-height: calc(100dvh - 100px);
  top: max(30px, calc(32% - 65px));
  grid-auto-rows: auto;
  padding: 30px 28px;
  border-radius: 52px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9bba3 transparent;
  color: #292520;
  cursor: default;
  user-select: none;
}
.accountDialogCard {
  box-sizing: border-box;
  width: clamp(320px, calc(24vw + 44px), 378px);
  padding: 30px 28px;
  border-radius: 52px;
}
.accountPanel::after { display: none; }
.accountProviders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.accountProviders a { text-decoration: none; }
.accountProvider { gap: 8px; }
.accountProviderIcon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.accountProviderIcon--google { overflow: visible; }
.accountProviderIcon--discord { fill: #5865f2; }
.accountConnectionValue { display: grid; justify-items: end; gap: 4px; text-align: right; }
.accountConnectionValue small { color: #8a7c68; font-size: 11px; line-height: 1.5; }
.accountDialogCard { cursor: default; user-select: none; }
:is(.accountPanel,.accountDialog) .accountViewHeader { position: relative; min-height: 30px; display: grid; align-items: center; margin-bottom: 24px; }
:is(.accountPanel,.accountDialog) .accountViewHeader h2 { margin: 0; color: #292520; font-size: 22px; line-height: 30px; text-align: center; }
:is(.accountPanel,.accountDialog) .accountBack { position: absolute; left: -8px; padding: 8px; font-size: 12px; }
:is(.accountPanel,.accountDialog) .accountForm { margin: 0; gap: 14px; }
:is(.accountPanel,.accountDialog) .accountField { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; font-weight: 500; }
:is(.accountPanel,.accountDialog) .accountForm[data-email-login] .accountField { grid-template-columns: 48px minmax(0,1fr); gap: 6px; }
:is(.accountPanel,.accountDialog) .accountField > span { text-align: right; white-space: nowrap; }
:is(.accountPanel,.accountDialog) .accountForm input { box-sizing: border-box; height: 42px; min-width: 0; border: 1px solid #cfc4b2; border-radius: 10px; padding: 0 11px; background: #faf6ee; color: #292520; font: inherit; font-size: 13px; cursor: text; user-select: text; }
:is(.accountPanel,.accountDialog) .accountForm input::placeholder { color: #9b907f; }
:is(.accountPanel,.accountDialog) .accountForm input:focus { border-color: #9d8767; box-shadow: 0 0 0 3px #9d87671a; }
:is(.accountPanel,.accountDialog) .accountCodeControl { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; }
:is(.accountPanel,.accountDialog) .accountCodeButton { box-sizing: border-box; min-width: 94px; height: 42px; border: 1px solid #cfc4b2; border-radius: 10px; padding: 0 10px; color: #51493f; background: transparent; font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
:is(.accountPanel,.accountDialog) .accountCodeButton:hover { background: #eee5d6; }
:is(.accountPanel,.accountDialog) .accountLinks { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:is(.accountPanel,.accountDialog) .accountTextButton { border: 0; border-radius: 7px; padding: 5px 0; background: transparent; color: #635746; font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
:is(.accountPanel,.accountDialog) .accountTextButton:hover { color: #292520; }
:is(.accountPanel,.accountDialog) .accountConnectionValue .accountTextButton { width: auto; }
:is(.accountPanel,.accountDialog) :is(.accountPrimary,.accountGoogle,.accountSecondary) { box-sizing: border-box; display: flex; width: 100%; min-height: 42px; justify-content: center; align-items: center; padding: 9px 12px; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 650; line-height: 22px; cursor: pointer; user-select: none; transition: background-color 140ms ease, border-color 140ms ease; }
:is(.accountPanel,.accountDialog) .accountPrimary { color: #292520; border: 1px solid transparent; background: #e8dcc5; }
:is(.accountPanel,.accountDialog) .accountPrimary:hover { background: #deceb0; }
:is(.accountPanel,.accountDialog) :is(.accountGoogle,.accountSecondary) { color: #51493f; border: 1px solid #cfc4b2; background: transparent; }
:is(.accountPanel,.accountDialog) :is(.accountGoogle,.accountSecondary):hover { background: #eee5d6; }
:is(.accountPanel,.accountDialog) :is(button,a):focus-visible { outline: 2px solid #927958; outline-offset: 3px; }
:is(.accountPanel,.accountDialog) button:disabled { opacity: .55; cursor: default; }
:is(.accountPanel,.accountDialog) .accountError { min-height: 0; margin: 12px 0 0 !important; line-height: 1.6; font-size: 12px; color: #a33f43; }
:is(.accountPanel,.accountDialog) .accountError:empty { display: none; }
:is(.accountPanel,.accountDialog) .accountNotice { margin: 0 0 16px; color: #536448; font-size: 13px; line-height: 1.6; text-align: center; }
:is(.accountPanel,.accountDialog) .accountEmail { margin: 0 0 20px; color: #655b4c; font-size: 13px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; user-select: text; cursor: text; }
:is(.accountPanel,.accountDialog) .accountProfile { display: grid; gap: 14px; margin: 0; }
:is(.accountPanel,.accountDialog) .accountProfileRow { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; margin-bottom: 8px; padding: 0 0 20px; border-bottom: 1px solid #ddd2c0; font-size: 13px; }
:is(.accountPanel,.accountDialog) .accountProfileRow strong { text-align: right; font-weight: 550; overflow-wrap: anywhere; user-select: text; cursor: text; }
:is(.accountPanel,.accountDialog) .accountLocalCode { margin: 0 0 16px; padding: 10px; border-radius: 10px; background: #e8dcc5; color: #635746; font-size: 12px; text-align: center; }
:is(.accountPanel,.accountDialog) .accountLocalCode strong { display: block; margin-top: 4px; font-size: 20px; letter-spacing: .16em; user-select: text; }
:is(.accountPanel,.accountDialog) input[name=code] { text-align: center; letter-spacing: .2em; }
@media (max-width:980px) { .selectionLayer--family .selectionActions.accountPanel { top: max(30px, calc(21% - 25px)); left: 56%; transform: translateX(-50%); } }
@media (max-width:540px) {
  .selectionLayer--family .selectionActions.accountPanel,
  .accountDialogCard { width: min(342px, calc(100vw - 28px)); padding: 26px 24px; border-radius: 40px; }
  :is(.accountPanel,.accountDialog) .accountForm[data-email-login] .accountField { grid-template-columns: 46px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { :is(.accountPanel,.accountDialog) :is(.accountPrimary,.accountGoogle,.accountSecondary) { transition: none; } }

.accountDiscordBinding {display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
:is(.accountPanel,.accountDialog) .accountConnectionValue .accountTextButton[data-auth-popup="discord-bind"] {display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 14px;border:0;border-radius:999px;background:#5865f2;color:#fff;font-size:12px;font-weight:650;line-height:1;white-space:nowrap}
:is(.accountPanel,.accountDialog) .accountConnectionValue .accountTextButton[data-auth-popup="discord-bind"]:hover {background:#4752c4;color:#fff}
.accountDiscordButtonIcon {display:block;width:14px;height:14px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2NSA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQxLjIzNTEgMEM0MC42MTY0IDEuMDk4NjYgNDAuMDYwNyAyLjIzNTIgMzkuNTU1NiAzLjM5N0MzNC43NTY5IDIuNjc3MTkgMjkuODY5NyAyLjY3NzE5IDI1LjA1ODQgMy4zOTdDMjQuNTY1OCAyLjIzNTIgMjMuOTk3NiAxLjA5ODY2IDIzLjM3ODggMEMxOC44NzA1IDAuNzcwMzI0IDE0LjQ3NTkgMi4xMjE1NSAxMC4zMDg1IDQuMDI4NDFDMi4wNDk2NyAxNi4yNjUyIC0wLjE4NTUzMSAyOC4xODYzIDAuOTI1NzU1IDM5Ljk0MzJDNS43NjIzOCA0My41MTcgMTEuMTc5OSA0Ni4yNDQ3IDE2Ljk1MSA0Ny45ODc0QzE4LjI1MTcgNDYuMjQ0NyAxOS40MDA5IDQ0LjM4ODMgMjAuMzg1OSA0Mi40NTYyQzE4LjUxNjkgNDEuNzYxNiAxNi43MTExIDQwLjg5MDMgMTQuOTgxIDM5Ljg4QzE1LjQzNTYgMzkuNTUxNyAxNS44Nzc2IDM5LjIxMDcgMTYuMzA3IDM4Ljg4MjRDMjYuNDQ3NSA0My42NTU5IDM4LjE5MTcgNDMuNjU1OSA0OC4zNDQ5IDM4Ljg4MjRDNDguNzc0MiAzOS4yMzYgNDkuMjE2MiAzOS41NzcgNDkuNjcwOCAzOS44OEM0Ny45NDA4IDQwLjkwMjkgNDYuMTM0OSA0MS43NjE2IDQ0LjI1MzMgNDIuNDY4OEM0NS4yMzgzIDQ0LjQwMDkgNDYuMzg3NSA0Ni4yNTczIDQ3LjY4ODIgNDhDNTMuNDU5MyA0Ni4yNTczIDU4Ljg3NjggNDMuNTQyMiA2My43MTM0IDM5Ljk2ODRDNjUuMDI2OCAyNi4zMjk5IDYxLjQ2NTYgMTQuNTA5OSA1NC4zMDU0IDQuMDQxMDRDNTAuMTUwNyAyLjEzNDE4IDQ1Ljc1NjEgMC43ODI5NTIgNDEuMjQ3OCAwLjAyNTI1NjVMNDEuMjM1MSAwWk0yMS44MDAzIDMyLjcwNzJDMTguNjgxMSAzMi43MDcyIDE2LjA5MjMgMjkuODc4NSAxNi4wOTIzIDI2LjM4MDRDMTYuMDkyMyAyMi44ODI0IDE4LjU4MDEgMjAuMDQxIDIxLjc4NzYgMjAuMDQxQzI0Ljk5NTIgMjAuMDQxIDI3LjU0NjEgMjIuODk1IDI3LjQ5NTYgMjYuMzgwNEMyNy40NDUxIDI5Ljg2NTggMjQuOTgyNiAzMi43MDcyIDIxLjgwMDMgMzIuNzA3MlpNNDIuODM4OSAzMi43MDcyQzM5LjcwNzEgMzIuNzA3MiAzNy4xNDM2IDI5Ljg3ODUgMzcuMTQzNiAyNi4zODA0QzM3LjE0MzYgMjIuODgyNCAzOS42MzE0IDIwLjA0MSA0Mi44Mzg5IDIwLjA0MUM0Ni4wNDY1IDIwLjA0MSA0OC41ODQ4IDIyLjg5NSA0OC41MzQzIDI2LjM4MDRDNDguNDgzOCAyOS44NjU4IDQ2LjAyMTMgMzIuNzA3MiA0Mi44Mzg5IDMyLjcwNzJaIiBmaWxsPSIjNTg2NUYyIi8+Cjwvc3ZnPgo=") center/contain no-repeat;mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2NSA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQxLjIzNTEgMEM0MC42MTY0IDEuMDk4NjYgNDAuMDYwNyAyLjIzNTIgMzkuNTU1NiAzLjM5N0MzNC43NTY5IDIuNjc3MTkgMjkuODY5NyAyLjY3NzE5IDI1LjA1ODQgMy4zOTdDMjQuNTY1OCAyLjIzNTIgMjMuOTk3NiAxLjA5ODY2IDIzLjM3ODggMEMxOC44NzA1IDAuNzcwMzI0IDE0LjQ3NTkgMi4xMjE1NSAxMC4zMDg1IDQuMDI4NDFDMi4wNDk2NyAxNi4yNjUyIC0wLjE4NTUzMSAyOC4xODYzIDAuOTI1NzU1IDM5Ljk0MzJDNS43NjIzOCA0My41MTcgMTEuMTc5OSA0Ni4yNDQ3IDE2Ljk1MSA0Ny45ODc0QzE4LjI1MTcgNDYuMjQ0NyAxOS40MDA5IDQ0LjM4ODMgMjAuMzg1OSA0Mi40NTYyQzE4LjUxNjkgNDEuNzYxNiAxNi43MTExIDQwLjg5MDMgMTQuOTgxIDM5Ljg4QzE1LjQzNTYgMzkuNTUxNyAxNS44Nzc2IDM5LjIxMDcgMTYuMzA3IDM4Ljg4MjRDMjYuNDQ3NSA0My42NTU5IDM4LjE5MTcgNDMuNjU1OSA0OC4zNDQ5IDM4Ljg4MjRDNDguNzc0MiAzOS4yMzYgNDkuMjE2MiAzOS41NzcgNDkuNjcwOCAzOS44OEM0Ny45NDA4IDQwLjkwMjkgNDYuMTM0OSA0MS43NjE2IDQ0LjI1MzMgNDIuNDY4OEM0NS4yMzgzIDQ0LjQwMDkgNDYuMzg3NSA0Ni4yNTczIDQ3LjY4ODIgNDhDNTMuNDU5MyA0Ni4yNTczIDU4Ljg3NjggNDMuNTQyMiA2My43MTM0IDM5Ljk2ODRDNjUuMDI2OCAyNi4zMjk5IDYxLjQ2NTYgMTQuNTA5OSA1NC4zMDU0IDQuMDQxMDRDNTAuMTUwNyAyLjEzNDE4IDQ1Ljc1NjEgMC43ODI5NTIgNDEuMjQ3OCAwLjAyNTI1NjVMNDEuMjM1MSAwWk0yMS44MDAzIDMyLjcwNzJDMTguNjgxMSAzMi43MDcyIDE2LjA5MjMgMjkuODc4NSAxNi4wOTIzIDI2LjM4MDRDMTYuMDkyMyAyMi44ODI0IDE4LjU4MDEgMjAuMDQxIDIxLjc4NzYgMjAuMDQxQzI0Ljk5NTIgMjAuMDQxIDI3LjU0NjEgMjIuODk1IDI3LjQ5NTYgMjYuMzgwNEMyNy40NDUxIDI5Ljg2NTggMjQuOTgyNiAzMi43MDcyIDIxLjgwMDMgMzIuNzA3MlpNNDIuODM4OSAzMi43MDcyQzM5LjcwNzEgMzIuNzA3MiAzNy4xNDM2IDI5Ljg3ODUgMzcuMTQzNiAyNi4zODA0QzM3LjE0MzYgMjIuODgyNCAzOS42MzE0IDIwLjA0MSA0Mi44Mzg5IDIwLjA0MUM0Ni4wNDY1IDIwLjA0MSA0OC41ODQ4IDIyLjg5NSA0OC41MzQzIDI2LjM4MDRDNDguNDgzOCAyOS44NjU4IDQ2LjAyMTMgMzIuNzA3MiA0Mi44Mzg5IDMyLjcwNzJaIiBmaWxsPSIjNTg2NUYyIi8+Cjwvc3ZnPgo=") center/contain no-repeat}
