/* ============================================================================
   YAZME · ПЕРСОНЫ · СТЕНА СУТОЧНОГО ЛИМИТА · 02.09.2026
   Файл: persona/assets/wall.css

   ПОЧЕМУ ПРЕФИКС .yzw- И НИ ОДНОГО .ch-
   ────────────────────────────────────────────────────────────────────────────
   В chat.css класс .ch-left описан ДВАЖДЫ — строка 942 (строка под полем
   ввода) и строка 1538 (крупное число в шторке пропуска). Специфичность
   одинаковая, побеждает нижнее правило, и строка «Осталось N из 50» рисуется
   тридцатым кеглем, поднимает панель ввода и съедает ленту. Это живая жалоба
   пользователя.

   Чтобы не повторить ту же историю, весь этот файл живёт в собственном
   пространстве имён .yzw-*. Ни одного пересечения с .ch-*, .pv-*, .yz-*.

   ЦВЕТА НЕ СВОИ. Всё берётся из persona/assets/tokens.css, который сам
   выводится из темы сайта. Второе значение в var() — запасное, на случай
   если tokens.css не подключился.
   ========================================================================= */

.yzw-veil{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:1400;
  background:var(--overlay, rgba(10,9,8,.72));
  opacity:0; pointer-events:none;
  transition:opacity var(--d-sheet, 280ms) var(--e-out, cubic-bezier(.22,1,.36,1));
}
.yzw-veil.on{ opacity:1; pointer-events:auto; }

