/* ИЗНАНТИКА - mini app. Тёмная кинематографичная тема, всегда своя:
   themeParams Телеграма сознательно игнорируем, светлой темы нет. */

:root{
  --bg:#08070a;
  --bg-soft:#100d12;
  --bg-card:#15111a;
  --ink:#efe9e4;
  --ink-dim:#a79ba4;
  --ink-faint:#8a7f8b;      /* FONT-LIGHT: было #6f6470 - 3.6:1, ниже порога */
  --accent:#c8102e;          /* алый акцент */
  --accent-deep:#7a1020;     /* бордо */
  --line:rgba(239,233,228,.09);
  --radius:18px;
  --pad:16px;
  /* высоту окна держим сами: в webview 100vh врёт при открытой клавиатуре */
  --app-h:100dvh;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font:400 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:var(--app-h);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

.screen{min-height:var(--app-h)}
[hidden]{display:none!important}

/* ---------- Экран 1: выбор героя ---------- */

.screen--chars{
  padding:calc(var(--safe-top) + 28px) var(--pad) calc(var(--safe-bot) + 32px);
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(122,16,32,.30) 0%,transparent 62%),
    var(--bg);
}

.lead{margin:0 0 22px;text-align:center}
.lead__title{
  margin:0;
  font:600 30px/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,#e7c9cf 55%,#a8626f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead__sub{
  margin:10px auto 0;max-width:19em;
  color:var(--ink-dim);font-size:14px;line-height:1.45;
}

.cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.cards__state{
  padding:38px 0;text-align:center;color:var(--ink-faint);font-size:14px;
}

.card{
  position:relative;display:block;width:100%;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-card);color:inherit;text-align:left;
  overflow:hidden;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease;
}
.card:active{transform:scale(.985);border-color:rgba(200,16,46,.5)}

