/* =========================================================
   НУЛЕВОЙ ТРИБУНАЛ — базовая дизайн-система сайта
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Lexend:wght@400;500&family=Neucha&family=Marck+Script&family=Kalam:wght@400;700&family=Comforter&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =========================================================
   ПРИМЕР: подключение своего (скачанного) шрифта, а не из Google Fonts.
   Сейчас закомментировано и ни на что не влияет — раскомментируй и
   поправь под свой файл, когда понадобится. Подробности — в гайде
   по управлению сайтом, раздел "Смена шрифтов".
   ========================================================= */
/*
@font-face{
  font-family: 'МойШрифт';
  src: url('../fonts/moy-shrift-regular.woff2') format('woff2'),
       url('../fonts/moy-shrift-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'МойШрифт';
  src: url('../fonts/moy-shrift-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*/

:root{
  --bg-void:      #0a0713;
  --bg-deep:      #120b22;
  --bg-panel:     #17102b;
  --bg-panel-2:   #1c1436;
  --bg-card:      rgba(28, 18, 54, .55);

  --violet-900:   #2a1857;
  --violet-700:   #5b2fb8;
  --violet-500:   #8a4fe8;
  --violet-400:   #a970ff;
  --violet-300:   #c9a3ff;
  --pink-500:     #d13fd6;
  --pink-400:     #e56be0;

  --gold:         #e8c27a;
  --gold-soft:    #f0d9a8;

  --text-main:    #ece3fb;
  --text-dim:     #b6a6d9;
  --text-mute:    #8877ad;
  --text-faint:   #635682;

  --line:         rgba(169,112,255,.25);
  --line-strong:  rgba(169,112,255,.55);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --font-display: 'Tektur', sans-serif;
  --font-ui:      'Ubuntu', sans-serif;
  --font-serif:   'Ubuntu', 'Book Antiqua', Georgia, serif; /* имя переменной осталось историческим — это "шрифт для чтения" */
  --font-readable: 'Lexend', var(--font-serif); /* лёгкий для чтения / дружелюбный к дислексии режим */

  --shadow-glow:  0 0 24px rgba(138,79,232,.35);
  --shadow-card:  0 10px 40px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: radial-gradient(ellipse 120% 60% at 50% -10%, #241442 0%, var(--bg-void) 55%), var(--bg-void);
  color: var(--text-main);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--violet-500); color:#fff; }
::-webkit-scrollbar{ width:10px; height:8px; }
::-webkit-scrollbar-track{ background: var(--bg-void); }
::-webkit-scrollbar-thumb{ background: var(--violet-700); border-radius: 10px; }

/* ============================= УТИЛИТЫ ============================= */
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow{ max-width: 860px; }

.eyebrow{
  font-family: var(--font-ui); letter-spacing:.20em; text-transform:uppercase; font-size:20px;
  color: var(--violet-300); display:flex; align-items:center; gap:10px; font-weight:600;
}
.eyebrow::before, .eyebrow::after{ content:""; height:1px; width:28px; background: linear-gradient(90deg, transparent, var(--violet-400)); }
.eyebrow::after{ background: linear-gradient(90deg, var(--violet-400), transparent); }
.eyebrow.center{ justify-content:center; }

.section-title{
  font-family: var(--font-display); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; text-shadow: 0 0 18px rgba(169,112,255,.55);
}

/* ============================= ШАПКА ============================= */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(10,7,19,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__row{ display:flex; align-items:center; gap:20px; padding: 14px 28px; max-width:1180px; margin:0 auto; }

.icon-btn{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background: var(--bg-panel); color: var(--violet-300);
  cursor:pointer; transition: .2s; flex:0 0 auto;
}
.icon-btn:hover{ border-color: var(--violet-400); box-shadow: var(--shadow-glow); color:#fff; }
.icon-btn svg{ width:19px; height:19px; }

.search-box{
  flex:1; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); background: var(--bg-panel); border-radius: 999px; padding: 9px 18px;
  color: var(--text-dim); font-family: var(--font-ui);
}
.search-box svg{ width:17px; height:17px; opacity:.7; flex:0 0 auto; }
.search-box input{ background:none; border:none; outline:none; color: var(--text-main); font-family: var(--font-ui); font-size:15px; width:100%; }
.search-box input::placeholder{ color: var(--text-faint); }

.header-nav{ display:none; gap: 26px; font-family: var(--font-display); font-weight:600; letter-spacing:.03em; font-size:15px; color: var(--text-dim); white-space:nowrap; }
.header-nav a{ transition:.2s; padding: 4px 0; border-bottom:2px solid transparent; }
.header-nav a:hover, .header-nav a.is-active{ color:#fff; border-color: var(--violet-400); }
@media (min-width: 880px){ .header-nav{ display:flex; } }

.mobile-nav{
  display:none; flex-direction:column; gap: 2px;
  font-family: var(--font-display); font-weight:600;
  position:absolute; top: 62px; left: 28px; z-index: 70;
  width: 230px; max-width: calc(100vw - 56px); padding: 10px 14px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--bg-panel-2); box-shadow: var(--shadow-card);
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding: 12px 4px; color: var(--text-dim); border-bottom:1px solid rgba(169,112,255,.12); display:flex; align-items:center; gap:10px; }
.mobile-nav a:hover{ color:#fff; }
.mobile-nav__label{
  font-family: var(--font-ui); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--text-faint); padding: 14px 4px 4px;
}
.mobile-nav__platforms a svg{ width:17px; height:17px; flex:0 0 auto; opacity:.75; }

/* на широких экранах список дублирует то, что уже видно в шапке — прячем его,
   в выпадающем окне остаются только ссылки на другие площадки */
@media (min-width: 880px){
  .mobile-nav__pages{ display:none; }
}

.brand-logo{
  font-family: var(--font-display); font-weight:800; text-align:center; letter-spacing:.05em; color:#fff;
  line-height:.95; text-transform:uppercase; -webkit-text-stroke: 1px rgba(169,112,255,.9);
  text-shadow: 0 0 6px rgba(169,112,255,.55), 0 0 30px rgba(169,112,255,.45), 0 0 60px rgba(138,79,232,.35);
}
.brand-logo small{
  display:block; font-family: var(--font-ui); font-weight:600; letter-spacing:.5em; font-size: .18em;
  color: var(--pink-400); -webkit-text-stroke:0; margin-top:.3em; text-shadow:none;
}
.brand-logo--sm{ font-size:20px; -webkit-text-stroke: .6px rgba(169,112,255,.9); }
.brand-logo--sm small{ letter-spacing:.35em; font-size:.32em; }

.site-logo-link{ flex:0 0 auto; display:flex; align-items:center; }
.site-logo{ height: 42px; width:auto; display:block; }
@media (max-width: 480px){ .site-logo{ height: 34px; } }

/* ============================= КНОПКИ ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-ui); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:15px;
  padding: 13px 30px; border-radius: 999px; cursor:pointer; border:none; transition:.2s;
}
.btn--primary{
  background: linear-gradient(120deg, var(--pink-500), var(--violet-500) 70%); color:#fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px rgba(138,79,232,.4);
}
.btn--primary:hover{ filter:brightness(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 0 34px rgba(209,63,214,.6); }
.btn--ghost{ background: var(--bg-panel); color: var(--violet-300); border: 1px solid var(--line-strong); }
.btn--ghost:hover{ color:#fff; border-color: var(--violet-400); box-shadow: var(--shadow-glow); }
.btn--sm{ padding: 8px 20px; font-size:13px; }
.btn--block{ width:100%; }

/* ============================= ГЕРОЙ-БЛОК (главная) ============================= */
.hero{ position:relative; margin: 26px auto 0; max-width:1180px; padding: 0 28px; }
.hero__frame{ position:relative; overflow:visible; }
.hero__bg{
  position:absolute; inset:0; background-size: cover; background-position: center 25%; filter: saturate(1.05) contrast(1.02);
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 45%, black 45%, transparent 92%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 45%, black 45%, transparent 92%);
}

.hero__content{ position:relative; padding: 70px 44px 40px; min-height: 480px; display:flex; flex-direction:column; justify-content:flex-end; text-align:center; }
.hero__title{
  font-family: var(--font-display); font-size: clamp(26px, 4.2vw, 42px); font-weight:700; letter-spacing:.03em;
  color:#fff; text-shadow: 0 0 24px rgba(169,112,255,.7); margin: 10px 0 6px; text-transform:uppercase;
}
.hero__subtitle{ font-family: var(--font-ui); color: var(--violet-300); font-size:16px; margin: 0 0 34px; letter-spacing:.02em; }
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 18px; }

/* ============================= КАРТОЧКИ ============================= */
.card{ background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); backdrop-filter: blur(6px); }

.rail{ display:flex; gap:20px; overflow-x:auto; padding: 6px 4px 20px; scroll-snap-type: x proximity; }

