.trainer-avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: url('./assets/avatars/trainer-options-v1.webp');
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-position: 0% 50%;
  vertical-align: middle;
  pointer-events: none;
}
.trainer-avatar[data-avatar-id="hood"] { background-position-x: 50%; }
.trainer-avatar[data-avatar-id="explorer"] { background-position-x: 100%; }
.account-page .account-trainer-identity { display: flex; align-items: center; gap: 16px; }
.account-page #account-trainer-avatar { width: 80px; height: 80px; }
.account-page .account-trainer-identity > div { min-width: 0; overflow-wrap: anywhere; }
.account-page #account-avatar-settings { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.account-page #account-avatar-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-page #account-avatar-options button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 4px;
  border: 2px solid var(--lcd-line);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--lcd-shade);
  font-family: var(--lcd-font);
  color: var(--lcd-ink);
  background: var(--lcd-light);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.account-page #account-avatar-options .trainer-avatar { width: min(100%, 108px); height: auto; aspect-ratio: 1; }
.account-page #account-avatar-options button[aria-pressed="true"] { border-color: var(--lcd-accent); box-shadow: inset 0 0 0 2px var(--lcd-accent); background: var(--lcd-shade); }
.account-page #account-avatar-options button[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 4px; right: 6px; color: var(--lcd-accent); font-weight: 900;
}
.account-page #account-avatar-options button:focus-visible { outline: 3px solid #294e44; outline-offset: 3px; }
.portrait-caption .portrait-trainer { display: flex; align-items: center; gap: 7px; }
.portrait-caption .portrait-trainer strong { min-width: 0; overflow-wrap: anywhere; }
.portrait-caption .portrait-trainer .trainer-avatar { width: 30px; height: 30px; }
.chat-message .trainer-avatar { width: 25px; height: 25px; margin-right: 5px; }
@media (max-width: 380px) {
  .account-page #account-avatar-options { gap: 5px; }
  .account-page #account-avatar-options button { font-size: 10px; }
  .account-page #account-trainer-avatar { width: 64px; height: 64px; }
}
@media (forced-colors: active) {
  .account-page #account-avatar-options button[aria-pressed="true"] { outline: 3px solid Highlight; }
}