.card__media{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.card__img{
  /* absolute обязателен: фолбэк позиционирован, и без этого он рисуется
     ПОВЕРХ загруженной аватарки - картинка есть, а её не видно */
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  /* у портретов низ намеренно пустой - кадрируем выше, к лицу */
  object-position:50% 14%;
}
/* фолбэк, когда файла аватарки нет: свой градиент на каждого героя */
.card__fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 64px/1 Georgia,serif;color:rgba(255,255,255,.22);
}
.card__fallback[data-slug="fantom"]{background:linear-gradient(150deg,#1b1420,#3a1020 60%,#0b0910)}
.card__fallback[data-slug="zeid"]{background:linear-gradient(150deg,#101725,#1d2a3c 60%,#08090d)}
.card__fallback[data-slug="krik"]{background:linear-gradient(150deg,#141a16,#2b3327 60%,#0a0b09)}
.card__fallback[data-slug="llira"]{background:linear-gradient(150deg,#1c1420,#4a1626 60%,#0b0810)}
.card__fallback[data-slug="morok"]{background:linear-gradient(150deg,#12141a,#33141f 60%,#07080b)}
.card__fallback[data-slug="ventura"]{background:linear-gradient(150deg,#14120d,#3a2a12 60%,#08070a)}
.card__fallback[data-slug="_default"]{background:linear-gradient(150deg,#181419,#332028 60%,#0a090c)}

/* растворяем низ портрета в теле карточки, текст лежит ПОД картинкой */
.card__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 66%,rgba(20,16,26,.6) 88%,var(--bg-card) 100%);
}
.card__body{display:block;padding:16px 20px 22px}
/* Имя как на обложке романа: пепельно-бордовый градиент, мягкое свечение
   и короткая линия-акцент. Тот же приём, что на лендинге. */
.card__name{
  display:block;margin:0 0 11px;
  font:400 26px/1.15 Georgia,"Times New Roman",serif;letter-spacing:.015em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(200,16,46,.22));
}
.card__name::after{
  content:'';display:block;width:38px;height:1px;margin-top:10px;
  background:linear-gradient(90deg,rgba(200,16,46,.85),rgba(200,16,46,0));
}
/* Жанры - строка постера, а не ценники. Блок с inline-тегами: разделитель
   живёт в ::before и переносится вместе со своим тегом. */
.card__tags{
  display:block;margin:0 0 13px;padding:0;
  font:500 10.5px/1.75 system-ui,-apple-system,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(239,233,228,.5);
}
.card__tag{display:inline;white-space:nowrap}
.card__tag + .card__tag::before{content:'·';margin:0 .6em;color:rgba(200,16,46,.75)}
.card__teaser{
  margin:0;color:var(--ink-dim);font-size:15px;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* CARD-MORE. «Подробнее» - не отдельная кнопка, а указатель внутри карточки:
   карточка сама по себе button, вложить в неё вторую нельзя, да и незачем -
   тап по любому её месту ведёт на один и тот же экран знакомства. Роль тут
   чисто зрительная: без этой строки карточка читается как «всё, что есть».
   Стиль тихий, бордовый, без заливки - она подсказывает, а не зовёт. */
.card__more{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:13px;min-height:26px;
  font:500 13.5px/1.2 system-ui,-apple-system,sans-serif;
  letter-spacing:.01em;color:#d99aa6;
}
.card__more::after{
  content:'\203a';font:400 18px/1 Georgia,serif;color:rgba(200,16,46,.95);
  position:relative;top:-1px;
}
.card:active .card__more{color:#fff}

/* ---------- Экран 1б: твои истории ---------- */

.screen--stories{
  padding:calc(var(--safe-top) + 28px) var(--pad) calc(var(--safe-bot) + 32px);
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(122,16,32,.26) 0%,transparent 60%),
    var(--bg);
}

.stories{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}

.story{
  display:flex;align-items:center;gap:13px;width:100%;min-width:0;
  padding:13px 14px;text-align:left;
  border:1px solid var(--line);border-radius:16px;
  background:var(--bg-card);color:inherit;cursor:pointer;
  transition:transform .16s ease,border-color .16s ease;
}
.story:active{transform:scale(.99);border-color:rgba(200,16,46,.5)}

.story__ava{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  background:var(--bg-soft) 50% 22%/cover no-repeat;
  border:1px solid rgba(200,16,46,.32);
  display:grid;place-items:center;
}
.story__mono{font:600 20px/1 Georgia,serif;color:rgba(255,255,255,.34)}

.story__body{flex:1 1 auto;min-width:0;display:block}
.story__top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;min-width:0}
.story__name{
  flex:1 1 auto;min-width:0;font:600 16.5px/1.25 Georgia,serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.story__time{flex:0 0 auto;font-size:11.5px;color:var(--ink-faint)}
.story__snippet{
  display:block;font-size:13.5px;line-height:1.4;color:var(--ink-dim);
  /* одна строка с многоточием: список остаётся спокойным */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.stories__head{
  margin:30px 0 12px;font:600 13px/1 var(--sans,system-ui);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  font-family:system-ui,sans-serif;
}

.fresh-list{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

/* ---------- Экран 2: чат ---------- */

.screen--chat{
  display:flex;flex-direction:column;
  height:var(--app-h);max-height:var(--app-h);
}

.chatbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-top) + 10px) var(--pad) 10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(122,16,32,.20),transparent),var(--bg);
  position:sticky;top:0;z-index:5;
}
.chatbar__back{
  flex:0 0 auto;width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);
  font:400 22px/1 system-ui;cursor:pointer;
}
.chatbar__ava{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--bg-card) 50% 22%/cover no-repeat;
  border:1px solid rgba(200,16,46,.34);
}
.chatbar__meta{display:flex;flex-direction:column;min-width:0}
.chatbar__name{
  font:400 18px/1.2 Georgia,serif;letter-spacing:.015em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e8cfd4 55%,#bd8894 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chatbar__world{
  font:500 9.5px/1.5 system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(239,233,228,.66);
}

.thread{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px var(--pad) 8px;
  display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:rgba(200,16,46,.35) transparent;
}
.thread::before{content:'';flex:1 0 auto}
.thread::-webkit-scrollbar{width:4px}
.thread::-webkit-scrollbar-thumb{background:rgba(200,16,46,.35);border-radius:4px}
.thread__state{color:var(--ink-faint);font-size:13px;text-align:center;padding:6px 0}

.msg{max-width:100%;animation:rise .22s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* реплика героя: проза, без пузыря - так длинный текст читается книгой */
.msg--char .msg__text{
  font:400 17px/1.6 Georgia,"Times New Roman",serif;
  color:#f4efea;
}
.msg--char .msg__text p{margin:0 0 .78em}
.msg--char .msg__text p:last-child{margin-bottom:0}
.msg--char .msg__text em{
  color:#dcc3ca;font-style:italic;
}

/* реплика игрока: компактный пузырь справа */
.msg--me{align-self:flex-end;max-width:82%}
.msg--me .msg__text{
  padding:10px 14px;border-radius:16px 16px 4px 16px;
  background:linear-gradient(160deg,rgba(200,16,46,.22),rgba(122,16,32,.30));
  border:1px solid rgba(200,16,46,.30);
  color:#f7f2ee;
  font-size:15.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
}

.msg--err .msg__text{
  color:#f0a9b3;font-size:13.5px;border-left:2px solid var(--accent);padding-left:10px;
}

/* Служебная отметка в ленте (смена голоса рассказа). Тише реплики и тише
   ошибки: это не событие истории, а подтверждение нажатой кнопки. */
.msg--sys{align-self:center;max-width:88%}
.msg--sys .msg__text{
  color:#9d8f93;font-size:12.5px;line-height:1.4;text-align:center;
  padding:6px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;
}

/* CUE-1. «Твой ход». Плашка тише реплики и тише служебной строки: она не
   сообщение, а отметка очереди. Стоит последней в ленте и снимается, как
   только человек начал печатать. */
.cue{
  align-self:center;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:8px;max-width:92%;margin:2px 0 4px;
}
.cue__word{
  font:400 11px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(157,143,147,.75);
}
.cue__next{
  padding:6px 13px;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:transparent;color:var(--ink-dim);cursor:pointer;
  font:400 12.5px/1.15 system-ui,-apple-system,sans-serif;
}
.cue__next:active{background:var(--bg-soft)}
.cue__next:disabled{opacity:.4;cursor:default}
/* Подсказки хода: чипы под плашкой. Занимают всю ширину строки, чтобы длинная
   реплика не резалась на полуслове. */
.cue__chip{
  flex:1 1 100%;padding:9px 13px;border:1px solid var(--line);border-radius:13px;
  background:var(--bg-soft);color:var(--ink-dim);cursor:pointer;text-align:left;
  font:400 13px/1.4 system-ui,-apple-system,sans-serif;
}
.cue__chip:active{border-color:rgba(200,16,46,.45)}

/* FONT-LIGHT. «Читать при свете»: тонкая антиква на чёрном гаснет на солнце.
   У Georgia есть только 400 и 700 - промежуточного начертания нет, поэтому
   режим берёт честный Bold, а не synthetic 500. Сглаживание возвращаем к
   обычному: antialiased на тёмном фоне срезает часть штриха.
   Класс живёт на <html>, раскладку и фон режим не трогает. */
.light-read .msg--char .msg__text{
  font-size:17.5px;font-weight:700;color:#fcf8f5;
  -webkit-font-smoothing:auto;
}
.light-read .msg--char .msg__text em{color:#f2dae0;font-weight:700}
.light-read .msg--me .msg__text{font-weight:600;color:#fffaf7}
.light-read .thread__state,
.light-read .chatbar__world{color:#c9bdc8}
.light-read .final__text{font-weight:700}

/* «печатает…» */
.typing{display:flex;gap:5px;align-items:center;padding:2px 0}
.typing span{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  opacity:.35;animation:blink 1.1s infinite;
}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* курсор потока */
.msg__caret{
  display:inline-block;width:2px;height:1em;margin-left:2px;
  background:var(--accent);vertical-align:-2px;animation:caret .9s steps(2) infinite;
}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- Композер ---------- */

.composer{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;
  padding:10px var(--pad) calc(var(--safe-bot) + 10px);
  border-top:1px solid var(--line);background:var(--bg);
}
.composer__input{
  flex:1 1 auto;min-height:42px;max-height:130px;resize:none;
  padding:10px 14px;border-radius:20px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink);
  font:400 16px/1.35 system-ui,sans-serif;   /* 16px: iOS не зумит поле */
  outline:none;
}
.composer__input:focus{border-color:rgba(200,16,46,.45)}
.composer__input::placeholder{color:var(--ink-faint)}

.composer__send{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;padding:0;
  border:1px solid transparent;color:#fff;
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  box-shadow:0 6px 18px rgba(200,16,46,.32);
  cursor:pointer;display:grid;place-items:center;
  transition:transform .16s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease;
}
.composer__send .ic{display:block;width:22px;height:22px}
.composer__send:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 8px 24px rgba(200,16,46,.44)}
.composer__send:active:not(:disabled){transform:scale(.92);box-shadow:0 3px 10px rgba(200,16,46,.3)}
/* пустое поле: перо гаснет и не зовёт нажимать */
.composer__send:disabled{opacity:.32;box-shadow:none;cursor:default}

/* ---------- Голос: кнопка записи (VOICE-2) ---------- */

.composer__mic{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;padding:0;position:relative;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-dim);
  cursor:pointer;display:grid;place-items:center;
  transition:transform .16s ease,color .18s ease,border-color .18s ease,
             background .18s ease,opacity .18s ease;
}
/* иконки живут в одной кнопке, показывает нужную состояние: микрофон - стоп - ожидание */
.composer__mic .ic{width:21px;height:21px;display:none}
.composer__mic[data-state=""] .ic--mic,
.composer__mic:not([data-state]) .ic--mic{display:block}
.composer__mic[data-state="rec"] .ic--stop{display:block}
.composer__mic[data-state="busy"] .ic--wait{display:block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.composer__mic:hover:not(:disabled){color:var(--ink);border-color:rgba(239,233,228,.2)}
.composer__mic:active:not(:disabled){transform:scale(.92)}
.composer__mic[data-state="rec"]{
  border-color:var(--accent);background:rgba(200,16,46,.2);color:var(--accent);
}
/* кольцо-пульс: видно, что запись идёт, даже боковым зрением */
.composer__mic[data-state="rec"]::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--accent);animation:pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.9);opacity:.85}
  100%{transform:scale(1.35);opacity:0}
}
.composer__mic[data-state="busy"]{color:var(--accent);opacity:.9}
.composer__mic:disabled{opacity:.5;cursor:default}

/* VOICE-2b. Микрофон отъел у поля 50px, и на 320px плейсхолдер уезжал во
   вторую строку. Возвращаем ширину полями композера, а не размером кнопок:
   палец важнее пикселей отступа */
@media (max-width:360px){
  .composer{gap:6px;padding-left:10px;padding-right:10px}
}

/* подсказка показывается один раз - потом жест уже знаком */
.voice-hint{
  position:fixed;left:var(--pad);z-index:18;
  bottom:calc(var(--safe-bot) + 62px);
  padding:8px 12px;border-radius:12px;
  background:rgba(21,17,26,.97);border:1px solid rgba(200,16,46,.4);
  font-size:12.5px;color:var(--ink-dim);
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  animation:rise .22s ease both;
}
.voice-hint::after{
  content:'';position:absolute;left:16px;bottom:-5px;
  width:9px;height:9px;transform:rotate(45deg);
  background:rgba(21,17,26,.97);
  border-right:1px solid rgba(200,16,46,.4);border-bottom:1px solid rgba(200,16,46,.4);
}

/* ---------- Запись голоса ---------- */

.rec{
  position:fixed;left:var(--pad);right:var(--pad);
  bottom:calc(var(--safe-bot) + 66px);z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  background:rgba(21,17,26,.97);border:1px solid rgba(200,16,46,.42);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.rec__pulse{
  width:10px;height:10px;border-radius:50%;background:var(--accent);
  animation:blink 1s infinite;flex:0 0 auto;
}
.rec__time{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.rec__hint{flex:1 1 auto;font-size:12.5px;color:var(--ink-dim);line-height:1.3}
.rec__cancel{
  flex:0 0 auto;padding:7px 11px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  font-size:12.5px;cursor:pointer;
}
/* 320px: время и отмена остаются, подсказка уступает место */
@media (max-width:340px){
  .rec__hint{display:none}
}

/* ---------- Тост ---------- */

.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-bot) + 78px);transform:translateX(-50%);
  z-index:40;max-width:calc(100% - 32px);
  padding:11px 16px;border-radius:12px;
  background:rgba(21,17,26,.97);border:1px solid rgba(200,16,46,.42);
  color:var(--ink);font-size:13.5px;line-height:1.4;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  /* своя анимация: общая rise перезаписывает transform и сносит
     центрирующий translateX(-50%) - тост уезжает вправо */
  animation:rise-x .2s ease both;
}
@keyframes rise-x{
  from{opacity:0;transform:translateX(-50%) translateY(6px)}
  to{opacity:1;transform:translateX(-50%)}
}

/* ---------- Крупные экраны: колонка по центру ---------- */

@media (min-width:620px){
  .cards{grid-template-columns:1fr 1fr;gap:16px}
  /* BONUS-3. Экран историй тоже колонка: без него на широком он растекался
     во всю страницу, карточки «нового знакомства» раздувались до полутора
     тысяч пикселей - и особый гость в своей рамке оказывался МЕНЬШЕ
     обычных соседей, ровно наоборот к тому, зачем рамка нужна. */
  .screen--chars,.screen--chat,.screen--stories{max-width:560px;margin:0 auto}
  .lead__title{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Меню романа ---------- */

.chatbar__menu{
  flex:0 0 auto;margin-left:auto;width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink-dim);cursor:pointer;
  display:grid;place-items:center;
}
.chatbar__menu svg{width:18px;height:18px}
.chatbar__menu[aria-expanded="true"]{border-color:rgba(200,16,46,.5);color:var(--ink)}

.sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end}
.sheet__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.62)}
.sheet__card{
  position:relative;width:100%;
  padding:10px 10px calc(var(--safe-bot) + 14px);
  border-radius:20px 20px 0 0;
  background:var(--bg-card);border-top:1px solid rgba(200,16,46,.28);
  box-shadow:0 -14px 40px rgba(0,0,0,.6);
  animation:sheet-up .2s ease both;
}
@keyframes sheet-up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

.sheet__item{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:14px 14px;border:0;border-radius:14px;
  background:transparent;color:var(--ink);text-align:left;cursor:pointer;
}
.sheet__item svg{flex:0 0 auto;width:21px;height:21px;color:var(--ink-dim)}
.sheet__item:active{background:var(--bg-soft)}
.sheet__item:disabled{opacity:.38;cursor:default}
.sheet__item--warn svg{color:rgba(200,16,46,.85)}
.sheet__body{display:block;min-width:0}
.sheet__name{display:block;font:600 15.5px/1.25 Georgia,serif}
.sheet__hint{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-faint)}

/* ---------- Подтверждение ---------- */

.ask{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:var(--pad)}
.ask__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.72)}
.ask__card{
  position:relative;width:100%;max-width:330px;
  padding:22px 20px 18px;border-radius:18px;
  background:var(--bg-card);border:1px solid rgba(200,16,46,.34);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:rise .2s ease both;
}
.ask__title{margin:0;font:400 19px/1.35 Georgia,serif;color:var(--ink)}
.ask__note{margin:10px 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.ask__row{display:flex;gap:10px}
.ask__btn{
  flex:1 1 0;padding:12px 10px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font:500 14.5px/1 system-ui,sans-serif;
}
.ask__btn--warn{
  border-color:transparent;color:#fff;
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
}

/* ---------- Экран закрытого теста ---------- */

.screen--gate{
  display:grid;place-items:center;
  padding:calc(var(--safe-top) + 32px) 26px calc(var(--safe-bot) + 32px);
  background:
    radial-gradient(120% 60% at 50% 12%,rgba(122,16,32,.34) 0%,transparent 62%),
    url("../img/gate-bg.webp") center/cover no-repeat,
    var(--bg);
}
.gate{max-width:22em;text-align:center}
.gate__mark{
  display:block;margin:0 auto 22px;width:64px;height:64px;line-height:62px;
  border:1px solid rgba(200,16,46,.4);border-radius:50%;
  font:400 30px/62px Georgia,serif;color:rgba(245,238,234,.9);
  background:rgba(10,8,12,.55);
}
.gate__title{
  margin:0 0 14px;font:400 34px/1.15 Georgia,"Times New Roman",serif;letter-spacing:.02em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,16,46,.25));
}
.gate__text{
  margin:0;font:400 16px/1.6 Georgia,serif;color:#d8ccd0;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

/* ---------- 7B-FRONT: тумблер режима и экран финала ---------- */

.sheet__item--switch{align-items:center}
.switch{
  flex:0 0 auto;margin-left:auto;width:44px;height:26px;padding:2px;
  border:1px solid var(--line);border-radius:13px;background:var(--bg-soft);
  display:flex;align-items:center;
  transition:background .18s ease,border-color .18s ease;
}
.switch__dot{
  width:20px;height:20px;border-radius:50%;background:var(--ink-faint);
  transition:transform .18s ease,background .18s ease;
}
.sheet__item--switch[aria-checked="true"] .switch{
  background:rgba(200,16,46,.30);border-color:rgba(200,16,46,.62);
}
.sheet__item--switch[aria-checked="true"] .switch__dot{
  transform:translateX(18px);background:#fff;
}
.sheet__item--switch[aria-checked="true"] svg{color:rgba(200,16,46,.85)}

/* последняя сцена: не реплика в ленте, а конец книги */
.msg--final{
  align-self:stretch;max-width:100%;margin-top:10px;
  padding:20px 16px 18px;border-radius:16px;
  border-top:1px solid rgba(200,16,46,.30);
  background:linear-gradient(180deg,rgba(122,16,32,.20),rgba(122,16,32,0) 72%);
}
.final__word{
  margin:0 0 16px;text-align:center;
  font:500 11.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.36em;text-transform:uppercase;color:rgba(214,74,99,.95);
}
.final__word::after{
  content:'';display:block;width:34px;height:1px;margin:12px auto 0;
  background:linear-gradient(90deg,rgba(200,16,46,0),rgba(200,16,46,.8),rgba(200,16,46,0));
}
.final__text{font:400 17px/1.68 Georgia,"Times New Roman",serif;color:#efe6e1}
.final__text p{margin:0 0 .82em}
.final__text p:last-child{margin-bottom:0}
.final__text em{color:#c9a9b1;font-style:italic}
/* 7B-DOP. Разбор повествователя: трезвый эпилог, а не голос героя -
   поэтому мельче, глуше и с отбивкой слева, чтобы не спорить со сценой */
.final__why{
  margin:20px 0 0;padding:2px 0 2px 15px;
  border-left:1px solid rgba(200,16,46,.28);
}
.final__why-cap{
  margin:0 0 9px;
  font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.final__why-text{font:400 14.5px/1.62 Georgia,"Times New Roman",serif;color:var(--ink-dim)}
.final__why-text p{margin:0 0 .7em}
.final__why-text p:last-child{margin-bottom:0}
.final__why-text em{font-style:italic}
.final__note{
  margin:18px 0 0;text-align:center;
  font:400 13px/1.5 Georgia,serif;color:var(--ink-faint);
}

/* композер закрытого романа: писать некому, но лист можно взять чистый */
.ended{
  flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  padding:14px var(--pad) calc(var(--safe-bot) + 14px);
  border-top:1px solid rgba(200,16,46,.28);
  background:linear-gradient(180deg,rgba(122,16,32,.18),transparent),var(--bg);
}
.ended__line{
  margin:0;text-align:center;font:400 14px/1.5 Georgia,serif;color:var(--ink-dim);
}
.ended__btn{
  min-height:46px;padding:13px 16px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(200,16,46,.45);background:transparent;color:var(--ink);
  font:500 15px/1 system-ui,-apple-system,sans-serif;
  transition:background .16s ease,transform .16s ease;
}
.ended__btn:active{transform:scale(.99);background:rgba(200,16,46,.14)}

/* ---------- ONSET: выбор, каким будет роман (только знакомство) ---------- */

/* Ниже подтверждения (z-index 40) и выше меню: предупреждение про Изнанку
   должно ложиться поверх карточки выбора, а не под неё. */
.onset{position:fixed;inset:0;z-index:34;display:grid;place-items:center;padding:var(--pad)}
.onset__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.88)}
.onset__card{
  position:relative;width:100%;max-width:380px;
  max-height:calc(var(--app-h) - 28px);overflow-y:auto;
  padding:24px 20px 18px;border-radius:20px;
  background:var(--bg-card);border:1px solid rgba(200,16,46,.34);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  animation:rise .22s ease both;
  scrollbar-width:thin;scrollbar-color:rgba(200,16,46,.35) transparent;
}
.onset__kicker{
  margin:0 0 9px;font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.onset__title{
  margin:0;font:400 25px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.01em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(200,16,46,.2));
}
.onset__lead{margin:11px 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}

.onset__opt{
  display:flex;align-items:flex-start;gap:13px;width:100%;
  margin:0 0 10px;padding:15px 15px 16px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:16px;
  background:var(--bg-soft);color:inherit;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.onset__opt:last-of-type{margin-bottom:0}
.onset__opt:active{transform:scale(.99)}
.onset__opt svg{flex:0 0 auto;width:22px;height:22px;margin-top:3px;color:var(--ink-faint)}
/* текущий выбор подсвечен: по умолчанию это Рай, на перезаходе - тот,
   что уже стоит у пары */
.onset__opt[data-current="1"]{
  border-color:rgba(200,16,46,.55);
  background:linear-gradient(160deg,rgba(200,16,46,.16),rgba(122,16,32,.07));
}
.onset__opt[data-current="1"] svg{color:rgba(214,74,99,.95)}

.onset__body{display:block;min-width:0}
.onset__name{display:block;font:400 19.5px/1.2 Georgia,"Times New Roman",serif}
.onset__badge{display:none}
.onset__opt[data-current="1"] .onset__badge{
  display:inline-block;margin-top:7px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(200,16,46,.42);
  font:500 9.5px/1.35 system-ui,-apple-system,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(226,160,173,.95);
}
.onset__text{display:block;margin-top:8px;font-size:13.5px;line-height:1.58;color:var(--ink-dim)}

.onset__err{
  margin:14px 0 0;padding-left:10px;border-left:2px solid var(--accent);
  font-size:13px;line-height:1.45;color:#f0a9b3;
}
.onset__foot{
  margin:15px 0 0;text-align:center;font-size:12px;line-height:1.45;color:var(--ink-faint);
}

/* ---------- NARR-1: две оси выбора на знакомстве ---------- */

/* подпись над группой: вопросов теперь два, и их надо развести глазами */
.onset__cap{
  margin:18px 0 9px;font:500 10px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

/* голос рассказа - выбор помельче: он меняет вид истории, но не её судьбу */
.onset__pair{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.onset__nar{
  display:block;width:100%;padding:13px 13px 14px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;
  background:var(--bg-soft);color:inherit;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.onset__nar:active{transform:scale(.99)}
.onset__nar[data-current="1"]{
  border-color:rgba(200,16,46,.55);
  background:linear-gradient(160deg,rgba(200,16,46,.16),rgba(122,16,32,.07));
}
.onset__name--sm{font-size:16px;line-height:1.25}
/* образец фразы: он объясняет разницу быстрее любого описания */
.onset__ex{
  display:block;margin-top:6px;font:italic 400 12.5px/1.35 Georgia,"Times New Roman",serif;
  color:rgba(226,160,173,.92);
}
.onset__nar .onset__text{margin-top:7px;font-size:12.5px;line-height:1.5}
/* вход в роман - отдельным шагом: два выбора тапом уже не закрыть.
   NARR-3. Кнопка НЕ липнет к низу карточки: на тесном экране липкая полоса
   накрывала второй вопрос, и человек уходил в роман, не увидев его. Пусть
   лучше низ карточки обрежется по скроллу - обрез честно зовёт крутить. */
.onset__go-wrap{margin-top:16px}
.onset__go{
  display:block;width:100%;padding:14px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(200,16,46,.5);
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#fff;font:500 15.5px/1.05 system-ui,-apple-system,sans-serif;
  transition:transform .16s ease,opacity .16s ease;
}
.onset__go:active{transform:scale(.99)}
.onset__go:disabled{opacity:.55;cursor:default}
.onset__go-wrap .onset__foot{margin-top:11px}
/* NARR-2 */

/* Низкий экран: на 640 и ниже карточка всё равно уедет в скролл, но чем
   меньше она просит крутить, тем больше шансов, что второй вопрос заметят. */
@media (max-height:780px){
  .onset__card{padding:18px 18px 15px}
  .onset__title{font-size:22px}
  .onset__lead{margin:9px 0 0;font-size:13px}
  .onset__cap{margin:15px 0 8px}
  .onset__opt{padding:12px 13px 13px;margin-bottom:9px}
  .onset__opt .onset__text{margin-top:6px;font-size:13px;line-height:1.5}
  .onset__nar{padding:11px 11px 12px}
  .onset__go-wrap{margin-top:13px}
  .onset__go{padding:13px 12px}
}
/* NARR-3 */

/* ---------- BONUS-1: особый гость ---------- */

/* Отдельная обрамлённая секция, а не широкая карточка в сетке: рамка,
   свечение и подпись держатся на ЛЮБОЙ ширине - на 375 гость отделён от
   каталога ровно так же явно, как на десктопе. */
.bonus{
  position:relative;margin:30px 0 0;padding:14px 12px 16px;
  border:1px solid rgba(200,16,46,.42);border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(200,16,46,.15) 0%,transparent 72%),
    linear-gradient(180deg,rgba(122,16,32,.17),rgba(122,16,32,.03));
  box-shadow:0 0 26px rgba(200,16,46,.13),0 14px 40px rgba(4,3,6,.5);
}
/* отбивка от сетки: черта в воздухе над рамкой */
.bonus::before{
  content:'';position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:76px;height:1px;
  background:linear-gradient(90deg,rgba(200,16,46,0),rgba(200,16,46,.75),rgba(200,16,46,0));
}
.bonus__cap{
  margin:0 0 12px;text-align:center;
  font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(226,160,173,.95);
}
.bonus__slot{display:block}

/* Карта гостя: тот же язык, что у обычной, но крупнее и с другим весом.
   Портрет выше (2/3 против 4/5) - на узком экране это единственный честный
   способ показать «крупнее», ширина-то и там и там во весь экран. */
.bcard{
  position:relative;display:block;width:100%;padding:0;
  border:1px solid rgba(200,16,46,.34);border-radius:18px;
  background:var(--bg-card);color:inherit;text-align:left;
  overflow:hidden;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease;
}
.bcard:active{transform:scale(.99);border-color:rgba(200,16,46,.62)}
/* Высоту держим ТОЛЬКО пропорцией. max-height тут стоять не может: рядом с
   aspect-ratio браузер пересчитывает по нему ещё и ширину, и на 768 портрет
   ужимался до 293px при карте в 494 - справа зияла пустота. */
.bcard__media{
  display:block;position:relative;aspect-ratio:2/3;
  overflow:hidden;background:var(--bg-soft);
}
.bcard__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 16%;
}
.bcard__fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 76px/1 Georgia,serif;color:rgba(255,255,255,.2);
  background:linear-gradient(150deg,#171320,#33142a 60%,#0a080c);
}
.bcard__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(20,16,26,.6) 84%,var(--bg-card) 100%);
}
.bcard__body{display:block;padding:18px 20px 24px}
.bcard__name{
  display:block;margin:0 0 12px;
  font:400 30px/1.12 Georgia,"Times New Roman",serif;letter-spacing:.015em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,16,46,.26));
}
.bcard__name::after{
  content:'';display:block;width:46px;height:1px;margin-top:11px;
  background:linear-gradient(90deg,rgba(200,16,46,.9),rgba(200,16,46,0));
}
.bcard__tags{
  display:block;margin:0 0 13px;padding:0;
  font:500 10.5px/1.75 system-ui,-apple-system,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(239,233,228,.5);
}
.bcard__tag{display:inline;white-space:nowrap}
.bcard__tag + .bcard__tag::before{content:'\00b7';margin:0 .6em;color:rgba(200,16,46,.75)}
.bcard__teaser{
  margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
/* CARD-MORE: у особого гостя та же подсказка. Замок стоит на входе в чат,
   а не на чтении, поэтому «Подробнее» тут живое. */
.bcard__more{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:14px;min-height:26px;
  font:500 14px/1.2 system-ui,-apple-system,sans-serif;color:#d99aa6;
}
.bcard__more::after{
  content:'\203a';font:400 18px/1 Georgia,serif;color:rgba(200,16,46,.95);
  position:relative;top:-1px;
}
.bcard:active .bcard__more{color:#fff}

/* Заперто: силуэт вместо портрета, замок поверх и приглушённое имя.
   Карта не ведёт в чат, поэтому и выглядеть должна иначе - но остаётся
   живой на тап, чтобы отказ был словами, а не молчанием. */
.bcard--locked{cursor:default;border-color:rgba(239,233,228,.16)}
.bcard--locked:active{border-color:rgba(200,16,46,.4)}
/* BONUS-2: фильтра на портрете нет вовсе. Слово Антона - карта дразнит,
   поэтому лицо цветное и живое, а «заперто» говорит плашка и тизер. */
.bcard--locked .bcard__name{
  background:linear-gradient(180deg,#cfc6c9 0%,#9a8f96 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;letter-spacing:.12em;
}
.bcard--locked .bcard__name::after{
  background:linear-gradient(90deg,rgba(239,233,228,.35),rgba(239,233,228,0));
}
.bcard__lock{
  position:absolute;right:12px;top:12px;
  display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;
  border:1px solid rgba(200,16,46,.45);background:rgba(10,8,12,.72);
  color:rgba(236,208,213,.95);box-shadow:0 8px 22px rgba(4,3,6,.55);
}
.bcard__lock svg{width:15px;height:15px}
.bcard__lock-word{
  font:500 10px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
}

/* На широком экране сетка героев уходит в две колонки, а гость остаётся
   один на всю ширину - разница в размере только растёт. */
@media (min-width:620px){
  .bonus{padding:16px 16px 18px}
  /* на широкой карте вертикальный портрет улетел бы в семьсот пикселей -
     тут кадр квадратный, и гость всё равно вдвое крупнее соседей по сетке */
  .bcard__media{aspect-ratio:1/1}
  .bcard__img{object-position:50% 12%}
  .bcard__name{font-size:32px}
}
/* BONUS-2 */


/* ---------- UGC-1: свой герой ---------- */

/* Вход в конструктор - карточка в общем ряду. Портрета нет: вместо него
   пустая рама, пунктирный контур того, кого ещё нет. Заливка холоднее
   соседей, чтобы карта читалась как место, а не как герой. */
.card--make{border-style:dashed;border-color:rgba(200,16,46,.34);background:var(--bg-soft)}
.card--make:active{border-color:rgba(200,16,46,.62)}
.card__media--make{
  display:grid;place-items:center;
  background:
    radial-gradient(90% 70% at 50% 30%,rgba(200,16,46,.13) 0%,transparent 70%),
    linear-gradient(160deg,#131019,#1c1520 62%,#0b090d);
}
.mk-frame{display:block;width:54%;max-width:172px;color:rgba(226,160,173,.5)}
.mk-frame svg{display:block;width:100%;height:auto}
.card--make .card__name{
  background:linear-gradient(180deg,#f4e7ea 0%,#dcb6bf 55%,#9c6572 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Бейдж своего героя в общей сетке: маленькая плашка в углу портрета.
   Не рамка и не другой фон - свой герой стоит в ряду как равный. */
.card__mine,.mcard__mine{
  position:absolute;left:12px;top:12px;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(200,16,46,.45);background:rgba(10,8,12,.72);
  color:rgba(236,208,213,.95);
  font:500 9.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(4,3,6,.5);
}

/* ---------- Экран создания ---------- */

.screen--make{
  padding:0 0 calc(var(--safe-bot) + 34px);
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(122,16,32,.28) 0%,transparent 62%),
    var(--bg);
}
.makebar{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-top) + 10px) var(--pad) 10px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,rgba(122,16,32,.20),transparent),var(--bg);
}
.makebar__back{
  flex:0 0 auto;width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);
  font:400 22px/1 system-ui;cursor:pointer;
}
.makebar__title{
  font:500 11px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}

/* COUNT-2c. Счётчик героев и проверок фото. Стоит между шапкой и формой -
   человек видит остаток ДО того, как напишет две тысячи знаков, а не после
   отказа. Строка исчерпанного лимита краснеет и сообщает срок. */
.quota{
  display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;
  padding:12px var(--pad) 0;
  font:400 12px/1.45 system-ui,-apple-system,sans-serif;color:var(--ink-faint);
}
.quota__row:empty{display:none}
.quota__row--out{color:#f0a9b3}

.make{display:block;padding:26px var(--pad) 0}
.make__title{
  margin:0;font:400 30px/1.15 Georgia,"Times New Roman",serif;letter-spacing:.01em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,16,46,.22));
}
.make__lead{margin:12px 0 24px;font-size:14px;line-height:1.6;color:var(--ink-dim)}

