.kid-avatar {
  --avatar-column: 0;
  --avatar-row: 0;
  display: inline-block;
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 9999px;
  background-image: url("../images/characters/kid-avatar-sprite-v1.1c967845737f.png");
  background-repeat: no-repeat;
  background-size: 500% 400%;
  background-position: calc(var(--avatar-column) * 25%) calc(var(--avatar-row) * 33.333333%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 4px 12px rgba(8,43,99,.16);
}
.kid-avatar-sm { width: 2.75rem; height: 2.75rem; }
.kid-avatar-lg { width: 6rem; height: 6rem; }
.kid-avatar-xl { width: 8rem; height: 8rem; }
.avatar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
@media (min-width:640px) { .avatar-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:768px) { .avatar-grid { grid-template-columns:repeat(10,minmax(0,1fr)); } }
.avatar-01 { --avatar-column:0; --avatar-row:0; } .avatar-02 { --avatar-column:1; --avatar-row:0; }
.avatar-03 { --avatar-column:2; --avatar-row:0; } .avatar-04 { --avatar-column:3; --avatar-row:0; }
.avatar-05 { --avatar-column:4; --avatar-row:0; } .avatar-06 { --avatar-column:0; --avatar-row:1; }
.avatar-07 { --avatar-column:1; --avatar-row:1; } .avatar-08 { --avatar-column:2; --avatar-row:1; }
.avatar-09 { --avatar-column:3; --avatar-row:1; } .avatar-10 { --avatar-column:4; --avatar-row:1; }
.avatar-11 { --avatar-column:0; --avatar-row:2; } .avatar-12 { --avatar-column:1; --avatar-row:2; }
.avatar-13 { --avatar-column:2; --avatar-row:2; } .avatar-14 { --avatar-column:3; --avatar-row:2; }
.avatar-15 { --avatar-column:4; --avatar-row:2; } .avatar-16 { --avatar-column:0; --avatar-row:3; }
.avatar-17 { --avatar-column:1; --avatar-row:3; } .avatar-18 { --avatar-column:2; --avatar-row:3; }
.avatar-19 { --avatar-column:3; --avatar-row:3; } .avatar-20 { --avatar-column:4; --avatar-row:3; }
.avatar-choice-card:has(.avatar-choice-input:checked) {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}