/* ============================================================
   READER v2 — кино-подача (по ресёрчу жанра 2026-06-12):
   арт во весь экран, текст на градиенте БЕЗ коробки, печать по буквам,
   CTC-маркер, имя-плашка, выборы по центру-низу, зен-режим.
   Язык редизайна: Cormorant italic, эталон-красный, углы 8px.

   ТЕМА-ТОКЕНЫ: всё внутри ридера красится через --rd-* переменные.
   Дефолты = нуар «Ночной смены». Другая новелла переопределяет их
   манифестом NOVELLAS[].theme — платформенный UI НЕ темируется.
   ============================================================ */

.rdr{
  /* ── тема-токены (дефолт = нуар) ── */
  --rd-accent: var(--amber);               /* акцент-кнопки/рамки — эталон-красный */
  --rd-accent-2: var(--amber-bright);      /* акцент-текст/иконки/свечение */
  --rd-ink: var(--text);                   /* основной текст */
  --rd-paper: oklch(0.135 0.016 25 / .87); /* подложки (плашка имени, панели) */
  --rd-scrim-c: oklch(0.06 0.01 25);       /* затемнение низа сцены под текстом */
  --rd-display: var(--font-display);       /* шрифт заголовков (Cormorant italic) */
  --rd-radius: var(--r);                   /* твёрдые углы */
  --rd-hot: var(--wine-bright);            /* жар 18+/пейволла */
  --rd-c1: oklch(0.60 0.14 15);            /* авторская палитра выборов (в данных глав; читателю не видна) */
  --rd-c2: oklch(0.62 0.10 160);
  --rd-c3: oklch(0.62 0.09 245);
  --rd-c4: oklch(0.68 0.11 70);
  --c1: var(--rd-c1); --c2: var(--rd-c2); --c3: var(--rd-c3); --c4: var(--rd-c4);

  position:fixed; inset:0; z-index:80;     /* поверх таббара; ПОД шторками(100)/попапами(120) */
  background:var(--bg-deep); color:var(--rd-ink);
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-user-select:none; user-select:none;          /* iOS: long-press = наш зен-жест, не выделение текста */
}
.rdr img{-webkit-touch-callout:none; pointer-events:none}   /* iOS: без системного меню картинки; тапы идут сцене */
.rdr .hidden{display:none !important}

/* ── загрузка ── */
.rdr-load{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:32px; text-align:center}
.rdr-load__t{color:var(--text-dim); font-size:14px}
.rdr-load__sp{width:34px; height:34px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--rd-accent-2); animation:rdrSpin .9s linear infinite}
@keyframes rdrSpin{to{transform:rotate(360deg)}}
.rdr-busy{position:absolute; inset:0; z-index:60; display:grid; place-items:center; background:oklch(0.06 0.01 24/.45)}

/* ── тир-1 канон: верхней полосы НЕТ — арт во весь экран, сервис = капсулы по углам.
   СЕРВИСНЫЙ UI НЕЙТРАЛЕН (без темы/бренда): капсулы в стиле TG-кнопок, только тёмное стекло —
   чтобы в любой новелле (нуар/тёплой) сервис выглядел одинаково и читался как «наши кнопки». ── */
.rdr-chip{display:inline-grid; place-items:center; min-width:46px; height:40px; padding:0 15px;   /* тач-таргет ≥40px (iOS HIG) */
  background:oklch(0.13 0.005 270/.52); border:0; border-radius:999px;
  color:oklch(0.93 0 0/.92); font-size:15px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.rdr-chip:active{background:oklch(0.2 0.005 270/.6)}
.rdr-chip--l{position:absolute; left:12px; top:calc(var(--top-inset, 0px) + 12px); z-index:9}
.rdr-chip--l b{color:oklch(0.93 0 0/.92); font-size:12px; font-weight:600; letter-spacing:.03em; white-space:nowrap}
.rdr-chip-r{position:absolute; right:12px; top:calc(var(--top-inset, 0px) + 12px); z-index:9; display:flex; gap:7px}
.rdr-chapline{position:absolute; top:0; left:0; right:0; height:2px; z-index:8; background:oklch(0.1 0.005 270/.4)}
.rdr-chapline i{display:block; height:100%; width:0; background:oklch(0.95 0 0/.85); transition:width .45s; box-shadow:0 0 6px oklch(1 0 0/.45)}

/* ── сцена: арт во весь экран, тап в любом месте ── */
.rdr-stage{flex:1; position:relative; overflow:hidden; background:oklch(0.09 0.012 24); cursor:pointer; -webkit-tap-highlight-color:transparent}
.rdr-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:filter .4s;
  animation:rdrKb 38s ease-in-out infinite alternate}   /* кен-бёрнс: кадр «дышит» (как hero главной) */