.make__label{
  display:block;margin:0 0 8px;
  font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.make__opt{letter-spacing:.12em;text-transform:none;color:rgba(239,233,228,.28)}

/* 16px в полях - не вкус: на меньшем размере iOS зумит страницу при фокусе */
.make__area,.make__input{
  display:block;width:100%;
  padding:13px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink);
  font:400 16px/1.5 system-ui,-apple-system,sans-serif;
  outline:none;
}
.make__area{min-height:190px;resize:vertical}
.make__area:focus,.make__input:focus{border-color:rgba(200,16,46,.45)}
.make__area::placeholder,.make__input::placeholder{color:var(--ink-faint)}

/* PREVIEW-1. Строка «ссылка + проверить» и карточка подтянутого кадра. */
.make__row{display:flex;gap:8px;align-items:stretch}
.make__row .make__input{flex:1 1 auto;min-width:0}
.make__check{
  flex:0 0 auto;padding:0 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-soft);color:var(--ink);cursor:pointer;
  font:500 13px/1 system-ui,-apple-system,sans-serif;
}
.make__check:disabled{opacity:.55;cursor:default}

.shot{
  margin:0 0 22px;padding:13px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-soft);
}
.shot__cap{
  margin:0 0 10px;font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.shot__img{
  display:block;width:100%;max-height:280px;object-fit:contain;
  border-radius:10px;background:#000;
}
.shot__meta{margin:9px 0 0;font-size:12px;line-height:1.45;color:var(--ink-faint)}
.shot__row{display:flex;gap:8px;margin-top:12px}
.shot__ok,.shot__no{
  flex:1 1 0;padding:11px 10px;border-radius:12px;cursor:pointer;
  font:600 13px/1 system-ui,-apple-system,sans-serif;
}
.shot__ok{border:0;background:var(--accent);color:#fff}
.shot__no{border:1px solid var(--line);background:transparent;color:var(--ink)}
.shot--ok{border-color:rgba(120,190,140,.45)}

.make__count{
  margin:7px 0 22px;text-align:right;
  font:400 11.5px/1 system-ui,sans-serif;color:var(--ink-faint);
}
.make__hint{margin:8px 0 22px;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.make__input + .make__label{margin-top:22px}

.make__err{
  margin:20px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--accent);
  font-size:13.5px;line-height:1.5;color:#f0a9b3;
}

.make__go{
  display:block;width:100%;margin-top:24px;min-height:52px;
  padding:15px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(200,16,46,.5);
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#fff;font:500 16px/1.05 system-ui,-apple-system,sans-serif;
  transition:transform .16s ease,opacity .16s ease;
}
.make__go:active{transform:scale(.99)}
.make__go:disabled{opacity:.5;cursor:default}
.make__foot{margin:12px 0 0;text-align:center;font-size:12px;line-height:1.5;color:var(--ink-faint)}

/* ---------- Ожидание: две минуты, поэтому со словами ---------- */

.brew{position:fixed;inset:0;z-index:36;display:grid;place-items:center;padding:var(--pad)}
.brew__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.9)}
.brew__card{
  position:relative;width:100%;max-width:340px;text-align:center;
  padding:34px 22px 28px;border-radius:20px;
  background:var(--bg-card);border:1px solid rgba(200,16,46,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
}
/* три уголька: дышат по очереди - видно, что процесс жив, а не завис */
.brew__orb{display:flex;justify-content:center;gap:9px;margin-bottom:22px}
.brew__orb i{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  opacity:.3;animation:ember 1.9s ease-in-out infinite;
}
.brew__orb i:nth-child(2){animation-delay:.32s}
.brew__orb i:nth-child(3){animation-delay:.64s}
@keyframes ember{
  0%,100%{opacity:.24;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.12)}
}
.brew__line{
  margin:0;min-height:3.2em;
  font:400 18px/1.45 Georgia,"Times New Roman",serif;color:#efe6e1;
  transition:opacity .26s ease;
}
.brew__note{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}

