/* =========================================================
   Кръгозор · визуални награди (VIP)
   Рамки за аватар, цветове на име, значки, титли.
   Файлът е самостоятелен: зарежда се СЛЕД app.css и само
   добавя класове — не пипа съществуващи селектори на сайта.
   Палитра: графит #0b0f0e · месинг #c9a227 / #d8b25a · кремав #ece5d3
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   1. РАМКИ ЗА АВАТАР
   Двойният клас (.frm-war.frm-war) е умишлен: вдига
   специфичността над .post .avatar / .userchip .avatar,
   които заковават радиус и кръгъл образ, без да пипаме app.css.
   Всяка рамка = плътен 2–3 px кант + външен пръстен от box-shadow.
   ───────────────────────────────────────────────────────── */
.frm-war.frm-war,
.frm-pantheon.frm-pantheon,
.frm-week.frm-week,
.frm-legend.frm-legend{
  position:relative;
  border-radius:12px;          /* квадратен аватар, не кръг */
  border-style:solid;
  padding:0;
  overflow:hidden;             /* картинката не излиза от канта */
  transition:box-shadow .25s ease, border-color .25s ease;
}

/* войнска — златна, арт-деко ъгълчета */
.frm-war.frm-war{
  border-width:3px;
  border-color:#f0d79a #a37f1f #8a6a17 #d8b25a;
  box-shadow:
    0 0 0 1px #0a0d0c,
    0 0 0 3px rgba(226,192,99,.55),
    0 0 0 4px rgba(10,13,12,.90),
    0 0 22px -6px rgba(201,162,39,.45),
    0 14px 28px -16px rgba(0,0,0,.90) !important;
}
.frm-war.frm-war::after{
  content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,246,214,.45), inset 0 0 16px rgba(0,0,0,.30);
  background:
    linear-gradient(#fff4c8,#fff4c8) left 3px  top 3px   / 11px 1px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) left 3px  top 3px   / 1px 11px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) right 3px top 3px   / 11px 1px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) right 3px top 3px   / 1px 11px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) left 3px  bottom 3px/ 11px 1px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) left 3px  bottom 3px/ 1px 11px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) right 3px bottom 3px/ 11px 1px no-repeat,
    linear-gradient(#fff4c8,#fff4c8) right 3px bottom 3px/ 1px 11px no-repeat;
}
.frm-war.frm-war:hover{
  box-shadow:
    0 0 0 1px #0a0d0c,
    0 0 0 3px rgba(240,215,154,.80),
    0 0 0 4px rgba(10,13,12,.90),
    0 0 30px -4px rgba(201,162,39,.65),
    0 14px 28px -16px rgba(0,0,0,.90) !important;
}

/* пантеон — тъмна, с фриз от колони горе и долу */
.frm-pantheon.frm-pantheon{
  border-width:2px;
  border-color:#4a3a22 #2b2116 #1b150e #3a2d1b;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.60),
    0 0 0 1px #070a09,
    0 0 0 3px rgba(201,162,39,.24),
    0 0 0 4px rgba(7,10,9,.95),
    0 12px 26px -18px #000 !important;
}
.frm-pantheon.frm-pantheon::after{
  content:""; position:absolute; inset:2px; border-radius:8px; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.30), inset 0 0 14px rgba(0,0,0,.55);
  background:
    repeating-linear-gradient(90deg, rgba(201,162,39,.60) 0 1px, rgba(201,162,39,0) 1px 4px)
      left 6px top 3px / calc(100% - 12px) 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(201,162,39,.40) 0 1px, rgba(201,162,39,0) 1px 4px)
      left 6px bottom 3px / calc(100% - 12px) 4px no-repeat;
}
.frm-pantheon.frm-pantheon:hover{
  border-color:#6b5327 #3a2d1b #241c12 #4a3a22;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.60),
    0 0 0 1px #070a09,
    0 0 0 3px rgba(201,162,39,.42),
    0 0 0 4px rgba(7,10,9,.95),
    0 0 26px -8px rgba(201,162,39,.35),
    0 12px 26px -18px #000 !important;
}

