/* Avatar frames (picked on the profile page). The frame sits on the element that holds
   the photo or initials (.avf .avf-<name>), drawn with ::before / ::after so any size works. */

.avf { position: relative; isolation: isolate; overflow: visible !important; }
.avf img { position: relative; z-index: 1; border-radius: 50%; }
.avf::before, .avf::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }

/* common */
.avf-classic::before { inset: -9%; border: 2px solid #fff; box-shadow: inset 0 0 0 2px #0a0a0a; }
.avf-mint::before { inset: -9%; border: 2px solid #3ccf91; box-shadow: 0 0 10px rgb(60 207 145 / .55); animation: avfGlow 2.4s ease-in-out infinite; }

/* rare */
.avf-orbit::before { inset: -12%; border: 1.5px dashed rgb(255 255 255 / .55); animation: avfSpin 14s linear infinite; }
.avf-orbit::after { inset: -12%; border: 2px solid transparent; border-top-color: #3ccf91; border-right-color: #3ccf91; animation: avfSpin 1.8s linear infinite; }
.avf-galaxy::before { inset: -20%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='93.0' cy='50.0' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='94.8' cy='60.2' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='88.7' cy='68.7' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='86.0' cy='78.7' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='76.8' cy='83.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='70.0' cy='91.4' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='59.6' cy='91.9' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='50.0' cy='96.0' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='40.4' cy='91.9' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='30.0' cy='91.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='23.2' cy='83.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='14.0' cy='78.7' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='11.3' cy='68.7' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='5.2' cy='60.2' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='7.0' cy='50.0' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='5.2' cy='39.8' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='11.3' cy='31.3' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='14.0' cy='21.3' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='23.2' cy='16.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='30.0' cy='8.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='40.4' cy='8.1' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='50.0' cy='4.0' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='59.6' cy='8.1' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='70.0' cy='8.6' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='76.8' cy='16.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='86.0' cy='21.3' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='88.7' cy='31.3' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='94.8' cy='39.8' r='1.6' fill='%23fff' opacity='1'/%3E%3C/svg%3E") center / contain no-repeat; animation: avfSpin 22s linear infinite; }
.avf-galaxy::after { inset: -20%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='93.0' cy='50.0' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='94.8' cy='60.2' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='88.7' cy='68.7' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='86.0' cy='78.7' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='76.8' cy='83.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='70.0' cy='91.4' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='59.6' cy='91.9' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='50.0' cy='96.0' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='40.4' cy='91.9' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='30.0' cy='91.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='23.2' cy='83.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='14.0' cy='78.7' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='11.3' cy='68.7' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='5.2' cy='60.2' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='7.0' cy='50.0' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='5.2' cy='39.8' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='11.3' cy='31.3' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='14.0' cy='21.3' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='23.2' cy='16.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='30.0' cy='8.6' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='40.4' cy='8.1' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='50.0' cy='4.0' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='59.6' cy='8.1' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='70.0' cy='8.6' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='76.8' cy='16.4' r='1.6' fill='%23fff' opacity='1'/%3E%3Ccircle cx='86.0' cy='21.3' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='88.7' cy='31.3' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='94.8' cy='39.8' r='1.6' fill='%23fff' opacity='1'/%3E%3C/svg%3E") center / 88% no-repeat; animation: avfSpin 14s linear infinite reverse, avfTwinkle 2.2s ease-in-out infinite; }

/* epic */
.avf-fire::before { inset: -30%; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 112 112'%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(0.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(22.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(45.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(67.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(90.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(112.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(135.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(157.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(180.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(202.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(225.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(247.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(270.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(292.5 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(315.0 50 50)'/%3E%3Cpath d='M50 1 C44.5 9.45 45.6 14 50 18 C54.4 14 55.5 9.45 50 1Z' fill='%23ff5a1f' transform='rotate(337.5 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(11.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(33.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(56.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(78.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(101.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(123.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(146.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(168.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(191.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(213.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(236.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(258.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(281.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(303.8 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(326.2 50 50)'/%3E%3Cpath d='M50 6 C46.4 11.2 47.12 14 50 18 C52.88 14 53.6 11.2 50 6Z' fill='%23ffb21a' transform='rotate(348.8 50 50)'/%3E%3Ccircle cx='50' cy='50' r='33.5' fill='none' stroke='%23ff7a1a' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; animation: avfFlicker .9s ease-in-out infinite alternate, avfSpin 30s linear infinite; }
.avf-fire::after { inset: -8%; border: 2px solid #ffb21a; box-shadow: 0 0 12px rgb(255 106 0 / .6); }
.avf-diamond::before { inset: -17%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='90.0,50.0 97.3,58.3 87.6,63.7 84.5,56.1' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='87.6,63.7 91.6,74.0 80.6,75.7 80.3,67.5' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='80.6,75.7 80.9,86.8 70.0,84.6 72.5,76.8' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='70.0,84.6 66.4,95.1 56.9,89.4 62.0,82.9' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='56.9,89.4 50.0,98.0 43.1,89.4 50.0,85.0' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='43.1,89.4 33.6,95.1 30.0,84.6 38.0,82.9' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='30.0,84.6 19.1,86.8 19.4,75.7 27.5,76.8' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='19.4,75.7 8.4,74.0 12.4,63.7 19.7,67.5' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='12.4,63.7 2.7,58.3 10.0,50.0 15.5,56.1' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='10.0,50.0 2.7,41.7 12.4,36.3 15.5,43.9' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='12.4,36.3 8.4,26.0 19.4,24.3 19.7,32.5' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='19.4,24.3 19.1,13.2 30.0,15.4 27.5,23.2' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='30.0,15.4 33.6,4.9 43.1,10.6 38.0,17.1' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='43.1,10.6 50.0,2.0 56.9,10.6 50.0,15.0' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='56.9,10.6 66.4,4.9 70.0,15.4 62.0,17.1' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='70.0,15.4 80.9,13.2 80.6,24.3 72.5,23.2' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='80.6,24.3 91.6,26.0 87.6,36.3 80.3,32.5' fill='%235cc8f0' stroke='%23e8fbff' stroke-width='.5'/%3E%3Cpolygon points='87.6,36.3 97.3,41.7 90.0,50.0 84.5,43.9' fill='%23bdf0ff' stroke='%23e8fbff' stroke-width='.5'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 4px rgb(140 220 255 / .5)); }
.avf-diamond::after { top: -14%; right: -10%; width: 34%; height: 34%; border-radius: 0; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8Z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; animation: avfSparkle 2.6s ease-in-out infinite; }
.avf-shield::before { inset: -9%; border: 2px solid #3ccf91; }
.avf-shield::after { right: -14%; bottom: -14%; width: 46%; height: 54%; border-radius: 0; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 1 L22 5 V13 C22 20 17.5 24.5 12 27 C6.5 24.5 2 20 2 13 V5Z' fill='%233ccf91' stroke='%230a0a0a' stroke-width='1.6'/%3E%3Cpath d='M7.5 13.5 L11 17 L17 10' fill='none' stroke='%23062b1c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* legendary */
.avf-crown::before { inset: -11%; border: 3px solid #f5c542; box-shadow: 0 0 0 2px #8a5a00, 0 0 14px rgb(245 197 66 / .55); animation: avfGold 3s ease-in-out infinite; }
.avf-crown::after { left: 50%; top: -52%; width: 78%; height: 50%; border-radius: 0; z-index: 2; transform: translateX(-50%) rotate(-6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M4 34 L8 10 L20 22 L32 4 L44 22 L56 10 L60 34Z' fill='%23f5c542' stroke='%238a5a00' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='4' y='32' width='56' height='6' rx='2' fill='%23e0a800' stroke='%238a5a00' stroke-width='2'/%3E%3Ccircle cx='32' cy='4.5' r='3.2' fill='%23ff4d6d' stroke='%238a5a00' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='10' r='2.6' fill='%235cc8f0' stroke='%238a5a00' stroke-width='1.2'/%3E%3Ccircle cx='56' cy='10' r='2.6' fill='%235cc8f0' stroke='%238a5a00' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='27' r='2.8' fill='%233ccf91' stroke='%238a5a00' stroke-width='1.2'/%3E%3C/svg%3E") center bottom / contain no-repeat; animation: avfBob 3s ease-in-out infinite; }

@keyframes avfSpin { to { transform: rotate(360deg); } }
@keyframes avfGlow { 50% { box-shadow: 0 0 18px rgb(60 207 145 / .85); } }
@keyframes avfTwinkle { 50% { opacity: .35; } }
@keyframes avfFlicker { from { transform: scale(.97); opacity: .9; } to { transform: scale(1.04); opacity: 1; } }
@keyframes avfSparkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: 0; } 40% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { opacity: 0; } }
@keyframes avfGold { 50% { box-shadow: 0 0 0 2px #8a5a00, 0 0 22px rgb(245 197 66 / .9); } }
@keyframes avfBob { 50% { transform: translateX(-50%) translateY(-6%) rotate(-6deg); } }

/* connection dot (state set on <html data-presence> by presence.js) */
.av-dot {
  --dot: #3ccf91; --ring: #0d0d0d;
  position: absolute; right: 0; bottom: 0; z-index: 3; width: clamp(10px, 31%, 15px); aspect-ratio: 1; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 0 2.5px var(--ring); transition: background-color .35s ease; pointer-events: none;
}
.av-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); animation: avDotPing 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
html[data-presence="away"] .av-dot { --dot: #f5a524; }
html[data-presence="away"] .av-dot::after { animation: none; opacity: 0; }
html[data-presence="offline"] .av-dot { --dot: #6b6b6b; }
html[data-presence="offline"] .av-dot::after { animation: none; opacity: 0; }
html[data-presence="offline"] .side-dot { background: #6b6b6b; box-shadow: 0 0 0 3px rgb(255 255 255 / .06); animation: none; }
.pf-av .av-dot { --ring: #141414; right: 3px; bottom: 3px; box-shadow: 0 0 0 3px var(--ring); }
.nav-me .av-dot { --ring: #0a0a0a; right: -1px; bottom: -1px; }
.app-top .acct-btn .av-dot { right: 0; bottom: 0; width: 12px; }
.side-av .av-dot { right: -1px; bottom: -1px; }
.side-me-link:hover .av-dot { --ring: #171717; }
.side-me.is-on .av-dot { --ring: #202020; }
.avf-shield > .av-dot { right: auto; left: 0; }            /* the shield badge owns the bottom-right corner */
.pf-av.avf-shield > .av-dot { left: 3px; }
@keyframes avDotPing { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .avf::before, .avf::after, .av-dot::after { animation: none !important; }
}