/*
 * Avatar Badge Frame
 * Renders a gold/silver/bronze ring around the avatar for top-3 players.
 *
 * Visual hierarchy is intentional:
 *   GOLD   (top 1) → MAX decoration: thicker ring, multi-stop gradient,
 *                    fast spin, layered aura, wrapper pulse, crown above
 *                    the medal, gradient-filled medal.
 *   SILVER (top 2) → MODERATE: standard ring, standard glow, plain medal.
 *   BRONZE (top 3) → MINIMAL: thin static ring (no rotation), faint glow,
 *                    smaller medal.
 *
 * Usage: add `avatar-frame avatar-frame--gold|silver|bronze` to the wrapper
 * element that contains the avatar <img>. Add `avatar-frame--small` for
 * compact in-lobby tiles. Falls back gracefully if not applied.
 */

/* ============================================================
   BASE
   ============================================================ */
.avatar-frame {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    padding: var(--frame-padding, 4px);
    background: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    line-height: 0;
}

.avatar-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: var(--frame-ring-width, 3px);
    background: var(--frame-ring, conic-gradient(from 0deg, #888, #444, #888));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: avatarFrameSpin var(--frame-spin-duration, 6s) linear infinite;
}

.avatar-frame::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-shadow: var(--frame-aura, 0 0 14px rgba(255, 255, 255, 0.3));
    pointer-events: none;
}

.avatar-frame > img,
.avatar-frame > .avatar,
.avatar-frame > picture > img {
    border-radius: 50%;
    display: block;
}

/* ============================================================
   MEDAL (shared base — per-tier overrides below)
   ============================================================ */
.avatar-frame .badge-medal {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--frame-end, #888);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1a0f1a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    line-height: 1;
    z-index: 2;
}

/* ============================================================
   GOLD — top 1, MAX decoration
   ============================================================ */
.avatar-frame--gold {
    --frame-padding: 5px;
    --frame-ring-width: 4px;
    --frame-spin-duration: 4s;
    --frame-start: #fffbe6;
    --frame-end: #f7c948;
    --frame-ring: conic-gradient(from 0deg,
        #fffbe6 0%, #ffe066 18%, #ffcd2a 38%,
        #d4a017 55%, #ffcd2a 72%, #fff3b0 100%);
    --frame-aura:
        0 0 6px rgba(255, 235, 130, 0.9),
        0 0 22px rgba(247, 201, 72, 0.6),
        0 0 42px rgba(247, 201, 72, 0.3);
    animation: avatarGoldPulse 2.6s ease-in-out infinite;
}

.avatar-frame--gold .badge-medal {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
    background: radial-gradient(circle at 30% 30%,
        #fffbe6 0%, #ffd966 35%, #c8910b 100%);
    color: #4a2e00;
    border-color: #2a1a05;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(247, 201, 72, 0.65),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.7);
}

/* Bobbing crown above the gold medal */
.avatar-frame--gold .badge-medal::before {
    content: '👑';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
    animation: avatarCrownBob 2.6s ease-in-out infinite;
    pointer-events: none;
}

/* Subtle highlight glint inside the gold avatar image */
.avatar-frame--gold > img,
.avatar-frame--gold > .avatar,
.avatar-frame--gold > picture > img {
    box-shadow: inset 8px 8px 14px -8px rgba(255, 245, 200, 0.55);
}

/* ============================================================
   SILVER — top 2, MODERATE
   ============================================================ */
.avatar-frame--silver {
    --frame-padding: 4px;
    --frame-ring-width: 3px;
    --frame-spin-duration: 6s;
    --frame-start: #f6f6f6;
    --frame-end: #b0b0b0;
    --frame-ring: conic-gradient(from 0deg,
        #f6f6f6, #d8d8d8, #a8a8a8, #d8d8d8, #f6f6f6);
    --frame-aura: 0 0 12px rgba(220, 220, 220, 0.45);
}

.avatar-frame--silver .badge-medal {
    background: linear-gradient(145deg, #f0f0f0, #b8b8b8);
    color: #2a2a2a;
}

/* ============================================================
   BRONZE — top 3, MINIMAL (static ring, smaller medal)
   ============================================================ */
.avatar-frame--bronze {
    --frame-padding: 3px;
    --frame-ring-width: 2px;
    --frame-start: #d9a067;
    --frame-end: #a85f1e;
    --frame-ring: linear-gradient(135deg, #d9a067 0%, #b87333 60%, #a85f1e 100%);
    --frame-aura: 0 0 6px rgba(205, 127, 50, 0.3);
}

/* Bronze ring is static — override the spin animation entirely */
.avatar-frame--bronze::before {
    animation: none;
}

.avatar-frame--bronze .badge-medal {
    width: 22px;
    height: 22px;
    font-size: 0.66rem;
    background: linear-gradient(145deg, #d9a067, #a85f1e);
    color: #2a1505;
}

/* ============================================================
   COMPACT VARIANT (in-lobby tiles, ~40-60px avatars)
   ============================================================ */
.avatar-frame--small {
    --frame-padding: 3px;
    --frame-ring-width: 2px;
}
.avatar-frame--small .badge-medal {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    border-width: 1.5px;
    bottom: -1px;
    right: -1px;
}

/* Gold keeps its extra weight even in the small variant */
.avatar-frame--small.avatar-frame--gold {
    --frame-padding: 4px;
    --frame-ring-width: 3px;
}
.avatar-frame--small.avatar-frame--gold .badge-medal {
    width: 20px;
    height: 20px;
    font-size: 0.62rem;
}
.avatar-frame--small.avatar-frame--gold .badge-medal::before {
    font-size: 0.8rem;
    top: -11px;
}

.avatar-frame--small.avatar-frame--bronze .badge-medal {
    width: 16px;
    height: 16px;
    font-size: 0.55rem;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes avatarFrameSpin {
    to { transform: rotate(360deg); }
}

@keyframes avatarGoldPulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 8px rgba(255, 235, 130, 0.6)); }
}

@keyframes avatarCrownBob {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(0deg); }
    50%      { transform: translateX(-50%) translateY(-2px) rotate(-3deg); }
}

/* Reduce motion preference: kill all spin / pulse / bob */
@media (prefers-reduced-motion: reduce) {
    .avatar-frame::before,
    .avatar-frame--gold,
    .avatar-frame--gold .badge-medal::before {
        animation: none !important;
    }
}