.rf-avatar{display:inline-block;width:44px;height:44px;flex-shrink:0;border-radius:50%;background-image:url('assets/characters-v1.webp');background-size:300% 200%;background-repeat:no-repeat;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.rf-avatar-0{background-position:0 0}.rf-avatar-1{background-position:50% 0}.rf-avatar-2{background-position:100% 0}.rf-avatar-3{background-position:0 100%}.rf-avatar-4{background-position:50% 100%}.rf-avatar-5{background-position:100% 100%}
.rf-avatar-empty{background-image:none;background-color:#e4ece8;color:#234137;display:inline-grid;place-items:center;font-weight:800}
.avatar-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:430px;margin:24px auto}
.avatar-choice{position:relative;display:grid;place-items:center;border:3px solid transparent!important;background:transparent!important;border-radius:22px;padding:10px!important;min-height:44px;cursor:pointer;transition:transform .15s,border-color .15s}
.avatar-choice .rf-avatar{width:100%;height:auto;aspect-ratio:1;max-width:108px}.avatar-choice:hover{transform:translateY(-3px)}.avatar-choice[aria-pressed=true]{border-color:#d99a00!important;background:rgba(255,202,48,.12)!important}.avatar-choice:focus-visible{outline:3px solid #18796b;outline-offset:4px}
.avatar-check{display:none;position:absolute;right:3px;bottom:3px;width:25px;height:25px;border-radius:50%;background:#ffca30;color:#24362b;font-weight:900;place-items:center}.avatar-choice[aria-pressed=true] .avatar-check{display:grid}
.avatar-settings-heading{display:flex;align-items:center;gap:18px}.avatar-settings-heading .rf-avatar{width:72px;height:72px}.avatar-settings-heading h2{margin:0}.avatar-settings-heading p,.avatar-save-note{font-size:14px;line-height:1.5}.avatar-settings{margin:20px 0}.avatar-settings .avatar-grid{margin-left:0}
.nav #open-account .rf-avatar{width:32px;height:32px}.avatar-welcome{display:flex;justify-content:center;gap:12px;margin:12px 0 24px}.avatar-welcome .rf-avatar{width:94px;height:94px}.avatar-ready .rf-avatar{width:110px;height:110px;margin:10px 0 18px}.league .rf-avatar{width:42px;height:42px}
@media(max-width:420px){.avatar-grid{gap:8px}.avatar-choice{padding:7px!important}.avatar-welcome .rf-avatar{width:78px;height:78px}}
@media(prefers-reduced-motion:reduce){.avatar-choice{transition:none}.avatar-choice:hover{transform:none}}