/* =========================================================
   MIDNIGHT BLACK — AVATAR FRAMES
   ЕДИНАЯ СИСТЕМА: data-frame="<frameKey>"
   Используется в:
   - магазине
   - профиле
   - за игровым столом

   СЛОИ:
   0) Сам элемент (background) = ВИДИМАЯ РАМКА
   1) ::after  = OUTER GLOW (ВОКРУГ рамки, СНАРУЖИ)
   2) ::before = INNER FX (анимация/текстура В рамке) — кольцом
   3) Дети (аватар/бейдж) всегда выше всего
   ========================================================= */


/* =========================================================
   BASE (усиленный и стабильный на iOS/Safari)
   ========================================================= */

.store-preview-avatar-frame,
.profile-avatar-frame,
.avatar-frame{
  position: relative;
  border-radius: 999px;

  /* толщина рамки */
  padding: 3px;

  /* дефолтный фон рамки */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;

  /* ВАЖНО: не резать glow */
  overflow: visible;

  /* iOS/Сафари: стабилизируем слои и blend */
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  /* полезно для браузера */
  will-change: transform;
}

/* OUTER GLOW — ВОКРУГ рамки.
   ВАЖНО: z-index НЕ -1 (iOS может “убить” слой под фоном родителя).
   Мы держим glow внутри stacking context (0), а контент выше (2). */
.store-preview-avatar-frame::after,
.profile-avatar-frame::after,
.avatar-frame::after{
  content: "";
  position: absolute;

  /* было -10px — усиливаем, чтобы glow реально “вылез” наружу */
  inset: -18px;

  border-radius: inherit;
  pointer-events: none;

  /* выключено по умолчанию, включаем у neon/fx */
  opacity: 0;

  /* сильнее и “ярче” (иначе на тёмном фоне выглядит как грязь) */
  filter: blur(22px) saturate(1.7) brightness(1.25);

  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  z-index: 0;

  /* делаем свечение “светом”, а не серой дымкой */
  mix-blend-mode: screen;

  will-change: transform, opacity, filter;
}

/* INNER FX (внутри рамки) — поверх рамки, но только кольцом
   ВАЖНО: маска должна соответствовать толщине рамки (padding: 3px),
   иначе эффект почти не виден, особенно на iOS.
*/
.store-preview-avatar-frame::before,
.profile-avatar-frame::before,
.avatar-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* по умолчанию выключено, включаем в fx ниже */
  opacity: 0;
  z-index: 1;

  /* КОЛЬЦО под padding: 3px
     было 6-7px => почти всё съедалось/размазывалось
  */
  -webkit-mask: radial-gradient(
    circle,
    transparent calc(100% - 4px),
    #000       calc(100% - 3px)
  );
  mask: radial-gradient(
    circle,
    transparent calc(100% - 4px),
    #000       calc(100% - 3px)
  );

  /* чтобы эффект читался поверх градиента рамки */
  mix-blend-mode: screen;

  /* iOS/вебкит: стабильнее композитинг */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Контент всегда выше glow и fx */
.store-preview-avatar-frame > *,
.profile-avatar-frame > *,
.avatar-frame > *{
  position: relative;
  z-index: 2;
}


/* =========================================================
   ANIMATIONS (усиленные — чтобы было видно на мобиле)
   ========================================================= */

@keyframes mbpGlowPulse {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.035); }
}

