.avatar-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
}

.avatar-option,.avatar-choice{
  position:relative;
  isolation:isolate;
  aspect-ratio:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.065);
  color:var(--text);
  font-size:clamp(24px,7vw,31px);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,filter .16s ease;
}

.avatar-option:hover,.avatar-choice:hover{
  transform:translateY(-2px);
  border-color:rgba(255,212,120,.42);
  background:rgba(255,255,255,.1);
}

.avatar-option.selected,.avatar-choice.selected{
  transform:translateY(-2px) scale(1.075);
  border:2px solid var(--gold);
  background:linear-gradient(145deg,rgba(255,212,120,.26),rgba(255,91,162,.12));
  box-shadow:0 0 0 3px rgba(255,212,120,.13),0 8px 24px rgba(255,181,91,.2),inset 0 0 20px rgba(255,255,255,.055);
  filter:saturate(1.12) brightness(1.08);
  z-index:2;
}

.avatar-option.selected::after,.avatar-choice.selected::after{
  content:'✓';
  position:absolute;
  right:-5px;
  top:-6px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--coral));
  color:#281421;
  border:2px solid #241329;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  font-size:12px;
  font-weight:950;
  line-height:1;
}

.avatar-option:focus-visible,.avatar-choice:focus-visible{
  outline:3px solid rgba(255,212,120,.45);
  outline-offset:3px;
}

@media(max-width:390px){
  .avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .avatar-option,.avatar-choice{border-radius:14px;font-size:25px}
}

@media(prefers-reduced-motion:reduce){
  .avatar-option,.avatar-choice{transition:none}
  .avatar-option.selected,.avatar-choice.selected{transform:none}
}