.tome-card{
  scroll-snap-align:start; flex: 0 0 220px; display:flex; flex-direction:column; gap:14px; padding: 16px;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-panel); transition:.25s;
}
.tome-card:hover{ border-color: var(--violet-400); box-shadow: var(--shadow-glow); transform: translateY(-4px); }
.tome-card__cover{
  aspect-ratio: 3/4.3; border-radius: var(--radius-sm); overflow:hidden;
  background: linear-gradient(150deg, var(--violet-900), var(--bg-panel-2)); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.tome-card__cover img{ width:100%; height:100%; object-fit:cover; }
.tome-card__cover .placeholder{ font-family: var(--font-display); color: var(--violet-400); opacity:.5; font-size:13px; text-align:center; padding:10px; }
.tome-card__num{ font-family: var(--font-ui); font-weight:700; font-size:12px; letter-spacing:.15em; color: var(--pink-400); text-transform:uppercase; }
.tome-card__title{ font-family: var(--font-display); font-weight:700; font-size:16px; color:#fff; line-height:1.25; }
.tome-card__desc{ font-family: var(--font-ui); font-size:14px; color: var(--text-mute); line-height:1.4; }

.info-tabs{ display:flex; flex-direction:column; gap:14px; }
.info-tab{
  padding: 16px 20px; border-radius: 999px; text-align:center;
  font-family: var(--font-ui); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:15px;
  border: 1px solid var(--line-strong); background: var(--bg-panel); color: var(--violet-300); cursor:pointer; transition:.2s;
}
.info-tab:hover, .info-tab.is-active{
  color:#fff; border-color: var(--violet-400); box-shadow: var(--shadow-glow);
  background: linear-gradient(120deg, rgba(209,63,214,.18), rgba(138,79,232,.18));
}

.about-panel{
  padding: 21px 30px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-card);
  font-family: var(--font-serif); font-size: 17px; color: var(--text-dim); line-height:1.7;
  text-align: justify; hyphens: auto;
}
.about-panel b{ color:#fff; }
.about-panel .quote{ display:block; margin-top:16px; font-style:italic; color: var(--violet-300); }

.about-grid{ display:grid; grid-template-columns: 1fr; gap: 22px; align-items:start; }
@media (min-width: 760px){ .about-grid{ grid-template-columns: 260px 1fr; } }

/* ============================= ПЕРСОНАЖИ ============================= */
.char-card{ scroll-snap-align:start; flex: 0 0 140px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.char-card__portrait{
  width:140px; height:186px; border-radius: var(--radius-sm);
  border: 2px solid var(--char-border, var(--violet-500));
  box-shadow: 0 0 0 4px rgba(138,79,232,.12), 0 0 26px rgba(138,79,232,.35); overflow:hidden;
  background: linear-gradient(160deg, var(--violet-900), var(--bg-panel-2)); display:flex; align-items:center; justify-content:center; transition:.2s;
}
.char-card__portrait.no-border{ border:none; box-shadow:none; background:none; border-radius:0; }
.char-card:hover .char-card__portrait{ box-shadow: 0 0 0 4px rgba(209,63,214,.18), 0 0 30px rgba(209,63,214,.55); }
.char-card__portrait img{ width:100%; height:100%; object-fit:cover; }
.char-card__portrait .initial{ font-family: var(--font-display); font-size:38px; color: var(--violet-300); opacity:.6; }
.char-card__name{ font-family: var(--font-ui); font-weight:700; text-align:center; font-size:14px; color: var(--text-main); line-height:1.25; }
.char-card__tag{ font-family: var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); }

/* ============================= РАЗДЕЛИТЕЛИ / ФУТЕР ============================= */
.divider-row{ height:1px; margin: 46px 0 26px; background: linear-gradient(90deg, transparent, var(--violet-500) 15%, var(--violet-500) 85%, transparent); }

.site-footer{ margin-top: 80px; padding: 40px 28px 60px; border-top: 1px solid var(--line); text-align:center; font-family: var(--font-display); color: var(--text-faint); font-size:13px; }
.site-footer .brand-logo{ font-size:22px; margin-bottom:14px; }
.site-footer a:hover{ color: var(--violet-300); }
.footer-links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }

/* =====================================================================
   СТРАНИЦА ТОМА
   ===================================================================== */

.tome-hero{
  position: relative;
  overflow: hidden;

  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 44px 34px;

  background:
    radial-gradient(
      ellipse at top left,
      rgba(138,79,232,.28),
      transparent 60%
    ),
    var(--bg-panel);

  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  align-items: center;
}

/* весь настоящий контент находится поверх снега */
.tome-hero > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   СНЕГ НА КАРТОЧКЕ ТОМА — переработано
   ========================================================= */

.tome-hero{ overflow: hidden; } /* чтобы снег не вылезал за скруглённые углы карточки */

/* мягкая морозная дымка у верхнего края, без тайлов и повторов */
.tome-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(ellipse 70% 45% at 25% 0%, rgba(210,225,255,.10), transparent 65%),
    radial-gradient(ellipse 60% 40% at 78% 8%, rgba(138,79,232,.08), transparent 60%);
}

/* =====================================================================
   СНЕГ
   ===================================================================== */

.tome-snow{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tome-snow span{
  position: absolute;
  top: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(220,232,255,.5) 45%, transparent 75%);
  will-change: transform, opacity;
}

/* три плана глубины — у каждого свой размер, резкость и своя кривая движения,
   поэтому снежинки не двигаются "строем" */

.tome-snow span:nth-child(3n){
  width: 3px; height: 3px;
  filter: blur(.6px);
  opacity: .22;
  animation: snow-drift-a linear infinite;
}

.tome-snow span:nth-child(4n){
  width: 5px; height: 5px;
  filter: blur(.25px);
  opacity: .32;
  animation: snow-drift-b linear infinite;
}

.tome-snow span:nth-child(5n){
  width: 7px; height: 7px;
  filter: blur(0px);
  opacity: .42;
  animation: snow-drift-c linear infinite;
}

.tome-snow span:not(:nth-child(3n)):not(:nth-child(4n)):not(:nth-child(5n)){
  width: 4px; height: 4px;
  filter: blur(.4px);
  opacity: .26;
  animation: snow-drift-a linear infinite;
}

.tome-snow span:nth-child(1){  left: 4%;  animation-duration: 26s; animation-delay: -4s;  }
.tome-snow span:nth-child(2){  left: 11%; animation-duration: 31s; animation-delay: -19s; }
.tome-snow span:nth-child(3){  left: 19%; animation-duration: 20s; animation-delay: -7s;  }
.tome-snow span:nth-child(4){  left: 28%; animation-duration: 29s; animation-delay: -23s; }
.tome-snow span:nth-child(5){  left: 36%; animation-duration: 15s; animation-delay: -8s;  }
.tome-snow span:nth-child(6){  left: 45%; animation-duration: 33s; animation-delay: -12s; }
.tome-snow span:nth-child(7){  left: 53%; animation-duration: 23s; animation-delay: -3s;  }
.tome-snow span:nth-child(8){  left: 61%; animation-duration: 27s; animation-delay: -16s; }
.tome-snow span:nth-child(9){  left: 69%; animation-duration: 17s; animation-delay: -9s;  }
.tome-snow span:nth-child(10){ left: 77%; animation-duration: 35s; animation-delay: -5s;  }
.tome-snow span:nth-child(11){ left: 84%; animation-duration: 19s; animation-delay: -13s; }
.tome-snow span:nth-child(12){ left: 91%; animation-duration: 30s; animation-delay: -25s; }
.tome-snow span:nth-child(13){ left: 15%; animation-duration: 32s; animation-delay: -18s; }
.tome-snow span:nth-child(14){ left: 40%; animation-duration: 22s; animation-delay: -6s;  }
.tome-snow span:nth-child(15){ left: 72%; animation-duration: 25s; animation-delay: -14s; }
.tome-snow span:nth-child(16){ left: 96%; animation-duration: 18s; animation-delay: -10s; }

/* три разных траектории: разная амплитуда покачивания и разный ритм,
   плюс снежинка гаснет через opacity, не долетая до низа карточки */

@keyframes snow-drift-a{
  0%   { transform: translate(0, 0)        rotate(0deg);   opacity: 0; }
  10%  { opacity: .28; }
  50%  { transform: translate(16px, 45%)   rotate(150deg); opacity: .22; }
  80%  { opacity: .08; }
  100% { transform: translate(-6px, 80%)   rotate(300deg); opacity: 0; }
}

@keyframes snow-drift-b{
  0%   { transform: translate(0, 0)        rotate(0deg);    opacity: 0; }
  12%  { opacity: .32; }
  35%  { transform: translate(-22px, 25%)  rotate(-90deg); }
  62%  { transform: translate(12px, 50%)   rotate(140deg);  opacity: .3; }
  85%  { opacity: .1; }
  100% { transform: translate(-10px, 78%)  rotate(300deg);  opacity: 0; }
}

@keyframes snow-drift-c{
  0%   { transform: translate(0, 0)        rotate(0deg);   opacity: 0; }
  14%  { opacity: .42; }
  32%  { transform: translate(18px, 18%)   rotate(70deg); }
  58%  { transform: translate(-14px, 40%)  rotate(-60deg); opacity: .38; }
  82%  { transform: translate(18px, 62%)   rotate(200deg); opacity: .12; }
  100% { transform: translate(0, 82%)      rotate(340deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .tome-snow span{ animation: none; opacity: 0; }
}

.tome-hero__side,
.tome-hero__text{
  position: relative;
  z-index: 1;
}

/* =====================================================================
   ОБЛОЖКА
   ===================================================================== */

.tome-hero__side{
  flex: 0 0 215px;

  display: flex;
  flex-direction: column;

  gap: 18px;
}

.tome-hero__cover{
  width: 215px;

  aspect-ratio: 3 / 4.3;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 1px solid var(--line-strong);

  box-shadow:
    0 18px 45px rgba(0,0,0,.6),
    0 0 25px rgba(138,79,232,.28);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}

.tome-hero__cover img{
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
}

.tome-hero__cover:hover{
  transform:
    translateY(-6px)
    scale(1.025);

  box-shadow:
    0 24px 55px rgba(0,0,0,.7),
    0 0 45px rgba(169,112,255,.45);
}

.tome-hero__cover:hover img{
  transform: scale(1.035);
}

/* =====================================================================
   ТЕГИ
   ===================================================================== */

.tome-tags{
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  align-items: center;
}

.tag{
  font-family: var(--font-ui);

  font-size: 10px;

  letter-spacing: .04em;

  font-weight: 700;

  text-transform: uppercase;

  color: #fff;

  background:
    linear-gradient(
      120deg,
      rgba(209,63,214,.35),
      rgba(138,79,232,.25)
    );

  border: 1px solid rgba(229,107,224,.55);

  padding: 6px 11px;

  border-radius: 999px;

  white-space: nowrap;

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.tag:hover{
  transform: translateY(-2px);

  background:
    linear-gradient(
      120deg,
      rgba(209,63,214,.55),
      rgba(138,79,232,.4)
    );

  box-shadow:
    0 4px 15px rgba(169,112,255,.2);
}

/* =====================================================================
   ТЕКСТ ТОМА
   ===================================================================== */

.tome-hero__text{
  flex: 1;

  min-width: 240px;
}

.tome-hero__title{
  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(24px,4vw,34px);

  color: #fff;

  text-shadow:
    0 0 20px rgba(169,112,255,.6);

  margin: 10px 0 6px;

  text-transform: uppercase;
}

.tome-hero__part{
  font-family: var(--font-ui);

  color: var(--pink-400);

  font-size: 22px;

  font-weight: 600;

  margin-bottom: 18px;
}

/* =====================================================================
   РАЗДЕЛИТЕЛЬ ТОМА
   ===================================================================== */

.tome-hero__divider{
  margin: 18px 0 38px;

  text-align: center;

  font-family: var(--font-display);

  font-size: 18px;

  letter-spacing: .8em;

  color: var(--violet-300);

  text-shadow:
    0 0 12px rgba(169,112,255,.7);

  opacity: .85;
}

/* =====================================================================
   ОПИСАНИЕ
   ===================================================================== */

.tome-hero__desc{
  color: var(--text-dim);

  font-size: 17px;

  text-align: justify;

  hyphens: auto;

  line-height: 1.75;

  margin: 0 0 1.2em;
}

/* =====================================================================
   ГЛАВНАЯ ФРАЗА ТОМА
   ===================================================================== */

.tome-hero__desc--epigraph{
  position: relative;

  margin-bottom: 26px;

  padding: 18px 22px;

  color: #e7d8ff;

  font-family: var(--font-display);

  font-size: 18px;

  line-height: 1.6;

  text-align: left;

  text-shadow:
    0 0 18px rgba(169,112,255,.35);
}

.tome-hero__desc--epigraph::before{
  content: "";

  position: absolute;

  left: 0;

  top: 8px;
  bottom: 8px;

  width: 2px;

  border-radius: 2px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--violet-300),
      transparent
    );

  box-shadow:
    0 0 12px rgba(169,112,255,.5);
}

@media (max-width: 650px){

  .tome-hero{
    padding: 32px 22px;

    gap: 28px;
  }

  .tome-hero__side{
    flex: 1 1 100%;

    align-items: center;
  }

  .tome-hero__cover{
    width: min(215px, 70vw);
  }

  .tome-tags{
    justify-content: center;
  }

  .tome-hero__title{
    text-align: center;
  }

  .tome-hero__part{
    text-align: center;
  }

  .tome-hero__divider{
    margin-bottom: 28px;
  }

}

.structure{ margin-top: 50px; display:flex; flex-direction:column; gap:16px; }
.part-block{ border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card); overflow:hidden; }
.part-block > summary{ list-style:none; cursor:pointer; }
.part-block > summary::-webkit-details-marker{ display:none; }
.part-block__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 20px 24px; user-select:none; }
.part-block__head:hover{ background: rgba(169,112,255,.06); }
.part-block__label{
  font-family:var(--font-ui);
  font-size:16px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--violet-400);
  opacity:.75;
}
.part-block__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(22px, 3vw, 27px);
  line-height:1.15;
  color:#fff;
  margin-top:6px;
  text-shadow:0 0 18px rgba(169,112,255,.22);
}
.part-block__chevron{ transition: transform .25s; color: var(--violet-400); flex:0 0 auto; }
.part-block[open] .part-block__chevron{ transform: rotate(180deg); }
.part-block__body{ padding: 0 24px 16px; }