/* ---------- Готовый герой ---------- */

.made{padding:24px var(--pad) 0}
.made__cap{
  margin:0 0 14px;text-align:center;
  font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(226,160,173,.95);
}
.made__slot{display:block}

/* Карта собранного: тот же язык, что у колоды, но крупнее - он тут один */
.mcard{
  position:relative;display:block;width:100%;
  border:1px solid rgba(200,16,46,.34);border-radius:18px;
  background:var(--bg-card);overflow:hidden;
}
.mcard__media{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft)}
.mcard__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 14%;
}
.mcard__fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 72px/1 Georgia,serif;color:rgba(255,255,255,.2);
  background:linear-gradient(150deg,#171320,#33142a 60%,#0a080c);
}
.mcard__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(20,16,26,.6) 86%,var(--bg-card) 100%);
}
.mcard__body{display:block;padding:18px 20px 24px}
.mcard__name{
  display:block;margin:0 0 12px;
  font:400 28px/1.14 Georgia,"Times New Roman",serif;letter-spacing:.015em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,16,46,.24));
}
.mcard__name::after{
  content:'';display:block;width:44px;height:1px;margin-top:11px;
  background:linear-gradient(90deg,rgba(200,16,46,.9),rgba(200,16,46,0));
}
.mcard__tags{
  display:block;margin:0 0 13px;
  font:500 10.5px/1.75 system-ui,-apple-system,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(239,233,228,.5);
}
.mcard__tag{display:inline;white-space:nowrap}
.mcard__tag + .mcard__tag::before{content:'\00b7';margin:0 .6em;color:rgba(200,16,46,.75)}
/* HERO-1. Обрезки тут больше нет: экран собранного героя - не сетка, а
   единственная карта, и человек читает про него целиком. */
