/* === Светлый пергамент — body.quest-light === */

body.quest-light {
  --ql-paper:      #f4ecd2;
  --ql-paper-card: #fbf4dc;
  --ql-ink:        #2a1f0d;
  --ql-ink-soft:   #5a4632;

  --ql-gold:        #b8923f;
  --ql-gold-bright: #d4af37;
  --ql-gold-deep:   #7d5e22;

  --ql-blood:      #8a2b1a;

  --ql-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --ql-body:    "EB Garamond", "Cormorant Garamond", "Georgia", serif;

  margin: 0;
  min-height: 100vh;
  font-family: var(--ql-body);
  color: var(--ql-ink);

  background-color: var(--ql-paper);
  background-image:
    radial-gradient(ellipse 380px 220px at 12% 8%,  rgba(140,100,60,0.12), transparent 70%),
    radial-gradient(ellipse 320px 200px at 88% 18%, rgba(140,100,60,0.10), transparent 70%),
    radial-gradient(ellipse 420px 240px at 50% 55%, rgba(170,130,80,0.08), transparent 70%),
    radial-gradient(ellipse 280px 180px at 8%  88%, rgba(120,80,40,0.14),  transparent 70%),
    radial-gradient(ellipse 320px 200px at 92% 95%, rgba(120,80,40,0.13),  transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(80,50,20,0.10) 100%);
  background-attachment: fixed;
}

body.quest-light .sidebar,
body.quest-light .topbar,
body.quest-light .bottom-nav { display: none !important; }
body.quest-light .app { grid-template-columns: 1fr !important; }
body.quest-light .content { padding: 0 !important; }

/* === Кнопка назад === */
.ql-back {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 100;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(244, 236, 210, 0.85);
  color: var(--ql-gold-deep);
  display: grid; place-items: center;
  border: 1px solid var(--ql-gold-deep);
  text-decoration: none;
}
.ql-back svg { width: 20px; height: 20px; }

/* === Страница === */
.ql-page {
  min-height: 100vh;
  padding: 40px 18px 60px;
  max-width: 660px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}

.ql-head { text-align: center; padding-top: 28px; }
.ql-head__eyebrow {
  font-family: var(--ql-display);
  font-size: 11px; letter-spacing: 0.35em;
  color: var(--ql-gold-deep);
  text-transform: uppercase;
  margin-bottom: 10px; font-weight: 600;
}
.ql-head__title {
  font-family: var(--ql-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ql-ink);
  margin: 0 0 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.ql-head__subtitle {
  font-family: var(--ql-body);
  font-style: italic;
  font-size: 17px; font-weight: 500;
  color: var(--ql-ink-soft); margin: 0;
}

.ql-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; color: var(--ql-gold-deep); margin: 4px 0;
}
.ql-divider::before, .ql-divider::after {
  content: ""; flex: 1; max-width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ql-gold-deep) 35%, var(--ql-gold-deep) 65%, transparent);
}
.ql-divider svg { width: 14px; height: 14px; color: var(--ql-gold-deep); }

.ql-section {
  font-family: var(--ql-display);
  font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ql-gold-deep);
  text-align: center;
  margin-top: 8px;
  display: flex; align-items: center; gap: 12px;
}
.ql-section::before, .ql-section::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ql-gold-deep), transparent);
}