/* седмична — тънка сребърна */
.frm-week.frm-week{
  border-width:2px;
  border-color:#e6eef4 #93a2ad #6f7e89 #bfccd6;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 1px #0a0d0c,
    0 0 0 2px rgba(168,192,208,.55),
    0 0 14px -8px rgba(190,215,232,.55),
    0 10px 22px -16px rgba(0,0,0,.85) !important;
}
.frm-week.frm-week::after{
  content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
}
.frm-week.frm-week:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    0 0 0 1px #0a0d0c,
    0 0 0 2px rgba(196,218,234,.85),
    0 0 18px -6px rgba(200,225,240,.50),
    0 10px 22px -16px rgba(0,0,0,.85) !important;
}

/* легенда — диамантена, с бавна светлинна ивица */
.frm-legend.frm-legend{
  border-width:3px;
  border-color:#f2fbff #b6d8f2 #93a9e8 #dcf0ff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 0 1px #0a0d0c,
    0 0 0 2px rgba(196,232,255,.55),
    0 0 0 4px rgba(150,190,240,.28),
    0 0 26px -6px rgba(160,214,255,.50),
    0 14px 30px -16px #000 !important;
}
.frm-legend.frm-legend::after{
  content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.40), inset 0 0 20px rgba(150,200,255,.25);
}
.frm-legend.frm-legend::before{
  content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:4;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 36%, rgba(255,255,255,.50) 46%,
    rgba(196,236,255,.42) 50%, rgba(255,255,255,0) 62%);
  background-size:240% 100%;
  background-position:140% 0;
  opacity:.35;
  animation:vip-sheen 6s ease-in-out infinite;
}
.frm-legend.frm-legend:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 0 0 1px #0a0d0c,
    0 0 0 2px rgba(210,240,255,.80),
    0 0 0 4px rgba(150,190,240,.40),
    0 0 34px -4px rgba(160,214,255,.70),
    0 14px 30px -16px #000 !important;
}
@keyframes vip-sheen{
  0%, 62%  { background-position:140% 0; opacity:.28 }
  78%      { opacity:.65 }
  100%     { background-position:-60% 0; opacity:.22 }
}

/* образът вътре в рамката: плътен, със същия радиус, не кръг */
.frm-war.frm-war img,
.frm-pantheon.frm-pantheon img,
.frm-week.frm-week img,
.frm-legend.frm-legend img{
  border-radius:9px !important;
  width:100%; height:100%; object-fit:cover; display:block;
  margin:0;
}

/* ─────────────────────────────────────────────────────────
   2. ЦВЕТОВЕ НА ИМЕ
   !important е нужен: .post .name / .fr-name заковават
   цвят в app.css и иначе бият единичния клас.
   ───────────────────────────────────────────────────────── */
.nm-gold{
  color:#e8c76a !important;
  text-shadow:0 0 18px rgba(201,162,39,.28);
}
.nm-emerald{
  color:#72c7a1 !important;
  text-shadow:0 0 18px rgba(45,140,105,.30);
}
.nm-terracotta{
  color:#dd9268 !important;
  text-shadow:0 0 18px rgba(190,95,55,.28);
}
.nm-ice{
  color:#a9d8ee !important;
  text-shadow:0 0 18px rgba(120,190,235,.28);
}

/* ─────────────────────────────────────────────────────────
   3. ЗНАЧКИ
   Базовият .vip-badge повтаря мярката от app.css (2px 6px,
   3px радиус, 8.5px), за да не размества вече сложени значки;
   вариантите сменят само градиента и цвета на текста.
   ───────────────────────────────────────────────────────── */