.mcard__teaser{
  display:block;margin:0;color:var(--ink-dim);font-size:15px;line-height:1.62;
}
/* HERO-1b: описание идёт абзацами и не режется ничем - см. make.js/fillStory */
.mcard__p{display:block;margin:0 0 12px}
.mcard__p:last-child{margin-bottom:0}

.made__warn{
  margin:16px 0 0;padding:2px 0 2px 12px;border-left:1px solid rgba(200,16,46,.4);
  font-size:12.5px;line-height:1.5;color:var(--ink-dim);
}
.made__go{
  display:block;width:100%;margin-top:22px;min-height:52px;
  padding:15px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(200,16,46,.5);
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#fff;font:500 16px/1.05 system-ui,-apple-system,sans-serif;
}
.made__go:active{transform:scale(.99)}
.made__back{
  display:block;width:100%;margin-top:10px;min-height:46px;
  padding:13px 12px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  font:500 14.5px/1 system-ui,-apple-system,sans-serif;
}
.made__back:active{background:var(--bg-soft)}

/* Монограмма в шапке чата: у своего героя портрета может не быть вовсе,
   и пустой кружок выглядел бы дырой. */
.chatbar__ava{
  display:grid;place-items:center;
  font:600 15px/1 Georgia,serif;color:rgba(255,255,255,.34);
}

