/* xexp1 (24-10-2026): Ape XP on XElementia, the same look as bascdao.com's xp-tags.css. --xp-c = the colour of the
   person's rank. The data is bascdao's levels.json, read only (app.py: get_ape_xp_tag, get_ape_xp_fire). */
.ape-xp-tag { display: inline-flex; align-items: center; padding: 0 7px; margin: 0 4px; border-radius: 999px; font: inherit; font-size: 0.68rem;
    font-weight: 900; font-style: normal; line-height: 1.6; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle;
    font-variant-numeric: tabular-nums; color: var(--xp-c, #9aa4b2); background: color-mix(in srgb, var(--xp-c, #9aa4b2) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--xp-c, #9aa4b2) 45%, transparent); cursor: default; width: max-content; flex: none; }

/* Jungle Ape and up: the jungle frame around the picture */
img.ape-xp-frame { padding: 2px; border-radius: 50%; }
img.ape-xp-frame--jungle { background: conic-gradient(from 200deg, #14532d, #3ddc84 14%, #bef264 26%, #15803d 40%, #4ade80 55%, #166534 68%, #a3e635 82%, #14532d) !important;
    box-shadow: 0 0 0 1px rgba(20, 83, 45, 0.6), 0 0 12px rgba(61, 220, 132, 0.35); }

/* 🔥 On fire: a post where 10 trusted members reacted within 72 hours */
.ape-xp-fire { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 9px 1px 6px; border-radius: 999px; font-size: 0.68rem;
    font-weight: 900; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; color: #fff7ed;
    background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 0 14px rgba(249, 115, 22, 0.45); width: max-content; flex: none; }
.ape-xp-fire i { font-style: normal; display: inline-block; animation: ape-xp-flick 2.4s ease-in-out infinite; }
@keyframes ape-xp-flick { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.15) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .ape-xp-fire i { animation: none; } }

/* xecard1 (24-10-2026): the member card (static/css/mention-card.css, a copy of bascdao's) shows the rank and the frame
   with bascdao's class names (static/js/mention-card.js, also a copy) */
.umc-pill--xp { color: var(--xp-c, #9aa4b2) !important; border-color: color-mix(in srgb, var(--xp-c, #9aa4b2) 50%, transparent) !important;
    background: color-mix(in srgb, var(--xp-c, #9aa4b2) 12%, transparent) !important; }
img.xp-frame { padding: 2px; border-radius: 50%; }
img.xp-frame--jungle { background: conic-gradient(from 200deg, #14532d, #3ddc84 14%, #bef264 26%, #15803d 40%, #4ade80 55%, #166534 68%, #a3e635 82%, #14532d) !important;
    box-shadow: 0 0 0 1px rgba(20, 83, 45, 0.6), 0 0 12px rgba(61, 220, 132, 0.35); }
[data-mention] { cursor: pointer; }

/* xexp2 (25-10-2026, bascdao xp4): the prizes of the last Ape XP season and La Jungla's crown */
img.ape-xp-frame--gold, img.xp-frame--gold { background: conic-gradient(from 200deg, #7a5200, #ffd76a 15%, #fff4c2 25%, #c8901a 45%, #ffe08a 62%, #8a5d00 80%, #7a5200) !important;
    box-shadow: 0 0 0 1px rgba(122, 82, 0, 0.7), 0 0 14px rgba(255, 201, 74, 0.55); }
img.ape-xp-frame--silver, img.xp-frame--silver { background: conic-gradient(from 200deg, #5b6573, #e5ebf2 18%, #ffffff 28%, #9aa6b4 48%, #dfe6ee 66%, #6b7584 82%, #5b6573) !important;
    box-shadow: 0 0 0 1px rgba(91, 101, 115, 0.7), 0 0 12px rgba(201, 211, 223, 0.5); }
img.ape-xp-frame--bronze, img.xp-frame--bronze { background: conic-gradient(from 200deg, #5c2e10, #e0905a 18%, #f8c9a0 28%, #a45a2a 48%, #e8a274 66%, #6e3815 82%, #5c2e10) !important;
    box-shadow: 0 0 0 1px rgba(92, 46, 16, 0.7), 0 0 12px rgba(224, 144, 90, 0.5); }
.ape-xp-medal { margin-right: 3px; font-size: 0.9em; line-height: 1; }
.ape-xp-tag--crown { box-shadow: 0 0 0 1.5px var(--xp-crown), 0 0 8px color-mix(in srgb, var(--xp-crown) 55%, transparent); }
.ape-xp-crown { display: inline-flex; align-items: center; gap: 8px; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; font-weight: 900;
    font-size: 0.85rem; color: #fff; text-decoration: none; width: max-content; max-width: 100%;
    background: color-mix(in srgb, var(--xp-crown, #ffc94a) 22%, rgba(0, 0, 0, 0.45)); border: 1px solid var(--xp-crown, #ffc94a);
    box-shadow: 0 0 18px color-mix(in srgb, var(--xp-crown, #ffc94a) 40%, transparent); }
.ape-xp-crown small { font-weight: 700; opacity: 0.75; }
.ape-xp-crown:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--xp-crown, #ffc94a) 60%, transparent); }