.act-block{ margin: 6px 0 22px; }
.act-block__title{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;

  font-family:var(--font-ui);
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.04em;

  color:var(--violet-400);
  margin:22px 0 14px;
}

.act-block__title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    to right,
    rgba(169,112,255,.45),
    rgba(169,112,255,.08),
    transparent
  );
  transform:translateY(2px);
}

.act-block__title:hover::after{
  background:linear-gradient(
    to right,
    rgba(169,112,255,.7),
    rgba(169,112,255,.18),
    transparent
  );
}

.chapter-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 8px;
  border-radius:var(--radius-sm);

  transition:
    transform .28s ease,
    background .28s ease,
    color .28s ease;

  color:var(--text-dim);
  font-family:var(--font-serif);
  font-size:17px;
  overflow:visible;
}

.chapter-link:hover{
  transform:translateX(5px);
  background:rgba(169,112,255,.08);
  color:#fff;
}
.chapter-link__num{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--text-faint);
  width:34px;
  flex:0 0 auto;
  text-align:center;

  transition:
    color .28s ease,
    text-shadow .28s ease;
}

.chapter-link:hover .chapter-link__num{
  color:var(--violet-400);
  text-shadow:0 0 9px rgba(169,112,255,.65);
}

.chapter-link.is-locked{
  opacity:.45;
  cursor:default;
}

.chapter-link.is-locked:hover{
  background:none;
  color:var(--text-dim);
  transform:none;
}

.chapter-link.is-locked:hover .chapter-link__num{
  color:var(--text-faint);
  text-shadow:none;
}

.chapter-link__badge{ margin-left:auto; font-family: var(--font-ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); border:1px solid var(--line); padding:3px 10px; border-radius:999px; flex:0 0 auto; }

/* =====================================================================
   СТРАНИЦА ГЛАВЫ — читалка
   ===================================================================== */
.reader-top{ padding: 18px 0 0; }
.breadcrumbs{ font-family: var(--font-ui); font-size:13px; color: var(--text-faint); display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 26px; }
.breadcrumbs a:hover{ color: var(--violet-300); }
.breadcrumbs span{ opacity:.5; }

.chapter-head{ text-align:center; margin: 10px 0 50px; }
.chapter-head__eyebrow{ font-family: var(--font-ui); letter-spacing:.2em; text-transform:uppercase; font-size:18px; color: var(--pink-400); margin-bottom:14px; }
.chapter-head__title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(26px,4.4vw,40px);
  color:#fff;
  text-shadow: 0 0 22px rgba(169,112,255,.55);
  text-transform:uppercase;
  letter-spacing:.02em;
position:relative;

  animation: neon-title-flicker 1.2s ease-out 1;
}
.chapter-head__title-num{ color: var(--violet-400); }

@keyframes neon-title-flicker{
  /* Вывеска ещё выключена */
  0%{
    opacity:0;
    text-shadow:
      0 0 0 rgba(169,112,255,0),
      0 0 0 rgba(169,112,255,0);
  }

  /* Первое включение */
  8%{
    opacity:1;
    text-shadow:
      0 0 12px rgba(169,112,255,.5),
      0 0 30px rgba(169,112,255,.8);
  }

  /* Пауза — уже светится */
  18%{
    opacity:1;
    text-shadow:
      0 0 12px rgba(169,112,255,.5),
      0 0 30px rgba(169,112,255,.8);
  }

  /* Короткий сбой */
  20%{
    opacity:.25;
    text-shadow:
      0 0 3px rgba(169,112,255,.2),
      0 0 8px rgba(169,112,255,.25);
  }

  /* Снова включилась */
  23%{
    opacity:1;
    text-shadow:
      0 0 16px rgba(169,112,255,.6),
      0 0 38px rgba(169,112,255,.9);
  }

  /* И снова длинная пауза */
  35%{
    opacity:1;
    text-shadow:
      0 0 16px rgba(169,112,255,.6),
      0 0 38px rgba(169,112,255,.9);
  }

  /* Совсем короткий микро-флик */
  37%{
    opacity:.55;
    text-shadow:
      0 0 5px rgba(169,112,255,.25),
      0 0 12px rgba(169,112,255,.35);
  }

  39%{
    opacity:1;
    text-shadow:
      0 0 22px rgba(169,112,255,.55);
  }

  /* Вывеска окончательно стабилизировалась */
  100%{
    opacity:1;
    text-shadow:
      0 0 22px rgba(169,112,255,.55);
  }
}

.title-spark{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 5px 1px rgba(169,112,255,.9),
    0 0 10px rgba(169,112,255,.55);

  opacity:0;
  pointer-events:none;

  animation:title-spark-burst 1.6s ease-out 1;
}

.title-spark--1{
  left:18%;
  top:45%;
  --spark-x:-18px;
  --spark-y:-20px;
  animation-delay:.08s;
}

.title-spark--2{
  left:36%;
  top:25%;
  --spark-x:12px;
  --spark-y:-27px;
  animation-delay:.16s;
}

.title-spark--3{
  left:53%;
  top:55%;
  --spark-x:20px;
  --spark-y:-16px;
  animation-delay:.04s;
}

.title-spark--4{
  left:72%;
  top:30%;
  --spark-x:-10px;
  --spark-y:-24px;
  animation-delay:.22s;
}

.title-spark--5{
  left:87%;
  top:52%;
  --spark-x:16px;
  --spark-y:-13px;
  animation-delay:.12s;
}

@keyframes title-spark-burst{
  0%{
    opacity:0;
    transform:translate(0,0) scale(.3);
  }

  12%{
    opacity:1;
    transform:translate(0,0) scale(1.2);
  }

  45%{
    opacity:.9;
  }

  100%{
    opacity:0;
    transform:
      translate(var(--spark-x), var(--spark-y))
      scale(.2);
  }
}