@keyframes mbpFrameDrift {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes mbpInnerPulse {
  0%,100% { opacity: .40; }
  50%     { opacity: .90; }
}


/* =========================================================
   10 FREE / BASE FRAMES (без внешнего свечения)
   ========================================================= */

/* 1) Gray */
[data-frame="frame_free_gray"]{
  background: linear-gradient(180deg, rgba(190,192,200,.55), rgba(120,125,140,.30));
  border-color: rgba(255,255,255,.14);
}

/* 2) Black */
[data-frame="frame_free_black"]{
  background: linear-gradient(180deg, rgba(40,42,55,.85), rgba(10,10,16,.75));
  border-color: rgba(255,255,255,.10);
}

/* 3) Blue */
[data-frame="frame_free_blue"]{
  background: linear-gradient(180deg, rgba(90,110,190,.55), rgba(25,30,60,.55));
  border-color: rgba(150,158,255,.18);
}

/* 4) Violet */
[data-frame="frame_free_violet"]{
  background: linear-gradient(180deg, rgba(140,95,190,.45), rgba(30,20,55,.55));
  border-color: rgba(200,180,255,.14);
}

/* 5) Midnight */
[data-frame="frame_free_midnight"]{
  background: linear-gradient(135deg, rgba(111,122,255,.40), rgba(0,255,195,.10));
  border-color: rgba(111,122,255,.22);
}

/* 6) Steel */
[data-frame="frame_free_steel"]{
  background: linear-gradient(180deg, rgba(160,165,175,.45), rgba(95,100,110,.35));
  border-color: rgba(255,255,255,.12);
}

/* 7) Onyx */
[data-frame="frame_free_onyx"]{
  background: linear-gradient(180deg, rgba(30,32,40,.90), rgba(12,12,18,.85));
  border-color: rgba(255,255,255,.09);
}

/* 8) Navy */
[data-frame="frame_free_navy"]{
  background: linear-gradient(180deg, rgba(60,70,120,.55), rgba(18,22,45,.65));
  border-color: rgba(120,130,255,.16);
}

/* 9) Plum */
[data-frame="frame_free_plum"]{
  background: linear-gradient(180deg, rgba(120,70,130,.45), rgba(40,25,50,.60));
  border-color: rgba(200,150,220,.14);
}

/* 10) Midnight Dual */
[data-frame="frame_free_midnight_dual"]{
  background: linear-gradient(135deg, rgba(111,122,255,.35), rgba(0,255,195,.18));
  border-color: rgba(111,122,255,.20);
}


/* =========================================================
   5 NEON FRAMES (внешнее свечение ВОКРУГ)
   ========================================================= */

/* общий включатель для neon: наружный glow (усилен) */
[data-frame^="frame_neon_"]::after{
  opacity: 1;
  animation: mbpGlowPulse 2.2s ease-in-out infinite;
}

/* Neon Blue */
[data-frame="frame_neon_blue"]{
  background: linear-gradient(120deg, rgba(111,122,255,.95), rgba(165,180,255,.45));
  border-color: rgba(150,158,255,.65);
}
[data-frame="frame_neon_blue"]::after{
  background:
    radial-gradient(circle, rgba(111,122,255,.95), transparent 62%),
    radial-gradient(circle, rgba(111,122,255,.35), transparent 72%);
}

/* Neon Red */
[data-frame="frame_neon_red"]{
  background: linear-gradient(120deg, rgba(255,72,132,.95), rgba(255,170,200,.35));
  border-color: rgba(255,110,160,.60);
}
[data-frame="frame_neon_red"]::after{
  background:
    radial-gradient(circle, rgba(255,72,132,.92), transparent 62%),
    radial-gradient(circle, rgba(255,72,132,.32), transparent 72%);
}

/* Neon Green */
[data-frame="frame_neon_green"]{
  background: linear-gradient(120deg, rgba(0,255,195,.85), rgba(190,255,240,.28));
  border-color: rgba(0,255,195,.55);
}
[data-frame="frame_neon_green"]::after{
  background:
    radial-gradient(circle, rgba(0,255,195,.80), transparent 62%),
    radial-gradient(circle, rgba(0,255,195,.30), transparent 72%);
}

/* Neon Gold */
[data-frame="frame_neon_gold"]{
  background: linear-gradient(120deg, rgba(255,215,0,.90), rgba(255,245,200,.30));
  border-color: rgba(255,215,0,.55);
}
[data-frame="frame_neon_gold"]::after{
  background:
    radial-gradient(circle, rgba(255,215,0,.78), transparent 62%),
    radial-gradient(circle, rgba(255,215,0,.26), transparent 72%);
}

/* Neon Purple */
[data-frame="frame_neon_purple"]{
  background: linear-gradient(120deg, rgba(170,96,255,.92), rgba(220,190,255,.32));
  border-color: rgba(170,96,255,.55);
}
[data-frame="frame_neon_purple"]::after{
  background:
    radial-gradient(circle, rgba(170,96,255,.85), transparent 62%),
    radial-gradient(circle, rgba(170,96,255,.30), transparent 72%);
}


/* =========================================================
   5 FX FRAMES (glow + внутренняя анимация В КОЛЬЦЕ)
   ========================================================= */

/* общий включатель FX */
[data-frame^="frame_fx_"]::after{
  opacity: 1;
  animation: mbpGlowPulse 2.4s ease-in-out infinite;
}

/* FX: внутренний слой (кольцо) — ВИДИМЫЙ и анимированный */
[data-frame^="frame_fx_"]::before{
  /* делаем читабельнее */
  opacity: .85;

  /* 2 анимации: вращение + пульс */
  animation:
    mbpFrameDrift 9.2s linear infinite,
    mbpInnerPulse 2.9s ease-in-out infinite;

  /* более контрастная “дорожка блика” по кольцу */
  background:
    conic-gradient(
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,.55) 22deg,
      rgba(255,255,255,0) 52deg,
      rgba(255,255,255,.25) 95deg,
      rgba(255,255,255,0) 140deg,
      rgba(255,255,255,.40) 190deg,
      rgba(255,255,255,0) 230deg,
      rgba(255,255,255,.18) 300deg,
      rgba(255,255,255,0) 360deg
    );

  /* добавляем чуть “свечения” прямо на кольце */
  filter: blur(.2px) saturate(1.15);

  transform-origin: 50% 50%;
}

/* Aurora */
[data-frame="frame_fx_aurora"]{
  background: linear-gradient(120deg, rgba(111,122,255,.90), rgba(0,255,195,.22));
  border-color: rgba(111,122,255,.55);
}
[data-frame="frame_fx_aurora"]::after{
  background:
    radial-gradient(circle at 30% 40%, rgba(111,122,255,.85), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(0,255,195,.45), transparent 62%);
}
[data-frame="frame_fx_aurora"]::before{
  background: conic-gradient(
    rgba(0,255,195,0),
    rgba(111,122,255,.55),
    rgba(0,255,195,0),
    rgba(255,255,255,.22),
    rgba(0,255,195,0)
  );
  animation-duration: 6.8s, 1.7s;
}

/* Ember */
[data-frame="frame_fx_ember"]{
  background: linear-gradient(120deg, rgba(255,72,132,.88), rgba(255,215,0,.18));
  border-color: rgba(255,110,160,.55);
}
[data-frame="frame_fx_ember"]::after{
  background:
    radial-gradient(circle at 50% 45%, rgba(255,72,132,.90), transparent 62%),
    radial-gradient(circle at 50% 45%, rgba(255,215,0,.20), transparent 74%);
}
[data-frame="frame_fx_ember"]::before{
  background: conic-gradient(
    rgba(255,215,0,0),
    rgba(255,72,132,.60),
    rgba(255,215,0,0),
    rgba(255,72,132,.32),
    rgba(255,215,0,0)
  );
  animation-duration: 6.2s, 1.6s;
}

/* Ice Circuit */
[data-frame="frame_fx_ice_circuit"]{
  background: linear-gradient(120deg, rgba(150,158,255,.92), rgba(70,80,140,.35));
  border-color: rgba(150,158,255,.60);
}
[data-frame="frame_fx_ice_circuit"]::after{
  background:
    radial-gradient(circle, rgba(111,122,255,.92), transparent 62%),
    radial-gradient(circle, rgba(150,158,255,.22), transparent 74%);
}
[data-frame="frame_fx_ice_circuit"]::before{
  background: repeating-conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.35) 10deg,
    rgba(255,255,255,0) 20deg
  );
  animation-duration: 7.0s, 1.7s;
}

/* Royal Mist */
[data-frame="frame_fx_royal_mist"]{
  background: linear-gradient(120deg, rgba(170,96,255,.90), rgba(111,122,255,.32));
  border-color: rgba(170,96,255,.55);
}
[data-frame="frame_fx_royal_mist"]::after{
  background:
    radial-gradient(circle at 45% 45%, rgba(170,96,255,.92), transparent 62%),
    radial-gradient(circle at 55% 55%, rgba(111,122,255,.25), transparent 76%);
  filter: blur(24px) saturate(1.8) brightness(1.2);
}
[data-frame="frame_fx_royal_mist"]::before{
  background: conic-gradient(
    rgba(111,122,255,0),
    rgba(170,96,255,.58),
    rgba(111,122,255,0),
    rgba(255,255,255,.20),
    rgba(111,122,255,0)
  );
  animation-duration: 6.6s, 1.8s;
}