@keyframes rdrKb{from{transform:scale(1)}to{transform:scale(1.06)}}
.rdr-char{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:118%; max-width:none; height:97%;
  object-fit:contain; object-position:bottom center; transition:filter .4s; filter:drop-shadow(0 10px 30px oklch(0 0 0/.5))}
.rdr-char:not([src]){display:none}
.rdr-bg:not([src]){display:none}
.rdr-ph{position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); z-index:3; width:78%; max-width:360px;
  color:var(--text-mute); font-size:13px; text-align:center; padding:24px 20px; border-radius:var(--r-lg);
  background:oklch(0.13 0.015 25/.55); box-shadow:inset 0 0 0 1px var(--line); line-height:1.5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:30%}
.rdr-ph b{display:block; font-family:var(--rd-display); font-style:italic; font-weight:600; color:var(--rd-accent-2); font-size:17px; letter-spacing:.04em; margin-bottom:8px}
/* затемнение низа: даёт контраст тексту, арт остаётся доминантой */
.rdr-scrim{position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(to top, color-mix(in oklab, var(--rd-scrim-c) 96%, transparent) 0%, color-mix(in oklab, var(--rd-scrim-c) 80%, transparent) 18%, color-mix(in oklab, var(--rd-scrim-c) 32%, transparent) 40%, transparent 58%)}   /* граница поднята: длинные реплики (Android fontScale) не вылезают на чистый арт */
.rdr-stage.black .rdr-bg, .rdr-stage.black .rdr-char{filter:brightness(0)}
.rdr-stage.choosing .rdr-bg, .rdr-stage.choosing .rdr-char{filter:brightness(.62) saturate(.9)}
.rdr-sysline{position:absolute; inset:0; z-index:7; pointer-events:none; display:flex; align-items:center; justify-content:center;
  color:var(--rd-accent-2); font-family:var(--rd-display); font-style:italic; font-weight:600; letter-spacing:.14em; font-size:20px;
  text-align:center; padding:0 26px; opacity:0; transition:opacity .5s}
.rdr-sysline:empty{opacity:0 !important}
.rdr-stage.black .rdr-sysline{opacity:1}
/* подсказка на sys-кадре (чёрный экран): появляется с задержкой, чтобы не лезть в титр */
.rdr-syshint{position:absolute; left:0; right:0; bottom:max(20px, var(--safe-b, 20px)); z-index:7; pointer-events:none;
  text-align:center; color:oklch(0.95 0 0/.6); font-size:12px; opacity:0}
.rdr-stage.black .rdr-syshint{animation:rdrSysIn .5s ease 1s both}
@keyframes rdrSysIn{from{opacity:0}to{opacity:1}}
/* кино-титр входа в главу: «Глава N» полторы секунды (название — спойлер, раскрывается на end-карде) */
.rdr-chcard{position:absolute; inset:0; z-index:7; pointer-events:none; display:grid; place-items:center; opacity:0}
.rdr-chcard b{font-family:var(--rd-display); font-style:italic; font-weight:600; font-size:36px; letter-spacing:.06em;
  color:oklch(0.96 0 0/.96); text-shadow:0 2px 22px oklch(0 0 0/.85), 0 0 60px oklch(0 0 0/.6)}
.rdr-chcard.on{animation:rdrChCard 1.9s ease both}
@keyframes rdrChCard{0%{opacity:0}14%{opacity:1}72%{opacity:1}100%{opacity:0}}