.yzw-sheet{
  position:fixed; left:0; right:0; bottom:0; top:0; z-index:1401;
  display:flex; flex-direction:column;
  background:var(--s0, #0A0908);
  color:var(--t1, #faf9f5);
  font-family:var(--f-ui, 'Inter', system-ui, sans-serif);
  transform:translateY(100%);
  transition:transform var(--d-sheet, 280ms) var(--e-out, cubic-bezier(.22,1,.36,1));
  overscroll-behavior:contain;
}
.yzw-sheet.on{ transform:none; }
.yzw-sheet[hidden]{ display:none; }

/* На широком экране шторка не растягивается на всю ширину монитора. */
/* На большом экране это диалог по центру, а не полоса у нижнего края:
   шторка, приклеенная к низу монитора, читается как случайный виджет. */
@media (min-width: 720px){
  .yzw-sheet{
    left:50%; right:auto; top:50%; bottom:auto;
    width:min(440px, 92vw); max-height:min(760px, 90vh);
    border-radius:var(--r-lg, 28px);
    transform:translate(-50%, -46%) scale(.98);
    opacity:0;
    box-shadow:var(--sh-lg, 0 24px 60px -18px rgba(0,0,0,.65));
  }
  .yzw-sheet.on{ transform:translate(-50%, -50%) scale(1); opacity:1; }
  .yzw-sheet .yzw-grip{ display:none; }
}

.yzw-grip{
  /* Была полоска 36×4 без роли и без паддинга — единственная цель закрытия на
     телефоне, вчетверо мельче минимума для пальца (44 px). Теперь это кнопка:
     видимая полоска рисуется псевдоэлементом, а нажимается вся высота. */
  display:block; width:60px; height:26px; padding:0; border:0; flex:none;
  margin:var(--sp1,4px) auto 0; background:transparent; cursor:pointer;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.yzw-grip::before{
  content:''; position:absolute; left:50%; top:11px; transform:translateX(-50%);
  width:36px; height:4px; border-radius:var(--r-full, 999px);
  background:var(--s4, #312D2A);
}
.yzw-grip:focus-visible{ outline:var(--focus-w,2px) solid var(--focus,#4c8dff); outline-offset:2px; border-radius:var(--r-full,999px); }

/* ─────────────────────────── ШАПКА С ПОРТРЕТОМ ─────────────────────────── */
.yzw-hero{
  flex:none; display:flex; align-items:center; gap:var(--sp4,16px);
  padding:var(--sp5,20px) var(--sp5,20px) var(--sp4,16px);
}
.yzw-av{
  width:72px; height:72px; flex:none; border-radius:var(--r-full,999px);
  background:radial-gradient(100% 100% at 40% 25%, #5f4a3e, #241c18);
  background-size:cover; background-position:center 28%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px var(--hair2, rgba(250,249,245,.17));
}
.yzw-av i{
  font-style:normal; font-family:var(--f-display,'Unbounded',sans-serif);
  font-size:26px; font-weight:800; color:var(--hero-lo, rgba(217,119,87,.55));
}
.yzw-hero-id{ min-width:0; }
.yzw-hero-id b{
  display:block; font-family:var(--f-display,'Unbounded',sans-serif);
  font-size:19px; font-weight:600; line-height:1.2;
}
.yzw-hero-id span{
  display:block; font-size:var(--fs-small,13px); color:var(--hero,#d97757);
  margin-top:4px; font-weight:600;
}

/* ─────────────────────────────── ТЕЛО ─────────────────────────────────── */
.yzw-body{
  flex:1; min-height:0; display:flex; flex-direction:column;
  /* Нижний отступ с запасом на домашнюю полосу iPhone: без него последняя
     кнопка уходила под неё. */
  padding:0 var(--sp5,20px) calc(var(--sp4,16px) + env(safe-area-inset-bottom, 0px));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* Свойство работает только на самом скролл-контейнере. На .yzw-sheet, где
     оно стояло раньше, оно не значило ничего, и долистав шторку до конца
     человек прокручивал ленту чата под ней. */
  overscroll-behavior:contain;
}
.yzw-body::-webkit-scrollbar{ width:0; }

.yzw-rungs{ display:flex; gap:4px; margin-top:var(--sp4,16px); flex:none; }
.yzw-rungs i{
  flex:1; height:6px; border-radius:var(--r-full,999px);
  background:var(--s2, #201E1A); position:relative;
}
.yzw-rungs i.full{ background:var(--hero, #d97757); }
.yzw-rungs i.part::after{
  content:""; position:absolute; inset:0; width:55%;
  background:var(--hero, #d97757); border-radius:var(--r-full,999px);
}

/* Прощальная реплика: человек читает её ЗДЕСЬ, и она же уходит в переписку. */
.yzw-say{
  background:var(--s2, #201E1A);
  border-radius:var(--r-md, 12px); border-top-left-radius:6px;
  padding:13px 15px; margin-top:var(--sp4,16px); flex:none;
}
.yzw-say-w{
  font-size:var(--fs-over, 10px); letter-spacing:var(--ls-over, .12em);
  text-transform:uppercase; color:var(--t3, #8d8878); font-weight:600;
  margin-bottom:7px;
}
.yzw-say-t{
  margin:0; min-height:22px;
  font-family:var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-style:italic; font-size:15.5px; line-height:1.45; color:var(--t1, #faf9f5);
}
.yzw-dots{ display:inline-flex; gap:4px; align-items:center; height:22px; }
.yzw-dots i{
  width:6px; height:6px; border-radius:var(--r-full,999px);
  background:var(--t3, #6b645c); animation:yzwBlink 1.1s infinite;
}
.yzw-dots i:nth-child(2){ animation-delay:.16s; }
.yzw-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes yzwBlink{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }

.yzw-line{
  margin-top:var(--sp4,16px); flex:none;
  font-size:14px; line-height:1.5; color:var(--t2, #b9b4a7);
}
.yzw-line b{ color:var(--t1, #faf9f5); font-weight:600; }
.yzw-line .up{ color:var(--win, #58a76b); font-weight:600; }

/* Сравнение «сегодня / на тарифе» — только со второго вечера. */
.yzw-cmp{ margin-top:var(--sp3,12px); display:flex; flex-direction:column; gap:8px; flex:none; }
.yzw-cmp-row{ display:flex; align-items:center; gap:10px; }
.yzw-cmp-lb{ font-size:var(--fs-small,13px); color:var(--t3,#8d8878); width:62px; flex:none; }
.yzw-cmp-tr{
  flex:1; min-width:0; height:8px; border-radius:var(--r-full,999px);
  background:var(--s2, #201E1A); overflow:hidden;
}
.yzw-cmp-tr i{ display:block; height:100%; border-radius:var(--r-full,999px); }
.yzw-cmp-tr i.free{ background:var(--s5, #5c534d); }
.yzw-cmp-tr i.paid{ background:var(--hero-grad, linear-gradient(90deg,#b3552e,#e2885f)); }
.yzw-cmp-vl{
  font-family:var(--f-num, 'Unbounded', sans-serif); font-size:12px; font-weight:600;
  width:34px; text-align:right; flex:none;
}
.yzw-cmp-vl.free{ color:var(--t3,#8d8878); }
.yzw-cmp-vl.paid{ color:var(--hero,#d97757); }

.yzw-mem{
  margin-top:var(--sp3,12px); flex:none;
  background:var(--s2, #201E1A); border-radius:var(--r-sm, 10px);
  padding:11px 14px; display:flex; align-items:center; gap:10px;
}
.yzw-mem-t{ flex:1; min-width:0; font-size:var(--fs-small,13px); }
.yzw-mem-t span{ display:block; font-size:11.5px; color:var(--t3,#8d8878); margin-top:1px; }
.yzw-mem-v{
  font-family:var(--f-num,'Unbounded',sans-serif); font-size:13.5px; font-weight:600;
  color:var(--lose, #e5484d); flex:none;
}

.yzw-spring{ flex:1; min-height:12px; }
.yzw-hair{ height:1px; background:var(--hair, rgba(250,249,245,.08)); margin:var(--sp4,16px) 0 11px; flex:none; }

/* Условия — ВСЕГДА системным голосом, под чертой. Персонаж о деньгах молчит. */
.yzw-sys{ font-size:12px; line-height:1.5; color:var(--t3,#8d8878); flex:none; }
.yzw-sys b{ color:var(--t2,#b9b4a7); font-weight:600; }

.yzw-acts{ display:flex; flex-direction:column; gap:8px; margin-top:var(--sp3,12px); flex:none; }
.yzw-btn{
  display:block; width:100%; text-align:center; border:0; cursor:pointer;
  border-radius:var(--r-full, 999px); font-family:inherit;
  font-size:14.5px; font-weight:600; padding:14px 16px; text-decoration:none;
  transition:background var(--d-micro,140ms) linear;
}
.yzw-btn.pri{ background:var(--hero, #d97757); color:var(--on-hero, #3a1a0e); }
.yzw-btn.pri:hover{ background:var(--hero-hi, #e2885f); }
.yzw-btn.sec{ background:var(--s3, #282523); color:var(--t1, #faf9f5); }
.yzw-btn.sec:hover{ background:var(--s4, #312d2a); }
.yzw-btn:focus-visible{ outline:var(--focus-w,2px) solid var(--focus,#4c8dff); outline-offset:var(--focus-off,2px); }

/* Блок стоял выше секции близости и её не покрывал: .yzb-sheet и стрелка
   раскрытия продолжали ездить при включённом «уменьшить движение». */
@media (prefers-reduced-motion: reduce){
  .yzw-sheet, .yzw-veil, .yzb-sheet, .yzb-veil{ transition:none; }
  .yzw-dots i{ animation:none; }
  .yzb-row .ar{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ШТОРКА БЛИЗОСТИ (02.09.2026)
   Живёт здесь, а не в chat.css: там класс .ch-left уже описан дважды и
   побеждает тот, что ниже — заводить в том файле новые имена значит однажды
   получить ту же историю. Префикс .ch- сохранён, потому что разметку рисует
   chat.js, но правила лежат отдельно и ни с чем не пересекаются по именам.
   ══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   ЭКРАН БЛИЗОСТИ (persona/assets/bond.js)

   Своя рама, а не карточка внутри общей шторки сайта: та на широком экране
   вставала по своим правилам, обрезалась сверху и снизу и приносила свой
   заголовок с крестиком. Геометрия здесь ровно та же, что у стены — на
   телефоне во весь экран, на большом окно по центру, — чтобы два экрана
   одного механизма не выглядели из разных приложений.

   Названия ступеней набраны засечным (--f-serif, Source Serif 4). Он
   подключён и почти не используется; это готовый способ отличить
   «отношения» от «интерфейса», не рисуя ничего нового.
   ═══════════════════════════════════════════════════════════════════════════ */

.yzb-veil{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:1380;
  background:var(--overlay, rgba(10,9,8,.72));
  opacity:0; pointer-events:none;
  transition:opacity var(--d-sheet, 280ms) var(--e-out, cubic-bezier(.22,1,.36,1));
}
.yzb-veil.on{ opacity:1; pointer-events:auto; }

.yzb-sheet{
  position:fixed; left:0; right:0; top:0; bottom:0; z-index:1381;
  display:flex; flex-direction:column;
  background:var(--s0, #0A0908); color:var(--t1, #faf9f5);
  font-family:var(--f-ui, 'Inter', system-ui, sans-serif);
  transform:translateY(100%);
  transition:transform var(--d-sheet, 280ms) var(--e-out, cubic-bezier(.22,1,.36,1));
  overscroll-behavior:contain;
}
.yzb-sheet.on{ transform:none; }
.yzb-sheet[hidden]{ display:none; }

@media (min-width: 720px){
  .yzb-sheet{
    left:50%; right:auto; top:50%; bottom:auto;
    width:min(460px, 92vw); max-height:min(820px, 92vh);
    border-radius:var(--r-lg, 28px);
    transform:translate(-50%, -46%) scale(.98); opacity:0;
    box-shadow:var(--sh-lg, 0 24px 60px -18px rgba(0,0,0,.65));
  }
  .yzb-sheet.on{ transform:translate(-50%, -50%) scale(1); opacity:1; }
  .yzb-sheet .yzb-grip{ display:none; }
}

.yzb-grip{
  width:36px; height:4px; border-radius:var(--r-full,999px);
  background:var(--s4,#312D2A); margin:var(--sp2,8px) auto 0; flex:none;
}

/* ── шапка ── */
.yzb-top{
  flex:none; display:flex; align-items:center; gap:var(--sp3,12px);
  padding:var(--sp4,16px) var(--sp5,20px) var(--sp2,8px);
}
.yzb-av{
  width:42px; height:42px; flex:none; border-radius:var(--r-full,999px);
  background:radial-gradient(100% 100% at 40% 25%, #5f4a3e, #241c18);
  background-size:cover; background-position:center 28%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px var(--hair2, rgba(250,249,245,.17));
}
.yzb-av i{
  font-style:normal; font-family:var(--f-display,'Unbounded',sans-serif);
  font-size:16px; font-weight:800; color:var(--hero-lo, rgba(217,119,87,.55));
}
.yzb-who{ flex:1; min-width:0; }
.yzb-who b{ display:block; font-size:15px; font-weight:600; line-height:1.2; }
.yzb-who span{ display:block; font-size:12px; color:var(--t3,#8d8878); margin-top:2px; }
.yzb-x{
  flex:none; width:34px; height:34px; border:0; border-radius:var(--r-full,999px);
  background:var(--s3,#282523); color:var(--t2,#b9b4a7);
  font-size:14px; line-height:1; cursor:pointer;
}
.yzb-x:hover{ background:var(--s4,#312d2a); color:var(--t1,#faf9f5); }
.yzb-x:focus-visible{ outline:var(--focus-w,2px) solid var(--focus,#4c8dff); outline-offset:2px; }

/* ── тело ── */
.yzb-body{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 var(--sp5,20px) calc(var(--sp5,20px) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior:contain;
}
.yzb-body::-webkit-scrollbar{ width:0; }
.yzb-hair{ height:1px; background:var(--hair, rgba(250,249,245,.08)); margin:var(--sp4,16px) 0; }

/* ── печать ── */
.yzb-crest{ text-align:center; padding:var(--sp4,16px) 0 var(--sp2,8px); }
.yzb-seal{
  position:relative; width:124px; height:124px; margin:0 auto var(--sp4,16px);
  display:flex; align-items:center; justify-content:center;
}
.yzb-seal svg{ position:absolute; top:0; right:0; bottom:0; left:0; }
.yzb-seal .trk{ stroke:var(--s3, #282523); }
.yzb-seal .arc{ stroke:var(--gold, #e2b13c); }
.yzb-seal .rn{
  font-family:var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-size:36px; font-weight:600; letter-spacing:.04em; color:var(--gold, #e2b13c);
  width:98px; height:98px; border-radius:var(--r-full,999px);
  background:radial-gradient(70% 70% at 50% 40%, rgba(226,177,60,.14), transparent 70%);
  display:flex; align-items:center; justify-content:center;
}
.yzb-rank{
  font-family:var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-size:25px; font-weight:600; line-height:1.15; color:var(--t1,#faf9f5);
}
.yzb-sub{
  margin:var(--sp2,8px) auto 0; max-width:30ch;
  font-size:var(--fs-small,13px); line-height:1.45; color:var(--t3,#8d8878);
}

/* ── сегодня ── */
.yzb-today{ display:flex; align-items:center; gap:var(--sp3,12px); }
.yzb-today .rg{
  position:relative; width:42px; height:42px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.yzb-today .rg svg{ position:absolute; top:0; right:0; bottom:0; left:0; }
.yzb-today .trk{ stroke:var(--s3,#282523); }
.yzb-today .day{ stroke:var(--hero,#d97757); }
.yzb-today .rg i{
  font-style:normal; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--t1,#faf9f5);
}
.yzb-today .tx{ min-width:0; }
.yzb-today .tx b{ display:block; font-size:14.5px; font-weight:600; }
.yzb-today .tx span{ display:block; font-size:12px; color:var(--t3,#8d8878); margin-top:2px; }

/* ── лестница ── */
.yzb-ladder{ display:flex; flex-direction:column; }
.yzb-row{ display:flex; align-items:center; gap:var(--sp3,12px); padding:11px 0; }
.yzb-row .mk{
  width:28px; height:28px; flex:none; border-radius:var(--r-full,999px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-serif,'Source Serif 4',Georgia,serif);
  font-size:13px; font-weight:600;
  background:var(--s2,#201E1A); color:var(--t3,#8d8878);
}
.yzb-row .nm{ flex:1; min-width:0; font-size:14.5px; color:var(--t2,#b9b4a7); }
.yzb-row .nm small{ display:block; font-size:11.5px; color:var(--t3,#8d8878); margin-top:2px; }
.yzb-row .at{ flex:none; font-size:12px; color:var(--t3,#8d8878); font-variant-numeric:tabular-nums; }
.yzb-step.now{
  background:linear-gradient(90deg, rgba(226,177,60,.06), transparent 75%);
  margin:0 calc(-1 * var(--sp3,12px)); padding:0 var(--sp3,12px);
  border-radius:var(--r-md,12px); border-bottom-color:transparent;
}
.yzb-step.done .mk{ background:rgba(226,177,60,.13); color:var(--gold,#e2b13c); }
.yzb-step.now  .mk{ background:var(--gold,#e2b13c); color:#2b1f06; }
.yzb-step.now .nm{
  color:var(--t1,#faf9f5); font-weight:600;
  font-family:var(--f-serif,'Source Serif 4',Georgia,serif); font-size:16px;
}
.yzb-step.now .nm small{ font-family:var(--f-ui,system-ui); font-weight:400; font-size:11.5px; }
.yzb-step.next .nm{ color:var(--t3,#8d8878); }

/* ── события дня: ответ на «за что она даётся» ── */
.yzb-rules{ margin-top:var(--sp3,12px); display:flex; flex-direction:column; gap:2px; }
.yzb-rule{
  display:flex; align-items:center; gap:var(--sp3,12px);
  padding:6px 0; font-size:13.5px; color:var(--t3,#8d8878);
}
.yzb-rule .bx{
  width:18px; height:18px; flex:none; border-radius:5px;
  border:1px solid var(--s4,#312d2a); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; color:transparent;
}
.yzb-rule .nm{ flex:1; min-width:0; }
.yzb-rule .pt{ flex:none; font-variant-numeric:tabular-nums; }
.yzb-rule.done{ color:var(--t2,#b9b4a7); }
.yzb-rule.done .bx{ background:var(--hero,#d97757); border-color:var(--hero,#d97757); color:var(--on-hero,#3a1a0e); }
.yzb-rule.done .pt{ color:var(--hero,#d97757); font-weight:600; }
.yzb-note{ margin:var(--sp3,12px) 0 0; font-size:12.5px; line-height:1.5; color:var(--t3,#8d8878); }

/* ── раскрытая ступень ── */
.yzb-step{ border-bottom:1px solid var(--hair, rgba(250,249,245,.06)); }
.yzb-step:last-child{ border-bottom:0; }
.yzb-row{ cursor:pointer; }
.yzb-row .ar{
  flex:none; color:var(--t3,#8d8878); font-size:12px; margin-left:2px;
  transition:transform 160ms ease;
}
.yzb-step.open .yzb-row .ar{ transform:rotate(180deg); }
.yzb-row:focus-visible{ outline:var(--focus-w,2px) solid var(--focus,#4c8dff); outline-offset:2px; border-radius:var(--r-md,12px); }

.yzb-det{ padding:0 0 var(--sp4,16px) 40px; }
.yzb-det .st{ margin:0 0 var(--sp2,8px); font-size:13.5px; color:var(--t2,#b9b4a7); line-height:1.5; }
.yzb-det .st b{ color:var(--t1,#faf9f5); font-weight:600; }
.yzb-det .hint{ margin:6px 0 0; font-size:12.5px; color:var(--t3,#8d8878); }
.yzb-det .what{
  margin:var(--sp3,12px) 0 0; font-size:13px; line-height:1.5; color:var(--t2,#b9b4a7);
  padding:var(--sp3,12px); border-radius:var(--r-md,12px); background:var(--s1,#16130F);
}
.yzb-det .what span{
  display:block; font:600 10.5px/1 var(--f-ui,system-ui); letter-spacing:.11em;
  text-transform:uppercase; color:var(--t3,#8d8878); margin-bottom:5px;
}
.yzb-pb{ height:4px; border-radius:var(--r-full,999px); background:var(--s2,#201E1A); overflow:hidden; }
.yzb-pb i{
  display:block; height:100%; border-radius:var(--r-full,999px);
  background:var(--hero-grad, linear-gradient(90deg,#b3552e,#e2885f));
}

.yzb-ov{
  font:600 11px/1 var(--f-ui,system-ui); letter-spacing:.11em;
  text-transform:uppercase; color:var(--t3,#8d8878); margin-bottom:var(--sp2,8px);
}

/* ── КАРТОЧКА СТУПЕНИ В ПЕРЕПИСКЕ ──────────────────────────────────────────
   Награждать нужно предметом, а не всплывашкой. В Genshin за десятую ступень
   дружбы дают именную карточку, у LoveyDovey — открытку; цифра забывается,
   артефакт остаётся. Поэтому это настоящая строка переписки: она переживает
   обновление страницы и попадается на глаза через месяц.

   Раньше карточка вставлялась ТОЛЬКО на клиенте (chat.js, insertAdjacentHTML),
   в базе её не было — и обновление стирало её навсегда. Теперь метка живёт на
   самой реплике (persona_chat_messages.meta = 'bond:3'), и лента рисует
   карточку из истории.
   ────────────────────────────────────────────────────────────────────────── */
.yzb-card{
  margin:var(--sp4,16px) auto; max-width:340px; text-align:center;
  padding:var(--sp4,16px) var(--sp4,16px) var(--sp3,12px);
  background:linear-gradient(180deg, rgba(226,177,60,.07), transparent 70%);
  border:1px solid rgba(226,177,60,.18); border-radius:var(--r-lg,18px);
}
.yzb-card .ov{
  font:600 10.5px/1 var(--f-ui,system-ui); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold,#e2b13c); opacity:.85;
}
.yzb-card .sl{
  width:54px; height:54px; margin:var(--sp3,12px) auto var(--sp2,8px);
  border-radius:var(--r-full,999px); border:1px solid rgba(226,177,60,.3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-serif,'Source Serif 4',Georgia,serif);
  font-size:19px; font-weight:600; color:var(--gold,#e2b13c);
  background:radial-gradient(70% 70% at 50% 40%, rgba(226,177,60,.12), transparent 70%);
}
.yzb-card b{
  display:block; font-family:var(--f-serif,'Source Serif 4',Georgia,serif);
  font-size:19px; font-weight:600; color:var(--t1,#faf9f5);
}
.yzb-card p{ margin:var(--sp1,4px) 0 0; font-size:13px; color:var(--t3,#8d8878); line-height:1.45; }
.yzb-card .dt{ margin-top:var(--sp3,12px); font-size:11px; color:var(--t3,#8d8878); opacity:.75; }

/* Значок близости в шапке чата: римская цифра новой лестницы вместо
   арабского номера старой, и дуга — сколько пройдено ВНУТРИ ступени. */
.ch-lvl .yzb-num{
  font-family:var(--f-serif,'Source Serif 4',Georgia,serif);
  font-weight:600; letter-spacing:.03em;
}