/* Midnight Halo */
[data-frame="frame_fx_midnight_halo"]{
  background: linear-gradient(120deg, rgba(111,122,255,.92), rgba(5,5,15,.65));
  border-color: rgba(111,122,255,.55);
}
[data-frame="frame_fx_midnight_halo"]::after{
  background:
    radial-gradient(circle, rgba(111,122,255,.95), transparent 62%),
    radial-gradient(circle, rgba(0,255,195,.35), transparent 70%);
  animation-duration: 2.2s; /* ощутимо “дышит” */
}
[data-frame="frame_fx_midnight_halo"]::before{
  background: conic-gradient(
    rgba(255,255,255,0),
    rgba(111,122,255,.65),
    rgba(255,255,255,0),
    rgba(0,255,195,.38),
    rgba(255,255,255,0)
  );
  animation-duration: 5.8s, 1.6s; /* вращение видно */
}
/* =========================================================
   LEGACY 6 FRAMES — ЕДИНЫЙ ФОРМАТ ПО SLUG (без алиасов)
   data-frame = slug из БД
   ========================================================= */

/* ---------- FREE: Classic Midnight (slug) ---------- */
[data-frame="frame_classic_midnight"]{
  background: linear-gradient(180deg, rgba(32,34,46,.88), rgba(8,8,14,.92));
  border-color: rgba(255,255,255,.10);
}
[data-frame="frame_classic_midnight"]::after,
[data-frame="frame_classic_midnight"]::before{
  opacity: 0;
  animation: none;
}

/* ---------- FX behavior for the other 5 legacy frames ---------- */
[data-frame="frame_vip_diamond"]::before,
[data-frame="frame_neon_lava"]::before,
[data-frame="frame_emerald_pulse"]::before,
[data-frame="frame_royal_gold"]::before,
[data-frame="frame_bronza_v_dele"]::before{
  opacity: .85;
  animation:
    mbpFrameDrift 8.6s linear infinite,
    mbpInnerPulse 2.7s ease-in-out infinite;
  filter: blur(.22px) saturate(1.25);
}

[data-frame="frame_vip_diamond"]::after,
[data-frame="frame_neon_lava"]::after,
[data-frame="frame_emerald_pulse"]::after,
[data-frame="frame_royal_gold"]::after,
[data-frame="frame_bronza_v_dele"]::after{
  opacity: 1;
  animation: mbpGlowPulse 2.2s ease-in-out infinite;
}

/* ---------- frame_vip_diamond ---------- */
[data-frame="frame_vip_diamond"]{
  background: linear-gradient(135deg, rgba(190,220,255,.62), rgba(60,75,150,.35));
  border-color: rgba(220,240,255,.30);
}
[data-frame="frame_vip_diamond"]::after{
  background:
    radial-gradient(circle at 45% 40%, rgba(220,240,255,.85), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(111,122,255,.35), transparent 72%);
  filter: blur(24px) saturate(1.9) brightness(1.25);
}
[data-frame="frame_vip_diamond"]::before{
  background: repeating-conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(235,250,255,.55) 14deg,
    rgba(255,255,255,0) 28deg,
    rgba(190,220,255,.18) 40deg
  );
}

/* ---------- frame_neon_lava ---------- */
[data-frame="frame_neon_lava"]{
  background: linear-gradient(120deg, rgba(255,70,70,.86), rgba(255,160,70,.32));
  border-color: rgba(255,120,95,.55);
}
[data-frame="frame_neon_lava"]::after{
  background:
    radial-gradient(circle, rgba(255,70,70,.92), transparent 60%),
    radial-gradient(circle, rgba(255,160,70,.45), transparent 74%);
  filter: blur(26px) saturate(2.0) brightness(1.28);
}
[data-frame="frame_neon_lava"]::before{
  background: repeating-conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(255,190,120,.22) 10deg,
    rgba(255,72,132,.30) 18deg,
    rgba(255,255,255,0) 28deg
  );
  animation-duration: 6.2s, 2.1s;
}

/* ---------- frame_emerald_pulse ---------- */
[data-frame="frame_emerald_pulse"]{
  background: linear-gradient(120deg, rgba(0,255,195,.60), rgba(10,18,16,.78));
  border-color: rgba(0,255,195,.42);
}
[data-frame="frame_emerald_pulse"]::after{
  background:
    radial-gradient(circle at 45% 45%, rgba(0,255,195,.78), transparent 60%),
    radial-gradient(circle at 60% 55%, rgba(190,255,240,.18), transparent 75%);
  filter: blur(24px) saturate(1.9) brightness(1.18);
}
[data-frame="frame_emerald_pulse"]::before{
  background: conic-gradient(
    rgba(0,255,195,0),
    rgba(0,255,195,.52),
    rgba(0,255,195,0),
    rgba(255,255,255,.14),
    rgba(0,255,195,0)
  );
  animation-duration: 7.4s, 2.4s;
}

/* ---------- frame_royal_gold ---------- */
[data-frame="frame_royal_gold"]{
  background: linear-gradient(120deg, rgba(255,215,0,.78), rgba(170,96,255,.16));
  border-color: rgba(255,215,0,.45);
}
[data-frame="frame_royal_gold"]::after{
  background:
    radial-gradient(circle, rgba(255,215,0,.72), transparent 60%),
    radial-gradient(circle, rgba(170,96,255,.22), transparent 74%);
  filter: blur(26px) saturate(1.9) brightness(1.22);
}
[data-frame="frame_royal_gold"]::before{
  background: conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(255,245,210,.55) 16deg,
    rgba(255,255,255,0) 48deg,
    rgba(255,215,0,.18) 140deg,
    rgba(255,255,255,0) 220deg,
    rgba(170,96,255,.16) 300deg,
    rgba(255,255,255,0) 360deg
  );
  animation-duration: 8.8s, 2.9s;
}

