/* 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.75rem; 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.75rem;
    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); }

/* xp5c (29-10-2026): Legendary Ape (level 50): an animated frame of gold, pink and prism light around the picture (it turns
   slowly; a prize frame of the last season takes its place for that month, as with the jungle one). Elder Ape (level 40)
   and up: the name glows next to comments and posts (app._xp_glow: xp-glow--elder green, xp-glow--legendary gold and pink).
   Both go by the best level ever reached, so they are never lost. */
@property --xp-fa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
img.xp-frame--legendary { background: conic-gradient(from var(--xp-fa), #ffd76a, #fff4c2 12%, #ff7ae0 30%, #7df9ff 48%, #ffd76a 62%, #fff4c2 74%, #ff7ae0 88%, #ffd76a) !important;
    box-shadow: 0 0 0 1px rgba(122, 75, 0, 0.55), 0 0 14px rgba(255, 215, 106, 0.55), 0 0 22px rgba(255, 122, 224, 0.3); animation: xp-frame-turn 6s linear infinite; }
@keyframes xp-frame-turn { to { --xp-fa: 360deg; } }
.xp-glow { text-shadow: 0 0 10px var(--xp-g1), 0 0 2px var(--xp-g2); animation: xp-glow-breathe 3.6s ease-in-out infinite; }
.xp-glow:not(:hover):not([aria-expanded="true"]) { text-decoration: none; }   /* a transparent underline would glow too */
.xp-glow--elder { --xp-g1: rgba(20, 241, 149, 0.55); --xp-g2: rgba(190, 255, 225, 0.65); }
.xp-glow--legendary { --xp-g1: rgba(255, 196, 90, 0.6); --xp-g2: rgba(255, 150, 230, 0.6); }
@keyframes xp-glow-breathe { 0%, 100% { text-shadow: 0 0 6px var(--xp-g1), 0 0 1px var(--xp-g2); } 50% { text-shadow: 0 0 14px var(--xp-g1), 0 0 3px var(--xp-g2); } }
@media (prefers-reduced-motion: reduce) { img.xp-frame--legendary, .xp-glow { animation: none; } }