.vip-badge{
  display:inline-block; margin-left:6px; padding:2px 6px; border-radius:3px;
  border:1px solid rgba(0,0,0,.32);
  color:#1a1408;
  font:700 8.5px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; vertical-align:middle;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.40) inset, 0 -1px 0 rgba(0,0,0,.18) inset;
  background:linear-gradient(180deg,#e2c063,#b98f24);
}
.vip-badge.silver{
  background:linear-gradient(180deg,#f6f9fb,#c8d3db 46%,#8e9ca7);
  color:#121a1f;
  border-color:rgba(50,70,82,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(40,60,72,.22) inset;
}
.vip-badge.gold{
  background:linear-gradient(180deg,#f8e5a8,#dcb54c 46%,#a97f19);
  color:#1c1405;
  border-color:rgba(90,62,8,.40);
  box-shadow:0 1px 0 rgba(255,252,230,.85) inset, 0 -1px 0 rgba(70,48,4,.30) inset;
}
.vip-badge.platinum{
  background:linear-gradient(180deg,#ffffff,#e2ecf3 40%,#a7b9c6 78%,#cfdde7);
  color:#0d1418;
  border-color:rgba(120,145,160,.55);
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(90,115,130,.30) inset,
    0 0 9px -2px rgba(214,236,250,.55);
}
.vip-badge.diamond{
  background:linear-gradient(115deg,#dff6ff,#ffffff 26%,#b6e3f7 44%,#d7c8ff 72%,#f8f4ff);
  background-size:200% 100%;
  color:#08131c;
  border-color:rgba(255,255,255,.65);
  box-shadow:
    0 1px 0 #fff inset,
    0 -1px 0 rgba(110,150,180,.25) inset,
    0 0 12px -2px rgba(178,230,255,.75);
  animation:vip-badge-light 4.5s ease-in-out infinite;
}
@keyframes vip-badge-light{
  0%, 100%{ background-position:0% 0 }
  50%     { background-position:100% 0 }
}

/* ─────────────────────────────────────────────────────────
   4. ТИТЛА ПОД ИМЕТО
   Малък надпис с главни букви; наследява цвета на името
   и стои на собствен ред под него.
   ───────────────────────────────────────────────────────── */
.vip-title{
  display:block;
  margin-top:3px;
  color:currentColor; opacity:.68;
  font:600 9.5px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.20em; text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  .frm-legend.frm-legend::before,
  .vip-badge.diamond{ animation:none }
  .frm-legend.frm-legend::before{ opacity:.30; background-position:50% 0 }
}

/* ── паричка VT (VIP token) ── */
.vt-coin{
  display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:50%; vertical-align:-.28em; margin:0 .3em 0 .1em;
  background:
    radial-gradient(circle at 34% 26%, #fff1c2 0%, #e8c766 38%, #b98f24 72%, #7d5f14 100%);
  box-shadow: inset 0 0 0 1px rgba(255,244,213,.55), 0 1px 2px rgba(0,0,0,.45);
  color:#4a3405; font:700 8px/1 system-ui, sans-serif; letter-spacing:.02em;
  font-style:normal; text-indent:.02em;
  flex:0 0 auto;
}
.vt-coin::after{ content:"VT" }
vt-coin[hidden]{display:none}
.vt-pill{
  display:inline-flex; align-items:center; gap:2px;
  padding:5px 10px 5px 6px; border-radius:999px;
  border:1px solid rgba(201,162,39,.4);
  background:linear-gradient(180deg,rgba(226,192,99,.14),rgba(185,143,36,.06));
  color:#f0e3bd; font:600 12px/1 system-ui, sans-serif;
}
.vt-pill b{ font-weight:700; color:#f5e6b8 }
.vt-pill:hover{ border-color:rgba(226,192,99,.75); cursor:pointer }

.ac-wallet .vt-coin{ width:22px; height:22px; font-size:9.5px; margin-right:6px }
.shop-price .vt-coin{ width:16px; height:16px; font-size:7.5px; margin:0 0 0 5px; vertical-align:-3px }
.profpts .vt-coin{ width:15px; height:15px; font-size:7px; margin-right:5px; vertical-align:-2px }

/* бутон „събери“ в портфейла */
.vt-claim{
  margin-left:10px; padding:6px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(226,192,99,.85); color:#1a1408;
  background:linear-gradient(180deg,#f0d98e,#b98f24);
  font:700 10.5px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  animation:vtPulse 1.6s ease-in-out infinite;
}
.vt-claim[disabled]{opacity:.6; animation:none; cursor:default}
@keyframes vtPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(226,192,99,.5)}50%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(226,192,99,0)}}

/* чипът с токените, когато има несъбрани */
.vt-pill.has-pending{
  border-color:rgba(240,217,142,.95);
  box-shadow:0 0 0 0 rgba(226,192,99,.55);
  animation:vtPulse 1.8s ease-in-out infinite;
}
.vt-badge{
  margin-left:4px; padding:1px 5px; border-radius:999px;
  background:linear-gradient(180deg,#f0d98e,#b98f24); color:#1a1408;
  font:700 9px/1.4 system-ui,sans-serif; font-style:normal; letter-spacing:.02em;
}

/* ─────────────────────────────────────────────────────────
   5. ЗНАЧКИ ОТ МАГАЗИНА
   Купените значки (vip-badge-owl|laurel|flame|compass) са малки
   кръгли чипове с глиф. Ранговата значка (.vip-badge.silver…) остава
   правоъгълна — двете стоят една до друга и не си пречат.
   ───────────────────────────────────────────────────────── */
.vip-badge.vip-badge-owl,
.vip-badge.vip-badge-laurel,
.vip-badge.vip-badge-flame,
.vip-badge.vip-badge-compass{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; padding:0; margin-left:5px;
  border-radius:50%; border:1px solid rgba(0,0,0,.38);
  font:400 10px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:0; text-transform:none; text-shadow:none;
  vertical-align:-3px; overflow:hidden; flex:0 0 auto;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 3px rgba(0,0,0,.45);
  background:linear-gradient(180deg,#e6dcc4,#bda87c);
}
.vip-badge.vip-badge-owl::before{ content:"🦉"; transform:translateY(.5px) }
.vip-badge.vip-badge-laurel::before{ content:"🌿"; transform:translateY(.5px) }
.vip-badge.vip-badge-flame::before{ content:"🔥"; transform:translateY(.5px) }
.vip-badge.vip-badge-compass::before{ content:"🧭"; transform:translateY(.5px) }

.vip-badge.vip-badge-owl{
  background:radial-gradient(circle at 34% 26%,#f7f0df,#cdb98d 56%,#8b7850);
  border-color:rgba(96,78,46,.62);
}
.vip-badge.vip-badge-laurel{
  background:radial-gradient(circle at 34% 26%,#e6f4dd,#96c47f 56%,#3f6b34);
  border-color:rgba(46,92,44,.62);
}
.vip-badge.vip-badge-flame{
  background:radial-gradient(circle at 34% 26%,#ffe8b8,#f1a44a 52%,#a8481b);
  border-color:rgba(120,52,18,.62);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,240,200,.65),
    0 1px 3px rgba(0,0,0,.45),
    0 0 9px -2px rgba(226,140,60,.55);
}
.vip-badge.vip-badge-compass{
  background:radial-gradient(circle at 34% 26%,#eaf5fd,#9dc8e4 56%,#3d678a);
  border-color:rgba(40,86,120,.62);
}

/* ─────────────────────────────────────────────────────────
   6. ТИТЛИ
   .vip-title е общата мярка; вариантът (vip-title--…) сменя само
   цвета и тежестта, за да се различават десетте титли от разстояние.
   ───────────────────────────────────────────────────────── */
.vip-title--knowledge{ color:#b7dcc3 !important; opacity:.86 }
.vip-title--chronicler{ color:#d8c7a0 !important; opacity:.86 }
.vip-title--traveller{ color:#a9d2ca !important; opacity:.86 }
.vip-title--quickmind{ color:#f0d79a !important; opacity:.90 }
.vip-title--strategist{ color:#c6b3e6 !important; opacity:.88 }
.vip-title--duelist{ color:#e9a08d !important; opacity:.88 }
.vip-title--maker{ color:#dcbb8b !important; opacity:.86 }
.vip-title--sage{ color:#cfc7a5 !important; opacity:.86 }
.vip-title--streakkeeper{ color:#e8b878 !important; opacity:.88 }
.vip-title--pantheon{
  color:#f6e2a4 !important; opacity:.95;
  text-shadow:0 0 14px rgba(226,192,99,.38);
}
.vip-title--krugozor{
  background:linear-gradient(90deg,#f6e2a4,#d8b25a 42%,#f7ecd0 60%,#c9a227);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  opacity:1;
}
.vip-title--custom{ color:currentColor; opacity:.72 }

@media (prefers-reduced-motion:reduce){
  .vip-badge.vip-badge-flame{ box-shadow:0 0 0 1px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,240,200,.65) }
}

/* липсващи цветове и рамка от магазина */
.nm-crimson { color: #d4645c !important; text-shadow: 0 0 12px rgba(212, 100, 92, .35); }
.nm-violet { color: #b78cff !important; text-shadow: 0 0 12px rgba(183, 140, 255, .35); }
.frm-animated { box-shadow: 0 0 0 2px rgba(201, 162, 39, .55), 0 0 18px rgba(140, 90, 200, .45) !important; animation: frmPulse 3.2s ease-in-out infinite; }
@keyframes frmPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(201,162,39,.55), 0 0 14px rgba(140,90,200,.35); } 50% { box-shadow: 0 0 0 2px rgba(230,200,110,.8), 0 0 22px rgba(160,110,230,.6); } }
@media (prefers-reduced-motion: reduce) { .frm-animated { animation: none; } }