/* ==========================================================================
   STAR FRAMES — the avatar frame a hero earns with stars (1-5) and the trim
   its difficulty tier adds (Extreme, Nightmare). Drawn around any avatar by
   avatarFrame() in js/17-stars.js, which sets the wrapper's font-size to the
   avatar's size (and --r0 to its corner radius, a circle by default) so every measure below is in em and one set of rules fits the
   28px ranking row and the 73px profile avatar alike. No raster art: rings are
   gradients, ornaments are the small vector images below.
   The vector ornaments were drawn once by a script; edit this file by hand.
   ========================================================================== */
:root{
  --frmLaurel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f8ff'/%3E%3Cstop offset='1' stop-color='%238ea3c4'/%3E%3C/linearGradient%3E %3Cpath id='l' d='M0 0C-3.4 -3 -3.6 -8.5 0 -13C3.6 -8.5 3.4 -3 0 0Z' fill='url(%23g)' stroke='%2351627f' stroke-width='.55'/%3E %3Cg id='b'%3E%3Cuse href='%23l' transform='translate(38.99 94.15) rotate(-110) scale(0.8)'/%3E%3Cuse href='%23l' transform='translate(31.78 91.69) rotate(-32.4) scale(0.85)'/%3E%3Cuse href='%23l' transform='translate(25.09 88.07) rotate(-90.8) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(19.09 83.38) rotate(-13.2) scale(0.95)'/%3E%3Cuse href='%23l' transform='translate(13.95 77.76) rotate(-71.6) scale(1)'/%3E%3Cuse href='%23l' transform='translate(9.83 71.36) rotate(6) scale(1.05)'/%3E%3Cuse href='%23l' transform='translate(6.83 64.36) rotate(-52.4) scale(1.1)'/%3E%3Cuse href='%23l' transform='translate(5.04 56.96) rotate(25.2) scale(1.15)'/%3E%3Cuse href='%23l' transform='translate(4.5 49.36) rotate(-33.2) scale(1.2)'/%3E%3Cuse href='%23l' transform='translate(5.25 41.79) rotate(44.4) scale(1.25)'/%3E%3Cuse href='%23l' transform='translate(7.24 34.44) rotate(-14) scale(1.3)'/%3E%3C/g%3E%3C/defs%3E %3Cuse href='%23b'/%3E%3Cuse href='%23b' transform='translate(100 0) scale(-1 1)'/%3E %3Ccircle cx='50' cy='96' r='3.1' fill='url(%23g)' stroke='%2351627f' stroke-width='.6'/%3E%3C/svg%3E");
  --frmRunes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(0 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -5L3 -2M-2 0L3 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -5L3 -2M-2 0L3 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(30 50 50) translate(50 5.2)'%3E%3Cpath d='M3 -4L-2 0L3 4' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M3 -4L-2 0L3 4' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5L3 -2L-2 1L3 5' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5L3 -2L-2 1L3 5' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(90 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -5L3 -1M-2 -1L3 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -5L3 -1M-2 -1L3 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -3L3 0L-2 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -3L3 0L-2 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(150 50 50) translate(50 5.2)'%3E%3Cpath d='M-3 5V-5L3 -2V5' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-3 5V-5L3 -2V5' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -5L3 -2M-2 0L3 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -5L3 -2M-2 0L3 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(210 50 50) translate(50 5.2)'%3E%3Cpath d='M3 -4L-2 0L3 4' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M3 -4L-2 0L3 4' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5L3 -2L-2 1L3 5' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5L3 -2L-2 1L3 5' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(270 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -5L3 -1M-2 -1L3 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -5L3 -1M-2 -1L3 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50) translate(50 5.2)'%3E%3Cpath d='M-2 5V-5M-2 -3L3 0L-2 3' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-2 5V-5M-2 -3L3 0L-2 3' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3Cg transform='rotate(330 50 50) translate(50 5.2)'%3E%3Cpath d='M-3 5V-5L3 -2V5' stroke='%23ff7a22' stroke-width='2.8' opacity='.4'/%3E%3Cpath d='M-3 5V-5L3 -2V5' stroke='%23ffd9a0' stroke-width='1.05'/%3E%3C/g%3E%3C/svg%3E");
  --frmStars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cpath d='M58.16 3.71L84.67 22.91L97.97 48.32L87.31 75.16L66.07 94.17L33.52 90.8L9.29 75.44L5.25 45.3L18.55 15.07Z' fill='none' stroke='%237fb4ff' stroke-width='.7' opacity='.8'/%3E%3Ccircle cx='73' cy='10.16' r='1' fill='%23a9d4ff'/%3E%3Ccircle cx='94.7' cy='35.48' r='1' fill='%23a9d4ff'/%3E%3Ccircle cx='76.38' cy='87.68' r='1' fill='%23a9d4ff'/%3E%3Ccircle cx='45.9' cy='96.82' r='1' fill='%23a9d4ff'/%3E%3Ccircle cx='5.57' cy='61.91' r='1' fill='%23a9d4ff'/%3E%3Ccircle cx='7.76' cy='29.4' r='1' fill='%23a9d4ff'/%3E%3Cpath d='M58.16 -0.49L59.34 2.54L62.36 3.71L59.34 4.89L58.16 7.91L56.99 4.89L53.96 3.71L56.99 2.54Z' fill='%23e7f4ff'/%3E%3Cpath d='M84.67 20.31L85.4 22.18L87.27 22.91L85.4 23.64L84.67 25.51L83.94 23.64L82.07 22.91L83.94 22.18Z' fill='%23e7f4ff'/%3E%3Cpath d='M97.97 45.72L98.7 47.6L100.57 48.32L98.7 49.05L97.97 50.92L97.24 49.05L95.37 48.32L97.24 47.6Z' fill='%23e7f4ff'/%3E%3Cpath d='M87.31 70.96L88.48 73.99L91.51 75.16L88.48 76.34L87.31 79.36L86.13 76.34L83.11 75.16L86.13 73.99Z' fill='%23e7f4ff'/%3E%3Cpath d='M66.07 91.57L66.8 93.44L68.67 94.17L66.8 94.89L66.07 96.77L65.35 94.89L63.47 94.17L65.35 93.44Z' fill='%23e7f4ff'/%3E%3Cpath d='M33.52 88.2L34.25 90.07L36.12 90.8L34.25 91.52L33.52 93.4L32.79 91.52L30.92 90.8L32.79 90.07Z' fill='%23e7f4ff'/%3E%3Cpath d='M9.29 71.24L10.47 74.26L13.49 75.44L10.47 76.61L9.29 79.64L8.12 76.61L5.09 75.44L8.12 74.26Z' fill='%23e7f4ff'/%3E%3Cpath d='M5.25 42.7L5.97 44.57L7.85 45.3L5.97 46.02L5.25 47.9L4.52 46.02L2.65 45.3L4.52 44.57Z' fill='%23e7f4ff'/%3E%3Cpath d='M18.55 12.47L19.28 14.34L21.15 15.07L19.28 15.8L18.55 17.67L17.82 15.8L15.95 15.07L17.82 14.34Z' fill='%23e7f4ff'/%3E%3C/svg%3E");
  --frmCrown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 44'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.55' stop-color='%23f0bf4a'/%3E%3Cstop offset='1' stop-color='%23b9791a'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M4 38L8 12L23 25L35 4L47 25L62 12L66 38Z' fill='url(%23g)' stroke='%236e4410' stroke-width='1.7' stroke-linejoin='round'/%3E %3Crect x='4' y='34' width='62' height='7' rx='2.4' fill='url(%23g)' stroke='%236e4410' stroke-width='1.5'/%3E %3Ccircle cx='35' cy='11' r='3.4' fill='%23ff5a8a' stroke='%23fff' stroke-width='.8'/%3E%3Ccircle cx='8' cy='15' r='2.5' fill='%236fe3ff' stroke='%23fff' stroke-width='.7'/%3E %3Ccircle cx='62' cy='15' r='2.5' fill='%236fe3ff' stroke='%23fff' stroke-width='.7'/%3E%3Ccircle cx='35' cy='37.5' r='2.2' fill='%237dff9b' stroke='%23fff' stroke-width='.7'/%3E %3Ccircle cx='20' cy='37.5' r='1.6' fill='%23ff5a8a'/%3E%3Ccircle cx='50' cy='37.5' r='1.6' fill='%23ff5a8a'/%3E%3C/svg%3E");
  --frmSparks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='72.07' cy='8.5' r='4.86' fill='%23ffffff' opacity='.18'/%3E%3Cpath d='M72.07 3.1L73.47 7.1L77.47 8.5L73.47 9.91L72.07 13.9L70.66 9.91L66.67 8.5L70.66 7.1Z' fill='%23ffffff'/%3E%3Ccircle cx='90.62' cy='71.6' r='3.42' fill='%23d6f3ff' opacity='.18'/%3E%3Cpath d='M90.62 67.8L91.6 70.61L94.42 71.6L91.6 72.58L90.62 75.4L89.63 72.58L86.82 71.6L89.63 70.61Z' fill='%23d6f3ff'/%3E%3Ccircle cx='23.72' cy='88.96' r='4.14' fill='%23ffffff' opacity='.18'/%3E%3Cpath d='M23.72 84.36L24.91 87.77L28.32 88.96L24.91 90.16L23.72 93.56L22.52 90.16L19.12 88.96L22.52 87.77Z' fill='%23ffffff'/%3E%3Ccircle cx='11.86' cy='24.28' r='3.06' fill='%23cfe8ff' opacity='.18'/%3E%3Cpath d='M11.86 20.88L12.75 23.39L15.26 24.28L12.75 25.16L11.86 27.68L10.98 25.16L8.46 24.28L10.98 23.39Z' fill='%23cfe8ff'/%3E%3Ccircle cx='59.88' cy='96.46' r='2.34' fill='%23ffffff' opacity='.18'/%3E%3Cpath d='M59.88 93.86L60.55 95.79L62.48 96.46L60.55 97.14L59.88 99.06L59.2 97.14L57.28 96.46L59.2 95.79Z' fill='%23ffffff'/%3E%3C/svg%3E");
  --frmCracks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M56.49 9.01L53.84 6.07L50.81 2.81L47.31 -0.73L43.45 -3M77.61 19.01L79.67 16.7L82.06 14.01L83.79 12.07L85.86 9.76M89.97 38.84L94.18 40.94L97.28 43.71L100.7 46.84L104.4 50.42M89.67 62.2L92.58 61.48L95.97 60.69L99.85 59.77L102.73 58.43M76.79 81.7L77.58 85.05L78.46 88.9L78.54 92.02L78.7 95.62M55.42 91.14L59 94.19L62.76 95.96L66.98 97.88L71.73 99.87M32.33 87.55L31.22 89.9L29.9 92.71L28.37 95.97L27.26 98.32M14.84 72.05L10.65 71L5.99 69.67L2.28 67.43L-1.8 64.91M8.5 49.57L4.91 51.11L2.38 52.84L-0.57 54.79L-3.94 57.03M15.31 27.22L14.01 24.51L12.46 21.39L10.7 17.81L9.9 14.74M33.12 12.09L29.05 10.62L24.44 9.13L20.12 8.92L15.32 8.74' stroke='%23ff2d55' stroke-width='3' opacity='.35'/%3E%3Cpath d='M56.49 9.01L53.84 6.07L50.81 2.81L47.31 -0.73L43.45 -3M77.61 19.01L79.67 16.7L82.06 14.01L83.79 12.07L85.86 9.76M89.97 38.84L94.18 40.94L97.28 43.71L100.7 46.84L104.4 50.42M89.67 62.2L92.58 61.48L95.97 60.69L99.85 59.77L102.73 58.43M76.79 81.7L77.58 85.05L78.46 88.9L78.54 92.02L78.7 95.62M55.42 91.14L59 94.19L62.76 95.96L66.98 97.88L71.73 99.87M32.33 87.55L31.22 89.9L29.9 92.71L28.37 95.97L27.26 98.32M14.84 72.05L10.65 71L5.99 69.67L2.28 67.43L-1.8 64.91M8.5 49.57L4.91 51.11L2.38 52.84L-0.57 54.79L-3.94 57.03M15.31 27.22L14.01 24.51L12.46 21.39L10.7 17.81L9.9 14.74M33.12 12.09L29.05 10.62L24.44 9.13L20.12 8.92L15.32 8.74' stroke='%23ff7a8e' stroke-width='.95'/%3E%3C/svg%3E");
}

.profSlot{display:flex;flex:none}
.frm{position:relative;display:inline-flex;flex:none;isolation:isolate;line-height:0;vertical-align:middle;--r0:50%;--w:.1em}
.frm.sm{--w:.07em}
.frm>i{position:absolute;display:block;pointer-events:none;border-radius:var(--r0)}
.frmBack{inset:calc(var(--w)*-1);z-index:-2;border-radius:calc(var(--r0) + var(--w))}
.frmTrim{inset:calc(var(--w)*-2.2);z-index:-3;border-radius:calc(var(--r0) + var(--w)*2.2)}
.frm.s0>.frmTrim{inset:calc(var(--w)*-1);border-radius:calc(var(--r0) + var(--w))}
.frmOrn{inset:calc(var(--w)*-2);z-index:1}
.frmSpark,.frmEmber{inset:calc(var(--w)*-3);z-index:2}

/* ---------- star 1: bronze-gold ring, one gem ---------- */
.frm.s1>.frmBack{background:conic-gradient(from 200deg,#7a4a14,#f6d37a 16%,#b9811f 36%,#fff0b0 50%,#a56a18 68%,#f1c85e 84%,#7a4a14);box-shadow:0 0 .2em #ffcf6a77}
.frm.s1>.frmOrn{inset:auto;left:50%;top:calc(var(--w)*-2.5);width:.23em;height:.23em;margin-left:-.115em;border-radius:.04em;transform:rotate(45deg);
  background:linear-gradient(135deg,#fff,#7fe9ff 52%,#1a7fb0);border:.02em solid #ffe9a8;box-shadow:0 0 .14em #6fe3ffdd}

/* ---------- star 2: silver ring, laurels, a shine that sweeps ---------- */
.frm.s2>.frmBack{background:conic-gradient(from 20deg,#76839c,#f5f8ff 14%,#a6b3ca 32%,#ffffff 48%,#8793ad 66%,#e4ebf8 84%,#76839c);box-shadow:0 0 .24em #cfe0ff88;overflow:hidden}
.frm.s2>.frmBack::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,transparent 38%,#ffffffd9 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:frmShine 4.2s ease-in-out infinite}
.frm.s2>.frmOrn{inset:calc(var(--w)*-1.7);background:var(--frmLaurel) center/100% 100% no-repeat}

/* ---------- star 3: runed ring, slow flame ---------- */
.frm.s3>.frmBack{background:conic-gradient(from 0deg,#25093a,#7a3cc2 18%,#26093b 34%,#b66bff 52%,#25093a 70%,#8d4fe0 86%,#25093a);box-shadow:0 0 .26em #ff8a2bcc,0 0 .1em #c58bffee;animation:frmFlame 2.6s ease-in-out infinite}
.frm.s3>.frmOrn{inset:calc(var(--w)*-1.9);background:var(--frmRunes) center/100% 100% no-repeat;animation:frmSpin 30s linear infinite}

/* ---------- star 4: astral ring, a constellation turning slowly ---------- */
.frm.s4>.frmBack{background:conic-gradient(from 60deg,#070d2c,#2f56c4 20%,#0a1236 36%,#6aaeff 52%,#0a1236 70%,#3c66d6 86%,#070d2c);box-shadow:0 0 .3em #5aa8ffaa,inset 0 0 .06em #cfe8ff}
.frm.s4>.frmOrn{inset:calc(var(--w)*-2);background:var(--frmStars) center/100% 100% no-repeat;animation:frmSpin 44s linear infinite reverse}
.frm.s4>.frmSpark,.frm.s5>.frmSpark{background:var(--frmSparks) center/100% 100% no-repeat;animation:frmTwinkle 2.8s ease-in-out infinite}

/* ---------- star 5: prismatic ring, a crown, a pulsing halo ---------- */
.frm.s5>.frmBack{background:conic-gradient(from 0deg,#ff6b6b,#ffd36a,#7dff9b,#6be1ff,#9a7dff,#ff7ad9,#ff6b6b);box-shadow:0 0 .34em #ffffff99,0 0 .7em #ff7ad955;animation:frmHue 7s linear infinite,frmHalo 3.2s ease-in-out infinite}
.frm.s5>.frmOrn{inset:auto;left:50%;top:-.56em;width:.74em;height:.46em;margin-left:-.37em;border-radius:0;background:var(--frmCrown) center/contain no-repeat;filter:drop-shadow(0 0 .08em #ffe08a)}
.frm.s5.sm>.frmOrn{top:-.3em;width:.62em;height:.39em;margin-left:-.31em}
.frm.s5>.frmSpark{animation-duration:2.2s}

/* ---------- difficulty trims: Extreme and Nightmare ---------- */
.frm.t-ext>.frmTrim{background:conic-gradient(from 90deg,#ff3d00,#ffb300 18%,#ff5a00 34%,#ffe27a 48%,#ff3d00 64%,#ff8a2b 82%,#ff3d00);box-shadow:0 0 .22em #ff6a1acc;animation:frmFlame 1.9s ease-in-out infinite}
.frm.t-ext>.frmEmber::before,.frm.t-ext>.frmEmber::after{content:"";position:absolute;bottom:18%;width:.06em;height:.06em;border-radius:50%;background:#ffb347;box-shadow:0 0 .08em #ff6a1a;animation:frmRise 2.4s linear infinite}
.frm.t-ext>.frmEmber::before{left:24%}
.frm.t-ext>.frmEmber::after{left:70%;animation-delay:-1.2s;animation-duration:2.9s}
.frm.t-night>.frmTrim{background:var(--frmCracks) center/100% 100% no-repeat,conic-gradient(from 30deg,#07040c,#2a1030 20%,#0b0610 40%,#3a1442 58%,#07040c 76%,#241028 90%,#07040c);box-shadow:0 0 .26em #ff2d5588,inset 0 0 .05em #ff2d55;animation:frmCrimson 2.4s ease-in-out infinite}
.frm.t-night>.frmEmber::before,.frm.t-night>.frmEmber::after{content:"";position:absolute;bottom:20%;width:.05em;height:.05em;border-radius:50%;background:#ff5a78;box-shadow:0 0 .1em #ff2d55;animation:frmRise 3.1s linear infinite}
.frm.t-night>.frmEmber::before{left:30%}
.frm.t-night>.frmEmber::after{left:64%;animation-delay:-1.5s}

@keyframes frmShine{0%,25%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@keyframes frmSpin{to{transform:rotate(360deg)}}
@keyframes frmHue{to{filter:hue-rotate(360deg)}}
@keyframes frmHalo{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes frmFlame{0%,100%{filter:brightness(.92) saturate(1)}45%{filter:brightness(1.18) saturate(1.2)}70%{filter:brightness(1) saturate(1.1)}}
@keyframes frmCrimson{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.35)}}
@keyframes frmTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes frmRise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-.7em);opacity:0}}
@media (prefers-reduced-motion:reduce){.frm,.frm>i,.frm>i::before,.frm>i::after{animation:none!important}}