/* === Базовая карточка === */
.card {
  position: relative;
  padding: 22px 20px 20px;
  overflow: hidden;
  background-color: var(--ql-paper-card);
  background-image:
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.08), transparent 70%),
    radial-gradient(ellipse 180px 80px at 80% 80%, rgba(140,100,60,0.06), transparent 70%);
  border: 1px solid rgba(125, 94, 34, 0.45);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow:
    inset 0 0 28px rgba(110, 80, 40, 0.08),
    0 5px 14px rgba(60, 40, 20, 0.20),
    0 1px 0 rgba(255,255,255,0.4);
}
.card::before, .card::after {
  content: ""; position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--ql-gold-deep);
  pointer-events: none;
}
.card::before { top: 6px; left: 6px;  border-right: none; border-bottom: none; }
.card::after  { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* фоны карточек */
.card--bg1 { background-color: #fbf4dc; }
.card--bg2 { background-color: #f4ecd2; }
.card--bg3 { background-color: #ecdfb8; }
.card--bg4 { background-color: #fff8e0; }
.card--bg5 { background-color: #e8dfc4; }
.card--bg6 {
  background-color: #f4ecd2;
  background-image:
    repeating-linear-gradient(0deg, rgba(80,50,20,0.04), rgba(80,50,20,0.04) 1px, transparent 1px, transparent 26px),
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.08), transparent 70%);
}

/* стили рамки */
.card--brown { border-color: rgba(80, 40, 20, 0.55); }
.card--brown::before, .card--brown::after { border-color: rgba(80, 40, 20, 0.7); }

.card--double {
  border: 3px double rgba(125, 94, 34, 0.55);
}
.card--double::before, .card--double::after { display: none; }

.card--soft {
  border: 1px solid rgba(125, 94, 34, 0.15);
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.10);
}
.card--soft::before, .card--soft::after { display: none; }

.card--bare {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px 8px;
}
.card--bare::before, .card--bare::after { display: none; }

.card--big-corners::before, .card--big-corners::after { width: 22px; height: 22px; }
.card--big-corners { padding: 28px 24px 26px; }

/* === Карточка-образец фона страницы === */
.bgcard {
  position: relative;
  padding: 32px 22px 28px;
  border-radius: 6px;
  min-height: 130px;
  border: 1px solid rgba(125, 94, 34, 0.18);
  box-shadow: 0 3px 10px rgba(60, 40, 20, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bgcard__label {
  font-family: var(--ql-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ql-gold-deep);
}
.bgcard__hex {
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-left: 8px;
  text-transform: none;
}
.bgcard__text {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.45;
  color: #1F1608;
  margin: 0;
}

/* === Фоны страницы — варианты === */
.bgcard--1 {
  background-color: #F4ECD2;
  background-image:
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.10), transparent 70%),
    radial-gradient(ellipse 180px 80px at 80% 80%, rgba(140,100,60,0.08), transparent 70%);
}
.bgcard--2 {
  background-color: #F8F1D8;
  background-image:
    radial-gradient(ellipse 220px 110px at 25% 20%, rgba(160,130,80,0.06), transparent 70%),
    radial-gradient(ellipse 200px 90px at 78% 78%, rgba(160,130,80,0.05), transparent 70%);
}
.bgcard--3 {
  background-color: #EBE0BF;
  background-image:
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(110,80,40,0.16), transparent 70%),
    radial-gradient(ellipse 220px 110px at 82% 78%, rgba(110,80,40,0.14), transparent 70%),
    linear-gradient(180deg, rgba(80,50,20,0.10) 0%, transparent 18%, transparent 82%, rgba(80,50,20,0.10) 100%);
}
.bgcard--4 {
  background-color: #ECE8D4;
  background-image:
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(120,110,90,0.10), transparent 70%),
    radial-gradient(ellipse 180px 80px at 80% 80%, rgba(120,110,90,0.08), transparent 70%);
}
.bgcard--5 {
  background-color: #ECD9B6;
  background-image:
    repeating-linear-gradient(135deg, transparent 0, transparent 3px, rgba(60,40,20,0.025) 4px, transparent 5px),
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.10), transparent 70%),
    radial-gradient(ellipse 180px 80px at 80% 80%, rgba(140,100,60,0.10), transparent 70%);
}
.bgcard--6 {
  background-color: #D8D0BC;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(60,40,20,0.10) 100%),
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(110,80,40,0.06), transparent 70%);
}
.bgcard--7 {
  background-color: #F2E6C2;
  background-image:
    radial-gradient(circle 4px at 12% 14%, rgba(80,50,20,0.12), transparent 60%),
    radial-gradient(circle 6px at 78% 22%, rgba(80,50,20,0.10), transparent 60%),
    radial-gradient(circle 5px at 24% 78%, rgba(80,50,20,0.14), transparent 60%),
    radial-gradient(circle 3px at 88% 64%, rgba(80,50,20,0.10), transparent 60%),
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.10), transparent 70%);
}
.bgcard--8 {
  background-color: #F5E9C9;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 60%, rgba(80,50,20,0.22) 100%),
    radial-gradient(ellipse 200px 100px at 20% 15%, rgba(140,100,60,0.10), transparent 70%);
}

