/* صورة شخصية دائرية + إطارات CSS فقط. الاستخدام: <div class="avf frame-gold" style="--s:96px"><div class="av">…</div></div> */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.avf{--s:96px;--r:calc(var(--s)*.07);position:relative;flex:0 0 var(--s);width:var(--s);height:var(--s);border-radius:50%;padding:var(--r);box-sizing:border-box;background:transparent;display:inline-block}
.avf .av{width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#b44cff,#22e4ff);display:flex;align-items:center;justify-content:center;font-weight:900;color:#0c0818;font-size:calc(var(--s)*.42);box-sizing:border-box;border:2px solid #0c0818}
.avf .av img{width:100%;height:100%;object-fit:cover;display:block}
.avf.frame-none{padding:2px;background:#2f3a5c}
.avf.frame-bronze{background:linear-gradient(135deg,#f0b27a,#a0622d 50%,#6b3a14);box-shadow:0 0 8px rgba(176,108,50,.6)}
.avf.frame-silver{background:linear-gradient(135deg,#fff,#aeb6c2 50%,#6f7885);box-shadow:0 0 10px rgba(210,220,235,.55)}
.avf.frame-gold{background:linear-gradient(135deg,#fff3a0,#ffd23f 45%,#b8860b);box-shadow:0 0 14px rgba(255,210,63,.75)}
.avf.frame-emerald{background:linear-gradient(135deg,#9ff7c8,#16c172 50%,#07643a);box-shadow:0 0 14px rgba(22,193,114,.75),inset 0 0 6px rgba(255,255,255,.4)}
.avf.frame-sapphire{background:linear-gradient(135deg,#a9c8ff,#2f6bff 50%,#0b2a8a);box-shadow:0 0 16px rgba(47,107,255,.85),inset 0 0 6px rgba(255,255,255,.4)}
.avf.frame-ruby{background:linear-gradient(135deg,#ffb3c1,#e0143c 50%,#6e0a20);box-shadow:0 0 18px rgba(224,20,60,.85),inset 0 0 6px rgba(255,255,255,.4)}
.avf.frame-diamond{background:conic-gradient(from var(--a),#fff,#9ff3ff,#5ab8ff,#fff,#d6f7ff,#7ad7ff,#fff);box-shadow:0 0 18px rgba(130,230,255,.9);animation:avspin 3s linear infinite}
.avf.frame-legend{background:conic-gradient(from var(--a),#ff2e88,#ffd23f,#22e46b,#22e4ff,#b44cff,#ff2e88);box-shadow:0 0 22px rgba(255,210,63,.9),0 0 36px rgba(180,76,255,.55);animation:avspin 2.4s linear infinite}
.avf.frame-legend::after{content:"👑";position:absolute;top:calc(var(--s)*-.30);left:50%;transform:translateX(-50%) rotate(-8deg);font-size:calc(var(--s)*.38);line-height:1;filter:drop-shadow(0 2px 3px #000)}
@keyframes avspin{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.avf.frame-diamond,.avf.frame-legend{animation:none}}
/* اختيار الإطارات في صفحة الحساب */
.frgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:12px;padding-top:12px}
.frit{background:rgba(255,255,255,.05);border:2px solid transparent;border-radius:14px;padding:12px 4px 8px;cursor:pointer;color:#fff;font-size:13px;font-weight:800;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit}
.frit.sel{border-color:#ffd23f;background:rgba(255,210,63,.12)}
.frit.lock{cursor:not-allowed}
.frit.lock .avf{filter:grayscale(1) brightness(.6);animation:none}
.frit.lock .avf::after{animation:none}
.frit small{color:#a2a2b5;font-weight:700;font-size:12px}
.lockbadge{font-size:12px;color:#ffb3c1}

/* ===== إطارات المتجر (CSS فقط) ===== */
.avf.frame-neon{background:linear-gradient(135deg,#00ffd5,#ff00e6);box-shadow:0 0 6px #00ffd5,0 0 16px #ff00e6,0 0 28px rgba(255,0,230,.6);animation:avpulse 1.8s ease-in-out infinite}
.avf.frame-fire{background:conic-gradient(from var(--a),#ff3d00,#ffb300,#fff176,#ff6d00,#d50000,#ff3d00);box-shadow:0 0 14px #ff6d00,0 0 28px rgba(255,61,0,.6);animation:avspin 1.6s linear infinite}
.avf.frame-ice{background:linear-gradient(135deg,#ffffff,#9be7ff 40%,#3fa9f5 70%,#e6fbff);box-shadow:0 0 14px #9be7ff,inset 0 0 8px #fff}
.avf.frame-galaxy{background:conic-gradient(from var(--a),#12063a,#5b2bd6,#ff4fd8,#22e4ff,#12063a);box-shadow:0 0 16px #7b4dff,0 0 30px rgba(34,228,255,.5);animation:avspin 5s linear infinite}
@keyframes avpulse{50%{box-shadow:0 0 10px #00ffd5,0 0 26px #ff00e6,0 0 44px rgba(255,0,230,.8)}}
@media (prefers-reduced-motion:reduce){.avf.frame-neon,.avf.frame-fire,.avf.frame-galaxy{animation:none}}
/* هالات */
.avf.aura-pink{filter:drop-shadow(0 0 8px #ff2e88) drop-shadow(0 0 16px rgba(255,46,136,.7))}
.avf.aura-blue{filter:drop-shadow(0 0 8px #2f8bff) drop-shadow(0 0 16px rgba(47,139,255,.7))}
.avf.aura-gold{filter:drop-shadow(0 0 8px #ffd23f) drop-shadow(0 0 18px rgba(255,210,63,.75))}
.avf.aura-fire{animation:aurafire 1.2s ease-in-out infinite alternate}
@keyframes aurafire{from{filter:drop-shadow(0 0 6px #ff6d00) drop-shadow(0 0 12px #ff3d00)}to{filter:drop-shadow(0 0 12px #ffb300) drop-shadow(0 0 24px #ff3d00)}}
/* ألوان الأسماء والألقاب */
.nc-pink{color:#ff6fb1!important}.nc-cyan{color:#4fe9ff!important}.nc-gold{color:#ffd23f!important;text-shadow:0 0 8px rgba(255,210,63,.5)}
.nc-rainbow{background:linear-gradient(90deg,#ff2e88,#ffd23f,#22e46b,#22e4ff,#b44cff,#ff2e88);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:ncflow 3s linear infinite}
@keyframes ncflow{to{background-position:200% 0}}
.ttl{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:800;background:rgba(255,210,63,.18);color:#ffd23f;border:1px solid rgba(255,210,63,.5);vertical-align:middle}
@media (prefers-reduced-motion:reduce){.nc-rainbow,.avf.aura-fire{animation:none}}
.coinpill{display:inline-block;padding:3px 12px;border-radius:20px;font-weight:900;background:rgba(255,210,63,.15);border:1px solid #ffd23f;color:#ffd23f}