/* ---------- frame_bronza_v_dele ---------- */
[data-frame="frame_bronza_v_dele"]{
  background: linear-gradient(135deg, rgba(190,115,55,.66), rgba(55,24,10,.82));
  border-color: rgba(210,140,80,.28);
}
[data-frame="frame_bronza_v_dele"]::after{
  background:
    radial-gradient(circle, rgba(190,115,55,.62), transparent 62%),
    radial-gradient(circle, rgba(255,160,90,.18), transparent 76%);
  filter: blur(24px) saturate(1.6) brightness(1.12);
}
[data-frame="frame_bronza_v_dele"]::before{
  background: repeating-conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(255,215,170,.18) 12deg,
    rgba(255,255,255,0) 26deg
  );
  animation-duration: 9.6s, 3.1s;
}

/* =========================================================
   DEFAULT GOLD — дефолтная рамка (шампанское золото с переливом)
   Ставится всем без выбранного скина (DEFAULT_FRAME_KEY в js).
   Деликатная: металл + медленный блик, мягкое свечение — не неон.
   ========================================================= */
[data-frame="frame_default_gold"]{
  background: conic-gradient(from 210deg,
    #9a742c, #e8c569 16%, #f6ecd0 30%, #e8c569 46%,
    #7d5c22 60%, #d9b95c 76%, #f2e2b6 88%, #9a742c);
  border-color: rgba(232,197,105,.55);
}
[data-frame="frame_default_gold"]::before{
  opacity: 1;
  background: conic-gradient(
    rgba(255,255,255,0) 0deg,
    rgba(255,248,225,.85) 12deg,
    rgba(255,255,255,0) 27deg,
    rgba(255,255,255,0) 178deg,
    rgba(255,244,214,.32) 194deg,
    rgba(255,255,255,0) 208deg,
    rgba(255,255,255,0) 360deg
  );
  animation: mbpFrameDrift 8s linear infinite;
}
[data-frame="frame_default_gold"]::after{
  opacity: .34;
  background:
    radial-gradient(circle, rgba(232,197,105,.6), transparent 60%),
    radial-gradient(circle, rgba(246,236,208,.22), transparent 74%);
}
@media (prefers-reduced-motion: reduce){
  [data-frame="frame_default_gold"]::before{ animation: none; }
}

/* =========================================================================
   КОЛЛЕКЦИИ МАГАЗИНА (scripts/seedCosmeticsExpansion.js)
   Все рамки — отдельные предметы. Базовая механика та же: фон кольца —
   background на элементе, ::before — внутреннее кольцо (маска 3px), ::after —
   внешнее свечение. Здесь всё задаётся явно, без наследования от fx-групп.
   ========================================================================= */

@keyframes mbpShimmer    { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes mbpLavaPulse  { 0%,100% { opacity: .55; filter: brightness(.9); } 50% { opacity: 1; filter: brightness(1.35); } }
@keyframes mbpArcFlicker { 0%,100% { opacity: .9; } 8% { opacity: .35; } 12% { opacity: 1; } 45% { opacity: .7; } 52% { opacity: 1; } 80% { opacity: .5; } }
@keyframes mbpSlowSpin   { to { transform: rotate(360deg); } }
@keyframes mbpSpinBack   { to { transform: rotate(-360deg); } }
@keyframes mbpNeonBlink  { 0%,100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .3; } 96% { opacity: 1; } 98% { opacity: .5; } }

/* ---------- ЗОЛОТО ---------- */
[data-frame="frame_gold_champagne"]{
  background: conic-gradient(from 200deg, #9a742c, #e8c569 14%, #f6ecd0 30%, #e8c569 46%, #7d5c22 60%, #d9b95c 76%, #f2e2b6 88%, #9a742c);
  border-color: rgba(232,197,105,.6);
}
[data-frame="frame_gold_champagne"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,248,225,.9) 14deg, rgba(255,255,255,0) 30deg, rgba(255,255,255,0) 360deg); animation: mbpFrameDrift 7s linear infinite; }
[data-frame="frame_gold_champagne"]::after{ opacity: .42; background: radial-gradient(circle, rgba(232,197,105,.7), transparent 62%); }

[data-frame="frame_gold_rose"]{
  background: conic-gradient(from 200deg, #8a4a3a, #e7a58f 16%, #fbe0d2 32%, #e7a58f 48%, #7a3f32 62%, #dc9a86 78%, #f8d9cc 90%, #8a4a3a);
  border-color: rgba(231,165,143,.6);
}
[data-frame="frame_gold_rose"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,240,235,.85) 14deg, rgba(255,255,255,0) 30deg); animation: mbpFrameDrift 7.5s linear infinite; }
[data-frame="frame_gold_rose"]::after{ opacity: .38; background: radial-gradient(circle, rgba(231,165,143,.7), transparent 62%); }

[data-frame="frame_gold_white"]{
  background: conic-gradient(from 200deg, #8c8c86, #e9e7dc 16%, #ffffff 32%, #e2dfd2 48%, #7f7e78 62%, #d8d6cb 78%, #fbfaf4 90%, #8c8c86);
  border-color: rgba(233,231,220,.65);
}
[data-frame="frame_gold_white"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 12deg, rgba(255,255,255,0) 26deg); animation: mbpFrameDrift 6.5s linear infinite; }
[data-frame="frame_gold_white"]::after{ opacity: .3; background: radial-gradient(circle, rgba(240,238,228,.7), transparent 62%); }