/* ── текст: «субтитры кино» — без коробки, на градиенте ── */
.rdr-text{position:absolute; left:0; right:0; bottom:0; z-index:6; pointer-events:none;
  padding:0 18px max(18px, calc(var(--safe-b, 0px) + 14px));
  max-width:560px; margin:0 auto}
.rdr-name{display:inline-block; font-family:var(--rd-display); font-style:italic; font-weight:600;
  font-size:21px; line-height:1; color:var(--rd-accent-2); letter-spacing:.02em; margin:0 0 7px 2px;
  text-shadow:0 1px 10px oklch(0 0 0/.75)}
.rdr-name:empty{display:none}
.rdr-name.you{color:oklch(0.80 0.04 250)}
.rdr-dtext{font-size:16.5px; line-height:1.55; color:var(--rd-ink); min-height:64px;
  text-shadow:0 1px 2px oklch(0 0 0/.8), 0 1px 14px oklch(0 0 0/.55)}
.rdr-dtext.nar{font-style:italic; color:oklch(0.86 0.012 28)}
.rdr-act{font-style:italic; opacity:.72}   /* (ремарка) в реплике — действие, не речь */
/* CTC: маркер «строка дочитана, тапай» (сервис → нейтральный) */
.rdr-ctc{position:absolute; right:18px; bottom:max(16px, calc(var(--safe-b, 0px) + 12px)); color:oklch(0.95 0 0/.85);
  opacity:0; transition:opacity .2s; filter:drop-shadow(0 0 6px oklch(0 0 0/.8))}
.rdr-ctc.on{opacity:1; animation:rdrCtc 1.1s ease-in-out infinite}
@keyframes rdrCtc{0%,100%{transform:translateY(0); opacity:.5}50%{transform:translateY(3px); opacity:1}}

/* ── выборы: стек по центру-низу поверх затемнённой сцены ── */
.rdr-choices{position:absolute; left:16px; right:16px; bottom:18%; z-index:8; display:flex; flex-direction:column; gap:10px;
  max-width:480px; margin:0 auto;
  max-height:calc(82% - var(--top-inset, 0px) - 64px); overflow-y:auto}   /* страховка: 3-4 длинных выбора на 360px-экране не лезут под чипы */
.rdr-choice{display:block; width:100%; background:oklch(0.13 0.016 25/.88); box-shadow:inset 0 0 0 1px oklch(1 0 0/.12), 0 8px 26px oklch(0 0 0/.45);
  border:0; border-radius:var(--rd-radius); padding:14px 18px; color:var(--rd-ink); font-size:15px; text-align:center;
  line-height:1.35; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .08s, background .15s;
  animation:rdrChoice .34s var(--ease-2, ease) both; animation-delay:calc(var(--i, 0) * 70ms)}
.rdr-choice:active{transform:scale(.97); background:oklch(0.19 0.022 25/.92); box-shadow:inset 0 0 0 1px var(--rd-accent), 0 8px 26px oklch(0 0 0/.45)}
@keyframes rdrChoice{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* конец главы */
.rdr-end{background:oklch(0.12 0.016 22/.93); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--rd-accent) 55%, transparent);
  border-radius:var(--r-lg); padding:20px 18px; text-align:center; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:rdrChoice .34s var(--ease-2, ease) both}
.rdr-end__lbl{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-mute)}
.rdr-end h3{margin:8px 0 8px; font-family:var(--rd-display); font-style:italic; font-weight:600; color:var(--rd-accent-2); font-size:26px; line-height:1.15}
.rdr-end__fee{font-size:12px; color:var(--text-mute); margin-top:8px}
.rdr-end__season{font-family:var(--rd-display); font-style:italic; color:var(--rd-accent-2); letter-spacing:.16em; font-size:14px; margin-top:12px}
.rdr-end__btns{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}

/* ── зен-режим (смотреть арт; тап — вернуть) ── */
/* транзишн ТОЛЬКО в спрятанном состоянии: гаснет плавно, ВОЗВРАЩАЕТСЯ мгновенно
   (иначе на выходе из зена тени текста и «стекло» чипов 300мс догоняли полупрозрачными — фидбэк юзера) */
