/* ---------- шрифты ----------
   Лежат у нас, а не на fonts.googleapis.com. Раньше браузер ради них ходил
   на два чужих домена, и оба стояли на пути к первой отрисовке: сначала
   скачать чужой CSS, только потом узнать адреса самих файлов.

   Manrope и JetBrains Mono вариативные — один файл покрывает все начертания,
   поэтому файлов три, а не девять. Латиница, 75 КБ на всё.

   swap: текст рисуется сразу системным шрифтом и подменяется, когда доедет
   наш. Пустой экран в ожидании шрифта — худшее, что можно сделать. */
@font-face{font-family:Manrope;src:url(fonts/manrope.woff2) format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff2) format("woff2");
  font-weight:500 800;font-style:normal;font-display:swap}

:root{
  --void:#0B0912; --panel:#14111E; --panel-2:#1C1829; --panel-3:#241F33;
  --line:#2A2338; --line-hot:#3B3152;
  /* Серые светлее с 05.10.2026 по просьбе владельца: --dim (подписи, мелочь)
     давал 3,5:1 на плашке — ниже порога читаемости 4,5:1. Теперь
     --muted 11,7:1, --dim 7,8:1 на фоне; иерархия text > muted > dim та же. */
  --text:#EEE7D7; --muted:#CBC2D8; --dim:#A79DB8;
  --gold:#E8B64C; --gold-2:#C8912A;
  --arcane:#8B6CF0; --arcane-2:#6B4FD8;
  --jade:#5FD0A5; --ember:#FF7A45;
  --r:14px; --r-sm:8px;
  --s--1:.8125rem; --s-0:1rem; --s-1:1.125rem; --s-2:1.375rem;
  --s-3:1.75rem; --s-4:clamp(1.9rem,3.6vw,2.6rem); --s-5:clamp(2.2rem,5.2vw,3.6rem);
}
*{box-sizing:border-box}
html,body{background:var(--void)}
/* Боковое панорамирование режем на html, а не на body.
   overflow-x:hidden стоял на body — и на десктопе это работало, потому что
   значение всплывает от body к окну, а сам body остаётся «видимым». На iOS
   всплытие срабатывает не всегда, и страницу можно было утащить вбок: ровно
   это и видел человек с айфона.
   На body переносить нельзя: как только у body появляется собственный
   не-visible overflow, он становится контейнером прокрутки, а липкая шапка
   внутри такого контейнера перестаёт липнуть.
   clip вместо hidden по той же причине: он ничего не прокручивает и не ломает
   sticky. hidden оставлен первым — для браузеров, где clip ещё не понимают. */
html{overflow-x:hidden;overflow-x:clip}
body{margin:0;color:var(--text);background:var(--void);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--s-0);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:700;line-height:1.12;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(a,button,input,select,summary):focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.strip{background:linear-gradient(90deg,var(--arcane-2),var(--arcane) 45%,var(--gold-2));color:#0B0810;font-size:var(--s--1);font-weight:700;text-align:center;padding:8px 16px}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,9,18,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;font-family:Cinzel,"Trajan Pro",Georgia,serif;font-size:1.15rem}
.logo svg{width:27px;height:27px;flex:none}
.logo i{font-style:normal;color:var(--gold)}
/* ---------- menu ---------- */
.menu{display:flex;align-items:center;gap:4px}
.mitem{position:relative}
.mtop{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font:inherit;font-size:var(--s--1);font-weight:700;color:var(--muted);padding:10px 12px;border-radius:var(--r-sm)}
.mtop svg{width:10px;height:6px;transition:transform .16s}
.mtop:hover{color:var(--text);background:var(--panel-2)}
.mtop[aria-expanded=true]{color:var(--gold);background:var(--panel-2)}
.mtop[aria-expanded=true] svg{transform:rotate(180deg)}
/* Пункт меню без выпадашки — прямая ссылка. Выглядит так же, как раскрывашки,
   только без шеврона: человек не должен гадать, почему один пункт ведёт себя
   иначе. Класс отдельный, потому что site.js собирает раскрывашки по .mtop.

   Стоит именно здесь, рядом с .mtop, а не в конце файла: мобильные правила
   идут ниже и с той же специфичностью. Дописанное в конец базовое правило
   перебивало бы их, и на телефоне пункт оставался бы мелким и строчным. */
.mlink{display:flex;align-items:center;background:none;border:0;font:inherit;
  font-size:var(--s--1);font-weight:700;color:var(--muted);padding:10px 12px;
  border-radius:var(--r-sm)}
.mlink:hover{color:var(--text);background:var(--panel-2)}
.mlink--new,.mlink--new:hover{color:var(--gold)}
/* Пункт с нефритовым значком сам не красится: золотом на этой полке помечено
   «скоро», и второй золотой пункт рядом стёр бы разницу. Выделяет значок.
   Стоит здесь же, до мобильного медиазапроса, по той же причине, что и
   .mlink--new: ниже по файлу та же специфичность, и правило перебило бы его. */
.mlink--live{color:var(--text)}
.mpanel{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:440px;background:var(--panel);border:1px solid var(--line-hot);border-radius:var(--r);box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(0,0,0,.4)}
.mpanel-in{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;padding:20px}
.mitem:not(:first-child) .mpanel{left:auto;right:0}
.mpanel{max-width:calc(100vw - 24px)}
.mitem:last-child .mpanel{min-width:300px}
.mitem:last-child .mpanel-in{grid-template-columns:1fr}
.mcol b{display:block;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:"JetBrains Mono",monospace;margin-bottom:8px}
.mcol a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 9px;margin-left:-9px;border-radius:6px;font-size:var(--s--1);font-weight:600;color:var(--muted)}
.mcol a:hover{background:var(--panel-2);color:var(--gold)}
.mcol a em{font-style:normal;font-size:.6875rem;color:var(--dim);font-family:"JetBrains Mono",monospace;flex:none}
/* промо-строка в мега-меню: живой аддон над колонками */
.mfeat{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:20px 16px;margin-bottom:8px;min-height:84px;
  border:1px solid rgba(232,182,76,.4);border-radius:var(--r-sm);overflow:hidden;
  /* Арт под тёмной вуалью: слева почти непрозрачно, чтобы текст читался,
     справа открывается фигура. */
  background-image:
    linear-gradient(100deg,rgba(11,9,18,.95) 0%,rgba(11,9,18,.88) 38%,rgba(11,9,18,.55) 72%,rgba(11,9,18,.3) 100%),
    var(--mfeat-art,url(art/midnight.jpg));
  background-size:cover,cover;
  background-position:center,78% 22%;
  background-repeat:no-repeat,no-repeat;
  transition:border-color .16s,background-position .35s ease-out}
.mfeat:hover{border-color:var(--gold);background-position:center,74% 22%}
@media(prefers-reduced-motion:reduce){.mfeat{transition:border-color .16s}.mfeat:hover{background-position:center,78% 22%}}
.mfeat-mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#1B1526,var(--void) 72%);border:1px solid rgba(232,182,76,.5)}
.mfeat-mark i{display:block;width:9px;height:9px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.mfeat-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mfeat-txt b,.mfeat-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfeat-txt b{font-size:var(--s--1);font-weight:800;color:var(--text);line-height:1.3}
.mfeat-txt span{font-size:.6875rem;color:var(--dim);font-family:"JetBrains Mono",monospace;line-height:1.4}
.mfeat-tag{margin-left:auto;flex:none;padding:3px 8px;border-radius:999px;color:var(--jade);
  font-family:"JetBrains Mono",monospace;font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(47,214,166,.12);border:1px solid rgba(47,214,166,.4)}
@media(max-width:980px){.mfeat{margin-bottom:2px}}

.mall{grid-column:1/-1;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--s--1);font-weight:700;color:var(--gold)}
.mall:hover{text-decoration:underline}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;background:none;border:1px solid var(--line-hot);border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .18s,opacity .18s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .burger{display:flex}
  /* backdrop-filter makes an element the containing block for fixed children,
     which traps the overlay inside the 64px header. Drop it here. */
  .nav{backdrop-filter:none;background:var(--void)}
  .logo,.burger{position:relative;z-index:60}
  .menu{
    position:fixed;inset:0;
    padding:calc(64px + env(safe-area-inset-top,0px) + 20px) 20px calc(40px + env(safe-area-inset-bottom,0px));
    background:var(--void);display:block;overflow-y:auto;overscroll-behavior:contain;z-index:55;
  }
  .menu[hidden]{display:none}
  .mitem{border-bottom:1px solid var(--line)}
  /* .mlink идёт здесь рядом с .mtop: в мобильном меню пункт-ссылка должен
     выглядеть и нажиматься так же, как пункт-раскрывашка. Пока правило знало
     только .mtop, ссылка оставалась строчной и мелкой — на фоне соседей это
     читалось как поломка. */
  .mtop,.mlink{width:100%;justify-content:space-between;padding:18px 0;font-size:var(--s-1);color:var(--text)}
  .mtop:hover,.mtop[aria-expanded=true],.mlink:hover{background:none}
  /* Значок остаётся рядом со словом, а не улетает к правому краю: «Forever
     gold new» читается одним куском, а пилюля в одиночестве у края экрана
     выглядит потерянной и к пункту не относится. Поэтому строка прижимает
     содержимое влево, хотя у соседей справа стоит шеврон. */
  .mlink{justify-content:flex-start;gap:0}
  .mpanel{position:static;min-width:0;border:0;box-shadow:none;background:none}
  .mitem:last-child .mpanel{min-width:0}
  .mpanel-in{grid-template-columns:1fr;padding:0 0 18px;gap:18px}
  .mitem:last-child .mpanel-in{grid-template-columns:1fr}
  .mcol a{padding:9px 0;margin-left:0}
  .mcol a:hover{background:none}
}
@media(prefers-reduced-motion:reduce){.mtop svg,.burger span{transition:none}}