[data-frame="frame_gold_antique"]{
  background: conic-gradient(from 180deg, #4a3512, #b08a3a 18%, #6b4f1c 34%, #c9a44e 52%, #3f2d0f 66%, #a8843a 82%, #4a3512);
  border-color: rgba(176,138,58,.55);
}
[data-frame="frame_gold_antique"]::before{ opacity: .8; background: repeating-conic-gradient(rgba(0,0,0,0) 0deg, rgba(0,0,0,.35) 6deg, rgba(0,0,0,0) 12deg); animation: none; }
[data-frame="frame_gold_antique"]::after{ opacity: .18; background: radial-gradient(circle, rgba(176,138,58,.6), transparent 60%); }

[data-frame="frame_gold_filigree"]{
  background: conic-gradient(from 200deg, #9a742c, #e8c569 14%, #f6ecd0 30%, #e8c569 46%, #7d5c22 60%, #d9b95c 76%, #f2e2b6 88%, #9a742c);
  border-color: rgba(246,236,208,.7);
}
[data-frame="frame_gold_filigree"]::before{
  opacity: 1;
  background:
    repeating-conic-gradient(rgba(80,55,10,0) 0deg, rgba(80,55,10,.55) 4deg, rgba(80,55,10,0) 8deg),
    conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,250,230,.95) 10deg, rgba(255,255,255,0) 22deg, rgba(255,255,255,0) 180deg, rgba(255,250,230,.95) 190deg, rgba(255,255,255,0) 202deg);
  animation: mbpFrameDrift 5.5s linear infinite;
}
[data-frame="frame_gold_filigree"]::after{ opacity: .55; background: radial-gradient(circle, rgba(232,197,105,.85), transparent 60%); animation: mbpGlowPulse 3.2s ease-in-out infinite; }

[data-frame="frame_gold_liquid"]{
  background: linear-gradient(110deg, #7d5c22, #e8c569 20%, #fff3cf 35%, #c9a34c 50%, #f6ecd0 65%, #e8c569 80%, #7d5c22);
  background-size: 200% 100%;
  border-color: rgba(255,243,207,.75);
  animation: mbpShimmer 2.6s linear infinite;
}
[data-frame="frame_gold_liquid"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,.9) 8deg, rgba(255,255,255,0) 18deg, rgba(255,255,255,0) 120deg, rgba(255,255,255,.6) 128deg, rgba(255,255,255,0) 138deg, rgba(255,255,255,0) 240deg, rgba(255,255,255,.75) 248deg, rgba(255,255,255,0) 258deg); animation: mbpFrameDrift 3.2s linear infinite; }
[data-frame="frame_gold_liquid"]::after{ opacity: .7; background: radial-gradient(circle, rgba(255,223,140,.95), transparent 60%); animation: mbpGlowPulse 2.4s ease-in-out infinite; }

/* ---------- ПЛАТИНА ---------- */
[data-frame="frame_platinum_brushed"]{
  background: repeating-linear-gradient(95deg, #a9adb5 0px, #dfe2e8 1px, #b9bdc5 2px, #cfd3da 3px);
  border-color: rgba(207,211,218,.6);
}
[data-frame="frame_platinum_brushed"]::before{ opacity: .6; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,.5) 20deg, rgba(255,255,255,0) 40deg); animation: mbpFrameDrift 12s linear infinite; }
[data-frame="frame_platinum_brushed"]::after{ opacity: .2; background: radial-gradient(circle, rgba(207,211,218,.6), transparent 60%); }

[data-frame="frame_platinum_mirror"]{
  background: conic-gradient(from 160deg, #8d919a, #ffffff 14%, #c2c6ce 28%, #ffffff 42%, #7f838c 58%, #e9ebf0 72%, #ffffff 86%, #8d919a);
  border-color: rgba(255,255,255,.75);
}
[data-frame="frame_platinum_mirror"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,1) 10deg, rgba(255,255,255,0) 22deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.8) 190deg, rgba(255,255,255,0) 200deg); animation: mbpFrameDrift 5s linear infinite; }
[data-frame="frame_platinum_mirror"]::after{ opacity: .5; background: radial-gradient(circle, rgba(235,238,245,.9), transparent 60%); animation: mbpGlowPulse 3.6s ease-in-out infinite; }

/* ---------- МЕДЬ ---------- */
[data-frame="frame_copper_patina"]{
  background: conic-gradient(from 120deg, #7a4a2a, #3f8f7a 12%, #b87333 26%, #5fa894 40%, #8a5230 54%, #2f6e60 68%, #c47a3a 82%, #7a4a2a);
  border-color: rgba(95,168,148,.55);
}
[data-frame="frame_copper_patina"]::before{ opacity: .7; background: repeating-conic-gradient(rgba(63,143,122,0) 0deg, rgba(63,143,122,.5) 9deg, rgba(63,143,122,0) 18deg); animation: none; }
[data-frame="frame_copper_patina"]::after{ opacity: .16; background: radial-gradient(circle, rgba(95,168,148,.6), transparent 60%); }

[data-frame="frame_copper_hammered"]{
  background: radial-gradient(circle at 30% 30%, #e09a5a 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, #f0b37a 0 2px, transparent 3px), conic-gradient(from 90deg, #7a4a2a, #c47a3a 25%, #8a5230 50%, #d98b4a 75%, #7a4a2a);
  background-size: 9px 9px, 11px 11px, 100% 100%;
  border-color: rgba(217,139,74,.55);
}
[data-frame="frame_copper_hammered"]::before{ opacity: .7; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,225,190,.6) 16deg, rgba(255,255,255,0) 34deg); animation: mbpFrameDrift 9s linear infinite; }
[data-frame="frame_copper_hammered"]::after{ opacity: .2; background: radial-gradient(circle, rgba(217,139,74,.6), transparent 60%); }

/* ---------- КАМНИ ---------- */
[data-frame="frame_gem_emerald"]{
  background: repeating-conic-gradient(from 0deg, #1f8f57 0deg 18deg, #e8c569 18deg 24deg, #0f6b3f 24deg 42deg, #e8c569 42deg 48deg);
  border-color: rgba(47,191,113,.7);
}
[data-frame="frame_gem_emerald"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(220,255,235,.95) 8deg, rgba(255,255,255,0) 18deg, rgba(255,255,255,0) 120deg, rgba(220,255,235,.7) 128deg, rgba(255,255,255,0) 138deg); animation: mbpFrameDrift 4.6s linear infinite; }
[data-frame="frame_gem_emerald"]::after{ opacity: .55; background: radial-gradient(circle, rgba(47,191,113,.9), transparent 60%); animation: mbpGlowPulse 3s ease-in-out infinite; }

