/* =========================================================
   Soul orb — the site currency icon, styled after in-game Deadlock souls:
   a glossy green sphere with a highlight. Kept plain on purpose — only the soul that flies
   across Soul Rush gets the glow and rays.
   Applies to the balance icon (.bal i), Soul Rush's counter (.souls i) and flying souls (.orb).
   Add class="soul" to any <i> to use it elsewhere.
   The element itself only carries the glow; ::before draws the rays, ::after the sphere on top.
   ========================================================= */
.bal i,.souls i,.soul,.orb{
  --s:16px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:none}
.orb{box-shadow:0 0 calc(var(--s)*.4) calc(var(--s)*.06) rgba(61,242,165,.8),0 0 calc(var(--s)*1.2) rgba(61,242,165,.4)}
/* light rays */
.orb::before{
  content:"";position:absolute;inset:-85%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 8deg,rgba(125,255,201,.6) 0 5deg,transparent 5deg 26deg,rgba(125,255,201,.32) 26deg 29deg,transparent 29deg 52deg);
  -webkit-mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.45) 40%,transparent 68%);mask:radial-gradient(circle,#000 22%,rgba(0,0,0,.45) 40%,transparent 68%);
  animation:soulRays 9s linear infinite}
/* sphere: specular highlight, rim light, glowing core */
.bal i::after,.souls i::after,.soul::after,.orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 34% 28%,#fff 0 9%,rgba(255,255,255,.8) 13%,transparent 27%),
    radial-gradient(circle at 70% 82%,rgba(190,255,230,.55) 0 7%,transparent 24%),
    radial-gradient(circle at 50% 55%,#eafff6 0 10%,#7dffc9 24%,#2fe39a 44%,#119a63 66%,#06492f 84%,#03301f 100%);
  box-shadow:inset 0 calc(var(--s)*-.12) calc(var(--s)*.2) rgba(0,0,0,.35)}
@keyframes soulRays{to{transform:rotate(360deg)}}

.bal i{--s:17px}
.bal{overflow:visible}
.souls i{--s:18px}
.orb{--s:20px;position:fixed}
.orb::before{inset:-110%}
@media (prefers-reduced-motion:reduce){.bal i::before,.souls i::before,.soul::before,.orb::before{animation:none}}

/* Gold coin — the free-play currency (add class "gold" to any soul icon) */
.bal i.gold::after,.souls i.gold::after,.soul.gold::after{
  background:
    radial-gradient(circle at 34% 28%,#fffbe6 0 9%,rgba(255,251,230,.6) 14%,transparent 26%),
    radial-gradient(circle,transparent 0 52%,rgba(120,72,8,.55) 55%,transparent 60%),
    radial-gradient(circle at 50% 55%,#ffe9a8 0 30%,#f5c25a 55%,#c8871c 78%,#7a4a0a 100%);
  box-shadow:inset 0 0 0 calc(var(--s)*.07) #a8690f,inset 0 calc(var(--s)*-.12) calc(var(--s)*.2) rgba(0,0,0,.3)}