/* Retro Arcade shared avatars: preset canvas icon or badge PNG inside a
   level frame. No filters anywhere, so long leaderboards stay cheap on phones
   and the RG36S. */
.raav{--s:28px;--ring:rgba(153,69,255,.75);position:relative;display:inline-block;flex:0 0 auto;
  width:var(--s);height:var(--s);border-radius:50%;vertical-align:middle;isolation:isolate}
.raav-in{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#140c24}
.raav-in canvas,.raav-in img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.raav-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(20,12,36,.95) 62%);
  font-family:'Audiowide',monospace;font-size:calc(var(--s) * .36);letter-spacing:0;color:#fff;line-height:1;
  text-shadow:0 0 6px var(--ring)}

/* LEVEL FRAMES. The glow ring around any avatar comes from the player's level
   (RAAvatars.frameFor, mirrors SQL frame_for_level). Calm and slow: no flicker,
   no opacity dips on rings. Only transform animates, only on pseudo-elements,
   one shared keyframe set. data-sm="1" (leaderboards, under 30px) drops orbs,
   sparkles and wide bloom so long lists stay clean and cheap.
   --w = ring width, scales with avatar size. */
.raav{--w:max(1.5px,calc(var(--s) * .045));--ring:rgba(170,150,210,.45);--glow:transparent;--bloom:0px}
.raav-in{box-shadow:0 0 0 var(--w) var(--ring),0 0 var(--bloom) var(--glow)}
.raav::before,.raav::after,.raav-fx::before,.raav-fx::after{content:none;position:absolute;pointer-events:none;border-radius:50%}
.raav-fx{position:absolute;inset:0;pointer-events:none;z-index:2}

/* Lv 1-4 Plain: hairline, no glow */
.raav[data-frame="plain"]{--w:1px;--ring:rgba(176,160,214,.42)}
/* Lv 5-9 Spark: thin mint, very faint glow */
.raav[data-frame="spark"]{--ring:#14F195;--glow:rgba(20,241,149,.32);--bloom:calc(var(--s) * .12)}
/* Lv 10-14 Glow: electric blue, soft glow */
.raav[data-frame="glow"]{--w:max(1.5px,calc(var(--s) * .05));--ring:#1ec8ff;--glow:rgba(0,194,255,.5);--bloom:calc(var(--s) * .2)}
/* Lv 15-19 Neon: hot pink tube, bright core plus bloom */
.raav[data-frame="neon"]{--w:max(2px,calc(var(--s) * .055));--ring:#ff2bd6}
.raav[data-frame="neon"] .raav-in{box-shadow:0 0 0 calc(var(--w) * .45) #ffd9f6,0 0 0 var(--w) #ff2bd6,
  0 0 calc(var(--s) * .14) rgba(255,43,214,.85),0 0 calc(var(--s) * .34) rgba(255,43,214,.38)}
/* Lv 20-24 Gold: gold ring, strong warm glow */
.raav[data-frame="gold"]{--w:max(2px,calc(var(--s) * .06))}
.raav[data-frame="gold"] .raav-in{box-shadow:0 0 0 calc(var(--w) * .4) #fff4c8,0 0 0 var(--w) #ffc93a,
  0 0 calc(var(--s) * .16) rgba(255,190,50,.85),0 0 calc(var(--s) * .4) rgba(255,150,20,.42)}
/* Lv 25-29 Twin: double gold ring, slow breathing bloom (scale only) */
.raav[data-frame="twin"]{--w:max(1.5px,calc(var(--s) * .045))}
.raav[data-frame="twin"] .raav-in{box-shadow:0 0 0 var(--w) #ffd256,0 0 0 calc(var(--w) * 2.2) #1a0f05,
  0 0 0 calc(var(--w) * 3.2) #ffbf2e,0 0 calc(var(--s) * .14) rgba(255,190,50,.7)}
.raav[data-frame="twin"]::before{content:"";inset:calc(var(--s) * -.2);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,200,70,.5),rgba(255,160,30,.22) 62%,transparent);
  animation:raavBreathe 5s ease-in-out infinite alternate}

/* Rotating rings: one masked conic ring drawn just outside the avatar */
.raav[data-frame="arcane"]::before,.raav[data-frame="orbit"]::before,.raav[data-frame="storm"]::before,
.raav[data-frame="nova"]::before,.raav[data-frame="legend"]::before{content:"";z-index:1;inset:calc(var(--w) * -1);
  background:var(--cone);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) - .5px),#000 calc(100% - var(--w)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) - .5px),#000 calc(100% - var(--w)));
  animation:raavSpin var(--spin,14s) linear infinite}