.head{border-bottom:1px solid var(--line);background:radial-gradient(70% 120% at 15% 0%,rgba(139,108,240,.18),transparent 60%),radial-gradient(50% 90% at 85% 10%,rgba(232,182,76,.12),transparent 60%)}
.head .wrap{padding-block:46px 40px}
.crumbs{font-size:.75rem;color:var(--dim);font-family:"JetBrains Mono",monospace;margin-bottom:18px}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.4;margin-inline:4px}
.crumbs em{font-style:normal;color:var(--muted)}
h1{font-size:var(--s-5);margin-top:10px}
.lede{margin-top:16px;font-size:var(--s-1);color:var(--muted);max-width:62ch}
.lede-sm{margin-top:10px;font-size:var(--s--1);color:var(--muted);max-width:66ch}

.sec{padding-block:56px}
.sec.alt{background:linear-gradient(180deg,var(--panel),transparent)}
.sec h2{font-size:var(--s-4);margin-bottom:8px}
.sec h3{font-size:var(--s-2);margin:28px 0 10px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:0}
.prose-wide p{margin-top:16px;color:var(--muted);max-width:74ch}
.prose-wide p b{color:var(--text)}
.fine{font-size:.75rem;color:var(--dim);margin-top:14px}
.fine a{color:var(--gold)}
.fine a:hover{text-decoration:underline}

.desk{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:0 40px 90px -50px #000}
.desk-l{padding:26px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line)}
.desk-r{padding:26px;background:linear-gradient(170deg,var(--panel-2),var(--panel));display:flex;flex-direction:column;gap:16px}
@media(max-width:880px){.desk{grid-template-columns:1fr}.desk-l{border-right:0;border-bottom:1px solid var(--line)}}
.field{display:flex;flex-direction:column;gap:10px}
.legend{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:"JetBrains Mono",monospace}
.amount{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-size:clamp(2rem,5vw,2.8rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.amount i{font-style:normal;color:var(--gold);font-size:.52em;margin-left:2px}
input[type=range]{width:100%;accent-color:var(--gold);margin:0;height:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 13px;border-radius:999px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:700;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.chip:hover{border-color:var(--line-hot);color:var(--text)}
.chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#150E02}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{text-align:center;padding:12px 8px;cursor:pointer;border-radius:var(--r-sm);font-size:var(--s--1);font-weight:700;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.seg label small{display:block;font-weight:500;font-size:.6875rem;color:var(--dim);margin-top:2px}
.seg input:checked+label{border-color:var(--gold);color:var(--gold);background:rgba(232,182,76,.09)}
.seg input:checked+label small{color:var(--gold-2)}
@media(max-width:560px){.seg{grid-auto-flow:row}}
.sum-rows{display:flex;flex-direction:column;gap:11px}
.row{display:flex;justify-content:space-between;gap:14px;font-size:var(--s--1);color:var(--muted)}
.row .mono{color:var(--text);font-weight:500;text-align:right}
.row.save .mono{color:var(--jade)}
.total{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:"JetBrains Mono",monospace}
.total strong{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-size:2.2rem;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--gold)}
.eta{font-size:var(--s--1);color:var(--muted);padding:11px 13px;background:var(--panel-3);border-radius:var(--r-sm);border:1px solid var(--line)}
.eta b{color:var(--text)}
.warn{font-size:.75rem;line-height:1.55;padding:11px 13px;border-radius:var(--r-sm);background:rgba(255,97,54,.09);border:1px solid rgba(255,97,54,.34);color:#FFC4B2}
.warn b{color:#fff}
.btn{display:block;width:100%;text-align:center;padding:14px 18px;border-radius:var(--r-sm);font:inherit;font-weight:800;cursor:pointer;border:1px solid transparent}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#150E02;box-shadow:0 8px 28px -12px rgba(232,182,76,.7)}

.scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-top:22px}
/* Таблицы — только внутри main (:where не меняет вес селектора). Карточка
   предмета Wowhead вставляет свою таблицу прямо в body, и голое правило
   table{min-width:640px} растянуло бы её на всю ширину — ровно так она
   рассыпалась на wowgoldshop.eu 03.10.2026. */
:where(main) table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--s--1)}
:where(main) thead th{text-align:left;padding:14px 18px;font-weight:500;white-space:nowrap;background:var(--panel-2);font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
:where(main) tbody td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
:where(main) tbody tr:last-child td{border-bottom:0}
:where(main) tbody tr:hover{background:var(--panel-2)}
.num{text-align:right}
th.num{text-align:right}
.rname{display:flex;align-items:center;gap:12px;font-weight:700;white-space:nowrap}
.rname:hover{color:var(--gold)}
.rname em{display:block;font-style:normal;font-size:.6875rem;color:var(--dim);font-weight:500}
/* Строка таблицы — ссылка, и говорит об этом шевроном. Раньше здесь стоял
   пустой скруглённый квадрат: выглядел он ровно как чекбокс, человек тыкал
   в него, чтобы отметить строку, и проваливался на другую страницу.

   margin-left:auto прижимает шеврон к правому краю ячейки. Названия реалмов
   разной длины, и если ставить его сразу за текстом, он пляшет по строкам;
   у правого края колонки все шевроны встают на одну вертикаль. */
.rname::after{content:"›";margin-left:auto;padding-left:18px;color:var(--dim);
  font-size:1.375rem;line-height:1;font-weight:400;
  opacity:.45;transition:opacity .14s,color .14s}
.rname:hover::after,.rname:focus-visible::after{opacity:1;color:var(--gold)}
.pill{display:inline-block;white-space:nowrap;padding:4px 10px;border-radius:999px;font-size:.6875rem;font-weight:700;font-family:"JetBrains Mono",monospace;border:1px solid var(--line);color:var(--muted);background:var(--panel-2)}
.pill.ok{color:var(--jade);border-color:rgba(47,214,166,.35);background:rgba(47,214,166,.09)}
.pill.low{color:var(--ember);border-color:rgba(255,97,54,.35);background:rgba(255,97,54,.09)}
.pick{display:inline-block;padding:8px 15px;border-radius:999px;font-size:.75rem;font-weight:700;border:1px solid var(--line-hot);color:var(--text);white-space:nowrap}
.pick:hover{background:var(--gold);border-color:var(--gold);color:#150E02}

.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
@media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.trust{grid-template-columns:1fr}}
.tcard{padding:22px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.tcard h3{font-size:var(--s-0);font-family:Manrope,sans-serif;font-weight:800;letter-spacing:0;margin:0 0 8px}
.tcard p{font-size:var(--s--1);color:var(--muted)}

.memberlist{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 0;padding:0;list-style:none}
@media(max-width:760px){.memberlist{grid-template-columns:repeat(2,1fr)}}
.memberlist li{padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--s--1);font-weight:600}
.buys{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:var(--s--1)}
.buys li{margin-top:8px}
.buys b{color:var(--text)}

/* число, обновлённое live.js */
.live{transition:color .2s}
.live-hit{animation:liveHit 1.1s ease-out}
@keyframes liveHit{0%{color:var(--jade)}60%{color:var(--jade)}100%{color:inherit}}
@media(prefers-reduced-motion:reduce){.live-hit{animation:none}}

/* карточки отзывов (появляются только когда отзывы включены) */
.rev-src{margin-top:8px;font-size:.75rem;color:var(--dim)}
.rev-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:900px){.revgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.revgrid{grid-template-columns:1fr}}
.rev{margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.rev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px}
.rev figcaption b{font-size:var(--s--1);font-weight:800;color:var(--text)}
.rev-stars{color:var(--gold);font-size:.8125rem;letter-spacing:.06em}
.rev figcaption time{font-family:"JetBrains Mono",monospace;font-size:.625rem;color:var(--dim)}
.rev figcaption em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.625rem;color:var(--dim)}
.rev blockquote{margin:0;font-size:var(--s--1);color:var(--muted);line-height:1.6}

/* ---------- строки офферов ---------- */
/* ---------- листинг офферов ----------
   Строка читается слева направо как ответ на вопросы покупателя:
   почём → сколько есть → сколько минимум → где → за кого → у кого.
   Каждая ячейка — крупное значение и мелкая подпись под ним, чтобы
   колонки читались и без шапки таблицы. */
.offers{margin-top:22px;display:grid;gap:8px}
.offer{display:grid;gap:10px 22px;align-items:center;padding:16px 18px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);transition:.14s}
/* Шесть колонок без фракции, семь с ней. Версия игры тут ни при чём:
   фракция есть и в ретейле, и в классике — в листинге партнёра она везде. */