.reader{
  font-family: var(--font-serif); font-size: 20px; line-height: 1.85; color: var(--text-main);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.reader p{ margin: 0 0 0.85em; text-indent: 1.6em; }
.reader p.no-indent{ text-indent: 0; }

/* буквица — опционально, вешается на первый абзац главы вручную: <p class="dropcap"> */
.reader p.dropcap{ text-indent: 0; }
.reader p.dropcap .dropcap-letter{
   font-family: var(--font-display);
   float:left;
   font-size:3.4em;
   line-height:.82;
   padding:.05em .08em 0 0;
   color:var(--violet-300);
   text-shadow:0 0 14px rgba(169,112,255,.6);
}

/* ============================================================
   ДРОЖАЩИЙ ТЕКСТ
   ============================================================ */

.shake-slow > span,
.shake-medium > span,
.shake-fast > span {
  position: relative;
  display: inline;
}


/* Медленное покачивание */

.shake-slow > span {
  animation: shake-slow 2.8s ease-in-out infinite;
}


/* Среднее дрожание */

.shake-medium > span {
  animation: shake-medium .9s ease-in-out infinite;
}


/* Быстрое дрожание */

.shake-fast > span {
  animation: shake-fast .22s ease-in-out infinite;
}


@keyframes shake-slow {
  0%, 100% {
    top: .1;
    left: 0;
  }
  25% {
    top: .4px;
    left: -.44px;
  }
  50% {
    top: -.5px;
    left: .50px;
  }
  75% {
    top: .35px;
    left: -.2px;
  }
}


@keyframes shake-medium {

  0%, 100% {
    top: 0;
    left: 0;
  }

  20% {
    top: .5px;
    left: -.7px;
  }

  40% {
    top: -.4px;
    left: .8px;
  }

  60% {
    top: -.6px;
    left: -.6px;
  }

  80% {
    top: .4px;
    left: .5px;
  }

}


@keyframes shake-fast {

  0%, 100% {
    top: 0;
    left: 0;
  }

  25% {
    top: .7px;
    left: -1px;
  }

  50% {
    top: -.6px;
    left: 1px;
  }

  75% {
    top: -.5px;
    left: -.8px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .shake-slow > span,
  .shake-medium > span,
  .shake-fast > span {
    animation: none;
  }

}

.reader em{ font-style:italic; }
.reader strong{ color:#fff; }

.epigraph{ max-width: 600px; margin: 0 auto 10px; text-align:center; font-style:italic; color: var(--text-dim); font-size:19px; line-height:1.6; padding-bottom: 10px; }
.epigraph p{ text-indent:0; }
.epigraph cite{ display:block; margin-top:10px; font-style:normal; font-family: var(--font-ui); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color: var(--text-faint); }

.scene-divider{ text-align:center; margin: 3em auto; letter-spacing: .6em; color: var(--violet-400); font-size:15px; text-shadow: 0 0 10px rgba(169,112,255,.7); animation: scene-divider-breathe 5s ease-in-out infinite; }

@keyframes scene-divider-breathe{
  0%, 100%{
    opacity:.80;
    text-shadow:0 0 8px rgba(169,112,255,.55);
  }

  50%{
    opacity:1;
    text-shadow:
      0 0 10px rgba(169,112,255,.7),
      0 0 18px rgba(169,112,255,.3);
  }
}

.reader-illustration{ margin: 2.4em auto; text-align:center; }
.reader-illustration img{ margin: 0 auto; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.reader-illustration figcaption{ margin-top:10px; font-family: var(--font-ui); font-size:12px; color: var(--text-faint); letter-spacing:.05em; }

.letter{
  margin: 2.6em 0; padding: 28px 32px; background: var(--bg-panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); position:relative; font-family: var(--font-serif); font-style:italic; color: var(--text-dim);
  box-shadow: inset 0 0 40px rgba(138,79,232,.06);
}
.letter::before{ content: "✦"; position:absolute; top:-14px; left: 28px; background: var(--bg-void); color: var(--violet-400); padding: 0 10px; font-style:normal; }
.letter p{ margin: 0 0 1em; }
.letter .sign{ text-align:right; text-indent:0; color: var(--text-faint); font-style:italic; font-family: var(--font-ui); letter-spacing:.05em; }

/* именованные стилевые классы для форматирования по markdown-разметке автора */
.fx-system{ font-family: var(--font-ui); letter-spacing:.03em; color: var(--pink-400); background: rgba(209,63,214,.07); border-left: 2px solid var(--pink-500); padding: 2px 10px; display:inline-block; }
.fx-whisper{ opacity:.7; font-size:.92em; letter-spacing:.02em; }
.fx-shout{ text-transform:uppercase; letter-spacing:.06em; color:#fff; }
.fx-gold{ color: var(--gold-soft); }
.fx-violet{ color: var(--violet-300); }
.fx-pink{ color: var(--pink-400); }
.fx-small{ font-size:.82em; }
.fx-large{ font-size:1.25em; }

.fx-echo {
  position: relative;
  display: inline;

  color: var(--text-main);
  opacity: 0.42;

  text-shadow:
    -1px 0 rgba(255, 50, 150, 0.55),
     1px 0 rgba(40, 220, 255, 0.55);

  animation: chromatic-breathe 4.5s ease-in-out infinite;
}

@keyframes chromatic-breathe {
  0% {
    opacity: 0.40;
    text-shadow:
      -1px  1px rgba(255, 50, 150, 0.45),
       1px -1px rgba(40, 220, 255, 0.45);
  }

  20% {
    opacity: 0.47;
    text-shadow:
      -2px -1px rgba(255, 50, 150, 0.75),
       1px  2px rgba(40, 220, 255, 0.60);
  }

  40% {
    opacity: 0.52;
    text-shadow:
       1px -2px rgba(255, 50, 150, 0.80),
      -2px  1px rgba(40, 220, 255, 0.85);
  }

  60% {
    opacity: 0.46;
    text-shadow:
       2px  1px rgba(255, 50, 150, 0.65),
      -1px -2px rgba(40, 220, 255, 0.80);
  }

  80% {
    opacity: 0.43;
    text-shadow:
      -1px  2px rgba(255, 50, 150, 0.60),
       2px -1px rgba(40, 220, 255, 0.70);
  }

  100% {
    opacity: 0.40;
    text-shadow:
      -1px  1px rgba(255, 50, 150, 0.45),
       1px -1px rgba(40, 220, 255, 0.45);
  }
}

/* ============================================================
   ПОТЕРЯ СОЗНАНИЯ / ЗАТУХАНИЕ ВОСПРИЯТИЯ
   ============================================================ */

/*
 * Базовый вариант:
 * текст начинает теряться, но всё ещё читается.
 */
.fading-text {
  color: var(--text-main);
  opacity: .48;
  filter: blur(.45px);
  transition:
    opacity .5s ease,
    filter .5s ease;
}


/*
 * Сильнее:
 * буквы становятся заметно размытыми.
 */
.fading-text--blur {
  opacity: .32;
  filter: blur(1.2px);
}


/*
 * Почти потеря сознания:
 * текст уже приходится буквально вылавливать глазами.
 */
.fading-text--deep {
  opacity: .18;
  filter: blur(2px);
}


/*
 * Текст как будто "проваливается":
 * можно использовать для отдельных слов/фраз.
 */
.fading-text--vanish {
  opacity: .08;
  filter: blur(3px);
}


/* ============================================================
   ПЛАВНОЕ "ПЛЫВУЩЕЕ" ИСЧЕЗНОВЕНИЕ
   ============================================================ */

.fading-text--breathing {
  animation: fading-breath 4s ease-in-out infinite;
}

@keyframes fading-breath {
  0%, 100% {
    opacity: .18;
    filter: blur(1.5px);
  }

  50% {
    opacity: .38;
    filter: blur(.7px);
  }
}


/* ============================================================
   ВЕРХНИЙ / НИЖНИЙ "ПРОВАЛ" СТРАНИЦЫ
   ============================================================ */

/*
 * Обёртка для фрагмента текста.
 *
 * Она создаёт ощущение, будто край зрения
 * постепенно становится тёмным.
 */
.consciousness-fade {
  position: relative;
}


/*
 * Затемнение сверху.
 */
.consciousness-fade--top::before {
  content: "";
  position: absolute;
  z-index: 2;

  left: -5%;
  right: -5%;
  top: -1em;

  height: 90px;

  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(5, 7, 12, .92),
    rgba(5, 7, 12, .55),
    transparent
  );
}


/*
 * Затемнение снизу.
 */
.consciousness-fade--bottom::after {
  content: "";
  position: absolute;
  z-index: 2;

  left: -5%;
  right: -5%;
  bottom: -1em;

  height: 100px;

  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(5, 7, 12, .92),
    rgba(5, 7, 12, .55),
    transparent
  );
}


/*
 * Если хочется затемнить оба края.
 */
.consciousness-fade--both::before,
.consciousness-fade--both::after {
  content: "";
  position: absolute;
  z-index: 2;

  left: -5%;
  right: -5%;

  pointer-events: none;
}

.consciousness-fade--both::before {
  top: -1em;
  height: 90px;

  background: linear-gradient(
    to bottom,
    rgba(5, 7, 12, .92),
    transparent
  );
}

.consciousness-fade--both::after {
  bottom: -1em;
  height: 100px;

  background: linear-gradient(
    to top,
    rgba(5, 7, 12, .92),
    transparent
  );
}


/* ============================================================
   СИЛЬНАЯ ПОТЕРЯ ВОСПРИЯТИЯ
   ============================================================ */

/*
 * Когда персонаж уже практически ничего не воспринимает.
 */
.consciousness-fade--heavy::before,
.consciousness-fade--heavy::after {
  opacity: .9;
}


/*
 * Сам текст внутри начинает теряться вместе
 * с затемнением.
 */
.consciousness-fade--heavy {
  color: rgba(255,255,255,.45);
}

.consciousness-fade--heavy p {
  filter: blur(.8px);
  opacity: .55;
}


/* ============================================================
   ЛЁГКОЕ "ПЛЫВУЩЕЕ" ВОСПРИЯТИЕ
   ============================================================ */

.consciousness-fade--unstable {
  animation: consciousness-pulse 5s ease-in-out infinite;
}

@keyframes consciousness-pulse {
  0%, 100% {
    opacity: .85;
    filter: blur(0);
  }

  50% {
    opacity: .65;
    filter: blur(.35px);
  }
}


/* ============================================================
   СОВСЕМ УЖЕ УХОДИТ В ТЕМНОТУ
   ============================================================ */

.consciousness-fade--collapse {
  animation: consciousness-collapse 4s ease-in-out infinite;
}

@keyframes consciousness-collapse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

/* "почерки" — рукописные шрифты для реплик/списков персонажей, все с поддержкой кириллицы */
.fx-hand-1{ font-family: 'Neucha', cursive; font-size: 1.25em; color: var(--text-main); }
.fx-hand-2{ font-family: 'Marck Script', cursive; font-size: 1.2em; color: #B99FDF; display:inline-block; }
.fx-hand-3{ font-family: 'Kalam', cursive; font-size: 1.15em; color: var(--text-main); }
.fx-hand-4{ font-family: 'Comforter', cursive; font-size: 1.3em; color: var(--text-main); display:inline-block; }

/* сноски a-ля фикбук */
.footnote{ color: var(--violet-400); cursor: help; font-family: var(--font-ui); font-weight:700; border-bottom: 1px dotted var(--violet-400); position: relative; padding: 0 2px; }
.footnote-tip{
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: 280px; max-width: min(280px, 80vw);; background: var(--bg-panel-2); border: 1px solid var(--violet-400);
  border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-ui); font-size: 13.5px; line-height:1.45;
  color: var(--text-main); box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 18px rgba(138,79,232,.4);
  opacity:0; visibility:hidden; transition: opacity .18s ease, transform .18s ease; z-index: 40; text-align: justify; text-align-last: left; hyphens: auto; overflow-wrap: break-word;
}
.footnote-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border: 6px solid transparent; border-top-color: var(--violet-400); }
.footnote.is-open .footnote-tip, .footnote:hover .footnote-tip{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

/* =========================================================
   НАВИГАЦИЯ МЕЖДУ ГЛАВАМИ
   ========================================================= */

.chapter-foot-nav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:70px;
  padding-top:30px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}

.chapter-top-nav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:4px 0 44px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}

.chapter-foot-nav__side{
  flex:1;
  min-width:160px;
}

.chapter-foot-nav__side.next{
  text-align:right;
}

.chapter-foot-nav__label{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-faint);
  display:block;
  margin-bottom:6px;

  transition:
    color .25s ease,
    letter-spacing .25s ease;
}

.chapter-foot-nav__title{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--violet-300);

  transition:
    color .25s ease,
    text-shadow .25s ease;
}


/* =========================================================
   ССЫЛКИ
   ========================================================= */

.chapter-top-nav a,
.chapter-foot-nav a{
  display:inline-block;
  text-decoration:none;

  transition:
    transform .25s ease,
    opacity .25s ease;
}


/* Наведение */

.chapter-top-nav a:hover,
.chapter-foot-nav a:hover{
  transform:translateY(-3px);
}


/* Название главы */

.chapter-top-nav a:hover .chapter-foot-nav__title,
.chapter-foot-nav a:hover .chapter-foot-nav__title{
  color:#fff;

  text-shadow:
    0 0 12px rgba(169,112,255,.3);
}


/* Маленькая подпись "Назад / Далее" */

.chapter-top-nav a:hover .chapter-foot-nav__label,
.chapter-foot-nav a:hover .chapter-foot-nav__label{
  color:var(--violet-300);
  letter-spacing:.19em;
}


/* Нажатие */

.chapter-top-nav a:active,
.chapter-foot-nav a:active{
  transform:
    translateY(1px)
    scale(.985);

  transition-duration:.08s;
}