.raav[data-frame="arcane"],.raav[data-frame="orbit"],.raav[data-frame="storm"],
.raav[data-frame="nova"],.raav[data-frame="legend"]{--ring:transparent}

/* Lv 30-34 Arcane: purple ring, slow gradient sweep */
.raav[data-frame="arcane"]{--w:max(2px,calc(var(--s) * .06));--glow:rgba(153,69,255,.7);--bloom:calc(var(--s) * .26);--spin:12s;
  --cone:conic-gradient(#4a17b8,#7c3cf0 30%,#b98cff 46%,#f3e6ff 50%,#b98cff 54%,#7c3cf0 70%,#4a17b8)}
/* Lv 35-39 Orbit: purple to pink, one orbiting orb */
.raav[data-frame="orbit"]{--w:max(2px,calc(var(--s) * .06));--glow:rgba(200,60,255,.7);--bloom:calc(var(--s) * .28);--spin:10s;
  --cone:conic-gradient(#8a3dff,#c74bff 25%,#ff2bd6 50%,#c74bff 75%,#8a3dff)}
.raav[data-frame="orbit"]::after,.raav[data-frame="nova"]::after{content:"";z-index:3;inset:calc(var(--s) * -.14);
  background:radial-gradient(circle at 50% calc(var(--s) * .055),#fff 0 calc(var(--s) * .022),var(--orb) calc(var(--s) * .045),transparent calc(var(--s) * .085));
  animation:raavSpin var(--orbit,7s) linear infinite reverse}
.raav[data-frame="orbit"]{--orb:rgba(255,80,220,.9)}
/* Lv 40-44 Storm: cyan electric ring, rotating dashed energy arcs */
.raav[data-frame="storm"]{--w:max(2px,calc(var(--s) * .06));--glow:rgba(0,214,255,.85);--bloom:calc(var(--s) * .32);--spin:9s;
  --cone:conic-gradient(#00a6ff,#7ff3ff 12%,#00c2ff 25%,#e9fdff 37%,#00a6ff 50%,#7ff3ff 62%,#00c2ff 75%,#e9fdff 87%,#00a6ff)}
.raav[data-frame="storm"]::after{content:"";z-index:-1;inset:calc(var(--w) * -2.4);
  background:repeating-conic-gradient(rgba(140,245,255,.8) 0 10deg,transparent 10deg 30deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) * .6),#000 calc(100% - var(--w) * .5));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--w) * .6),#000 calc(100% - var(--w) * .5));
  animation:raavSpin 16s linear infinite reverse}
/* Lv 45-49 Nova: cyan to white, two orbs, large soft bloom */
.raav[data-frame="nova"]{--w:max(2px,calc(var(--s) * .065));--spin:11s;--orbit:8s;--orb:rgba(120,240,255,.95);
  --cone:conic-gradient(#00c2ff,#bff6ff 20%,#fff 30%,#5fdcff 50%,#fff 70%,#bff6ff 80%,#00c2ff)}
.raav[data-frame="nova"] .raav-in{box-shadow:0 0 calc(var(--s) * .16) rgba(160,240,255,.9),0 0 calc(var(--s) * .45) rgba(0,194,255,.45)}
.raav[data-frame="nova"]::after{
  background:radial-gradient(circle at 50% calc(var(--s) * .055),#fff 0 calc(var(--s) * .022),var(--orb) calc(var(--s) * .045),transparent calc(var(--s) * .085)),
             radial-gradient(circle at 50% calc(100% - var(--s) * .055),#fff 0 calc(var(--s) * .02),var(--orb) calc(var(--s) * .04),transparent calc(var(--s) * .08))}
/* Lv 50 Legend: prismatic ring, outer bloom, twinkling sparkles (dots only) */
.raav[data-frame="legend"]{--w:max(2.5px,calc(var(--s) * .07));--spin:16s;
  --cone:conic-gradient(#ff4d6d,#ffb000,#f9f003,#14F195,#00C2FF,#6b5bff,#d23cff,#ff4d6d)}
.raav[data-frame="legend"] .raav-in{box-shadow:0 0 calc(var(--s) * .14) rgba(255,255,255,.55),
  0 0 calc(var(--s) * .3) rgba(255,120,220,.45),0 0 calc(var(--s) * .55) rgba(0,194,255,.3)}
.raav[data-frame="legend"]::after{content:"";z-index:-1;inset:calc(var(--s) * -.3);
  background:conic-gradient(rgba(255,80,120,.28),rgba(255,200,0,.24),rgba(20,241,149,.24),rgba(0,194,255,.28),rgba(210,60,255,.28),rgba(255,80,120,.28));
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);
  animation:raavSpin 24s linear infinite reverse}
.raav[data-frame="legend"] .raav-fx::before,.raav[data-frame="legend"] .raav-fx::after{content:"";
  width:calc(var(--s) * .11);height:calc(var(--s) * .11);
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,.85) 30%,rgba(255,220,255,.4) 55%,transparent);
  animation:raavTwinkle 3.2s ease-in-out infinite alternate}
.raav[data-frame="legend"] .raav-fx::before{left:-6%;top:6%}
.raav[data-frame="legend"] .raav-fx::after{right:-4%;bottom:2%;animation-delay:-1.6s;animation-duration:2.7s}
.raav[data-frame="legend"] .raav-fx>i{position:absolute;right:0;top:-6%;width:calc(var(--s) * .08);height:calc(var(--s) * .08);border-radius:50%;
  background:radial-gradient(closest-side,#fff,rgba(190,240,255,.6) 45%,transparent);animation:raavTwinkle 3.8s ease-in-out -0.9s infinite alternate}

/* Small sizes (leaderboards): keep the ring and colour, drop the extras */
.raav[data-sm="1"]::after,.raav[data-sm="1"] .raav-fx{display:none}
.raav[data-sm="1"][data-frame="neon"] .raav-in{box-shadow:0 0 0 1px #ffd9f6,0 0 0 2px #ff2bd6,0 0 5px rgba(255,43,214,.8)}
.raav[data-sm="1"][data-frame="gold"] .raav-in{box-shadow:0 0 0 1px #fff4c8,0 0 0 2px #ffc93a,0 0 6px rgba(255,190,50,.8)}
.raav[data-sm="1"][data-frame="twin"] .raav-in{box-shadow:0 0 0 1.2px #ffd256,0 0 0 2.4px #1a0f05,0 0 0 3.4px #ffbf2e,0 0 5px rgba(255,190,50,.6)}
.raav[data-sm="1"][data-frame="twin"]::before{inset:-4px}
.raav[data-sm="1"]{--bloom:calc(var(--s) * .18)}
.raav[data-sm="1"][data-frame="plain"]{--bloom:0px}
.raav[data-sm="1"][data-frame="nova"] .raav-in,.raav[data-sm="1"][data-frame="legend"] .raav-in{box-shadow:0 0 5px rgba(255,255,255,.6),0 0 9px rgba(0,194,255,.45)}
.raav[data-sm="1"][data-frame="legend"] .raav-in{box-shadow:0 0 5px rgba(255,255,255,.6),0 0 10px rgba(255,120,220,.45)}

@keyframes raavSpin{to{transform:rotate(1turn)}}
@keyframes raavBreathe{from{transform:scale(.9)}to{transform:scale(1.08)}}
@keyframes raavTwinkle{0%{transform:scale(.35);opacity:.35}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.raav::before,.raav::after,.raav-fx::before,.raav-fx::after,.raav-fx>i{animation:none!important}}

/* Level tag */
.raav-lv{display:inline-block;flex:0 0 auto;padding:2px 5px 1px;border-radius:6px;font-family:'Audiowide',monospace;font-size:9px;
  line-height:1.2;letter-spacing:.5px;color:#14F195;background:rgba(20,241,149,.1);border:1px solid rgba(20,241,149,.45);
  white-space:nowrap;vertical-align:middle}

/* Leaderboard name cell */
.raav-row{display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:nowrap;vertical-align:middle}
.raav-row .raav{--s:26px}
.raav-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.raav-row{gap:4px}.raav-row .raav{--s:22px}.raav-lv{font-size:8px;padding:1px 3px}}

/* Small toast (share bonus) */
.raav-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:9500;transform:translate(-50%,12px);
  padding:10px 16px;border-radius:12px;font-family:'Audiowide',monospace;font-size:13px;letter-spacing:.5px;color:#fff;
  background:rgba(14,8,26,.92);border:1px solid #14F195;box-shadow:0 0 12px rgba(20,241,149,.5);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.raav-toast.on{opacity:1;transform:translate(-50%,0)}
.raav-toast.wait{border-color:#F9C80E;box-shadow:0 0 12px rgba(249,200,14,.45)}
@media (prefers-reduced-motion:reduce){.raav-toast{transition:none}}