/* ---------- Avatar + frames ----------
   Frames are driven by avatar_frames.css_class (or asset_url for image frames).
   To add a new CSS frame: add a ".frame-xxx .avatar__frame" rule here, then
   insert a row in avatar_frames with css_class = 'frame-xxx'.
   Animations only touch transform/opacity so they stay GPU-friendly on phones. */
.avatar { position: relative; width: var(--size, 48px); height: var(--size, 48px); flex: none; }
.avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); }
.avatar__fallback { display: grid; place-items: center; font-weight: 800; color: var(--on-primary); background: var(--grad); font-size: calc(var(--size, 48px) * .42); }
.avatar__frame { position: absolute; inset: -9%; border-radius: 50%; pointer-events: none; }
.avatar__frame-img { position: absolute; inset: -18%; width: 136%; height: 136%; max-width: none; pointer-events: none; }

.frame-silver .avatar__frame { border: 3px solid #cfd3e6; }
.frame-gold .avatar__frame { border: 3px solid #f5c542; box-shadow: 0 0 10px rgba(245, 197, 66, .55); }
.frame-neon .avatar__frame,
.frame-limited .avatar__frame {
  background: conic-gradient(#ff2d95, #7b2dff, #00d4ff, #ff2d95);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: frame-spin 3s linear infinite; will-change: transform;
}
.frame-limited .avatar__frame { background: conic-gradient(#f5c542, #fff4b8, #f59e0b, #f5c542); animation-duration: 6s; }
.frame-aurora .avatar__frame { border: 3px solid #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, .7); animation: frame-pulse 2.2s ease-in-out infinite; }
.frame-event .avatar__frame { border: 3px dashed #fb923c; animation: frame-spin 10s linear infinite; }

@keyframes frame-spin { to { transform: rotate(360deg); } }
@keyframes frame-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: .7; } }

/* ---------- Title badges (metallic pills with ornaments) ---------- */
.title-badge {
  --tg: rgba(255, 255, 255, .25); --orn: '\2726';
  position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  padding: 3px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; line-height: 1.5;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); background: #4b5563;
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 10px rgba(0, 0, 0, .2), 0 0 10px var(--tg);
}
.title-orn { font-style: normal; font-size: .85em; opacity: .9; font-variant-emoji: text; }
.title-orn::before { content: var(--orn); }
.title-badge--lg { font-size: .95rem; padding: 5px 20px; gap: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -8px 12px rgba(0, 0, 0, .22), 0 4px 16px var(--tg); }

.title-new { background: linear-gradient(135deg, #64748b, #334155); --tg: rgba(100, 116, 139, .35); }
.title-vip { background: linear-gradient(135deg, #fde047, #f59e0b 35%, #ef4444 75%, #f59e0b); --tg: rgba(245, 158, 11, .55); --orn: '\2605'; }
.title-host { background: linear-gradient(135deg, #7dd3fc, #0ea5e9 40%, #6366f1); --tg: rgba(14, 165, 233, .5); --orn: '\25C6'; }
.title-guard { background: linear-gradient(135deg, #6ee7b7, #10b981 40%, #0f766e); --tg: rgba(16, 185, 129, .5); --orn: '\25C6'; }
.title-mod { background: linear-gradient(135deg, #c4b5fd, #8b5cf6 40%, #4f46e5); --tg: rgba(139, 92, 246, .5); --orn: '\2727'; }
.title-winner { background: linear-gradient(135deg, #fef08a, #facc15 35%, #f97316); color: #2a1500; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); --tg: rgba(249, 115, 22, .5); --orn: '\2605'; }
.title-special { background: linear-gradient(135deg, #f9a8d4, #ec4899 40%, #8b5cf6); --tg: rgba(236, 72, 153, .5); }
.title-royal { background: linear-gradient(135deg, #fff7d1, #f6d56a 25%, #c38a12 55%, #f9e08c 80%, #b07a10); color: #2a1a02; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); border-color: rgba(255, 244, 190, .9); --tg: rgba(233, 191, 85, .65); --orn: '\265B'; }
.title-king { background: linear-gradient(135deg, #0b0b0e, #2a2008 60%, #0b0b0e); color: #f6d56a; border-color: #e9bf55; --tg: rgba(233, 191, 85, .55); --orn: '\265A'; }
.title-queen { background: linear-gradient(135deg, #fbcfe8, #f472b6 40%, #e9bf55); color: #4a0a2c; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); --tg: rgba(244, 114, 182, .55); --orn: '\265B'; }
.title-legend { background: linear-gradient(135deg, #6d28d9, #c026d3 45%, #f59e0b); --tg: rgba(192, 38, 211, .55); }
.title-elite { background: linear-gradient(135deg, #0b0b0e, #1c1c22); color: #f6d56a; border-color: rgba(246, 213, 106, .8); --tg: rgba(246, 213, 106, .35); --orn: '\25C6'; }
.title-diamond { background: linear-gradient(135deg, #ecfeff, #a5f3fc 35%, #38bdf8 70%, #e0f2fe); color: #05273a; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); border-color: #fff; --tg: rgba(56, 189, 248, .6); --orn: '\25C6'; }
.title-ruby { background: linear-gradient(135deg, #fecdd3, #fb7185 30%, #be123c 70%, #881337); --tg: rgba(225, 29, 72, .55); --orn: '\2666'; }
.title-emerald { background: linear-gradient(135deg, #d1fae5, #34d399 35%, #047857 75%); --tg: rgba(16, 185, 129, .55); --orn: '\2727'; }
.title-gamer { background: linear-gradient(135deg, #4ade80, #16a34a 40%, #6d28d9); --tg: rgba(34, 197, 94, .5); --orn: '\25B2'; }
.title-dj { background: linear-gradient(135deg, #22d3ee, #a855f7 55%, #ec4899); --tg: rgba(168, 85, 247, .55); --orn: '\266B'; }
.title-owl { background: linear-gradient(135deg, #312e81, #4338ca 55%, #1e1b4b); --tg: rgba(99, 102, 241, .5); --orn: '\263E'; }
.title-founder { background: linear-gradient(135deg, #fef3c7, #fbbf24 30%, #d97706 65%, #92400e); color: #2a1500; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); border-color: rgba(255, 237, 160, .9); --tg: rgba(251, 191, 36, .8); --orn: '\265B'; }
.title-anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite;
}
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }

/* ---------- Event titles (designer styles) ---------- */
.title-badge .title-text { position: relative; z-index: 1; }
.title-stargazer, .title-immortal, .title-frost { font-family: Georgia, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.title-stargazer::before, .title-frost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(1px 1px at 12% 28%, #fff, transparent), radial-gradient(1.6px 1.6px at 38% 72%, #fff, transparent), radial-gradient(1px 1px at 60% 22%, #fff, transparent), radial-gradient(1.6px 1.6px at 82% 64%, #fff, transparent), radial-gradient(1px 1px at 93% 26%, #fff, transparent);
  animation: tstar 2.4s ease-in-out infinite;
}
@keyframes tstar { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.title-stargazer {
  background: radial-gradient(circle at 18% 30%, rgba(167, 139, 250, .55), transparent 55%), radial-gradient(circle at 86% 80%, rgba(99, 102, 241, .5), transparent 55%), linear-gradient(135deg, #07041a, #1e0f5c 55%, #090524);
  color: #f1eeff; text-shadow: 0 0 6px #a78bfa, 0 0 14px #7c5cff; border-color: rgba(196, 181, 253, .85); --tg: rgba(124, 92, 255, .75); --orn: '\2726';
}
.title-stargazer .title-orn { color: #c4b5fd; text-shadow: 0 0 8px #a78bfa; }
.title-immortal {
  background: linear-gradient(180deg, #17120b, #050403); border-color: rgba(233, 180, 76, .85); --tg: rgba(233, 150, 50, .6); --orn: '\2666';
  box-shadow: inset 0 1px 0 rgba(255, 220, 140, .35), inset 0 -6px 10px rgba(0, 0, 0, .5), 0 0 12px var(--tg);
}
.title-immortal .title-text {
  background: linear-gradient(180deg, #fff3c4 0%, #f0bf54 45%, #a8670f 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .55));
}
.title-immortal .title-orn { color: #ff5865; text-shadow: 0 0 8px #ff2d3d; animation: tpulse 1.8s ease-in-out infinite; }
@keyframes tpulse { 50% { opacity: .4; transform: scale(.85); } }
.title-frost {
  background: radial-gradient(circle at 20% 25%, rgba(125, 211, 252, .45), transparent 55%), linear-gradient(135deg, #061a3a, #0b3b8f 50%, #061a3a);
  color: #e6f6ff; text-shadow: 0 0 6px #7dd3fc, 0 0 14px #38bdf8; border-color: rgba(186, 230, 253, .9); --tg: rgba(56, 189, 248, .75); --orn: '\2744';
}
.title-frost .title-orn { color: #bae6fd; text-shadow: 0 0 8px #38bdf8; }