/* Cosmetic flair: collection colours, rarity colours, name colours, badges, avatar frames, chat bubbles, profile banners.
   Imported by arcade.css, so every site page and every game has it. Markup helpers: /src/core/flair.js.
   A piece of flair = a role class (.fl-name, .fl-frame, .fl-bubble, .fl-banner, .fl-badge) + a collection class (.fl-c-<id>). */

/* ---------- collection colours ---------- */
.fl-c-deep { --c1: #7df9ff; --c2: #8d6cf0; --c3: #ff8fd1; --c-ink: #060716; }
.fl-c-kiln { --c1: #ffd36b; --c2: #ff6a2b; --c3: #c81e05; --c-ink: #120605; }
.fl-c-hollow { --c1: #e8fffa; --c2: #5ff2c0; --c3: #3fa8c8; --c-ink: #04181e; }
.fl-c-glass { --c1: #ffffff; --c2: #9fd8ff; --c3: #d7b8ff; --c-ink: #16214a; }
.fl-c-scan { --c1: #5ff2c0; --c2: #6cc7ff; --c3: #ff5ea8; --c-ink: #020d14; }
.fl-c-jelly { --c1: #a8fbe0; --c2: #5ff2c0; --c3: #ffc94d; --c-ink: #04241a; }
.fl-c-token { --c1: #fff3c4; --c2: #ffc94d; --c3: #f08a10; --c-ink: #2a1c00; }

/* ---------- rarity colours ---------- */
.rar-common { --rar: #a9b0d0; } .rar-rare { --rar: #6cc7ff; } .rar-epic { --rar: #b69cff; } .rar-legendary { --rar: #ffc94d; } .rar-mythic { --rar: #ff8fd1; }
.rar-tag { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--by-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--rar); }
.rar-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--rar); box-shadow: 0 0 8px var(--rar); }
.rar-mythic .rar-tag::before, .rar-tag.rar-mythic::before { background: var(--by-prism-conic); }

/* ---------- name colour ---------- */
.fl-name { background: linear-gradient(100deg, var(--c1), var(--c2) 45%, var(--c3) 75%, var(--c1)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; font-weight: 700; animation: fl-slide 7s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c2) 45%, transparent)); }
.fl-name.fl-c-scan { text-shadow: none; filter: drop-shadow(1px 0 0 rgba(255, 94, 168, .55)) drop-shadow(-1px 0 0 rgba(95, 242, 192, .5)); }
@keyframes fl-slide { to { background-position: -220% 0; } }

/* ---------- badge ---------- */
.fl-badge { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: .35em; vertical-align: -.22em; border-radius: 32%; background: linear-gradient(160deg, var(--c1), var(--c2) 55%, var(--c3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1.5px 0 rgba(0, 0, 0, .25), 0 0 8px -1px var(--c2); }
.fl-badge svg { width: 72%; height: 72%; fill: var(--c-ink); }

/* ---------- avatar frame (on the <img> or its wrapper) ---------- */
.fl-frame { border-radius: 50%; box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c1), 0 0 0 5.5px var(--c2), 0 0 14px 3px color-mix(in srgb, var(--c3) 70%, transparent) !important; animation: fl-frame 3.2s ease-in-out infinite; }
@keyframes fl-frame { 50% { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c2), 0 0 0 5.5px var(--c3), 0 0 20px 5px color-mix(in srgb, var(--c1) 60%, transparent); } }

/* ---------- chat bubble ---------- */
.fl-bubble { background: linear-gradient(150deg, color-mix(in srgb, var(--c2) 26%, #151935), color-mix(in srgb, var(--c3) 16%, #11142b)) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px -8px var(--c2) !important; }
.fl-bubble.fl-c-jelly { border-radius: 22px 22px 22px 8px !important; background: linear-gradient(180deg, rgba(168, 251, 224, .34), rgba(47, 211, 168, .2)) !important; }
.fl-bubble.fl-c-glass { background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(159, 216, 255, .1) 50%, rgba(215, 184, 255, .2)) !important; backdrop-filter: blur(6px); }
.fl-bubble.fl-c-kiln { background: radial-gradient(120% 140% at 0% 100%, rgba(255, 106, 43, .34), transparent 60%), linear-gradient(160deg, #1a0d0a, #0c0606) !important; }
.fl-bubble.fl-c-deep { background: var(--by-stars), radial-gradient(120% 140% at 100% 0%, rgba(141, 108, 240, .5), transparent 60%), linear-gradient(160deg, #0d1034, #060716) !important; }

/* ---------- profile banner / leaderboard row backdrop ---------- */
.fl-banner { position: relative; isolation: isolate; background: radial-gradient(90% 160% at 100% 0%, color-mix(in srgb, var(--c3) 38%, transparent), transparent 60%), radial-gradient(80% 140% at 0% 100%, color-mix(in srgb, var(--c2) 34%, transparent), transparent 62%), linear-gradient(120deg, color-mix(in srgb, var(--c-ink) 86%, var(--c2)), var(--c-ink)) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
.fl-banner.fl-c-deep { background: var(--by-stars), radial-gradient(70% 150% at 85% 10%, rgba(255, 143, 209, .34), transparent 60%), radial-gradient(70% 150% at 10% 90%, rgba(125, 249, 255, .22), transparent 60%), linear-gradient(120deg, #141a48, #060716) !important; }
.fl-banner.fl-c-kiln { background: radial-gradient(40% 90% at 20% 110%, rgba(255, 211, 107, .5), transparent 70%), radial-gradient(50% 110% at 75% 120%, rgba(255, 106, 43, .55), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 106, 43, .12) 22px 24px), linear-gradient(160deg, #1c0d09, #080404) !important; }
.fl-banner.fl-c-hollow { background: radial-gradient(60% 120% at 50% 120%, rgba(95, 242, 192, .4), transparent 70%), radial-gradient(40% 90% at 85% 0%, rgba(232, 255, 250, .22), transparent 70%), linear-gradient(160deg, #0d3a44, #04181e) !important; }
.fl-banner.fl-c-glass { background: linear-gradient(115deg, rgba(95, 242, 192, .28), rgba(108, 199, 255, .3) 30%, rgba(182, 156, 255, .32) 55%, rgba(255, 143, 209, .28) 78%, rgba(255, 201, 77, .22)), linear-gradient(160deg, #2a3a78, #16214a) !important; }
.fl-banner.fl-c-scan { background: repeating-linear-gradient(0deg, rgba(95, 242, 192, .16) 0 1.5px, transparent 1.5px 5px), radial-gradient(60% 130% at 100% 50%, rgba(255, 94, 168, .32), transparent 65%), linear-gradient(160deg, #06303a, #020d14) !important; }
.fl-banner.fl-c-jelly { background: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .22) 2.5px, transparent 3.5px) 0 0 / 28px 28px, linear-gradient(135deg, #17b890, #0f8a70 55%, #c98a10) !important; }
.fl-banner.fl-c-token { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 48%, transparent 58%), linear-gradient(160deg, #c77a12, #8a5208 60%, #5a3204) !important; background-size: 240% 100%, auto !important; animation: fl-sheen 5s ease-in-out infinite; }
@keyframes fl-sheen { 0%, 20% { background-position: 120% 0, 0 0; } 70%, 100% { background-position: -80% 0, 0 0; } }

/* ---------- the gem price / wallet chip used across the site ---------- */
.gems { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #e2d6ff; white-space: nowrap; }
.gems .gem-ic { width: 1.25em; height: 1.25em; }

@media (prefers-reduced-motion: reduce) { .fl-name, .fl-frame, .fl-banner.fl-c-token { animation: none !important; } }
/* phones: a blurred bubble inside the (already blurred) chat list re-blurs on every scroll frame; the tint alone reads as glass */
@media (max-width: 767px) { .fl-bubble.fl-c-glass { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* profile header with a banner equipped */
.pf-head.fl-banner { padding: 20px 22px; border-radius: var(--by-r-xl); }
.lb-row.fl-banner .lb-rank, .lb-row.fl-banner small { color: rgba(255, 255, 255, .8); }