/* ============================================================================
   КАРТОЧКА АЙДОЛА, 03.08.2026. Грузится ПОСЛЕ style.css и theme-dark.css.
   Разметку рисует rsOpenCard() в public/app.js, данные — public/idols.json.

   ЗАЧЕМ. До этого дня карточка была анкетой: портрет, имя, концепт, абзац
   характера. Претензия Сармата дословно: «не хватает чего-то, что заставит
   пользователя захотеть этого айдола и зарегистрироваться».

   ЧТО ГОВОРЯТ ЭТАЛОНЫ. Официальное руководство Character.AI по созданию
   персонажа [support.character.ai, обновлено 17.06.2026]: «Your profile gets
   someone to tap. The greeting is what happens when they arrive… The greeting
   is the AI's strongest example of how this Character writes». То есть товар —
   не биография, а ОБРАЗЕЦ РЕЧИ. Там же: несколько приветствий работают как
   меню, человек листает их ДО начала разговора.
   Обратная сторона — обзор перегрузки выбором [Misuraca et al., Front.
   Psychol., PMC11111947, май 2024]: чем больше признаков у варианта, тем
   тяжелее решение, а у новичка без опыта большой набор повышает шанс
   отложить выбор вовсе. Поэтому слоёв РОВНО четыре, каждый — одна мысль,
   и первым идёт вердикт «тебе сюда, если…», который решает за уставшего.

   ГЕОМЕТРИЯ. Радиусы и отступы взяты у соседнего блока витрины в style.css
   (.rs-card, .rs-c) — карточка обязана выглядеть продолжением сетки, а не
   гостем из другой системы. Липкий подвал .rs-act не тронут: правка
   02.08 про «Назад» под пальцем остаётся в силе.
   ============================================================================ */

/* --- 1. ШАПКА-ФОТОКАРТОЧКА -------------------------------------------------
   Имя переехало НА портрет. Причина не декоративная: в мерче k-pop имя всегда
   на фотокарточке, и разделение «сверху лицо, снизу подпись» читалось как
   строка каталога. Затемнение снизу — не эффект, а условие читаемости белого
   по произвольному портрету. */
/* overflow:hidden не украшение: если портрет не доехал, alt-текст вылезал
   ВЫШЕ карточки (line-height:0 не удерживает его) — проверено на битом пути. */
.rs-card .rc-hero{position:relative;line-height:0;overflow:hidden;background:var(--bg-3)}
.rs-card .rc-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--c,var(--accent2));z-index:2}
.rs-card .rc-scrim{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  display:flex;flex-direction:column;gap:5px;line-height:1.2;
  background:linear-gradient(180deg,rgba(10,6,16,0) 0%,rgba(10,6,16,.55) 42%,rgba(10,6,16,.88) 100%)}
.rs-card .rc-tag{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0E0A16;background:var(--c,var(--accent2));
  padding:3px 8px;border-radius:999px}
.rs-card .rc-nm{font-size:30px;font-weight:900;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.rs-card .rc-bio{font-size:13px;color:rgba(255,255,255,.82);font-style:normal}

/* --- 2. ВЕРДИКТ «ТЕБЕ СЮДА, ЕСЛИ…» ----------------------------------------
   Стоит первым и намеренно коротким. Это ответ на 18 лиц: человек не обязан
   вчитываться в 18 характеров, чтобы понять, чей он. Цвет — персональный,
   заливка слабая, чтобы строка не спорила с главной кнопкой. */
.rs-card .rc-fit{display:flex;gap:8px;align-items:baseline;
  border-left:3px solid var(--c,var(--accent2));
  background:color-mix(in srgb,var(--c,var(--accent2)) 9%,transparent);
  padding:9px 11px;border-radius:0 10px 10px 0}
.rs-card .rc-fit u{flex:0 0 auto;text-decoration:none;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--accent2))}
.rs-card .rc-fit span{font-size:13.5px;line-height:1.4;color:var(--ink)}