.offers .offer{grid-template-columns:1.1fr .7fr .8fr 1.1fr 1.2fr auto}
.offers--faction .offer{grid-template-columns:1.1fr .7fr .8fr 1.1fr .8fr 1.2fr auto}
.offer:hover,.offer:focus-visible{border-color:var(--line-hot);background:var(--panel-2);outline:none}
.offer:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.ocell{min-width:0}
.ocell i{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:var(--s--1);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocell em{display:block;margin-top:3px;font-style:normal;font-size:.625rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);font-family:"JetBrains Mono",monospace}
.ocell--price i{color:var(--gold);font-weight:700;font-size:var(--s-0)}
.ocell--seller i{display:flex;align-items:center;gap:6px;font-family:Manrope,sans-serif;font-weight:700}
/* Точка — это «склад активен», а не оценка продавца: рейтингов мы не рисуем. */
.odot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--jade)}
.ocheck{flex:none;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;
  background:var(--jade);color:#04150E;font-size:.5rem;font-weight:800}
.ogo{justify-self:end;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line-hot);background:var(--panel-2);color:var(--gold);font-size:.9rem}
.offer:hover .ogo{background:var(--gold);color:#150E02;border-color:var(--gold)}
@media(max-width:860px){
  .offers .offer{grid-template-columns:1fr 1fr 1fr;gap:12px 16px}
  .ocell--price{grid-column:1/-1}
  .ogo{position:absolute;top:14px;right:16px}
  .offer{position:relative;padding-right:60px}
}
@media(max-width:820px){
  .offer{grid-template-columns:1fr 1fr;gap:12px 16px}
  .offer-who{grid-column:1/-1}
  .offer-go{grid-column:1/-1;text-align:right}
}

/* ---------- карточка оффера ----------
   Две колонки, как у партнёров: слева «кто и что продаёт», справа заказ.
   На узком экране колонки складываются, заказ уходит вниз — сначала человек
   читает, что берёт, потом называет сумму. */
body.od-open{overflow:hidden}
.od{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto}
/* Без этой строки hidden не закрывает окно: display:flex выше по силе,
   чем браузерное правило [hidden]{display:none}. */
.od[hidden]{display:none}
.od-back{position:fixed;inset:0;background:rgba(11,9,18,.78);backdrop-filter:blur(3px)}
.od-win{position:relative;width:min(1080px,100%);display:grid;grid-template-columns:1fr minmax(320px,380px);
  gap:0;background:var(--panel);border:1px solid var(--line-hot);border-radius:var(--r);
  box-shadow:0 40px 90px -30px #000}
.od-main{padding:30px 30px 34px;min-width:0}
.od-side{padding:30px 26px 30px;border-left:1px solid var(--line);background:var(--panel-2);
  border-radius:0 var(--r) var(--r) 0;align-self:start;position:sticky;top:40px}
@media(max-width:860px){
  .od{padding:0}
  .od-win{grid-template-columns:1fr;width:100%;min-height:100%;border:0;border-radius:0}
  .od-main{padding:24px 18px 10px}
  .od-side{position:static;border-left:0;border-top:1px solid var(--line);border-radius:0;padding:24px 18px 40px}
}
.od-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-3);color:var(--muted);font-size:1.1rem;cursor:pointer}
.od-close:hover{color:var(--text);border-color:var(--line-hot)}
.od-title{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-2);letter-spacing:-.02em;
  line-height:1.25;margin:0 50px 14px 0}
.od-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.od-chips span{padding:4px 9px;border-radius:5px;background:var(--panel-3);border:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- продавец ---- */
.od-seller{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
.od-seller__mark{position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--gold),var(--gold-2));color:#150E02;font-weight:800;font-size:.875rem}
.od-seller__mark i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--jade);border:2px solid var(--panel-2)}
.od-seller__id b{display:block;font-size:var(--s--1);font-weight:800}
.od-verified{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:.625rem;color:var(--jade);
  font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
/* Оценка продавца: показываем, только когда она приехала из данных. */
.od-rate{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:.6875rem;color:var(--muted);
  font-family:"JetBrains Mono",monospace}
.od-rate em{font-style:normal;color:var(--gold);letter-spacing:.04em}
.od-rate i{font-style:normal;color:var(--dim)}
.od-blurb{margin:16px 0 0}
.od-blurb p{margin:0 0 10px;font-size:var(--s--1);color:var(--muted);line-height:1.65}
.od-blurb p:last-child{margin-bottom:0}
.od-reviews:empty{display:none}

/* ---- отзывы ---- */
.od-reviews{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.od-h3{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s--1);margin:0 0 14px}
.od-h3 i{font-style:normal;color:var(--dim);font-weight:400}
.od-rev{margin:0 0 14px;padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
.od-rev figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.od-rev b{font-size:var(--s--1)}
.od-rev__stars{color:var(--gold);font-size:.75rem;letter-spacing:.06em}
.od-rev time{margin-left:auto;font-size:.625rem;color:var(--dim);font-family:"JetBrains Mono",monospace}
.od-rev blockquote{margin:0;font-size:var(--s--1);color:var(--muted);line-height:1.6}

/* ---- форма заказа ---- */
.od-stock{margin:0 0 20px;font-size:.6875rem;color:var(--dim);font-family:"JetBrains Mono",monospace}
.od-stock b{color:var(--jade);font-size:var(--s--1)}
.od-field{margin-bottom:20px}
.od-label{display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-family:"JetBrains Mono",monospace;margin-bottom:8px}
.od-label--sm{margin-top:14px;margin-bottom:7px;text-transform:none;letter-spacing:.02em;font-size:.6875rem}
.od-label i{color:var(--ember);font-style:normal}
.od-input{width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-hot);
  background:var(--void);color:var(--text);font:inherit;font-family:"JetBrains Mono",monospace;font-size:var(--s-0)}
.od-input:focus{outline:none;border-color:var(--gold)}
.od-popular{display:flex;flex-wrap:wrap;gap:7px}
.od-preset{padding:7px 11px;border-radius:6px;border:1px solid var(--line);background:var(--panel-3);
  color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:.6875rem;cursor:pointer;transition:.14s}
.od-preset:hover{border-color:var(--gold);color:var(--gold)}
.od-preset.is-on{border-color:var(--gold);background:rgba(232,182,76,.12);color:var(--gold)}
.od-methods{display:grid;gap:8px}
.od-method{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel-3);cursor:pointer;font-size:var(--s--1);transition:.14s}
.od-method:has(input:checked){border-color:var(--gold);background:rgba(232,182,76,.08)}
.od-method input{accent-color:var(--gold);margin-top:3px}
.od-method b{font-weight:600}
.od-method em{display:block;margin-top:5px;font-style:normal;font-size:.6875rem;color:var(--dim);line-height:1.5}
.od-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 0;margin:4px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.od-total strong{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:400;font-size:1.75rem;color:var(--gold);
  font-variant-numeric:tabular-nums}
.od-eta{font-size:.6875rem;color:var(--dim);font-family:"JetBrains Mono",monospace}
/* Кнопка одна: корзины нет, заказ принимает продавец у себя. */
.od-cta{display:grid;gap:10px}
.od-btn{padding:13px 16px;border-radius:var(--r-sm);border:1px solid transparent;font:inherit;font-weight:800;
  cursor:pointer;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#150E02}
.od-btn--ghost{background:none;border-color:var(--line-hot);color:var(--muted)}
.od-btn--ghost:hover{color:var(--text);border-color:var(--gold)}
.od-btn:disabled{opacity:.4;cursor:not-allowed}
.od-fine{margin:12px 0 0;font-size:.6875rem;color:#FFC4B2;line-height:1.5}
.od-ask{margin:18px 0 0;font-size:.6875rem;color:var(--dim);text-align:center}
.od-ask a{color:var(--gold)}

/* ---------- gold sinks ---------- */
.sinks{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--line-hot)}
.sink{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:10px 34px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.sink dt{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);line-height:1.25}
.sink dt span{display:block;margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:.75rem;font-weight:500;color:var(--gold);letter-spacing:.01em;line-height:1.45}
.sink dd{margin:0;color:var(--muted);font-size:var(--s--1);max-width:74ch}
@media(max-width:760px){.sink{grid-template-columns:1fr;gap:8px;padding:20px 0}}

.alert{margin-top:24px;padding:18px 20px;border-radius:var(--r);border:1px solid rgba(255,97,54,.4);background:rgba(255,97,54,.08);border-left-width:3px}
.alert b{display:block;color:#fff;font-size:var(--s-1);margin-bottom:8px}
.alert p{color:#FFC4B2;font-size:var(--s--1);max-width:78ch}

/* ---------- process steps ---------- */
.steps{margin:26px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/span 2;font-family:"JetBrains Mono",monospace;font-size:.75rem;color:var(--gold);font-weight:700;padding-top:.3em}
.steps li b{font-size:var(--s-0);font-weight:800}
.steps li span{color:var(--muted);font-size:var(--s--1)}

/* ---------- why buy ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
@media(max-width:760px){.why{grid-template-columns:1fr}}
.wcard{padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);border-left:2px solid var(--gold)}
.wcard h3{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:0;margin:0 0 8px}
.wcard p{color:var(--muted);font-size:var(--s--1)}

.faq{border-top:1px solid var(--line);margin-top:22px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;gap:18px;align-items:center;font-weight:800;font-size:var(--s-1)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--gold);font-family:"JetBrains Mono",monospace;font-weight:400;font-size:1.3rem;line-height:1}
details[open] summary::after{content:"\2212"}
details .body{padding:0 0 22px;color:var(--muted);font-size:var(--s--1);max-width:74ch;display:flex;flex-direction:column;gap:12px}
details .body b{color:var(--text)}

/* список «пункт + пояснение» на страницах доверия */
.lpoints{margin:20px 0 0;border-top:1px solid var(--line)}
.lpoints dt{margin-top:20px;font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-0);
  line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.lpoints dd{margin:7px 0 0;padding-bottom:20px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:var(--s--1);max-width:78ch}
.lpoints dd:last-of-type{border-bottom:0;padding-bottom:0}

/* ---- страницы доверия ---- */
.legal h2{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:-.01em;margin-top:34px}
.legal h2:first-child{margin-top:0}
.legal a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cdetails{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:16px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);font-size:var(--s--1)}
.cdetails dt{color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;align-self:center}
.cdetails dd{margin:0;color:var(--text)}
@media(max-width:560px){.cdetails{grid-template-columns:1fr;gap:2px 0}.cdetails dd{margin-bottom:10px}}
mark.todo{background:rgba(255,97,54,.16);border:1px dashed rgba(255,97,54,.6);color:#FFC4B2;
  padding:1px 6px;border-radius:4px;font-family:"JetBrains Mono",monospace;font-size:.75em}

/* ---- юридическая полоса под футером ---- */
.flegal{grid-column:1/-1;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--dim)}
.flegal nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.flegal a{color:var(--muted)}
.flegal a:hover{color:var(--gold)}

footer.site{border-top:1px solid var(--line);background:var(--panel);margin-top:60px}
footer.site .wrap{padding-block:38px;display:grid;grid-template-columns:1fr 2.6fr;gap:36px}
@media(max-width:820px){footer.site .wrap{grid-template-columns:1fr}}
.fbrand{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-size:1.1rem;margin-bottom:12px}
.fbrand i{font-style:normal;color:var(--gold)}
footer.site p{font-size:.75rem;color:var(--dim);max-width:60ch;line-height:1.65}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1040px){.fcols{grid-template-columns:repeat(2,1fr);gap:24px 20px}}
@media(max-width:560px){.fcols{grid-template-columns:1fr}}
.fcols b{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:"JetBrains Mono",monospace;margin-bottom:10px}
.fcols a{display:block;font-size:var(--s--1);color:var(--muted);padding:3px 0}
.fcols a:hover{color:var(--gold)}