[data-frame="frame_gem_sapphire"]{
  background: repeating-conic-gradient(from 0deg, #1e4fd8 0deg 18deg, #e9e7dc 18deg 24deg, #0f2f8f 24deg 42deg, #e9e7dc 42deg 48deg);
  border-color: rgba(80,130,255,.7);
}
[data-frame="frame_gem_sapphire"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(225,235,255,.95) 8deg, rgba(255,255,255,0) 18deg, rgba(255,255,255,0) 120deg, rgba(225,235,255,.7) 128deg, rgba(255,255,255,0) 138deg); animation: mbpFrameDrift 4.6s linear infinite; }
[data-frame="frame_gem_sapphire"]::after{ opacity: .55; background: radial-gradient(circle, rgba(80,130,255,.9), transparent 60%); animation: mbpGlowPulse 3s ease-in-out infinite; }

[data-frame="frame_gem_ruby"]{
  background: repeating-conic-gradient(from 0deg, #c0304c 0deg 18deg, #e8c569 18deg 24deg, #7a1020 24deg 42deg, #e8c569 42deg 48deg);
  border-color: rgba(230,80,110,.7);
}
[data-frame="frame_gem_ruby"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,225,232,.95) 8deg, rgba(255,255,255,0) 18deg, rgba(255,255,255,0) 120deg, rgba(255,225,232,.7) 128deg, rgba(255,255,255,0) 138deg); animation: mbpFrameDrift 4.6s linear infinite; }
[data-frame="frame_gem_ruby"]::after{ opacity: .55; background: radial-gradient(circle, rgba(230,80,110,.9), transparent 60%); animation: mbpGlowPulse 3s ease-in-out infinite; }

[data-frame="frame_gem_diamond"]{
  background: conic-gradient(from 0deg, #ffffff, #cfe6ff 10%, #ffd9f2 20%, #fff6c9 30%, #d2ffe9 40%, #ffffff 50%, #cfe6ff 60%, #ffd9f2 70%, #fff6c9 80%, #d2ffe9 90%, #ffffff);
  border-color: rgba(255,255,255,.9);
  animation: mbpSlowSpin 14s linear infinite;
}
[data-frame="frame_gem_diamond"]::before{ opacity: 1; background: repeating-conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,1) 5deg, rgba(255,255,255,0) 10deg); animation: mbpSpinBack 6s linear infinite; }
[data-frame="frame_gem_diamond"]::after{ opacity: .75; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(207,230,255,.5) 40%, transparent 62%); animation: mbpGlowPulse 2.2s ease-in-out infinite; }

