/* Avatars from cards (app/avatars.py, card rules 1.41): the round picture beside a member's name, their initial
   until they pick a card. Rings by edition; a loop fades in over the still when it plays (static/avatars.js).
   Theme tokens only, so light, dark and the holiday looks all work. */
.mav { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle; border-radius: 50%;
  background: var(--surface-2); color: var(--on-accent); font-weight: 800; line-height: 1; isolation: isolate;
  width: 28px; height: 28px; font-size: .95em; text-decoration: none; }
.mav img, .mav video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mav video { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.mav.mav-on video { opacity: 1; }
.mav-x img { display: none; }
.mav-i { background: var(--accent); color: var(--on-accent); }
.mav-xs { width: 22px; height: 22px; font-size: .68em; }
.mav-tab { width: 26px; height: 26px; font-size: .8em; }
.mav-sm { width: 28px; height: 28px; font-size: .9em; }
.mav-ph { width: 40px; height: 40px; font-size: 1.05em; }
.mav-md { width: 48px; height: 48px; font-size: 1.3em; }
.mav-lg { width: 64px; height: 64px; font-size: 1.9em; }
.mav-xl { width: 96px; height: 96px; font-size: 2.6em; }
.mav-fill { width: 100%; height: 100%; font-size: 1em; }

/* edition rings, in the card's own colors (cards.css) */
.mav.ed-gold { box-shadow: 0 0 0 2px #e8bd4a, 0 0 8px rgba(246, 200, 90, .55); }
.mav.ed-platinum { box-shadow: 0 0 0 2px #dfe9f7, 0 0 0 3px #8aa4c8, 0 0 9px rgba(170, 200, 255, .6); }
.mav.ed-velvet { box-shadow: 0 0 0 2px #f2d47a, 0 0 0 4px #7a1030, 0 0 10px rgba(122, 16, 48, .55); }
.mav.ed-expert { box-shadow: 0 0 0 2px #e8c75a, 0 0 0 4px #1f6b45, 0 0 8px rgba(232, 199, 90, .45); }
.mav.ed-treasure { box-shadow: 0 0 0 2px #fff1b8, 0 0 12px rgba(255, 210, 110, .85), 0 0 22px rgba(214, 52, 74, .35); }
.mav-xs.ed-gold, .mav-xs.ed-platinum, .mav-xs.ed-velvet, .mav-xs.ed-expert, .mav-xs.ed-treasure,
.mav-tab[class*="ed-"], .mav-sm[class*="ed-"] { box-shadow: 0 0 0 1.5px var(--mav-ring, #e8bd4a); }
.mav.ed-platinum { --mav-ring: #dfe9f7; } .mav.ed-velvet { --mav-ring: #f2d47a; } .mav.ed-expert { --mav-ring: #3c9a6a; } .mav.ed-treasure { --mav-ring: #fff1b8; }

.mav-cap { display: block; margin: 4px 0 0; font-style: italic; font-size: .9em; color: var(--muted); }

/* in place of the old initials */
.account-menu summary .mav { margin: 0; }
.ph-tool.ph-avatar .mav-ph { box-shadow: none; }
.ph-tool.ph-avatar.has-av { background: transparent; }
.ph-tool.ph-avatar.has-av .mav-ph[class*="ed-"] { box-shadow: 0 0 0 2px var(--mav-ring, #e8bd4a); }
.ph-tabs .mav-tab { margin: 0; }
.ph-tabs a.on .mav-tab { box-shadow: 0 0 0 2px var(--accent-text, var(--accent)); }
.so-av.has-av { background: transparent; padding: 0; overflow: visible; }
.so-av .mav-fill { font-size: inherit; }
a.mav-link { display: inline-flex; align-items: center; gap: 6px; }
a.ph-me-av, a.ph-me-av:visited { color: var(--on-accent); text-decoration: none; flex: none; }
a.ph-me-av.has-av { background: transparent; }
.pf-av { flex: none; display: grid; }
.pf-av a { display: grid; border-radius: 50%; }
.pf-av a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) { .pf-av .mav-lg { width: 56px; height: 56px; } }
.card-theme h1 .mav, .ft-body h1 .mav { margin: 0 6px 0 0; vertical-align: -.25em; }
.mk-by { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-weight: 700; }
.so-from .mav { vertical-align: -6px; }
.lb-who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }

/* the picker (/me/avatar) */
.avp { max-width: 760px; margin: 0 auto; }
.avp-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; }
.avp-head h1 { margin: 0; }
.avp-head p { margin: 4px 0 0; color: var(--muted); }
.avp-now { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; text-align: center; }
.avp-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding: 8px 0; }
.avp-tools input[type=search] { flex: 1 1 200px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; }
.avp-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.avp-btn.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.avp-h { margin: 18px 0 8px; font-size: .78em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.avp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.avp-grid button { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px;
  border: 1px solid transparent; border-radius: 16px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.avp-grid button:hover, .avp-grid button:focus-visible { background: var(--surface-2); }
.avp-grid button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.avp-grid .mav { width: 64px; height: 64px; }
.avp-name { font-size: .82em; font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; overflow-wrap: anywhere; }
.avp-sub { font-size: .72em; color: var(--muted); text-align: center; line-height: 1.2; }
.avp-moves { font-size: .68em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.avp-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 16px; color: var(--muted); }
.avp-toast { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); margin: 0 0 8px; }
@media (max-width: 640px) {
  .avp-head { gap: 12px; }
  .avp-head h1 { font-size: 1.5em; }
  .avp-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .avp-grid .mav { width: 56px; height: 56px; }
}