/* «Файтинг с DeepSeek»: стили гайда поверх общего движка (assets/course/course.css). Правила дизайна: apps/site/DESIGN.md.
   Главная гайда (.g-home): баннер, цифры прогона, карточки «что получится», набор, шаги с картинками по этапам.
   Шаги: «мой прогон» (.g-run), ряд кадров (.g-shots), сравнение с картинками (.compare > div > figure).
   Свой стиль гайда «Lantern Gate» (автор разрешил отойти от «Мансарды», 05.11.2026): тёплый лаковый чёрный, золото,
   красный фонарей, нефрит и голубой Бай Лянь. Роли цветов движка (--amber «решает человек», --sage «делает агент» и т. д.) не трогаем. */

:root {
  --bg: #0f0d0d; --band: #131010; --bg2: #171313; --bg3: #1e1919; --bg4: #272121;
  --line: rgba(255, 232, 205, .08); --line2: rgba(255, 232, 205, .16);
  --gold: #e3b45a; --lantern: #ea5a43; --jade: #3cc6b0; --ice: #9ccaee;
  --world: var(--gold);
}
:root[data-world="2"] { --world: var(--lantern); }
:root[data-world="3"] { --world: var(--jade); }
:root[data-world="4"] { --world: var(--ice); }
body { background: radial-gradient(1100px 560px at 72% -220px, rgba(234, 90, 67, .11), transparent 70%) no-repeat, var(--bg); }
a { text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); }
a:hover { text-decoration-color: var(--gold); }
::selection { background: rgba(227, 180, 90, .32); }
.kicker::before { width: 7px; height: 7px; border-radius: 1px; rotate: 45deg; }
.gp-world { --wc: var(--gold); }
.gp-world.w2 { --wc: var(--lantern); }
.gp-world.w3 { --wc: var(--jade); }
.gp-world.w4 { --wc: var(--ice); }
.gp-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* «следующий шаг» движок красит в --amber/--red/--teal/--blue по этапу: внутри навигации это цвета гайда */
.day-nav { --amber: var(--gold); --red: var(--lantern); --teal: var(--jade); --blue: var(--ice); }
.gp-lbl::before { border-radius: 1px; rotate: 45deg; background: linear-gradient(135deg, var(--gold) 0 50%, var(--lantern) 50%); }
.lesson-hero > .art img { border-radius: 20px; }

/* ---------- Главная гайда ---------- */
main.lesson.g-home > * { max-width: 1120px; }
main.lesson.g-home { padding-top: 28px; }

.g-ban { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 500px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--bg2); }
.g-ban-art { position: absolute; inset: 0 0 0 auto; z-index: -2; width: 72%; height: 100%; object-fit: cover; object-position: 30% 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.g-ban::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg2) 0 28%, rgba(23, 24, 28, .82) 44%, rgba(23, 24, 28, 0) 64%); }
.g-ban-copy { max-width: 560px; padding: 44px 0 44px 48px; }
.g-ban h1 { margin: 18px 0 0; font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: .98; text-shadow: 0 2px 30px rgba(17, 18, 20, .6); }
.g-ban h1 em { color: var(--gold); font-style: normal; }
.g-seal { position: absolute; right: 22px; top: 22px; margin: 0; padding: 10px 6px 8px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 4px; background: linear-gradient(#7a1d14, #4e120d); box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(0, 0, 0, .25); color: var(--gold); font: 700 19px/1.1 "Noto Serif SC", serif; letter-spacing: .12em; writing-mode: vertical-rl; pointer-events: none; }
.g-ban .lead { margin: 20px 0 26px; max-width: 46ch; font-size: 17px; line-height: 1.55; }
.g-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 12px 6px 10px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(17, 18, 20, .55); color: var(--ink2); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.g-tag i { width: 7px; height: 7px; border-radius: 1px; rotate: 45deg; background: var(--lantern); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lantern) 22%, transparent); }
.g-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.g-need { margin: 14px 0 0; color: var(--mute); font-size: 14px; }

.g-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto 18px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); }
.g-stats li { position: relative; margin: 0; padding: 22px 24px 20px; border-left: 1px solid var(--line); }
.g-stats li:first-child { border-left: 0; }
.g-stats li::before { content: ""; position: absolute; left: 24px; top: -1px; width: 36px; height: 2px; background: var(--c); }
.g-stats b { display: block; color: var(--c); font: 800 40px/1 var(--sans); letter-spacing: -.045em; }
.g-stats span { display: block; margin-top: 8px; color: var(--ink2); font-size: 14px; line-height: 1.4; }
.g-stats-note { margin: -6px auto 0; color: var(--mute); font-size: 13.5px; }

.g-sec { margin-top: 88px; }
.g-sec > h2 { margin: 14px 0 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.04em; line-height: 1.05; }
.g-sec > .g-p { max-width: 64ch; margin: 16px 0 0; color: var(--ink2); font-size: 17px; }
.g-home .kicker { --k: var(--gold); }
.g-home .kicker::before { background: var(--k); }

.g-final { margin: 28px 0 0; }
.g-final img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 20px; }
.g-final figcaption { margin-top: 10px; color: var(--mute); font: 400 12.5px/1.4 var(--mono); }