/* ---------- МЕТАЛЛЫ ---------- */
[data-frame="frame_steel_brushed"]{ background: repeating-linear-gradient(92deg, #7d828a 0px, #b6bbc3 1px, #8d929a 2px, #a3a8b0 3px); border-color: rgba(163,168,176,.55); }
[data-frame="frame_steel_brushed"]::before, [data-frame="frame_steel_brushed"]::after{ opacity: 0; animation: none; }

[data-frame="frame_chrome_black"]{ background: conic-gradient(from 150deg, #0b0b10, #5a5f6a 16%, #1a1b22 32%, #8a8f9a 48%, #0b0b10 62%, #4a4f58 78%, #9ea3ad 90%, #0b0b10); border-color: rgba(158,163,173,.6); }
[data-frame="frame_chrome_black"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,.9) 8deg, rgba(255,255,255,0) 18deg); animation: mbpFrameDrift 6s linear infinite; }
[data-frame="frame_chrome_black"]::after{ opacity: .25; background: radial-gradient(circle, rgba(158,163,173,.7), transparent 60%); }

[data-frame="frame_titanium_blue"]{ background: conic-gradient(from 120deg, #3d4652, #6f86b8 18%, #48505c 36%, #8aa4d8 54%, #3d4652 70%, #5d73a3 86%, #3d4652); border-color: rgba(138,164,216,.55); }
[data-frame="frame_titanium_blue"]::before{ opacity: .8; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(210,225,255,.7) 14deg, rgba(255,255,255,0) 30deg); animation: mbpFrameDrift 9s linear infinite; }
[data-frame="frame_titanium_blue"]::after{ opacity: .22; background: radial-gradient(circle, rgba(138,164,216,.6), transparent 60%); }

[data-frame="frame_bronze_polished"]{ background: conic-gradient(from 200deg, #5a3a1a, #c8843e 16%, #f0c48a 32%, #b87333 48%, #4f3216 62%, #d39250 78%, #f5d2a0 90%, #5a3a1a); border-color: rgba(211,146,80,.6); }
[data-frame="frame_bronze_polished"]::before{ opacity: 1; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,235,205,.85) 12deg, rgba(255,255,255,0) 26deg); animation: mbpFrameDrift 8s linear infinite; }
[data-frame="frame_bronze_polished"]::after{ opacity: .3; background: radial-gradient(circle, rgba(211,146,80,.6), transparent 60%); }

[data-frame="frame_gunmetal"]{ background: linear-gradient(160deg, #2b2f36, #474c55 50%, #22252b); border-color: rgba(120,126,136,.5); }
[data-frame="frame_gunmetal"]::before, [data-frame="frame_gunmetal"]::after{ opacity: 0; animation: none; }

/* ---------- ДЕРЕВО ---------- */
[data-frame="frame_wood_walnut"]{ background: repeating-radial-gradient(ellipse at 30% 40%, #5a3a22 0px, #7a4e2e 2px, #4a2e18 4px, #6b4328 6px); border-color: rgba(122,78,46,.6); }
[data-frame="frame_wood_walnut"]::before{ opacity: .5; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,220,180,.35) 20deg, rgba(255,255,255,0) 40deg); animation: none; }
[data-frame="frame_wood_walnut"]::after{ opacity: 0; }

[data-frame="frame_wood_ebony"]{ background: repeating-radial-gradient(ellipse at 40% 30%, #14100e 0px, #2a211c 2px, #110d0b 4px, #241b17 6px); border-color: rgba(232,197,105,.6); box-shadow: 0 0 0 1px rgba(232,197,105,.35); }
[data-frame="frame_wood_ebony"]::before{ opacity: .8; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(232,197,105,.6) 10deg, rgba(255,255,255,0) 22deg); animation: mbpFrameDrift 10s linear infinite; }
[data-frame="frame_wood_ebony"]::after{ opacity: .16; background: radial-gradient(circle, rgba(232,197,105,.6), transparent 60%); }

[data-frame="frame_wood_oak"]{ background: repeating-radial-gradient(ellipse at 35% 45%, #b58a55 0px, #d7ab72 2px, #a07a48 4px, #c99e68 6px); border-color: rgba(199,158,104,.6); }
[data-frame="frame_wood_oak"]::before, [data-frame="frame_wood_oak"]::after{ opacity: 0; animation: none; }

/* ---------- ПЛЕТЕНИЕ ---------- */
[data-frame="frame_woven_rattan"]{
  background: repeating-linear-gradient(45deg, #c9a46a 0 3px, #8f6a3a 3px 5px), repeating-linear-gradient(-45deg, rgba(201,164,106,.6) 0 3px, rgba(143,106,58,.6) 3px 5px);
  background-blend-mode: multiply; border-color: rgba(201,164,106,.6);
}
[data-frame="frame_woven_rattan"]::before, [data-frame="frame_woven_rattan"]::after{ opacity: 0; animation: none; }

[data-frame="frame_woven_leather"]{
  background: repeating-linear-gradient(40deg, #4a2f1c 0 4px, #6b4a2f 4px 6px, #e8c569 6px 7px), repeating-linear-gradient(-40deg, rgba(74,47,28,.7) 0 4px, rgba(107,74,47,.7) 4px 6px);
  background-blend-mode: multiply; border-color: rgba(232,197,105,.5);
}
[data-frame="frame_woven_leather"]::before{ opacity: .6; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(232,197,105,.5) 12deg, rgba(255,255,255,0) 26deg); animation: mbpFrameDrift 11s linear infinite; }
[data-frame="frame_woven_leather"]::after{ opacity: .12; background: radial-gradient(circle, rgba(232,197,105,.5), transparent 60%); }

[data-frame="frame_woven_rope"]{ background: repeating-conic-gradient(from 0deg, #c2a374 0deg 10deg, #8c7148 10deg 16deg, #d8bc8d 16deg 22deg); border-color: rgba(194,163,116,.6); }
[data-frame="frame_woven_rope"]::before, [data-frame="frame_woven_rope"]::after{ opacity: 0; animation: none; }

/* ---------- ЭЛЕКТРИКА ---------- */
[data-frame="frame_electric_arc"]{ background: linear-gradient(160deg, #0e1020, #1a1f38 50%, #0e1020); border-color: rgba(120,200,255,.75); }
[data-frame="frame_electric_arc"]::before{
  opacity: 1;
  background: conic-gradient(rgba(120,200,255,0) 0deg, rgba(180,230,255,1) 6deg, rgba(120,200,255,0) 14deg, rgba(120,200,255,0) 160deg, rgba(255,255,255,.9) 166deg, rgba(120,200,255,0) 172deg);
  animation: mbpFrameDrift 1.4s linear infinite, mbpArcFlicker 1.1s steps(1) infinite;
}
[data-frame="frame_electric_arc"]::after{ opacity: .6; background: radial-gradient(circle, rgba(120,200,255,.95), transparent 60%); animation: mbpArcFlicker 1.3s steps(1) infinite; }

[data-frame="frame_electric_tesla"]{ background: radial-gradient(circle, #2a1a4a, #0b0716 70%); border-color: rgba(190,140,255,.85); }
[data-frame="frame_electric_tesla"]::before{
  opacity: 1;
  background:
    conic-gradient(rgba(190,140,255,0) 0deg, rgba(255,255,255,1) 4deg, rgba(190,140,255,0) 10deg, rgba(190,140,255,0) 90deg, rgba(220,190,255,1) 94deg, rgba(190,140,255,0) 100deg, rgba(190,140,255,0) 200deg, rgba(255,255,255,.9) 204deg, rgba(190,140,255,0) 210deg, rgba(190,140,255,0) 300deg, rgba(220,190,255,.9) 304deg, rgba(190,140,255,0) 310deg);
  animation: mbpSpinBack .9s linear infinite, mbpArcFlicker .7s steps(1) infinite;
}
[data-frame="frame_electric_tesla"]::after{ opacity: .8; background: radial-gradient(circle, rgba(200,160,255,1), rgba(120,80,255,.5) 45%, transparent 64%); animation: mbpArcFlicker .8s steps(1) infinite; }

[data-frame="frame_electric_neon_gold"]{ background: #120f08; border-color: rgba(255,215,120,.95); box-shadow: 0 0 8px rgba(255,215,120,.7), inset 0 0 6px rgba(255,215,120,.6); animation: mbpNeonBlink 6s linear infinite; }
[data-frame="frame_electric_neon_gold"]::before{ opacity: 1; background: radial-gradient(circle, rgba(255,230,160,.9), rgba(255,215,120,.6)); animation: none; }
[data-frame="frame_electric_neon_gold"]::after{ opacity: .7; background: radial-gradient(circle, rgba(255,215,120,.95), transparent 60%); animation: mbpNeonBlink 6s linear infinite; }

/* ---------- АНИМАЦИЯ ---------- */
[data-frame="frame_anim_aurora"]{
  background: linear-gradient(110deg, #1fbf8f, #3d7bff 25%, #b45cff 50%, #1fbf8f 75%, #3d7bff);
  background-size: 300% 100%; border-color: rgba(120,220,200,.6);
  animation: mbpShimmer 5s linear infinite;
}
[data-frame="frame_anim_aurora"]::before{ opacity: .8; background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,.7) 16deg, rgba(255,255,255,0) 36deg); animation: mbpSpinBack 8s linear infinite; }
[data-frame="frame_anim_aurora"]::after{ opacity: .5; background: radial-gradient(circle, rgba(120,220,200,.8), rgba(120,100,255,.4) 45%, transparent 64%); animation: mbpGlowPulse 4s ease-in-out infinite; }

[data-frame="frame_anim_lava"]{ background: radial-gradient(circle, #2a0a05, #140503 70%); border-color: rgba(255,120,40,.7); }
[data-frame="frame_anim_lava"]::before{
  opacity: 1;
  background: repeating-conic-gradient(rgba(255,120,40,0) 0deg, rgba(255,160,60,1) 7deg, rgba(255,60,20,.8) 14deg, rgba(255,120,40,0) 22deg);
  animation: mbpFrameDrift 14s linear infinite, mbpLavaPulse 2.2s ease-in-out infinite;
}
[data-frame="frame_anim_lava"]::after{ opacity: .6; background: radial-gradient(circle, rgba(255,120,40,.95), transparent 60%); animation: mbpLavaPulse 2.2s ease-in-out infinite; }

[data-frame="frame_anim_starfield"]{ background: radial-gradient(circle, #101634, #05070f 70%); border-color: rgba(180,200,255,.5); }
[data-frame="frame_anim_starfield"]::before{
  opacity: 1;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, #cfe0ff 0 1px, transparent 2px), radial-gradient(circle at 35% 80%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 55% 55%, #ffe9a8 0 1px, transparent 2px);
  animation: mbpFrameDrift 20s linear infinite;
}
[data-frame="frame_anim_starfield"]::after{ opacity: .35; background: radial-gradient(circle, rgba(180,200,255,.7), transparent 60%); animation: mbpGlowPulse 5s ease-in-out infinite; }

[data-frame="frame_anim_pulse_gold"]{ background: conic-gradient(from 200deg, #9a742c, #e8c569 30%, #f6ecd0 50%, #e8c569 70%, #9a742c); border-color: rgba(232,197,105,.7); }
[data-frame="frame_anim_pulse_gold"]::before{ opacity: .9; background: radial-gradient(circle, rgba(255,240,200,.8), rgba(232,197,105,.3)); animation: mbpGlowPulse 1.8s ease-in-out infinite; }
[data-frame="frame_anim_pulse_gold"]::after{ opacity: .7; background: radial-gradient(circle, rgba(232,197,105,.95), transparent 60%); animation: mbpGlowPulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  [data-frame^="frame_gold_"], [data-frame^="frame_gem_"], [data-frame^="frame_electric_"], [data-frame^="frame_anim_"], [data-frame^="frame_platinum_"],
  [data-frame^="frame_gold_"]::before, [data-frame^="frame_gem_"]::before, [data-frame^="frame_electric_"]::before, [data-frame^="frame_anim_"]::before, [data-frame^="frame_platinum_"]::before,
  [data-frame^="frame_gold_"]::after, [data-frame^="frame_gem_"]::after, [data-frame^="frame_electric_"]::after, [data-frame^="frame_anim_"]::after, [data-frame^="frame_platinum_"]::after { animation: none !important; }
}

/* =========================================================================
   СТИЛИ НИКА (магазин, category name_styles; data-namestyle на элементе с ником)
   ========================================================================= */
/* ---------- стили ника (очень дорогие — потому и заметные) ---------- */
@keyframes mbNameShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes mbNameNeon { 0%,100% { text-shadow: 0 0 4px rgba(120,200,255,.9), 0 0 10px rgba(120,200,255,.6); } 50% { text-shadow: 0 0 6px rgba(120,200,255,1), 0 0 18px rgba(120,200,255,.9); } }
@keyframes mbNameFire { 0%,100% { background-position: 0% 100%; } 50% { background-position: 100% 0%; } }
[data-namestyle] { font-weight: 700; }
[data-namestyle="gold_shimmer"] {
  background: linear-gradient(100deg, #b08a3a, #f6ecd0 30%, #e8c569 50%, #fff3cf 70%, #b08a3a); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 2.8s linear infinite;
}
[data-namestyle="neon_pulse"] { color: #cfefff; animation: mbNameNeon 1.6s ease-in-out infinite; }
[data-namestyle="fire"] {
  background: linear-gradient(0deg, #ffd36b, #ff7b2e 45%, #ff3b1f 70%, #ffe49a); background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameFire 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255,120,40,.7));
}
[data-namestyle="ice_crystal"] {
  background: linear-gradient(100deg, #9fd8ff, #ffffff 35%, #bfe8ff 55%, #ffffff 75%, #9fd8ff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 3.4s linear infinite;
  filter: drop-shadow(0 0 3px rgba(160,220,255,.7));
}
[data-namestyle="royal"] {
  background: linear-gradient(100deg, #b45cff, #ffd86b 40%, #d89bff 60%, #ffe9a8 80%, #b45cff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 2.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(180,92,255,.6));
}
[data-namestyle="emerald_wave"] {
  background: linear-gradient(100deg, #1f8f57, #b8ffd9 35%, #35d49b 55%, #eafff3 75%, #1f8f57); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 3s linear infinite;
  filter: drop-shadow(0 0 3px rgba(53,212,155,.6));
}
[data-namestyle="blood_moon"] {
  color: #ff5c7a; text-shadow: 0 0 6px rgba(255,40,80,.8), 0 0 16px rgba(160,10,40,.6);
  animation: mbNameNeon 2.2s ease-in-out infinite;
}
[data-namestyle="toxic"] {
  color: #b6ff3f; text-shadow: 0 0 5px rgba(150,255,40,.9), 0 0 14px rgba(90,200,20,.55);
  animation: mbNameNeon 1.3s ease-in-out infinite;
}
[data-namestyle="silver_frost"] {
  background: linear-gradient(100deg, #8f96a3, #ffffff 40%, #c9d2de 60%, #ffffff 80%, #8f96a3); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 3.6s linear infinite;
}
[data-namestyle="sunset"] {
  background: linear-gradient(100deg, #ff8a3d, #ffd36b 30%, #ff5e8a 60%, #b45cff 90%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameShimmer 2.6s linear infinite;
  filter: drop-shadow(0 0 3px rgba(255,120,90,.55));
}
[data-namestyle="matrix"] {
  background: linear-gradient(0deg, #0f5, #9f9 40%, #050 60%, #4f4); background-size: 100% 220%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mbNameFire 1.8s linear infinite;
  filter: drop-shadow(0 0 3px rgba(0,255,90,.55));
}
@media (prefers-reduced-motion: reduce) { [data-namestyle] { animation: none !important; } }


/* =========================================================
   НЕПРОЗРАЧНАЯ ПОДЛОЖКА ПОД ВСЕ РАМКИ
   Рамка — платный продукт: полупрозрачные градиенты просвечивали
   плашку и сукно, размывая цвет. Шортхенд background в фреймах
   сбрасывает background-color — возвращаем его поздним правилом:
   градиенты остаются, под ними плотная тёмная основа.
   ========================================================= */
.avatar-frame,
.profile-avatar-frame,
.store-preview-avatar-frame{
  background-color: #14121f;
}