/* AtomicCTF — Default Avatars
 * Sticker treatment: cream margin, midnight ink, halftone field, paper grain.
 * Five characters: trefoil, tinker, sparky, geiger, beaker.
 *
 * USAGE
 * -----
 *   <link rel="stylesheet" href="/styles/colors_and_type.css">
 *   <link rel="stylesheet" href="/avatars/avatars.css">
 *   <script src="/avatars/avatars.js" defer></script>
 *
 *   <div class="ac-avatar" data-user-id="42"></div>
 *   <div class="ac-avatar ac-avatar--sm" data-user-id="42"></div>
 *   <div class="ac-avatar ac-avatar--xs" data-user-id="42" data-character="trefoil"></div>
 *
 * The script reads data-user-id and data-character (optional) and renders the
 * sticker. If data-character is omitted, the character is picked deterministically
 * from the user-id hash.
 */

.ac-avatar {
  --av-size: 96px;
  width: var(--av-size);
  height: var(--av-size);
  border-radius: 999px;
  border: 2.5px solid var(--ac-midnight-2, #0F2230);
  box-shadow: 5px 5px 0 var(--ac-midnight-2, #0F2230);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.ac-avatar--xs { --av-size: 32px; box-shadow: 1.5px 1.5px 0 var(--ac-midnight-2, #0F2230); border-width: 2px; }
.ac-avatar--sm { --av-size: 48px; box-shadow: 2px 2px 0 var(--ac-midnight-2, #0F2230); border-width: 2px; }
.ac-avatar--lg { --av-size: 120px; }

.ac-avatar__halftone {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.16;
  background-image: radial-gradient(circle, #0F2230 30%, transparent 31%);
  background-size: 4px 4px;
  pointer-events: none;
}
.ac-avatar__halftone--lt   { opacity: 0.10; }
.ac-avatar__halftone--warm { background-image: radial-gradient(circle, #F5C24A 30%, transparent 31%); opacity: 0.10; }

.ac-avatar svg {
  width: 74%; height: 74%;
  position: relative;
  z-index: 2;
}
.ac-avatar--lg svg { filter: url(#ac-avatar-rough); }

/* SVG filter defs are injected once into the document by avatars.js */