@media (min-width:620px){
  .screen--make{max-width:560px;margin:0 auto}
  .make__title{font-size:34px}
  /* UGC-1b. Полоса на всю ширину вместо седьмой клетки: в сетке 2 колонки
     нечётная карточка оставляла справа пустоту в полкарты. */
  .card--make{
    grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding:10px;
  }
  .card__media--make{flex:0 0 148px;aspect-ratio:1/1;border-radius:13px}
  .card--make .mk-frame{width:60%;max-width:96px}
  .card--make .card__body{padding:4px 14px 4px 0}
  .card--make .card__name{margin-bottom:9px;font-size:24px}
  .card--make .card__teaser{-webkit-line-clamp:2}
}
/* UGC-1 */


/* ---------- LEGAL-1: согласие на обработку данных ---------- */

/* Шторка того же семейства, что и знакомство: тот же затемнённый фон, та же
   карточка. Уровень выше onset - согласие спрашивают раньше режима романа. */
.consent{position:fixed;inset:0;z-index:38;display:grid;place-items:center;padding:var(--pad)}
.consent__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.9)}
.consent__card{
  position:relative;width:100%;max-width:380px;
  max-height:calc(var(--app-h) - 28px);overflow-y:auto;
  padding:24px 20px 18px;border-radius:20px;
  background:var(--bg-card);border:1px solid rgba(200,16,46,.34);
  box-shadow:0 20px 60px rgba(0,0,0,.65);
  animation:rise .22s ease both;
  scrollbar-width:thin;scrollbar-color:rgba(200,16,46,.35) transparent;
}
.consent__kicker{
  margin:0 0 9px;font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.consent__title{
  margin:0;font:400 25px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.01em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(200,16,46,.2));
}
.consent__text{margin:13px 0 0;font-size:14px;line-height:1.6;color:var(--ink-dim)}
.consent__link{color:#e8b6bf;text-decoration:underline;text-underline-offset:3px}
/* 18+ - строка обязательная, но не заголовок: держим её отметкой, не плашкой */
.consent__age{
  display:inline-block;margin:15px 0 0;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);
  font:500 10.5px/1.35 system-ui,-apple-system,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.consent__err{
  margin:14px 0 0;padding-left:10px;border-left:2px solid var(--accent);
  font-size:13px;line-height:1.45;color:#f0a9b3;
}
.consent__go{
  display:block;width:100%;margin-top:18px;padding:14px 12px;
  border:1px solid rgba(200,16,46,.5);border-radius:14px;cursor:pointer;
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#fff;font:600 16px/1 system-ui,-apple-system,sans-serif;
}
.consent__go:active{transform:scale(.99)}
.consent__go:disabled{opacity:.65;cursor:default}
.consent__foot{
  margin:14px 0 0;text-align:center;font-size:12px;line-height:1.45;color:var(--ink-faint);
}

/* LEGAL-1 */


/* ---------- ORDER-1: строка конструктора под особым гостем ---------- */

/* Своя полоса вместо места в сетке. Пустой блок схлопываем: без onMake
   (бэк не разрешил конструктор) он не должен оставлять дыру под гостем. */
.makerow{display:block;margin:30px 0 0}
.makerow:empty{display:none}


/* ---------- HERO-1: знакомство с героем ---------- */

.screen--hero{
  /* CARD-MORE. Раскладка как у чата: шапка, скроллящееся тело, панель входа.
     Кнопка «Начать диалог» стояла в конце потока и на 360x780 оказывалась
     ниже сгиба; липкая полоса поверх текста её решала, но накрывала строки
     истории (видно на скрине). Панель вне области скролла не накрывает
     ничего: текст просто кончается над ней. */
  display:flex;flex-direction:column;
  height:var(--app-h);max-height:var(--app-h);
  padding:0;
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(122,16,32,.28) 0%,transparent 62%),
    var(--bg);
}
.herobar{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-top) + 10px) var(--pad) 10px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,rgba(122,16,32,.20),transparent),var(--bg);
}
.herobar__back{
  flex:0 0 auto;width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--ink);
  font:400 22px/1 system-ui;cursor:pointer;
}
.herobar__back:active{background:var(--bg-soft)}
.herobar__title{
  font:500 11px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}

