/* Global avatar frame layer. Used by profile, comments, login menu and popups. */
.avatar-wrap {position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: visible; flex-shrink: 0;}
.avatar-wrap > img,
.avatar-wrap > .avatar {display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 0;}
.avatar-wrap::after {content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 1;}
.avatar-wrap[data-avatar-frame=""]::after,
.avatar-wrap[data-avatar-frame="none"]::after {content: none;}

.avatar-wrap.frame-bronze::after,
.avatar-wrap[data-avatar-frame="bronze"]::after {border: 3px solid #cd7f32; box-shadow: 0 0 8px rgba(205,127,50,.50);}
.avatar-wrap.frame-silver::after,
.avatar-wrap[data-avatar-frame="silver"]::after {border: 3px solid #c0c0c8; box-shadow: 0 0 6px rgba(192,192,200,.40);}
.avatar-wrap.frame-gold::after,
.avatar-wrap[data-avatar-frame="gold"]::after {border: 3px solid #d4af37; box-shadow: 0 0 10px rgba(212,175,55,.55);}
.avatar-wrap.frame-platinum::after,
.avatar-wrap[data-avatar-frame="platinum"]::after {border: 3px solid #e5e4e2; box-shadow: 0 0 10px rgba(173,216,230,.65);}
.avatar-wrap.frame-chrome::after,
.avatar-wrap[data-avatar-frame="chrome"]::after {background: linear-gradient(135deg,#fff 0%,#888 25%,#fff 50%,#444 75%,#fff 100%); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px));}
.avatar-wrap.frame-obsidian::after,
.avatar-wrap[data-avatar-frame="obsidian"]::after {border: 3px solid #1a1a2e; box-shadow: 0 0 8px rgba(100,100,160,.45), inset 0 0 4px rgba(120,120,180,.30);}
.avatar-wrap.frame-ruby::after,
.avatar-wrap[data-avatar-frame="ruby"]::after {border: 3px solid #e0115f; box-shadow: 0 0 10px rgba(224,17,95,.55);}
.avatar-wrap.frame-emerald::after,
.avatar-wrap[data-avatar-frame="emerald"]::after {border: 3px solid #50c878; box-shadow: 0 0 10px rgba(80,200,120,.55);}
.avatar-wrap.frame-sapphire::after,
.avatar-wrap[data-avatar-frame="sapphire"]::after {border: 3px solid #0f52ba; box-shadow: 0 0 10px rgba(15,82,186,.60);}
.avatar-wrap.frame-amethyst::after,
.avatar-wrap[data-avatar-frame="amethyst"]::after {border: 3px solid #9966cc; box-shadow: 0 0 10px rgba(153,102,204,.55);}
.avatar-wrap.frame-fire::after,
.avatar-wrap[data-avatar-frame="fire"]::after {background: conic-gradient(from 0deg,#ff4500,#ff8c00,#ffd700,#ff4500,#ff0000,#ff4500); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 3s linear infinite; filter: drop-shadow(0 0 6px rgba(255,69,0,.70));}
.avatar-wrap.frame-ice::after,
.avatar-wrap[data-avatar-frame="ice"]::after {background: conic-gradient(from 0deg,#e0f7ff,#a8dadc,#fff,#cbeef7,#e0f7ff); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 10s linear infinite; filter: drop-shadow(0 0 5px rgba(168,218,220,.70));}
.avatar-wrap.frame-electric::after,
.avatar-wrap[data-avatar-frame="electric"]::after {border: 2px solid #00ffff; box-shadow: 0 0 14px #00ffff, 0 0 6px #fff, inset 0 0 6px rgba(0,255,255,.65); animation: avatar-frame-electric 1s ease-in-out infinite;}
.avatar-wrap.frame-toxic::after,
.avatar-wrap[data-avatar-frame="toxic"]::after {border: 2px solid #39ff14; box-shadow: 0 0 12px #39ff14, inset 0 0 4px rgba(57,255,20,.60); animation: avatar-frame-toxic 2s ease-in-out infinite;}
.avatar-wrap.frame-neon::after,
.avatar-wrap[data-avatar-frame="neon"]::after {border: 2px solid #ff0080; box-shadow: 0 0 12px #ff0080, inset 0 0 6px rgba(255,0,128,.60); animation: avatar-frame-neon 2.2s ease-in-out infinite;}
.avatar-wrap.frame-aurora::after,
.avatar-wrap[data-avatar-frame="aurora"]::after {background: conic-gradient(from 0deg,#ff6b9d,#c084fc,#60a5fa,#6ee7b7,#ff6b9d); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 6s linear infinite;}
.avatar-wrap.frame-holo::after,
.avatar-wrap[data-avatar-frame="holo"]::after {background: linear-gradient(45deg,#ff00aa,#00aaff,#aaff00,#ff00aa); background-size: 300% 300%; padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-holo 3.4s ease-in-out infinite;}
.avatar-wrap.frame-rainbow::after,
.avatar-wrap[data-avatar-frame="rainbow"]::after {background: conic-gradient(from 0deg,#ff0000,#ff8c00,#ffd700,#00ff00,#00bfff,#4b0082,#9400d3,#ff0000); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 5s linear infinite;}
.avatar-wrap.frame-galaxy::after,
.avatar-wrap[data-avatar-frame="galaxy"]::after {background: conic-gradient(from 0deg,#0c0032,#190061,#240090,#3500d3,#0c0032); padding: 4px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); animation: avatar-frame-spin 8s linear infinite; filter: drop-shadow(0 0 5px rgba(53,0,211,.65));}
.avatar-wrap.frame-phoenix::after,
.avatar-wrap[data-avatar-frame="phoenix"]::after {background: conic-gradient(from 0deg,#ffd700,#ff4500,#ff0000,#ffd700,#ff8c00,#ffd700); padding: 4px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); animation: avatar-frame-spin 2.5s linear infinite; filter: drop-shadow(0 0 8px rgba(255,69,0,.85));}
.avatar-wrap.frame-void::after,
.avatar-wrap[data-avatar-frame="void"]::after {background: conic-gradient(from 0deg,#000,#2a0a4a,#000,#1a0033,#000); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 12s linear infinite; box-shadow: 0 0 8px rgba(106,13,173,.55);}
.avatar-wrap.frame-kami::after,
.avatar-wrap[data-avatar-frame="kami"]::after {background: conic-gradient(from 0deg,#ffd700,#fff,#ffd700,#ff5f1f,#ffd700); padding: 4px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); animation: avatar-frame-spin 4s linear infinite; filter: drop-shadow(0 0 4px rgba(255,215,0,.60));}
.avatar-wrap.frame-sakura::after,
.avatar-wrap[data-avatar-frame="sakura"]::after {background: conic-gradient(from 0deg,#ffb7c5,#ff9aa8,#ffd1dc,#ffc0cb,#ffb7c5); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 7s linear infinite; filter: drop-shadow(0 0 5px rgba(255,183,197,.65));}
.avatar-wrap.frame-ocean::after,
.avatar-wrap[data-avatar-frame="ocean"]::after {background: conic-gradient(from 0deg,#006994,#00b4d8,#90e0ef,#0077b6,#006994); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 8s linear infinite;}
.avatar-wrap.frame-forest::after,
.avatar-wrap[data-avatar-frame="forest"]::after {border: 3px solid #2d6a4f; box-shadow: 0 0 10px rgba(45,106,79,.60), inset 0 0 4px rgba(82,183,136,.40);}
.avatar-wrap.frame-crystal::after,
.avatar-wrap[data-avatar-frame="crystal"]::after {background: conic-gradient(from 0deg,#fff,#a8e6cf,#fff,#bae8e8,#fff); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); filter: drop-shadow(0 0 4px rgba(168,230,207,.70));}
.avatar-wrap.frame-pearl::after,
.avatar-wrap[data-avatar-frame="pearl"]::after {border: 3px solid #f8edeb; box-shadow: 0 0 12px rgba(248,237,235,.75), inset 0 0 6px rgba(255,200,210,.40);}
.avatar-wrap.frame-demon::after,
.avatar-wrap[data-avatar-frame="demon"]::after {border: 2px solid #8b0000; box-shadow: 0 0 14px #ff0000, 0 0 4px #000, inset 0 0 6px rgba(139,0,0,.75); animation: avatar-frame-neon 1.6s ease-in-out infinite;}
.avatar-wrap.frame-angel::after,
.avatar-wrap[data-avatar-frame="angel"]::after {background: conic-gradient(from 0deg,#fff8e7,#fff,#fff8e7,#ffd700,#fff8e7); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 9s linear infinite; filter: drop-shadow(0 0 7px rgba(255,248,231,.85));}
.avatar-wrap.frame-royal::after,
.avatar-wrap[data-avatar-frame="royal"]::after {background: conic-gradient(from 0deg,#4a148c,#ffd700,#7b1fa2,#ffd700,#4a148c); padding: 4px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 4px)); animation: avatar-frame-spin 5s linear infinite; filter: drop-shadow(0 0 5px rgba(123,31,162,.70));}
.avatar-wrap.frame-shadow::after,
.avatar-wrap[data-avatar-frame="shadow"]::after {border: 2px solid #1a1a1a; box-shadow: 0 0 16px rgba(0,0,0,.95), 0 0 6px rgba(80,80,80,.60), inset 0 0 8px rgba(50,50,50,.70); animation: avatar-frame-toxic 2.4s ease-in-out infinite;}
.avatar-wrap.frame-midnight::after,
.avatar-wrap[data-avatar-frame="midnight"]::after {background: conic-gradient(from 0deg,#0d1b2a,#1b263b,#415a77,#0d1b2a); padding: 3px; -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 3px)); animation: avatar-frame-spin 14s linear infinite; box-shadow: 0 0 10px rgba(65,90,119,.65);}

@keyframes avatar-frame-neon {50% {box-shadow: 0 0 18px #ff0080, inset 0 0 10px rgba(255,0,128,.90);}}
@keyframes avatar-frame-spin {to {transform: rotate(360deg);}}
@keyframes avatar-frame-holo {50% {background-position: 100% 100%;}}
@keyframes avatar-frame-electric {0%,100% {opacity: 1;} 50% {opacity: .75; box-shadow: 0 0 22px #00ffff, 0 0 8px #fff, inset 0 0 8px rgba(0,255,255,.90);}}
@keyframes avatar-frame-toxic {50% {box-shadow: 0 0 18px #39ff14, inset 0 0 8px rgba(57,255,20,.90);}}

@media (prefers-reduced-motion: reduce) {
	.avatar-wrap::after {animation: none !important;}
}