/* ================= WoW Token tracker ================= */
.tk-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);font-size:var(--s--1);margin-bottom:20px}
.tk-banner.live{background:rgba(47,214,166,.1);border:1px solid rgba(47,214,166,.35);color:#9BF0D8}
.tk-banner.sample{background:rgba(232,182,76,.09);border:1px solid rgba(232,182,76,.38);color:#F0D9A8}
.tk-banner b{color:#fff}
.tk-dot{width:8px;height:8px;border-radius:50%;background:var(--jade);box-shadow:0 0 8px var(--jade);flex:none}
@media(prefers-reduced-motion:no-preference){.tk-dot{animation:blip 2.4s ease-in-out infinite}}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}

.tk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.tk-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.tk-cards{grid-template-columns:1fr}}
.tk-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px 18px 16px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);font:inherit;color:inherit;text-align:left;transition:border-color .15s}
.tk-card:hover{border-color:var(--line-hot)}
.tk-card.on{border-color:var(--gold);background:linear-gradient(170deg,rgba(232,182,76,.07),transparent)}
.tk-reg{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tk-gold{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:400;font-size:1.65rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.tk-gold i{font-style:normal;color:var(--gold);font-size:.55em;margin-left:2px}
.tk-ch{font-family:"JetBrains Mono",monospace;font-size:.75rem;font-weight:500}
.tk-ch em{font-style:normal;color:var(--dim);font-size:.9em}
.tk-ch.up{color:var(--ember)}.tk-ch.down{color:var(--jade)}.tk-ch.flat{color:var(--dim)}
.tk-pd{font-size:.6875rem;color:var(--muted);font-family:"JetBrains Mono",monospace;padding-top:6px;margin-top:2px;border-top:1px solid var(--line);width:100%}

.tk-chartwrap{margin-top:20px;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.tk-chead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tk-chead h3{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:0;margin:0;margin-right:auto}
.tk-chart{width:100%;height:auto;display:block;color:var(--gold)}
.tk-chart.down{color:var(--jade)}
.tk-nochart{color:var(--muted);font-size:var(--s--1);max-width:70ch;padding:22px 0}

.tk-compare{margin-top:20px;padding:24px;background:linear-gradient(170deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r)}
.tk-compare h3{font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:0;margin:0 0 14px}
.tk-compare table{width:100%;min-width:0;border-collapse:collapse}
.tk-compare td{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--s--1);color:var(--muted)}
.tk-compare td.num{text-align:right;font-family:"JetBrains Mono",monospace;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tk-compare tr:last-child td{border-bottom:0}
.tk-verdict{margin-top:14px;padding:13px 15px;border-radius:var(--r-sm);font-size:var(--s--1);border-left:2px solid}
.tk-verdict b{color:var(--text)}
.tk-verdict.ours{background:rgba(47,214,166,.08);border-color:var(--jade);color:#A7E8D6}
.tk-verdict.token{background:rgba(139,108,240,.1);border-color:var(--arcane);color:#CDB8FF}
.tk-verdict.even{background:var(--panel-3);border-color:var(--line-hot);color:var(--muted)}
.tk-note{margin-top:12px;font-size:.75rem;color:var(--dim);line-height:1.6;max-width:78ch}

/* ================= realm profile ================= */
.profile{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;margin-top:24px}
@media(max-width:860px){.profile{grid-template-columns:1fr;gap:22px}}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:520px){.pstats{grid-template-columns:1fr}}
.pstats>div{background:var(--panel);padding:18px 20px}
.pstats dt{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.pstats dd{margin:0;font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:400;font-size:1.45rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.pstats dd em{display:block;margin-top:6px;font-style:normal;font-family:Manrope,sans-serif;font-weight:500;font-size:.75rem;color:var(--muted);letter-spacing:0}

.fx{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(170deg,var(--panel-2),var(--panel))}
.fx-bar{display:flex;height:40px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.fx-h,.fx-a{display:flex;align-items:center;justify-content:center;min-width:0;font-family:"JetBrains Mono",monospace;font-size:.8125rem;font-weight:700}
.fx-h{background:linear-gradient(180deg,#8C2F1E,#6B2416);color:#FFD9CF}
.fx-a{background:linear-gradient(180deg,#1E4E8C,#16386B);color:#CFE2FF}
.fx-h b,.fx-a b{font-weight:700}
.fx-legend{display:flex;gap:18px;margin-top:12px}
.fx-k{display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--muted);font-family:"JetBrains Mono",monospace}
.fx-k::before{content:"";width:10px;height:10px;border-radius:3px}
.fx-k.h::before{background:#8C2F1E}
.fx-k.a::before{background:#1E4E8C}
.fx-note{margin-top:14px;font-size:var(--s--1);color:var(--muted);line-height:1.6}

.method{margin-top:24px;padding:16px 18px;border-left:2px solid var(--line-hot);background:var(--panel);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.75rem;color:var(--dim);line-height:1.65;max-width:92ch}
.method b{color:var(--muted)}

/* =========================================================================
   Version cards — cover art fills the card, title sits on top of it.
   Layout follows overgear.com: tight 12px gutters, fixed card heights that
   step up with the viewport, a bottom-weighted scrim so white type stays
   readable over any artwork, and a slow cover zoom on hover.
   ========================================================================= */

/* ---- filter rail above the grid ---- */
.vtabs{display:flex;gap:8px;margin-top:22px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vtabs::-webkit-scrollbar{display:none}
.vtabs>*{flex:0 0 auto;display:inline-flex;align-items:center;min-height:42px;
  padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--panel-3);
  background:var(--panel-2);color:var(--muted);font-size:var(--s--1);font-weight:600;
  white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.vtabs>a:hover{color:var(--text);border-color:var(--line-hot)}
.vtabs>[aria-current]{border-color:var(--gold);background:rgba(232,182,76,.1);color:var(--text)}

/* ---- the grid ---- */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.vgrid .vcard.lead{grid-column:span 2;border-color:rgba(232,182,76,.45)}
.vgrid .vcard.lead:hover{border-color:var(--gold)}
@media(min-width:720px){.vgrid .vcard.lead{height:214px}}
@media(min-width:1040px){.vgrid .vcard.lead{height:280px}}
.vgrid .vcard.lead .vtitle{font-size:1.125rem}
@media(min-width:1040px){.vgrid .vcard.lead .vtitle{font-size:1.75rem}}
@media(min-width:1040px){.vgrid{grid-template-columns:repeat(4,1fr)}}
.vgrid.trio{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.vgrid.trio{grid-template-columns:repeat(3,1fr)}}

/* ---- the card ---- */
.vcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:104px;padding:10px 13px;border-radius:var(--r);border:1px solid var(--line);
  overflow:hidden;background:var(--panel-3);isolation:isolate;
  transition:border-color .16s}
@media(min-width:720px){.vcard{height:150px;padding:14px 17px}}
@media(min-width:1040px){.vcard{height:190px;padding:18px 20px}}
.vcard:hover{border-color:var(--gold)}

.vcover{position:absolute;inset:0;z-index:1;display:block}
.vcover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transition:transform .25s ease-out}
.vcard:hover .vcover img{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){
  .vcover img{transition:none}
  .vcard:hover .vcover img{transform:none}
}

.vscrim{position:absolute;inset:0;z-index:2;transition:background .2s ease-in-out;
  background:linear-gradient(180deg,rgba(11,9,18,0) 0%,rgba(11,9,18,.42) 38%,rgba(11,9,18,.86) 76%,rgba(11,9,18,.97) 100%)}
.vcard:hover .vscrim{background:linear-gradient(180deg,rgba(11,9,18,.2) 0%,rgba(11,9,18,.55) 38%,rgba(11,9,18,.9) 74%,rgba(11,9,18,.99) 100%)}

.vmeta{position:relative;z-index:3;display:flex;flex-direction:column;gap:3px;margin-top:auto}
.vtitle{font-family:Manrope,sans-serif;font-weight:800;font-size:.9375rem;line-height:1.2;
  letter-spacing:-.02em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
@media(min-width:1040px){.vtitle{font-size:1.3125rem}}
.vsub{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.07em;
  color:rgba(255,255,255,.62)}

.vtag{align-self:flex-start;margin-bottom:6px;padding:3px 9px;border-radius:999px;
  font-family:"JetBrains Mono",monospace;font-size:.5625rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);background:rgba(11,9,18,.66);border:1px solid rgba(232,182,76,.5)}


/* Счётчик над листингом и кнопка «показать ещё». Хвост списка прячет скрипт,
   поэтому без JS видны все строки — то же, что видит поисковик. */
.ocount{margin:18px 0 12px;font-family:"JetBrains Mono",monospace;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.omore{display:block;width:100%;margin-top:10px;padding:14px 18px;border-radius:var(--r-sm);
  border:1px dashed var(--line-hot);background:none;color:var(--muted);font:inherit;
  font-family:"JetBrains Mono",monospace;font-size:.75rem;cursor:pointer;transition:.14s}
.omore:hover{border-color:var(--gold);color:var(--gold);border-style:solid}
.ostar{color:var(--gold);font-weight:700}
/* Имя реалма в строке листинга — ссылка на его страницу. Подчёркиваем только
   по наведению, чтобы строка не рябила от семи подчёркиваний. */
.olink{color:inherit;text-decoration:none}
.olink:hover,.olink:focus-visible{color:var(--gold);text-decoration:underline}

/* Реалм, которого никто не продаёт. Не ошибка и не пустое место — состояние
   рынка, о котором сказано словами вместо таблицы с нулём строк. */
.nosale{margin-top:20px;padding:22px 24px;border:1px dashed var(--line-hot);border-radius:var(--r);
  background:var(--panel)}
.nosale b{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);
  color:var(--gold);margin-bottom:8px}
.nosale p{margin:0;color:var(--muted);line-height:1.65;max-width:62ch}
.nosale .fine{margin-top:12px;font-size:var(--s--1);color:var(--dim)}
.nosale a{color:var(--gold);text-decoration:underline}

/* Список реалмов без продавца. Просто ссылки: ни цен, ни остатков, ни
   кнопок — показывать там нечего, а дорога к странице нужна. */
.quiet{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.quiet a{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);font-weight:600;font-size:var(--s--1);color:var(--muted);transition:.14s}
.quiet a:hover{border-color:var(--line-hot);color:var(--text)}

/* ---------- строка доверия ----------
   Полоса под заголовком листинга. Каждое утверждение либо посчитано из
   данных на этой же странице, либо проверяемо на ней. Сводного рейтинга
   витрины здесь нет намеренно — он усредняет проставленные вручную оценки. */
/* Каждый факт — отдельная плашка в золотой рамке: на телефоне строки в
   столбик сливались с текстом над ними (владелец 05.10.2026). */
.tbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 4px;
  font-size:.75rem;color:var(--dim);font-family:"JetBrains Mono",monospace}
.tbar > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:100%;
  padding:6px 12px;border:1px solid rgba(232,182,76,.38);border-radius:999px;background:rgba(232,182,76,.07)}
.tbar b{color:var(--text);font-weight:700}
.tb-rate b{color:var(--gold);font-size:.875rem}
.tb-rate i{font-style:normal;color:var(--gold);letter-spacing:.04em}
.tb-rate em{font-style:normal;color:var(--dim)}
@media(max-width:560px){.tbar > span{white-space:normal;flex-wrap:wrap;border-radius:14px}}

/* --- WoW Forever: прайс-лист ------------------------------------------------
   Семь колонок вместо шести: реалм здесь распался на мегасервер и стиль игры,
   и обе части нужны, потому что цена у них разная. Строки не кликаются — за
   ними нет товара, пока игра не вышла, поэтому ни курсора, ни стрелки. */
.offers--forever .offer{grid-template-columns:.9fr .9fr .7fr 1fr .9fr .8fr 1fr}
.offer--static{cursor:default}
.offer--static:hover{border-color:var(--line);background:var(--panel)}
@media(max-width:860px){
  .offers--forever .offer{grid-template-columns:1fr 1fr 1fr;padding-right:18px}
}

/* --- WoW Forever: бета, живая витрина ---------------------------------------
   Здесь за строками есть товар, поэтому у каждой своя кнопка. Строка всё
   равно не кликается целиком: ящик заказа к бете не цепляется, покупка
   уходит к продавцу через /go/.

   Мобильные правила идут сразу под базовым, а не в общий блок выше по файлу:
   у .offers .offer в медиазапросе та же специфичность, и стоит он раньше —
   базовое правило, дописанное в конец, перебило бы его молча. На этом здесь
   уже обжигались. */
.offers--beta .offer{grid-template-columns:1fr .75fr .85fr .8fr 1fr .75fr auto;
  cursor:default;padding-right:18px}
.offers--beta .offer:hover{border-color:var(--line);background:var(--panel)}
.ocell--go{justify-self:end;min-width:0}
.gobtn{display:inline-block;padding:9px 20px;border-radius:var(--r-sm);
  font-weight:800;font-size:var(--s--1);color:#150E02;white-space:nowrap;
  background:linear-gradient(100deg,var(--gold-2),var(--gold) 55%,#FFE6AE);
  background-size:180% 100%;transition:background-position .25s}
.gobtn:hover,.gobtn:focus-visible{background-position:100% 0}
@media(max-width:860px){
  .offers--beta .offer{grid-template-columns:1fr 1fr 1fr;padding-right:18px;position:static}
  .offers--beta .ocell--price{grid-column:1/-1}
  .offers--beta .ocell--go{grid-column:1/-1;justify-self:stretch;margin-top:6px}
  .offers--beta .gobtn{display:block;text-align:center;padding:12px}
}
@media(max-width:520px){
  .offers--beta .offer{grid-template-columns:1fr 1fr}
}

/* --- значок «new» у пункта меню ---------------------------------------------
   Живёт рядом с текстом пункта, а не в промо-плашке с обложкой: обложки под
   Forever у нас нет, а чужая картинка от другого аддона врала бы человеку.
   Блик пробегает по значку и тянет взгляд к пункту, не дёргая макет: двигается
   только фон, размеры и положение не меняются, соседние пункты стоят на месте.
   Кому анимация мешает — системная настройка её гасит, значок остаётся. */
.mnew{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:999px;
  font-family:"JetBrains Mono",monospace;font-size:.5625rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:#150E02;vertical-align:1px;
  background-image:linear-gradient(100deg,var(--gold-2) 0%,var(--gold) 38%,#FFF0CC 50%,var(--gold) 62%,var(--gold-2) 100%);
  background-size:280% 100%;animation:mnew-shine 3.4s linear infinite}
@keyframes mnew-shine{from{background-position:190% 0}to{background-position:-90% 0}}
.mtop--new{color:var(--gold)}

/* --- значок «live»: продаётся прямо сейчас ----------------------------------
   Второй значок понадобился, когда рядом появились две страницы про одну
   игру: запуск 4 ноября и бета, которая продаётся уже. Один блик на обоих
   пунктах означал бы одно и то же для двух разных состояний.

   Цвет не выбран заново: нефрит в этой системе уже значит наличие — им
   покрашена точка склада в карточке оффера. Поэтому не блик, а спокойная
   пилюля с живой точкой: она показывает, что там что-то происходит, но не
   соревнуется за внимание с золотым соседом. */
.mlive{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:2px 7px;
  border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:.5625rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--jade);
  border:1px solid rgba(47,214,166,.42);background:rgba(47,214,166,.1)}
.mlive i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--jade);
  animation:mlive-pulse 2.2s ease-in-out infinite}
@keyframes mlive-pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media(prefers-reduced-motion:reduce){
  .mnew{animation:none;background-position:50% 0}
  .mlive i{animation:none}
}

/* Кнопка в строке без продавца. Раньше ей ставили класс quiet, занятый
   списком реалмов: его display:grid делал ссылку блочной, и она растягивалась
   на всю ячейку — рядом с «Buy gold» в 82px это выглядело поломкой. */
.pick--soft{color:var(--muted);border-color:var(--line)}
.pick--soft:hover{background:none;border-color:var(--line-hot);color:var(--text)}

/* На телефоне таблицу листают вбок, и первая колонка уезжала за край. Строка
   без имени реалма не значит ничего: цена есть, а к чему она — непонятно.
   Поэтому имя остаётся на месте, а листается всё остальное. */
@media(max-width:860px){
  .scroller thead th:first-child,
  .scroller tbody td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line)}
  .scroller tbody td:first-child{background:var(--panel)}
  .scroller thead th:first-child{background:var(--panel-2)}
  .scroller tbody tr:hover td:first-child{background:var(--panel-2)}
  /* Стрелка › в имени реалма тянула колонку вширь ради украшения. На узком
     экране место дороже. */
  .rname::after{display:none}
}

/* --- таблицы на телефоне: строки становятся карточками ---------------------
   Таблица с min-width:640px на экране в 375px превращалась в ленту, которую
   надо листать вбок, теряя из виду первую колонку. Липкая колонка это лечила
   наполовину: имя оставалось, но всё равно приходилось возить пальцем.

   Ниже 560px таблица перестаёт быть таблицей: каждая строка — карточка, в
   ней подпись слева, значение справа. Подписи проставляет сборка из шапки,
   см. labelCells в src/build.js. Шапка при этом скрывается от глаз, но
   остаётся для скринридеров разметкой таблицы: семантику не ломаем, меняем
   только показ. */
@media(max-width:560px){
  /* Липкая первая колонка отменяется: она лечила боковую прокрутку, а здесь
     прокрутки нет вовсе. Её тень иначе рисует лишнюю вертикальную черту
     посреди карточки. */
  .scroller thead th:first-child,
  .scroller tbody td:first-child{position:static;box-shadow:none;background:none}
  .scroller tbody tr:hover td:first-child{background:none}

  .scroller{overflow-x:visible;border:0;background:none;border-radius:0}
  .scroller table{min-width:0;width:100%;display:block}
  .scroller thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .scroller tbody{display:block}
  .scroller tbody tr{
    display:block;margin-bottom:10px;padding:4px 14px;
    border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
  .scroller tbody tr:hover{background:var(--panel)}
  .scroller tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid var(--line-soft, var(--line));text-align:left}
  .scroller tbody tr td:last-child{border-bottom:0}
  /* Подпись из шапки. Пустая подпись — у колонки без заголовка, например со
     ссылкой: там строка остаётся одной кнопкой во всю ширину. */
  .scroller tbody td[data-label]::before{
    content:attr(data-label);flex:0 0 auto;
    font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.07em;
    text-transform:uppercase;color:var(--dim)}
  .scroller tbody td[data-label=""]::before{content:none}
  /* Колонка со ссылкой озаглавлена «Link» только ради скринридера. В карточке
     эта подпись — шум рядом с кнопкой, которая и так называет действие. */
  .scroller tbody td[data-label="Link"]::before{content:none}
  .scroller tbody td .pick{display:block;width:100%;text-align:center}

  /* Значение занимает остаток строки и переносится, а не упирается в край.
     min-width:0 обязателен: без него flex-элемент отказывается сжиматься
     ниже своего содержимого и вылезает за карточку — именно так имя реалма
     и уезжало под правую границу. */
  .scroller tbody td > *{min-width:0}
  .scroller tbody td .rname{
    flex:1 1 auto;min-width:0;justify-content:flex-end;text-align:right;
    white-space:normal;font-size:var(--s-0)}
  .scroller tbody td .rname em{text-align:right}
  .scroller tbody td:first-child{padding-top:12px;align-items:center}
}

/* Плашка на карточке Forever. Тот же размер и форма, что у «current
   expansion», но зелёная: рядом стоят две крупные карточки, и одинаковые
   золотые плашки на обеих читались бы как одно и то же состояние. */
.vtag--new{color:var(--jade);border-color:rgba(47,214,166,.55)}

/* Светлая обложка под тёмной вуалью. Вуаль рассчитана на тёмный арт: на
   восемьдесят шесть процентов черноты бледная картинка превращается в серое
   пятно и карточка читается как пустая. Здесь вуаль слабее, а текст держится
   на почти непрозрачном низу и собственной тени. */
.vcard--pale .vscrim{
  background:linear-gradient(180deg,rgba(11,9,18,0) 0%,rgba(11,9,18,.16) 34%,rgba(11,9,18,.58) 72%,rgba(11,9,18,.9) 100%)}
.vcard--pale:hover .vscrim{
  background:linear-gradient(180deg,rgba(11,9,18,.08) 0%,rgba(11,9,18,.3) 34%,rgba(11,9,18,.68) 72%,rgba(11,9,18,.94) 100%)}
/* Кадр смещён к фигуре: на низкой карточке видна только узкая полоса, и без
   этого в неё попадало одно небо. */
.vcard--pale .vcover img{object-position:58% 26%}
/* Подпись на светлой обложке. Общий цвет — белый в 62% прозрачности, он
   рассчитан на тёмный фон; на светлом небе такая строка почти пропадает. */
.vcard--pale .vsub{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.85)}

/* --- окно подписки на запуск Forever ----------------------------------------
   Появляется само, поэтому не должно ощущаться как подстава: затемнение мягкое,
   крестик крупный и первый в порядке обхода, закрыть можно тремя способами.
   Карточка в две колонки — арт и текст; на телефоне арт становится полосой
   сверху, потому что в столбик он съедал бы весь экран. */
.sub{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  opacity:0;transition:opacity .2s ease}
.sub.is-on{opacity:1}
.sub-back{position:absolute;inset:0;background:rgba(4,4,8,.72);backdrop-filter:blur(3px)}

.sub-card{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100dvh - 40px);
  overflow:auto;display:grid;grid-template-columns:260px 1fr;
  border:1px solid var(--line-hot);border-radius:var(--r);background:var(--panel);
  box-shadow:0 40px 90px -30px #000,0 0 0 1px rgba(0,0,0,.5);
  transform:translateY(10px) scale(.985);transition:transform .22s ease}
.sub.is-on .sub-card{transform:none}

/* Арт под золотой вуалью: сам он светлый, а текст рядом белый. */
/* Кроп считан, а не подобран. Картинка 1100x825, голова занимает x 700-1000,
   y 30-290. В колонке 260x324 cover масштабирует по высоте (x0.393) и вбок
   вылезает 172 px: при 62% окно показывало 107-367, а голова кончается на 393
   — срезало затылок. 88% даёт окно 151-411, голова целиком и с запасом. */
.sub-art{background-size:cover;background-position:88% 50%;position:relative;min-height:260px}
.sub-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(11,9,18,.1) 0%,rgba(11,9,18,.35) 62%,var(--panel) 100%)}

.sub-body{padding:30px 32px;display:flex;flex-direction:column;gap:13px;min-width:0}
.sub-kicker{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.sub-title{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:400;font-size:var(--s-3);
  line-height:1.12;letter-spacing:-.02em;margin:0}
.sub-title b{color:var(--gold);font-weight:inherit}
.sub-lede{color:var(--muted);font-size:var(--s--1);line-height:1.6}

.sub-form{display:flex;gap:8px;margin-top:4px}
@media(max-width:520px){.sub-form{flex-direction:column}}
.sub-input{flex:1 1 auto;min-width:0;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-hot);background:var(--void);color:var(--text);
  font:inherit;font-size:var(--s--1)}
.sub-input::placeholder{color:var(--dim)}
.sub-input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.sub-go{flex:none;padding:12px 20px;border:0;border-radius:var(--r-sm);cursor:pointer;
  font:inherit;font-weight:800;font-size:var(--s--1);color:#150E02;
  background:linear-gradient(100deg,var(--gold-2),var(--gold) 55%,#FFE6AE);
  background-size:180% 100%;transition:background-position .25s}
.sub-go:hover{background-position:100% 0}
.sub-go:disabled{opacity:.6;cursor:default}

.sub-err{color:var(--ember);font-size:.8125rem}
.sub-fine{color:var(--dim);font-size:.6875rem;line-height:1.5}

.sub-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;font-size:1.3rem;line-height:1;
  border:1px solid var(--line-hot);border-radius:var(--r-sm);
  background:rgba(11,9,18,.7);color:var(--text)}
.sub-x:hover{background:var(--panel-2);border-color:var(--gold);color:var(--gold)}

/* Пока окно открыто, страница за ним не прокручивается. */
body.sub-open{overflow:hidden}

@media(max-width:700px){
  .sub-card{grid-template-columns:1fr}
  /* В полосе 335x132 cover идёт по ширине (x0.305) и вниз вылезает 119 px:
     при 18% верх головы уходил за край на 12 px. 3% оставляет её целиком. */
  .sub-art{min-height:132px;background-position:60% 3%}
  .sub-art::after{background:linear-gradient(180deg,rgba(11,9,18,.1) 0%,rgba(11,9,18,.5) 60%,var(--panel) 100%)}
  .sub-body{padding:22px 20px}
}

@media(prefers-reduced-motion:reduce){
  .sub,.sub-card{transition:none}
  .sub-go{transition:none}
}

/* ==========================================================================
   Бустинг: раздел /wow-boost/ (модуль vendor/boost). Источник этого блока —
   vendor/boost/boost.css; в site.css он дописан целиком. Блоки перенесены из
   макетов 03–04.10.2026. Классы новые (b-, secban-), ни с чем выше по файлу
   не пересекаются; существующие .tcard/.trust/.steps только дополнены
   модификаторами. Мобильные правила стоят сразу за своими базовыми.
   ========================================================================== */
.pill--hot{color:var(--gold);border-color:rgba(247,188,76,.35);background:rgba(247,188,76,.08)}
.bgroup{margin-top:34px}
.bgroup:first-of-type{margin-top:26px}
.bgroup-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bgroup-head h3{margin:0}
.bgroup-head span{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media(max-width:940px){.bcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bcards{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px 20px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .14s}
.bcard:hover{border-color:var(--line-hot)}
.bcard-media{position:relative;margin:-20px -20px 0;aspect-ratio:16/9;overflow:hidden;background:var(--void)}
.bcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.bcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,22,0) 55%,rgba(14,14,22,.85) 100%)}
.bcard:hover .bcard-media img{transform:scale(1.05)}
.bcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bcard-name{margin:0;font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);line-height:1.3;letter-spacing:-.01em}
.bcard-name a{color:inherit}
.bcard-name a:hover{color:var(--gold)}
.bcard-flags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bcard-sec{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bcard-list{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:var(--s--1);color:var(--muted);line-height:1.45}
.bcard-list li{position:relative;padding-left:17px}
.bcard-list li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.bchips{display:flex;flex-wrap:wrap;gap:6px}
.bchip{padding:3px 8px;border:1px solid var(--line);border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.bcard-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.bprice{display:flex;flex-direction:column;min-width:0;margin:0}
.bprice em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bprice i{font-style:normal;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--s-2);color:var(--gold);line-height:1.2}
.bprice small{font-size:.75rem;color:var(--muted)}
.bprice--none i{font-size:var(--s-0);color:var(--muted)}
.bcard .gobtn{flex:none}
@media(max-width:620px){.bcard-foot{flex-direction:column;align-items:stretch}.bcard .gobtn{text-align:center;padding:12px}}
.trust--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.trust--three{grid-template-columns:1fr}}
.tcard-tag{display:inline-block;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--jade)}
.tcard-tag--cost{color:var(--gold)}
.bnext{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cell-strong{color:var(--text);font-weight:700}
.cell-note{color:var(--muted);font-size:.8125rem}
.bnosale{margin-top:22px;padding:16px 18px;border:1px solid var(--line-hot);border-radius:var(--r);background:var(--panel)}
.bnosale p{margin:6px 0 0;color:var(--muted)}
.bnosale .bnosale-tag{margin:0;font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.seo-text h3{margin:32px 0 6px}
.seo-text ul{margin:14px 0 0;padding-left:20px;color:var(--muted);max-width:74ch}
.seo-text li{margin-top:10px}
/* раздел: боковое меню + содержимое; на телефоне меню сворачивается в кнопку */
.blayout{max-width:1140px;margin-inline:auto;padding-inline:20px;display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:1200px){.blayout{grid-template-columns:260px minmax(0,1fr);gap:28px}}
.bmain{min-width:0}
.blayout .wrap{max-width:none;padding-inline:0}
.bside{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
@media(min-width:1200px){.bside{position:sticky;top:84px;align-self:start;margin-top:24px;max-height:calc(100vh - 100px);overflow:auto}}
.bside-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 20px;background:none;border:0;color:var(--text);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.bside-toggle svg{width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .2s}
.bside-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.bside-list{display:none;padding-bottom:10px}
.bside.is-open .bside-list{display:block;border-top:1px solid var(--line)}
@media(min-width:1200px){.bside-toggle{display:none}.bside-list{display:block}}
.bside-label{margin:0;padding:18px 20px 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bside ul{list-style:none;margin:0;padding:0}
.bside-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bside-row a{flex:1;padding:12px 20px;font-size:15px;color:var(--muted)}
.bside-row a:hover,.bside-sub a:hover{color:var(--text);background:var(--panel-2)}
.bside-row a[aria-current=page],.bside-sub a[aria-current=page]{color:var(--text);background:var(--panel-2);box-shadow:inset 3px 0 0 var(--gold)}
.bside-plus{flex:none;width:36px;height:36px;margin-right:10px;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.bside-plus:hover{color:var(--text);background:var(--panel-2)}
.bside-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.bside-plus[aria-expanded=true] .bside-v{display:none}
.bside-sub a{display:block;padding:9px 20px 9px 36px;font-size:14px;color:var(--dim)}
.bside :is(a,button):focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* хаб: баннеры разделов — сетка и шкала с overgear.com: телефон — ряд 252x88 со
   скроллом вбок, от 1200px — четыре колонки 160px, от 1536px — 198px */
.secban{display:grid;grid-template-columns:repeat(8,252px);gap:12px;overflow-x:auto;margin-top:20px}
@media(min-width:768px){.secban{gap:24px}}
@media(min-width:1200px){.secban{grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:hidden;margin-top:24px}}
.secban-card{position:relative;display:flex;overflow:hidden;height:88px;width:252px;border-radius:16px;padding:12px 16px;background:var(--void);isolation:isolate}
@media(min-width:1200px){.secban-card{height:160px;width:100%;padding:20px 24px}}
@media(min-width:1536px){.secban-card{height:198px}}
.secban-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.secban-bg{position:absolute;inset:0;z-index:0;overflow:hidden;transition:transform .3s}
.secban-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.secban-card:hover .secban-bg{transform:scale(1.1)}
.secban-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,12,.9) 0%,rgba(7,7,12,.55) 38%,rgba(7,7,12,0) 68%)}
.secban-txt{position:relative;z-index:2;display:flex;height:100%;width:55%;align-items:flex-end;color:#fff;font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:24px;font-weight:800}
@media(min-width:1200px){.secban-txt{font-size:22px;line-height:28px}}
@media(prefers-reduced-motion:reduce){.secban-bg,.bcard-media img{transition:none}.secban-card:hover .secban-bg,.bcard:hover .bcard-media img{transform:none}}
/* маунты: каталог с поиском */
.blist-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.blist-tools input{flex:1 1 240px;min-width:0;padding:11px 14px;border-radius:10px;border:1px solid var(--line-hot);background:var(--panel);color:var(--text);font:inherit;font-size:16px}
.blist-tools select{padding:11px 12px;border-radius:10px;border:1px solid var(--line-hot);background:var(--panel);color:var(--text);font:inherit}
.blist-tools input:focus,.blist-tools select:focus{outline:2px solid var(--gold);outline-offset:1px}
.blist-count{font-size:.75rem;color:var(--dim);margin-top:10px}
.blist{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.blist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.blist li:last-child{border-bottom:0}
.blist .bl-name{min-width:0;overflow-wrap:anywhere;font-weight:600}
.blist .bl-price{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.blist .bl-go{font-size:.8125rem;font-weight:700;color:var(--gold);white-space:nowrap}
.blist .bl-go:hover{text-decoration:underline}
.blist-more{margin-top:12px;padding:11px 18px;border-radius:var(--r-sm);border:1px solid var(--line-hot);background:none;color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.blist-more:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:560px){.blist li{grid-template-columns:minmax(0,1fr) auto}.blist .bl-go{grid-column:1/-1}}
/* вес в интерфейсе — классом, не тегом: <b> в разметке раздела нет */
.tbar .tbar-v{color:var(--text);font-weight:700}
.steps li .step-t{font-size:var(--s-0);font-weight:800}
.bget{margin-top:14px;max-width:74ch}
.bgroup-head h3 a{color:inherit}
.bgroup-head h3 a:hover{color:var(--gold)}
.scroller td a:hover .cell-strong{color:var(--gold)}
/* строки каталога, скрытые до «показать ещё»: .blist li{display:grid} иначе перебивает hidden */
.blist li[hidden],.blist-more[hidden]{display:none}
/* хаб: цены по разделам — аккордеон. Свёрнуто: название, число услуг, «from»
   и плюс; раскрыто: медиана, верх, самая дешёвая услуга, ссылка в раздел */
.bcost{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.bcost-row + .bcost-row{border-top:1px solid var(--line)}
.bcost-row summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;transition:background .14s}
.bcost-row summary::-webkit-details-marker{display:none}
.bcost-row summary:hover{background:var(--panel-2)}
.bcost-row summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.bcost-name{min-width:0;font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);line-height:1.25;color:var(--text)}
.bcost-name small{display:block;margin-top:3px;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bcost-from{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--s-1);color:var(--gold);white-space:nowrap}
.bcost-from em{font-style:normal;font-weight:400;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.bcost-plus{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-hot);display:grid;place-items:center;color:var(--muted);transition:transform .2s,border-color .2s,color .2s}
.bcost-plus svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bcost-row[open] .bcost-plus{transform:rotate(45deg);border-color:var(--gold);color:var(--gold)}
.bcost-row[open] summary{background:var(--panel-2)}
.bcost-body{padding:4px 18px 18px;background:var(--panel-2)}
.bcost-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
@media(min-width:620px){.bcost-stats{grid-template-columns:1fr 1fr 2fr}}
.bcost-stat{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.bcost-stat--wide{grid-column:1/-1}
@media(min-width:620px){.bcost-stat--wide{grid-column:auto}}
.bcost-stat dt{font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bcost-stat dd{margin:5px 0 0;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.bcost-stat--wide dd{font-family:Manrope,sans-serif;font-weight:700}
.bcost-go{display:inline-block;margin-top:14px;font-size:.8125rem;font-weight:700;color:var(--gold)}
.bcost-go:hover{text-decoration:underline}
@media(max-width:420px){.bcost-row summary{gap:10px;padding:14px}.bcost-body{padding:4px 14px 14px}}
@media(prefers-reduced-motion:reduce){.bcost-plus,.bcost-row summary{transition:none}}
/* шапка раздела бустинга с картинкой: картинка справа, растворяется влево
   в тёмный фон; на телефоне уходит наверх и приглушается под заголовок */
.head--art{position:relative;isolation:isolate;overflow:hidden}
.head--art::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:min(64%,820px);background:var(--head-art) right center/cover no-repeat;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 30%,#000 62%)}
.head--art::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,var(--void));pointer-events:none}
@media(max-width:760px){.head--art::before{width:100%;height:300px;bottom:auto;opacity:.34;background-position:72% center;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%)}}
/* лента разделов на телефоне листается пальцем: без полосы прокрутки, с
   доводкой к карточке */
.secban{scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.secban::-webkit-scrollbar{display:none}
.secban-card{scroll-snap-align:start}
/* аккордеон цен, правка владельца 04.10.2026: один плюс (общий плюс сайта у
   summary убран), квадрат крупнее и жёлтый, цена — к центру строки */
.bcost-row summary::after{content:none;display:none}
.bcost-row summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px;gap:12px}
.bcost-from{justify-self:start}
.bcost-plus{width:46px;height:46px;border-radius:10px;border-color:rgba(247,188,76,.45);color:var(--gold)}
.bcost-plus svg{width:20px;height:20px;stroke-width:2}
.bcost-row summary:hover .bcost-plus{border-color:var(--gold)}
@media(max-width:420px){.bcost-row summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:10px}.bcost-plus{width:44px;height:44px}.bcost-name{font-size:1.0625rem}}
/* таблицы раздела на телефоне — аккордеон (assets/boost.js ставит .btab-on):
   первая ячейка — заголовок карточки с ценой-подсказкой и жёлтым плюсом */
.btab-peek,.btab-plus{display:none}
@media(max-width:560px){
  .btab-on tbody tr{padding:0 14px}
  .btab-on tbody td:first-child{cursor:pointer;align-items:center;gap:12px;padding:14px 0;border-bottom:0}
  .btab-on tbody td:first-child::before{content:none}
  .btab-on tbody td:first-child:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
  .btab-on tbody tr:not(.is-open) td:not(:first-child){display:none}
  .btab-on tbody tr.is-open td:first-child{border-bottom:1px solid var(--line)}
  .btab-on tbody tr.is-open{background:var(--panel-2)}
  .btab-t{flex:1;min-width:0;font-family:Manrope,sans-serif;font-weight:800;font-size:1.0625rem;color:var(--text)}
  .btab-t .cell-strong{font-weight:800}
  .btab-peek{display:block;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold);white-space:nowrap}
  .btab-plus{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid rgba(247,188,76,.45);color:var(--gold);transition:transform .2s,border-color .2s}
  .btab-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .btab-on tbody tr.is-open .btab-plus{transform:rotate(45deg);border-color:var(--gold)}
}
@media(prefers-reduced-motion:reduce){.btab-plus{transition:none}}
/* лента разделов, замечание владельца 04.10.2026: плашки отделены друг от друга —
   рамка, скругление и свой фон с лёгким свечением вместо чёрного; картинка в
   правой части плашки и растворяется влево, название стоит на чистом фоне */
.secban-card{border:1px solid var(--line-hot);background:radial-gradient(120% 150% at 88% 50%,rgba(139,92,246,.26),transparent 62%),radial-gradient(90% 120% at 0% 100%,rgba(247,188,76,.10),transparent 60%),linear-gradient(135deg,#171425,#0E0E16);transition:border-color .2s,transform .2s}
.secban-card:hover{border-color:rgba(247,188,76,.6)}
.secban-bg{left:34%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.secban-bg img{object-position:64% center}
.secban-shade{background:linear-gradient(90deg,rgba(14,14,22,.55) 0%,rgba(14,14,22,0) 45%)}
.secban-txt{width:52%;font-size:15px;line-height:20px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media(min-width:1200px){.secban-bg{left:22%}.secban-txt{width:60%;font-size:20px;line-height:26px}}
/* при раскрытии крутится только плюс (становится крестиком), квадрат стоит на месте */
.bcost-row[open] .bcost-plus,.btab-on tbody tr.is-open .btab-plus{transform:none}
.bcost-plus svg,.btab-plus svg{transition:transform .2s}
.bcost-row[open] .bcost-plus svg,.btab-on tbody tr.is-open .btab-plus svg{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.bcost-plus svg,.btab-plus svg{transition:none}}
/* скрытая шапка таблицы на телефоне: у table-header-group обрезка не работает,
   и длинные заголовки колонок распирали страницу вбок — делаем её блоком */
@media(max-width:560px){.bmain .scroller thead{display:block;left:0;top:0}}
/* подсказка-цена в заголовке аккордеона не вытесняет название */
@media(max-width:560px){.btab-t{min-width:40%}.btab-peek{max-width:42%;overflow:hidden;text-overflow:ellipsis}}
/* значение ячейки в карточке-строке переносится, а не тянется в линию */
@media(max-width:560px){.bmain .scroller tbody td{flex-wrap:wrap}.bmain .scroller .cell-v{flex:1 1 0;min-width:0;text-align:right;overflow-wrap:anywhere}}
/* цена и кнопка в плашке услуги: когда места мало, кнопка уходит под цену,
   а не обрезает её ($251.99 показывалось как $251.9) */
.bcard-foot{flex-wrap:wrap}
.bcard-foot .bprice{flex:1 0 auto}
/* таблицы «босс — добыча»: список предметов с ромбами, как в плашках услуг */
.bloot{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.bloot li{position:relative;padding-left:16px;text-align:left}
.bloot li::before{content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.bloot .cell-note{margin-left:4px}
@media(max-width:560px){
  .btab-two tbody tr{padding:0 16px 14px}
  .btab-two tbody td:first-child{display:block;padding:16px 0 12px;border-bottom:1px solid var(--line)}
  .btab-two tbody td:first-child::before{content:none}
  .btab-two tbody td:first-child,.btab-two tbody td:first-child .cell-strong{font-family:Manrope,sans-serif;font-weight:800;font-size:1.1875rem;line-height:1.3;color:var(--text)}
  .btab-two tbody td:nth-child(2){display:block;padding:12px 0 0;border-bottom:0}
  .btab-two tbody td:nth-child(2)::before{display:block;margin-bottom:10px}
  .btab-two .cell-v{display:block;text-align:left}
}
/* таблицы «название — значение» на телефоне: одна карточка, строки внутри */
@media(max-width:560px){
  .btab-kv tbody{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:2px 16px}
  .btab-kv tbody tr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
  .btab-kv tbody tr:last-child{border-bottom:0}
  .btab-kv tbody td{display:block;padding:0;border:0}
  .btab-kv tbody td::before{content:none}
  .btab-kv tbody td:first-child,.btab-kv tbody td:first-child .cell-strong{flex:0 1 auto;color:var(--muted);font-weight:600;font-size:var(--s--1)}
  .btab-kv tbody td:nth-child(2){flex:1 1 auto;min-width:0;text-align:right;color:var(--text)}
  .btab-kv .cell-v{text-align:right}
}
/* подписи колонок в карточке «название — значение» не нужны: общий стиль сайта ставит их через [data-label] */
@media(max-width:560px){.btab-kv tbody td[data-label]::before{content:none}}
/* строка «and N more pieces» в списке добычи — без ромба */
.bloot li.bloot-more{padding-left:0}.bloot li.bloot-more::before{display:none}.bloot li.bloot-more .cell-note{margin-left:0}
/* правки владельца 05.10.2026: заголовок карточки «босс — добыча» слева, а не
   вправо; серое уточнение (слот, «final boss») отодвинуто от названия */
@media(max-width:560px){.btab-two tbody td:first-child .cell-v{text-align:left}}
.bmain .scroller .cell-note,.bloot .cell-note{margin-left:.2em}

/* Подсказки Wowhead к предметам (раздел бустинга, 05.10.2026) — как на
   wowgoldshop.eu. Карточку рисует их скрипт прямо в body; наше дело — не дать
   ей вылезти за край узкого экрана и одеть плашку «Tap Link» в нашу гамму. */
.wowhead-tooltip{max-width:calc(100vw - 20px)}
#wowhead-tooltip-screen-caption{background:#13141c;border-top:2px solid #ffd100}
#wowhead-tooltip-screen-caption a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;color:#ffd100;text-decoration:none;font-size:0}
#wowhead-tooltip-screen-caption a::before{content:"";width:22px;height:22px;flex:none;background:url(https://wow.zamimg.com/images/logos/wh-logo-thumbnail.png) center/contain no-repeat}
#wowhead-tooltip-screen-caption a::after{content:"Go to Wowhead";font:600 .95rem/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;color:#ffd100}
/* Ссылка на предмет: цвет качества ставит скрипт Wowhead (colorLinks), мы
   только подчёркиваем при наведении. */
.whlink{text-decoration:none}
.whlink:hover{text-decoration:underline;text-underline-offset:3px}
/* Плашки боссов на страницах подземелий (05.10.2026): та же рамка, что у
   карточек услуг; на широком экране две в ряд — списки добычи длинные. */
.bcards--boss{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.bcards--boss{grid-template-columns:1fr}}
.bboss .bcard-top{padding-bottom:14px;border-bottom:1px solid var(--line)}
.bboss-label{margin:0 0 10px;font-family:"JetBrains Mono",monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bboss .bloot{font-size:var(--s--1);line-height:1.45}
/* Плашки услуг в ряду — по общим строкам (05.10.2026, замечание владельца:
   цена и черта прыгали по высоте). Картинка, название, пункты, способы,
   цена и кнопка встают каждая на свою строку, высота строки общая для ряда
   (subgrid). Дополнительная строка под ценой занимает место в своей строке,
   кнопки — на одной линии. На телефоне плашка одна в ряд — правило не нужно. */
@media(min-width:621px){
  .bcards:not(.bcards--boss)>.bcard{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:14px}
  .bcards:not(.bcards--boss)>.bcard>.bcard-media{grid-row:1}
  .bcards:not(.bcards--boss)>.bcard>.bcard-top{grid-row:2}
  .bcards:not(.bcards--boss)>.bcard>.bcard-list{grid-row:3;align-self:start}
  .bcards:not(.bcards--boss)>.bcard>.bchips{grid-row:4;align-self:end}
  .bcards:not(.bcards--boss)>.bcard>.bcard-foot{grid-row:5/span 2;display:grid;grid-template-rows:subgrid;row-gap:14px;margin-top:0;align-items:start}
  .bcards:not(.bcards--boss)>.bcard>.bcard-foot>.bprice{grid-row:1}
  .bcards:not(.bcards--boss)>.bcard>.bcard-foot>.gobtn{grid-row:2;justify-self:start;align-self:end}
}

/* ==========================================================================
   Главная Emberkeep: две «двери» (золото и бустинг), ряд разделов бустинга и
   карточки «с чего начать сезон». Классы новые, ни с чем выше не пересекаются;
   мобильные правила стоят сразу за своими базовыми.
   ========================================================================== */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
@media(max-width:860px){.doors{grid-template-columns:1fr}}
.door{position:relative;padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.door::before,.door::after{content:"";position:absolute;width:12px;height:12px;opacity:.75;pointer-events:none}
.door::before{top:7px;left:7px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.door::after{bottom:7px;right:7px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
.door-k{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.door-t{margin-top:6px;font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:700;font-size:var(--s-2);line-height:1.2}
.door-p{margin-top:6px;color:var(--muted);font-size:.9375rem}
.door-l{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
@media(max-width:520px){.door-l{grid-template-columns:1fr}}
.door-l a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--text);font-weight:600;font-size:.9375rem}
.door-l a:hover{background:var(--panel-3);color:var(--gold)}
.door-l em{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.75rem;color:var(--dim);white-space:nowrap}
.hsec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
@media(max-width:940px){.hsec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hsec-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:150px;padding:14px 16px;overflow:hidden;isolation:isolate;border:1px solid var(--line-hot);border-radius:var(--r);background:radial-gradient(120% 140% at 85% 40%,rgba(139,108,240,.28),transparent 62%),linear-gradient(135deg,var(--panel-2),var(--void))}
.hsec-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:68% center;transition:transform .3s}
.hsec-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,9,18,.92) 8%,rgba(11,9,18,.25) 70%)}
.hsec-card:hover{border-color:var(--gold)}
.hsec-card:hover img{transform:scale(1.06)}
.hsec-name{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:700;font-size:var(--s-1);line-height:1.2;color:var(--text)}
.hsec-meta{font-family:"JetBrains Mono",monospace;font-size:.6875rem;letter-spacing:.06em;color:var(--muted)}
@media(max-width:520px){.hsec-card{min-height:120px;padding:12px}}
.hstart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
@media(max-width:940px){.hstart{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hstart{grid-template-columns:1fr}}
.hstart-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.hstart-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--void)}
.hstart-card:hover{border-color:var(--line-hot)}
.hstart-name{padding:14px 16px 0;font-weight:800;font-size:var(--s-1);line-height:1.3}
.hstart-price{padding:4px 16px 16px;color:var(--dim);font-size:.8125rem}
.hstart-v{color:var(--gold);font-weight:700;font-size:var(--s-1)}
@media(prefers-reduced-motion:reduce){.hsec-card img{transition:none}.hsec-card:hover img{transform:none}}

/* Emberkeep: подписи, которые раньше были <b>. Вес — классом, не тегом
   (правило владельца: жирного в текстах нет). */
.buys .buy-k{color:var(--text)}
.alert .alert-t{display:block;color:#fff;font-size:var(--s-1);margin:0 0 8px}
.nosale .nosale-t,.nosale .go-k{display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:var(--s-1);color:var(--gold);margin:0 0 8px}
/* Тёмная тема — единственная: полосы прокрутки и поля форм в тон. */
:root{color-scheme:dark}