/* ============================================================
 * flair.css — cosmetic name flair + title tags (reward shop)
 * Applied to a username span wherever a player's equipped flair
 * should show. Pure CSS, no art. Loaded on the rewards shop and
 * the profile (and, later, anywhere usernames render).
 * ============================================================ */

.mm-flair-gold {
    color: #f6c94a !important;
    text-shadow: 0 0 6px rgba(246, 201, 74, .45);
    font-weight: 700;
}
.mm-flair-cyan {
    color: #5fe0ff !important;
    text-shadow: 0 0 6px rgba(95, 224, 255, .5);
    font-weight: 700;
}
.mm-flair-ember {
    color: #ff7a3c !important;
    text-shadow: 0 0 6px rgba(255, 122, 60, .45);
    font-weight: 700;
}
.mm-flair-holo,
.mm-flair-rainbow {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
    background-size: 300% 100%;
    animation: mm-flair-shift 6s linear infinite;
}
.mm-flair-holo {
    background-image: linear-gradient(90deg, #a18cd1, #fbc2eb, #8fd3f4, #a18cd1);
}
.mm-flair-rainbow {
    background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #5fa8ff, #c86dd7, #ff5f6d);
    animation-duration: 5s;
}
@keyframes mm-flair-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
/* ── Expanded flair set ── */
.mm-flair-silver  { color: #d6dbe6 !important; text-shadow: 0 0 6px rgba(214,219,230,.5); font-weight: 700; }
.mm-flair-emerald { color: #34d399 !important; text-shadow: 0 0 6px rgba(52,211,153,.5);  font-weight: 700; }
.mm-flair-crimson { color: #f0506e !important; text-shadow: 0 0 6px rgba(240,80,110,.5);  font-weight: 700; }
.mm-flair-royal   { color: #b39df6 !important; text-shadow: 0 0 7px rgba(167,139,250,.6); font-weight: 700; }
.mm-flair-frost   { color: #bfe9ff !important; text-shadow: 0 0 8px rgba(120,200,255,.7); font-weight: 700; }
.mm-flair-neon {
    color: #b6ff3a !important;
    text-shadow: 0 0 8px rgba(150,255,40,.7);
    font-weight: 800;
    animation: mm-flair-pulse 1.8s ease-in-out infinite;
}
@keyframes mm-flair-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(150,255,40,.5); }
    50%      { text-shadow: 0 0 14px rgba(150,255,40,.95); }
}
.mm-flair-rosegold,
.mm-flair-sunset {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
    background-size: 300% 100%;
}
.mm-flair-rosegold { background-image: linear-gradient(90deg, #f7c5c0, #e0a9a0, #f6c94a, #f7c5c0); }
.mm-flair-sunset   { background-image: linear-gradient(90deg, #ff7e5f, #feb47b, #ff5f8d, #ff7e5f); animation: mm-flair-shift 6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .mm-flair-holo, .mm-flair-rainbow, .mm-flair-neon, .mm-flair-sunset { animation: none; }
}

/* Title tag shown next to a username */
.mm-user-title {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #cdd6f5;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================================
 * Emblems — an emoji pinned next to the username
 * ============================================================ */
.mm-emblem {
    display: inline-block;
    margin-left: 4px;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

/* ============================================================
 * Nameplates — a gradient/glass pill BEHIND the username.
 * Applied to the same name element as flair (so the two stack).
 * Each class is self-contained (bg + padding + shape).
 * ============================================================ */
.mm-plate-slate,
.mm-plate-gold,
.mm-plate-ocean,
.mm-plate-sunset,
.mm-plate-neon {
    padding: 1px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.mm-plate-slate  { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); }
.mm-plate-gold   { background: linear-gradient(135deg, rgba(246, 201, 74, .35), rgba(224, 169, 42, .18)); border-color: rgba(246, 201, 74, .5); }
.mm-plate-ocean  { background: linear-gradient(135deg, rgba(95, 168, 255, .32), rgba(47, 108, 176, .18)); border-color: rgba(95, 168, 255, .5); }
.mm-plate-sunset { background: linear-gradient(135deg, rgba(255, 126, 95, .32), rgba(255, 95, 141, .2)); border-color: rgba(255, 126, 95, .5); }
.mm-plate-neon   { background: rgba(10, 14, 24, .55); border-color: rgba(150, 255, 40, .65); box-shadow: 0 0 8px rgba(150, 255, 40, .35); }

/* ============================================================
 * Avatar frames — a decorative ring around an avatar image.
 * Add ONLY border/shadow here (size + radius come from the avatar).
 * Selectors are `img.`-qualified so an equipped frame reliably overrides a
 * host avatar's own single-class border (e.g. .mm-profile-hero-avatar).
 * ============================================================ */
img.mm-frame-silver,
img.mm-frame-gold,
img.mm-frame-cyan,
img.mm-frame-flame,
img.mm-frame-rainbow {
    border-style: solid;
    border-width: 3px;
    box-sizing: border-box;
}
img.mm-frame-silver { border-color: #d6dbe6 !important; box-shadow: 0 0 6px rgba(214, 219, 230, .65); }
img.mm-frame-gold   { border-color: #f6c94a !important; box-shadow: 0 0 8px rgba(246, 201, 74, .75); }
img.mm-frame-cyan   { border-color: #5fe0ff !important; box-shadow: 0 0 8px rgba(95, 224, 255, .75); }
img.mm-frame-flame  {
    border-color: #ff7a3c !important;
    box-shadow: 0 0 9px rgba(255, 122, 60, .8);
    animation: mm-frame-flicker 1.6s ease-in-out infinite;
}
@keyframes mm-frame-flicker {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 122, 60, .6); border-color: #ff7a3c; }
    50%      { box-shadow: 0 0 13px rgba(255, 170, 60, .95); border-color: #ffb13c; }
}
img.mm-frame-rainbow {
    border-color: transparent !important;
    background: linear-gradient(#1a1726, #1a1726) padding-box,
                linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #5fa8ff, #c86dd7, #ff5f6d) border-box;
    background-size: auto, 300% 100%;
    animation: mm-frame-rainbow-shift 5s linear infinite;
}
@keyframes mm-frame-rainbow-shift {
    0%   { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 300% 50%; }
}

/* ============================================================
 * Comment glow — a colored highlight on the player's comment.
 * Applied to the .mm-comment container.
 * ============================================================ */
.mm-glow-gold,
.mm-glow-cyan,
.mm-glow-pink,
.mm-glow-green {
    border-radius: 10px;
    padding: 6px 8px;
    margin-left: -8px;
    margin-right: -8px;
}
.mm-glow-gold  { background: rgba(246, 201, 74, .07);  box-shadow: inset 3px 0 0 #f6c94a; }
.mm-glow-cyan  { background: rgba(95, 224, 255, .07);  box-shadow: inset 3px 0 0 #5fe0ff; }
.mm-glow-pink  { background: rgba(240, 80, 140, .07);  box-shadow: inset 3px 0 0 #f0508c; }
.mm-glow-green { background: rgba(52, 211, 153, .07);  box-shadow: inset 3px 0 0 #34d399; }

@media (prefers-reduced-motion: reduce) {
    .mm-frame-flame, .mm-frame-rainbow { animation: none; }
}