.reader-tools{ position: sticky; top: 78px; z-index: 20; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom: 30px; }
.reader-tools .icon-btn{ background: var(--bg-panel); }
.reader-tools .icon-btn.is-active{ border-color: var(--violet-400); color:#fff; box-shadow: var(--shadow-glow); }

body.font-xs .reader{ font-size: 15px; }
body.font-sm .reader{ font-size: 18px; }
body.font-lg .reader{ font-size: 25px; }
body.font-xl .reader{ font-size: 33px; }

/* режим "легче читать" — шрифт Lexend вместо основного, помогает части читателей
   (в т.ч. с дислексией); полноценный OpenDyslexic можно подключить так же,
   как свой шрифт — см. гайд, раздел "Шрифты" */
body.font-readable .reader{ font-family: var(--font-readable); }
.reader-tools__divider{ width:1px; background:var(--line); margin:2px 4px; }

/* =====================================================================
   СВЕТЛАЯ ТЕМА ЧИТАЛКИ
   Переключается кнопкой в .reader-tools (см. main.js). Класс theme-light
   вешается только на .reader-top — весь остальной сайт (шапка, футер,
   каталог и т.д.) остаётся тёмным. Все внутренние блоки читалки уже
   раскрашены через CSS-переменные, поэтому достаточно переопределить их
   в этой области — цвет подхватится сам везде ниже по дереву.
   ===================================================================== */
.reader-top.theme-light{
  --bg-void:      #ced3db;
  --bg-deep:      #c2c9d5;
  --bg-panel:     #cbd2df;
  --bg-panel-2:   #b6c0d4;
  --bg-card:      rgba(255,255,255,.6);

  --violet-900:   #c7cee0;
  --violet-700:   #4f6398;
  --violet-500:   #455782;
  --violet-400:   #4b5d88;
  --violet-300:   #293a67;

  --pink-500:     #5e437d;
  --pink-400:     #4c419e;

  --gold:         #6f5830;
  --gold-soft:    #8a6f3d;

  --text-main:    #262e46;
  --text-dim:     #47536e;
  --text-mute:    #6a7590;
  --text-faint:   #8b96ac;

  --line:         rgba(60,74,110,.16);
  --line-strong:  rgba(60,74,110,.34);

  --shadow-glow:  0 0 16px rgba(60,74,110,.18);
  --shadow-card:  0 10px 30px rgba(30,38,58,.12);

  background: var(--bg-void);
  border-radius: var(--radius-lg);
  margin: 10px auto 20px;
  padding: 10px 10px 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 24px 60px rgba(10,7,19,.5);
}

/* эти несколько мест задают цвет жёстко, не через переменные —
   переопределяем их отдельно, чтобы текст не терялся на светлом фоне */
.reader-top.theme-light .chapter-head__title{ color: #291650; text-shadow: none; }
.reader-top.theme-light .reader strong{ color: #1d2438; }
.reader-top.theme-light .fx-shout{ color: #1d2438; }
.reader-top.theme-light .fx-hand-2{ color: #4a3d68; }
.reader-top.theme-light .icon-btn:hover{ color: #1d2438; }
.reader-top.theme-light .reader-tools .icon-btn.is-active{ color: #1d2438; }
.reader-top.theme-light .chapter-foot-nav a:hover .chapter-foot-nav__title{ color: #1d2438; }

/* =====================================================================
   АРХИВ ПЕРСОНАЖЕЙ
   ===================================================================== */
.char-grid{ display:grid; gap: 22px; grid-template-columns: repeat(2, 1fr); justify-items: center; }
@media (min-width:620px){ .char-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:900px){ .char-grid{ grid-template-columns: repeat(6, 1fr); } }
.char-tile{ width: 200px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card); padding: 10px; text-align:center; transition:.2s; }
.char-tile:hover{ border-color: var(--violet-400); transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.char-tile__portrait{
  width:110px; height:148px; margin: 0 auto 10px; border-radius: var(--radius-sm);
  border: 2px solid var(--char-border, var(--violet-500));
  background: linear-gradient(160deg, var(--violet-900), var(--bg-panel-2)); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.char-tile__portrait.no-border{ border:none; background:none; border-radius:0; }
.char-tile__portrait img{ width:100%; height:100%; object-fit:cover; }
.char-tile__name{ font-family: var(--font-ui); font-weight:700; font-size:15px; color:#fff; }
.char-tile__role{ font-family: var(--font-ui); font-size:12px; color: var(--text-faint); margin-top:4px; }

.badge-soon{ display:inline-block; margin-top:60px; padding: 6px 16px; border-radius:999px; border:1px dashed var(--line-strong); color: var(--text-faint); font-family: var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

.page-head{ text-align:center; margin: 46px 0 40px; }
.page-head__title{ font-family: var(--font-display); font-weight:800; font-size: clamp(28px,5vw,44px); color:#fff; text-shadow: 0 0 24px rgba(169,112,255,.6); text-transform:uppercase; }
.page-head__desc{ color: var(--text-dim); max-width:640px; margin: 14px auto 0; font-size:17px; }

/* "экран компьютера" — консольный блок для сна/системных реплик */
.console-block{
  background: #05070c;
  border: 1px solid rgba(169,112,255,.25);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin: 2.4em 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .92em;
  line-height: 1.75;
  color: #a970ff;
  text-align: justify;
  text-align-last: left;

  box-shadow:
    inset 0 0 30px rgba(169,112,255,.06);

  text-shadow:
    -2px 0 rgba(255, 45, 180, .65),
     2px 0 rgba(40, 220, 255, .65);

  animation: console-chromatic 5.5s ease-in-out infinite;
}

.console-block p{
  margin: 0 0 .8em;
  text-indent: 0;
}

.console-block p:last-child{
  margin-bottom: 0;
}

.console-block p.no-indent{
  text-indent: 0;
}


/* Хроматическое "дыхание" консоли */
@keyframes console-chromatic{
  0%, 100%{
    text-shadow:
      -1.2px 0 rgba(255, 45, 180, .60),
       1.2px 0 rgba(40, 220, 255, .60);
  }

  20%{
    text-shadow:
      -1.7px .2px rgba(255, 45, 180, .75),
       1.2px -.2px rgba(40, 220, 255, .70);
  }

  40%{
    text-shadow:
      -.8px -.1px rgba(255, 45, 180, .50),
       1.7px .1px rgba(40, 220, 255, .78);
  }

  60%{
    text-shadow:
      -1.6px .15px rgba(255, 45, 180, .70),
       .9px -.15px rgba(40, 220, 255, .52);
  }

  80%{
    text-shadow:
      -1.2px -.2px rgba(255, 45, 180, .65),
       1.6px .2px rgba(40, 220, 255, .74);
  }
}


/* Курсор */
.console-block p:last-child::after{
  content:"▌";
  margin-left: 4px;
  animation: console-blink 1s step-end infinite;
}

@keyframes console-blink{
  50%{
    opacity: 0;
  }
}


/* =====================================================================
   ГЛОССАРИЙ
   ===================================================================== */
.glossary-intro{
  max-width: 820px; margin: 0 auto; text-align: center;
  color: var(--text-dim); font-size: 17px; line-height:1.7;
}
.glossary-search{
  max-width: 760px; margin: 30px auto 44px;
  position:relative;
}
.glossary-search__icon{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--text-faint); pointer-events:none;
}
.glossary-search input{
  width:100%; padding:16px 48px 16px 52px;
  border:1px solid var(--line-strong); border-radius:999px;
  background:var(--bg-panel); color:var(--text-main);
  font-family:var(--font-ui); font-size:16px; outline:none;
  box-shadow:inset 0 0 24px rgba(138,79,232,.04);
  transition:.2s;
}
.glossary-search input::placeholder{ color:var(--text-faint); }
.glossary-search input:focus{ border-color:var(--violet-400); box-shadow:var(--shadow-glow); }
.glossary-search__clear{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:50%;
  background:transparent; color:var(--text-faint); cursor:pointer; font-size:20px;
  opacity:0; pointer-events:none; transition:.2s;
}
.glossary-search__clear.is-visible{ opacity:1; pointer-events:auto; }
.glossary-search__clear:hover{ color:#fff; background:rgba(169,112,255,.12); }
.glossary-meta{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-bottom:14px; font-family:var(--font-ui); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.glossary-meta__count{ color:var(--violet-300); }
.glossary-list{ display:flex; flex-direction:column; gap:14px; }
.glossary-category{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--bg-card); overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
.glossary-category > summary{ list-style:none; cursor:pointer; }
.glossary-category > summary::-webkit-details-marker{ display:none; }
.glossary-category__head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; transition:.2s;
}
.glossary-category__head:hover{ background:rgba(169,112,255,.055); }
.glossary-category__title{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  color:#fff; letter-spacing:.02em;
}
.glossary-category__desc{
  margin-top:4px; font-family:var(--font-ui); font-size:13px;
  color:var(--text-faint); line-height:1.45;
}
.glossary-category__chevron{ color:var(--violet-400); transition:transform .25s; flex:0 0 auto; }
.glossary-category[open] .glossary-category__chevron{ transform:rotate(180deg); }
.glossary-category__body{ padding:2px 24px 18px; }
.glossary-term{
  border-top:1px solid var(--line); padding:0;
}
.glossary-term:first-child{ border-top:0; }
.glossary-term > summary{ list-style:none; cursor:pointer; padding:16px 4px; }
.glossary-term > summary::-webkit-details-marker{ display:none; }
.glossary-term__summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
}
.glossary-term__name{
  font-family:var(--font-ui); font-weight:700; font-size:17px;
  color:var(--violet-300); transition:.18s;
}
.glossary-term__brief{
  display:block; margin-top:4px; font-family:var(--font-serif); font-size:15px;
  color:var(--text-dim); line-height:1.55;
}
.glossary-term__mark{
  flex:0 0 auto; font-family:var(--font-ui); font-size:11px;
  color:var(--text-faint); padding-top:3px; transition:.2s;
}
.glossary-term > summary:hover .glossary-term__name{ color:#fff; }
.glossary-term[open] > summary .glossary-term__name{ color:#fff; }
.glossary-term[open] > summary .glossary-term__mark{ color:var(--violet-400); transform:rotate(45deg); }
.glossary-term__body{
  margin:0 4px 18px; padding:15px 18px;
  border-left:2px solid var(--violet-500); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(138,79,232,.055); color:var(--text-dim);
  font-size:16px; line-height:1.65;
  text-align: justify;
}
.glossary-term__body p{ margin:0 0 .8em; }
.glossary-term__body p:last-child{ margin-bottom:0; }
.glossary-term__body b{ color:#fff; }
.glossary-term__source{
  display:inline-block; margin-top:10px; font-family:var(--font-ui);
  font-size:11px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase;
}
.glossary-empty{
  padding:26px 8px 12px; text-align:center; font-family:var(--font-ui);
  color:var(--text-faint); font-size:14px;
}
.glossary-no-results{
  display:none; padding:44px 24px; text-align:center;
  border:1px dashed var(--line-strong); border-radius:var(--radius-md);
  color:var(--text-faint); font-family:var(--font-ui);
}
.glossary-no-results.is-visible{ display:block; }
.glossary-no-results strong{ display:block; color:var(--text-dim); font-size:16px; margin-bottom:5px; }
.glossary-note{
  margin-top:26px; padding:14px 18px; border:1px dashed var(--line);
  border-radius:var(--radius-sm); color:var(--text-faint); font-family:var(--font-ui);
  font-size:12px; line-height:1.55; text-align:center;
}
@media (max-width:600px){
  .glossary-category__head{ padding:17px 18px; }
  .glossary-category__title{ font-size:17px; }
  .glossary-category__body{ padding-left:18px; padding-right:18px; }
  .glossary-term__summary{ gap:10px; }
  .glossary-term__name{ font-size:16px; }
  .glossary-search{ margin-top:24px; margin-bottom:32px; }
}

/* плавающие пузырьки + звёздная пыль вокруг лого на главной */
.hero__particles{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:2;
}

.bubble{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.25), rgba(169,220,255,.15) 40%, rgba(138,79,232,.08) 72%, transparent 100%);
  border: 1.5px solid rgba(169,220,255,.9);
  box-shadow: 0 0 10px rgba(169,220,255,.85), 0 0 18px rgba(138,79,232,.55);
  opacity:0;
  animation: bubble-float 14s ease-in-out infinite;
}
.bubble--1{ width:27px; height:27px; left:6%;  bottom:-40px; animation-delay:0s;    animation-duration:16s; }
.bubble--2{ width:18px; height:18px; left:13%; bottom:-40px; animation-delay:3.5s;  animation-duration:13s; }
.bubble--3{ width:13px;  height:13px;  left:20%; bottom:-40px; animation-delay:7s;    animation-duration:11s; }
.bubble--4{ width:22px; height:22px; left:88%; bottom:-40px; animation-delay:1.5s;  animation-duration:15s; }
.bubble--5{ width:15px; height:15px; left:80%; bottom:-40px; animation-delay:5s;    animation-duration:12s; }

@keyframes bubble-float{
  0%   { transform: translate(0,0);         opacity:0; }
  5%  { opacity:.85; }
  50%  { transform: translate(12px,-160px); opacity:.6; }
  90%  { opacity:0; }
  100% { transform: translate(-8px,-320px); opacity:0; }
}

.spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; box-shadow: 0 0 6px 1px rgba(169,112,255,.8);
  opacity:0; animation: spark-twinkle 4.5s ease-in-out infinite;
}
.spark--1{ left:9%;  top:22%; animation-delay:.0s; }
.spark--2{ left:17%; top:55%; animation-delay:1.0s; }
.spark--3{ left:24%; top:70%; animation-delay:3s; }
.spark--4{ left:91%; top:30%; animation-delay:.9s; }
.spark--5{ left:84%; top:60%; animation-delay:2.4s; }
.spark--6{ left:78%; top:20%; animation-delay:3.6s; }

@keyframes spark-twinkle{
  0%, 100% { opacity:0; transform:scale(.6); }
  50%      { opacity:1; transform:scale(1.3); }
}

@media (prefers-reduced-motion: reduce){
  .bubble, .spark{ animation: none; opacity:0; }
}

/* светящийся след за курсором */
.cursor-particle{
  position:fixed; left:0; top:0;
  border-radius:50%;
  pointer-events:none;
  z-index: 9999;
  opacity:0;
  animation: cursor-particle-float .8s ease-out forwards;
}
.cursor-particle--blue{
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.4), rgba(169,220,255,.2) 40%, rgba(138,79,232,.1) 75%, transparent 100%);
  border: 1px solid rgba(169,220,255,.9);
  box-shadow: 0 0 8px rgba(169,220,255,.8), 0 0 14px rgba(138,79,232,.5);
}
.cursor-particle--pink{
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.4), rgba(229,107,224,.2) 40%, rgba(209,63,214,.1) 75%, transparent 100%);
  border: 1px solid rgba(229,107,224,.9);
  box-shadow: 0 0 8px rgba(229,107,224,.8), 0 0 14px rgba(209,63,214,.5);
}
@keyframes cursor-particle-float{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.4); }
  15%  { opacity:1; }
  100% { opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .cursor-particle{ display:none; }
}

.hero-depth:hover{
  text-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 18px rgba(169,112,255,.55);
     transform:translateY(1px);
}

/* =====================================================================
   КОММЕНТАРИИ — панель выделения текста
   ===================================================================== */

.comment-selection-toolbar{
  position:fixed;
  z-index:9999;

  display:flex;
  align-items:center;
  gap:4px;

  padding:6px;

  background:rgba(20,14,30,.94);
  border:1px solid rgba(169,112,255,.35);
  border-radius:12px;

  box-shadow:
    0 8px 30px rgba(0,0,0,.45),
    0 0 18px rgba(138,79,232,.18);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  transform:translateY(6px) scale(.97);

  pointer-events:none;

  transition:
    opacity .16s ease,
    transform .16s ease;
}

.comment-selection-toolbar.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.comment-selection-toolbar button{
  border:0;
  background:none;
  cursor:pointer;

  color:var(--text-main);
  font-family:var(--font-ui);

  transition:
    transform .15s ease,
    background .15s ease;
}

.comment-selection-toolbar__reaction{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px !important;
  font-size:17px;
}

.comment-selection-toolbar__reaction:hover{
  background:rgba(169,112,255,.12);
  transform:scale(1.15);
}

.comment-selection-toolbar__divider{
  width:1px;
  height:22px;
  margin:0 4px;

  background:var(--line);
}

.comment-selection-toolbar__comment{
  display:flex;
  align-items:center;
  gap:7px;

  height:32px;
  padding:0 10px;

  border-radius:8px !important;

  color:var(--text-dim) !important;
  font-size:12px;
  white-space:nowrap;
}

.comment-selection-toolbar__comment:hover{
  background:rgba(169,112,255,.10) !important;
  color:#fff !important;
}

.comment-selection-toolbar__comment span:first-child{
  font-size:15px;
}

@media (max-width:700px){
  .comment-selection-toolbar{
    max-width:calc(100vw - 24px);
  }

  .comment-selection-toolbar__comment span:last-child{
    display:none;
  }
}

/* =====================================================================
   КОММЕНТАРИИ — подсветка отмеченного текста
   ===================================================================== */

.comment-highlight{
  background:
    linear-gradient(
      to bottom,
      rgba(169,112,255,.10),
      rgba(169,112,255,.13),
      rgba(169,112,255,.10)
    );

  border-radius:3px;

  box-shadow:
    0 0 0 1px rgba(169,112,255,.025),
    0 0 12px rgba(138,79,232,.06);

  transition:
    background .25s ease,
    box-shadow .25s ease;
}

.comment-highlight:hover{
  background:
    linear-gradient(
      to bottom,
      rgba(169,112,255,.07),
      rgba(169,112,255,.19),
      rgba(169,112,255,.07)
    );

  box-shadow:
    0 0 0 1px rgba(169,112,255,.08),
    0 0 16px rgba(138,79,232,.10);
}

/* =====================================================================
КОММЕНТАРИИ — подсветка при наведении на связанный комментарий
===================================================================== */

.comment-highlight.is-comment-hovered{
  background:
    linear-gradient(
      to bottom,
      rgba(169,112,255,.08),
      rgba(169,112,255,.22),
      rgba(169,112,255,.08)
    );

  box-shadow:
    0 0 0 1px rgba(169,112,255,.10),
    0 0 18px rgba(138,79,232,.12);
}

/* =====================================================================
   КОММЕНТАРИИ — плавающий маркер реакции
   ===================================================================== */

.comment-reaction-marker{
  position:absolute;
  z-index:9998;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  min-width:34px;
  height:28px;
  padding:0 8px;

  border:1px solid rgba(169,112,255,.18);
  border-radius:999px;

  background:rgba(35,22,52,.72);

  color:#fff;

  box-shadow:
    0 0 10px rgba(138,79,232,.10),
    0 4px 14px rgba(0,0,0,.18);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  cursor:pointer;

  opacity:0;
  transform:translateX(-5px) scale(.94);

  transition:
    opacity .3s ease,
    transform .3s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.comment-reaction-marker.is-visible{
  opacity:1;
  transform:translateX(0) scale(1);
}

.comment-reaction-marker:hover{
  background:rgba(45,27,66,.9);

  box-shadow:
    0 0 14px rgba(138,79,232,.20),
    0 4px 18px rgba(0,0,0,.22);

  transform:translateX(0) scale(1.06);
}

.comment-reaction-marker__emoji{
  font-size:14px;
  line-height:1;
}

.comment-reaction-marker__count{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  line-height:1;
}

@media (max-width:900px){
  .comment-reaction-marker{
    min-width:30px;
    height:25px;
    padding:0 6px;
  }

  .comment-reaction-marker__emoji{
    font-size:13px;
  }

  .comment-reaction-marker__count{
    font-size:10px;
  }
}

@media (max-width:700px){
  /*
   * На телефоне справа от текста обычно просто
   * недостаточно пространства.
   * Поэтому пока скрываем маркеры.
   *
   * Позже сделаем мобильную версию отдельно.
   */

  .comment-reaction-marker{
    display:none;
  }
}

@media (max-width: 1100px){
  .comment-reaction-marker{
    display:none;
  }
}

.comment-reaction-marker{
  gap:2px;
  min-width:0;
  width:max-content;
}

.comment-reaction-marker__item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;

  min-width:30px;
  height:24px;
  padding:0 5px;

  border:0;
  border-radius:999px;

  background:transparent;
  color:#fff;
  cursor:pointer;

  transition:
    background .18s ease,
    transform .15s ease,
    box-shadow .18s ease;
}

.comment-reaction-marker__item:hover{
  background:rgba(169,112,255,.13);
  transform:scale(1.08);
}

.comment-reaction-marker__item.is-mine{
  background:rgba(169,112,255,.16);
  box-shadow:0 0 8px rgba(138,79,232,.14);
}

.comment-reaction-marker__item.is-loading{
  opacity:.55;
  pointer-events:none;
}

.comment-reaction-marker__emoji{
  font-size:14px;
  line-height:1;
}

.comment-reaction-marker__count{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  line-height:1;
}

.comment-selection-toolbar__reaction.is-loading{
  opacity:.5;
  pointer-events:none;
}

@media (max-width:900px){
  .comment-reaction-marker{
    gap:1px;
  }

  .comment-reaction-marker__item{
    min-width:27px;
    height:23px;
    padding:0 4px;
  }

  .comment-reaction-marker__emoji{
    font-size:13px;
  }

  .comment-reaction-marker__count{
    font-size:10px;
  }
}


/* =====================================================================
   КОММЕНТАРИИ — форма добавления
   ===================================================================== */

.comment-form{
  position:fixed;
  z-index:10000;

  width:min(360px, calc(100vw - 24px));

  padding:16px;

  background:rgba(20,14,30,.96);
  border:1px solid rgba(169,112,255,.35);
  border-radius:14px;

  box-shadow:
    0 12px 35px rgba(0,0,0,.48),
    0 0 22px rgba(138,79,232,.18);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  transform:translateY(6px) scale(.97);

  pointer-events:none;

  transition:
    opacity .16s ease,
    transform .16s ease;
}

.comment-form.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.comment-form__title{
  margin:0 0 10px;

  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;

  color:#fff;
}

.comment-form__hint{
  margin:0 0 12px;

  font-family:var(--font-ui);
  font-size:11px;
  line-height:1.5;

  color:var(--text-faint);
}

.comment-form__textarea{
  display:block;

  width:100%;
  min-height:100px;

  box-sizing:border-box;
  resize:vertical;

  padding:10px 12px;

  border:1px solid rgba(169,112,255,.22);
  border-radius:9px;

  outline:none;

  background:rgba(255,255,255,.035);
  color:var(--text-main);

  font-family:var(--font-serif);
  font-size:14px;
  line-height:1.5;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.comment-form__textarea:focus{
  border-color:rgba(169,112,255,.55);

  background:rgba(169,112,255,.045);

  box-shadow:
    0 0 0 3px rgba(169,112,255,.08);
}

.comment-form__textarea::placeholder{
  color:var(--text-faint);
}

.comment-form__options{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:10px;
}

.comment-form__check{
  display:flex;
  align-items:center;
  gap:7px;

  font-family:var(--font-ui);
  font-size:11px;

  color:var(--text-dim);
  cursor:pointer;
}

.comment-form__check input{
  accent-color:var(--violet-400);
}

.comment-form__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;

  margin-top:14px;
}

.comment-form__button{
  border:0;
  border-radius:8px;

  padding:7px 12px;

  font-family:var(--font-ui);
  font-size:11px;

  cursor:pointer;

  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.comment-form__button--cancel{
  background:rgba(255,255,255,.05);
  color:var(--text-dim);
}

.comment-form__button--cancel:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}

.comment-form__button--submit{
  background:rgba(169,112,255,.18);
  color:#fff;
}

.comment-form__button--submit:hover{
  background:rgba(169,112,255,.28);
  transform:translateY(-1px);
}

.comment-form__error{
  margin-top:8px;

  font-family:var(--font-ui);
  font-size:11px;
  line-height:1.4;

  color:#e99;
}

@media (max-width:700px){
  .comment-form{
    width:min(360px, calc(100vw - 20px));
  }
}

/* =====================================================================
КОММЕНТАРИИ — плавающий комментарий
===================================================================== */

.comment-comment{
  position:absolute;
  z-index:9997;

  width:220px;
  box-sizing:border-box;

  padding:11px 13px;

  border:1px solid rgba(169,112,255,.16);
  border-radius:12px;

  background:rgba(25,17,37,.78);
  color:var(--text-dim);

  box-shadow:
    0 0 12px rgba(138,79,232,.08),
    0 5px 18px rgba(0,0,0,.16);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  font-family:var(--font-serif);
  font-size:13px;
  line-height:1.5;

  opacity:0;
  transform:translateX(-6px);

  transition:
    opacity .3s ease,
    transform .3s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;

  pointer-events:auto;
}

.comment-comment.is-visible{
  opacity:1;
  transform:translateX(0);
}

.comment-comment:hover{
  background:rgba(35,23,50,.9);
  border-color:rgba(169,112,255,.28);

  box-shadow:
    0 0 18px rgba(138,79,232,.14),
    0 6px 22px rgba(0,0,0,.22);
}

.comment-comment__content{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.comment-comment__meta{
  display:flex;
  align-items:center;
  gap:7px;

  margin-top:8px;

  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;

  color:var(--text-faint);
}

.comment-comment__error{
  color:var(--violet-400);
}

@media (max-width:1100px){
  .comment-comment{
    display:none;
  }
}

/* =========================================================
   СТИХОТВОРНЫЕ / ПЕСЕННЫЕ СТРОКИ
   ========================================================= */

.reader .verse-epigraph {
  display: block;

  width: 75%;
  max-width: 75%;
  margin: 2em 0 2em auto;

  text-align: right !important;

  font-family: var(--font-body);
  font-size: .95em;
  line-height: 1.75;
  font-style: italic;

  color: var(--text-soft);

  text-shadow:
    1px 0 0 rgba(169,112,255,.12),
   -1px 0 0 rgba(110,180,255,.08);

  position: relative;

  animation: verse-sway 11s ease-in-out infinite;
}


/* =========================================================
   ОЧЕНЬ МЕДЛЕННОЕ "КАЧАНИЕ" ПЕНИЯ
   ========================================================= */

@keyframes verse-sway {

  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  25% {
    transform: translate3d(-1.5px, -.5px, 0) rotate(-.12deg);
  }

  50% {
    transform: translate3d(0, .8px, 0) rotate(.10deg);
  }

  75% {
    transform: translate3d(1.2px, -.3px, 0) rotate(.05deg);
  }

}


/* =========================================================
   "ПЫЛЬ" / ЧАСТИЦЫ, УЛЕТАЮЩИЕ ОТ ПЕСНИ
   ========================================================= */

.reader .verse-epigraph::before,
.reader .verse-epigraph::after {
  content: "";
  position: absolute;

  pointer-events: none;
  z-index: 2;

  right: 0;
  top: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(190, 145, 255, .75);

  box-shadow:
    14px -8px 0 rgba(169,112,255,.45),
    28px  4px 0 rgba(110,180,255,.35),
    43px -13px 0 rgba(169,112,255,.30),
    58px  7px 0 rgba(110,180,255,.22);

  opacity: 0;

  animation: verse-particles 9s ease-in-out infinite;
}


/* вторая волна — появляется в другом месте и в другое время */

.reader .verse-epigraph::after {
  right: 13px;
  top: 30%;

  width: 4px;
  height: 4px;

  background: rgba(150, 200, 255, .65);

  box-shadow:
    16px  9px 0 rgba(169,112,255,.38),
    32px -5px 0 rgba(110,180,255,.30),
    49px 12px 0 rgba(169,112,255,.22),
    67px -8px 0 rgba(110,180,255,.18);

  animation-delay: -4.5s;
}


@keyframes verse-particles {

  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.5);
  }

  10% {
    opacity: 1;
  }

  30% {
    opacity: .75;
  }

  55% {
    opacity: .45;
  }

  100% {
    opacity: 0;
    transform: translate3d(-65px, -18px, 0) scale(1.2);
  }

}

/* ============================================================
   ОСОБЫЕ РЕПЛИКИ СУЩЕСТВ
   ============================================================ */

.entity-speech {
  position: relative;
  display: inline;
  color: var(--entity-color);

  text-shadow:
    0 0 4px var(--entity-glow),
    0 0 9px var(--entity-glow),
    0 0 16px var(--entity-glow);

  animation: entity-speech-breathe 4s ease-in-out infinite;
}

@keyframes entity-speech-breathe {
  0%,
  100% {
    text-shadow:
      0 0 3px var(--entity-glow),
      0 0 7px var(--entity-glow),
      0 0 12px var(--entity-glow);
  }

  50% {
    text-shadow:
      0 0 6px var(--entity-glow),
      0 0 15px var(--entity-glow),
      0 0 33px var(--entity-glow);
  }
}


/* ============================================================
   1. ГРЁЗЫ
   Нежный, приглушённый голубой
   ============================================================ */

.entity-dream {
  --entity-color: #7eb5ee;
  --entity-glow: rgba(145, 210, 230, 0.42);
}


/* ============================================================
   2. АПОСТОЛ СИЛЫ
   Яркий мятный
   ============================================================ */

.entity-power {
  --entity-color: #71f5c8;
  --entity-glow: rgba(75, 255, 198, 0.7);
}


/* ============================================================
   3. АПОСТОЛ ЖЕЛАНИЯ
   Яркий красный
   ============================================================ */

.entity-desire {
  --entity-color: #ff5c68;
  --entity-glow: rgba(255, 45, 65, 0.72);
}


/* ============================================================
   4. АПОСТОЛ НАДЕЖДЫ
   Яркий розовый
   ============================================================ */

.entity-hope {
  --entity-color: #ff8fc8;
  --entity-glow: rgba(255, 105, 190, 0.7);
}


/* ============================================================
   5. АРХЭ НЕБЫТИЯ
   Чёрный текст + белое сияние
   ============================================================ */

.entity-void {
  --entity-color: #050505;
  --entity-glow: rgba(255, 255, 255, 0.9);

  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 11px rgba(255, 255, 255, 0.75),
    0 0 18px rgba(255, 255, 255, 0.35);

  animation: entity-void-breathe 4s ease-in-out infinite;
}

@keyframes entity-void-breathe {
  0%,
  100% {
    text-shadow:
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 10px rgba(255, 255, 255, 0.65);
  }

  50% {
    text-shadow:
      0 0 3px #fff,
      0 0 7px #fff,
      0 0 15px rgba(255, 255, 255, 0.9),
      0 0 23px rgba(255, 255, 255, 0.45);
  }
}

/* =========================================================
   МОБИЛЬНАЯ ШАПКА — ПОКАЗЫВАЕМ ВСЮ ИЛЛЮСТРАЦИЮ
   ========================================================= */

@media (max-width: 700px){

  .hero{
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 12px 0 0;
  }

  .hero__frame{
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
  }

  .hero__bg{
    inset: 0;

    /*
     * НЕ обрезаем изображение.
     * Вся картинка помещается целиком.
     */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    filter:
      saturate(1.05)
      contrast(1.02);

    /*
     * Маска тоже должна исчезнуть:
     * иначе края картинки будут дополнительно
     * растворяться
     */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__content{
    min-height: 0;
    height: 100%;
    padding: 0 18px 24px;

    justify-content: flex-end;
  }

}

/* =========================================================
   МОБИЛЬНАЯ ЧИТАЛКА
   ========================================================= */

@media (max-width: 700px){

  .reader{
    width: auto;
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .chapter-head,
  .reader p,
  .reader blockquote,
  .reader .epigraph{
    padding-left: 4px;
    padding-right: 4px;
  }

  /* В светлой теме .reader-top уже имеет собственные отступы */
  .reader-top.theme-light .chapter-head,
  .reader-top.theme-light .reader p,
  .reader-top.theme-light .reader blockquote,
  .reader-top.theme-light .reader .epigraph{
    padding-left: 0;
    padding-right: 0;
  }

  .reader p{
    line-height: 1.8;
  }

  body.font-xs .reader{ font-size: 15px !important; }
  body.font-sm .reader{ font-size: 18px !important; }
  body.font-lg .reader{ font-size: 25px !important; }
  body.font-xl .reader{ font-size: 33px !important; }

}

}

.char-tile{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.char-tile__role-icon{
  color:var(--violet-400);
  margin-right:4px;
  text-shadow:0 0 8px rgba(169,112,255,.65);
}

.char-tile--kenneth:hover{
  border-color:rgba(169,112,255,.75);
  box-shadow:
    0 0 0 1px rgba(169,112,255,.12),
    0 0 28px rgba(169,112,255,.18),
    0 14px 40px rgba(0,0,0,.35);
}

.char-tile--kenneth:hover .char-tile__portrait img{
  transform:scale(1.035);
}

.char-tile__portrait img{
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   ПЕРСОНАЖИ — ЛИЧНАЯ СТРАНИЦА
   ============================================================ */

.character-page{
  width:min(1280px, calc(100% - 56px));
  margin:0 auto;
  padding:30px 0 80px;
}


/* ------------------------------------------------------------
   НАЗАД
   ------------------------------------------------------------ */

.character-page__back{
  margin:10px 0 24px;
}

.character-page__back a,
.character-page__footer a{
  color:var(--text-faint);
  text-decoration:none;
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.08em;
  transition:.25s ease;
}

.character-page__back a:hover,
.character-page__footer a:hover{
  color:var(--violet-300);
  letter-spacing:.12em;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.character-hero{
  position:relative;
  min-height:700px;
padding:36px;
box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(400px, .95fr) minmax(460px, 1.05fr);
  align-items:stretch;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:var(--radius-lg);

  background:
    radial-gradient(
      circle at 25% 35%,
      rgba(169,112,255,.16),
      transparent 42%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(209,63,214,.10),
      transparent 40%
    ),
    var(--bg-panel);

  box-shadow:
    0 30px 80px rgba(0,0,0,.35);
}


/* мягкое свечение за персонажем */

.character-hero__atmosphere{
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(169,112,255,.22),
      transparent 48%
    );

  opacity:.8;
}


/* ------------------------------------------------------------
   РЕФЕРЕНС
   ------------------------------------------------------------ */

.character-hero__portrait{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  overflow:hidden;
  pointer-events:none;
}

.character-hero__portrait::before{
  content:"";

  position:absolute;
  inset:8% 0 0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(169,112,255,.12),
      transparent 65%
    );
}

.character-hero__portrait img{
  position:relative;
  z-index:2;

  width:70%;
  height:100%;

  object-fit:contain;
  object-position:center bottom;

  filter:
    drop-shadow(0 20px 35px rgba(0,0,0,.45))
    drop-shadow(0 0 35px rgba(169,112,255,.14));

  transform:scale(1.08);
}


/* ------------------------------------------------------------
   ПРАВАЯ ПАНЕЛЬ
   ------------------------------------------------------------ */

.character-hero__info{
  position:relative;
  z-index:4;

  grid-column:2;
  align-self:start;

  width:100%;
  box-sizing:border-box;

  padding:34px;

  border:1px solid rgba(169,112,255,.22);
  border-radius:var(--radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(28,18,54,.88),
      rgba(10,7,19,.78)
    );

  backdrop-filter:blur(14px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.28),
    inset 0 0 30px rgba(169,112,255,.035);
}

/* ------------------------------------------------------------
   ЗАГОЛОВОК
   ------------------------------------------------------------ */

.character-hero__eyebrow,
.character-detail__eyebrow,
.character-section__eyebrow{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--violet-400);
}

.character-hero__title{
  margin:6px 0 2px;

  font-family:var(--font-display);
  font-size:clamp(26px,3vw,42px);
  line-height:1.05;

  color:#fff;

  text-transform:uppercase;

  text-shadow:
    0 0 24px rgba(169,112,255,.5);

  overflow-wrap:anywhere;
}

.character-hero__fullname{
  color:var(--text-main);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  margin-top:8px;
}

.character-name-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}


/* ------------------------------------------------------------
   КОДИФИКАТОР
   ------------------------------------------------------------ */

.character-codifier{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 12px;

  border:1px solid rgba(169,112,255,.3);
  border-radius:999px;

  background:rgba(169,112,255,.06);

  color:var(--violet-300);

  font-family:var(--font-ui);
  font-size:11px;
  white-space:nowrap;
}

.character-codifier__icon{
  font-size:16px;
  color:var(--violet-300);
  text-shadow:0 0 10px rgba(169,112,255,.55);
}


/* ------------------------------------------------------------
   ПРОЗВИЩА
   ------------------------------------------------------------ */

.character-hero__aliases{
  margin:11px 0 20px;

  color:var(--text-dim);
  font-family:var(--font-ui);
  font-size:13px;
  font-style:italic;
  line-height:1.6;
}

.character-alias{
  color:var(--violet-300);
  border-bottom:1px dotted var(--violet-400);
  cursor:help;
}


/* ------------------------------------------------------------
   ОСНОВНЫЕ ПАРАМЕТРЫ
   ------------------------------------------------------------ */

.character-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:var(--radius-sm);

  background:var(--line);
}

.character-stat{
  display:flex;
  align-items:center;
  gap:12px;

  min-height:70px;
  padding:13px 15px;

  background:rgba(10,7,19,.45);
}

.character-stat__icon{
  width:28px;
  height:28px;
  flex:0 0 28px;

  display:grid;
  place-items:center;

  color:var(--violet-400);
}

.character-stat__icon svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.character-stat__label{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.15em;
  color:var(--text-faint);
}

.character-stat strong{
  display:block;

  font-family:var(--font-ui);
  font-size:13px;
  color:var(--text-main);
}

.character-stat small{
  display:block;
  margin-top:2px;

  color:var(--text-faint);
  font-size:10px;
}

.character-stat--pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}


/* ------------------------------------------------------------
   SONAR
   ------------------------------------------------------------ */

.sonar-panel{
  margin-top:14px;

  border:1px solid rgba(169,112,255,.3);
  border-radius:var(--radius-sm);

  background:
    linear-gradient(
      110deg,
      rgba(91,47,184,.13),
      rgba(10,7,19,.5)
    );
}

.sonar-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 14px;

  border-bottom:1px solid var(--line);
}

.sonar-panel__title{
  font-family:var(--font-ui);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--violet-300);
}

.sonar-panel__icon{
  margin-right:5px;
  color:var(--violet-400);
}

.sonar-rank{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--text-faint);
}

