html {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--bg);
}

/* Для Chrome, Edge, Safari и Opera */
::-webkit-scrollbar {
  width: 10px; /* Делаем его аккуратнее */
}

::-webkit-scrollbar-track {
  background: var(--bg); /* Сливается с общим фоном */
}

::-webkit-scrollbar-thumb {
  background-color: var(--muted); /* Используем приглушенный текст для хорошего контраста */
  border-radius: 10px;
  /* Делаем рамку цвета фона, чтобы ползунок визуально не прилипал к краям экрана */
  border: 3px solid var(--bg); 
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--gold-dim); /* Цвет загорается при наведении */
}
  
  :root{
    --bg:#0d0a10;
    --bg2:#171019;
    --card:#1d141f;
    --gold:#e8a869;
    --gold-dim:#c98f55;
    --text:#e9e2da;
    --muted:#a99d94;
    --accent:#f3b878;
    --hero-tint:#2a1c2e;
    --glow:232,168,105;   /* rgb золотого свечения */
    --btn-a:#f3b878;
    --btn-b:#c98f55;
  }
  /* ===== ТЕМА КНИГИ II: холодная сталь + угли (под обложку «Голод тьмы») ===== */
  body.theme-book2{
    --bg:#090b12;
    --bg2:#10141f;
    --card:#141926;
    --gold:#8fa8d8;
    --gold-dim:#6d84b5;
    --text:#e2e6ee;
    --muted:#93a0b8;
    --accent:#b9cbef;
    --hero-tint:#1a2338;
    --glow:143,168,216;
    --btn-a:#f0955a;
    --btn-b:#c46a3a;
  }
  /* ===== ТЕМА КНИГИ III: багровый закат + пепел (под финал) ===== */
  body.theme-book3 {
    --bg:#10080a;
    --bg2:#1a0d11;
    --card:#211216;
    --gold:#d898a1;
    --gold-dim:#b56d77;
    --text:#eee2e4;
    --muted:#b8939a;
    --accent:#efb9c0;
    --hero-tint:#2a161a;
    --glow:216,152,161;   /* rgb багрового свечения */
    --btn-a:#f06a78;
    --btn-b:#c43a48;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body {
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.65;
    overflow-x: hidden;
    
    /* Изначально скрываем страницу и настраиваем плавность */
    opacity: 0;
    transition: background .6s ease, color .6s ease, opacity .5s ease;
  }
  
  /* Класс, который скрипт повесит, когда всё будет готово */
  body.ready {
    opacity: 1;
  }
  h1,h2,h3{font-weight:400;letter-spacing:.06em}

  /* плавная смена контента */
  .fade-swap{transition:opacity .35s ease}
  .fade-swap.fading{opacity:0}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    background:radial-gradient(ellipse at 70% 20%, var(--hero-tint) 0%, var(--bg) 60%);
    padding:60px 6vw;
    transition:background .6s ease;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 15% 85%, rgba(var(--glow),.08), transparent 40%),
      radial-gradient(circle at 85% 15%, rgba(120,60,140,.12), transparent 45%);
    pointer-events:none;
  }
  .hero-inner{
    display:flex;gap:6vw;align-items:center;justify-content:center;
    flex-wrap:wrap;max-width:1200px;margin:0 auto;position:relative;z-index:1;
  }
  .cover-wrap{position:relative;flex:0 0 auto}
  .cover-wrap img {
    width: min(380px, 80vw);
    aspect-ratio: 2 / 3;  /* Жестко фиксируем пропорцию 2:3 */
    object-fit: cover;    /* Картинка заполнит рамку без искажений */
    border-radius: 6px;
    display: block;
    box-shadow: 0 0 60px rgba(var(--glow),.25), 0 30px 80px rgba(0,0,0,.7);
    transition: box-shadow .6s ease;
  }
  .cover-glow{
    position:absolute;inset:-30px;z-index:-1;border-radius:20px;
    background:radial-gradient(ellipse, rgba(var(--glow),.18), transparent 70%);
    filter:blur(10px);
  }
  .hero-text{max-width:520px}
  .kicker{
    color:var(--gold);font-size:.85rem;
    text-transform:uppercase;letter-spacing:.3em;margin-bottom:18px;
  }
  .hero-text h1{
    font-size:clamp(2.2rem,6vw,4.2rem);
    color:var(--accent);
    text-transform:uppercase;letter-spacing:.14em;
    text-shadow:0 0 30px rgba(var(--glow),.35);
    margin-bottom:6px;
  }
  .hero-text .subtitle{
    color:var(--gold);font-size:clamp(1.1rem,2.5vw,1.6rem);
    text-transform:uppercase;letter-spacing:.25em;margin-bottom:6px;
  }
  .author{font-size:1.15rem;color:var(--muted);letter-spacing:.25em;text-transform:uppercase;margin-bottom:26px}
  .tagline{
    font-style:italic;font-size:1.25rem;color:var(--text);
    border-left:2px solid var(--gold);padding-left:18px;margin-bottom:34px;
  }
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
  .badge{
    border:1px solid rgba(var(--glow),.4);color:var(--gold);
    font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    padding:6px 14px;border-radius:999px;font-family:Arial,sans-serif;
  }
  .btn-litres{
    display:inline-block;
    background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
    color:#1a1015;text-decoration:none;
    font-family:Arial,sans-serif;font-weight:700;font-size:1.05rem;
    letter-spacing:.06em;
    padding:17px 42px;border-radius:8px;
    box-shadow:0 0 30px rgba(var(--glow),.35);
    transition:transform .2s, box-shadow .2s, background .6s;
  }
  .btn-litres:hover{transform:translateY(-2px);box-shadow:0 0 45px rgba(var(--glow),.55)}
  .btn-litres.disabled{opacity:.55;cursor:default;pointer-events:none}
  .btn-sub{display:block;margin-top:12px;color:var(--muted);font-size:.85rem;font-family:Arial,sans-serif}

  /* ---------- MOBILE ---------- */
  @media (max-width:768px){
    .hero{padding:48px 5vw}
    .hero-inner{gap:38px}
    .hero-text{
      text-align:center;
      display:flex;flex-direction:column;align-items:center;
    }
    .tagline{
      border-left:none;padding-left:0;
      border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
      padding:14px 0;font-size:1.1rem;
    }
    .badges{justify-content:center}
    .btn-litres{width:100%;max-width:340px;text-align:center}
  }

  /* ---------- SECTIONS ---------- */
  section{padding:90px 6vw;transition:background .6s ease}
  .container{max-width:1000px;margin:0 auto}
  .sec-title{
    text-align:center;color:var(--accent);
    font-size:clamp(1.6rem,3.5vw,2.2rem);
    text-transform:uppercase;letter-spacing:.2em;margin-bottom:14px;
  }
  .ornament{
    text-align:center;color:var(--gold);letter-spacing:.5em;
    margin-bottom:50px;font-size:1.1rem;opacity:.7;
  }

  /* annotation */
  .annotation{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
  .annotation p{
    font-size:1.15rem;color:var(--text);margin-bottom:22px;text-align:center;
    max-width:760px;margin-left:auto;margin-right:auto;
  }
  .annotation .final{
    font-style:italic;color:var(--accent);font-size:1.3rem;letter-spacing:.05em;
  }

  /* tropes */
  .tropes-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  }
  .trope{
    background:var(--card);border:1px solid rgba(var(--glow),.15);
    border-radius:10px;padding:22px 24px;
    transition:border-color .25s, transform .25s, background .6s;
  }
  .trope:hover{border-color:rgba(var(--glow),.5);transform:translateY(-3px)}
  .trope .t-icon{color:var(--gold);font-size:1.3rem;margin-bottom:8px;display:block}
  .trope h3{font-size:1.02rem;color:var(--accent);margin-bottom:6px}
  .trope p{font-size:.9rem;color:var(--muted);font-family:Arial,sans-serif}

  /* quotes promo */
  .quotes{background:var(--bg2);text-align:center}
  .quotes img{
    display:block;margin:0 auto;
    width:100%;max-width:560px;height:auto;
    border-radius:10px;
    box-shadow:0 25px 70px rgba(0,0,0,.7), 0 0 40px rgba(var(--glow),.12);
  }

  /* series (интерактивный выбор книги) */
  .series-hint{
    text-align:center;color:var(--muted);font-family:Arial,sans-serif;
    font-size:.85rem;margin:-30px auto 40px;letter-spacing:.05em;
  }
  .series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
  .book-card {
    background:var(--card);
    border:1px solid rgba(var(--glow),.15);
    border-radius:10px;
    padding:28px 24px;
    text-align:center;
    position:relative;
    cursor:pointer;
    transition:border-color .3s, transform .3s, box-shadow .3s, background .6s;
    
    /* Новые правила для выравнивания */
    display: flex;
    flex-direction: column;
    height: 100%; /* Заставляет карточки тянуться на всю высоту ряда */
  }
  .book-card:hover{transform:translateY(-4px);border-color:rgba(var(--glow),.45)}
  .book-card .num{
    color:var(--gold);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:10px;
  }
  .book-card h3{color:var(--accent);font-size:1.15rem;margin-bottom:10px}
  .book-card p {
    color:var(--muted);
    font-size:.9rem;
    font-family:Arial,sans-serif;
    
    /* Новое правило: отталкивает следующие элементы вниз */
    margin-bottom: auto; 
    padding-bottom: 20px; 
  }
  .book-card.current{border-color:var(--gold);box-shadow:0 0 30px rgba(var(--glow),.18)}
  .book-card .b-cover {
    width: 150px;
    max-width: 70%;
    aspect-ratio: 2 / 3;  /* Задаем ту же пропорцию */
    object-fit: cover;    /* И ту же обрезку */
    display: block;
    margin: 0 auto 16px;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.6);
  }
  .book-card.no-cover{display:flex;flex-direction:column;justify-content:center}
  .book-card .soon {
    display:inline-block;
    color:var(--gold);
    border:1px solid rgba(var(--glow),.4);
    font-size:.78rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:999px;
    font-family:Arial,sans-serif;
    
    /* Убрали margin-top, добавили центрирование на всякий случай */
    margin: 0 auto; 
  }
  .book-card .btn-mini {
    display:inline-block;
    background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
    color:#1a1015;
    text-decoration:none;
    font-family:Arial,sans-serif;
    font-weight:700;
    font-size:.9rem;
    padding:10px 24px;
    border-radius:8px;
    transition:transform .2s, box-shadow .2s;
    
    /* Убрали margin-top, добавили центрирование */
    margin: 0 auto;
  }
  .book-card .btn-mini:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(var(--glow),.45)}

  /* CTA */
  .cta{
    text-align:center;
    background:radial-gradient(ellipse at 50% 100%, var(--hero-tint) 0%, var(--bg) 70%);
  }
  .cta .big-quote{
    font-style:italic;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--text);
    max-width:700px;margin:0 auto 40px;
  }
  .cta .big-quote em{color:var(--accent)}

  footer{
    text-align:center;padding:30px 6vw;color:var(--muted);
    font-size:.8rem;font-family:Arial,sans-serif;
    border-top:1px solid rgba(var(--glow),.12);
  }