.rdr--zen .rdr-chapline, .rdr--zen .rdr-text, .rdr--zen .rdr-chip--l, .rdr--zen .rdr-chip-r, .rdr--zen .rdr-scrim{opacity:0; pointer-events:none; transition:opacity .35s ease}
.rdr-stage.choosing .rdr-chip-r, .rdr-stage.choosing .rdr-chip--l{opacity:0; pointer-events:none; transition:opacity .25s ease}   /* на выборах сервис не отвлекает и не перехватывает тапы над стеком */

/* ── H-СЦЕНА ── */
.rdr-hs{position:absolute; inset:0; z-index:40; display:none; background:oklch(0.06 0.01 20); overflow:hidden}
.rdr-hs.on{display:block}
.rdr-hbg{position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 90% at 50% 30%, oklch(0.14 0.03 18), oklch(0.06 0.01 20))}
.rdr-cgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rdr-hbg.dim .rdr-cgimg, .rdr-hbg.dim .rdr-hph{filter:brightness(.5) blur(2px)}
.rdr-hbg.hasart .rdr-hph{display:none}
.rdr-hph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:30px}
.rdr-hph__nsfw{font-size:11px; letter-spacing:.26em; color:var(--rd-hot); font-weight:700; text-transform:uppercase}
.rdr-hph__note{font-size:12px; color:var(--text-mute); font-style:italic}
.rdr-cgtap{position:absolute; inset:0; z-index:2}
.rdr-gate{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:22px 16px max(18px, var(--safe-b, 18px));
  background:linear-gradient(to top, oklch(0.05 0.008 20/.98), oklch(0.05 0.008 20/.8) 65%, transparent);
  display:flex; flex-direction:column; gap:11px; max-width:560px; margin:0 auto}
.rdr-gate__t{font-size:11px; letter-spacing:.26em; color:var(--rd-hot); font-weight:700; text-align:center; text-transform:uppercase}
.rdr-18{font-weight:800; letter-spacing:.04em}   /* «18+» — текстом, без кружка (фидбек) */
.rdr-gate__tease{font-family:var(--rd-display); font-style:italic; font-weight:500; font-size:19px; line-height:1.45; color:var(--rd-ink); text-align:center}
.rdr-gate__tier{font-size:12.5px; color:var(--text-dim); text-align:center}
.rdr-gate__btns{display:flex; flex-direction:column; gap:9px; margin-top:5px}
.rdr-gcount{position:absolute; top:calc(var(--top-inset, 0px) + 14px); left:14px; z-index:3; pointer-events:none;   /* не глушит тап-слой галереи */
  background:oklch(0.1 0.013 24/.55); box-shadow:inset 0 0 0 1px oklch(1 0 0/.09);
  color:var(--text-dim); font-size:11px; padding:5px 11px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.rdr-hgnav{position:absolute; top:calc(var(--top-inset, 0px) + 14px); right:14px; z-index:4; min-height:40px; display:grid; place-items:center;   /* тач-таргет ≥40px */
  background:oklch(0.1 0.013 24/.55); box-shadow:inset 0 0 0 1px oklch(1 0 0/.09);
  border:0; color:var(--text-dim); font-size:12px; padding:0 14px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); cursor:pointer}
.rdr-gnext{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px; text-align:center; color:var(--text-dim); font-size:13px;
  pointer-events:none; background:linear-gradient(to top, oklch(0.05 0.008 20/.92), transparent); animation:rdrCtc 1.15s ease-in-out infinite}
.rdr-hcap{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:30px 18px 52px; pointer-events:none;
  background:linear-gradient(to top, oklch(0.05 0.008 20/.97), oklch(0.05 0.008 20/.74) 52%, transparent);
  color:var(--rd-ink); font-size:15.5px; line-height:1.5; font-style:italic; max-width:560px; margin:0 auto}
.rdr-hcap__ph{display:block; font-style:normal; font-size:10px; letter-spacing:.22em; color:var(--rd-hot); font-weight:700; margin-bottom:7px; text-transform:uppercase}

