/* ============================================================
   Общий каркас квеста по герою. Дополняет hero.css.
   Развилки с «ценой» выбора, без баллов; финал — карта пути.
   Идентичность героя — через --accent/--accent2/--night (quest.js).
   ============================================================ */

body{background:radial-gradient(120% 90% at 50% 0%, var(--night-2), var(--night) 60%); min-height:100vh}
.wrap{max-width:660px; margin:0 auto; padding:8vh 24px 12vh}
.qhead{text-align:center; margin-bottom:3vh}
.qhead .series-tag{margin-bottom:1rem}
.qhead h1{font-size:clamp(2.2rem,8vw,3.6rem); letter-spacing:.12em; text-indent:.12em}
.qhead .qsub{margin-top:.6rem; font-family:var(--disp); font-style:italic; color:var(--accent)}

.progress{display:flex; gap:.4rem; justify-content:center; margin:2rem 0; flex-wrap:wrap}
.progress i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22)}
.progress i.done{background:var(--accent2)}
.progress i.now{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}

.scene{opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s}
.scene.in{opacity:1; transform:none}
.scene .eyebrow{text-align:center}
.scene h2{font-family:var(--disp); font-weight:900; font-size:clamp(1.6rem,5vw,2.3rem); text-align:center;
  margin:.4rem 0 1.6rem; color:var(--papyrus)}
.scene .narr{font-size:1.12rem; margin-bottom:1.8rem}
.scene .narr p{margin-bottom:1.1rem}
.scene .narr .verse{font-family:var(--disp); font-style:italic; color:var(--mist);
  border-left:2px solid var(--accent); padding-left:1rem; margin:1.2rem 0}
/* современное эхо мифа: то же самое, но про сегодня */
.scene .narr .echo{margin:1.3rem 0 0; padding:.9rem 1.1rem; border-radius:3px;
  background:color-mix(in srgb,var(--accent2) 12%,transparent);
  border-left:2px solid var(--accent2); color:var(--papyrus); font-size:1rem; opacity:.95}
.cprompt{font-family:var(--disp); font-style:italic; color:var(--accent); font-size:1.15rem; text-align:center; margin:0 0 1.4rem}

.opts{display:flex; flex-direction:column; gap:1rem}
.opt{display:block; width:100%; text-align:left; cursor:pointer; color:var(--papyrus);
  background:color-mix(in srgb,var(--accent2) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:4px; padding:1.1rem 1.2rem; font:inherit; transition:.2s}
.opt:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent2) 16%,transparent)}
.opt .lab{font-family:var(--disp); font-weight:600; font-size:1.08rem; display:block; margin-bottom:.3rem}
.opt .pr{font-size:.9rem; color:var(--mist)}
.opt .pr b{color:var(--accent); font-weight:600; letter-spacing:.04em}

.map{display:none}
.map.show{display:block}
.map h2{font-family:var(--disp); font-weight:900; font-size:clamp(1.8rem,6vw,2.6rem); text-align:center;
  margin-bottom:.6rem; color:var(--papyrus)}
.map .lead{text-align:center; color:var(--mist); margin-bottom:2.2rem}
.map ol{list-style:none; counter-reset:step; padding:0}
.map li{counter-increment:step; position:relative; padding:1rem 0 1.1rem 2.6rem; border-top:1px solid rgba(255,255,255,.1)}
.map li::before{content:counter(step); position:absolute; left:0; top:1rem; width:1.7rem; height:1.7rem;
  border:1px solid var(--accent); border-radius:50%; color:var(--accent);
  font-family:var(--disp); font-weight:900; font-size:.85rem; display:grid; place-items:center}
.map li .st{font-family:var(--disp); font-weight:600; color:var(--papyrus)}
.map li .ch{color:var(--accent); margin:.2rem 0}
.map li .pr{font-size:.9rem; color:var(--mist)}
.map .close{font-family:var(--disp); font-style:italic; color:var(--accent); font-size:1.2rem;
  text-align:center; margin:2rem 0 1.4rem; line-height:1.5}

.qrow{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:1.4rem}
.btn{font-family:var(--disp); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem;
  padding:.7rem 1.6rem; border-radius:2px; cursor:pointer; text-decoration:none; transition:.25s; border:1px solid transparent}
.btn.primary{color:var(--ink); background:var(--accent); border-color:var(--accent)}
.btn.primary:hover{background:transparent; color:var(--accent)}
.btn.ghost{color:var(--papyrus); background:transparent; border-color:rgba(255,255,255,.3)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.cta-start{display:block; margin:2.4rem auto 0; width:max-content}
.backlink{display:block; text-align:center; margin-top:3vh; font-size:.82rem; color:var(--mist); text-decoration:none}
.backlink:hover{color:var(--accent)}
#copyMsg{text-align:center; color:var(--accent2); font-size:.85rem; min-height:1.2em; margin-top:.6rem}
.map .course-line{text-align:center; margin:2rem 0 0; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12); font-size:.94rem; color:var(--mist)}
.map .course-line a{color:var(--accent); font-weight:600;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent); text-decoration:none}
.map .course-line a:hover{border-bottom-color:var(--accent)}

@media (prefers-reduced-motion:reduce){ .scene{opacity:1; transform:none; transition:none} }

/* печать мастерской в финале квеста */
.seal{text-align:center; margin-top:2.4rem}
.seal .mea{display:block; width:150px; height:14px; margin:0 auto .8rem; color:var(--accent,#E9C46A); opacity:.7}
.seal .motto{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent,#E9C46A); opacity:.85; margin-bottom:.3rem}