/* ===== ПЕРЕМЕННЫЕ ДЛЯ ТЁМ ===== */
:root {
  /* Тёмная тема (по умолчанию) */
  --bg:        #0d0f24;
  --bg-2:      #141735;
  --text:      #e6e6f0;
  --muted: #b0b0c8;
  --gold:      #d9b45b;
  --term:      #8b6fd4;
  --term-bg:   #1c1638;
  --danger:    #c65b6f;
  --danger-bg: #2a1420;
  --nature:    #6fae8b;
  --nature-bg: #14231b;
  --line:      #2a2d52;

  /* Фон звёзд */
  --star-static: radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 24%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 35% 12%, #ffe9b0, transparent),
    radial-gradient(1px 1px at 65% 8%, #fff, transparent),
    radial-gradient(1px 1px at 20% 42%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 35%, #fff, transparent),
    radial-gradient(1px 1px at 45% 28%, #ffe9b0, transparent),
    radial-gradient(1px 1px at 92% 62%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 8% 55%, #fff, transparent),
    radial-gradient(1px 1px at 55% 48%, #fff, transparent),
    radial-gradient(1px 1px at 33% 72%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 70% 68%, #ffe9b0, transparent),
    radial-gradient(1px 1px at 18% 85%, #fff, transparent),
    radial-gradient(1px 1px at 82% 78%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 50% 88%, #fff, transparent),
    radial-gradient(1px 1px at 25% 95%, #ffe9b0, transparent),
    radial-gradient(1px 1px at 95% 5%, #fff, transparent),
    radial-gradient(1px 1px at 5% 8%, #cfd0ff, transparent),
    radial-gradient(1.5px 1.5px at 62% 58%, #fff, transparent),
    radial-gradient(1px 1px at 40% 65%, #cfd0ff, transparent);
}

/* Тема древнего свитка (переименована в Light) */
[data-theme="light"] {
  --bg:        #e8dcc4;  /* пожелтевшая бумага */
  --bg-2:      #f5ede0;  /* светлее, как чистый пергамент */
  --text:      #3d2c1f;  /* тёмно-коричневые чернила */
  --muted:     #7a6952;  /* выцветшие чернила */
  --gold:      #a0652a;  /* тёплое золото печатей */
  --term:      #4a3829;  /* тёмно-коричневый для терминов */
  --term-bg:   #d9c9a8;  /* тёмный бежевый */
  --danger:    #7a2e2e;  /* тёмные красные чернила */
  --danger-bg: #e3cdb8;  /* тёмный персиковый */
  --nature:    #2d4a26;  /* тёмные зелёные чернила */
  --nature-bg: #c9b894;  /* тёмный охристый */
  --line:      #c9b894;  /* линии как старые складки */
  
  /* Свиток: вместо звёзд — пятна старения */
  --star-static: radial-gradient(ellipse at 15% 20%, rgba(139,101,78,0.08) 40px 30px, transparent 0),
    radial-gradient(ellipse at 75% 60%, rgba(139,101,78,0.06) 50px 35px, transparent 0),
    radial-gradient(ellipse at 40% 80%, rgba(139,101,78,0.05) 45px 28px, transparent 0),
    radial-gradient(ellipse at 85% 30%, rgba(139,101,78,0.07) 38px 32px, transparent 0);
}

/* ===== ЗВЁЗДНЫЙ ФОН / ТЕКСТУРА ===== */
body {
  margin: 0;
  font-family: "Alegreya", Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
  background-color: var(--bg);
  background-image: var(--star-static);
  background-attachment: fixed;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* слой мерцающих звёзд — только для тёмной темы */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body:not([data-theme])::before {
  opacity: 1;
  background-image:
    radial-gradient(3px 3px at 28% 22%, rgba(255,255,255,1), transparent),
    radial-gradient(2.5px 2.5px at 15% 38%, rgba(255,233,176,1), transparent),
    radial-gradient(3px 3px at 10% 10%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 22% 68%, rgba(207,208,255,0.9), transparent),
    radial-gradient(3px 3px at 48% 52%, rgba(207,208,255,1), transparent),
    radial-gradient(2.5px 2.5px at 38% 82%, rgba(255,255,255,0.95), transparent),
    radial-gradient(3.5px 3.5px at 72% 15%, rgba(207,208,255,1), transparent),
    radial-gradient(3px 3px at 85% 25%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2.5px 2.5px at 78% 45%, rgba(255,233,176,1), transparent),
    radial-gradient(3.5px 3.5px at 90% 35%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 95% 50%, rgba(207,208,255,0.9), transparent),
    radial-gradient(3px 3px at 82% 62%, rgba(255,233,176,0.95), transparent),
    radial-gradient(2.5px 2.5px at 92% 75%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3.5px 3.5px at 88% 85%, rgba(207,208,255,1), transparent),
    radial-gradient(3px 3px at 68% 78%, rgba(255,233,176,1), transparent),
    radial-gradient(2.5px 2.5px at 58% 88%, rgba(255,255,255,1), transparent),
    radial-gradient(3.5px 3.5px at 45% 92%, rgba(207,208,255,0.95), transparent),
    radial-gradient(2px 2px at 25% 85%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 15% 95%, rgba(255,233,176,0.95), transparent),
    radial-gradient(2.5px 2.5px at 35% 90%, rgba(207,208,255,0.9), transparent),
    radial-gradient(3px 3px at 52% 96%, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 75% 94%, rgba(255,233,176,0.9), transparent);
  animation: twinkle 4s ease-in-out infinite;
}

header, nav, main {
  position: relative;
  z-index: 1;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ===== */
.theme-switcher {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.theme-switcher button {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.theme-switcher button:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.theme-switcher button.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

/* ===== ШРИФТЫ ЗАГОЛОВКОВ ===== */
header h1,
h2, h3 {
  font-family: "IM Fell English SC", Georgia, serif;
  font-weight: normal;
  letter-spacing: 1px;
}
.term h3, .danger h3, .nature h3, .character-text h3 {
  font-size: 1.15rem;
}

/* ===== ШАПКА И НАВИГАЦИЯ ===== */
header { text-align: center; padding: 40px 20px 10px; }
header h1 { font-size: 2.4rem; color: var(--gold); letter-spacing: 3px; margin: 0; transition: color 0.3s; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);}
header p { color: var(--muted); font-style: italic; transition: color 0.3s; }

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  transition: border-color 0.3s;
}
nav a {
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  transition: color 0.3s;
}
nav a:hover { color: var(--gold); }

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

/* ===== КОНТЕЙНЕР ===== */
main { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; }

h2 {
  color: var(--gold);
  padding-bottom: 0;
  margin-top: 48px;
  text-align: center;
  transition: color 0.3s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

h2::after {
  content: "✮ ✮ ✮";
  display: block;
  text-align: center;
  margin-top: 12px;
  padding-bottom: 12px;
  padding-left: 13px;
  border-bottom: 1px solid var(--line);
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 12px;
  opacity: 0.7;
}


h3 { color: var(--gold); margin-bottom: 4px; transition: color 0.3s; }
a { color: var(--term); transition: color 0.3s; }
ul { padding-left: 20px; }
li { margin-bottom: 4px; }

/* ===== БЛОК ТЕРМИНА ===== */
.term {
  background: var(--term-bg);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(139,111,212,0.25) 1.5px, transparent 1.5px),
    radial-gradient(circle at 75% 25%, rgba(139,111,212,0.2) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(139,111,212,0.3) 1.5px, transparent 1.5px),
    radial-gradient(circle at 85% 70%, rgba(139,111,212,0.2) 1px, transparent 1px),
    radial-gradient(circle at 20% 80%, rgba(139,111,212,0.25) 1.5px, transparent 1.5px),
    radial-gradient(circle at 65% 40%, rgba(139,111,212,0.2) 1px, transparent 1px),
    linear-gradient(135deg, transparent 14%, rgba(139,111,212,0.08) 15%, transparent 16%),
    linear-gradient(45deg, transparent 34%, rgba(139,111,212,0.08) 35%, transparent 36%);
  background-size: 80px 80px, 60px 60px, 100px 100px, 70px 70px, 90px 90px, 65px 65px, 50px 50px, 50px 50px;
  background-color: var(--term-bg);
  border-left: 4px solid var(--term);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  transition: background-color 0.3s, border-color 0.3s;
}
.term h3 { color: var(--term); margin-top: 0; transition: color 0.3s; }
.term h3::before { content: "✮ "; }

/* ===== БЛОК ЗАПРЕТНОГО ===== */
.danger {
  background: var(--danger-bg);
  background-image:
    linear-gradient(135deg, transparent 45%, rgba(198,91,111,0.08) 46%, rgba(198,91,111,0.08) 48%, transparent 49%),
    linear-gradient(45deg, transparent 45%, rgba(198,91,111,0.06) 46%, rgba(198,91,111,0.06) 48%, transparent 49%),
    linear-gradient(90deg, transparent 48%, rgba(198,91,111,0.04) 49%, rgba(198,91,111,0.04) 51%, transparent 52%),
    radial-gradient(circle at 25% 30%, rgba(198,91,111,0.1) 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(198,91,111,0.08) 1.5px, transparent 1.5px),
    radial-gradient(circle at 15% 75%, rgba(198,91,111,0.09) 2px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(198,91,111,0.08) 1.5px, transparent 1.5px);
  background-size: 60px 60px, 60px 60px, 40px 40px, 100px 100px, 80px 80px, 90px 90px, 70px 70px;
  background-color: var(--danger-bg);
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  transition: background-color 0.3s, border-color 0.3s;
}
.danger h3 { color: var(--danger); margin-top: 0; transition: color 0.3s; }
.danger h3::before { content: "⚠ "; }

/* ===== БЛОК ПРИРОДЫ ===== */
.nature {
  background: var(--nature-bg);
  background-image:
    radial-gradient(ellipse at 20% 25%, rgba(111,174,139,0.1) 3px 2px, transparent 0),
    radial-gradient(ellipse at 75% 50%, rgba(111,174,139,0.08) 2.5px 1.5px, transparent 0),
    radial-gradient(ellipse at 40% 70%, rgba(111,174,139,0.09) 3px 2px, transparent 0),
    radial-gradient(ellipse at 85% 20%, rgba(111,174,139,0.08) 2px 1.5px, transparent 0),
    radial-gradient(ellipse at 15% 80%, rgba(111,174,139,0.1) 2.5px 2px, transparent 0),
    linear-gradient(120deg, transparent 48%, rgba(111,174,139,0.04) 49%, rgba(111,174,139,0.04) 51%, transparent 52%),
    linear-gradient(60deg, transparent 48%, rgba(111,174,139,0.03) 49%, rgba(111,174,139,0.03) 51%, transparent 52%);
  background-size: 70px 70px, 60px 60px, 80px 80px, 55px 55px, 75px 75px, 50px 50px, 50px 50px;
  background-color: var(--nature-bg);
  border-left: 4px solid var(--nature);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  transition: background-color 0.3s, border-color 0.3s;
}
.nature h3 { color: var(--nature); margin-top: 0; transition: color 0.3s; }
.nature h3::before { content: "✦ "; }

/* ===== ФЛЕЙВОР / ЦИТАТА ===== */
.flavor {
  font-style: italic;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 24px 0;
  transition: color 0.3s, border-color 0.3s;
}

/* ===== ВЫДЕЛЕНИЕ СЛОВ ===== */
.hl-gold   { color: var(--gold); }
.hl-purple { color: var(--term); }
.hl-red    { color: var(--danger); }
.hl-green  { color: var(--nature); }

.mark {
  background: var(--term-bg);
  color: var(--term);
  padding: 1px 6px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

/* ===== КАРТОЧКА ПЕРСОНАЖА ===== */
.character {
  display: flex;
  gap: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin: 24px 0;
  align-items: flex-start;
  transition: background-color 0.3s, border-color 0.3s;
}
.character img {
  width: 180px;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.character-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--bg-2);
}
.character-text::-webkit-scrollbar { width: 8px; }
.character-text::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.character-text::-webkit-scrollbar-track { background: var(--bg-2); }

/* ===== ГРАДИЕНТ-ПОДСКАЗКА ДЛЯ ПРОКРУЧИВАЕМОГО ТЕКСТА ===== */
.character-text {
  position: relative;
}
/* Градиент появляется только если текст переполнен */
.character-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 10px;  /* учитываем scrollbar */
  height: 30px;
  background: linear-gradient(to bottom, transparent, var(--bg-2));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
/* Показываем градиент, если высота контента больше контейнера */
.character-text:not(:hover)::after {
  opacity: 1;
}
/* Прячем при наведении, чтобы не мешал */
.character-text:hover::after {
  opacity: 0;
}

/* На мобильных градиент не нужен (текст не обрезается) */
@media (max-width: 700px) {
  .character-text::after { display: none; }
}

/* ===== КОНТЕКСТНЫЕ ЦВЕТА ССЫЛОК В БЛОКАХ ===== */
.danger a {
  color: #ff9eb3;  /* светло-розовый, читается на красном фоне */
}
.danger a:hover {
  color: var(--gold);
}

.nature a {
  color: #a0d9b8;  /* светло-зелёный, читается на тёмно-зелёном */
}
.nature a:hover {
  color: var(--gold);
}

/* ===== КАРУСЕЛЬ ВНУТРИ КАРТОЧКИ ПЕРСОНАЖА ===== */
.character .carousel {
  flex: 0 0 180px;
  width: 180px;
  height: 220px;
  overflow-y: hidden;  /* вертикальную прокрутку запрещаем — картинка обрежется */
}
.character .carousel img {
  flex: 0 0 100%;
  height: 220px;
  object-fit: contain;
  background: var(--bg-2);
}


.character.flip { flex-direction: row-reverse; }

@media (max-width: 700px) {
  .character,
  .character.flip {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }
  .character img {
    width: 100%;
    max-width: 260px;
    height: auto;
  }
  .character-text {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    width: 100%;
  }
  .character .carousel {
    flex-basis: auto;
    width: 100%;
    max-width: 260px;
    height: auto;
  }
  .character .carousel img { height: 260px; }
}

/* ===== СЕТКА КАРТОЧЕК ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: background-color 0.3s, border-color 0.3s;
}
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card .card-body { padding: 14px 18px; }
.card h3 { margin: 0 0 6px; }

.wip { color: var(--danger); font-size: 0.9rem; letter-spacing: 1px; }

/* ===== ДИСКЛЕЙМЕР ===== */
.disclaimer {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 14px 20px;
  margin: 0 0 32px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.disclaimer b { color: var(--danger); letter-spacing: 1px; }

/* ===== ПЛАШКА КОНТАКТОВ ===== */
.contact {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 40px 0;
  transition: background-color 0.3s, border-color 0.3s;
}
.contact img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}
.contact-info h3 { margin: 0 0 4px; }
.contact-info p { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.contact-links a {
  color: var(--term);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}
.contact-links a:hover { color: var(--gold); }
.contact-links a::before { content: "✮ "; color: var(--gold); }

@media (max-width: 600px) {
  .contact { flex-direction: column; text-align: center; }
  .contact-links { justify-content: center; }
}

/* ===== КАРУСЕЛЬ ===== */
.carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--bg-2);
}
.carousel img {
  scroll-snap-align: center;
  flex: 0 0 100%;
  height: 360px;
  object-fit: contain;
  background: var(--bg-2);
  border-radius: 10px;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.carousel::-webkit-scrollbar-track { background: var(--bg-2); }

.contact .carousel { width: 90px; flex-shrink: 0; }
.contact .carousel img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: none;
}

/* ===== ГАЛЕРЕЯ ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: transform 0.2s, border-color 0.3s;
}
.gallery img:hover { transform: scale(1.05); }

.icon-inline {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}

.divider {
  display: block;
  max-height: 100px;
  width: 100%;
  margin: 32px auto;
  object-fit: cover;
  pointer-events: none; /* нельзя кликнуть */
}

/* ===== ГАЛЕРЕЯ-ПЛИТКА С КАРУСЕЛЬЮ ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 24px 0;
  max-height: 500px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--bg-2);
}

.gallery-grid::-webkit-scrollbar {
  width: 8px;
}

.gallery-grid::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.gallery-grid::-webkit-scrollbar-track {
  background: var(--bg-2);
}

.gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.2s, border-color 0.3s, box-shadow 0.2s;
}

.gallery-grid img:hover {
  transform: scale(1.05);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(217, 180, 91, 0.3);
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .gallery-grid img {
    height: 120px;
  }
}

/* Если хочешь фиксированное количество колонок */
.gallery-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

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

/* Убрать прокрутку, если картинок мало */
.gallery-grid.no-scroll {
  max-height: none;
  overflow-y: visible;
}
.gallery-grid.portrait img {
  height: 200px;
}


/* ===== ЛАЙТБОКС ===== */
img.zoomable { cursor: zoom-in; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 7, 20, 0.92);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
[data-theme="light"] .lightbox { background: rgba(232, 220, 196, 0.95); }

.lightbox.open { display: flex; }

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 8px;
  border: 1px solid var(--gold);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
  margin-top: 14px;
  color: var(--text);
  font-style: italic;
  text-align: center;
  font-size: 0.95rem;
  max-width: 600px;
}
.lightbox-caption:empty { display: none; }

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.5rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}
.lightbox .close:hover { color: var(--gold); }

.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 20px;
  z-index: 2;
}
.lightbox .lb-nav:hover { color: var(--gold); }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }

.lightbox-dots {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.lightbox-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.lightbox-dots span.active {
  background: var(--gold);
  opacity: 1;
}

.lightbox.single .lb-nav,
.lightbox.single .lightbox-dots { display: none; }

@media (max-width: 600px) {
  .lightbox .lb-nav { font-size: 2rem; padding: 10px; }
}

/* ===== FAQ ===== */
.faq-item { margin: 24px 0; }

.faq-question {
  background: var(--nature);
  color: var(--bg);
  border-radius: 8px 8px 0 0;
  padding: 14px 20px;
  border-left: 4px solid var(--nature);
  transition: background-color 0.3s;
}

.faq-question h3 {
  color: var(--bg);
  margin: 0;
  font-size: 1.1rem;
}

.faq-answer {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px 20px;
  transition: background-color 0.3s, border-color 0.3s;
}

.faq-answer p:last-child { margin-bottom: 0; }

/* ===== ШАПКА И НАВИГАЦИЯ ===== */
header { text-align: center; padding: 40px 20px 10px; }
header h1 { font-size: 2.4rem; color: var(--gold); letter-spacing: 3px; margin: 0; transition: color 0.3s; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
header p { color: var(--muted); font-style: italic; transition: color 0.3s; }

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  transition: border-color 0.3s;
  position: relative;
}

/* Кнопка меню — скрыта на десктопе */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: "IM Fell English SC", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.nav-toggle:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.burger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Иконка бургера: три полоски */
.burger-icon span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Иконка крестика: две диагонали, без анимации */
nav.open .burger-icon {
  position: relative;
  width: 18px;
  height: 18px;
}

nav.open .burger-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
}

nav.open .burger-icon span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}

nav.open .burger-icon span:nth-child(2) {
  display: none;
}

nav.open .burger-icon span:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}

.burger-text {
  text-transform: uppercase;
}

/* Контейнер ссылок */
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  width: 100%;
}

.nav-menu a {
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  transition: color 0.3s;
}
.nav-menu a:hover { color: var(--gold); }

/* Подсветка активной страницы */
.nav-menu a.active {
  color: var(--gold);
  font-weight: bold;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ (dropdown) ===== */
@media (max-width: 700px) {
  nav {
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
  }
  
  .nav-toggle {
    display: flex;
  }
  
  .nav-menu {
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    background: var(--bg-2);  /* непрозрачный фон */
    width: 100%;
    border-radius: 8px;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  
  /* Раскрытое состояние */
  nav.open .nav-menu {
    max-height: 600px;
    margin-top: 12px;
    border: 1px solid var(--line);
  }
  
  .nav-menu a {
    padding: 14px 16px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  
  .nav-menu a:last-child {
    border-bottom: none;
  }
}

/* ===== РАСКРЫВАЮЩИЕСЯ БЛОКИ (COLLAPSIBLE) ===== */
.collapsible-header {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s, border-color 0.3s;
  margin-bottom: 0;
}

.collapsible-header:hover {
  background: var(--term-bg);
  border-color: var(--gold);
}

.collapsible-header h2,
.collapsible-header h3 {
  margin: 0;
  border: none;
  padding: 0;
  flex: 1;
}

.collapsible-header h2::after,
.collapsible-header h3::after {
  content: none !important;
}

.collapsible-icon {
  font-size: 1.2rem;
  color: var(--gold);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.collapsible.open .collapsible-icon {
  transform: rotate(90deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;  /* увеличил время для плавности */
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}

.collapsible.open .collapsible-content {
  max-height: none;  /* убираем ограничение */
  padding: 20px;
}

.collapsible-content > *:first-child {
  margin-top: 0;
}

.collapsible-content > *:last-child {
  margin-bottom: 0;
}


/* Фиолетовый (term) */
.collapsible.collapsible-term .collapsible-header {
  background: var(--term-bg);
  border-color: var(--term);
}

.collapsible.collapsible-term .collapsible-header:hover {
  border-color: var(--gold);
}

.collapsible.collapsible-term .collapsible-header h2,
.collapsible.collapsible-term .collapsible-header h3 {
  color: var(--term);
}

/* Зелёный (nature) */
.collapsible.collapsible-nature .collapsible-header {
  background: var(--nature-bg);
  border-color: var(--nature);
}

.collapsible.collapsible-nature .collapsible-header h2,
.collapsible.collapsible-nature .collapsible-header h3 {
  color: var(--nature);
}

/* Красный (danger) */
.collapsible.collapsible-danger .collapsible-header {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.collapsible.collapsible-danger .collapsible-header h2,
.collapsible.collapsible-danger .collapsible-header h3 {
  color: var(--danger);
}