.sonar-panel__links{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.sonar-link{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
}

.sonar-link + .sonar-link{
  border-left:1px solid var(--line);
}

.sonar-link__orb{
  width:34px;
  height:34px;
  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:1px solid rgba(169,112,255,.55);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,.2),
      rgba(169,112,255,.08) 45%,
      rgba(10,7,19,.8)
    );

  color:var(--violet-300);

  font-family:var(--font-ui);
  font-size:12px;

  box-shadow:
    0 0 14px rgba(169,112,255,.18);
}

.sonar-link__label{
  display:block;

  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--text-faint);
}

.sonar-link strong{
  display:block;

  font-family:var(--font-ui);
  font-size:11px;
  color:var(--text-main);
}


/* ============================================================
   СЕКЦИИ
   ============================================================ */

.character-section{
  margin-top:70px;
}

.character-section__heading{
  margin-bottom:24px;
}

.character-section__heading h2,
.character-detail h2{
  margin:5px 0 8px;

  font-family:var(--font-display);
  font-size:26px;

  color:#fff;
}

.character-section__heading p{
  margin:0;

  color:var(--text-dim);
}


/* ------------------------------------------------------------
   ТЕХНИЧЕСКАЯ СЕТКА
   ------------------------------------------------------------ */

.character-tech-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.character-tech{
  display:flex;
  gap:16px;
  align-items:flex-start;

  padding:20px;

  border:1px solid var(--line);
  border-radius:var(--radius-md);

  background:var(--bg-card);

  transition:.25s ease;
}