/* === Карточка с левым орнаментом === */
.card--orn {
  padding-left: 52px;
  position: relative;
}
.card--orn::before, .card--orn::after { display: none; }

.card__orn {
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 28px;
  border-radius: 2px;
  pointer-events: none;
}

/* O1 · Сплошная полоса в золотой рамке — кровавая */
.orn-1 {
  background: #8A2B1A;
  border-left:  1px solid #B8923F;
  border-right: 1px solid #B8923F;
  box-shadow: inset 0 1px 0 rgba(255,180,150,0.25), inset 0 -1px 1px rgba(0,0,0,0.25);
}

/* O2 · Сплошная полоса в золотой рамке — бургунд */
.orn-2 {
  background: #6B1A14;
  border-left:  1px solid #B8923F;
  border-right: 1px solid #B8923F;
  box-shadow: inset 0 1px 0 rgba(255,160,140,0.20), inset 0 -1px 1px rgba(0,0,0,0.3);
}

/* O3 · Лоза — кровавая */
.orn-3 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='90' viewBox='0 0 28 90'><path d='M14 0 Q 3 22 14 45 Q 25 68 14 90' fill='none' stroke='%238A2B1A' stroke-width='2' stroke-linecap='round'/><circle cx='6' cy='22' r='3' fill='%238A2B1A'/><circle cx='22' cy='68' r='3' fill='%238A2B1A'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O4 · Лоза — бургунд */
.orn-4 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='90' viewBox='0 0 28 90'><path d='M14 0 Q 3 22 14 45 Q 25 68 14 90' fill='none' stroke='%236B1A14' stroke-width='2' stroke-linecap='round'/><circle cx='6' cy='22' r='3' fill='%236B1A14'/><circle cx='22' cy='68' r='3' fill='%236B1A14'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O5 · Цепь ромбов — золото */
.orn-5 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'><path d='M14 5 L 24 20 L 14 35 L 4 20 Z' fill='%23B8923F' stroke='%237D5E22' stroke-width='1'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O6 · Цепь ромбов — бургунд */
.orn-6 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='40' viewBox='0 0 28 40'><path d='M14 5 L 24 20 L 14 35 L 4 20 Z' fill='%236B1A14' stroke='%23380a06' stroke-width='1'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O7 · Греческий меандр — золото */
.orn-7 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M4 4 H 24 V 24 H 8 V 10 H 20' fill='none' stroke='%23B8923F' stroke-width='2'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O8 · Греческий меандр — кровавая */
.orn-8 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M4 4 H 24 V 24 H 8 V 10 H 20' fill='none' stroke='%238A2B1A' stroke-width='2'/></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O9 · Лилия (fleur-de-lis) — золото */
.orn-9 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='44' viewBox='0 0 28 44'><g fill='%23B8923F' stroke='%237D5E22' stroke-width='0.5'><path d='M14 6 C 11 12 7 14 7 20 C 7 25 11 27 14 27 C 17 27 21 25 21 20 C 21 14 17 12 14 6 Z'/><rect x='5' y='27' width='18' height='2'/><path d='M14 29 L 14 38'/></g></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O10 · Лилия — бургунд */
.orn-10 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='44' viewBox='0 0 28 44'><g fill='%236B1A14' stroke='%23380a06' stroke-width='0.5'><path d='M14 6 C 11 12 7 14 7 20 C 7 25 11 27 14 27 C 17 27 21 25 21 20 C 21 14 17 12 14 6 Z'/><rect x='5' y='27' width='18' height='2'/><path d='M14 29 L 14 38'/></g></svg>");
  background-repeat: repeat-y;
  background-position: center top;
}

