/* xp3 (24-10-2026): Ape XP for everyone, next to names and posts (xp.tag_of, xp.on_fire; the Jinja globals xp_tag,
   xp_frame and xp_fire in app.py; the JS lists of giveaway.js, threads.js and mention-card.js). Loaded on bascdao.com and
   on every Ape Site while Ape XP is live. --xp-c = the colour of the person's rank. */
.xp-tag { display: inline-flex; align-items: center; padding: 0 7px; margin-left: 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; }
.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; }

/* Jungle Ape and up: the jungle frame around your picture (the padding shows the leaves around the image) */
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); }

/* 🔥 On fire: a post where 10 trusted members reacted within 72 hours */
.xp-onfire { 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); }
.xp-onfire i { font-style: normal; display: inline-block; animation: xp-tag-flick 2.4s ease-in-out infinite; }
/* never stretched by a grid or a column (the post headers) */
.xp-onfire { justify-self: start; align-self: center; width: max-content; }
.xp-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xp-when .xp-onfire { margin-left: 0; }
@keyframes xp-tag-flick { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.15) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .xp-onfire i { animation: none; } }

/* xp4 (25-10-2026): the prizes of the last season, for the whole next month. Top 3: a gold, silver or bronze frame (it
   takes the place of the jungle frame) and a medal in the level pill; #4-#10: 🏅 in the pill. The members of the tribe
   that won La Jungla: their tribe's colour around the pill (--xp-crown). */
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.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.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); }
.xp-medal { margin-right: 3px; font-size: 0.9em; line-height: 1; }
.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); }