/* Brand PNGs remain visible without CSS masks or filter support. */
:root .membership-badge-symbol,
:root .miquan-gold-logo,
:root .desktop-member-logo,
:root .sc-logo,
:root .campaign-gold-logo,
:root .campaign-label-logo {
  position: relative;
  overflow: hidden;
  background: url('/img/miquan-logo.png') center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* Move the original PNG outside the clipped icon box and move its zero-blur
   shadow back by the same amount. This preserves the inherited theme color
   and transparent silhouette without relying on CSS masking. */
@supports (filter: drop-shadow(1px 0 0 currentColor)) {
  :root .membership-badge-symbol,
  :root .miquan-gold-logo,
  :root .desktop-member-logo,
  :root .sc-logo,
  :root .campaign-gold-logo,
  :root .campaign-label-logo {
    background-image: none;
  }
  :root .membership-badge-symbol::before,
  :root .miquan-gold-logo::before,
  :root .desktop-member-logo::before,
  :root .sc-logo::before,
  :root .campaign-gold-logo::before,
  :root .campaign-label-logo::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    color: inherit;
    pointer-events: none;
    background: url('/img/miquan-logo.png') center / contain no-repeat;
    transform: translateX(-256px);
    filter: drop-shadow(256px 0 0 currentColor);
  }
}

/* Banner labels have a dedicated green by day and inherit pink at night. */
:root .campaign-label-logo { color: #00c6a2; filter: none; }
:root[data-theme="dark"] .campaign-label-logo { color: inherit; filter: none; }