/* O11 · Двойная линия с точками — золото */
.orn-11 {
  background:
    linear-gradient(180deg, transparent 0, #B8923F 0) no-repeat center top / 1px 100%,
    radial-gradient(circle, #B8923F 2.5px, transparent 3px) repeat-y center top / 28px 24px;
  background-position: center top, center top;
}

/* O12 · Двойная линия с точками — кровавая */
.orn-12 {
  background:
    linear-gradient(180deg, transparent 0, #8A2B1A 0) no-repeat center top / 1px 100%,
    radial-gradient(circle, #8A2B1A 2.5px, transparent 3px) repeat-y center top / 28px 24px;
}

/* =================================================================
   ROADMAP-стиль — линия слева, узлы на ней между карточками
   ================================================================= */

.roadmap {
  /* единый якорь — x-координата центра вертикальной линии и центра узла */
  --rm-cx: 20px;
  position: relative;
  padding: 8px 0 8px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: var(--rm-cx);
  top: 22px;
  bottom: 22px;
  width: 2px;
  margin-left: -1px; /* центр линии = --rm-cx */
  background: var(--rm-line);
  z-index: 0;
}

.rm-card {
  position: relative;
  padding: 18px 20px 16px 18px;
  background-color: #FFF8E0;
  background-image:
    radial-gradient(ellipse 160px 80px at 20% 15%, rgba(140,100,60,0.06), transparent 70%),
    radial-gradient(ellipse 140px 70px at 80% 80%, rgba(140,100,60,0.05), transparent 70%);
  border: 1px solid rgba(125, 94, 34, 0.18);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(110, 80, 40, 0.06),
    0 3px 10px rgba(60, 40, 20, 0.14);
  z-index: 1;
}
.rm-card__node {
  position: absolute;
  left: calc(var(--rm-cx) - 40px); /* от выравнивания на card.contentEdge */
  top: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateX(-50%); /* центр узла = --rm-cx */
  box-shadow: 0 0 0 5px #f4ecd2;
  z-index: 2;
}
.rm-card__stage {
  font-family: var(--ql-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rm-accent);
  margin-bottom: 4px;
}
.rm-card__title {
  font-family: var(--ql-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1F1608;
  margin: 0 0 6px;
}
.rm-card__desc {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: #3A2E20;
  margin: 0;
}

/* === NR2 · Золотое кольцо (финал). Тонкая золотая линия проходит через прозрачное золотое кольцо === */
.roadmap--nr2 {
  --rm-accent: #7D5E22;
}
.roadmap--nr2::before {
  background: #B8923F;
}
.roadmap--nr2 .rm-card__node {
  width: 18px; height: 18px;
  background: #f4ecd2;
  border: 2.5px solid #B8923F;
  box-shadow: none;
}

/* === Голова карточки === */
.card__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.card__num {
  font-family: var(--ql-display);
  font-size: 22px; font-weight: 700;
  color: var(--ql-gold-deep);
  letter-spacing: 0.04em; line-height: 1;
  min-width: 40px;
}
.card__label {
  font-family: var(--ql-display);
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ql-ink-soft);
}
.card__meta {
  font-family: "Courier New", monospace;
  font-size: 10px; letter-spacing: 0.04em;
  opacity: 0.55;
  display: block;
  margin-top: 4px;
}

.card__text {
  margin: 0;
  min-height: 90px;
}

/* === Чернила в обе стороны (управляется через CSS-переменные) === */
.ch {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  filter: blur(var(--ch-blur, 8px));
  transition:
    opacity var(--ch-in, 420ms) ease-out,
    filter  var(--ch-in, 420ms) ease-out;
}
.ch.is-in  { opacity: var(--ch-opa, 1); filter: blur(0); }
.ch.is-out {
  opacity: 0;
  filter: blur(var(--ch-blur-out, 10px));
  transition:
    opacity var(--ch-out, 380ms) ease-in,
    filter  var(--ch-out, 380ms) ease-in;
}

/* === Появление страницы === */
.ql-head, .ql-divider, .ql-section, .card {
  animation: ql-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ql-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-head, .ql-divider, .ql-section, .card { animation: none; }
  .ch { transition: none; }
}