/* Animated avatars (assets/js/avatars.js). Slow loops; reduced motion = still frame. */
.av{display:block;width:100%;height:100%;border-radius:50%}
.av *{transform-box:fill-box}
.av-drift{animation:avDrift 14s ease-in-out infinite alternate}
.av-sway{transform-origin:50% 8%;animation:avSway 4.5s ease-in-out infinite alternate}
.av-tw{animation:avTw 3.2s ease-in-out infinite}
.av-roll{animation:avRoll 6s linear infinite}.av-r2{animation-duration:8s}.av-r3{animation-duration:10s}
.av-bob{transform-origin:50% 100%;animation:avBob 3.6s ease-in-out infinite}
.av-flame{transform-origin:50% 100%;animation:avFlick 1.3s ease-in-out infinite alternate}
.av-glow{animation:avGlow 2.4s ease-in-out infinite alternate}
.av-sweep{transform-origin:50% 50%;transform-box:view-box;animation:avSweep 6s ease-in-out infinite alternate}
.av-sweep path{transform-origin:32px 17px}
.av-breathe{transform-origin:50% 100%;animation:avBreathe 4s ease-in-out infinite}
.av-z{animation:avZ 4s ease-in-out infinite}
@keyframes avDrift{to{transform:translateX(26px)}}
@keyframes avSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes avTw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes avRoll{to{transform:translateX(32px)}}
@keyframes avBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(2.5px) rotate(2.5deg)}}
@keyframes avFlick{0%{transform:scale(1,1)}40%{transform:scale(.92,1.08)}100%{transform:scale(1.06,.94)}}
@keyframes avGlow{from{opacity:.55}to{opacity:1}}
@keyframes avSweep{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes avBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
@keyframes avZ{0%{opacity:0;transform:translate(0,0)}40%{opacity:.9}100%{opacity:0;transform:translate(4px,-8px)}}
@media (prefers-reduced-motion:reduce){.av *{animation:none!important}.av-tw{opacity:.85}}
/* account header, picker, Top 500 rows */
.ah-av.ah-pic{padding:3px!important;border-radius:50%!important;background:linear-gradient(160deg,var(--lg-gold,#f2c14e),var(--lg-brass-d,#8f3a1c))!important;box-shadow:0 2px 8px rgba(0,0,0,.45)!important;width:64px;height:64px}
.av-panel{display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:10px 28px;align-items:start}
.av-pick{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.av-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 9px;border-radius:4px;background:rgba(0,0,0,.18);border:1px solid rgba(var(--lg-brass-rgb,208,104,58),.22);cursor:pointer;text-decoration:none;color:var(--lg-ink,#f5ecd9);text-align:center}
.av-opt input{position:absolute;opacity:0;pointer-events:none}
.av-ring{display:block;width:64px;height:64px;padding:3px;border-radius:50%;background:rgba(245,230,200,.14)}
.av-opt:hover{border-color:rgba(242,193,78,.55)}
.av-opt:has(input:checked){border-color:var(--lg-gold,#f2c14e);background:rgba(242,193,78,.1);box-shadow:inset 0 -3px 0 var(--lg-gold,#f2c14e)}
.av-opt:has(input:checked) .av-ring{background:linear-gradient(160deg,#f2c14e,#8f3a1c)}
.av-opt:has(input:focus-visible){outline:3px solid var(--lg-gold,#f2c14e);outline-offset:2px}
.av-n{font:600 13px/1.25 var(--text)}
.av-p{font:600 12px/1 var(--text);color:var(--lg-gold,#f2c14e)}
.av-locked .av-ring{opacity:.55;filter:saturate(.6)}
.av-locked .av-n{color:var(--lg-ink-m,#b9cdc9)}
.lb-av{display:inline-block;width:28px;height:28px;margin-right:10px;vertical-align:middle;border-radius:50%;padding:2px;background:linear-gradient(160deg,#f2c14e,#8f3a1c)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:860px){.av-panel{grid-template-columns:1fr}.av-pick{grid-template-columns:repeat(4,1fr);gap:8px}.av-ring{width:56px;height:56px}.av-n{font-size:12px}}
@media (max-width:420px){.av-pick{grid-template-columns:repeat(3,1fr)}}