/* Bola de XP (alpha.86): anel de progresso + líquido que sobe conforme o XP do nível. */
.xp-orb { --xp: 0%; --xp-color: #F5B942; --xp-size: 64px; position: relative; display: inline-grid; place-items: center; width: var(--xp-size); height: var(--xp-size); flex: none; }
.xp-orb-glass { position: absolute; inset: 12%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--xp-color) 18%, var(--surface, #1c1729)), var(--surface-2, #221c32)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xp-color) 28%, transparent), inset 0 -8px 18px rgba(0, 0, 0, .18); display: grid; place-items: center; isolation: isolate; }
.xp-orb-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--xp); min-height: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--xp-color) 85%, #fff), var(--xp-color)); transition: height .9s cubic-bezier(.2, .8, .3, 1); z-index: 0; }
.xp-orb-fill i { position: absolute; left: 50%; top: -9px; width: 200%; height: 200%; margin-left: -100%; border-radius: 42%; background: color-mix(in srgb, var(--xp-color) 55%, #fff); opacity: .42; animation: xp-wave 7s linear infinite; }
.xp-orb-fill i + i { top: -7px; border-radius: 38%; opacity: .3; animation-duration: 11s; animation-direction: reverse; }
@keyframes xp-wave { to { transform: rotate(360deg); } }
.xp-orb-glass b { position: relative; z-index: 1; font-family: var(--font-display, inherit); font-weight: 800; font-size: calc(var(--xp-size) * .34); line-height: 1; color: var(--text, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 6px rgba(0, 0, 0, .25); }
.xp-orb-glass::after { content: ""; position: absolute; z-index: 2; left: 18%; top: 10%; width: 36%; height: 20%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent); transform: rotate(-24deg); pointer-events: none; }
.xp-orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xp-orb-ring circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.xp-orb-track { stroke: color-mix(in srgb, var(--xp-color) 18%, transparent); }
.xp-orb-bar { stroke: var(--xp-color); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--xp-color) 60%, transparent)); transition: stroke-dasharray .9s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .xp-orb-fill i { animation: none; } .xp-orb-fill, .xp-orb-bar { transition: none; } }