/* ============================================================
   ИИ-ПЕРСОНЫ YAZME | ВИТРИНА ГЛАВНОЙ
   Файл: persona/assets/showcase.css

   Ни одного нового цвета: всё построено на токенах раздела
   (persona/assets/tokens.css), поэтому страница едет за темой сайта —
   и в янтарной, и в светлой «Cloud Dancer», и в «Полночи».

   Шапка раздела живёт отдельно, в topbar.css: её подключают и эта
   страница, и browse.php, и дублировать шестьдесят строк в двух файлах
   значило бы однажды поправить один и забыть про второй.
   ============================================================ */

/* ── ДЕВЯТЬ АКЦЕНТОВ ПОЛОК ─────────────────────────────────────
   Единственное, что здесь добавлено к палитре раздела. Нужны они ровно
   затем, чтобы шесть подряд идущих полок различались с расстояния и
   человек понимал, что промотал уже далеко. Используются тонко: черта
   слева от заголовка, сам заголовок и рамка карточки под курсором —
   ни одной заливки, поэтому контраст текста остаётся токеновым.
   На светлой теме те же тона притемняются подмешиванием текста сайта:
   зелёный, приличный на чёрном, на белом читается как выцветший. */
:root{
  --cat-anime:#e0725f; --cat-game:#5fa8e0; --cat-movie:#d9a441;
  --cat-books:#8fbf6f; --cat-hist:#c98a5a; --cat-myth:#a97fe0;
  /* Три полки не по категории: «стоит попробовать» / «начните отсюда»,
     «кто выслушает», «кто поспорит». */
  --cat-pick:#e2b13c; --cat-hear:#58a76b; --cat-argue:#c98a5a; --cat-friend:#e08fa8;
}
html[data-yz-theme="cloud"]{
  --cat-anime: color-mix(in srgb, #e0725f 58%, var(--yz-text, #232019));
  --cat-game:  color-mix(in srgb, #5fa8e0 52%, var(--yz-text, #232019));
  --cat-movie: color-mix(in srgb, #d9a441 50%, var(--yz-text, #232019));
  --cat-books: color-mix(in srgb, #8fbf6f 48%, var(--yz-text, #232019));
  --cat-hist:  color-mix(in srgb, #c98a5a 56%, var(--yz-text, #232019));
  --cat-myth:  color-mix(in srgb, #a97fe0 56%, var(--yz-text, #232019));
  --cat-pick:  color-mix(in srgb, #e2b13c 46%, var(--yz-text, #232019));
  --cat-hear:  color-mix(in srgb, #58a76b 62%, var(--yz-text, #232019));
  --cat-argue: color-mix(in srgb, #c98a5a 56%, var(--yz-text, #232019));
  --cat-friend:color-mix(in srgb, #e08fa8 54%, var(--yz-text, #232019));
}

.sc-body{ padding-bottom:var(--nav-gap); }
.sc-shell{ max-width:var(--wide); margin:0 auto; }

/* ── «ВЫ ОБЩАЛИСЬ» ────────────────────────────────────────────────
   В потоке над афишей, а не поверх неё: высота заголовка события
   заранее не известна, и наложение рано или поздно случится. */
/* align-items:flex-start, а не center: у подписи бывает одна строка, бывает
   две, и при выравнивании по центру кружок с короткой подписью уезжает вниз
   относительно соседей. Ряд обязан стоять по верхнему краю. */
.sc-recents{
  display:flex; align-items:flex-start; gap:var(--sp4);
  padding:var(--sp4) var(--sp5) var(--sp3);
  overflow-x:auto; scrollbar-width:none; background:var(--s0);
}
.sc-recents::-webkit-scrollbar{ display:none; }
.sc-recents .lbl{
  flex:none; color:var(--t2); font:600 var(--fs-over)/1.25 var(--f-ui);
  letter-spacing:var(--ls-over); text-transform:uppercase; max-width:76px;
}
@media (max-width:560px){ .sc-recents .lbl{ display:none; } }
/* Столбик и кольцо НЕ РАСТЯГИВАЮТСЯ ни при каких обстоятельствах.
   Здесь стояли только width/height, и кружки в ряду выходили разной формы:
   flex-элемент без flex:none тянется и сжимается по главной оси, а строка
   выравнивала соседей по разной высоте. Три гвоздя разом: flex:none на
   столбике и на кольце, aspect-ratio на случай, если высоту всё-таки
   тронут снаружи, и радиус 50% вместо токена — половина ЛЮБОЙ коробки
   даёт круг, а 999px на неквадратной коробке даёт таблетку. */
.sc-recents .who{
  flex:none; width:60px; text-align:center; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  align-self:flex-start;
}
.sc-recents .ring{
  position:relative; flex:none; box-sizing:border-box;
  width:50px; height:50px; min-width:50px; min-height:50px; aspect-ratio:1/1;
  border-radius:50%;
  padding:2.5px; background:conic-gradient(var(--hero) 62%, var(--hair2) 0);
  display:grid; place-items:center;
  transition:transform var(--d-std) var(--e-spring);
}
.sc-recents .who:hover .ring{ transform:scale(1.08); }
.sc-recents .ring img{
  box-sizing:border-box; width:100%; height:100%; aspect-ratio:1/1;
  border-radius:50%; object-fit:cover; border:2px solid var(--s0);
}
.sc-recents .ring .mono{
  box-sizing:border-box; width:100%; height:100%; aspect-ratio:1/1;
  border-radius:50%; border:2px solid var(--s0);
  background:linear-gradient(150deg, var(--s3), var(--s2)); color:var(--t2);
  display:grid; place-items:center; font:700 18px/1 var(--f-serif);
}
/* Точка «есть новое», а не счётчик: pnClubMine отдаёт 0/1, и цифра «1»
   на каждом кружке — обещание количества, которого никто не считал. */
.sc-recents .un{
  position:absolute; top:0; right:0; width:13px; height:13px;
  border-radius:var(--r-full); background:var(--hero); border:2px solid var(--s0);
}
.sc-recents .who b{
  display:block; min-height:14px;      /* пустая подпись не схлопывает столбик */
  font:600 11.5px/1.2 var(--f-ui); color:var(--t1); width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ── ШТОРКА «УБРАТЬ ИЗ ЛЕНТЫ» ─────────────────────────────────────
   Сама шторка (.pv-sheet, .pv-veil, ручка, крестик) оформлена в ui.css —
   здесь только два пункта меню внутри неё. */
.sc-rc-menu{ padding:var(--sp2) var(--sp4) var(--sp6); display:grid; gap:6px; }
.sc-rc-item{
  display:flex; align-items:flex-start; gap:var(--sp4); width:100%;
  padding:var(--sp4); border-radius:var(--r-md); text-align:left;
  background:var(--s2); border:1px solid var(--hair); color:var(--t1);
  text-decoration:none; cursor:pointer; font:inherit;
  transition:background var(--d-micro) var(--e-out);
}
.sc-rc-item:hover{ background:var(--s3); }
.sc-rc-item:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-rc-item svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--t2); }
.sc-rc-item span{ display:block; min-width:0; }
.sc-rc-item b{ display:block; font:650 var(--fs-body)/1.3 var(--f-ui); }
/* Пояснение — не украшение: «убрать» рядом с перепиской читается как
   «удалить», и одна строка снимает этот страх раз и навсегда. */
.sc-rc-item i{
  display:block; margin-top:3px; font-style:normal;
  font:500 12.5px/1.35 var(--f-ui); color:var(--t3);
}
#scRcHide svg{ color:var(--hero); }

.sc-recents .who.add .ring{
  background:none; border:1px dashed var(--hair2); color:var(--t3); font-size:18px;
}

/* ── АФИША СОБЫТИЙ ───────────────────────────────────────────────── */
/* НА ТЕЛЕФОНЕ АФИША — КАРТОЧКА, А НЕ КУСОК ФОНА.
   Было: на широком экране полоса с размытой подложкой и композицией лиц
   справа, а на узком — тот же текст прямо на фоне страницы, без рамки,
   без цвета, и ряд плиток по 48 пикселей внизу. Разница не в размере, а в
   том, что на телефоне от афиши не оставалось ничего, по чему её можно
   узнать как афишу: заголовок на общем фоне — это просто заголовок.
   421 пиксель высоты (половина экрана 844) при 320 пикселях содержимого.

   Что сделано:
     · рамка и своя поверхность — блок читается как отдельная вещь;
     · размытая подложка ВКЛЮЧЕНА и здесь: именно она даёт цвет, из-за
       которого десктопная версия выглядит дорого;
     · лица собраны в перекрывающуюся ленту по 56 пикселей вместо
       разрозненных квадратов по 48 — это состав, а не миниатюры;
     · «Весь каталог» на узком экране убран: ровно под афишей идёт лента
       категорий, где первым стоит «Все 304». Две кнопки в столбик съедали
       сто пикселей ради ссылки, которая дублируется через сорок.
   Порядок остался прежним, тот, о котором договаривались: лица ПОД
   текстом, компактно. */
.sc-stage{ position:relative; overflow:hidden; }
.sc-slide{
  position:absolute; left:0; right:0; top:0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:opacity 700ms var(--e-out);
}
.sc-slide.on{ position:relative; opacity:1; pointer-events:auto; }
.sc-slide .bg{ position:absolute; inset:0; overflow:hidden; }
.sc-slide .bg .blur{
  display:block; position:absolute; inset:-12%; width:124%; height:124%;
  object-fit:cover; filter:blur(40px) saturate(170%); opacity:.62;
}
/* Затемнение ровно настолько, чтобы белый заголовок держал контраст, и ни
   каплей больше: чёрная плита поверх подложки убивает как раз тот цвет,
   ради которого подложка и нужна. Снизу уводим в цвет карточки, чтобы
   лента лиц лежала на ровном фоне. */
.sc-slide .bg::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, var(--s1) 4%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.22) 100%),
    radial-gradient(120% 80% at 12% 82%, var(--overlay), transparent 62%);
}
.sc-slide .in{
  position:relative; z-index:2; order:1;
  padding:var(--sp5) var(--sp4) var(--sp3); max-width:720px;
}
@media (max-width:819px){
  .sc-stage{
    margin:var(--sp3) var(--sp4) 0; border-radius:var(--r-lg);
    background:var(--s1); border:1px solid var(--hair);
  }
  /* Заголовок в три строки — потолок. Четвёртая на узком экране означает,
     что подпись и кнопка уехали за сгиб, а кнопка — весь смысл афиши. */
  .sc-stage h2{
    font-size:clamp(25px, 6.6vw, 32px); letter-spacing:-.03em;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sc-stage .qt{ margin-top:var(--sp2); -webkit-line-clamp:2; font-size:14px; }
  .sc-stage .row{ margin-top:var(--sp4); flex-wrap:nowrap; }
  .sc-stage .dots{ margin-top:var(--sp2); margin-bottom:calc(var(--sp1) * -1); }
}
@media (max-width:560px){
  /* Ровно под афишей идёт лента категорий с «Все» первым чипом.
     Второй кнопкой мы повторяли её же — в столбик, за сто пикселей. */
  .sc-stage .sc-btn.glass{ display:none; }
  .sc-stage .row .sc-btn{ flex:1; min-width:0; }
}
.sc-stage .kick{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:var(--sp2);
  padding:6px 12px; border-radius:var(--r-full);
  background:var(--s3); border:1px solid var(--hair2);
  font:700 var(--fs-over)/1 var(--f-ui); letter-spacing:var(--ls-over);
  text-transform:uppercase; color:var(--t1);
}
.sc-stage .kick s{ width:6px; height:6px; border-radius:50%; background:var(--mark); text-decoration:none; }
.sc-stage h2{
  margin:0; font:800 clamp(29px, 7.6vw, 64px)/.98 var(--f-display);
  letter-spacing:-.04em; color:var(--t1);
}
.sc-stage .qt{
  margin:var(--sp3) 0 0; max-width:52ch; color:var(--t1);
  font:600 clamp(14.5px, 2.4vw, 19px)/1.45 var(--f-serif);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-stage .row{ display:flex; gap:var(--sp2); margin-top:var(--sp5); flex-wrap:wrap; }

/* Точка-переключатель: полоска видимая 30×4, нажимаемая зона 44×24 —
   иначе это провал WCAG 2.2 «Target Size (Minimum)». */
.sc-stage .dots{ display:flex; gap:var(--sp1); margin-top:var(--sp3); margin-left:-6px; }
.sc-stage .dots button{
  display:grid; place-items:center; width:44px; height:24px;
  background:none; border:0; border-radius:6px; cursor:pointer;
}
.sc-stage .dots button::before{
  content:''; display:block; width:30px; height:4px; border-radius:2px;
  background:var(--hair2); transition:background var(--d-std), width var(--d-std);
}
.sc-stage .dots button.on::before{ background:var(--hero); width:40px; }
.sc-stage .dots button:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }

/* Визуал события. На телефоне — один компактный ряд под текстом:
   два ряда крупных плиток съедали пол-экрана и отодвигали полки за сгиб. */
/* Состав события: перекрывающаяся лента, а не ряд миниатюр. Плитки с
   промежутками читаются как «вот вам ещё картинки», лента внахлёст — как
   «их много, и они вместе». Рамка цветом поверхности отделяет соседей. */
.sc-slide .art{
  position:relative; z-index:2; order:2;
  padding:0 var(--sp4) var(--sp5); display:flex; align-items:center; gap:0;
}
.sc-slide .art img{
  box-sizing:border-box; width:56px; height:56px; flex:none;
  object-fit:cover; display:block; background:var(--s3);
  border-radius:16px; border:2px solid var(--s1); margin-left:-12px;
  box-shadow:var(--sh-sm);
}
.sc-slide .art img:first-child{ margin-left:0; }
.sc-slide .art .more{
  flex:none; display:grid; place-items:center; height:56px; padding:0 12px;
  margin-left:6px; border-radius:16px; background:var(--s2);
  border:1px solid var(--hair2); color:var(--t2);
  font:700 13px/1 var(--f-ui); white-space:nowrap;
}
.sc-slide .art.single img{ width:72px; height:72px; border-radius:20px; margin-left:0; }
.sc-slide .art img:nth-of-type(n+6){ display:none; }
.sc-slide .art .vs{ display:none; }

/* «Спор недели» на телефоне: два лица подряд — это просто два портрета.
   Кружок VS ставим МЕЖДУ ними порядком флексов (в разметке он идёт
   последним), а не абсолютом: абсолют пришлось бы подгонять числами под
   ширину плитки и нахлёст, и он бы поехал от любой правки размера. */
.sc-slide .art.duo img:nth-of-type(1){ order:1; }
.sc-slide .art.duo .vs{
  order:2; display:grid; place-items:center; flex:none;
  width:30px; height:30px; margin:0 -8px; z-index:2;
  border-radius:50%; background:var(--mark); color:#241a04;
  font:800 11px/1 var(--f-ui); border:2px solid var(--s1);
}
.sc-slide .art.duo img:nth-of-type(2){ order:3; }

/* ЭТОТ БЛОК СТОИТ ЗДЕСЬ, А НЕ ВЫШЕ, И ЭТО НЕ ПРИДИРКА.
   Медиазапрос НЕ добавляет специфичности: правило `.sc-slide .art img`
   внутри @media и такое же правило снаружи весят одинаково, и выигрывает
   то, что НИЖЕ по файлу. Стоя выше базовых правил ленты, весь этот блок
   молча не применялся: плитки оставались по 56 пикселей, и счётчик «+29»
   резало краем карточки на экране 320. Любая правка порядка в этом файле
   обязана это учитывать. */
@media (max-width:400px){
  /* На 320 пяти плиток по 56 плюс счётчик в карточку не помещаются —
     последняя вылезала за скруглённый край. Уменьшаем шаг и оставляем
     ленту прокручиваемой: обрезать счётчик «+29» нельзя, он и есть
     единственное число, которое афиша сообщает. */
  .sc-slide .art{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .sc-slide .art::-webkit-scrollbar{ display:none; }
  .sc-slide .art img{ width:46px; height:46px; border-radius:14px; margin-left:-12px; }
  .sc-slide .art.single img{ width:64px; height:64px; }
  .sc-slide .art .more{ height:46px; padding:0 10px; border-radius:14px; font-size:12px; }
  .sc-slide .art.duo .vs{ width:26px; height:26px; font-size:10px; }
}

@media (min-width:820px){
  /* 76vh давали кинематографичность и уводили первую полку за сгиб: на
     ноутбуке 1440×900 карточки начинались на 940-м пикселе, то есть их
     не видел никто. 56vh оставляют афише вес и открывают верхний ряд
     карточек — а именно ряд, а не баннер, отвечает на «с кем говорить». */
  .sc-stage{ height:min(56vh, 500px); min-height:420px; }
  .sc-slide, .sc-slide.on{ position:absolute; inset:0; display:block; }
  .sc-slide .bg .blur{
    display:block; position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; filter:blur(60px) saturate(140%); opacity:.5;
    transform:scale(1.2);
  }
  .sc-slide .in{
    position:absolute; left:0; right:auto; bottom:0; z-index:2;
    padding:0 var(--sp5) 64px; max-width:min(52%, 720px);
  }
  /* Ширина текста ограничена так, чтобы заголовок физически не мог
     заехать под композицию: она начинается примерно на 57% ширины. */
  .sc-slide .art{
    position:absolute; right:5vw; top:50%; transform:translateY(-50%);
    width:min(38%, 440px); padding:0; z-index:3;
  }
  .sc-slide .art .more{ display:none; }
  .sc-slide .art img:nth-of-type(n+6){ display:block; }
  /* Сброс мобильной ленты. Нахлёст, рамка и тень заданы в базовых правилах,
     а базовые правила действуют и здесь: медиазапрос не добавляет
     специфичности. Без явного сброса мозаика приезжала бы с минусовым
     отступом слева и чужой рамкой. */
  .sc-slide .art img{
    width:auto; height:auto; margin-left:0; border:0; box-shadow:none;
    border-radius:14px;
  }

  /* Четыре колонки на четыре ряда, и сама сетка задана квадратом. Высоту
     рядов НЕЛЬЗЯ оставлять на auto: колонка в 1fr для картинки — размер
     неопределённый, браузер берёт её собственные 512 пикселей, ряды
     разъезжаются вдвое, и мозаика вылезает за афишу сверху и снизу. */
  .sc-slide .art.mosaic{
    display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
    aspect-ratio:1/1; gap:8px;
  }
  .sc-slide .art.mosaic img{
    width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:var(--sh-lg);
  }
  .sc-slide .art.mosaic img:first-child{ grid-column:span 2; grid-row:span 2; }

  .sc-slide .art.trio{ display:flex; align-items:center; justify-content:flex-end; gap:0; }
  /* Веер из четырёх: 4×33% минус три нахлёста по 11% = 99% — ровно в свою
     колонку. При 44% и −12% он вылезал влево на 176 пикселей и ложился на
     подзаголовок; композиция не имеет права заходить на текст. */
  .sc-slide .art.trio img{
    width:33%; height:auto; aspect-ratio:1/1; border-radius:18px; margin-left:-11%;
    border:2px solid var(--s0); box-shadow:var(--sh-lg);
  }
  .sc-slide .art.trio img:first-child{ margin-left:0; }
  .sc-slide .art.trio img:nth-child(2){ transform:translateY(-9%); }
  .sc-slide .art.trio img:nth-child(4){ transform:translateY(-5%); }

  /* position тут НЕ переобъявляем. Строчка `position:relative` в этом
     месте стоила слайду «спор недели» всей вёрстки: она перебивала
     absolute из .art выше (та же специфичность, но ниже по файлу), пара
     лиц уезжала в левый верхний угол и ложилась прямо на заголовок —
     ровно та беда с наездом, которую мы уже один раз чинили. Кружку VS
     позиционированный предок и так есть: сам .art. */
  .sc-slide .art.duo{ display:flex; align-items:center; justify-content:center; gap:9%; }
  .sc-slide .art.duo img{
    width:42%; height:auto; aspect-ratio:1/1; border-radius:20px;
    border:2px solid var(--s0); box-shadow:var(--sh-lg);
  }
  .sc-slide .art.duo img:first-child{ transform:translateY(-7%); }
  .sc-slide .art.duo img:last-child{ transform:translateY(7%); }
  .sc-slide .art.duo .vs{
    display:grid; place-items:center; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%); width:52px; height:52px; border-radius:var(--r-full);
    background:var(--mark); color:#241a04; font:800 12px/1 var(--f-ui); z-index:2;
  }
  .sc-slide .art.single{ display:block; }
  .sc-slide .art.single img{
    width:100%; height:auto; aspect-ratio:1/1; border-radius:var(--r-lg);
    border:1px solid var(--hair2); box-shadow:var(--sh-lg);
  }
}

/* Узкая полоса десктопа: 820–900. Здесь текстовой колонке в 52% не хватало
   пяти пикселей на две кнопки в строку, и вторая падала под первую —
   на широком экране это читается как поломка. Отдаём тексту 58% и на
   столько же ужимаем композицию, чтобы зазор между ними не съелся. */
@media (min-width:820px) and (max-width:900px){
  .sc-slide .in{ max-width:58%; }
  .sc-slide .art{ width:min(34%, 440px); }
  .sc-stage .row{ flex-wrap:nowrap; }
}

/* ── КНОПКИ ──────────────────────────────────────────────────────── */
.sc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 20px; border-radius:var(--r-full);
  background:var(--hero); color:var(--on-hero); text-decoration:none;
  font:700 var(--fs-body)/1 var(--f-ui); box-shadow:var(--sh-hero);
  transition:background var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-spring);
}
.sc-btn:hover{ background:var(--hero-hi); transform:translateY(-2px); }
.sc-btn svg{ width:18px; height:18px; }
.sc-btn.glass{ background:var(--s2); color:var(--t1); border:1px solid var(--hair2); box-shadow:none; }
.sc-btn.glass:hover{ background:var(--s3); }
.sc-btn.sm{ height:42px; padding:0 18px; font-size:var(--fs-small); }

/* ── ЛЕНТА КАТЕГОРИЙ ─────────────────────────────────────────────── */
.sc-navbar{
  position:sticky; top:0; z-index:30; padding:var(--sp3) 0 var(--sp4);
  background:linear-gradient(to bottom, var(--s0) 68%, var(--glass) 88%, transparent);
  backdrop-filter:blur(10px);
}
.sc-chips{ display:flex; gap:var(--sp2); overflow-x:auto; scrollbar-width:none; padding:0 var(--sp5); }
.sc-chips::-webkit-scrollbar{ display:none; }
.sc-chips .chip{
  flex:none; white-space:nowrap; height:38px; padding:0 18px;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:var(--s2); border:1px solid var(--hair); border-radius:var(--r-full);
  color:var(--t2); font:600 var(--fs-small)/1 var(--f-ui);
  transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
.sc-chips .chip:hover{ color:var(--t1); background:var(--s3); }
.sc-chips .chip.on{ background:var(--t1); border-color:var(--t1); color:var(--s0); }
/* Счётчик в чипе — 0.8, не 0.65. При .65 на тёмной теме выходило 4.19:1,
   а для одиннадцати пикселей нужно 4.5, и Lighthouse это поймал
   (26.08.2026, «Аниме 95», «Игры 70», «Кино 39»). При .8 — 5.6, и
   вторичность цифры относительно названия (8:1) всё равно читается. */
.sc-chips .chip i{ font-style:normal; font-size:11px; opacity:.8; }
.sc-chips .chip:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

/* ── ПОЛКА ───────────────────────────────────────────────────────── */
.sc-shelf{
  position:relative; margin-top:var(--sp7); padding:0 var(--sp5);
  scroll-margin-top:calc(var(--sp8) + 62px);
}
.sc-shelf.lit .sc-sec h2{ color:var(--accent, var(--hero)); }
.sc-sec{ display:flex; align-items:center; gap:var(--sp3); margin-bottom:var(--sp4); }
.sc-sec.center{ justify-content:center; }
.sc-sec .bar{
  width:3px; height:26px; border-radius:2px; flex:none;
  background:var(--accent, var(--hero));
}
.sc-sec h2{
  margin:0; font:700 clamp(19px, 2.6vw, 26px)/1.1 var(--f-display);
  letter-spacing:-.03em; color:var(--t1); transition:color var(--d-sheet);
}
.sc-sec .why{ color:var(--t3); font:500 12.5px/1.3 var(--f-ui); }
.sc-sec .all{
  margin-left:auto; flex:none; color:var(--t2); text-decoration:none;
  font:600 12.5px/1 var(--f-ui); white-space:nowrap; padding:8px 0;
}
.sc-sec .all:hover{ color:var(--accent, var(--hero)); }
@media (max-width:680px){ .sc-sec .why{ display:none; } }

.sc-rail{
  display:flex; gap:var(--sp3); overflow-x:auto;
  scroll-snap-type:x proximity; scroll-padding-inline:var(--sp5);
  margin:0 calc(var(--sp5) * -1); padding:6px var(--sp5) var(--sp5);
  scrollbar-width:none; scroll-behavior:smooth; overscroll-behavior-x:contain;
}
.sc-rail::-webkit-scrollbar{ display:none; }
.sc-rail > *{ flex:none; scroll-snap-align:start; }
.sc-rail:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:-2px; border-radius:var(--r-md); }

/* Стрелки на любом экране шире 700 px, а не только при наличии курсора:
   свайп не должен быть единственным способом увидеть четвёртую карточку
   (WCAG 2.5.7). На узком экране ту же роль играет «Смотреть все». */
.sc-arw{
  display:none; position:absolute; top:calc(50% - 10px); z-index:6;
  width:46px; height:46px; border-radius:var(--r-full);
  background:var(--s3); border:1px solid var(--hair2); color:var(--t1);
  place-items:center; box-shadow:var(--sh-md); cursor:pointer;
  transition:opacity var(--d-std), background var(--d-micro);
}
.sc-arw:hover{ background:var(--s4); }
.sc-arw svg{ width:19px; height:19px; }
.sc-arw.l{ left:6px; } .sc-arw.r{ right:6px; }
.sc-arw[disabled]{ opacity:0; pointer-events:none; }
@media (min-width:700px){ .sc-arw{ display:grid; } }

/* ── КАРТОЧКА ────────────────────────────────────────────────────── */
.sc-card{
  position:relative; width:152px; display:block; text-decoration:none; color:inherit;
  border-radius:var(--r-md); overflow:hidden;
  background:var(--s1); border:1px solid var(--hair);
  transition:border-color var(--d-micro) var(--e-effect), transform var(--d-std) var(--e-spring-soft);
}
@media (min-width:900px){ .sc-card{ width:200px; } }
.sc-card:hover{ border-color:var(--accent, var(--hero)); transform:translateY(-4px); }
.sc-card:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.sc-card .ph{ position:relative; display:block; width:100%; aspect-ratio:1/1; background:var(--s3); overflow:hidden; }
.sc-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-card .ph.mono{
  display:grid; place-items:center;
  font:700 clamp(30px, 12vw, 52px)/1 var(--f-serif); color:var(--t3);
  background:linear-gradient(150deg, var(--s3), var(--s2));
}
.sc-card .bd{ display:block; padding:var(--sp3) var(--sp3) calc(var(--sp3) + 2px); }
/* Имя переносится на вторую строку, а не обрезается многоточием. На
   узкой карточке «Александр Пушкин» в одну строку не помещается никак, а
   «Александр П…» — это ровно та карточка, мимо которой человек пройдёт:
   узнавание («о, это же он!») и есть здесь главный конвертер. Две строки
   — потолок, дальше высота карточек в ряду разъедется. */
.sc-card .nm{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font:700 14.5px/1.25 var(--f-ui); color:var(--t1); letter-spacing:-.01em;
  min-height:36px;
}
.sc-card .tg{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:4px; font-size:12.5px; line-height:1.35; color:var(--t2); min-height:34px;
}
.sc-card .go{ display:block; margin-top:var(--sp2); font:650 12px/1 var(--f-ui); color:var(--hero); }

/* «Вы уже говорили»: понять это, не открывая чат, — названная жалоба
   пользователей Character.AI. */
.sc-seen{
  position:absolute; right:9px; top:9px; z-index:4;
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px 0 7px;
  border-radius:var(--r-full); background:var(--win); color:#06210d;
  font:700 10px/1 var(--f-ui); letter-spacing:.04em; text-transform:uppercase;
}
.sc-seen svg{ width:12px; height:12px; }

/* Десятка: цифра слева. Перекрытие задано в пикселях, а не долей кегля:
   ширина цифры зависит от того, догрузился Unbounded или нет. */
.sc-rank{ display:flex; align-items:flex-start; }
.sc-rank .num{
  flex:none; margin-top:10px; user-select:none; pointer-events:none;
  font:800 clamp(58px, 13vw, 104px)/.78 var(--f-display);
  color:var(--s0); -webkit-text-stroke:2px var(--hair2);
  transition:-webkit-text-stroke-color var(--d-sheet);
}
.sc-rank .sc-card{ margin-left:-14px; z-index:2; }
.sc-rank:hover .num{ -webkit-text-stroke-color:var(--accent, var(--hero)); }

/* ── ШИРОКИЕ БЛОКИ ───────────────────────────────────────────────── */
.sc-block{ margin-top:var(--sp8); padding:0 var(--sp5); }
.sc-panel{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--s1); border:1px solid var(--hair); padding:var(--sp6);
}
.sc-make{
  display:flex; align-items:center; gap:var(--sp5); flex-wrap:wrap;
  background:linear-gradient(120deg, var(--hero-lo), transparent 60%);
  border:1px dashed var(--hero-line);
}
.sc-make .plus{
  flex:none; width:56px; height:56px; border-radius:var(--r-full);
  background:var(--hero-grad); display:grid; place-items:center;
  color:var(--on-hero); font:300 30px/1 var(--f-ui);
}
.sc-make .tx{ flex:1; min-width:200px; }
.sc-make h3{ margin:0; font:700 clamp(18px, 2.4vw, 23px)/1.15 var(--f-serif); color:var(--t1); }
.sc-make p{ margin:6px 0 0; color:var(--t2); font-size:var(--fs-small); max-width:52ch; }

.sc-story .tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp3); margin-top:var(--sp4); }
@media (min-width:760px){ .sc-story .tiles{ grid-template-columns:repeat(4,1fr); } }
.sc-story .tile{
  padding:var(--sp4); border-radius:var(--r-md); background:var(--s2);
  border:1px solid var(--hair); text-decoration:none;
  transition:border-color var(--d-micro), transform var(--d-std) var(--e-out);
}
.sc-story .tile:hover{ border-color:var(--hero-line); transform:translateY(-3px); }
.sc-story .tile b{ display:block; font:700 14.5px/1.2 var(--f-ui); color:var(--t1); }
.sc-story .tile span{ display:block; margin-top:4px; color:var(--t3); font-size:12px; }

.sc-books{
  display:flex; gap:var(--sp3); overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--sp5) * -1); padding:2px var(--sp5) var(--sp4);
  scroll-snap-type:x proximity;
}
.sc-books::-webkit-scrollbar{ display:none; }
.sc-books .bk{
  flex:none; width:150px; text-decoration:none; scroll-snap-align:start;
  transition:transform var(--d-std) var(--e-out);
}
/* Обложку рисует pnBookCover() — своим <img> или подложкой с буквой, и
   какая именно там разметка, витрине знать незачем. Мы задаём ей место:
   столбик 150×225. Без этого картинка приезжает в натуральную величину
   и разносит ряд — ровно это и случилось на первом прогоне. */