/* --- 3. ГОЛОС: ФРАЗА-ВИЗИТКА НА КОРЕЙСКОМ ---------------------------------
   Единственное место карточки, которое ЗВУЧИТ, и единственное, что связывает
   персонажа с сутью продукта. Цвета не выдуманы: хангыль — тот же --lyr-k, что
   в разборе песни, транскрипция — тот же --lyr-r. Человек, дошедший до песни,
   уже знает эти два цвета; карточка учит его читать их заранее. */
.rs-card .rc-say{width:100%;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:0 12px;text-align:left;font:inherit;cursor:pointer;
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 14px;
  transition:border-color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.rs-card .rc-say:hover{border-color:var(--c,var(--accent2));background:var(--bg-2)}
.rs-card .rc-say:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.rs-card .rc-say-h{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:4px}
/* Все три строки текста жёстко в первой колонке: при автораскладке хангыль и
   транскрипция вставали В ОДНУ строку по обе стороны от кнопки. */
.rs-card .rc-kr,.rs-card .rc-rom,.rs-card .rc-tr{grid-column:1}
.rs-card .rc-kr{font-size:21px;font-weight:700;line-height:1.3;color:var(--lyr-k,#C6A5FF)}
.rs-card .rc-rom{font-size:12.5px;line-height:1.35;color:var(--lyr-r,#FF93C4);margin-top:3px}
.rs-card .rc-tr{font-size:13px;line-height:1.35;color:var(--mut);margin-top:3px}
/* Кнопка звука 46px — выше нормы 44px, потому что это главный «попробуй» карточки. */
.rs-card .rc-play{grid-column:2;grid-row:2/5;align-self:center;justify-self:end;
  width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--c,var(--accent2));color:#12091A;font-size:17px;line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
/* Синтез первой фразы занимает секунды: пульс говорит «идёт», а не «сломалось». */
.rs-card .rc-say.busy .rc-play{animation:rcPulse 1s ease-in-out infinite}
@keyframes rcPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.65}}

/* --- 4. ОБРАЗЕЦ ПЕРЕПИСКИ --------------------------------------------------
   Две реплики ровно тем голосом, которым персонаж будет писать в чате. Это и
   есть товар: человек покупает не описание, а тон. Пузырь без хвостика и с
   одним срезанным углом — как в мессенджере, но не копия чужого. */
.rs-card .rc-dm{display:flex;flex-direction:column;gap:6px}
.rs-card .rc-h{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:7px}
.rs-card .rc-h::after{content:"";flex:1;height:1px;background:var(--line)}
.rs-card .rc-b{align-self:flex-start;max-width:88%;font-size:14px;line-height:1.45;
  color:var(--ink);background:var(--bg-3);border:1px solid var(--line);
  padding:9px 13px;border-radius:16px 16px 16px 5px}
.rs-card .rc-b+.rc-b{border-radius:16px}
/* «Печатает…» — обещание продолжения. Точки те же, что в чате (@keyframes
   chatDot из style.css): один и тот же жест не должен выглядеть двумя разными. */
.rs-card .rc-typing{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  background:var(--bg-3);border:1px solid var(--line);border-radius:16px;padding:9px 13px}
.rs-card .rc-typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);
  animation:chatDot 1.3s infinite ease-in-out}
.rs-card .rc-typing i:nth-child(2){animation-delay:.16s}
.rs-card .rc-typing i:nth-child(3){animation-delay:.32s}

/* --- 5. ЧЕМ ЗАНЯТА ПОМИМО --------------------------------------------------
   Две конкретные детали вместо прилагательных. «Ест токпокки в три ночи прямо
   из кастрюли» цепляет, «весёлая и открытая» — нет. */
.rs-card .rc-habits{display:flex;flex-direction:column;gap:6px}
.rs-card .rc-hab{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
  line-height:1.4;color:var(--mut)}
.rs-card .rc-hab::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:6px;
  background:var(--c,var(--accent2));transform:rotate(45deg)}

/* --- 6. ПРАВКИ СТАРЫХ БЛОКОВ ----------------------------------------------
   Характер и трещина остаются, но перестают быть главными: карточка теперь
   начинается с голоса, а не с досье. */
