/* Shared decal rendering rules — the ONLY place that decides whether an
   equipped item's graphic overlay ("decal") mirrors with the avatar's
   facing or stays visually forward-facing, and where its position offset
   is applied. Loaded by BOTH index.html (the live game) and
   admin-tools.html (the live positioning editor's preview stage), so the
   two can never disagree with each other again — do not re-implement this
   logic separately in either place.

   Selectors intentionally key off a bare .is-facing-right ancestor class
   rather than requiring .world-avatar.is-facing-right, so the admin
   editor's preview stage can reuse these exact rules just by toggling the
   same class name on its own mirror container, without also having to
   carry the full .world-avatar class (which brings a lot of avatar-body
   positioning that has no place in a simple preview stage). is-facing-right
   is never used on anything except a .world-avatar element in the game, so
   this doesn't widen what actually matches there.

   --decal-offset-x / --decal-offset-y / --decal-scale / --decal-rotation are
   set inline per layer (see buildWearableLayerMarkup in leaderboard.js, and
   the admin editor's renderPositionEditor) and default to 0px/1/0deg via the
   var() fallback, so a layer with no saved transform renders exactly where
   it always has — an item can have multiple such layers (see
   wearable_graphic_layers in supabase/schema.sql), each painted as its own
   sibling element in array order. */

.profile-character-layer--wearable-decal {
  transform: translate3d(var(--decal-offset-x, 0px), var(--decal-offset-y, 0px), 0) rotate(var(--decal-rotation, 0deg)) scale(var(--decal-scale, 1));
  transform-origin: center;
}

.is-facing-right .profile-character-layer--decal-no-flip {
  transform: translate3d(var(--decal-offset-x, 0px), var(--decal-offset-y, 0px), 0) rotate(var(--decal-rotation, 0deg)) scale(var(--decal-scale, 1)) scaleX(-1);
  transform-origin: center;
}

.is-facing-right .profile-character-layer--shirt-decal.profile-character-layer--decal-no-flip {
  transform: translate3d(var(--decal-offset-x, 0px), var(--decal-offset-y, 0px), 0) rotate(var(--decal-rotation, 0deg)) scale(var(--decal-scale, 1)) translateX(-7%) scaleX(-1);
}