.sc-books .bk > img,
.sc-books .bk > *:not(b):not(i){
  display:block; width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:var(--r-md); background:var(--s2); border:1px solid var(--hair);
  overflow:hidden;
}
/* Если обложка приходит завёрнутой (подложка с буквой вместо картинки —
   так делают почти все наши «монограммы»), картинку внутри тоже кладём
   по месту, иначе она торчит из своей же рамки. */
.sc-books .bk > *:not(b):not(i) img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.sc-books .bk:hover{ transform:translateY(-4px); }
.sc-books .bk b{ display:block; margin-top:var(--sp2); font:700 13.5px/1.3 var(--f-serif); color:var(--t1); }
.sc-books .bk i{ display:block; margin-top:3px; font-style:normal; color:var(--t3); font-size:11.5px; }

/* ── УКАЗАТЕЛЬ А–Я ───────────────────────────────────────────────── */
.sc-az nav{ display:flex; flex-wrap:wrap; gap:6px; }
.sc-az nav a{
  min-width:40px; height:40px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); text-decoration:none; font:700 13.5px/1 var(--f-ui);
}
.sc-az nav a:hover{ background:var(--s3); color:var(--t1); border-color:var(--hair2); }
.sc-az nav a.all{ background:var(--hero); color:var(--on-hero); border-color:transparent; padding:0 16px; }
.sc-az nav a:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

/* ── ПОДВАЛ ──────────────────────────────────────────────────────── */
.sc-foot{
  display:flex; flex-wrap:wrap; gap:var(--sp4); justify-content:center;
  padding:var(--sp8) var(--sp5) var(--sp7); margin-top:var(--sp8);
  border-top:1px solid var(--hair);
}
/* Отбивка сверху и снизу нужна не для красоты: без неё ссылка подвала
   ростом 22 пикселя, а WCAG 2.2 (2.5.8) требует цель не меньше 24×24.
   Промах по ссылке в подвале — мелочь ровно до тех пор, пока не сидишь
   в трясущемся автобусе. */
.sc-foot a{
  display:inline-block; padding:5px 6px; color:var(--t3);
  text-decoration:none; font-size:var(--fs-small); border-radius:8px;
}
.sc-foot a:hover{ color:var(--t1); }
.sc-foot a:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .sc-rail, .sc-books{ scroll-behavior:auto; }
  .sc-card, .sc-btn, .sc-recents .ring, .sc-story .tile{ transition:none; }
}