.g-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.g-feats li { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); }
.g-feats img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.g-feats b { display: block; padding: 14px 18px 0; color: var(--ink); font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; }
.g-feats span { display: block; padding: 6px 18px 18px; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }

.g-home .flow { margin-top: 26px; }
.g-home .flow > div { flex-basis: 200px; padding: 16px 18px; font-size: 15px; }

.g-pack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.g-pack li { position: relative; margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); }
.g-pack b { display: block; margin-bottom: 8px; color: var(--c, var(--gold)); font: 800 36px/1 var(--sans); letter-spacing: -.045em; }
.g-pack b small { margin-left: 6px; color: var(--ink); font: 600 17px/1 var(--sans); letter-spacing: -.01em; }
.g-pack span { color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.g-pack-note { max-width: 76ch; margin: 16px 0 0; color: var(--mute); font-size: 14.5px; }

.g-stage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 34px 0 12px; }
.g-stage b { color: var(--c); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.g-stage span { color: var(--mute); font-size: 14.5px; }
.g-stage + .lesson-list { margin-top: 0; }
.lesson-list.g-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lesson-list.g-steps .lc { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 0; height: 100%; padding: 0 0 16px; overflow: hidden; border-radius: 16px; align-items: start; }
.lesson-list.g-steps a.lc:hover { translate: 0 -2px; }
.lesson-list.g-steps .lc::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; z-index: 1; height: 2px; border-radius: 0 0 2px 2px; background: var(--c); opacity: .9; }
.g-thumb { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 14px; border-bottom: 1px solid var(--line); background: var(--bg3); }
.lesson-list.g-steps .lc .n { width: 30px; height: 30px; margin-left: 16px; border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); font-size: 11.5px; }
.lesson-list.g-steps .lc .t { padding-right: 16px; }
.lesson-list.g-steps .lc .t b { font-size: 17px; }
.lesson-list.g-steps .lc .t small { font-size: 14px; }
.lesson-list.g-steps .lc .g-time { grid-column: 2; margin: 10px 16px 0 0; color: var(--mute); font: 400 12px/1.3 var(--mono); }
.lesson-list.g-steps .lc .pct { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 5px 8px; border-radius: 8px; background: rgba(17, 18, 20, .78); font-size: 10.5px; }
.lesson-list.g-steps .lc .meter { grid-column: 1 / -1; margin: 14px 16px 0; }
.lesson-list.g-steps > li.done .lc .n { border-color: var(--sage); }

/* ---------- Шаги ---------- */
.g-run { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 22px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); }
.g-run::before { content: attr(data-label); grid-column: 1 / -1; padding: 12px 18px 0; color: var(--mute); font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.g-run li { margin: 0; padding: 8px 18px 16px; }
.g-run li + li { border-left: 1px solid var(--line); }
.g-run b { display: block; color: var(--world); font: 800 28px/1.1 var(--sans); letter-spacing: -.04em; }
.g-run span { display: block; margin-top: 4px; color: var(--ink2); font-size: 13.5px; line-height: 1.4; }

.g-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 24px; padding: 0; list-style: none; counter-reset: sh; }
.g-shots li { position: relative; margin: 0; counter-increment: sh; }
.g-shots figure { margin: 0; }
.g-shots img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; }
.g-shots figcaption { margin-top: 8px; color: var(--mute); font-size: 13.5px; line-height: 1.45; }
.g-shots figcaption::before { content: counter(sh, decimal-leading-zero) " "; color: var(--world); font: 500 12px/1 var(--mono); }
.g-shots li + li::before { content: "→"; position: absolute; left: -11px; top: calc(28% - 10px); z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line2); border-radius: 50%; background: var(--bg); color: var(--ink2); font-size: 12px; }

.compare > div > figure { margin: 0; }
.compare > div > figure img { display: block; width: 100%; border-radius: 10px; }
/* кредит чужого кадра в подписи (референс из другой игры): отдельной строкой, тише подписи */
figcaption .g-credit { display: block; margin-top: 4px; color: var(--mute); font: 400 12px/1.4 var(--mono); opacity: .85; }
.compare > div > figure figcaption { margin-top: 8px; color: var(--ink2); font-size: 14px; line-height: 1.45; }

@media (max-width: 1000px) {
  .g-feats, .g-pack, .lesson-list.g-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .g-ban { display: block; min-height: 0; }
  .g-ban-art { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .g-ban::before { display: none; }
  .g-seal { display: none; }
  .g-ban-copy { max-width: none; margin-top: -48px; padding: 0 24px 28px; }
  .g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-stats li:nth-child(3) { border-left: 0; }
  .g-stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .g-shots { grid-template-columns: minmax(0, 1fr); }
  .g-shots li + li::before { display: none; }
}
@media (max-width: 720px) {
  .g-sec { margin-top: 64px; }
  .g-ban h1 { font-size: 40px; }
  .g-stats b { font-size: 32px; }
  .g-stats li { padding: 18px 16px 16px; }
  .g-stats li::before { left: 16px; }
  .g-feats, .g-pack, .lesson-list.g-steps { grid-template-columns: minmax(0, 1fr); }
  .g-run { grid-template-columns: minmax(0, 1fr); }
  .g-run li + li { border-left: 0; border-top: 1px solid var(--line); }
  .g-run li { padding: 10px 16px 12px; }
}