.rs-card .in{gap:14px}
.rs-card .bd{font-size:13.5px;line-height:1.55;color:var(--mut)}
.rs-card .cr{border-left:3px solid var(--c,var(--accent2))}
/* Крестик крупнее нормы тапа: он лежит на портрете, где палец промахивается. */
.rs-x{width:44px;height:44px;font-size:20px}

/* --- 7. ДОСТУПНОСТЬ, УЗКИЙ И НИЗКИЙ ЭКРАН ---------------------------------
   Квадратный портрет верен только на телефоне: там он берёт 42% высоты.
   На широком экране карточка растягивается до 560px, квадрат становится 558px
   и съедает две трети окна — замерено 03.08 на 1280×900: под липким подвалом
   оставалось 234px, то есть ВСЁ, ради чего карточка переписана, уезжало под
   сгиб. Портрет там режется кинематографично, лицо остаётся в кадре. */
@media (min-width:600px){
  .rs-card .rc-hero{max-height:330px;overflow:hidden}
  .rs-card .big{aspect-ratio:auto;height:330px;object-position:center 22%}
}
@media (max-height:640px){
  .rs-card .rc-hero{max-height:42vh;overflow:hidden}
  .rs-card .big{aspect-ratio:auto;height:42vh;object-position:center 22%}
}
@media (max-width:380px){
  .rs-card .rc-nm{font-size:26px}
  .rs-card .rc-kr{font-size:19px}
  .rs-card .rc-b{max-width:94%}
}
@media (prefers-reduced-motion:reduce){
  .rs-card .rc-typing i,.rs-card .rc-say.busy .rc-play{animation:none}
}
/* --- 8. СВЕТЛЫЙ «ХРОМ» -----------------------------------------------------
   Найдено 03.08 глазами и чинится здесь, потому что причина лежит в двух чужих
   файлах. В версии «Хром A» светлая палитра объявлена НА BODY со СВЕТЛЫМ
   текстом (страница — тёмная хромовая плита), а тёмный текст возвращается
   поимённо внутри белых поверхностей: .card, .tile, .lp-card, .hd, .onb-card…
   (chrome-more.css). Карточки состава в том списке нет — она появилась позже.
   Итог: белая подложка --bg-2 и почти белый --ink на ней, то есть текст
   характера в светлой теме не читался и ДО этой правки. Возвращаем тем же
   набором токенов, что и у соседних белых поверхностей. */
html:not([data-theme="dark"]) .rs-card{
  --ink:#171B26;--mut:#4E5766;--dim:#646E7E;
  --line:rgba(23,27,38,.13);--line-strong:rgba(23,27,38,.22);
  --iris:#6C46D8;--iris-soft:rgba(108,70,216,.10);--panel2:#E7EBF2;
  color:var(--ink);
}
/* Плашка звука обязана отличаться от белого корпуса карточки: --bg-1 в этой
   теме почти белый и читался как пустое место. */
html:not([data-theme="dark"]) .rs-card .rc-say{background:var(--bg-3)}
html:not([data-theme="dark"]) .rs-card .rc-say:hover{background:var(--bg-4)}
/* Персональный цвет пастельный — он для тёмного фона. Мелкий текст им на белом
   даёт около 2:1, поэтому надзаголовок и маркер уходят на фирменный --iris,
   а сам цвет персонажа остаётся там, где он лежит заливкой, а не буквами. */
html:not([data-theme="dark"]) .rs-card .rc-fit u,
html:not([data-theme="dark"]) .rs-card .cr u{color:var(--iris)}
html:not([data-theme="dark"]) .rs-card .rc-hab::before{background:var(--iris)}

/* ХАНГЫЛЬ НЕ ПЕРЕНОСИТЬ ПО СЛОГАМ (правка 04.08, находка лингвиста). Браузер
   рвёт корейское слово в любом месте, и на карточке выходило «확/ 인을»,
   «지난달 / 이랑» — то есть граница слова показывалась там, где её нет.
   Мы учим читать корейский; неверная граница здесь не косметика, а враньё
   в самом предмете. keep-all запрещает разрыв внутри слова, overwrap
   оставляет выход для слова, которое шире строки целиком. */
.rs-card .rc-kr,.rs-card .rc-rom{word-break:keep-all;overflow-wrap:break-word}