/* ============================================================================
   Rank avatar frames — "halo bleed"
   ----------------------------------------------------------------------------
   The frame art is wider and taller than the avatar it sits on, so it bleeds
   past the circle rather than hugging it like a ring. Geometry is per-file
   because the source PNGs are not the same aspect:

     apex / mythic   586 x 519  ->  162.3% x 143.8%, origin 49.8 / 50
     transcendent    603 x 513  ->  166.6% x 141.7%, origin 48.8 / 50.6

   Only these three tiers have circular frame art. Evolved / Awakened /
   Ascended intentionally render no overlay — they fall through to whatever
   the surface already draws. (They still drive the ProfileModal border frame,
   which does have art for all six tiers.)

   Usage: put .rank-frame-host on the element wrapping the <img>, then drop a
   <RankAvatarFrame Tier="..." /> inside it.
   ========================================================================== */

.rank-frame-host {
    position: relative;
    border-radius: 50%;
}

.rank-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

.rank-frame.tier-apex,
.rank-frame.tier-mythic {
    width: 162.3%;
    height: 143.8%;
    transform: translate(-49.8%, -50%);
}

.rank-frame.tier-transcendent {
    width: 166.6%;
    height: 141.7%;
    transform: translate(-48.8%, -50.6%);
}

.rank-frame.tier-apex {
    background-image: url("https://images.neurokaraoke.com/image/cards/apex-frame-avatar.png");
}

.rank-frame.tier-mythic {
    background-image: url("https://images.neurokaraoke.com/image/cards/mythic-frame-avatar.png");
}

.rank-frame.tier-transcendent {
    background-image: url("https://images.neurokaraoke.com/image/cards/transcendent-frame-avatar.png");
}

/* When a frame is present it *is* the ring — drop whatever ring the surface
   would otherwise draw so the two don't fight each other. */
.rank-frame-host.has-rank-frame > .avatar-ring {
    display: none;
}