/* ==========================================================================
   DEADLOCK — фанатский сайт. Газетный нуар Нью-Йорка + оккультная мистика.
   ========================================================================== */

:root {
  --paper: #ebe2d0;
  --paper-2: #e2d7c1;
  --paper-3: #d6c9ae;
  --ink: #15130f;
  --ink-2: #2b2721;
  --muted: #6a6052;
  --rule: #b9ab8f;
  --red: #8e2b22;
  --red-2: #b23a2c;
  --green: #18332a;
  --green-2: #2f6b52;
  --glow: #5fe0a0;
  --gold: #a88655;
  --night: #0d0f0d;
  --night-2: #151915;

  --f-display: "Oranienbaum", "Playfair Display", Georgia, serif;
  --f-head: "Playfair Display", Georgia, serif;
  --f-body: "PT Serif", Georgia, serif;
  --f-label: "PT Serif Caption", "PT Serif", Georgia, serif;

  --wrap: clamp(1200px, 90vw, 2080px); /* на широких экранах контейнер растёт, чтобы не было пустых полей */
  --gutter: clamp(16px, 3vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: #ebe2d0; } /* арт главного экрана уходит под полосу прокрутки */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* бумажная фактура поверх всего */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--paper); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- типографика ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font: 600 12px/1 var(--f-label);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--red);
}
.kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.kicker--light { color: #d9a77a; }
.label {
  font: 11px/1.3 var(--f-label);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
}
.h-section {
  font: 900 clamp(38px, 5.4vw, 76px)/.98 var(--f-head);
  letter-spacing: -.02em;
  margin: .25em 0 0;
}
.h-section em { font-style: italic; font-weight: 500; color: var(--red); }
.lead { font-size: 18px; color: var(--ink-2); max-width: 46ch; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  font: 600 16px/1 var(--f-body);
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: background .25s, color .25s, transform .25s;
  cursor: pointer;
}
.btn .arr { transition: transform .25s; }
.btn:hover { background: var(--red); border-color: var(--red); }
.btn:hover .arr { transform: translateX(5px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: transparent; color: var(--paper); border-color: rgba(235,226,208,.6); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--green { background: var(--green); border-color: var(--green); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-arrow:hover { color: var(--red); }

/* ---------- знак глаза ---------- */
.eye {
  display: inline-block; width: 1em; height: 1em; vertical-align: middle; flex: none;
  background: currentColor;
  -webkit-mask: url("../img/eye.png") center / contain no-repeat;
          mask: url("../img/eye.png") center / contain no-repeat;
}
/* ==========================================================================
   ШАПКА
   ========================================================================== */
.masthead { position: relative; z-index: 20; padding-top: 18px; }
.masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
}
.masthead__side { display: flex; align-items: center; gap: 36px; }
.masthead__side--right { justify-content: flex-end; }
.nav { display: flex; gap: 30px; }
.nav a {
  position: relative; font-size: 16px; padding: 6px 0; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--red); transition: right .3s;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--red); }

.logo {
  display: flex; align-items: center;
  font: 900 clamp(30px, 4vw, 58px)/1 var(--f-head);
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink);
}
/* «Hub» — название сайта (домен deadlock-hub): красная плашка-штамп рядом со словом Deadlock */
.logo__hub {
  margin-left: .18em; padding: .1em .16em .06em; font-size: .5em; letter-spacing: .04em;
  color: #ebe2d0; background: var(--red); rotate: -4deg; transition: rotate .4s;
}
.logo:hover .logo__hub { rotate: 0deg; }
.logo .eye { width: .86em; height: .86em; margin: 0 .02em; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.logo:hover .eye { transform: rotate(90deg); }

.ribbon {
  margin-top: 14px;
  text-align: center;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: 3px;
  padding: 7px 14px;
  font: 10px/1.4 var(--f-label); letter-spacing: .3em; text-transform: uppercase;
}

/* выпадающее меню «Герои» */
.nav { align-items: center; }
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__drop > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret {
  display: inline-block; font-style: normal; font-size: 15px; line-height: 1; color: var(--red);
  animation: caret-nudge 1.8s ease-in-out infinite; transition: transform .25s;
}
.nav__drop:hover .nav__caret, .nav__drop:focus-within .nav__caret { animation: none; transform: rotate(180deg); }
@keyframes caret-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }
.nav__menu {
  position: absolute; left: -14px; top: 100%; z-index: 30; min-width: 190px; padding: 8px 0;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { padding: 8px 14px; white-space: nowrap; }
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--paper-2); color: var(--red); }
/* онлайн Deadlock в Steam */
.online { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--ink); font-size: 14px; white-space: nowrap; }
.online[hidden] { display: none; }
.online b { font: 400 20px/1 var(--f-display); }
.online span { font: 10px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.online__dot { width: 8px; height: 8px; border-radius: 50%; background: #3cb371; box-shadow: 0 0 0 0 rgba(60,179,113,.6); animation: online-pulse 2s infinite; }
@keyframes online-pulse { 70% { box-shadow: 0 0 0 8px rgba(60,179,113,0); } 100% { box-shadow: 0 0 0 0 rgba(60,179,113,0); } }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .3s, opacity .3s; }

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН
   ========================================================================== */
.hero { position: relative; padding-top: 10px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(560px, 74vh, 760px);
}
.hero__text {
  position: relative; z-index: 3; container-type: inline-size;
  padding: clamp(28px, 4vw, 56px) 0 40px;
  display: flex; flex-direction: column;
}
.hero__title {
  position: relative;
  /* размер от ширины колонки: самая длинная строка («по Deadlock» ≈ 5.4em) всегда заканчивается до картинки */
  font: 400 clamp(48px, calc(15.6cqi - 11px), 124px)/.86 var(--f-display);
  text-transform: uppercase; letter-spacing: -.015em;
  margin: 24px 0 24px;
}
.hero__title .line { white-space: nowrap; }
.hero__title .seal {
  position: absolute; width: .5em; height: .5em; top: .02em; left: 3.5em;
  color: var(--gold); opacity: .85;
  animation: spin 40s linear infinite;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; transform: translateY(105%); animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .12s; }
.hero__title .line:nth-child(3) > span { animation-delay: .24s; }
.hero__sub { font-size: 18px; max-width: 40ch; margin: 0 0 30px; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__foot {
  margin-top: auto; padding-top: 36px;
  display: flex; align-items: flex-end; gap: 26px;
}
.hero__list { font: 10px/1.7 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hero__motto {
  flex: 1; display: flex; align-items: center; gap: 12px;
  font: 10px/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase;
}
.hero__motto::before, .hero__motto::after { content: ""; flex: 1; height: 1px; background: var(--ink); }

.hero__art {
  position: relative;
  /* арт доходит до правого края окна, даже когда контейнер уже экрана */
  margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--wrap)) / 2));
  margin-left: -60px;
}
.hero__frame {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask: url("../img/torn-v.svg") left top / 130px 100% no-repeat, linear-gradient(#000, #000) 128px 0 / calc(100% - 128px) 100% no-repeat;
          mask: url("../img/torn-v.svg") left top / 130px 100% no-repeat, linear-gradient(#000, #000) 128px 0 / calc(100% - 128px) 100% no-repeat;
  background: var(--night);
}
.hero__frame img {
  position: absolute; left: -3%; top: -3%; max-width: none; /* запас по краям для параллакса */
  width: 106%; height: 106%;
  object-fit: cover; object-position: 50% 40%;
  filter: saturate(.9) contrast(1.06);
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero__frame::after { /* виньетка и зелёный оккультный туман */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 20% 85%, rgba(47,107,82,.55), transparent 70%),
    linear-gradient(90deg, rgba(13,15,13,.55), transparent 35%),
    linear-gradient(0deg, rgba(13,15,13,.7), transparent 40%);
  mix-blend-mode: multiply;
}
.fog {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(40% 30% at 30% 80%, rgba(95,224,160,.18), transparent 70%);
  animation: fog 9s ease-in-out infinite alternate;
}
.hero__caption {
  position: absolute; z-index: 3; right: calc(var(--gutter) + 8px); top: 22px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 10px/1 var(--f-label); letter-spacing: .4em; text-transform: uppercase;
  color: rgba(235,226,208,.75);
}

/* новые герои патча — «полароиды» поверх кадра Бродвея */
.newheroes {
  position: absolute; z-index: 4; inset: 0 0 0 150px; padding: clamp(18px, 3vw, 46px) clamp(16px, 3vw, 56px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 16px;
}
.newheroes__label { display: flex; align-items: baseline; gap: 12px; color: var(--paper); }
.newheroes__label span { font: 11px var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: #e9c46a; }
.newheroes__label b { font: 400 clamp(26px, 2.6vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.newheroes__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); width: min(100%, 600px); }
.nh {
  display: grid; gap: 2px; padding: 8px 8px 10px; background: var(--paper);
  box-shadow: 0 14px 30px rgba(0,0,0,.5); transform: rotate(var(--r));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  animation: nh-in .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(.35s + var(--d));
}
.nh:hover { transform: rotate(0) translateY(-8px) scale(1.04); box-shadow: 0 22px 40px rgba(0,0,0,.6); z-index: 2; }
.nh__img { display: block; aspect-ratio: 280 / 330; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #555) 75%, #000), #121212 85%); }
.nh__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nh__name { font: 900 clamp(13px, 1.1vw, 17px)/1.1 var(--f-head); text-transform: uppercase; margin-top: 6px; }
.nh__role { font: 9.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
@keyframes nh-in { from { opacity: 0; transform: translateY(40px) rotate(calc(var(--r) * 3)); } }
/* «досье» — карточка героя, приколотая к кадру */
.dossier {
  position: absolute; z-index: 4;
  left: 9%; bottom: 8%;
  width: clamp(170px, 15vw, 220px);
  background: var(--paper);
  padding: 10px 10px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform: rotate(-4deg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.dossier:hover { transform: rotate(-1deg) translateY(-6px); }
.dossier::before { /* скрепка-скотч */
  content: ""; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(214,201,174,.85);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.dossier__img { aspect-ratio: 280 / 380; background: #3a2b2b center / cover; filter: sepia(.15); }
.dossier__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: space-between; align-items: baseline; margin-top: 9px; }
.dossier__no { white-space: nowrap; }
.dossier__name { font: 900 20px/1 var(--f-head); text-transform: uppercase; }
.dossier__no { font: 10px/1 var(--f-label); letter-spacing: .2em; color: var(--red); }
.dossier__role { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 6px; }

.stamp {
  position: absolute; z-index: 4; right: 11%; bottom: 13%;
  width: 128px; height: 128px; border-radius: 50%;
  border: 2px solid rgba(235,226,208,.75);
  display: grid; place-items: center; text-align: center;
  color: rgba(235,226,208,.9);
  font: 10px/1.5 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
  transform: rotate(12deg);
}
.stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(235,226,208,.5); }
.stamp b { display: block; font: 900 26px/1 var(--f-head); letter-spacing: 0; }

/* ==========================================================================
   ТРИ КОЛОНКИ ПОД ГЛАВНЫМ ЭКРАНОМ
   ========================================================================== */
.trio {
  border-top: 1px solid var(--ink);
  margin-top: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.trio__item { padding: 26px 30px 30px; position: relative; }
.trio__item + .trio__item { border-left: 1px solid var(--rule); }
.trio__item:first-child { padding-left: 0; }
.trio__item:last-child { padding-right: 0; }
.trio__head { display: flex; align-items: center; gap: 12px; font: 600 18px/1 var(--f-body); margin-bottom: 18px; }
.trio__head .eye { width: 30px; height: 30px; }
.trio__head .arr { transition: transform .25s; }
.trio__item:hover .trio__head .arr { transform: translateX(5px); }
.trio__img { height: clamp(170px, 12.5vw, 260px); overflow: hidden; background: var(--night); } /* одинаковая высота во всех трёх колонках */
.trio__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; filter: sepia(.25) saturate(.85); }
.trio__item:hover .trio__img img { transform: scale(1.05); filter: none; }
/* снимки страниц сайта (тир-лист, карта предметов) показываем целиком, без обрезки, на фоне цвета страницы */
.trio__img--shot { background: #e3dac7; }
.trio__img--shot img { object-fit: contain; }
.trio__desc { font-size: 14px; color: var(--ink-2); margin-top: 12px; }
.trio__quote { font: italic 400 clamp(24px, 2.2vw, 32px)/1.2 var(--f-head); margin: 4px 0 18px; max-width: 15ch; }
.trio__quote-rule { width: 30px; height: 2px; background: var(--red); margin-bottom: 14px; }
.trio__angel {
  position: absolute; right: 0; bottom: 0; width: 46%; height: 100%;
  background: url("../img/steam/ss4.jpg") 52% 25% / cover;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  filter: grayscale(1) contrast(1.15) brightness(1.15);
  mix-blend-mode: multiply; opacity: .55;
}

/* ==========================================================================
   СЕКЦИИ
   ========================================================================== */
.section { padding-block: clamp(56px, 7vw, 100px); position: relative; } /* только вертикальные отступы, чтобы не затирать боковые у .wrap */
.section--tight { padding-top: 40px; }
.section__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 30px;
  margin-bottom: 34px;
}
.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }
.rule--double { border-top: 3px double var(--ink); }

/* ---------- лента героев ---------- */
.cast {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.cast::-webkit-scrollbar { height: 4px; }
.cast::-webkit-scrollbar-thumb { background: var(--ink); }
.hcard { scroll-snap-align: start; display: block; }
.hcard__img {
  position: relative; aspect-ratio: 280 / 380; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #555) 70%, #000), #121212 80%);
}
.hcard__img::before { /* рамка-паспарту */
  content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(235,226,208,.35);
}
.hcard__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: grayscale(.85) sepia(.35) contrast(1.05);
  transform: scale(1.02);
  transition: filter .5s, transform .8s cubic-bezier(.2,.8,.2,1);
}
.hcard:hover .hcard__img img { filter: none; transform: scale(1.07); }
.hcard__type {
  position: absolute; z-index: 3; top: 16px; left: 16px;
  font: 10px/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--paper); background: rgba(13,15,13,.6); padding: 6px 8px;
  max-width: calc(100% - 32px); line-height: 1.5;
}
.hcard__name {
  text-align: center; margin-top: 14px;
  font: 900 21px/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em;
}
.hcard__sub {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font: 10px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.hcard__sub::before, .hcard__sub::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.hcard:hover .hcard__name { color: var(--red); }

/* ---------- тёмная полоса «город» ---------- */
.city {
  position: relative; color: var(--paper);
  background: var(--night);
  margin-top: 30px;
  min-height: 620px;
  display: flex; align-items: center;
  isolation: isolate;
}
.city::before { /* рваный верхний край */
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
  background: var(--night);
  -webkit-mask: url("../img/torn-h.svg") 0 0 / 100% 100%;
          mask: url("../img/torn-h.svg") 0 0 / 100% 100%;
}
.city__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.city__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .78; }
.city__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,15,13,.96) 0%, rgba(13,15,13,.7) 38%, rgba(13,15,13,.05) 70%),
    linear-gradient(0deg, rgba(13,15,13,.85), transparent 30%);
}
.city__inner { width: 100%; padding-block: 90px; position: relative; }
.city__title { font: 900 clamp(46px, 6vw, 88px)/.95 var(--f-head); margin: 18px 0 22px; letter-spacing: -.02em; }
.city__text { color: rgba(235,226,208,.82); max-width: 42ch; margin-bottom: 30px; }
.city__stats { display: flex; gap: 40px; margin: 0 0 36px; }
.city__stats div { border-left: 1px solid rgba(235,226,208,.3); padding-left: 16px; }
.city__stats b { display: block; font: 400 46px/1 var(--f-display); color: var(--paper); }
.city__stats span { font: 10px/1.4 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: rgba(235,226,208,.6); }
.pin {
  position: absolute; display: flex; gap: 12px; align-items: flex-start;
  font: 10px/1.5 var(--f-label); letter-spacing: .22em; text-transform: uppercase;
}
.pin i {
  position: relative; width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 2px solid var(--paper);
}
.pin i::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid currentColor; animation: ping 2.4s ease-out infinite; }
.pin b { display: block; color: var(--paper); font-weight: 400; }
.pin span { color: rgba(235,226,208,.6); letter-spacing: .1em; text-transform: none; font-size: 13px; font-family: var(--f-body); }
.pin--amber { color: #e0a24f; }
.pin--amber i { background: #e0a24f; }
.pin--sapphire { color: #6aa7e6; }
.pin--sapphire i { background: #6aa7e6; }

/* ---------- гайды ---------- */
.guides { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; }
.gcard { position: relative; display: block; }
.gcard__img { overflow: hidden; background: var(--night); }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gcard:hover .gcard__img img { transform: scale(1.05); }
.gcard--big .gcard__img { aspect-ratio: 16 / 9.6; }
.gcard__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 14px; }
.gcard__title { font: 900 26px/1.1 var(--f-head); margin: 0 0 4px; }
.gcard--big .gcard__title { font-size: clamp(26px, 2.6vw, 36px); }
.gcard__desc { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.gcard__tag { font: 10px/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; display: block; }
.gcard .arr { font-size: 20px; transition: transform .25s; }
.gcard:hover .arr { transform: translateX(5px); }
.gcard:hover .gcard__title { color: var(--red); }
.guides__side { display: grid; gap: 22px; align-content: start; }
.guides__side .gcard__img { aspect-ratio: 16 / 6.6; }
.guides__side .gcard { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.guides__side .gcard:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- чёрный рынок (предметы) ---------- */
.market {
  background: var(--green); color: var(--paper);
  position: relative; isolation: isolate;
}
.market::before, .market::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40px; background: var(--green);
  -webkit-mask: url("../img/torn-h.svg") 0 0 / 100% 100%;
          mask: url("../img/torn-h.svg") 0 0 / 100% 100%;
}
.market::before { top: -38px; }
.market::after { bottom: -38px; transform: scaleY(-1); }
.market .h-section em { color: #e0a24f; }
.market .lead { color: rgba(235,226,208,.78); }
.market__note { font: 11px/1.5 var(--f-label); letter-spacing: .14em; color: rgba(235,226,208,.55); text-transform: uppercase; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  background: transparent; border: 1px solid rgba(235,226,208,.35); color: var(--paper);
  padding: 9px 16px; cursor: pointer;
  font: 11px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.tab:hover { border-color: var(--paper); }
.tab[aria-selected="true"] { background: var(--paper); color: var(--green); border-color: var(--paper); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); margin: 28px 1px 1px 0; }
.item { background: var(--green); border: 1px solid rgba(235,226,208,.16); margin: 0 -1px -1px 0; display: grid; grid-template-columns: 58px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; transition: background .2s; }
.item:hover { background: #1e3d32; }
.item__icon {
  width: 58px; height: 58px; overflow: hidden;
  background: var(--slot, #c97a2c); border-radius: 3px;
  box-shadow: 0 0 0 2px var(--slot, #c97a2c);
}
.item__icon img { width: 100%; height: 100%; object-fit: cover; }
.item__name { font: 700 16.5px/1.2 var(--f-body); }
.item__meta { font: 10px/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: rgba(235,226,208,.58); margin-top: 4px; }
.item__stat { text-align: right; }
.item__stat b { display: block; font: 400 28px/1 var(--f-display); }
.item__stat span { font: 9.5px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(235,226,208,.58); }
.bar { height: 3px; background: rgba(235,226,208,.15); margin-top: 8px; grid-column: 2 / 4; }
.bar i { display: block; height: 100%; background: #e0a24f; }
.slot-weapon { --slot: #c97a2c; }
.slot-vitality { --slot: #5c8f3a; }
.slot-spirit { --slot: #8a55b3; }

/* ---------- иконки предметов ---------- */
.mini {
  width: 36px; height: 36px; display: block; flex: none;
  background: var(--slot, #c97a2c); border-radius: 3px; position: relative;
  box-shadow: 0 0 0 2px var(--slot, #c97a2c);
}
.mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.mini { cursor: pointer; outline-offset: 3px; }
.tooltip {
  position: fixed; z-index: 900; left: 0; top: 0; max-width: 280px;
  background: var(--ink); color: var(--paper); padding: 7px 10px; border-radius: 3px;
  font: 13px/1.35 var(--f-body); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.tooltip.on { opacity: 1; transform: none; }
.tooltip span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: rgba(235,226,208,.88); }
.tooltip b { display: block; font-weight: 700; }
.tooltip small { display: block; margin-top: 2px; font: 10.5px/1.35 var(--f-label); letter-spacing: .08em; color: rgba(235,226,208,.7); }
.tooltip::after { /* стрелка к элементу */
  content: ""; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--ink);
}
.tooltip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.tooltip.side::after { display: none; }
.has-tip { border-bottom: 1px dotted currentColor; cursor: pointer; }

/* ---------- Полная подсказка предмета, как в игре ---------- */
.tooltip--item {
  --tx: #ece4d4; --tm: rgba(236, 228, 212, .62);
  width: 340px; max-width: calc(100vw - 16px); padding: 0; border-radius: 4px; overflow: hidden;
  background: #1b1714; color: var(--tx); font: 13.5px/1.45 var(--f-body);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 2px color-mix(in srgb, var(--slot) 55%, transparent), 0 14px 34px rgba(0, 0, 0, .45);
}
.tooltip--item::after { border-top-color: #1b1714; }
.tooltip--item.below::after { border-bottom-color: var(--slot); }
.tooltip--item b, .tooltip--item span, .tooltip--item small { display: initial; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.tooltip--item small { font-family: inherit; letter-spacing: 0; }
.itip__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 14px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--slot) 92%, #fff 8%), color-mix(in srgb, var(--slot) 70%, #000 30%));
  border-bottom: 1px solid rgba(0, 0, 0, .45);
}
.tooltip--item .itip__name { display: block !important; font: 900 20px/1.1 var(--f-head); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tooltip--item .itip__cost { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 5px !important; font: 700 15px/1 var(--f-body); color: #7ff0c9; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.itip__soul { width: 15px; height: 15px; background: currentColor; -webkit-mask: url(../img/props/icon_soul.svg) center / contain no-repeat; mask: url(../img/props/icon_soul.svg) center / contain no-repeat; }
.tooltip--item .itip__tier { text-align: right; font: 700 9.5px/1.3 var(--f-label) !important; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.tooltip--item .itip__tier b { display: block !important; font: 900 20px/1 var(--f-head); letter-spacing: 0; color: #fff; }
.itip__sec { padding: 0 14px 10px; }
.itip__sec + .itip__sec { border-top: 1px solid rgba(255, 255, 255, .07); }
.itip__sec header {
  display: flex; justify-content: space-between; align-items: center; margin: 0 -14px 8px; padding: 5px 14px;
  background: rgba(255, 255, 255, .05); font: 700 10px/1.4 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--tm);
}
.itip__sec--active header { background: color-mix(in srgb, var(--slot) 28%, transparent); color: #fff; }
.tooltip--item .itip__cd { display: inline-flex !important; align-items: center; gap: 4px; font: 700 13px/1 var(--f-body); letter-spacing: 0; color: #fff; text-transform: none; }
.tooltip--item .itip__sec p { margin: 0 0 8px; color: var(--tx); }
.itip__ic { display: inline-block; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; vertical-align: -2px; }
.itip__boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin: 0 0 8px; }
.itip__box { padding: 7px 8px 6px; background: rgba(255, 255, 255, .06); border-radius: 3px; text-align: center; }
.tooltip--item .itip__box b { display: flex !important; align-items: center; justify-content: center; gap: 5px; font: 700 18px/1.1 var(--f-body); color: #fff; }
.tooltip--item .itip__box span { display: block !important; margin-top: 3px !important; font-size: 11px; line-height: 1.25; color: var(--tm); }
.itip__row { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; }
.itip__row .itip__ic { align-self: center; }
.itip__gap { flex: none; width: 15px; }   /* место под значок, когда его нет, — чтобы числа стояли ровно */
.tooltip--item .itip__row b { font-weight: 700; color: #fff; white-space: nowrap; }
.tooltip--item .itip__row span { color: var(--tm); }
.itip__row.is-cond span::after { content: ' (при условии)'; font-style: italic; }
/* цвета значков и чисел — как в игре */
.tooltip--item .g-spirit .itip__ic, .itip__box.g-spirit b { color: #c99af2; }
.tooltip--item .g-weapon .itip__ic, .itip__box.g-weapon b { color: #f1a646; }
.tooltip--item .g-vit .itip__ic, .itip__box.g-vit b { color: #92d460; }
.tooltip--item .g-x .itip__ic { color: rgba(236, 228, 212, .75); }
/* выделения в описании на тёмном фоне */
.tooltip--item .rich .hl { color: #fff; background: none; padding: 0; }
.tooltip--item .rich .at { font-weight: 700; }
.tooltip--item .rich .at--spirit { --atc: #c99af2; }
.tooltip--item .rich .at--weapon, .tooltip--item .rich .at--melee { --atc: #f1a646; }
.tooltip--item .rich .at--vit { --atc: #92d460; }
.tooltip--item .rich .at--move { --atc: #5fd3b0; }
.tooltip--item .rich .at--cc { --atc: #7bb6ea; }
.tooltip--item .rich .at--pure { --atc: #ef7b6b; }
.tooltip--item .rich .at--other { --atc: #fff; }
.tooltip--item .rich .dim { color: var(--tm); }
.bcard__wr { margin-top: 10px; font: 10px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bcard__wr b { color: var(--red); font-size: 12px; }

/* ---------- финальный призыв ---------- */
.cta { position: relative; text-align: center; padding: 110px 0 60px; overflow: hidden; }
.cta__sky { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; color: var(--ink); opacity: .14; pointer-events: none; }
.cta__sky svg { width: 100%; height: 100%; }
.cta .eye { width: 54px; height: 54px; }
.cta__title { font: 900 clamp(34px, 4.4vw, 62px)/1.04 var(--f-head); margin: 18px 0 14px; letter-spacing: -.01em; }
.cta__text { color: var(--ink-2); margin: 0 0 30px; }
.cta__ghost {
  position: absolute; right: max(2vw, calc(50% - 720px)); bottom: 0; width: clamp(170px, 18vw, 260px);
  filter: grayscale(1) contrast(1.1); opacity: .9; mix-blend-mode: multiply;
  -webkit-mask: linear-gradient(0deg, transparent, #000 30%);
          mask: linear-gradient(0deg, transparent, #000 30%);
}
.cta__ghost--left { right: auto; left: max(2vw, calc(50% - 720px)); transform: scaleX(-1); }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
.footer { border-top: 3px double var(--ink); padding-block: 40px 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) auto; gap: 30px; align-items: start; }
.footer .logo { font-size: 42px; }
.footer h4 { font: 700 14px/1 var(--f-body); margin: 4px 0 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.footer ul a:hover { color: var(--red); }
.footer__col + .footer__col { border-left: 1px solid var(--rule); padding-left: 24px; }
.footer__up { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; border-bottom: 1px solid; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule); font: 11px/1.5 var(--f-label); letter-spacing: .12em; color: var(--muted); }

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ========================================================================== */
.page-head { padding: 54px 0 30px; border-bottom: 1px solid var(--ink); }
.page-head .h-section { line-height: 1.04; margin-bottom: 6px; }
.page-head .h-section { font-size: clamp(46px, 7vw, 104px); }
.page-head .lead { margin-top: 22px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 0; }
.chip {
  background: transparent; border: 1px solid var(--ink); padding: 9px 16px; cursor: pointer;
  font: 11px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.search {
  border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 9px 2px; min-width: 240px;
  font: 16px var(--f-body); outline: none;
}
.grid-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px 20px; margin-top: 40px; }

/* профиль героя */
.profile { display: grid; grid-template-columns: 380px 1fr; gap: 56px; padding: 50px 0 20px; }
.profile__card { position: sticky; top: 20px; align-self: start; }
.profile__card .hcard__img img { filter: none; }
.profile__name { font: 900 clamp(40px, 7vw, 100px)/.9 var(--f-head); text-transform: uppercase; margin: 14px 0 6px; overflow-wrap: anywhere; }
.profile > div { min-width: 0; }
.profile__ru { font: italic 400 26px/1.2 var(--f-head); color: var(--muted); }
.profile__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.tag { font: 10px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--ink); padding: 7px 10px; }
.tag--solid { background: var(--ink); color: var(--paper); }
.profile__role { font: italic 400 24px/1.3 var(--f-head); border-left: 3px solid var(--red); padding-left: 18px; margin: 0 0 22px; }
.lore { columns: 2 280px; column-gap: 40px; column-rule: 1px solid var(--rule); font-size: 17px; }
.lore p:first-child::first-letter { float: left; font: 400 76px/.8 var(--f-display); padding: 6px 10px 0 0; color: var(--red); }
.abilities { display: grid; gap: 18px; margin-top: 10px; }
.ability { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px; border: 1px solid var(--rule); background: var(--paper-2); }
.ability__stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: 14px 1px 1px 0; /* рамки у ячеек, а не фон сетки — пустые места в ряду не закрашиваются */
}
.ability__stats div { background: var(--paper); padding: 8px 10px; border: 1px solid var(--rule); margin: 0 -1px -1px 0; }
.ability__stats dt { font: 10px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ability__stats dd { margin: 3px 0 0; font: 700 16px/1.25 var(--f-body); }
.sp { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; font-weight: 800; color: #8b4fd6; cursor: pointer; white-space: nowrap; }
.wp, .ml { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; font-weight: 800; color: #d9661c; cursor: pointer; white-space: nowrap; }
.wp__ico { display: inline-block; width: 16px; height: 16px; background: url("../img/icons/weapon.svg") center / contain no-repeat; }
.ml__ico {
  display: inline-block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("../img/icons/melee.svg") center / contain no-repeat;
          mask: url("../img/icons/melee.svg") center / contain no-repeat;
}
.sp__ico {
  display: inline-block; width: 15px; height: 14px; background: currentColor;
  -webkit-mask: url("../img/icons/spirit.svg") center / contain no-repeat;
          mask: url("../img/icons/spirit.svg") center / contain no-repeat;
}
.ability__ups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.ability__up { border-left: 3px solid var(--ink); padding: 4px 0 4px 12px; font-size: 13.5px; line-height: 1.4; }
.ability__up > b:first-child { display: block; font: 10px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-bottom: 5px; }
.ability__up:nth-child(2) { border-color: var(--gold); }
.ability__up:nth-child(3) { border-color: var(--red); }
.ability__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.ability__icon img { width: 36px; height: 36px; filter: sepia(.35); }
.ability__name { font: 700 17px/1.2 var(--f-body); margin: 2px 0 4px; }
.ability__no { font: 10px/1 var(--f-label); letter-spacing: .2em; color: var(--red); text-transform: uppercase; }
.ability__desc { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* Выделения в описаниях способностей — по разметке разработчиков (см. Rich в сборке данных):
   .hl — ключевые слова и числа, .at — типы урона и эффекты со значком, .dim — мелкие пояснения */
.rich .hl { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, rgba(233, 196, 106, .55) 58%, rgba(233, 196, 106, .55) 92%, transparent 92%); padding: 0 1px; }
.rich .at { --atc: var(--ink); font-weight: 700; color: var(--atc); }
.rich .at::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .22em 0 .05em; vertical-align: -.17em;
  background: var(--atc); -webkit-mask: var(--ati) center / contain no-repeat; mask: var(--ati) center / contain no-repeat;
}
.rich .at--spirit { --atc: #7a3db0; --ati: url("../img/icons/spirit.svg"); }
.rich .at--weapon { --atc: #b0601a; --ati: url("../img/icons/weapon.svg"); }
.rich .at--melee  { --atc: #a5521c; --ati: url("../img/icons/melee.svg"); }
.rich .at--vit    { --atc: #3c7a2a; --ati: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E"); }
.rich .at--move   { --atc: #1d7d63; --ati: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5l7 7-7 7V5zm9 0l7 7-7 7V5z'/%3E%3C/svg%3E"); }
.rich .at--cc     { --atc: #2b6593; --ati: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 1h2v5.3l3.2-2.4 1.2 1.6L13 8.8v2.5l2.2-1.3 1.1-5.4 2 .4-.8 3.8 4.6-2.6 1 1.7-4.6 2.7 3.6 1.3-.7 1.9-5.1-1.9L14 13l2.2 1.3 5.1-1.9.7 1.9-3.6 1.3 4.6 2.7-1 1.7-4.6-2.6.8 3.8-2 .4-1.1-5.4L13 15.2v2.5l4.4 3.3-1.2 1.6L13 20.2V23h-2v-2.8l-3.2 2.4-1.2-1.6 4.4-3.3v-2.5l-2.2 1.3-1.1 5.4-2-.4.8-3.8-4.6 2.6-1-1.7 4.6-2.7-3.6-1.3.7-1.9 5.1 1.9L10 13l-2.2-1.3-5.1 1.9-.7-1.9 3.6-1.3-4.6-2.7 1-1.7 4.6 2.6-.8-3.8 2-.4 1.1 5.4L11 11.3V8.8L6.6 5.5l1.2-1.6L11 6.3z'/%3E%3C/svg%3E"); }
.rich .at--pure   { --atc: #8e2b22; --ati: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.5L18.5 21 12 16.5 5.5 21l2-7.5L2 9h7z'/%3E%3C/svg%3E"); }
.rich .at--other  { --atc: var(--ink); }
.rich .at--other::before { display: none; }
.rich .dim { font-size: .92em; font-style: italic; color: var(--muted); }
/* ссылка из профиля героя на карту предметов с этим героем */
.imap {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center; padding: 16px 22px 16px 16px;
  border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink); color: inherit; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.imap:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.imap__art { /* миниатюра графика: четверти, ось нуля и точки-предметы */
  position: relative; height: 100px; border: 1px solid var(--ink); overflow: hidden;
  background: linear-gradient(rgba(47, 107, 82, .14) 50%, rgba(142, 43, 34, .1) 50%);
}
.imap__art::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--ink); }
.imap__art::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(21, 19, 15, .25); }
.imap__art i, .imap__art b { position: absolute; width: 14px; height: 14px; background: var(--night); border: 2px solid var(--slot, #c97a2c); transition: transform .4s cubic-bezier(.2, .8, .25, 1); }
.imap__art i:nth-child(1) { left: 12%; top: 22%; --slot: #8a55b3; } .imap__art i:nth-child(2) { left: 30%; top: 38%; --slot: #5c8f3a; }
.imap__art i:nth-child(3) { left: 24%; top: 62%; } .imap__art i:nth-child(4) { left: 58%; top: 18%; --slot: #8a55b3; }
.imap__art i:nth-child(5) { left: 70%; top: 32%; } .imap__art i:nth-child(6) { left: 64%; top: 70%; --slot: #5c8f3a; }
.imap__art i:nth-child(7) { left: 84%; top: 46%; --slot: #8a55b3; }
.imap__art b { left: 44%; top: 10%; border-color: var(--c, var(--red)); box-shadow: 0 0 0 3px rgba(235, 226, 208, .7); }
.imap:hover .imap__art i:nth-child(odd) { transform: translateY(-5px); } .imap:hover .imap__art i:nth-child(even) { transform: translateY(4px); }
.imap:hover .imap__art b { transform: scale(1.3); }
.imap__text { display: grid; gap: 4px; }
.imap__title { font: 900 22px/1.15 var(--f-head); }
.imap__desc { font-size: 14px; color: var(--ink-2); }
.imap__go { padding: 10px 16px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 700 12px var(--f-label); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.imap__go i { font-style: normal; display: inline-block; transition: transform .2s; }
.imap:hover .imap__go i { transform: translateX(4px); }
@media (max-width: 700px) { .imap { grid-template-columns: 1fr; } .imap__art { height: 80px; } .imap__go { justify-self: start; } }
.h-sub { font: 900 34px/1.05 var(--f-head); margin: 56px 0 18px; }

/* тир-лист героев */
.tierlist { display: grid; gap: 12px; }
.tier { display: grid; grid-template-columns: 130px 1fr; border: 1px solid var(--ink); background: var(--paper-2); }
.tier__name { display: grid; place-items: center; font: 400 30px/1 var(--f-display); color: #fff; background: var(--tc); }
.tier--1 { --tc: #8e2b22; } .tier--2 { --tc: #a8742a; } .tier--3 { --tc: #3d5a4c; }
.tier__heroes { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.tier__hero { display: grid; justify-items: center; gap: 2px; width: 92px; text-align: center; transition: transform .2s; }
.tier__hero:hover { transform: translateY(-3px); }
.tier__hero img { width: 92px; aspect-ratio: 280 / 380; object-fit: cover; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #555) 70%, #000), #121212 80%); border: 2px solid var(--tc); }
.tier__hero b { font: 900 12px/1.1 var(--f-head); text-transform: uppercase; }
.tier__hero span { font: 700 12px var(--f-body); color: var(--tc); }
.tier__hero { --tc: inherit; }
.tier--1 .tier__hero { --tc: #8e2b22; } .tier--2 .tier__hero { --tc: #a8742a; } .tier--3 .tier__hero { --tc: #3d5a4c; }
.tierlist__note { margin: 6px 0 0; font: 12px var(--f-label); letter-spacing: .06em; color: var(--muted); }
@media (max-width: 520px) { .tier { grid-template-columns: 1fr; } .tier__name { padding: 8px; } .tier__hero, .tier__hero img { width: 74px; } }
/* каталог предметов (как магазин в игре) */
.catalog { margin-top: 34px; display: grid; gap: 22px; }
.catalog__group { border: 1px solid var(--ink); background: var(--paper-2); }
.catalog__head { margin: 0; padding: 10px 16px; font: 900 22px/1 var(--f-head); color: #fff; background: var(--slot); text-align: center; letter-spacing: .02em; }
.catalog__row { display: grid; grid-template-columns: 120px 1fr; border-top: 1px solid var(--rule); }
.catalog__price { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--slot); color: #fff; font: 400 26px/1 var(--f-display); padding: 10px; }
.catalog__price:not(:has(.catalog__soul)) { font: 700 13px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.catalog__soul { font-style: normal; font-size: 18px; opacity: .85; }
.catalog__items { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px; }
.catalog__item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.catalog__item .mini { width: 32px; height: 32px; }
@media (max-width: 520px) { .catalog__row { grid-template-columns: 1fr; } .catalog__price { justify-content: flex-start; } }
/* выпадающие меню в заголовках таблицы (как «Герои» в шапке) */
.th-drop { position: relative; display: inline-block; }
.th-drop__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 10px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.th-drop.active .th-drop__btn { color: var(--red); }
.th-drop__btn { flex-wrap: wrap; text-align: left; }
.th-drop__btn small { flex-basis: 100%; font: italic 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--red); }
.th-drop__btn small:empty { display: none; }
.table th[data-dir]:not([data-dir=""])::after { content: " " attr(data-dir); color: var(--red); }
.th-drop__menu button[aria-pressed="true"] { color: var(--red); font-weight: 700; background: var(--paper-2); }
.th-drop__menu button[aria-pressed="true"]::before { content: "✓"; display: inline-block; width: 18px; margin-left: -4px; }
.th-drop__menu button[aria-pressed="false"] { padding-left: 28px; }
.th-drop__btn .nav__caret { font-size: 13px; }
.th-drop:hover .th-drop__btn .nav__caret, .th-drop.open .th-drop__btn .nav__caret { animation: none; transform: rotate(180deg); }
.th-drop__menu {
  position: absolute; left: -12px; top: calc(100% + 8px); z-index: 20; min-width: 190px; padding: 6px 0;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.th-drop:hover .th-drop__menu, .th-drop.open .th-drop__menu, .th-drop:focus-within .th-drop__menu { opacity: 1; visibility: visible; transform: none; }
.th-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* мостик для мыши */
.th-drop__menu button { padding: 8px 14px; border: 0; background: none; text-align: left; cursor: pointer; font: 14px var(--f-body); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.th-drop__menu button:hover { background: var(--paper-2); color: var(--red); }
.th-drop__menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
.table-wrap { overflow: visible; }
@media (max-width: 860px) { .table-wrap { overflow-x: auto; padding-bottom: 220px; margin-bottom: -220px; } }
/* таблица предметов */
.table-wrap { overflow-x: auto; margin-top: 34px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 10px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--ink); cursor: pointer; white-space: nowrap; }
.table th[aria-sort] { color: var(--red); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr:hover td { background: var(--paper-2); }
.table .cell-item { display: flex; gap: 12px; align-items: center; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.wr-bar { display: inline-block; width: 70px; height: 4px; background: var(--paper-3); vertical-align: middle; margin-left: 8px; }
.wr-bar i { display: block; height: 100%; background: var(--ink); }

/* новости */
.filters--sub { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--red); background: var(--paper-2); align-items: center; animation: tab-in .3s; }
.filters--sub[hidden] { display: none; }
.filters__label { font: 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.chip--sub[aria-pressed="true"]::before { content: "✓ "; }
.news__empty { padding: 40px 0; font: italic 20px var(--f-head); color: var(--muted); }

/* «Скоро…» в пустых «Других новостях»: коллаж из рваной бумаги с кадрами игры */
.soon {
  --mx: 0; --my: 0; --ink: #1d1813;
  position: relative; width: 100%; max-width: 1120px; aspect-ratio: 16 / 8.8; margin: 34px auto 0; overflow: hidden; grid-column: 1 / -1;
  border: 1px solid var(--rule); background: #e4d8bf;
  background-image:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(60, 40, 20, .28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.soon > :is(.soon__scrap, .soon__hero, .soon__sign, .soon__doodle, .soon__hazard) {
  position: absolute; opacity: 0; scale: 1.14; rotate: calc(var(--r, 0deg) + 5deg);
  translate: calc(var(--mx) * var(--z, 10) * 1px) calc(var(--my) * var(--z, 10) * 1px);
  transition: opacity .45s, scale .65s cubic-bezier(.2, .9, .3, 1.2), rotate .65s cubic-bezier(.2, .9, .3, 1.2), translate .35s ease-out;
  transition-delay: calc(var(--d) * .2s), calc(var(--d) * .2s), calc(var(--d) * .2s), 0s;
}
.soon.in > :is(.soon__scrap, .soon__hero, .soon__sign, .soon__doodle, .soon__hazard) { opacity: 1; scale: 1; rotate: var(--r, 0deg); }
/* сигнальная лента поверх угла с заводом */
.soon__hazard {
  right: -3%; bottom: 30%; width: 34%; height: clamp(16px, 2.4vw, 30px); --r: -16deg; --z: 22; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, #e8b923 0 14px, #1d1813 14px 28px); box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.soon__hazard span { padding: 1px 10px; background: #e8b923; font: 700 clamp(8px, .85vw, 11px) var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: #1d1813; }

/* обрывки с кадрами: светлая бумажная кайма вокруг фото */
.soon__scrap { background: #efe6d3; }
.soon__scrap::before { content: ""; position: absolute; inset: 7px; clip-path: var(--c2); background: var(--img) var(--pos) / var(--size) no-repeat; filter: var(--f, none); }
.soon__scrap span { position: absolute; left: 12px; bottom: 12px; padding: 3px 8px; background: #efe6d3; font: 700 10px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.soon__scrap--city { left: 2.5%; top: 6%; width: 29%; height: 68%; --r: -3deg; --z: 10;
  --img: url("../img/cns/stock_exchange.jpg"); --pos: 64% 42%; --size: 300% auto; --f: sepia(.55) saturate(.85) contrast(1.08) brightness(.88); }
/* справа — стройка: construction.webp — два кадра друг над другом (граница на 55% высоты).
   Оба обрывка берут нижний кадр: сверху его левая часть (проход под лесами),
   снизу — правая (стройплощадка с ограждением и «Workers Unite») */
.soon__scrap--crane { right: 2.5%; top: 4%; width: 27%; height: 46%; --r: 4deg; --z: 12;
  --img: url("../img/cns/construction.webp"); --pos: 15% 98%; --size: 290% auto; --f: saturate(1.05) contrast(1.05) brightness(1.45); }
.soon__scrap--works { right: 6%; bottom: 5%; width: 21%; height: 37%; --r: -6deg; --z: 16;
  --img: url("../img/cns/construction.webp"); --pos: 99% 98%; --size: 300% auto; --f: saturate(1.05) contrast(1.05) brightness(1.45); }

/* Швейцар выглядывает из-за таблички */
.soon__hero { left: 50%; top: 1%; width: 27%; height: 66%; margin-left: -13.5%; --r: 1deg; --z: 18; }
.soon__hero-bg { position: absolute; inset: 8% 2% 0; background:
  repeating-conic-gradient(from 0deg at 50% 100%, rgba(233, 196, 106, .12) 0 3deg, transparent 3deg 9deg), linear-gradient(#6b2620, #3a1311); }
.soon__hero img { position: absolute; left: 50%; bottom: 0; height: 100%; translate: -50% 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }

/* картонная табличка */
.soon__sign { left: 20%; top: 45%; width: 60%; height: 47%; --r: -2.5deg; --z: 26; filter: drop-shadow(6px 10px 12px rgba(40, 25, 10, .35)); }
.soon__board {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  background: #c8a46c;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 240, 210, .35), transparent 60%),
    repeating-linear-gradient(91deg, rgba(90, 60, 25, .07) 0 2px, transparent 2px 7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.soon__word { font: italic 900 clamp(46px, 8.6vw, 126px)/.9 var(--f-head); color: var(--ink); letter-spacing: .01em; filter: url(#ink); text-shadow: 0 0 1px rgba(29, 24, 19, .6); }
.soon__word b { font-weight: inherit; animation: soon-dot 1.6s infinite; }
.soon__word b:nth-child(2) { animation-delay: .2s; } .soon__word b:nth-child(3) { animation-delay: .4s; }
@keyframes soon-dot { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .15; } }
.soon__line { width: 64%; height: clamp(10px, 1.6vw, 22px); fill: var(--ink); filter: url(#ink); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1) calc(var(--d) * .2s + .45s); }
.soon.in .soon__line { clip-path: inset(0 0 0 0); }
.soon__note { margin-top: 10px; font: 700 clamp(10px, 1vw, 13px) var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: rgba(29, 24, 19, .75); }

/* красная печать с эмблемой и скотч */
.soon__stamp {
  position: absolute; right: 6%; bottom: 10%; width: clamp(64px, 9vw, 112px); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid #9b2a20; color: #9b2a20; display: grid; place-items: center; rotate: -14deg; mix-blend-mode: multiply;
  opacity: 0; scale: 2.2; transition: opacity .2s, scale .35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--d) * .2s + 1s);
  filter: url(#ink);
}
.soon.in .soon__stamp { opacity: .85; scale: 1; }
.soon__stamp i { width: 46%; aspect-ratio: 1; background: currentColor; -webkit-mask: url(../img/eye.png) center / contain no-repeat; mask: url(../img/eye.png) center / contain no-repeat; }
.soon__stamp span { position: absolute; bottom: 14%; font: 700 clamp(7px, .8vw, 10px) var(--f-label); letter-spacing: .2em; text-transform: uppercase; }
.soon__tape { position: absolute; top: -4%; width: 15%; height: 15%; background: rgba(238, 228, 200, .62); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  clip-path: polygon(3% 8%, 97% 0, 100% 92%, 0 100%); }
.soon__tape--l { left: 4%; rotate: -10deg; } .soon__tape--r { right: 5%; rotate: 8deg; }

/* чернильные эмблемы на фоне */
.soon__doodle { width: 10%; aspect-ratio: 1; background: var(--ink); opacity: 0; -webkit-mask: url(../img/eye.png) center / contain no-repeat; mask: url(../img/eye.png) center / contain no-repeat; filter: url(#ink); }
.soon.in > .soon__doodle { opacity: .55; }
.soon__doodle--eye { left: 34%; top: 6%; --r: -8deg; --z: 4; width: 7%; }
.soon__doodle--eye2 { left: 5%; bottom: 6%; --r: 12deg; --z: 5; width: 8%; }
.soon__caption { grid-column: 1 / -1; max-width: 640px; margin: 22px auto 0; text-align: center; font: italic 18px/1.5 var(--f-head); color: var(--ink-2); }
@media (max-width: 760px) {
  .soon { aspect-ratio: 4 / 4.2; }
  .soon__scrap--city { width: 42%; height: 40%; } .soon__scrap--crane { width: 40%; height: 30%; }
  .soon__scrap--works { width: 34%; height: 24%; } .soon__hazard { width: 50%; bottom: 20%; } .soon__hero { width: 52%; margin-left: -26%; height: 56%; }
  .soon__sign { left: 6%; width: 88%; top: 50%; height: 34%; } .soon__doodle--eye, .soon__scrap span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .soon > *, .soon__line, .soon__stamp { transition: none !important; } .soon__word b { animation: none; } }
#news { display: grid; gap: 44px; margin-top: 40px; }
/* Каждая новость — отдельная карточка: рамка, бумажный фон, тень и цветная полоса сверху по типу новости */
.news {
  --nc: var(--ink);
  display: grid; grid-template-columns: 340px 1fr; gap: 30px; padding: 24px;
  border: 2px solid var(--ink); border-top: 7px solid var(--nc); background: var(--paper-2);
  box-shadow: 7px 7px 0 var(--ink); transition: box-shadow .2s;
}
.news:hover { box-shadow: 10px 10px 0 var(--ink); }
.news:has(.news__tag--hero) { --nc: var(--red); }
.news:has(.news__tag--update) { --nc: var(--green); }
.news--other { --nc: var(--gold); }
.news--top { grid-template-columns: 1.25fr 1fr; }
.news__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); align-self: start; }
.news__img > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.news__hero {
  position: absolute; right: 10px; bottom: 10px; width: 22%; aspect-ratio: 280 / 380; object-fit: cover;
  border: 3px solid var(--paper); box-shadow: 0 6px 16px rgba(0,0,0,.4); transform: rotate(3deg);
}
.news__meta { display: flex; gap: 12px; align-items: center; font: 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.news__tag { padding: 5px 8px; color: var(--paper); background: var(--ink); }
.news__tag--hero { background: var(--red); }
.news__tag--update { background: var(--green); }
.news__title { font: 900 clamp(24px, 2.4vw, 34px)/1.1 var(--f-head); margin: 12px 0 8px; }
.news--top .news__title { font-size: clamp(30px, 3.4vw, 48px); }
.news__lead { margin: 0 0 12px; font-size: 17px; color: var(--ink-2); }
.news__points { margin: 0 0 18px; padding-left: 18px; font-size: 15px; }
.news__points li { margin-bottom: 6px; }
.news__links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.news__links .btn { padding: 12px 18px; font-size: 14px; }
.news__orig { margin-top: 14px; font: italic 13px var(--f-body); color: var(--muted); }
/* «Другие новости» из телеграм-бота: фото сверху, текст, видео */
.news--other, .news--other.news--top { grid-template-columns: 1fr; max-width: 860px; }
.news--other .news__img { aspect-ratio: auto; max-height: 520px; }
.news--other .news__img > img:first-child { height: auto; max-height: 520px; }
.news__tag--other { background: var(--gold); color: var(--ink); }
.nvideo { position: relative; display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 6px 0 4px; padding: 0; border: 2px solid var(--ink); background: var(--night); cursor: pointer; overflow: hidden; }
.nvideo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s, filter .3s; }
.nvideo:hover img { transform: scale(1.03); filter: brightness(.85); }
.nvideo i { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 12px; background: #c4302b; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.nvideo i::after { content: ""; position: absolute; left: 31px; top: 15px; border: 12px solid transparent; border-left: 20px solid #fff; border-right: 0; }
.nvideo--on iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Карточка с полным текстом открывается по клику */
.news--readable { cursor: pointer; }
.news--readable:hover .news__title { color: var(--red); }
.news__read { cursor: pointer; }

/* Окно чтения: полный текст анонса или патчноута из Steam */
.reader {
  width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden;
  flex-direction: column;
  border: 2px solid var(--ink); border-top: 7px solid var(--red); background: var(--paper); color: var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.reader[open] { animation: how-in .28s cubic-bezier(.2, .8, .25, 1); }
.reader::backdrop { background: rgba(13, 15, 13, .6); backdrop-filter: blur(2px); }
.reader[open] { display: flex; }
.reader__bar { flex: none; display: flex; justify-content: flex-end; border-bottom: 1px solid var(--rule); background: var(--paper); }
.reader__close { width: 44px; height: 40px; border: 0; background: none; cursor: pointer; font: 400 34px/1 var(--f-display); color: var(--ink); }
.reader__close:hover { color: var(--red); }
.reader__close:focus { outline: none; }
.reader__close:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.reader__in { flex: 1; min-height: 0; overflow: auto; padding: 18px clamp(18px, 4vw, 44px) 34px; }
.reader__in:focus { outline: none; }
.reader__src { margin-left: auto; font-style: italic; letter-spacing: .04em; text-transform: none; }
.reader__title { margin: 14px 0 18px; font: 900 clamp(26px, 3.4vw, 42px)/1.08 var(--f-head); }
.reader__body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.reader__body p { margin: 0 0 12px; }
.reader__body a { color: var(--red); }
.reader__foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pn-img { margin: 6px 0 18px; }
.pn-img img { width: 100%; display: block; border: 1px solid var(--ink); }
.pn-h { margin: 28px 0 12px; padding: 6px 12px; font: 700 13px var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--paper); background: var(--ink); }
.pn-hr { border: 0; border-top: 1px dashed var(--rule); margin: 18px 0; }
.pn-list { margin: 0 0 12px; padding-left: 20px; }
.pn-list li { margin-bottom: 5px; }
.pn-group { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(21, 19, 15, .12); }
.pn-group .pn-list { margin: 0; }
.pn-who { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.25; color: var(--ink); }
.pn-who img, .pn-who .mini { width: 34px; height: 34px; flex: none; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); }
.pn-item { white-space: nowrap; }
.pn-item .mini { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; box-shadow: none; }
@media (max-width: 700px) { .pn-group { grid-template-columns: 1fr; gap: 6px; } .reader { box-shadow: 6px 6px 0 var(--ink); } }

.news-draft { max-width: 860px; margin: 0 0 24px; padding: 12px 16px; border: 2px dashed var(--red); background: var(--paper-2); font: italic 15px/1.45 var(--f-body); color: var(--ink-2); }

/* статьи-гайды */
.article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 22px; margin-top: 40px; }
.article { max-width: 760px; margin: 0 auto; padding: 50px 0 40px; }
.article h1 { font: 900 clamp(40px, 5.5vw, 72px)/1 var(--f-head); margin: 16px 0 18px; }
.article h2 { font: 900 30px/1.1 var(--f-head); margin: 44px 0 12px; }
.article p, .article li { font-size: 18px; }
.article li { margin-bottom: 8px; }
.article .note { border: 1px solid var(--ink); padding: 18px 22px; background: var(--paper-2); font-size: 16px; }
.badge { display: inline-block; padding: 3px 7px; margin-left: 4px; background: var(--green); color: var(--paper); letter-spacing: .14em; font-size: 9.5px; vertical-align: 1px; }
/* интерактивные блоки гайдов */
.g-block { margin: 22px 0; }
.g-cap { margin: 0 0 10px; font-size: 16px; color: var(--ink-2); }
.g-items { display: grid; gap: 10px; margin: 14px 0; }
.icard { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); }
.icard .mini { width: 44px; height: 44px; }
.icard b { font-size: 16px; }
.icard small { display: block; font: 10.5px/1.4 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.icard p { margin: 6px 0 0; font-size: 14.5px !important; line-height: 1.45; color: var(--ink-2); }
.g-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 20px 0; }
.hchip { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--rule); background: var(--paper); transition: border-color .2s, transform .2s; }
.hchip:hover { border-color: var(--ink); transform: translateY(-2px); }
.hchip img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; background: var(--c, #555); }
.hchip b { display: block; font-size: 15px; }
.hchip small { font: 10px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.g-tabs { margin: 22px 0; border: 1px solid var(--ink); background: var(--paper-2); }
.g-tabs__bar { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); }
.g-tabs__bar button {
  flex: 1 1 auto; padding: 12px 14px; border: 0; border-right: 1px solid var(--rule); background: transparent; cursor: pointer;
  font: 11px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
}
.g-tabs__bar button:last-child { border-right: 0; }
.g-tabs__bar button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.g-tabs__panel { padding: 18px 20px; }
.g-tabs__panel > p { margin: 0; }
.g-steps { list-style: none; padding: 0; margin: 22px 0; counter-reset: s; }
.g-steps li { border-left: 2px solid var(--ink); margin: 0 0 0 16px; padding: 0 0 14px 22px; position: relative; }
.g-steps li:last-child { border-left-color: transparent; }
.g-steps summary { cursor: pointer; font: 700 19px/1.3 var(--f-body); list-style: none; display: flex; align-items: center; gap: 12px; margin-left: -40px; }
.g-steps summary::-webkit-details-marker { display: none; }
.g-steps__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--paper); border: 2px solid var(--ink); font: 400 18px/1 var(--f-display); }
.g-steps details[open] .g-steps__n { background: var(--ink); color: var(--paper); }
.g-steps p { margin: 0; padding-top: 8px; font-size: 16.5px !important; color: var(--ink-2); overflow: hidden; }
.g-steps summary:hover .g-steps__n { transform: scale(1.08); }
.g-steps__n { transition: transform .2s, background .3s, color .3s; }
.g-tabs__panel:not([hidden]) { animation: tab-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.g-check { margin: 18px 0 26px; border: 1px solid var(--ink); padding: 14px 18px; background: var(--paper); }
.g-check label { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; cursor: pointer; font-size: 16.5px; }
.g-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green); flex: none; }
.g-check input:checked + span { text-decoration: line-through; color: var(--muted); }
.g-check__foot { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.g-check__bar { flex: 1; height: 4px; background: var(--paper-3); }
.g-check__bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.g-check small { font: 11px var(--f-label); letter-spacing: .1em; color: var(--muted); }
.g-link { background: none; border: 0; padding: 0; cursor: pointer; font: 13px var(--f-body); text-decoration: underline; color: var(--muted); }
.g-quiz { margin: 40px 0 10px; padding: 22px 24px; background: var(--green); color: var(--paper); }
.g-quiz h2 { margin-top: 0 !important; color: var(--paper); }
.g-q { border: 0; padding: 0; margin: 0 0 22px; }
.g-q legend { font: 700 18px/1.35 var(--f-body); margin-bottom: 10px; padding: 0; }
.g-opt {
  display: block; width: 100%; text-align: left; margin: 0 0 6px; padding: 10px 14px; cursor: pointer;
  background: rgba(235,226,208,.08); color: inherit; border: 1px solid rgba(235,226,208,.3); font: 16px var(--f-body);
  transition: background .2s, border-color .2s;
}
.g-opt:hover:not(:disabled) { background: rgba(235,226,208,.18); }
.g-opt:disabled { cursor: default; }
.g-opt.right { background: #2f6b52; border-color: #8fd6ad; }
.g-opt.right::after { content: " ✓"; }
.g-opt.wrong { background: #6e2a24; border-color: #e08b80; }
.g-opt.wrong::after { content: " ✗"; }
.g-why { margin: 8px 0 0; font-size: 15px !important; color: rgba(235,226,208,.85); }
.g-score { font: 700 17px var(--f-body); margin: 0; }
.g-picker { margin: 10px 0 30px; }
.g-picker .g-q { padding: 18px 20px; border: 1px solid var(--ink); background: var(--paper-2); }
.g-picker .g-opt { display: inline-block; width: auto; margin: 0 6px 6px 0; background: var(--paper); border-color: var(--ink); color: var(--ink); }
.g-picker .g-opt:hover { background: var(--paper-3); }
.g-picker .g-opt.picked { background: var(--ink); color: var(--paper); }
.g-picker__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 220px)); gap: 18px; margin: 16px 0; }
.g-calc { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--ink); background: var(--paper-2); margin: 18px 0; }
.g-calc label { display: grid; gap: 6px; font: 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-calc input[type=number] { font: 700 22px var(--f-body); padding: 8px 10px; border: 1px solid var(--ink); background: var(--paper); width: 160px; }
.g-calc input[type=range] { width: 100%; accent-color: var(--red); }
.g-calc__out { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.g-calc__out span { font: 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-calc__val { font: 400 48px/1 var(--f-display); grid-row: span 2; order: -1; }
.g-calc__bar { height: 6px; background: var(--paper-3); }
.g-calc__bar i { display: block; height: 100%; background: var(--red); transition: width .2s; }
/* фото во вкладках гайдов */
.g-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.g-shots figure { margin: 0; }
.g-shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ink); }
.g-shots figcaption { font: 11px/1.4 var(--f-label); letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
/* урна душ: фото → карта → маршрут */
.g-urn { position: relative; margin-bottom: 14px; }
.g-urn__photo, .g-urn__map { position: relative; border: 1px solid var(--ink); overflow: hidden; background: #2a2a2a; }
.g-urn__photo { aspect-ratio: 16 / 9; transition: opacity .6s, transform .8s cubic-bezier(.7,0,.2,1); }
.g-urn__photo img { width: 100%; height: 100%; object-fit: cover; }
.g-urn__map { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .7s .15s, transform .9s .15s cubic-bezier(.2,.8,.2,1); display: grid; place-items: center; background: radial-gradient(circle, #2a221d, #0d0f0d 75%); }
.g-urn__map img, .g-urn__map svg { position: absolute; height: 100%; aspect-ratio: 982 / 988; left: 50%; transform: translateX(-50%); }
.g-urn.map .g-urn__photo { opacity: 0; transform: scale(.85); }
.g-urn.map .g-urn__map { opacity: 1; transform: none; }
.g-urn__spawn { fill: rgba(95, 200, 255, .45); stroke: #a9e6ff; stroke-width: 3; }
.g-urn__pad { fill: none; stroke: #a9e6ff; stroke-width: 6; stroke-dasharray: 9 7; }
.g-urn__pad--goal { stroke: #ff7a4d; }
.g-urn.done .g-urn__pad--goal { fill: rgba(142,43,34,.25); stroke-dasharray: none; animation: ping-pad 1s ease-out 2; transform-origin: 769px 501px; }
@keyframes ping-pad { 50% { transform: scale(1.4); } }
.g-urn__path { fill: none; stroke: #5fc8ff; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(43,159,214,.8)); }
.g-urn__ring { fill: #0d0f0d; stroke: #5fc8ff; stroke-width: 5; filter: drop-shadow(0 0 8px rgba(95,200,255,.9)); }

.g-urn__label { font: 700 40px var(--f-body); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #0d0f0d; stroke-width: 8px; }
.g-urn__cap { margin-top: 8px; font: 700 15px/1.4 var(--f-body); min-height: 1.4em; }
.g-urn__replay { margin-top: 4px; }
/* калькулятор наград */
.g-bounty { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--ink); background: var(--paper); }
.g-bounty label { display: grid; gap: 6px; font: 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-bounty label b { font: 400 28px/1 var(--f-display); color: var(--ink); }
.g-bounty input[type=range] { width: 100%; accent-color: var(--green); }
.g-bounty__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.g-bounty__grid div { border-left: 3px solid var(--green); padding-left: 10px; }
.g-bounty__grid span { display: block; font: 10.5px/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.g-bounty__grid b { font: 400 30px/1.1 var(--f-display); }
.g-bounty__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.g-bounty__table caption { text-align: left; font: 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.g-bounty__table td { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.g-bounty__table td:last-child { text-align: right; font-weight: 700; }
.g-bounty__note { margin: 8px 0 0 !important; font-size: 12.5px !important; color: var(--muted); }
@media (max-width: 520px) { .g-bounty__grid { grid-template-columns: 1fr; } }
/* видеоплеер в гайдах */
.g-video { margin: 10px 0 30px; border: 1px solid var(--ink); background: var(--night); }
.g-video__screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.g-video__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-video__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.g-video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s, transform .6s; }
.g-video__play:hover img { opacity: 1; transform: scale(1.02); }
.g-video__btn {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 6px; font-size: 28px; color: var(--paper);
  background: rgba(142,43,34,.92); box-shadow: 0 0 0 6px rgba(235,226,208,.25); transition: transform .2s;
}
.g-video__play:hover .g-video__btn { transform: scale(1.08); }
.g-video__title { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; background: rgba(13,15,13,.8); color: var(--paper); font: 700 15px var(--f-body); }
.g-video__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: #000; }
.g-video__list button { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px; border: 0; cursor: pointer; background: var(--night-2); color: rgba(235,226,208,.75); text-align: left; font: 13px/1.25 var(--f-body); }
.g-video__list button img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; }
.g-video__list button[aria-selected="true"] { background: var(--red); color: var(--paper); }
.g-video__src { margin: 0 !important; padding: 8px 12px; font-size: 13px !important; color: rgba(235,226,208,.65); }
.g-video__src a { color: var(--paper); text-decoration: underline; }
/* выносливость */
.g-stamina { margin: 14px 0 26px; padding: 18px 20px; border: 1px solid var(--ink); background: var(--paper-2); }
.g-stamina__pips { display: flex; gap: 10px; margin-bottom: 14px; }
.g-stamina__pips i { width: 64px; height: 14px; border: 2px solid var(--ink); background: transparent; transition: background .25s, transform .25s; }
.g-stamina__pips i.on { background: #e0a24f; }
.g-stamina__pips i:not(.on) { transform: scaleY(.7); }
.g-stamina__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.g-stamina__acts button { padding: 9px 14px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; font: 14px var(--f-body); }
.g-stamina__acts button:hover { background: var(--ink); color: var(--paper); }
.g-stamina__acts button.hot { border-color: var(--red); color: var(--red); font-weight: 700; }
.g-stamina__acts button.hot:hover { background: var(--red); color: var(--paper); }
.g-stamina__log { margin: 12px 0 0 !important; font-size: 15px !important; min-height: 1.5em; }
.g-stamina.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
/* тренажёр парирования */
.g-parry { margin: 14px 0 22px; padding: 18px 20px; border: 1px solid var(--ink); background: var(--night); color: var(--paper); }
.g-parry__arena { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden; }
.g-parry__enemy { position: relative; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #2b2721; border: 3px solid #e0a24f; z-index: 2; transition: filter .3s, border-color .3s; }
.g-parry__zone { position: absolute; width: 112px; height: 112px; border-radius: 50%; border: 3px dashed rgba(169,230,255,.8); }
.g-parry__ring { position: absolute; width: 112px; height: 112px; border-radius: 50%; border: 4px solid #e0a24f; transform: scale(2.6); opacity: 0; }
.g-parry__arena.wind .g-parry__ring { opacity: 1; }
.g-parry__arena.wind .g-parry__enemy { border-color: var(--red-2); }
.g-parry__arena.hit .g-parry__enemy { filter: grayscale(1) brightness(.7); border-color: #a9e6ff; }
.g-parry__arena.hit .g-parry__zone { border-style: solid; box-shadow: 0 0 30px rgba(95,200,255,.7); }
.g-parry__arena.early .g-parry__zone, .g-parry__arena.late .g-parry__zone { border-color: var(--red-2); }
.g-parry__arena.late .g-parry__enemy { animation: shake .35s; }
.g-parry__stun { position: absolute; bottom: 14px; left: 50%; width: 200px; margin-left: -100px; height: 6px; background: rgba(235,226,208,.15); opacity: 0; }
.g-parry__stun i { display: block; height: 100%; width: 100%; background: #a9e6ff; transform-origin: left; }
.g-parry__arena.hit .g-parry__stun { opacity: 1; }
.g-parry__arena.hit .g-parry__stun i { animation: stun 2.75s linear forwards; }
@keyframes stun { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.g-parry__ui { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.g-parry__ui .btn--ghost { color: var(--paper); border-color: rgba(235,226,208,.6); }
.g-parry__msg { text-align: center; margin: 12px 0 4px !important; font-size: 16px !important; min-height: 1.5em; }
.g-parry__score { text-align: center; margin: 0 !important; font: 11px var(--f-label) !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(235,226,208,.6); }
.g-img { margin: 18px 0; }
.g-img img { width: 100%; border: 1px solid var(--ink); }
.g-img figcaption { font: 12px/1.4 var(--f-label); color: var(--muted); margin-top: 6px; }
.article-cover { aspect-ratio: 21 / 9; overflow: hidden; margin: 10px 0 20px; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   ПРЕЛОАДЕР «РАЗВОРОТ КОМИКСА»
   ========================================================================== */
#loader { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #ebe2d0; transition: background-color .4s .45s; }
#loader::before { /* бумажная фактура в зазорах между панелями */
  content: ""; position: absolute; inset: 0; opacity: .45; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity .4s .45s;
}
#loader.open { pointer-events: none; background-color: transparent; transition-delay: 0s; }
#loader.open::before { opacity: 0; transition-delay: 0s; }
#loader.gone { display: none; }
.cpanel {
  position: absolute; will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.2, .8, .25, 1), opacity .3s;
  transition-delay: calc(var(--i) * 45ms);
}
/* Пока кадр не раскодирован, панель — бумажная, а не чёрная: иначе при обновлении страницы мелькает тёмный экран */
.cpanel__in { position: absolute; inset: 0; clip-path: var(--clip); background: #d6c9ad; }
.cpanel__in img {
  position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover;
  animation: comic-drift 7s ease-in-out infinite alternate;
  opacity: 0; transition: opacity .25s;
}
.cpanel__in img.ok { opacity: 1; }
.cpanel__edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cpanel__edge polygon { fill: none; stroke: #15130f; stroke-width: 6; vector-effect: non-scaling-stroke; }
#loader.open .cpanel { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); opacity: 0; transition-timing-function: cubic-bezier(.6, 0, .8, .4), linear; transition-duration: .55s, .45s; }
.loader__center {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 40px)); display: grid; justify-items: center; gap: 14px; text-align: center;
  color: #ebe2d0; transition: opacity .3s .55s;
}
#loader.open .loader__center { opacity: 0; transition: opacity .15s 0s; }
.loader__seal {
  width: 76px; height: 76px; padding: 11px; border-radius: 50%; color: #ebe2d0;
  background: #15130f; box-shadow: 0 0 0 3px #ebe2d0, 0 10px 30px rgba(0,0,0,.6);
}
.loader__seal .eye { width: 100%; height: 100%; animation: spin 6s linear infinite; }
.loader__title { font: 400 clamp(30px, 4vw, 54px)/1 "Oranienbaum", serif; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 18px rgba(0,0,0,.8); }
.loader__bar { width: 100%; height: 3px; background: rgba(235,226,208,.25); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 40%; background: #ebe2d0; animation: loadbar 1.1s ease-in-out infinite; }
.loader__tip { font: 14px/1.45 var(--f-body); padding: 8px 14px; background: rgba(13,15,13,.82); border: 1px solid rgba(235,226,208,.3); }
@media (max-width: 700px) { .cpanel__edge polygon { stroke-width: 4; } }
@keyframes loadbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes comic-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }

/* ==========================================================================
   АНИМАЦИИ
   ========================================================================== */
@keyframes rise { to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes fog { from { transform: translate(-3%, 2%); opacity: .7; } to { transform: translate(4%, -3%); opacity: 1; } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
}

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1100px) {
  .nav { gap: 20px; }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__col + .footer__col { border-left: 0; padding-left: 0; }
  .profile { grid-template-columns: 300px 1fr; gap: 36px; }
  .article-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .masthead__row { grid-template-columns: auto 1fr auto; }
  .masthead__side .nav { display: none; }
  .masthead__side--left { order: 3; justify-content: flex-end; }
  .burger { display: block; }
  .logo { order: 1; }
  .masthead__side--right { order: 2; }
  .masthead.open .mobile-nav { display: flex; }
  .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--ink); margin-top: 12px; }
  .mobile-nav a { font: 900 28px/1.3 var(--f-head); }
  .ribbon { letter-spacing: .18em; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { margin: 0 calc(-1 * var(--gutter)); height: 64vh; min-height: 420px; }
  .hero__frame { -webkit-mask: url("../img/torn-h.svg") 0 0 / 100% 40px no-repeat, linear-gradient(#000, #000) 0 38px / 100% 100% no-repeat; mask: url("../img/torn-h.svg") 0 0 / 100% 40px no-repeat, linear-gradient(#000, #000) 0 38px / 100% 100% no-repeat; }
  .hero__frame img { object-position: 50% 40%; }
  .hero__art { height: auto !important; min-height: 0 !important; }
  .newheroes { position: relative; inset: auto; padding: 56px 16px 28px; align-items: stretch; }
  .newheroes__cards { width: 100%; }
  .newheroes__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__title .seal { display: none; }
  .hero__foot { display: none; }
  .trio { grid-template-columns: 1fr; }
  .trio__item, .trio__item:first-child, .trio__item:last-child { padding: 24px 0; }
  .trio__item + .trio__item { border-left: 0; border-top: 1px solid var(--rule); }
  .guides { grid-template-columns: 1fr; }

  .section__head { flex-direction: column; align-items: flex-start; }
  .city__stats { gap: 22px; flex-wrap: wrap; }
  .pin { display: none; }
  .profile { grid-template-columns: 1fr; }
  .profile__card { position: static; max-width: 300px; }
  .ability { grid-template-columns: 44px 1fr; padding: 14px; }
  .ability__icon { width: 44px; height: 44px; }
  .ability__icon img { width: 28px; height: 28px; }
  .ability__ups { grid-template-columns: 1fr; }
  .news, .news--top { grid-template-columns: 1fr; gap: 16px; padding: 14px; box-shadow: 5px 5px 0 var(--ink); }
  #news { gap: 30px; }
  .g-picker__cards { grid-template-columns: repeat(2, 1fr); }
  .g-tabs__bar button { flex-basis: 50%; border-bottom: 1px solid var(--rule); }
  .article-list { grid-template-columns: 1fr; }
  .cta__ghost { display: none; }
  .table .hide-sm { display: none; }
  .stamp { display: none; }
}
@media (min-width: 861px) { .mobile-nav { display: none; } }
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid .logo { grid-column: 1 / -1; font-size: 34px; }
  .footer__bottom { flex-direction: column; }
  .dossier { width: 150px; left: 6%; }
  .hero__ctas .btn { flex: 1; justify-content: center; }
  .hero__title { font-size: 15vw; }
  .kicker { letter-spacing: .18em; }
  .item { grid-template-columns: 48px 1fr auto; padding: 14px; }
  .item__icon { width: 48px; height: 48px; }
}

/* ================= Карта предметов (builds.html) ================= */
/* «Карта предметов»: прирост к победе от предмета с поправкой на момент покупки. */

/* выбор героя */
.wpa-pick { position: relative; margin-top: 26px; display: inline-block; }
.wpa-pick__btn { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border: 2px solid var(--ink); background: var(--paper-2); cursor: pointer; text-align: left; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.wpa-pick__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.wpa-pick__btn img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--ink); background: var(--c, var(--night)); }
.wpa-pick__btn b { font: 900 24px/1 var(--f-head); display: block; }
.wpa-pick__btn span { font-size: 14px; color: var(--muted); }
.wpa-pick__btn .nav__caret { font-size: 18px; margin-left: 10px; transition: transform .2s; }
.wpa-pick.open .wpa-pick__btn .nav__caret { transform: rotate(180deg); animation: none; }
.wpa-pick__menu {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 12px); width: min(760px, calc(100vw - 32px)); padding: 14px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s;
}
.wpa-pick.open .wpa-pick__menu { opacity: 1; visibility: visible; transform: none; }
.wpa-pick__menu input { width: 100%; margin-bottom: 12px; }
.wpa-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; }
.wpa-pick__grid button { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1px solid transparent; background: none; cursor: pointer; font: 12px/1.2 var(--f-body); color: var(--ink); }
.wpa-pick__grid button img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--ink); background: var(--c); transition: transform .15s; }
.wpa-pick__grid button:hover img { transform: scale(1.08); }
.wpa-pick__grid button:hover, .wpa-pick__grid button[aria-current="true"] { border-color: var(--ink); background: var(--paper-2); }
.wpa-pick__grid button[aria-current="true"] { color: var(--red); font-weight: 700; }


.wpa-bar { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin: 22px 0 14px; }
.wpa-bar .filters { margin: 0; }
.wpa-bar small { font: 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.wpa-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.wpa-check input { accent-color: var(--red); width: 16px; height: 16px; }

.wpa-card { position: relative; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--ink); }
.wpa-chart { position: relative; height: clamp(440px, 62vh, 640px); overflow: hidden; touch-action: pan-y; }
.wpa-plot { position: absolute; left: 62px; right: 18px; top: 18px; bottom: 50px; }
.wpa-q { position: absolute; }
.wpa-q span { position: absolute; font: 700 11px/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; padding: 8px 10px; }
.wpa-q--good { background: rgba(47, 107, 82, .10); } .wpa-q--good span { color: var(--green-2); top: 0; }
.wpa-q--bad { background: rgba(142, 43, 34, .08); } .wpa-q--bad span { color: var(--red); bottom: 0; }
.wpa-q--late.wpa-q--good { background: rgba(168, 134, 85, .16); } .wpa-q--late.wpa-q--good span { color: #7a5a2b; }
.wpa-q--late span { right: 0; text-align: right; }
.wpa-grid { position: absolute; inset: 0; pointer-events: none; }
.wpa-grid i { position: absolute; background: rgba(21, 19, 15, .12); }
.wpa-grid i.y { left: 0; right: 0; height: 1px; } .wpa-grid i.x { top: 0; bottom: 0; width: 1px; }
.wpa-grid i.zero { height: 0; background: none; border-top: 2px dashed var(--ink); }
.wpa-tick { position: absolute; font: 12px var(--f-label); color: var(--muted); white-space: nowrap; }
.wpa-tick.y { left: -58px; width: 50px; text-align: right; transform: translateY(-50%); }
.wpa-tick.x { top: calc(100% + 8px); transform: translateX(-50%); }
.wpa-axis { position: absolute; font: 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.wpa-axis.x { left: 50%; bottom: 8px; transform: translateX(-50%); }
.wpa-axis.y { left: 14px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; }

.wpa-dot {
  position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 2px; display: block;
  background: var(--night); border: 2px solid var(--slot); box-shadow: 2px 2px 0 var(--ink);
  transition: left .5s cubic-bezier(.2, .8, .25, 1), top .5s cubic-bezier(.2, .8, .25, 1), opacity .3s, transform .15s;
  z-index: 2;
}
.wpa-dot img { width: 100%; height: 100%; display: block; }
.wpa-dot:hover { transform: scale(1.35); z-index: 5; }
.wpa-dot.weak { opacity: .38; }
.wpa-dot.hide { opacity: 0; pointer-events: none; transform: scale(.4); }
.wpa-dot.clip::after { content: attr(data-clip); position: absolute; left: 50%; transform: translateX(-50%); font: 700 10px var(--f-label); color: var(--red); white-space: nowrap; }
.wpa-dot.clip.up::after { bottom: calc(100% + 3px); color: var(--green-2); }
.wpa-dot.clip.down::after { top: calc(100% + 3px); }

.wpa-card, .wpa-cats { transition: opacity .25s; }
.wpa-panel.is-loading .wpa-card, .wpa-panel.is-loading .wpa-cats { opacity: .35; }

.wpa-bar [hidden] { display: none !important; }
.wpa-tiers { display: none; position: relative; padding: 18px; gap: 10px; overflow: hidden; }
.wpa-card.is-tiers .wpa-chart { display: none; }
.wpa-card.is-tiers .wpa-tiers { display: grid; }
.wpa-card:not(.is-tiers) .wpa-chart, .wpa-card.is-tiers .wpa-tiers { animation: tab-in .3s; }
.wpa-ghost { position: absolute; z-index: 3; pointer-events: none; margin: 0; }
.wpa-tier { display: grid; grid-template-columns: 92px 1fr; border: 1px solid var(--ink); background: var(--paper); }
.wpa-tier__name { display: grid; place-items: center; text-align: center; font: 400 30px/1 var(--f-display); color: var(--paper); background: var(--t); padding: 8px; }
.wpa-tier__name small { display: block; font: 10px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.wpa-tier__items { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; align-content: center; min-height: 60px; }
.wpa-tier__items .wpa-dot { position: relative; margin: 0; transition: none; }

.wpa-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 18px; border-top: 1px solid var(--ink); font-size: 13px; color: var(--ink-2); }
.wpa-legend i { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--slot); background: var(--night); vertical-align: -1px; margin-right: 6px; }

.wpa-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.wpa-cat { border: 1px solid var(--ink); background: var(--paper-2); padding: 16px; }
.wpa-cat h3 { margin: 0 0 4px; font: 900 20px/1.1 var(--f-head); }
.wpa-cat p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.wpa-cat ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wpa-cat li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.wpa-cat li .mini { width: 30px; height: 30px; }
.wpa-cat li b { font-variant-numeric: tabular-nums; }

/* ---------- «Как это считается»: пошаговый разбор ---------- */
.wpa-howbtn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 10px 18px 10px 10px;
  border: 2px solid var(--ink); background: var(--paper); cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  font: 700 12px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.wpa-howbtn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--paper-2); }
.wpa-howbtn i { font-style: normal; transition: transform .2s; } .wpa-howbtn:hover i { transform: translateX(4px); }
.how__q { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: var(--paper); font: 400 18px/1 var(--f-display); letter-spacing: 0; }

.how {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto;
  border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); box-shadow: 10px 10px 0 var(--ink);
}
.how[open] { animation: how-in .28s cubic-bezier(.2, .8, .25, 1); }
.how::backdrop { background: rgba(13, 15, 13, .55); backdrop-filter: blur(2px); }
@keyframes how-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.how__close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font: 400 30px/1 var(--f-display); color: var(--ink); }
.how__close:hover { color: var(--red); }
.how__head { display: flex; align-items: center; gap: 14px; padding: 18px 52px 0 22px; }
.how__head .label { display: block; margin-bottom: 2px; }
.how__no { font: 400 48px/.8 var(--f-display); color: var(--red); }
.how__title { margin: 0; font: 900 clamp(22px, 2.6vw, 28px)/1.05 var(--f-head); }
.how__text { margin: 8px 22px 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); min-height: 4.5em; }
.how__stage { position: relative; margin: 12px 22px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 300px; overflow: hidden; }
.how__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 22px 16px; }
.how__dots { display: flex; gap: 8px; }
.how__dots button { width: 28px; height: 6px; border: 1px solid var(--ink); background: none; cursor: pointer; padding: 0; transition: background .2s; }
.how__dots button[aria-current="true"] { background: var(--ink); }
.how__btn { padding: 10px 18px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font: 700 12px var(--f-label); letter-spacing: .18em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.how__btn:hover { background: var(--red); color: var(--paper); }
.how__btn:disabled { opacity: .35; pointer-events: none; }
.how__btn--next { background: var(--ink); color: var(--paper); }
.how-scene { position: absolute; inset: 0; padding: 18px 0 10px; }
.how-scene.in { animation: tab-in .35s; }
.tagline { font: 700 10px var(--f-label); letter-spacing: .16em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.tagline--good { background: var(--green-2); } .tagline--bad { background: var(--red); }

/* ранжирование: строки с полосами, умеют переставляться */
.rank { position: relative; height: 264px; }
.rank__row { position: absolute; left: 0; right: 0; height: 40px; display: grid; grid-template-columns: 104px 36px 1fr 64px; gap: 10px; align-items: center; transition: top .9s cubic-bezier(.6, 0, .2, 1); }
.rank__tag { justify-self: end; }
.rank__row .mini { width: 36px; height: 36px; }
.rank__track { position: relative; height: 12px; background: rgba(21, 19, 15, .1); }
.rank__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width .8s cubic-bezier(.2, .8, .25, 1), left .8s cubic-bezier(.2, .8, .25, 1), background .4s; }
.rank__zero { position: absolute; top: -6px; bottom: -6px; left: 50%; border-left: 2px dashed var(--ink); opacity: 0; transition: opacity .4s; }
.rank--diverge .rank__zero { opacity: 1; }
.rank__val { font: 700 18px var(--f-head); font-variant-numeric: tabular-nums; text-align: right; }
.rank__head { position: absolute; right: 0; top: -20px; font: 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* фон покупки: два кольца */
.rings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 100%; align-items: center; justify-items: center; text-align: center; }
.ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(21, 19, 15, .12) 0); transition: --p 1.2s; }
.ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--paper-2); }
.ring b { position: relative; font: 400 44px/1 var(--f-display); }
.ring small { position: relative; display: block; font: 10px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rings__cap { display: grid; justify-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.rings__cap .mini { width: 44px; height: 44px; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

/* окна покупки на шкале времени */
.tline { position: relative; height: 100%; margin: 0 30px; }
.tline__axis { position: absolute; left: 0; right: 0; bottom: 34px; border-top: 2px solid var(--ink); }
.tline__win { position: absolute; bottom: 34px; top: 10px; border-left: 1px dashed rgba(21, 19, 15, .25); }
.tline__lbl { position: absolute; bottom: 8px; transform: translateX(-50%); font: 11px var(--f-label); color: var(--muted); }
.tline__hl { position: absolute; bottom: 34px; top: 10px; background: rgba(168, 134, 85, .22); border: 2px solid var(--gold); border-bottom: 0; opacity: 0; transition: opacity .5s .2s; }
.tline__hl span { position: absolute; top: -2px; left: 50%; transform: translate(-50%, -100%); }
.tline.go .tline__hl { opacity: 1; }
.tline__item { position: absolute; width: 40px; height: 40px; margin-left: -20px; transform: translateY(-260px); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .25, 1), opacity .4s; }
.tline.go .tline__item { transform: none; opacity: 1; }
.tline__item .mini { width: 40px; height: 40px; }
.tline__item.main .mini { outline: 3px solid var(--red); outline-offset: 2px; }

/* сравнение двух винрейтов и разница */
.gap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; height: 100%; }
.gap__bars { display: grid; gap: 22px; }
.gap__row { display: grid; grid-template-columns: 170px 1fr 60px; gap: 10px; align-items: center; font-size: 14px; }
.gap__row .rank__track { height: 22px; }
.gap__mark { position: absolute; top: -10px; bottom: -10px; border-left: 2px solid var(--ink); left: 50%; }
.gap__mark::after { content: "50%"; position: absolute; top: -16px; left: -12px; font: 10px var(--f-label); color: var(--muted); }
.gap__res { text-align: center; opacity: 0; transform: scale(.6); transition: opacity .4s .8s, transform .5s .8s cubic-bezier(.2, 1.6, .4, 1); }
.gap.go .gap__res { opacity: 1; transform: none; }
.gap__res b { display: block; font: 400 60px/1 var(--f-display); }
.gap__res span { font: 10px var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* погрешность */
.ci { display: grid; gap: 16px; }
.ci__row { display: grid; grid-template-columns: 170px 1fr 104px; gap: 10px; align-items: center; font-size: 13px; }
.ci__row .mini { width: 30px; height: 30px; flex: none; }
.ci__axis { position: relative; height: 40px; border-bottom: 1px solid rgba(21, 19, 15, .3); }
.ci__zero { position: absolute; top: -8px; bottom: -8px; left: 50%; border-left: 2px dashed var(--ink); }
.ci__bar { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: var(--cc); transform: scaleX(0); transition: transform .7s .2s; }
.ci__bar::before, .ci__bar::after { content: ""; position: absolute; top: -8px; height: 20px; border-left: 2px solid var(--cc); }
.ci__bar::before { left: 0; } .ci__bar::after { right: 0; }
.ci__pt { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--cc); border: 2px solid var(--ink); transition: left .7s cubic-bezier(.2, .8, .25, 1); }
.ci.go .ci__bar { transform: scaleX(1); }
.ci__coin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.ci__coin div { border: 1px solid var(--ink); padding: 6px; background: var(--paper); }
.ci__coin b { display: block; font: 400 24px/1 var(--f-display); }
.ci__coin span { font-size: 12px; color: var(--muted); }

@media (max-width: 700px) {
  .wpa-plot { left: 46px; right: 10px; }
  .wpa-tick.y { left: -44px; width: 38px; }
  .wpa-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .wpa-q span { font-size: 9px; letter-spacing: .1em; }
  .how__head { padding-left: 14px; } .how__foot { padding: 0 14px 14px; } .how__text { margin: 8px 14px 0; } .how__stage { margin: 10px 14px; height: 320px; }
  .how__dots button { width: 16px; } .how__btn { padding: 8px 10px; letter-spacing: .08em; }
  .rank__row { grid-template-columns: 0 34px 1fr 60px; } .rank__tag { display: none; }
  .gap { grid-template-columns: 1fr; } .gap__row, .ci__row { grid-template-columns: 110px 1fr 56px; }
  .rings .ring { width: 130px; height: 130px; } .ci__coin { grid-template-columns: repeat(2, 1fr); }
}

/* «Когда покупать»: панель по клику на предмет */
.cv { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.cv[open] { animation: cv-in .25s cubic-bezier(.2, .8, .25, 1); }
.cv::backdrop { background: rgba(13, 15, 13, .55); backdrop-filter: blur(2px); }
@keyframes cv-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cv__close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font: 400 30px/1 var(--f-display); color: var(--ink); }
.cv__close:hover { color: var(--red); }
.cv__head { display: flex; align-items: center; gap: 14px; padding: 18px 52px 0 22px; }
.cv__head .mini { width: 52px; height: 52px; }
.cv__title { margin: 0; font: 900 clamp(22px, 2.6vw, 28px)/1.05 var(--f-head); }
.cv__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cv__verdict { margin: 12px 22px 0; font-size: 16px; line-height: 1.45; }
.cv__verdict b { font-weight: 700; }
.cv__chart { margin: 8px 14px 0; }
.cv__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cv__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 22px 0; }
.cv__phase { border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; text-align: center; }
.cv__phase small { display: block; font: 10px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cv__phase b { font: 400 26px/1.2 var(--f-display); }
.cv__phase.best { outline: 3px solid var(--green-2); outline-offset: 1px; }
.cv__foot { margin: 12px 22px 18px; font-size: 12px; color: var(--muted); }
.cv .ax { font: 11px var(--f-label); fill: var(--muted); }
.cv .zero { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.cv .gl { stroke: rgba(21, 19, 15, .12); }
.cv .band { fill: rgba(168, 134, 85, .25); }
.cv .line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cv .pt { stroke: var(--ink); stroke-width: 1.5; }
@media (max-width: 700px) {
  .cv__phases { grid-template-columns: 1fr; } .cv__head { padding-left: 14px; } .cv__verdict, .cv__foot, .cv__phases { margin-left: 14px; margin-right: 14px; } }

/* «Предмет → герои»: выбранный предмет и его прирост у всех героев */
.ih-pick { margin-top: 22px; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink); padding: 14px; }
.ih-pick input { width: 100%; margin-bottom: 10px; }
.ih-icons { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow: auto; }
.ih-icons button { padding: 2px; border: 2px solid transparent; background: none; cursor: pointer; }
.ih-icons button:hover { border-color: var(--ink); }
.ih-icons button[aria-current="true"] { border-color: var(--red); background: var(--paper); }
.ih-icons .mini { width: 38px; height: 38px; display: block; }
.ih-head { display: flex; align-items: center; gap: 14px; margin: 26px 0 6px; }
.ih-head .mini { width: 56px; height: 56px; }
.ih-head h2 { margin: 0; font: 900 clamp(24px, 3vw, 32px)/1.05 var(--f-head); }
.ih-head small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ih-verdict { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ih-verdict b { color: var(--ink); }
.ih-card { border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--ink); padding: 14px 18px 8px; }
.ih-bar { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.ih-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.ih-check input { accent-color: var(--red); width: 16px; height: 16px; }
.ih-row { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center; padding: 3px 0; font-size: 14px; }
.ih-row a { display: flex; gap: 8px; align-items: center; color: var(--ink); text-decoration: none; }
.ih-row a img { width: 28px; height: 28px; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); background: var(--c); }
.ih-row a:hover { color: var(--red); }
.ih-track { position: relative; height: 18px; }
.ih-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 2px dashed var(--ink); }
.ih-fill { position: absolute; top: 3px; bottom: 3px; }
.ih-whisk { position: absolute; top: 8px; height: 2px; background: var(--ink); opacity: .65; }
.ih-whisk::before, .ih-whisk::after { content: ""; position: absolute; top: -4px; height: 10px; border-left: 2px solid var(--ink); }
.ih-whisk::after { right: 0; }
.ih-row.weak .ih-fill { opacity: .4; }
.ih-val { font: 700 15px var(--f-head); font-variant-numeric: tabular-nums; }
.ih-val small { font: 12px var(--f-body); color: var(--muted); font-weight: 400; margin-left: 6px; }
/* Выбор предмета во вкладке «По предмету»: иконка выскакивает, заголовок и вывод выезжают,
   строки героев появляются по очереди, полоски прироста вырастают от нулевой линии. */
.ih-icons button { transition: transform .15s; }
.ih-icons button:hover { transform: translateY(-2px); }
.ih-icons button[aria-current="true"] { animation: ih-ring 1.6s ease-out infinite; }
.ih-anim .ih-head .mini { animation: ih-pop .55s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.ih-anim .ih-head h2, .ih-anim .ih-head small { animation: ih-slide .45s ease-out backwards .08s; }
.ih-anim .ih-verdict { animation: ih-fade .5s ease-out backwards .18s; }
.ih-anim .ih-row { animation: ih-slide .4s ease-out backwards; animation-delay: calc(.2s + var(--i, 0) * 25ms); }
.ih-anim .ih-fill { animation: ih-grow .6s cubic-bezier(.2, .8, .25, 1) backwards; animation-delay: calc(.3s + var(--i, 0) * 25ms); }
.ih-fill.pos { transform-origin: left center; }
.ih-fill.neg { transform-origin: right center; }
.ih-anim .ih-whisk, .ih-anim .ih-val { animation: ih-fade .4s ease-out backwards; animation-delay: calc(.55s + var(--i, 0) * 25ms); }
@keyframes ih-pop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
@keyframes ih-slide { from { transform: translateX(-14px); opacity: 0; } }
@keyframes ih-fade { from { opacity: 0; } }
@keyframes ih-grow { from { transform: scaleX(0); } }
@keyframes ih-ring { 0% { box-shadow: 0 0 0 0 rgba(178, 58, 44, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(178, 58, 44, 0); } }
@media (prefers-reduced-motion: reduce) { .ih-anim *, .ih-icons button { animation: none !important; } }
@media (max-width: 700px) { .ih-row { grid-template-columns: 110px 1fr 90px; } .ih-val small { display: none; } }
.wpa-tabs { margin-top: 22px; }
.wpa-tabs[hidden], .wpa-pick[hidden] { display: none; }

/* ==========================================================================
   ПОИСК ИГРОКОВ И МАТЧЕЙ, СТРАНИЦЫ ИГРОКА И МАТЧА (assets/js/player.js)
   ========================================================================== */
.psearch { position: relative; display: flex; align-items: center; }
.psearch svg { position: absolute; left: 12px; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; pointer-events: none; }
.psearch input {
  width: 340px; padding: 10px 14px 10px 38px; border: 1.5px solid var(--ink); background: transparent;
  font: 16px var(--f-body); color: var(--ink); transition: width .25s, background .2s, box-shadow .2s;
}
.psearch input:focus { width: 380px; outline: none; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.psearch input::placeholder { color: var(--muted); }
/* подсказки при вводе */
.psug {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max(100%, 320px); max-height: 60vh; overflow: auto;
  border: 2px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--ink); animation: tab-in .15s;
}
.psug[hidden] { display: none; }
.psug a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid rgba(21, 19, 15, .1); color: var(--ink); }
.psug a[aria-selected="true"] { background: var(--paper-2); }
.psug a[aria-selected="true"] b { color: var(--red); }
.psug img, .psug__ico { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--ink); }
.psug__ico { display: grid; place-items: center; font-style: normal; font-size: 17px; background: var(--ink); color: var(--paper); }
.psug b { display: block; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psug small { font-size: 12px; color: var(--muted); }
.psug .psug__all { display: block; padding: 9px 12px; font: 700 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); border-bottom: 0; }
.psug__empty { padding: 10px 12px; font: italic 14px var(--f-body); color: var(--muted); }
.psug__h { padding: 8px 12px 6px; font: 700 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: #8a6312; border-bottom: 1px solid var(--rule); }
.psug__fav { position: relative; }
.psug__fav a { padding-right: 38px; }
.psug__del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: none; cursor: pointer; font: 400 22px/1 var(--f-display); color: var(--muted); }
.psug__del:hover { color: var(--red); }

/* звёздочка «в избранное» на странице игрока */
.pl-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pl-fav {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--ink); background: var(--paper);
  cursor: pointer; font: 700 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: background .2s, color .2s, transform .15s, box-shadow .15s;
}
.pl-fav i { font-style: normal; font-size: 18px; line-height: 1; color: #b07a18; display: inline-block; }
.pl-fav:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.pl-fav[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pl-fav[aria-pressed="true"] i { color: #e9c46a; }
.masthead__side--right .psug { left: auto; right: 0; }
.psearch--mobile { position: relative; margin-bottom: 10px; }
.psearch--mobile .psug { width: 100%; }
.psearch--mobile input { width: 100%; padding-left: 10px; font-size: 16px; }
.psearch--mobile input:focus { width: 100%; }
@media (max-width: 860px) { .masthead__side .psearch:not(.psearch--mobile) { display: none; } }
/* На средних экранах шапке тесно: уже промежутки, у счётчика онлайна только число */
@media (max-width: 1480px) { .masthead__side { gap: 20px; } .masthead .nav { gap: 22px; } .online span { display: none; } .psearch input { width: 290px; } .psearch input:focus { width: 320px; } }
@media (max-width: 1240px) { .masthead__side { gap: 16px; } .masthead .nav { gap: 16px; } .masthead .nav a { font-size: 15px; } .masthead__side--right .online { display: none; } .psearch input { width: 250px; font-size: 15px; } .psearch input:focus { width: 280px; } }
/* Совсем узко (до перехода на мобильное меню) — поиск сворачивается в лупу и раскрывается по клику */
@media (min-width: 861px) and (max-width: 1060px) {
  .masthead__side--right .psearch input { width: 34px; padding-right: 0; cursor: pointer; }
  .masthead__side--right .psearch input::placeholder { color: transparent; }
  .masthead__side--right .psearch input:focus { width: 230px; padding-right: 10px; cursor: text; }
  .masthead__side--right .psearch input:focus::placeholder { color: var(--muted); }
}

/* поиск */
.sr { display: grid; gap: 10px; max-width: 760px; margin-top: 30px; }
.sr-h { margin: 18px 0 4px; font: 700 11px var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sr-q { color: var(--red); }
.sr-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.sr-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.sr-card img, .sr-ico { width: 52px; height: 52px; object-fit: cover; border: 1px solid var(--ink); }
.sr-ico { display: grid; place-items: center; font-size: 26px; background: var(--ink); color: var(--paper); }
.sr-card b { display: block; font: 900 19px/1.15 var(--f-head); }
.sr-card small { font-size: 13px; color: var(--muted); }

/* общее для страниц игрока и матча */
.pl { margin-top: 34px; }
.pl-loading { display: flex; align-items: center; gap: 14px; padding: 60px 0; font: italic 18px var(--f-head); color: var(--muted); }
.pl-loading .eye { width: 34px; height: 34px; animation: spin 3s linear infinite; }
.pl-empty { padding: 40px 0; max-width: 560px; }
.pl-empty b { display: block; font: 900 28px var(--f-head); margin-bottom: 8px; }
.pl-empty p { color: var(--ink-2); margin: 0 0 18px; }
.pl-muted { color: var(--muted); font-style: italic; }
.pl-head, .mt-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 22px;
  border: 2px solid var(--ink); border-top: 7px solid var(--red); background: var(--paper-2); box-shadow: 7px 7px 0 var(--ink);
}
.pl-ava { width: 112px; height: 112px; object-fit: cover; border: 2px solid var(--ink); background: var(--night); }
.pl-name { margin: 4px 0 6px; font: 900 clamp(30px, 4vw, 52px)/1 var(--f-head); word-break: break-word; }
.pl-meta { font-size: 14px; color: var(--muted); }
.pl-meta a { color: var(--red); }
.pl-rank { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pl-rank small { font: 10px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.rk { display: inline-flex; align-items: center; gap: 8px; }
.rk img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.rk--big { flex-direction: column; gap: 4px; }
.rk--big img { width: 92px; height: 92px; }
.rk--big b { font: 900 18px/1 var(--f-head); color: var(--ink); border-bottom: 3px solid var(--rc); padding-bottom: 2px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; margin-top: 30px; align-items: start; }
.pl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--ink); }
.pl-bar .filters { margin: 0 0 8px; }
.pl-tabs { display: flex; }
.pl-tabs button { padding: 10px 20px; border: 2px solid transparent; border-bottom: 0; margin-bottom: -2px; background: none; cursor: pointer; font: 700 12px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pl-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); background: var(--paper-2); }
.pl-side { display: grid; gap: 18px; }
.pl-card { padding: 16px; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 5px 5px 0 var(--ink); }
.pl-card h3 { margin: 0 0 12px; font: 900 19px/1.1 var(--f-head); }
.pl-card h3 small { display: block; margin-top: 3px; font: 10px var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-tile { padding: 10px 12px; border: 1px solid var(--ink); background: var(--paper); }
.pl-tile small { display: block; margin-bottom: 4px; font: 700 10px var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
/* Только прямые потомки: внутри числа есть свои span для анимации — им нужен стиль числа, а не подписи */
.pl-tile > b { display: block; font: 900 26px/1.05 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; white-space: nowrap; }
.pl-tile > span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.pl-tile > span span { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-tile--wr > b { font-size: 38px; }
.pl-tile--wr.good > b { color: var(--green-2); }
.pl-tile--wr.bad > b { color: var(--red); }
/* Винрейт: полоска снизу вместо заливки всей плитки — число на чистом фоне читается лучше */
/* Полоса — фоном самой плитки: --p объявлена без наследования (чтобы анимировалась), и псевдоэлемент её бы не видел.
   Слева 0%, справа 100%; заливка растёт до винрейта. */
.pl-tile--wr {
  --wrc: var(--green-2);
  grid-column: 1 / -1; padding-bottom: 20px;
  background:
    linear-gradient(90deg, var(--wrc) calc(var(--p) * 1%), rgba(21, 19, 15, .14) calc(var(--p) * 1%)) left 12px bottom 8px / calc(100% - 24px) 6px no-repeat,
    var(--paper);
}
.pl-tile--wr.bad { --wrc: var(--red); }
.pl-dl { margin: 0; display: grid; gap: 6px; }
.pl-dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--rule); font-size: 14px; }
.pl-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-form { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.pl-form a { display: grid; place-items: center; aspect-ratio: 1; font: 700 10px var(--f-label); color: var(--paper); }
.pl-form a.w { background: var(--green-2); } .pl-form a.l { background: var(--red); }
.pl-th { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(21, 19, 15, .1); }
.pl-th img, .pl-hcell img, .pm-hero, .mt-pl > img { width: 38px; height: 38px; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); background: var(--c, var(--night)); }
.pl-th b { display: block; font-size: 14px; } .pl-th small { font-size: 12px; color: var(--muted); }
/* любимые предметы: те же строки, что у героев, первый предмет — крупнее */
/* У картинок предметов свой фон, поэтому цветное кольцо слота тут спорит с иконкой —
   вместо него тонкая тёмная рамка точно по краю картинки. */
.pl-ti .mini { width: 38px; height: 38px; box-sizing: border-box; background: none; box-shadow: none; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.pl-ti .mini img { width: 100%; height: 100%; border: 0; border-radius: 0; background: none; object-position: center; }
.pl-ti-f { margin: -4px 0 8px; gap: 6px; }
.pl-ti-f .chip { padding: 4px 10px; font-size: 10px; }
.pl-ti:hover b { color: var(--red); }
.pl-ti--top { grid-template-columns: 56px 1fr auto; padding: 4px 0 10px; }
.pl-ti--top .mini { width: 52px; height: 52px; border-width: 2px; }
.pl-ti--top .label { display: block; font-size: 9.5px; color: #8a6312; margin-bottom: 1px; }
.pl-ti--top b { font: 900 17px/1.15 var(--f-head); }
.pl-title { font: italic 500 .42em/1.2 var(--f-head); color: #8a6312; letter-spacing: 0; white-space: nowrap; }
.slot-egg { --slot: #e2b33c; }
.pl-ti--egg .mini { animation: egg-glow 2.4s ease-in-out infinite; }
.pl-ti--egg b { color: #8a6312; }
.pl-ti--egg .mini { border-color: #8a6312; }
@keyframes egg-glow { 50% { box-shadow: 0 0 12px 3px rgba(242, 201, 76, .7); } }
@media (prefers-reduced-motion: reduce) { .pl-ti--egg .mini { animation: none; } }
.pl-th__wr, .pl-wr { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: linear-gradient(90deg, rgba(47, 107, 82, .25) calc(var(--p) * 1%), transparent 0); padding: 2px 6px; }
.pl-hcell { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.pl-more { margin-top: 16px; width: 100%; justify-content: center; }

/* анимации профиля: полосы винрейта плавно меняют длину (--p зарегистрирована как число, поэтому анимируется) */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.pl-tile--wr { transition: --p .8s cubic-bezier(.2, .8, .25, 1); }
.pl-th__wr, .pl-wr { transition: --p .9s cubic-bezier(.2, .8, .25, 1); }
.pl-tabs button { transition: color .2s, background .25s, border-color .25s; }
.pl-tabs button:hover { color: var(--red); }
#plFilter { transition: opacity .25s, transform .25s; }
#plFilter.is-off { opacity: 0; transform: translateX(8px); pointer-events: none; }
.pl-form { perspective: 400px; }

/* строка матча в истории */
.pm-day { margin-bottom: 18px; }
.pm-day__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 2px; font-size: 13px; color: var(--muted); }
.pm-day__h b { font: 700 11px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.pm-day__h i, .pm-rd { font-style: normal; font-weight: 700; }
.up { color: var(--green-2); } .down { color: var(--red); }
.pm {
  display: grid; grid-template-columns: 44px minmax(110px, 1.3fr) 1fr 1.1fr .8fr .7fr 74px 86px; gap: 12px; align-items: center;
  padding: 8px 12px 8px 8px; margin-bottom: 6px; border: 1px solid var(--ink); border-left: 6px solid var(--res); background: var(--paper-2);
  transition: transform .15s, box-shadow .15s;
}
.pm:hover { transform: translateX(3px); box-shadow: 4px 4px 0 var(--ink); }
.pm--w { --res: var(--green-2); } .pm--l { --res: var(--red); }
/* MVP матча: золотистая строка и пульсирующая печать «MVP», криво наклеенная на левый край */
.pm { position: relative; }
.pm--mvp { background: linear-gradient(90deg, rgba(233, 196, 106, .55), rgba(233, 196, 106, .12) 38%, var(--paper-2) 70%); border-color: #8a6312; border-left-color: var(--res); }
.pm-mvp {
  position: absolute; z-index: 2; left: -15px; top: -9px; padding: 4px 7px 3px;
  font: italic 900 15px/1 var(--f-head); letter-spacing: .06em; color: #2a1a04;
  background: #e9c46a; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform-origin: 50% 60%; rotate: -14deg; pointer-events: none;
  animation: mvp-pulse 1.5s ease-in-out infinite;
}
@keyframes mvp-pulse {
  0%, 100% { scale: 1; box-shadow: 2px 2px 0 var(--ink), 0 0 0 0 rgba(233, 196, 106, .85); }
  50% { scale: 1.14; box-shadow: 2px 2px 0 var(--ink), 0 0 0 9px rgba(233, 196, 106, 0); }
}
/* квадратик MVP в «Последних 20 матчах» */
.pl-form a.mvp { position: relative; box-shadow: inset 0 0 0 2px #e9c46a; }
.pl-form a.mvp::after { content: '★'; position: absolute; top: -8px; right: -6px; font-size: 14px; line-height: 1; color: #e9c46a; text-shadow: 0 0 0 var(--ink), 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .pm-mvp { animation: none; } }
.pm-hero { width: 44px !important; height: 44px !important; }
.pm b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.pm small { font-size: 12px; color: var(--muted); }
.pm-res b { color: var(--res); }
.pm-ago { font-size: 12px; color: var(--muted); text-align: right; }
.pm-rd { font-size: 13px; text-align: right; } .pm-rd.up { color: var(--green-2); } .pm-rd.down { color: var(--red); }

/* матч */
.mt-head { grid-template-columns: 1fr auto; border-top-color: var(--gold); }
.mt-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; }
.mt-demo small { font-size: 12.5px; color: var(--muted); max-width: 420px; }
.mt-demo__btn { padding: 10px 18px; gap: 8px; font-size: 14px; }
#mtDemo { display: contents; }
.mt-demo__btn--play { background: var(--red); border-color: var(--red); color: var(--paper); }
.mt-score { display: grid; grid-template-columns: auto auto auto auto auto; gap: 10px; align-items: center; justify-items: center; }
.mt-score > span { font: 400 44px/1 var(--f-display); }
.mt-score b { font: 900 16px var(--f-head); }
.mt-score .t0, .mt-team--0 .mt-team__h b { color: #b07a18; } .mt-score .t1, .mt-team--1 .mt-team__h b { color: #2b5c93; }
.mt-score small { grid-column: 1 / -1; font: 10px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mt-lead { margin-top: 26px; }
.mt-lead svg { width: 100%; height: 180px; display: block; }
.mt-lead .a0 { fill: rgba(176, 122, 24, .3); } .mt-lead .a1 { fill: rgba(43, 92, 147, .3); }
.mt-lead .ln { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mt-lead .zero { stroke: var(--ink); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mt-lead__plot { position: relative; }
.mt-lead__y { position: absolute; left: 4px; transform: translateY(-50%); padding: 1px 5px; font: 11px var(--f-label); background: rgba(235, 226, 208, .8); }
.mt-lead__y.t0 { color: #8a5f12; } .mt-lead__y.t1 { color: #2b5c93; }
.mt-lead__x { position: relative; height: 18px; margin-top: 4px; }
.mt-lead__t { position: absolute; top: 0; transform: translateX(-50%); font: 11px var(--f-label); color: var(--muted); white-space: nowrap; }
.mt-team { margin-top: 26px; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink); }
.mt-team__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--ink); }
.mt-team__h b { font: 900 22px var(--f-head); }
.mt-team__h span { font-size: 13px; color: var(--muted); }
/* Итог матча. Победители: зелёная печать «Победа», свечение вокруг таблицы и блик по шапке.
   Проигравшие: красная печать с крестиком, штриховка в шапке, поблёкшие портреты. */
.mt-team.won { border-top: 7px solid var(--green-2); box-shadow: 6px 6px 0 var(--ink), 0 0 0 3px rgba(47, 107, 82, .22), 0 0 30px rgba(47, 107, 82, .35); }
.mt-team.won .mt-team__h { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(47, 107, 82, .22), transparent 70%); }
.mt-team.won .mt-team__h::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); animation: mt-shine 4s ease-in-out 1s infinite;
}
.mt-team.lost { border-top: 7px solid var(--red); }
.mt-team.lost .mt-team__h { background: repeating-linear-gradient(-45deg, rgba(142, 43, 34, .09) 0 8px, transparent 8px 16px); }
.mt-team.lost .mt-pl > img { filter: grayscale(.75) brightness(.92); }
.mt-team__h { align-items: center; }
.mt-team .table-wrap { margin-top: 0; }   /* таблица сразу под цветной шапкой, без пустой полосы */
/* Профиль, вкладка «Герои»: сортировка по матчам, винрейту и KDA */
.pl-hbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.pl-hbar small { font: 10px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.pl-ht th.pl-hsort { cursor: pointer; user-select: none; }
.pl-ht th.pl-hsort:hover { color: var(--red); }
/* Игрок, из профиля которого пришли в матч: тонкая полоска слева и лёгкий оттенок строки, ник жирнее. */
.mt-table tr.mt-me td:first-child { box-shadow: inset 3px 0 0 #3f78bd; }
.mt-table tr.mt-me:not(.mt-mvp) td { background: rgba(63, 120, 189, .06); }
.mt-table tr.mt-me .mt-pl a { font-weight: 800; }
.mt-stamp {
  margin-right: auto; padding: 4px 12px 3px; border: 3px double currentColor; font: 900 14px/1.1 var(--f-head); letter-spacing: .16em; text-transform: uppercase;
  animation: mt-stamp .55s cubic-bezier(.3, 1.6, .5, 1) .25s backwards;
}
.mt-stamp.win { color: var(--green-2); background: rgba(47, 107, 82, .12); transform: rotate(-4deg); }
.mt-stamp.win::before { content: '★ '; }
.mt-stamp.loss { color: var(--red); background: rgba(142, 43, 34, .08); transform: rotate(3deg); }
.mt-stamp.loss::before { content: '✕ '; }
.mt-score > span { white-space: nowrap; }
.mt-score em { font-style: normal; } .mt-score em.win { color: var(--green-2); }
.mt-score b.win::before { content: '♛ '; color: #c9952c; }
.mt-score b.lose { opacity: .55; }
.mt-score .mt-verdict { padding: 4px 12px; color: var(--paper); font-weight: 700; letter-spacing: .2em; animation: mt-stamp .5s cubic-bezier(.3, 1.6, .5, 1) .4s backwards; }
.mt-verdict.t0 { background: #b07a18; } .mt-verdict.t1 { background: #2b5c93; }
@keyframes mt-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } }
@keyframes mt-shine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
/* Список матчей игрока: фон строки в цвет результата и значки ✓ / ✕ (у MVP фон золотой — его не трогаем) */
.pm--w:not(.pm--mvp) { background: linear-gradient(90deg, rgba(47, 107, 82, .18), var(--paper-2) 45%); }
.pm--l:not(.pm--mvp) { background: linear-gradient(90deg, rgba(142, 43, 34, .14), var(--paper-2) 45%); }
.pm--l .pm-hero { filter: grayscale(.6); }
.pm-res b::before { display: inline-block; width: 1.2em; font-weight: 900; }
.pm--w .pm-res b::before { content: '✓'; }
.pm--l .pm-res b::before { content: '✕'; }
@media (prefers-reduced-motion: reduce) { .mt-stamp, .mt-verdict, .mt-team.won .mt-team__h::after { animation: none !important; } }
.mt-table td { vertical-align: middle; }
.mt-table td.num { white-space: nowrap; }
.mt-pl { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; min-width: 210px; }
.mt-pl a { font-weight: 700; } .mt-pl a:hover { color: var(--red); }
.mt-pl small { display: block; font-size: 12px; color: var(--muted); }
/* MVP в таблице матча — та же пульсирующая печать, что в профиле, но внутри ячейки:
   таблица лежит в контейнере с прокруткой, и всё, что за его краем, обрезалось бы */
.mt-mvp { background: linear-gradient(90deg, rgba(233, 196, 106, .55), rgba(233, 196, 106, .14) 35%, transparent 75%); box-shadow: inset 4px 0 0 #c99a2e; }
.mt-pcell { position: relative; }
.mt-pcell .pm-mvp { left: 8px; top: 3px; padding: 3px 5px 2px; font-size: 12px; border-width: 1.5px; }
.mt-mvpb { color: #8a6312; }
.mt-dmg { display: inline-block; min-width: 70px; padding: 2px 6px; background: linear-gradient(90deg, rgba(142, 43, 34, .22) calc(var(--p) * 1%), transparent 0); }
/* сама ячейка остаётся ячейкой таблицы (иначе она не тянется на высоту строки и линии съезжают), иконки — во внутреннем блоке */
.mt-items { min-width: 180px; }
.mt-items__in { display: flex; flex-wrap: wrap; gap: 3px; }
.mt-items .mini { width: 26px; height: 26px; }
@media (max-width: 1000px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pm { grid-template-columns: 40px 1fr 1fr 1fr; } .pm-nw, .pm-lh, .pm-ago { display: none; } .pm-rd { grid-column: 4; }
}
@media (max-width: 700px) {
  .pl-head { grid-template-columns: auto 1fr; } .pl-rank { grid-column: 1 / -1; justify-items: start; }
  .pl-ava { width: 72px; height: 72px; } .mt-head { grid-template-columns: 1fr; }
  .pm { grid-template-columns: 40px 1fr 1fr; } .pm-kda { display: none; } .pm-rd { grid-column: auto; }
}

/* ---------- Повтор матча (replay.html): карта сверху, шкала времени, игроки ---------- */
.rp-score { display: flex; align-items: center; gap: 14px; }
.rp-score b { font: 900 16px var(--f-head); }
.rp-score span { font: 400 44px/1 var(--f-display); font-variant-numeric: tabular-nums; }
/* три колонки: события слева, карта, игроки справа; лента событий по высоте карты и прокручивается */
.wrap:has(#rp) { max-width: 1560px; }
.rp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 22px; margin-top: 26px; align-items: start; }
.rp-grid > .rp-feed { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.rp-grid > .rp-feed ol { overflow-y: auto; flex: 1; min-height: 0; margin-right: -8px; padding-right: 8px; }
.rp-feed li:first-child { animation: rp-feed-in .35s ease-out; }   /* въезжает только новое событие */
@keyframes rp-feed-in { from { opacity: 0; transform: translateX(-8px); } }
@media (max-width: 1280px) { .rp-grid { grid-template-columns: 230px minmax(0, 1fr); } .rp-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 760px) { .rp-grid { grid-template-columns: 1fr; } .rp-grid > .rp-feed { position: static; max-height: 300px; order: 2; } }
.rp-stage { min-width: 0; }
.rp-map { position: relative; max-width: 760px; margin: 0 auto; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #0b0c0d; overflow: hidden; }
/* кнопки камеры поверх карты, справа сверху */
.rp-cam { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; }
.rp-cam button { min-width: 30px; padding: 6px 9px; border: 1px solid rgba(235,226,208,.35); background: rgba(12,13,14,.82); color: #ebe2d0; font: 700 11px var(--f-label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rp-cam button[data-zoom] { font: 700 16px/1 var(--f-body); padding: 4px 9px; }
.rp-cam button:hover { border-color: #e9c46a; color: #e9c46a; }
.rp-cam button[aria-pressed="true"] { background: #e9c46a; border-color: #e9c46a; color: #15130f; }
@media (max-width: 560px) { .rp-cam button { padding: 5px 7px; font-size: 10px; } }
.rp-map canvas { display: block; width: 100%; aspect-ratio: 1; cursor: crosshair; }
.rp-clock { position: absolute; left: 12px; top: 10px; padding: 4px 10px; background: rgba(21, 19, 15, .85); color: var(--paper); font: 700 18px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.rp-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; max-width: 760px; margin: 18px auto 0; }
.rp-play { width: 46px; height: 46px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 18px; cursor: pointer; box-shadow: 3px 3px 0 var(--gold); }
.rp-play:hover { background: var(--red); }
.rp-time { font: 700 14px var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-tl { position: relative; height: 34px; cursor: pointer; touch-action: none; background: linear-gradient(var(--rule), var(--rule)) center / 100% 4px no-repeat; }
.rp-tl__fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--ink); }
.rp-tl__knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.rp-mk { position: absolute; width: 2px; margin-left: -1px; background: var(--c); pointer-events: none; }
.rp-mk--kill { top: 3px; height: 9px; opacity: .75; }
.rp-mk--kill.is-me { top: 0; height: 12px; width: 4px; margin-left: -2px; background: #e9c46a; box-shadow: 0 0 0 1px var(--ink); opacity: 1; }
.rp-mk--obj { bottom: 4px; width: 7px; height: 7px; margin-left: -3.5px; border: 1px solid var(--ink); }
.rp-mk--boss { bottom: 3px; width: 9px; height: 9px; margin-left: -4.5px; rotate: 45deg; border: 1px solid var(--ink); }
.rp-tl__min span { position: absolute; top: 100%; transform: translateX(-50%); font: 10px var(--f-label); color: var(--muted); }
.rp-speed { max-width: 760px; margin: 22px auto 0; }
.rp-note { max-width: 760px; margin: 10px auto 0; font-size: 13px; color: var(--muted); }
.rp-side { display: grid; gap: 18px; }
.rp-pl { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 64px; gap: 8px; align-items: center; width: 100%; padding: 5px 6px; border: 0; border-left: 3px solid transparent; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rp-pl + .rp-pl { border-top: 1px solid rgba(21, 19, 15, .1); }
.rp-pl:hover { background: rgba(21, 19, 15, .05); }
.rp-pl.is-me { border-left-color: var(--tc); background: rgba(233, 196, 106, .3); }
.rp-pl__pic { position: relative; width: 34px; height: 34px; }
.rp-pl__pic img { width: 34px; height: 34px; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--tc); border-radius: 50%; }
.rp-pl__pic i { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--f-body); font-style: normal; color: #fff; }
.rp-pl.is-dead .rp-pl__pic img { filter: grayscale(1) brightness(.45); }
.rp-pl__n b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-pl__n small { font-size: 11.5px; color: var(--muted); }
.rp-pl__kd { font: 700 13px var(--f-body); font-variant-numeric: tabular-nums; }
.rp-pl__nw { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.rp-me__h { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.rp-me__h img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 15%; border: 3px solid var(--tc); border-radius: 50%; }
.rp-me__h b { display: block; font: 900 19px/1.15 var(--f-head); }
.rp-me__h small { font-size: 12.5px; color: var(--muted); }
.rp-me__h em { font-style: normal; font-weight: 700; color: #8a6312; }
.rp-me__st { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; }
.rp-me__st div { padding: 8px 10px; background: var(--paper); border: 1px solid var(--rule); }
.rp-me__st dt { font: 10px var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rp-me__st dd { margin: 2px 0 0; font: 900 22px/1.1 var(--f-head); font-variant-numeric: tabular-nums; }
.rp-me__items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.rp-me__items .mini { width: 30px; height: 30px; }
.rp-me__items small { font-style: italic; color: var(--muted); }
.rp-me__link { display: inline-block; margin-top: 12px; font-weight: 700; }
/* купленные предметы выбранного игрока — 12 ячеек как в игре, 3 из них закрыты, пока не разрушены вражеские Шагоходы */
.rp-items h3 small { font: 10px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rp-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.rp-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: rgba(21,19,15,.06); border: 1px solid var(--rule); }
.rp-slot .mini { width: 100%; height: 100%; }
.rp-slot.is-empty { background: repeating-linear-gradient(-45deg, rgba(21,19,15,.04) 0 4px, transparent 4px 8px); border-style: dashed; }
.rp-slot.is-locked { background: #2b2620; border-color: #2b2620; color: #8a7e6c; }
.rp-slot.is-locked svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rp-slot.is-new { animation: slot-open 1.6s ease-out; }
@keyframes slot-open { 0% { background: #e9c46a; box-shadow: 0 0 0 0 rgba(233,196,106,.8); } 100% { box-shadow: 0 0 0 10px rgba(233,196,106,0); } }
.rp-items__hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.rp-feed ol { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.rp-feed li { padding: 5px 0; border-bottom: 1px solid rgba(21, 19, 15, .08); }
.rp-feed li.is-me { background: rgba(233, 196, 106, .3); }
.rp-feed time { display: inline-block; min-width: 40px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-feed__empty { font-style: italic; color: var(--muted); }

@media (max-width: 560px) { .rp-score span { font-size: 30px; } .rp-ctrl { grid-template-columns: auto minmax(0, 1fr); } .rp-time { grid-column: 1 / -1; } }
/* повтор: карточка героя при наведении и легенда карты */
.rp-tip {
  position: absolute; z-index: 3; width: 250px; margin: 18px 0 0 18px; padding: 10px 12px; pointer-events: none;
  background: rgba(27, 23, 20, .94); color: #ece4d4; border: 1px solid rgba(0, 0, 0, .6); border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  font: 13px/1.4 var(--f-body);
}
.rp-tip.left { transform: translateX(-100%); margin-left: -18px; }
.rp-tip__h { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; }
.rp-tip__h img { width: 38px; height: 38px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; border: 2px solid var(--tc); }
.rp-tip__h b { display: block; font: 900 15px/1.15 var(--f-head); color: #fff; }
.rp-tip__h small { font-size: 11.5px; color: rgba(236, 228, 212, .65); }
.rp-tip__hp { position: relative; height: 16px; margin: 9px 0 7px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.rp-tip__hp i { position: absolute; inset: 0 auto 0 0; }
.rp-tip__hp span { position: relative; display: block; padding-left: 6px; font: 700 11px/16px var(--f-body); color: #fff; text-shadow: 0 1px 1px #000; }
.rp-tip__nums { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: rgba(236, 228, 212, .65); }
.rp-tip__nums b { color: #fff; }
.rp-tip__now { margin: 8px 0 0; padding: 0; list-style: none; }
.rp-tip__now li { padding: 2px 0 2px 14px; position: relative; }
.rp-tip__now li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(236, 228, 212, .55); }
.rp-tip__now li.bad::before { background: #e05a48; } .rp-tip__now li.good::before { background: #6cc24a; } .rp-tip__now li.cc::before { background: #b07ae0; }
.rp-tip__now li.bad { color: #f2a397; } .rp-tip__now li.good { color: #a6e08a; } .rp-tip__now li.cc { color: #d3b2f2; }
.rp-tip__bf { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: rgba(236, 228, 212, .7); }
.rp-tip__bf small { flex-basis: 100%; font: 10px var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.rp-tip__bf b { color: #fff; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; max-width: 760px; margin: 12px auto 0; font-size: 12.5px; color: var(--muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-legend i { display: inline-grid; place-items: center; flex: none; font: 700 10px/1 var(--f-body); font-style: normal; color: #fff; }
.lg-lane { width: 14px; height: 5px; background: var(--c); }
.lg-tower { width: 15px; height: 15px; border-radius: 50%; background: url(../img/map/tier_1_boss.png) center 30% / 150% no-repeat, #c9952c; box-shadow: 0 0 0 2px #c9952c, 0 0 0 3px var(--ink); }
.lg-bridge { width: 10px; height: 16px; background: repeating-linear-gradient(#b39a74 0 3px, #8a7352 3px 4px); border-left: 2px solid #3c3024; border-right: 2px solid #3c3024; }
.lg-tunnel { width: 16px; height: 12px; background: #3e3832; border: 1px solid #e9c46a; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.lg-camp { width: 11px; height: 11px; border-radius: 50%; background: #f3ead6; border: 1.5px solid #5a4a36; }
.lg-shop { width: 15px; height: 15px; border-radius: 50%; background: #c9952c; border: 1.5px solid var(--ink); }
.lg-tele { width: 13px; height: 13px; border-radius: 50%; background: #7a3db0; border: 1.5px solid var(--ink); }
.lg-urn { width: 9px; height: 9px; rotate: 45deg; background: #4fc3a1; border: 1px solid var(--ink); }
.lg-boss { width: 16px; height: 16px; background: url(../img/map/super_neutral_marker.png) center / 160% no-repeat; }
.lg-fight { width: 14px; height: 14px; border-radius: 50%; background: rgba(192, 57, 43, .2); border: 1.5px dashed #8e2b22; }
.lg-heal { width: 14px; height: 14px; border-radius: 50%; background: rgba(90, 168, 58, .45); color: #2c6d1d !important; font-size: 12px !important; }
.lg-cc { width: 14px; height: 6px; background: radial-gradient(circle, #9b59d0 2px, transparent 2.5px) 0 50% / 5px 6px repeat-x; }
/* «О сайте»: как часто обновляются данные */
.city__list { list-style: none; margin: -12px 0 34px; padding: 0; display: grid; gap: 6px; max-width: 52ch; color: rgba(235,226,208,.82); font-size: 15px; }
.city__list b { color: var(--paper); }

/* метка «бета» у повтора матча на карте (пока не доделан) */
/* «бета» — неброская печать, криво приколотая сбоку (как MVP, но тихая): бумага, приглушённый коричневый, без пульса */
.beta {
  position: absolute; z-index: 2; top: -10px; right: -14px; padding: 2px 7px 1px; pointer-events: none;
  font: italic 900 11px/1.2 var(--f-head); font-style: italic; letter-spacing: .04em; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 rgba(21, 19, 15, .3); rotate: 9deg;
}
.mt-demo__btn { position: relative; }
.pl-name .beta { position: relative; top: -14px; right: auto; align-self: flex-start; margin-left: -6px; font-size: 12px; }

/* «▶ повтор» в строке матча профиля: появляется под временем, ярче при наведении на строку */
.pm-ago { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pm-replay { font: 700 10px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; cursor: pointer; white-space: nowrap; opacity: .55; transition: opacity .15s, color .15s; }
.pm:hover .pm-replay { opacity: 1; color: #3f78bd; }
.pm-replay:hover { color: var(--red) !important; border-bottom-color: currentColor; }
/* ==========================================================================
   ГЛАВНАЯ: новые герои, «найти свой профиль», пьедестал, бета-тест, новости,
   путь новичка, магазин по четыре, лента героев сама едет
   ========================================================================== */
/* ---------- первый экран: текст ---------- */
.hero__sub { font-size: 18px; max-width: min(42ch, calc(100% - 70px)); margin: 0 0 28px; color: var(--ink-2); }
.hero__text .hero__ctas { max-width: calc(100% - 70px); }   /* справа — рваный край картинки */
.arr--up { display: inline-block; }
.btn:hover .arr--up { transform: translateY(-4px); }
#findMe .arr--up { animation: up-nudge 2.2s ease-in-out infinite; }
#findMe:hover .arr--up { animation: none; }
@keyframes up-nudge { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-4px); } }
.hero__live { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 22px; margin: 36px 0 0; max-width: calc(100% - 70px); }
.hero__live div { border-left: 2px solid var(--ink); padding-left: 12px; }
.hero__live b { display: block; font: 400 30px/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero__live span { font: 10px/1.4 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* поиск в шапке, к которому ведёт «Найти свой профиль»: красная обводка пульсирует, снизу — подсказка со стрелкой */
.psearch.is-called input { border-color: var(--red); background: var(--paper-2); animation: call-ring 1.1s ease-out 3; }
@keyframes call-ring { 0% { box-shadow: 3px 3px 0 var(--red), 0 0 0 0 rgba(140, 32, 30, .45); } 100% { box-shadow: 3px 3px 0 var(--red), 0 0 0 14px rgba(140, 32, 30, 0); } }
.psearch__call {
  position: absolute; z-index: 61; top: calc(100% + 14px); right: 0; padding: 9px 14px 9px 12px; pointer-events: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 700 13px var(--f-body); color: var(--paper); background: var(--red); box-shadow: 4px 4px 0 var(--ink);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.psearch__call::before { content: ""; position: absolute; top: -7px; right: 28px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--red); }
.psearch__call i { font-style: normal; font-size: 17px; line-height: 1; animation: up-nudge 1s ease-in-out infinite; }
.psearch.is-called .psearch__call { opacity: 1; transform: none; }
.psearch.is-called .psug { display: none; } /* пока горит подсказка-стрелка, список избранных не открываем; начали печатать — подсветка снимается */
.psearch--mobile .psearch__call { left: 0; right: auto; }
.psearch--mobile .psearch__call::before { left: 24px; right: auto; }

/* ---------- первый экран: новые герои на фирменных фонах из игры ---------- */
.hrot { --dur: 6000ms; }
/* общая подложка кадра — тёмная газетная бумага: колонки, косая штриховка и растровые точки, по краям темнее */
.hrot .hero__frame {
  background:
    radial-gradient(120% 95% at 72% 42%, transparent 35%, rgba(0,0,0,.6)),
    radial-gradient(circle, rgba(235,226,208,.085) 1px, transparent 1.5px) 0 0 / 7px 7px,
    repeating-linear-gradient(-45deg, rgba(235,226,208,.035) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), rgba(235,226,208,.08) calc(16.66% - 1px) 16.66%),
    linear-gradient(180deg, #1c1a16, #100f0c);
}
/* Смена: новый слайд быстро проявляется поверх старого, а старый (.is-prev) остаётся под ним целиком,
   пока новый не проявится, — без провала и «полупрозрачной каши» из двух фонов. */
.hrot__slide { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.hrot__slide.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity .5s ease; }
.hrot__slide.is-prev { z-index: 1; opacity: 1; visibility: visible; transition: none; }
.hrot__slide::after { /* тень под подписью и у нижнего края */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(13,15,13,.88), rgba(13,15,13,.35) 26%, transparent 42%);
}
.hrot .hero__frame .hrot__art { /* официальный арт героя: справа во всю высоту до правого края; слева растворяется в подложке */
  left: auto; right: 0; top: 0; z-index: 0; width: auto; min-width: 72%; height: 100%; max-width: none;
  object-fit: cover; object-position: 100% 20%; filter: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%); mask: linear-gradient(90deg, transparent, #000 22%);
  transform: scale(1.04); transform-origin: 70% 30%; transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.hrot__slide.is-on .hrot__art { transform: none; }
.hrot__cap { position: absolute; z-index: 4; left: 150px; bottom: clamp(30px, 4vw, 56px); color: var(--paper); transform: translateY(16px); opacity: 0; transition: transform .9s cubic-bezier(.2,.8,.2,1) .15s, opacity .9s .15s; }
.hrot__slide.is-on .hrot__cap { transform: none; opacity: 1; }
.hrot__role { font: 11px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: #e9c46a; }
.hrot__name { display: block; margin: 10px 0 12px; font: 900 clamp(34px, 3.6vw, 58px)/1 var(--f-head); letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hrot__go { font: 700 14px var(--f-body); border-bottom: 1px solid rgba(235,226,208,.5); padding-bottom: 2px; }
.hrot__slide:hover .hrot__go { color: #e9c46a; border-color: currentColor; }
.hrot__label { position: absolute; z-index: 5; left: 150px; top: 26px; display: flex; flex-direction: column; gap: 6px; pointer-events: none;
  font: 11px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: #e9c46a; }
.hrot__label b { font: 400 clamp(22px, 2vw, 30px)/1 var(--f-display); letter-spacing: .02em; color: var(--paper); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hrot__nav { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(30px, 4vw, 56px); display: flex; gap: 6px; }
.hrot__nav button { width: 30px; padding: 12px 0; border: 0; background: none; cursor: pointer; }
.hrot__nav i { position: relative; display: block; height: 3px; background: rgba(235,226,208,.28); overflow: hidden; }
.hrot__nav i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.hrot__nav button:hover i { background: rgba(235,226,208,.55); }
.hrot__nav [aria-selected="true"] i::after { animation: hrot-fill var(--dur) linear forwards; }
.hrot.is-paused .hrot__nav i::after { animation-play-state: paused; }
@keyframes hrot-fill { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hrot__nav [aria-selected="true"] i::after { transform: none; } }

/* ---------- пьедестал тир-листа ---------- */
.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 132px); gap: 14px; padding: 12px 14px 0; background: var(--paper-2); }
.podium__stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; min-width: 0; }
.podium__col { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.podium__crown { position: absolute; top: -4px; left: 50%; z-index: 2; translate: -50% 0; font: normal 20px/1 serif; color: #c9952c; text-shadow: 0 1px 0 var(--ink); }
.podium__face { display: block; width: 58px; height: 64px; overflow: hidden; border: 2px solid var(--ink); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 75%, #000), #121212 90%); }
.podium__col--1 .podium__face { width: 70px; height: 78px; margin-top: 14px; border-color: #c9952c; box-shadow: 0 0 0 3px rgba(201,149,44,.25); }
.podium__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.trio__item:hover .podium__face img { transform: scale(1.08); }
.podium__col b { max-width: 100%; margin-top: 5px; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium__col small { margin: 1px 0 6px; font: 700 13px/1.2 var(--f-body); font-variant-numeric: tabular-nums; color: var(--green-2); }
/* пьедестал без анимаций: ступени сразу своей высоты, при наведении на плитку только краснеют */
.podium__step { width: 100%; display: grid; place-items: start center; padding-top: 6px; overflow: hidden; background: var(--ink); color: #e9c46a; font: 400 22px/1 var(--f-display); transition: background .3s; }
.podium__col--1 .podium__step { height: 58px; background: linear-gradient(180deg, #2a2418, var(--ink)); }
.podium__col--2 .podium__step { height: 42px; }
.podium__col--3 .podium__step { height: 30px; }
.trio__item:hover .podium__step { background: var(--red); }
.podium__next { list-style: none; margin: 0; padding: 4px 0 12px; display: grid; align-content: center; gap: 6px; counter-reset: pn 3; }
.podium__next li { counter-increment: pn; display: grid; grid-template-columns: 14px 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.podium__next li::before { content: counter(pn); grid-row: 1 / 3; font: 400 15px/1 var(--f-display); color: var(--muted); }
.podium__next img { grid-row: 1 / 3; width: 24px; height: 24px; object-fit: cover; border: 1.5px solid var(--c); background: var(--c); }
.podium__next span { font-size: 11.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium__next b { font: 700 11px/1.1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--green-2); }

/* ---------- бета-тест: тёмная полоса с призывом написать ---------- */
.beta-box .city__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.beta-box .kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.beta-box .city__title { font-size: clamp(42px, 6vw, 92px); margin: 18px 0 20px; }
.beta-box__lead { margin: 0 0 32px; max-width: 54ch; font-size: 18px; color: rgba(235,226,208,.82); }
.btn--accent { background: #e0a24f; border-color: #e0a24f; color: var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.35); }
.btn--accent:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.beta-box__what { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; }
.beta-box__what li { padding: 0 24px; }
.beta-box__what li + li { border-left: 1px solid rgba(235,226,208,.25); }
.beta-box__what svg { display: block; width: 28px; height: 28px; margin: 0 auto 12px; fill: none; stroke: #e9c46a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.beta-box__what b { display: block; margin-bottom: 4px; font: 900 21px/1.1 var(--f-head); }
.beta-box__what span { font-size: 14.5px; line-height: 1.4; color: rgba(235,226,208,.65); }

/* форма обратной связи — окно поверх страницы */
.fb { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.fb::backdrop { background: rgba(13, 15, 13, .7); backdrop-filter: blur(2px); }
.fb[open] { animation: fb-in .3s cubic-bezier(.2,.8,.2,1); }
@keyframes fb-in { from { opacity: 0; transform: translateY(20px); } }
.fb__form { position: relative; display: grid; gap: 16px; padding: 28px 28px 30px; }
.fb__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font: 400 32px/1 var(--f-display); color: var(--ink); }
.fb__close:hover { color: var(--red); }
.fb__title { margin: -6px 0 0; font: 900 clamp(28px, 4vw, 38px)/1.05 var(--f-head); }
.fb__kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb__kinds input { position: absolute; opacity: 0; pointer-events: none; }
.fb__kinds span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--ink); cursor: pointer; font: 700 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s; }
.fb__kinds span:hover { background: var(--paper-2); }
.fb__kinds input:checked + span { background: var(--ink); color: var(--paper); }
.fb__kinds input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.fb__field { display: grid; gap: 6px; }
.fb__field > span { font: 700 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; }
.fb__field i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.fb__field textarea, .fb__field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--ink); background: #f6efe0; font: 16px/1.45 var(--f-body); color: var(--ink); resize: vertical; }
.fb__field textarea:focus, .fb__field input:focus { outline: none; background: #fff9ec; box-shadow: 3px 3px 0 var(--ink); }
.fb__err { margin: -4px 0 0; font-size: 14px; color: var(--red); }
.fb__form > .btn { justify-self: start; }
.fb__form > .btn:disabled { opacity: .55; cursor: wait; }
.fb__form.is-done > :not(.fb__done):not(.fb__close) { display: none; }
.fb__done { display: grid; justify-items: start; gap: 6px; padding: 10px 0 0; }
.fb__done[hidden] { display: none; }
.fb__done b { font: 900 34px/1 var(--f-head); }
.fb__done p { margin: 0 0 14px; color: var(--ink-2); }

/* ---------- новости: три карточки-вырезки ---------- */
.news3 { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); align-items: stretch; }
.ncard { display: flex; flex-direction: column; background: #f4ede0; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .25s, box-shadow .25s; }
.ncard:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.ncard.reveal.in:hover { transform: translate(-3px, -3px); }
.ncard__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); border-bottom: 1.5px solid var(--ink); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ncard:hover .ncard__img img { transform: scale(1.04); }
.ncard__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.ncard__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 10px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ncard__cat { padding: 5px 7px; background: var(--red); color: var(--paper); }
.ncard__title { margin: 0 0 10px; font: 900 clamp(21px, 1.7vw, 26px)/1.12 var(--f-head); }
.ncard--lead .ncard__title { font-size: clamp(24px, 2.1vw, 32px); }
.ncard:hover .ncard__title { color: var(--red); }
.ncard__desc { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ncard__more { margin-top: auto; font: 700 14px var(--f-body); color: var(--red); }
.npatch { display: grid; place-content: center; text-align: center; color: var(--paper); background: var(--green); transition: background .3s; }
.npatch b { font: 400 clamp(64px, 6vw, 104px)/.8 var(--f-display); }
.npatch span { margin-top: 10px; font: 11px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: #e9c46a; }
.ncard:hover .npatch { background: var(--red); }

/* ---------- гайды: путь новичка из трёх шагов ---------- */
.section--guides { padding-top: 0; }
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.step { display: block; }
.step__top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.step__n { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font: 400 28px/1 var(--f-display); transition: background .3s, color .3s, border-color .3s; }
.step:hover .step__n { background: var(--red); border-color: var(--red); color: var(--paper); }
.step__tag { font: 10px/1.3 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.step__line { flex: 1; position: relative; height: 0; border-top: 1.5px dashed var(--ink); margin-right: calc(-1 * clamp(24px, 3vw, 48px) + 6px); opacity: .55; }
.step__line::after { content: ""; position: absolute; right: -1px; top: -5px; width: 8px; height: 8px; border: solid var(--ink); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.route li:last-child .step__line { margin-right: 0; border-top-style: solid; }
.route li:last-child .step__line::after { width: 9px; height: 9px; top: -5px; border: 0; border-radius: 50%; background: var(--ink); transform: none; }
.step__img { aspect-ratio: 4 / 3; padding: 9px; background: #f4ede0; box-shadow: 0 1px 0 var(--rule), 0 16px 30px rgba(21,19,15,.18); transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.step__img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2) saturate(.9); transition: filter .5s; }
.step:hover .step__img { transform: rotate(0) translateY(-6px); box-shadow: 0 1px 0 var(--rule), 0 24px 40px rgba(21,19,15,.24); }
.step:hover .step__img img { filter: none; }
.step__title { margin: 24px 0 8px; font: 900 clamp(22px, 2vw, 30px)/1.12 var(--f-head); }
.step:hover .step__title { color: var(--red); }
.step__desc { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---------- магазин: зелёная полоса, четыре предмета сменяются сами ---------- */
.market--compact { margin-block: 40px; }
.shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.shop .h-section { font-size: clamp(34px, 3.4vw, 54px); }
.shop .lead { margin: 18px 0 28px; }
.shop .market__note { display: block; margin-top: 26px; }
.items--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 1px 1px 0; }
.items--compact .item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 20px 22px; }
.items--compact .item__icon { width: 52px; height: 52px; }
/* скрипт ставит .is-on четвёрке на экране и .is-out всему блоку перед сменой */
.items--compact .item { display: none; }
.items--compact .item.is-on { display: grid; animation: item-in .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.items--compact.is-out .item.is-on { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
@keyframes item-in { from { opacity: 0; transform: translateY(12px); } }
.shop__pager { display: flex; gap: 6px; margin-top: 14px; }
.shop__pager i { width: 22px; height: 3px; background: rgba(235,226,208,.25); transition: background .3s; }
.shop__pager i.on { background: #e0a24f; }

/* ---------- лента героев едет сама ---------- */
.cast--auto { scroll-snap-type: none; scrollbar-width: none; }
.cast--auto::-webkit-scrollbar { display: none; }

/* ---------- адаптив главной ---------- */
@media (max-width: 1240px) {
  .hero__live { grid-template-columns: repeat(2, auto); }
  .hrot__cap, .hrot__label { left: 120px; }
}
@media (max-width: 1100px) {
  .news3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ncard--lead { grid-column: 1 / -1; }
  .ncard--lead .ncard__img { aspect-ratio: 21 / 9; }
}
@media (max-width: 860px) {
  .hero__sub, .hero__text .hero__ctas { max-width: 100%; }
  .hero__live { max-width: none; }
  .hero__live b { font-size: 28px; }
  .hero__art.hrot { height: clamp(440px, 118vw, 600px) !important; }
  .hrot .hero__frame .hrot__art { -webkit-mask: none; mask: none; width: 100%; object-position: 50% 15%; }
  .hrot__cap { left: var(--gutter); bottom: 54px; }
  .hrot__label { left: var(--gutter); top: 50px; }
  .hrot__nav { left: var(--gutter); right: auto; bottom: 12px; }
  .beta-box__what { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
  .beta-box__what li { padding: 0; }
  .beta-box__what li + li { border-left: 0; }
  .news3 { grid-template-columns: 1fr; }
  .ncard--lead .ncard__img { aspect-ratio: 16 / 9; }
  .route { grid-template-columns: 1fr; gap: 44px; }
  .step__line { margin-right: 0; }
  .shop { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero__text .hero__ctas { flex-direction: column; }
  .hero__text .hero__ctas .btn { justify-content: space-between; }
  .podium { grid-template-columns: minmax(0, 1fr) minmax(0, 112px); padding-inline: 10px; }
  .podium__col b, .podium__col small { font-size: 12px; }
  .items--compact { grid-template-columns: 1fr; }
  .shop .btn--accent { width: 100%; justify-content: space-between; }
  .fb__form { padding: 24px 18px; }
}
/* «Карта предметов»: фильтр по типу сборки */
/* Значок типа сборки: пуля (оружие), сердце (живучесть), звезда спиритизма из игры. Анимация — при наведении
   и пока сборка выбрана: пуля пролетает через значок со следом, сердце бьётся, звезда пульсирует и светится. */
#buildBar .bico { position: relative; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; color: var(--slot); }
#buildBar .bico svg { width: 100%; height: 100%; fill: currentColor; overflow: visible; display: block; }
/* пуля летит в своём «окошке» шире значка, чтобы не наезжать на текст */
#buildBar .slot-weapon .bico { width: 22px; overflow: hidden; }
#buildBar .slot-weapon .bico svg { width: 15px; margin-left: 4px; }
#buildBar .slot-weapon .bico::before { /* след за пулей */
  content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 2px; margin-top: -1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--slot)); opacity: 0;
}
#buildBar .slot-weapon:is(:hover, [aria-pressed="true"]):not(:disabled) .bico svg { animation: b-fly 1.1s cubic-bezier(.5, 0, .7, 1) infinite; }
#buildBar .slot-weapon:is(:hover, [aria-pressed="true"]):not(:disabled) .bico::before { animation: b-trail 1.1s cubic-bezier(.5, 0, .7, 1) infinite; }
#buildBar .slot-vitality:is(:hover, [aria-pressed="true"]):not(:disabled) .bico svg { animation: b-beat 1.1s ease-in-out infinite; }
/* звезда спиритизма — значок из файлов игры (тот же, что у прибавок от спиритической мощи) */
#buildBar .bico__m { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("../img/icons/spirit.svg") center / contain no-repeat; mask: url("../img/icons/spirit.svg") center / contain no-repeat; }
#buildBar .slot-spirit:is(:hover, [aria-pressed="true"]):not(:disabled) .bico { animation: b-pulse 1.4s ease-in-out infinite; }
@keyframes b-fly { 0% { transform: translateX(-18px); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(18px); opacity: 0; } }
@keyframes b-trail { 0% { transform: translateX(-18px); opacity: 0; } 25% { opacity: .9; } 55% { transform: translateX(-2px); opacity: .9; } 100% { transform: translateX(16px); opacity: 0; } }
@keyframes b-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 70% { transform: scale(1); } }
@keyframes b-pulse { 0%, 100% { transform: scale(.9); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.22); filter: drop-shadow(0 0 5px var(--slot)); } }
/* Смена сборки: по карте пробегает волна цвета сборки, предметы появляются заново один за другим. */
.wpa-card.build-sweep::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--sweep) 30%, transparent) 50%, transparent 65%) 0 0 / 300% 100% no-repeat;
  animation: b-sweep .9s ease-out forwards;
}
@keyframes b-sweep { from { background-position: 100% 0; } to { background-position: 0 0; opacity: 0; } }
.wpa-plot.build-in .wpa-dot { animation: b-pop .45s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes b-pop { from { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #buildBar .bico, #buildBar .bico svg, #buildBar .bico::before, .wpa-card.build-sweep::after, .wpa-plot.build-in .wpa-dot { animation: none !important; }
}
#buildBar .chip small { margin-left: 4px; font-size: .85em; opacity: .7; }
#buildBar .chip:disabled { opacity: .4; cursor: not-allowed; }
.wpa-buildnote { margin: -4px 0 14px; font-size: 13px; color: var(--muted); max-width: 80ch; }
/* «Карта предметов»: пометка о пересчёте после исправления данных */
.wpa-fixnote { margin: 0 0 16px; padding: 10px 14px; max-width: 80ch; font-size: 14px; line-height: 1.5; background: rgba(233, 196, 106, .22); border-left: 4px solid #c9952c; }