/* CARD-MORE: тело экрана скроллится само, панель входа живёт ниже него */
.hero{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:block;padding:20px var(--pad) 22px;
}
.hero__dock{
  position:relative;flex:0 0 auto;
  padding:12px var(--pad) calc(var(--safe-bot) + 12px);
  border-top:1px solid var(--line);
  background:var(--bg);
}
/* Строка, попавшая на границу области чтения, гаснет, а не обрубается
   пополам: так обрез читается как «дальше есть ещё», а не как сбой. */
.hero__dock::before{
  content:'';position:absolute;left:0;right:0;top:-26px;height:26px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,10,0),var(--bg));
}

.hero__media{
  position:relative;display:block;aspect-ratio:4/5;
  border:1px solid rgba(200,16,46,.3);border-radius:20px;
  overflow:hidden;background:var(--bg-soft);
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 14%;
}
.hero__fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 76px/1 Georgia,serif;color:rgba(255,255,255,.2);
  background:linear-gradient(150deg,#171320,#33142a 60%,#0a080c);
}
.hero__shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(20,16,26,.55) 86%,var(--bg) 100%);
}
/* плашка статуса в углу - тот же язык, что на карте гостя в каталоге */
.hero__lock{
  position:absolute;right:12px;top:12px;
  display:flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;
  border:1px solid rgba(200,16,46,.45);background:rgba(10,8,12,.72);
  color:rgba(236,208,213,.95);box-shadow:0 8px 22px rgba(4,3,6,.55);
}
.hero__lock svg{width:15px;height:15px}
.hero__lock-word{
  font:500 10px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
}

