/* ============================================================
   v0.4.65: purchasable avatar cutout shapes (.shape-<id>). One
   mask per shape via the --shape-mask token; ids match the
   seeded AvatarShape catalog. A shape overrides the frame's own
   border-radius silhouette on every avatar surface.
   MUST stay after the .frame-* blocks: the shape rules win ties
   against frame avatar rules by file order.

   v0.9.8: switched from clip-path: polygon(...) to mask-image with an
   inline SVG data-URI per shape (wwwroot/styles/<id>/style.css). polygon()
   is straight edges only - it cannot round a corner, which is why the star
   in particular used to read as cut with a hatchet. clip-path: path(...)
   was the other candidate, but its coordinates are CSS pixels fixed to one
   design size; this token has to look identical on a 26px topbar chip, a
   46px store swatch and an 88px profile/share-card avatar, so the shape
   needs the SAME percentage-of-box scaling clip-path: polygon() had. An
   SVG mask sized with mask-size: 100% 100% keeps that: the SVG's own
   viewBox (0 0 100 100) scales to whatever box it is painted into, same
   as a percentage polygon did, while the path data inside it is free to
   curve. fill: white in every shape's SVG is deliberate, not decorative -
   mask-mode defaults to alpha for a plain image source, but white is also
   maximum luminance, so the shape reads as "visible" under either
   interpretation instead of only one.
   ============================================================ */

/* Shaped profile avatar. mask-image kills borders and would also clip the -8px
   edit/clear badges if applied to the container, so the shape is built from two
   masked LAYERS inside an unclipped container: a ::before ring plate in the theme
   ring colour, and the photo/initial inset by 3px and masked to the same shape -
   the inset difference reads as a uniform ring. Frame decor (gradient borders,
   halos, bezels) is switched off while a shape is equipped. */
.profile-card .profile-avatar[class*="shape-"] {
  border: none;
  outline: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.profile-card .profile-avatar[class*="shape-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--profile-ring, var(--accent, #7c3aed));
  -webkit-mask-image: var(--shape-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--shape-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  border: none;
  border-radius: 0;
  filter: none;
  transform: none;
  animation: none;
}
.profile-card .profile-avatar[class*="shape-"] .profile-avatar-img,
.profile-card .profile-avatar[class*="shape-"] .profile-avatar-initial {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  -webkit-mask-image: var(--shape-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--shape-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  border-radius: 0;
  z-index: 1;
}
.profile-card .profile-avatar[class*="shape-"] .profile-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Topbar chip: tiny, no outside badges - mask the container directly. */
.avatar[class*="shape-"] {
  border-radius: 0;
  -webkit-mask-image: var(--shape-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--shape-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Store page shape tiles: a mini preview plate cut to the shape. */
.shape-preview {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--chronos-violet), var(--chronos-lavender));
  -webkit-mask-image: var(--shape-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--shape-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}