/* TrackMMO flair: ported from the TrackMMO website (admin crown + rainbow ring, staff rings, supporter heart). */
:root { --adm-1:#f5b841; --adm-2:#fff1b8; --adm-3:#ffd978; --adm-glow:rgba(255,196,60,.45); }
.r-moderator{--s1:#35c24a;--s2:#b8f5c6;--s3:#1f9e5a;--sg:rgba(53,194,74,.38)}
.r-editor{--s1:#9a6bff;--s2:#e2d4ff;--s3:#6f45e0;--sg:rgba(154,107,255,.38)}
.r-vip{--s1:#ffb02e;--s2:#ffe9b8;--s3:#ff5c9a;--sg:rgba(255,160,60,.42)}
.adm-av>.av,.stf-av>.av,.sup-av>.av{display:grid;place-items:center;border-radius:50%;object-fit:cover}
.adm-av{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex:none;isolation:isolate;padding:2px}
.adm-av::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffd36b,#fff6d8,#f0a93b,#ffcf5a,#fff6d8,#e89a2c,#ffd36b);animation:admspin 4s linear infinite;z-index:-1}
.adm-av::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 12px 1px var(--adm-glow);animation:admglow 2.6s ease-in-out infinite;z-index:-2}
.adm-av>.av{box-shadow:0 0 0 2px var(--surface)}
.adm-av.xs{padding:1.5px}
.adm-av.xs>.av{box-shadow:0 0 0 1.5px var(--surface)}
.adm-av.big{padding:3px}
.adm-av.big>.av{box-shadow:0 0 0 3px var(--surface)}
.adm-av.huge{padding:4px}
.adm-av.huge>.av{box-shadow:0 0 0 4px var(--surface)!important}
.adm-spark{position:absolute;width:9px;height:9px;background:#fff3c4;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #ffd36b);animation:admtwinkle 2.4s ease-in-out infinite;pointer-events:none;opacity:0}
.adm-spark.s1{top:-3px;right:-2px}
.adm-spark.s2{bottom:-2px;left:-3px;animation-delay:.8s;width:7px;height:7px}
.adm-spark.s3{top:18%;left:-5px;animation-delay:1.6s;width:6px;height:6px}
.adm-av.huge .adm-spark{width:16px;height:16px}
.adm-av.huge .adm-spark.s1{top:2px;right:2px}
.adm-av.huge .adm-spark.s2{bottom:4px;left:0;width:12px;height:12px}
.adm-av.huge .adm-spark.s3{top:40%;left:-8px;width:10px;height:10px}
.adm-av.big .adm-spark{width:12px;height:12px}
.adm-av.xs .adm-spark.s3{display:none}
.adm-name{background:linear-gradient(100deg,var(--adm-1) 0%,var(--adm-2) 22%,var(--adm-1) 45%,var(--adm-3) 70%,var(--adm-1) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:admshine 4s linear infinite;font-weight:700}
.adm-badge{position:relative;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px 2px 6px;border-radius:999px;overflow:hidden;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.4;color:#3a2600;background:linear-gradient(135deg,#ffe08a,#f5b841 55%,#ffd36b);box-shadow:0 0 0 1px rgba(255,210,110,.55),0 0 10px var(--adm-glow);vertical-align:middle;-webkit-text-fill-color:#3a2600;white-space:nowrap}
.adm-badge .ic{width:11px;height:11px;stroke-width:2.2;animation:admpulse 2.4s ease-in-out infinite}
.adm-badge::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-150%) skewX(-20deg);animation:admsheen 3.2s ease-in-out infinite}
h1 .adm-badge{font-size:11px;padding:3px 10px 3px 7px;margin-left:10px}
h1 .adm-badge .ic{width:13px;height:13px}
/* Staff role badge (moderator, editor, writer) next to names */
.staff-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 7px 1px 5px;border-radius:99px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.03em;vertical-align:middle;color:#8fc2ff;background:color-mix(in srgb,#5a9dff 14%,transparent);border:1px solid color-mix(in srgb,#5a9dff 40%,transparent)}
.staff-badge .ic{width:11px;height:11px}
.staff-badge.sb-moderator{color:#7ee0a0;background:color-mix(in srgb,#35c24a 13%,transparent);border-color:color-mix(in srgb,#35c24a 40%,transparent)}
.staff-badge.sb-editor{color:#c9a4ff;background:color-mix(in srgb,#9a6bff 14%,transparent);border-color:color-mix(in srgb,#9a6bff 40%,transparent)}
.staff-badge.sb-writer{color:#7fe3ef;background:color-mix(in srgb,#22c3d6 13%,transparent);border-color:color-mix(in srgb,#22c3d6 40%,transparent)}
.stf-av{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex:none;isolation:isolate;padding:1.5px}
.stf-av::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--s1),var(--s2),var(--s1) 40%,var(--s3),var(--s1));animation:admspin 9s linear infinite;z-index:-1;opacity:.9}
.stf-av::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 7px 0 var(--sg);z-index:-2}
.stf-av>.av{box-shadow:0 0 0 2px var(--surface)}
.stf-av.xs>.av{box-shadow:0 0 0 1.5px var(--surface)}
.stf-av.big{padding:2px}
.stf-av.huge{padding:3px}
.stf-av.huge>.av{box-shadow:0 0 0 4px var(--surface)!important}
.stf-spark{position:absolute;top:-2px;right:-2px;width:6px;height:6px;pointer-events:none;background:var(--s2);filter:drop-shadow(0 0 2px var(--s1));opacity:0;animation:stftwinkle 3.6s ease-in-out infinite}
/* each role has its own spark shape: moderator a star, editor a diamond, writer a round ember */
.r-moderator .stf-spark{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.r-editor .stf-spark{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.r-writer .stf-spark{border-radius:50%;width:5px;height:5px}
.stf-av.big .stf-spark{width:8px;height:8px}
.stf-av.huge .stf-spark{width:11px;height:11px;top:4px;right:4px}
.stf-name{background:linear-gradient(100deg,var(--s1) 0%,var(--s2) 25%,var(--s1) 50%,var(--s1) 100%);background-size:240% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:admshine 7s linear infinite;font-weight:650}
.staff-badge{position:relative;overflow:hidden}
.staff-badge::after{content:"";position:absolute;top:0;bottom:0;width:35%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-20deg);animation:stfsheen 5.5s ease-in-out infinite}
/* Writer: no spinning ring. A still, double "ink" ring that breathes, a round ink-drop spark and a plain
   coloured name with a dotted underline, so it never reads as the admin's gold shimmer. */
.stf-av.r-writer::before{background:none;border:1.5px solid var(--s1);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--s1) 35%,transparent);animation:stfbreathe 3.8s ease-in-out infinite}
.stf-av.r-writer::after{box-shadow:0 0 6px 0 var(--sg)}
.r-writer .stf-spark{border-radius:50% 50% 50% 0;transform:rotate(-45deg);top:auto;bottom:-1px;right:-1px;animation:stfdrop 4.2s ease-in-out infinite}
.stf-name.r-writer{background:none;animation:none;color:var(--s1)!important;-webkit-text-fill-color:var(--s1);text-decoration:underline dotted color-mix(in srgb,var(--s1) 55%,transparent);text-underline-offset:3px}
.staff-badge.sb-writer::after{display:none}
/* Supporter flair: soft rose, a floating heart, no spinning ring (so it never looks like staff) */
.sup-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px 1px 6px;border-radius:99px;font-style:normal;font-size:10.5px;font-weight:700;vertical-align:middle;color:#ffb3d0;background:linear-gradient(90deg,rgba(255,92,154,.18),rgba(139,92,246,.16));border:1px solid rgba(255,92,154,.45);white-space:nowrap;-webkit-text-fill-color:#ffb3d0}
.sup-badge .ic{width:11px;height:11px;color:#ff5c9a;fill:#ff5c9a}
.sup-av{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex:none;padding:1.5px;background:linear-gradient(135deg,#ff8fbb,#8b5cf6);box-shadow:0 0 8px rgba(255,92,154,.35)}
.sup-av>.av{box-shadow:0 0 0 2px var(--surface)}
.sup-av.xs>.av{box-shadow:0 0 0 1.5px var(--surface)}
.sup-av.huge{padding:3px}
.sup-av.huge>.av{box-shadow:0 0 0 4px var(--surface)!important}
.sup-heart{position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#ff5c9a;clip-path:path('M4.5 8.5 1 5C-.3 3.7.3 1.2 2.2 1c1-.1 1.8.4 2.3 1.2C5 1.4 5.8.9 6.8 1c1.9.2 2.5 2.7 1.2 4Z');filter:drop-shadow(0 0 3px #ff5c9a);animation:supBeat 2.6s ease-in-out infinite}
.sup-av.huge .sup-heart{width:9px;height:9px;top:6px;right:6px;transform:scale(1.8)}
.sup-name{color:#ff9cc3!important;-webkit-text-fill-color:#ff9cc3;font-weight:650}
.sup-av.huge .sup-heart{animation:none}
/* ===== Staff & admin avatar decoration v2: rainbow halo, role coin, crown ===== */
.adm-av,.stf-av{padding:3.5px}
.adm-av>.av,.stf-av>.av{box-shadow:0 0 0 1.5px var(--surface)}
.adm-av::before{background:conic-gradient(#ffd36b,#ff8fcf,#b07bff,#62b0ff,#5ef0c0,#ffe58a,#ffd36b);animation:admspin 3.2s linear infinite}
.adm-av::after{box-shadow:0 0 10px 0 rgba(255,190,90,.35);animation:none}
.adm-halo,.stf-halo{position:absolute;inset:-2px;border-radius:50%;z-index:-3;pointer-events:none;filter:blur(8px);opacity:.9;animation:admspin 3.2s linear infinite}
.adm-halo{background:conic-gradient(#ffd36b,#ff8fcf,#b07bff,#62b0ff,#5ef0c0,#ffe58a,#ffd36b)}
.stf-halo{background:conic-gradient(var(--s1),var(--s2),var(--s3),var(--s1));opacity:.6;animation-duration:5s}
.stf-av::before{animation-duration:4.5s;opacity:1}
.adm-coin,.stf-coin{position:absolute;z-index:3;top:-4px;left:-4px;width:46%;min-width:15px;max-width:26px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;pointer-events:none;overflow:hidden;font-style:normal}
.adm-coin{background:radial-gradient(circle at 32% 26%,#fff7da,#ffd04a 42%,#d98516 82%);color:#7a4300;box-shadow:0 0 0 2px var(--surface),0 3px 8px rgba(0,0,0,.55),0 0 12px rgba(255,196,60,.7)}
.adm-coin::after,.stf-coin::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);transform:translateX(-130%);animation:coinShine 3.6s ease-in-out infinite}
.stf-coin::after{opacity:.6;animation-delay:1.2s}
.adm-coin svg{width:68%;height:68%;position:relative;z-index:1}
.adm-coin .cg{fill:#fffbe8}
.stf-coin{background:radial-gradient(circle at 32% 26%,var(--s2),var(--s1) 52%,var(--s3));color:#fff;box-shadow:0 0 0 2px var(--surface),0 3px 8px rgba(0,0,0,.5),0 0 10px var(--sg)}
.stf-coin .ic{width:58%;height:58%;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.adm-av.big,.stf-av.big{padding:4.5px}
.adm-av.big>.av,.stf-av.big>.av{box-shadow:0 0 0 2px var(--surface)}
.adm-av.huge,.stf-av.huge{padding:6px}
.adm-av.huge>.av,.stf-av.huge>.av{box-shadow:0 0 0 3px var(--surface)!important}
.adm-av.huge .adm-coin,.stf-av.huge .stf-coin{top:1px;left:1px;width:30%;max-width:34px}
.adm-av.big .adm-coin,.stf-av.big .stf-coin{max-width:24px}
.adm-av.xs,.stf-av.xs{padding:2px}
.adm-av.xs>.av,.stf-av.xs>.av{box-shadow:0 0 0 1px var(--surface)}
.adm-av.xs .adm-coin,.stf-av.xs .stf-coin,.adm-av.xs .adm-halo,.stf-av.xs .stf-halo{display:none}
.adm-badge svg.crw{width:13px;height:13px;flex:none;animation:crwBob 2.8s ease-in-out infinite;transform-origin:50% 80%}
.adm-badge svg.crw .cg{fill:currentColor}
@keyframes admspin{to{transform:rotate(360deg)}}
@keyframes admglow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes admshine{to{background-position:-220% center}}
@keyframes admtwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes admpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25) rotate(20deg)}}
@keyframes admsheen{0%,55%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(350%) skewX(-20deg)}}
@keyframes stftwinkle{0%,100%{opacity:0;transform:scale(.4)}45%,55%{opacity:.95;transform:scale(1) rotate(30deg)}}
@keyframes stfsheen{0%,65%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(360%) skewX(-20deg)}}
@keyframes stfbreathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes stfdrop{0%,100%{opacity:0;translate:0 -3px}40%,60%{opacity:.9;translate:0 0}}
@keyframes supBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}}
@keyframes coinShine{55%,100%{transform:translateX(130%)}}
@keyframes crwBob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-1px)}}
/* VIP: gold-to-rose ring with two star sparks */
.r-vip .stf-spark{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.r-vip .stf-spark.s2{top:auto;right:auto;bottom:-2px;left:-2px;width:5px;height:5px;animation-delay:1.8s}
.staff-badge.sb-vip{color:#ffd27a;background:linear-gradient(90deg,rgba(255,176,46,.18),rgba(255,92,154,.14));border-color:rgba(255,176,46,.5)}
.flair-name{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 2px}
.flair-name .adm-badge,.flair-name .staff-badge,.flair-name .sup-badge{margin-left:6px}
/* Light theme: keep badges readable */
html[data-theme="light"] .sup-name{color:#c2185b!important;-webkit-text-fill-color:#c2185b}
html[data-theme="light"] .sup-badge{color:#b0145a;-webkit-text-fill-color:#b0145a}
html[data-theme="light"] .staff-badge.sb-moderator{color:#1a7f37}
html[data-theme="light"] .staff-badge.sb-editor{color:#6b3fd6}
html[data-theme="light"] .staff-badge.sb-vip{color:#a35a00}
/* Reduce motion */
.reduce-motion :is(.adm-av,.stf-av)::before,.reduce-motion :is(.adm-halo,.stf-halo,.adm-spark,.stf-spark,.sup-heart,.adm-name,.stf-name),.reduce-motion :is(.adm-coin,.stf-coin)::after,.reduce-motion .adm-badge svg.crw{animation:none!important}
.reduce-motion :is(.adm-spark,.stf-spark){opacity:.8}
@media (prefers-reduced-motion: reduce){:is(.adm-av,.stf-av)::before,:is(.adm-halo,.stf-halo,.adm-spark,.stf-spark,.sup-heart,.adm-name,.stf-name),.adm-badge svg.crw{animation:none!important}}