/* ---------- шрифты ----------
   Лежат у нас, а не на 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:"Archivo Black";src:url(fonts/archivo-black.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --void:#07070C; --panel:#0E0E16; --panel-2:#14141F; --panel-3:#1B1B29;
  --line:#242434; --line-hot:#33334A;
  --text:#F3F1EC; --muted:#9793A6; --dim:#6B6779;
  --gold:#F7BC4C; --gold-2:#E09A20;
  --arcane:#8B5CF6; --arcane-2:#6D3FF0;
  --jade:#2FD6A6; --ember:#FF6136;
  --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:"Archivo Black",Impact,system-ui,sans-serif;font-weight:400;line-height:1.08;text-wrap:balance;letter-spacing:-.02em}
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(7,7,12,.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:"Archivo Black",sans-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)}
.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(247,188,76,.4);border-radius:var(--r-sm);overflow:hidden;
  /* Арт под тёмной вуалью: слева почти непрозрачно, чтобы текст читался,
     справа открывается фигура. */
  background-image:
    linear-gradient(100deg,rgba(7,7,12,.95) 0%,rgba(7,7,12,.88) 38%,rgba(7,7,12,.55) 72%,rgba(7,7,12,.3) 100%),
    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(247,188,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,92,246,.18),transparent 60%),radial-gradient(50% 90% at 85% 10%,rgba(247,188,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:"Archivo Black",sans-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(247,188,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:"Archivo Black",sans-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(247,188,76,.7)}

.scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-top:22px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--s--1)}
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)}
tbody td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
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(7,7,12,.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(247,188,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(247,188,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:"Archivo Black",sans-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:"Archivo Black",sans-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(247,188,76,.09);border:1px solid rgba(247,188,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(247,188,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:"Archivo Black",sans-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,92,246,.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:"Archivo Black",sans-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(247,188,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(247,188,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(7,7,12,0) 0%,rgba(7,7,12,.42) 38%,rgba(7,7,12,.86) 76%,rgba(7,7,12,.97) 100%)}
.vcard:hover .vscrim{background:linear-gradient(180deg,rgba(7,7,12,.2) 0%,rgba(7,7,12,.55) 38%,rgba(7,7,12,.9) 74%,rgba(7,7,12,.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(7,7,12,.66);border:1px solid rgba(247,188,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)}

/* ---------- строка доверия ----------
   Полоса под заголовком листинга. Каждое утверждение либо посчитано из
   данных на этой же странице, либо проверяемо на ней. Сводного рейтинга
   витрины здесь нет намеренно — он усредняет проставленные вручную оценки. */
.tbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:14px 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}
.tbar > span + span{padding-left:20px;border-left:1px solid var(--line)}
.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:700px){.tbar > span + span{padding-left:0;border-left:0}}

/* --- 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}
}

/* --- значок «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)}
@media(prefers-reduced-motion:reduce){
  .mnew{animation:none;background-position:50% 0}
}

/* Кнопка в строке без продавца. Раньше ей ставили класс 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(7,7,12,0) 0%,rgba(7,7,12,.16) 34%,rgba(7,7,12,.58) 72%,rgba(7,7,12,.9) 100%)}
.vcard--pale:hover .vscrim{
  background:linear-gradient(180deg,rgba(7,7,12,.08) 0%,rgba(7,7,12,.3) 34%,rgba(7,7,12,.68) 72%,rgba(7,7,12,.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)}