.hero__name{
  display:block;margin:20px 0 12px;
  font:400 32px/1.12 Georgia,"Times New Roman",serif;letter-spacing:.015em;
  background:linear-gradient(180deg,#fdf7f5 0%,#e6c9cf 48%,#a06a78 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(200,16,46,.26));
}
.hero__name::after{
  content:'';display:block;width:46px;height:1px;margin-top:12px;
  background:linear-gradient(90deg,rgba(200,16,46,.9),rgba(200,16,46,0));
}
.hero__tags{
  display:block;margin:0;
  font:500 10.5px/1.75 system-ui,-apple-system,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(239,233,228,.5);
}
.hero__tag{display:inline;white-space:nowrap}
.hero__tag + .hero__tag::before{content:'\00b7';margin:0 .6em;color:rgba(200,16,46,.75)}
.hero__where{
  margin:8px 0 0;
  font:400 12.5px/1.5 system-ui,-apple-system,sans-serif;color:var(--ink-faint);
}

/* ГЛАВНОЕ ПРАВИЛО ЭКРАНА: история читается целиком. Ни line-clamp, ни
   max-height, ни overflow тут стоять не могут - на 1200 знаков описания
   любое из них снова обрежет текст, ради чего экран и заводился. */
.hero__text{display:block;margin:18px 0 0}
.hero__p{
  margin:0 0 14px;
  font-size:16px;line-height:1.72;color:var(--ink);
  overflow-wrap:anywhere;
}
.hero__p:last-child{margin-bottom:0}

.hero__go{
  display:block;width:100%;min-height:52px;
  padding:15px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(200,16,46,.5);
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#fff;font:500 16px/1.05 system-ui,-apple-system,sans-serif;
  transition:transform .16s ease,opacity .16s ease;
}
.hero__go:active{transform:scale(.99)}
.hero__go:disabled{
  opacity:1;cursor:default;background:var(--bg-soft);
  border-color:rgba(239,233,228,.16);color:var(--ink-faint);
}
.hero__note{
  margin:10px 0 0;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--ink-faint);
}


/* ---------- TIP-1: пример описания в конструкторе ---------- */

/* NAME-1. Блок имени «для истории» под шапкой каталога. Тот же приём, что у
   подсказки конструктора: свёрнутый details со знаком вместо стрелки. Тише
   карточек героев - это настройка, а не витрина. */
.myname{
  margin:0 0 10px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-soft);
}

/* HELP-1. Кнопка шпаргалки под блоком имени и сама шторка. Тон приглушённый:
   это подсказка, а не действие - она не должна спорить с колодой героев. */
.helpbtn{
  display:flex;align-items:center;gap:8px;
  margin:0 0 18px;padding:9px 14px;min-height:38px;
  border:1px solid var(--line);border-radius:14px;background:transparent;
  color:var(--ink-faint);cursor:pointer;
  font:400 12.5px/1.35 system-ui,-apple-system,sans-serif;
}
.helpbtn:active{background:var(--bg-soft)}
.helpbtn__sign{
  flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;
  border:1px solid var(--line);border-radius:50%;
  font:600 11px/1 system-ui,sans-serif;
}

.help{position:fixed;inset:0;z-index:38;display:flex;align-items:flex-end}
.help__backdrop{position:absolute;inset:0;background:rgba(4,3,6,.72)}
.help__card{
  position:relative;width:100%;max-height:86vh;overflow-y:auto;
  padding:18px 18px calc(var(--safe-bot) + 16px);
  border-radius:20px 20px 0 0;
  background:var(--bg-card);border-top:1px solid rgba(200,16,46,.28);
  box-shadow:0 -14px 40px rgba(0,0,0,.6);
  animation:sheet-up .2s ease both;
}
.help__close{
  position:absolute;top:8px;right:10px;width:34px;height:34px;padding:0;
  border:0;background:transparent;color:var(--ink-faint);cursor:pointer;
  font:400 22px/1 system-ui,sans-serif;
}
/* Текст приезжает с бэка одной разметкой, где строки разделены переводом
   строки: pre-line сохраняет их, не заставляя бэк плодить <p>. */
.help__body{
  white-space:pre-line;margin:6px 0 0;padding-right:26px;
  font-size:13.5px;line-height:1.62;color:var(--ink-dim);
}
.help__body b{color:var(--ink);font-weight:600}
.help__body a{color:var(--ink);text-decoration:underline}
/* Кнопка липнет ко дну карточки: на 360x780 текст длиннее экрана, и выход на
   полную версию оказывался ниже сгиба - его находили только те, кто догадался
   доскроллить шпаргалку до конца. */
.help__full{
  position:sticky;bottom:0;z-index:1;
  display:block;width:100%;margin-top:18px;padding:13px 12px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--bg-card);color:var(--ink);cursor:pointer;
  box-shadow:0 -10px 16px var(--bg-card);
  font:500 14px/1.05 system-ui,-apple-system,sans-serif;
}
.help__full:active{opacity:.85}
.myname__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:11px 15px;cursor:pointer;list-style:none;color:var(--ink-faint);
}
.myname__head::-webkit-details-marker{display:none}
.myname__word{font:400 12.5px/1.35 system-ui,-apple-system,sans-serif}
.myname__word b{color:var(--ink);font-weight:600}
.myname__sign{
  position:relative;flex:0 0 auto;width:14px;height:14px;opacity:.5;
}
.myname__sign::before,.myname__sign::after{
  content:'';position:absolute;left:50%;top:50%;width:11px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
}
.myname__sign::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .18s ease}
.myname[open] .myname__sign::after{opacity:0}
.myname__body{padding:0 15px 15px}
.myname__label{
  display:block;margin:0 0 8px;
  font:500 10.5px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.myname__row{display:flex;gap:8px;align-items:stretch}
/* 16px в поле - не вкус: на меньшем размере iOS зумит страницу при фокусе */
.myname__input{
  flex:1 1 auto;min-width:0;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:400 16px/1.4 system-ui,-apple-system,sans-serif;outline:none;
}
.myname__input:focus{border-color:rgba(200,16,46,.45)}
.myname__input::placeholder{color:var(--ink-faint)}
.myname__go{
  flex:0 0 auto;padding:0 16px;border:0;border-radius:12px;cursor:pointer;
  background:var(--accent);color:#fff;
  font:600 13px/1 system-ui,-apple-system,sans-serif;
}
.myname__go:disabled{opacity:.55}
.myname__hint{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--ink-faint)}
.myname__err{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:#f0a9b3}

.tip{
  margin:0 0 24px;border:1px dashed rgba(200,16,46,.34);border-radius:14px;
  background:var(--bg-soft);
}
.tip__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:13px 15px;cursor:pointer;list-style:none;
  color:var(--ink);
}
.tip__head::-webkit-details-marker{display:none}
.tip__word{font:500 13.5px/1.35 system-ui,-apple-system,sans-serif}
/* знак вместо стрелки: плюс закрыт, минус открыт */
.tip__sign{
  position:relative;flex:0 0 auto;width:16px;height:16px;
  color:rgba(226,160,173,.9);
}
.tip__sign::before,.tip__sign::after{
  content:'';position:absolute;left:50%;top:50%;
  width:13px;height:1.5px;background:currentColor;
  transform:translate(-50%,-50%);
}
.tip__sign::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .18s ease}
.tip[open] .tip__sign::after{opacity:0}
.tip__body{padding:0 15px 16px}
.tip__lead{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
/* сам образец - речью, а не инструкцией: его и переписывают своими словами */
.tip__ex{
  margin:12px 0 0;padding-left:12px;border-left:1px solid rgba(200,16,46,.4);
  font:400 14px/1.65 Georgia,"Times New Roman",serif;color:#d8ccd0;
}

@media (min-width:620px){
  .screen--hero{max-width:560px;margin:0 auto}
  /* на широком вертикальный портрет улетал бы в семьсот пикселей */
  .hero__media{aspect-ratio:1/1}
  .hero__img{object-position:50% 12%}
  .hero__name{font-size:36px}
}
/* HERO-1 */