.character-tech:hover{
  border-color:var(--line-strong);

  transform:translateY(-2px);

  box-shadow:var(--shadow-glow);
}

.character-tech__icon{
  flex:0 0 32px;

  font-size:22px;
  color:var(--violet-400);

  text-shadow:
    0 0 12px rgba(169,112,255,.45);
}

.character-tech span:not(.character-tech__icon){
  display:block;

  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.15em;
  color:var(--text-faint);
}

.character-tech strong{
  display:block;

  margin-top:6px;

  font-family:var(--font-ui);
  font-size:14px;
  color:var(--text-main);
}

.character-tech strong + strong{
  margin-top:10px;
}

.character-tech small{
  display:block;

  margin-top:2px;

  font-size:10px;
  color:var(--text-faint);
}


/* ============================================================
   ГАЛЕРЕЯ ГЕНЕЗИСОВ
   ============================================================ */

.genesis-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.genesis-card{
  appearance:none;
  border:1px solid var(--line);
  border-radius:var(--radius-md);

  padding:0;
  overflow:hidden;

  text-align:left;

  background:var(--bg-card);
  color:inherit;

  cursor:pointer;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.genesis-card:hover{
  transform:translateY(-5px);

  border-color:var(--violet-400);

  box-shadow:
    0 12px 35px rgba(0,0,0,.3),
    0 0 25px rgba(169,112,255,.12);
}

.genesis-card__visual{
  height:190px;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle,
      rgba(169,112,255,.12),
      transparent 68%
    );

  border-bottom:1px solid var(--line);
}