/* ── журнал и список глав ── */
.rdr-drawer{position:absolute; top:0; bottom:0; left:0; right:0; z-index:25; background:oklch(0.08 0.011 24/.98);   /* закрытие: ✕ или TG back. БЕЗ backdrop-filter: при .98 блюр невидим, а скролл журнала на слабых Android джанковал */
  overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--top-inset, 0px) + 76px) 16px 60px; display:none}
.rdr-drawer.on{display:block}
.rdr-drawer h4{font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--text); font-size:22px; letter-spacing:.02em; margin:0 0 16px; display:flex; align-items:center; justify-content:space-between}
.rdr-x{width:40px; height:40px; flex:none; display:grid; place-items:center; background:oklch(0.13 0.005 270/.52);
  border:0; border-radius:999px; color:oklch(0.93 0 0/.85); font-size:13px; font-family:var(--font)}
.rdr-tgl{display:flex; align-items:center; gap:10px; margin:-4px 0 16px; color:var(--text-dim); font-size:13px; cursor:pointer}
.rdr-tgl input{width:17px; height:17px; accent-color:oklch(0.85 0 0)}
.rdr-lgdiv{color:var(--text-mute); font-size:10px; letter-spacing:.3em; text-align:center; margin:16px 0 10px}
.rdr-lg{margin:0 0 11px; line-height:1.5; font-size:14.5px; max-width:620px}
.rdr-lg .w{color:var(--rd-accent-2); font-weight:600}
.rdr-lg.you .w{color:oklch(0.78 0.04 250)}
.rdr-lg.nar{font-style:italic; color:var(--text-dim); font-size:13.5px}
.rdr-lg.pick{font-style:italic; color:var(--text); opacity:.75; padding-left:10px}   /* сделанный игроком выбор */
.rdr-chrow{display:flex; align-items:center; gap:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--rd-radius); padding:13px 15px; margin-bottom:9px; cursor:pointer; transition:background .15s, box-shadow .15s}
.rdr-chrow:active{background:var(--surface-2)}
.rdr-chrow.cur{box-shadow:inset 0 0 0 1px oklch(0.9 0 0/.55)}
.rdr-chrow.locked{opacity:.45; cursor:default}
.rdr-chrow .cn{flex:none; width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  font-weight:700; font-size:13px; background:oklch(0.26 0.006 270); color:oklch(0.93 0 0/.92)}
.rdr-chrow.locked .cn{background:var(--surface-2); color:var(--text-mute)}
.rdr-chrow .ct{flex:1; min-width:0}
.rdr-chrow .ct b{display:block; font-size:14px; color:var(--text); font-weight:600}
.rdr-chrow .ct small{display:block; font-size:11px; color:var(--text-mute); margin-top:1px}
.rdr-chrow .here{flex:none; background:oklch(0.92 0 0/.92); color:oklch(0.2 0 0); font-size:8.5px; font-weight:800; padding:3px 9px; border-radius:999px; letter-spacing:.06em}
.rdr-chrow .lk{flex:none; color:var(--text-mute)}

/* «Ранее…» — возвращение после перерыва: последние реплики, тап = продолжить */
.rdr-recap{position:absolute; inset:0; z-index:45; display:grid; place-items:center; padding:32px 22px;
  background:oklch(0.06 0.01 24/.93); animation:rdrSysIn .35s ease both; cursor:pointer}
.rdr-recap__in{max-width:420px; width:100%}
.rdr-recap__t{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:28px; color:var(--text); margin-bottom:16px}
.rdr-recap__hint{margin-top:18px; text-align:center; color:oklch(0.95 0 0/.55); font-size:12px; animation:rdrCtc 1.15s ease-in-out infinite}

/* тосты во время чтения: формула app.css метит в таббар, которого под ридером нет, и накрывала зону текста */
#reader-root:has(.rdr) ~ #toast-root .toast,
#reader-root:has(.rdr) ~ #toast-root .achtoast{bottom:calc(var(--safe-b, 0px) + 136px)}

@media(max-width:560px){ .rdr-dtext{font-size:16px} }
@media(max-width:430px){ .rdr-chbtn{max-width:150px} }