/* rings: unlocked by how many badges you hold (2 silver, 4 gold, 7 neon, 10 prism) */
@property --spin { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.ring { display:inline-grid; border-radius:50%; flex:none; }
.ring.r1, .ring.r2, .ring.r3, .ring.r4 { padding:3px; }  /* 2px of ring, 1px gap */
.ring.r1 > *, .ring.r2 > *, .ring.r3 > *, .ring.r4 > * { box-shadow:0 0 0 1px #15151d; }
.ring.r1 { background:linear-gradient(135deg, #f4f6fa, #8d96a6); }
.ring.r2 { background:linear-gradient(135deg, #fff1b8, #f5b300 50%, #b86b00); box-shadow:0 0 10px -2px rgba(245,179,0,.6); }
.ring.r3 { background:conic-gradient(from var(--spin), #ff2e63, #ff9a3d, #ff2e63); box-shadow:0 0 12px -2px rgba(255,46,99,.7); animation:spin 6s linear infinite; }
.ring.r4 { background:conic-gradient(from var(--spin), #ff2e63, #ff9a3d, #ffe066, #3ddc97, #4cc9f0, #a78bfa, #ff2e63);
           box-shadow:0 0 14px -2px rgba(167,139,250,.8); animation:spin 3s linear infinite; }
@keyframes spin { to { --spin:360deg; } }
@media (prefers-reduced-motion:reduce) { .ring.r3, .ring.r4 { animation:none; } }
:is(.ch, .rn).r1 { color:#e8ebf2; }
:is(.ch, .rn):is(.r2, .r3, .r4) { -webkit-background-clip:text; background-clip:text; color:transparent; }
:is(.ch, .rn).r2 { background-image:linear-gradient(90deg, #ffe38a, #f5b300); }
:is(.ch, .rn).r3 { background-image:linear-gradient(90deg, #ff5d8f, #ffb86b); }
:is(.ch, .rn).r4 { background-image:linear-gradient(90deg, #ff5d8f, #ffe066, #3ddc97, #4cc9f0, #a78bfa); }
/* badge grid (profile pop-up and profile page) */
.bring { font-size:12.5px; color:var(--dim); text-align:center; }
.bring b { color:var(--fg); }
.bgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.bcell { display:grid; justify-items:center; align-content:start; gap:3px; padding:8px 4px; border-radius:12px; text-align:center;
         background:rgba(255,255,255,.04); }
.bcell img { width:44px; height:44px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.bcell b { font:700 11px/1.2 Inter; }
.bcell small { font-size:10px; line-height:1.25; color:var(--faint, #777); }
.bcell.locked img { filter:grayscale(1) brightness(.45); opacity:.55; }
.bcell.locked b { color:var(--dim, #999); }
.bgrid.full { gap:10px; }
.bgrid.full .bcell { padding:12px 8px; }
.bgrid.full img { width:60px; height:60px; }
.bgrid.full b { font-size:12.5px; }
.bgrid.full small { font-size:11px; }
.ring.big:is(.r1, .r2, .r3, .r4) { padding:6px; }
.ring.big:is(.r1, .r2, .r3, .r4) > * { box-shadow:0 0 0 2px #15151d; }