/* ETP Drop 01 · live wearable renderer */
.avatar-frame,
.mini-avatar {
  position: relative;
}

.etp-wearable-overlay {
  position: absolute;
  left: var(--wear-x, 0%);
  top: var(--wear-y, 0%);
  width: var(--wear-w, 100%);
  height: auto;
  display: block;
  transform: rotate(var(--wear-r, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  transition: opacity .18s ease, transform .18s ease;
}

.etp-wearable-audio {
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.28));
}

.etp-wearable-headwear {
  z-index: 3;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.24));
}

.etp-wearable-eyewear {
  z-index: 4;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.24));
}

.mini-avatar .etp-wearable-overlay,
.etp-leaderboard-avatar-wrap .etp-wearable-overlay {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.etp-leaderboard-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
  overflow: hidden;
  border-radius: 13px;
  background: var(--surface-2);
  flex: 0 0 42px;
}

.etp-leaderboard-avatar-wrap .leaderboard-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.etp-leaderboard-avatar-wrap .etp-wearable-audio {
  display: none;
}

@media (max-width: 420px) {
  .etp-wearable-overlay {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
  }
}

@media (prefers-reduced-motion: reduce) {
  .etp-wearable-overlay {
    transition: none;
  }
}