.genesis-card__visual span{
  font-size:64px;

  color:var(--violet-300);

  text-shadow:
    0 0 25px rgba(169,112,255,.45);
}

.genesis-card__name{
  padding:13px 14px 3px;

  font-family:var(--font-ui);
  font-size:13px;
  font-weight:700;

  color:var(--text-main);
}

.genesis-card__type{
  padding:0 14px 14px;

  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.15em;

  color:var(--text-faint);
}


/* ============================================================
   ПОДРОБНЫЙ ТЕКСТ
   ============================================================ */

.character-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;

  margin-top:70px;
}

.character-detail{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:18px;

  padding:28px;

  border-top:1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(169,112,255,.025),
      transparent
    );
}

.character-detail--facts{
  grid-column:1 / -1;
}

.character-detail__icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border:1px solid var(--line-strong);
  border-radius:50%;

  color:var(--violet-400);

  font-size:16px;
}

.character-detail p{
  margin:12px 0 0;

  color:var(--text-dim);

  font-size:17px;
  line-height:1.8;
  text-align:justify;
}

.character-wip{
  color:var(--text-faint)!important;
  font-style:italic;
}

.character-detail ul{
  margin:14px 0 0;
  padding-left:20px;

  color:var(--text-dim);

  line-height:1.8;
}

.character-detail li::marker{
  color:var(--violet-400);
  font-size:1.2em;
}


/* ============================================================
   ЛИЧНЫЕ ДАННЫЕ
   ============================================================ */

.character-meta-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:var(--radius-md);

  background:var(--line);
}

.character-meta-grid > div{
  padding:18px;

  background:var(--bg-card);
}

.character-meta-grid span{
  display:block;

  margin-bottom:7px;

  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.15em;

  color:var(--text-faint);
}

.character-meta-grid strong{
  display:block;

  font-family:var(--font-ui);
  font-size:13px;

  color:var(--text-main);
}


/* ============================================================
   НИЖНЯЯ НАВИГАЦИЯ
   ============================================================ */

.character-page__footer{
  display:flex;
  justify-content:space-between;

  margin-top:70px;
  padding-top:25px;

  border-top:1px solid var(--line);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:900px){

  .character-page{
    width:min(100% - 30px, 700px);
    padding-top:20px;
  }

  .character-hero{
    grid-template-columns:1fr;
    min-height:0;
  }

  .character-hero__portrait{
    min-height:520px;
    height:520px;
  }

  .character-hero__info{
    margin:0 14px 14px;
    padding:24px 20px;
  }

  .character-name-row{
    flex-direction:column;
  }

  .character-codifier{
    align-self:flex-start;
  }

  .character-stats{
    grid-template-columns:1fr;
  }

  .character-stat--pair{
    grid-template-columns:1fr 1fr;
  }

  .sonar-panel__links{
    grid-template-columns:1fr;
  }

  .sonar-link + .sonar-link{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .character-tech-grid{
    grid-template-columns:1fr;
  }

  .genesis-gallery{
    grid-template-columns:repeat(2,1fr);
  }

  .character-detail-grid{
    grid-template-columns:1fr;
  }

  .character-detail--facts{
    grid-column:auto;
  }

  .character-meta-grid{
    grid-template-columns:1fr 1fr;
  }

}


@media (max-width:520px){

  .character-page{
    width:calc(100% - 22px);
  }

  .character-hero__portrait{
    min-height:420px;
    height:420px;
  }

  .character-hero__info{
    padding:20px 16px;
  }

  .character-hero__title{
    font-size:34px;
  }

  .character-hero__fullname{
    font-size:12px;
  }

  .character-stat{
    min-height:64px;
  }

  .character-stat--pair{
    grid-template-columns:1fr;
    gap:0;
  }

  .character-stat--pair > div + div{
    padding-top:12px;
    border-top:1px solid var(--line);
  }

  .genesis-gallery{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .genesis-card__visual{
    height:140px;
  }

  .genesis-card__visual span{
    font-size:48px;
  }

  .character-meta-grid{
    grid-template-columns:1fr;
  }

  .character-page__footer{
    gap:20px;
  }

}