/* Страницы «Что нового» (/game/news) и «Как играть» (/game/guide) — Колесо хаоса v4. Тот же ар-деко Deadlock, что у
   страницы игры (game.css): сажа, латунь, крем, бирюза душ. Цвета — те же токены (тест сверяет их с game.css), но файл
   свой и маленький: страницы читают, а не играют, — ни арены, ни Three.js, ни скриптов игры. Картинки — арт из web/art. */
:root {
  --bg-page: #121510; --bg-sunk: #0d100c; --surface-1: #1a1f17; --surface-2: #262e22; --surface-3: #303a2b;
  --line: #3a4432; --line-brass: #6e5326; --brass: #c9a45c; --brass-hi: #ecd08a;
  --text: #f1e6c8; --text-dim: #bdb39a; --on-brass: #2a1d08; --on-soul: #0d2a22;
  --soul: #7fe0bf; --soul-deep: #2f8f78; --points: #9146ff; --amber: #d9a441; --sapphire: #5b9bd5; --spirit: #a77bd9;
  --call: #f0b57a; --danger: #e5533d; --danger-soft: #ffb3a8;
  --display: "Playfair Display SC", Georgia, serif; --ui: "Jost", "Segoe UI", "Roboto", sans-serif;
  --r-2: 4px; --r-3: 6px; --t-fast: 120ms;
  /* редкости карточек и ветки прокачки — как на оверлее и странице персонажа */
  --brass-card: #b08d57; --silver: #c9d1d9; --gold: #f2c14e; --chaos: #9b5cff;
  --weapon: #e0892e; --vitality: #6aa84f; --spirit-branch: #a77bd9;
  --wrap: 1180px; --gut: 24px;
}
* { box-sizing: border-box; }
html { background: var(--bg-page); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.55 var(--ui); overflow-x: hidden; background:
  radial-gradient(1200px 600px at 85% -10%, rgba(201,164,92,.10), transparent 60%),
  radial-gradient(900px 600px at -10% 40%, rgba(127,224,191,.06), transparent 60%), var(--bg-page); }
a { color: var(--brass-hi); text-underline-offset: 3px; }
a:hover { color: #fff3cc; }
img { max-width: 100%; }
b, strong { font-weight: 600; color: #fff7de; }
p { margin: 0 0 12px; }
code { font: 600 .92em/1.3 var(--ui); background: rgba(201,164,92,.12); color: var(--brass-hi); padding: 1px 7px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(201,164,92,.25); white-space: nowrap; }
.dim { color: var(--text-dim); }
.soul { color: var(--soul); }
.nw { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- шапка */
.dtop { position: relative; z-index: 5; display: flex; align-items: center; gap: 18px; min-height: 56px; padding: 0 var(--gut);
  background: rgba(26,31,23,.96); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px var(--line-brass), 0 0 18px rgba(201,164,92,.35); }
.brand b { display: block; font: 900 17px/1 var(--display); color: var(--brass-hi); letter-spacing: .04em; }
.brand i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.dnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.dnav a { padding: 8px 12px; border-radius: var(--r-2); color: var(--text-dim); text-decoration: none; font: 600 13px/1 var(--ui);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dnav a:hover { color: var(--brass-hi); background: rgba(201,164,92,.08); }
.dnav a[aria-current="page"] { color: var(--brass-hi); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }

/* ---------------------------------------------------------------- кнопки (как в game.css) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--r-2);
  border: 0; background: linear-gradient(#ecd08a, #c9a45c 55%, #a9843e); color: var(--on-brass); font: 600 14px/1 var(--ui); letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--line-brass), 0 6px 14px rgba(0,0,0,.35); transition: filter var(--t-fast), transform var(--t-fast); }
.btn:hover { filter: brightness(1.07); color: var(--on-brass); }
.btn:active { transform: translateY(2px); }
.btn.sec { background: rgba(13,16,12,.55); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass); }
.btn.sec:hover { color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass); }
.btn.soul { background: linear-gradient(#a8f0da, #7fe0bf 55%, #3fae90); color: var(--on-soul); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #2f8f78, 0 6px 14px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- шапка-баннер */
.dhero { position: relative; overflow: hidden; min-height: clamp(380px, 44vw, 600px); display: flex; align-items: flex-end;
  background: var(--bg-sunk); }
.dhero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.dhero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(18,21,16,.92) 0, rgba(18,21,16,.62) 34%, rgba(18,21,16,.08) 62%),
  linear-gradient(180deg, rgba(18,21,16,.25) 0, rgba(18,21,16,0) 38%, rgba(18,21,16,.75) 82%, var(--bg-page) 100%); }
.dhero.news::after { background:
  linear-gradient(90deg, rgba(18,21,16,.88) 0, rgba(18,21,16,.55) 40%, rgba(18,21,16,.05) 70%),
  linear-gradient(180deg, rgba(18,21,16,.2) 0, rgba(18,21,16,0) 30%, rgba(18,21,16,.86) 78%, var(--bg-page) 100%); }
.dhero .in { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gut) 40px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 12px/1 var(--ui); letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); }
.dhero h1 { margin: 0 0 16px; max-width: 15ch; font: 900 clamp(36px, 5.4vw, 70px)/1.02 var(--display); letter-spacing: .01em; color: var(--text);
  text-shadow: 0 3px 22px rgba(0,0,0,.85); text-wrap: balance; }
.dhero h1 em { font-style: normal; color: var(--brass-hi); }
.lead { max-width: 58ch; margin: 0 0 22px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--text); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 20px; background: rgba(13,16,12,.7);
  box-shadow: inset 0 0 0 1px var(--line-brass); font: 500 13px/1 var(--ui); color: var(--text); }
.chips img { width: 22px; height: 22px; border-radius: 50%; }

/* ---------------------------------------------------------------- оглавление: липкая лента */
.toc { position: sticky; top: 0; z-index: 4; background: rgba(18,21,16,.94); box-shadow: 0 1px 0 var(--line), 0 10px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toc ol { display: flex; gap: 2px; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gut) - 10px); list-style: none;
  overflow-x: auto; scrollbar-width: none; }
.toc ol::-webkit-scrollbar { display: none; }
.toc a { display: block; padding: 15px 10px 13px; color: var(--text-dim); text-decoration: none; font: 600 12px/1 var(--ui);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.toc a:hover { color: var(--brass-hi); border-bottom-color: var(--line-brass); }

/* ---------------------------------------------------------------- разделы */
.doc { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gut) 40px; }
.part { padding: 56px 0 8px; }
.part + .part { border-top: 1px solid rgba(110,83,38,.35); }
.sh { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; margin-bottom: 24px; }
.sh .no { grid-row: span 2; align-self: center; font: 900 clamp(44px, 6vw, 72px)/.8 var(--display); color: rgba(201,164,92,.14);
  -webkit-text-stroke: 1px rgba(201,164,92,.6); }
.sh h2 { margin: 0; font: 900 clamp(26px, 3.2vw, 40px)/1.08 var(--display); color: var(--brass-hi); letter-spacing: .02em; text-wrap: balance; }
.sh p { margin: 6px 0 0; color: var(--text-dim); font-size: 16px; max-width: 72ch; }
.part h3 { margin: 0 0 8px; font: 700 21px/1.2 var(--display); color: var(--text); letter-spacing: .02em; }
.part h4 { margin: 18px 0 8px; font: 600 13px/1.2 var(--ui); color: var(--brass); letter-spacing: .16em; text-transform: uppercase; }
.text { max-width: 76ch; }
.text p, .text li { color: var(--text); }
ul.list, ol.list { margin: 0 0 14px; padding-left: 20px; }
ul.list li, ol.list li { margin: 4px 0; }
ul.list li::marker { color: var(--brass); }
ol.list li::marker { color: var(--brass); font-weight: 700; }

.g2, .g3, .g4 { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; }
.mt { margin-top: 16px; }
.mt2 { margin-top: 28px; }

/* карточка — латунная рамка в две линии, как .card на странице игры */
.panel { position: relative; min-width: 0; padding: 18px 20px 18px; border-radius: var(--r-3); background: linear-gradient(180deg, var(--surface-1), #161b14);
  box-shadow: inset 0 0 0 1px var(--line-brass), inset 0 0 0 4px var(--surface-1), inset 0 0 0 5px rgba(201,164,92,.2), 0 10px 30px rgba(0,0,0,.35); }
.panel > :last-child { margin-bottom: 0; }
.panel.glow { box-shadow: inset 0 0 0 1px var(--brass), inset 0 0 0 4px var(--surface-1), inset 0 0 0 5px rgba(201,164,92,.35), 0 0 34px rgba(201,164,92,.12), 0 10px 30px rgba(0,0,0,.35); }
.panel.soulish { box-shadow: inset 0 0 0 1px var(--soul-deep), inset 0 0 0 4px var(--surface-1), inset 0 0 0 5px rgba(127,224,191,.2), 0 10px 30px rgba(0,0,0,.35); }
.panel .tag { position: absolute; top: 14px; right: 16px; padding: 4px 8px; border-radius: 3px; font: 600 11px/1 var(--ui); letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-brass); background: var(--brass); }
.panel .tag.new { background: var(--soul); color: var(--on-soul); }
.panel .tag.ev { background: #3d6b35; color: #eaf7d8; }
.panel .tag + h3 { padding-right: 76px; }
.panel .tag:not(.new) + h3 { padding-right: 120px; }

/* значок слева, текст справа */
.ico { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.ico > img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.ico.big { grid-template-columns: 112px minmax(0, 1fr); }
.ico.big > img { width: 112px; height: 112px; }

/* «главное за минуту» — плитки-ссылки */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-3);
  background: linear-gradient(180deg, rgba(38,46,34,.75), rgba(26,31,23,.75)); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.tile:hover { color: var(--text); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--brass), 0 10px 22px rgba(0,0,0,.35); }
.tile img { width: 56px; height: 56px; object-fit: contain; }
.tile b { display: block; font: 700 16px/1.2 var(--display); color: var(--brass-hi); letter-spacing: .02em; margin-bottom: 3px; }
.tile span { display: block; font-size: 14px; line-height: 1.4; color: var(--text-dim); }

/* ---------------------------------------------------------------- колёса: обод и медальон — настоящий арт, сектора — по раскладке
   Геометрия — из MANIFEST арта: --w/--h — размер картинки обода, --cx/--cy/--r — центр и радиус дырки (диск чуть шире),
   --fx/--fy — ось язычка, --fw/--fh — его размер; медальон — четверть диска, как на оверлее (68 из 266). */
.wh { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); margin: 0 auto; }
.wh .disc { position: absolute; left: calc((var(--cx) - var(--r)) / var(--w) * 100%); top: calc((var(--cy) - var(--r)) / var(--h) * 100%);
  width: calc(2 * var(--r) / var(--w) * 100%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #2c3a25 0 30%, #1b2418 31% 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); transition: transform 2.4s cubic-bezier(.2,.75,.15,1); }
.wh .disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 56%, rgba(0,0,0,.45) 100%); }
.wh .rim, .wh .hub, .wh .flap { position: absolute; display: block; pointer-events: none; }
.wh .rim { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.wh .hub { left: calc((var(--cx) - var(--r) * .2556) / var(--w) * 100%); top: calc((var(--cy) - var(--r) * .2556) / var(--h) * 100%);
  width: calc(var(--r) * .5112 / var(--w) * 100%); aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.wh.big-hub .hub, .wcard .wh .hub { left: calc((var(--cx) - var(--r) * .4) / var(--w) * 100%); top: calc((var(--cy) - var(--r) * .4) / var(--h) * 100%);
  width: calc(var(--r) * .8 / var(--w) * 100%); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.wh .flap { left: calc((var(--cx) - var(--fw) / 2) / var(--w) * 100%); top: calc(var(--fy) / var(--h) * 100%); width: calc(var(--fw) / var(--w) * 100%); }
.wcard:hover .wh .disc, .wh:hover .disc { transform: rotate(-330deg); }

.wheels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wcard { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 18px; }
.wcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-3) var(--r-3) 0 0; background: var(--c); opacity: .9; }
.wcard .wh { width: 82%; }
.wcard h3 { margin: 0; font: 900 24px/1.05 var(--display); color: var(--c); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.price { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.price span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border-radius: 3px; background: rgba(13,16,12,.7);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--text-dim); }
.price span b { font: 700 16px/1 var(--ui); color: var(--text); }
.price .pts b { color: #c7a8ff; }
.price .sls b { color: var(--soul); }
.wcard .why { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); }

/* шансы полосками: --p — процент, полоса во всю ширину = 40 % */
.bars { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bars li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 3px; overflow: hidden;
  font: 500 12.5px/1.25 var(--ui); color: var(--text); background: rgba(13,16,12,.55); }
.bars li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: min(100%, calc(var(--p) / 40 * 100%)); background: var(--k, rgba(201,164,92,.28));
  opacity: .55; border-right: 2px solid var(--kk, var(--brass)); }
.bars li > * { position: relative; }
.bars.x20 li::before { width: min(100%, calc(var(--p) / 20 * 100%)); }
.bars b { font-weight: 600; letter-spacing: .03em; color: #fff7de; }
.bars em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--brass-hi); white-space: nowrap; }
.bars small { color: var(--text-dim); font-size: 11.5px; }
.k-miss { --k: #262c20; --kk: #4b5640; }
.k-back { --k: #1d6b5e; --kk: #3fae90; }
.k-soul { --k: #1f6e63; --kk: var(--soul); }
.k-game { --k: #5a4a14; --kk: var(--gold); }
.k-ruin { --k: #5e3a82; --kk: #a77bd9; }
.k-whip { --k: #7a4a26; --kk: #d08a4a; }
.k-def { --k: #3c5262; --kk: #7fa3bf; }
.k-self { --k: #7a2219; --kk: var(--danger); }
.k-ord { --k: #2a5a7e; --kk: #6fa6d6; }
.k-myst { --k: #3b2f14; --kk: var(--brass); }
.k-vip { --k: #8a6a1f; --kk: var(--gold); }
.k-show { --k: #6b2f5c; --kk: #e07ad0; }    /* скетчи на вебке (ролики) */
.k-skin { --k: #5a2466; --kk: #c9a2ff; }    /* СКИН: сундук скинов героев */

/* редкости */
.rar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.rar li { padding: 5px 4px 4px; border-radius: 3px; text-align: center; font: 500 11px/1.1 var(--ui); color: var(--text-dim); background: rgba(13,16,12,.6);
  box-shadow: inset 0 -2px 0 var(--rc); }
.rar li b { display: block; font: 700 14px/1.1 var(--ui); color: var(--rc); }
.r-brass { --rc: var(--brass-card); } .r-silver { --rc: var(--silver); } .r-gold { --rc: var(--gold); } .r-chaos { --rc: var(--chaos); }

/* ---------------------------------------------------------------- таблицы */
.tw { overflow-x: auto; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--line); background: rgba(13,16,12,.45); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(58,68,50,.7); }
thead th { font: 600 12px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); background: rgba(26,31,23,.9); white-space: nowrap; }
tbody th { font-weight: 600; color: var(--text); }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: rgba(201,164,92,.04); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt th:not(:first-child), .wt td { text-align: center; }
.wt thead th i { display: block; width: 26px; height: 3px; margin: 6px auto 0; border-radius: 2px; background: var(--c); }
td .was { display: block; font-size: 12px; color: var(--text-dim); }

/* большие числа «было → стало» */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 16px 16px 14px; border-radius: var(--r-3); background: rgba(13,16,12,.55); box-shadow: inset 0 0 0 1px var(--line); }
.stat b { display: block; font: 900 clamp(30px, 3.4vw, 42px)/1 var(--display); color: var(--soul); }
.stat b s { font: 500 .5em/1 var(--ui); color: var(--text-dim); text-decoration-thickness: 2px; margin-right: 8px; vertical-align: .35em; }
.stat b small { font: 600 .45em/1 var(--ui); margin-left: 4px; color: var(--soul); }
.stat span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--text-dim); }

/* бонус-игры */
.game { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.game > img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.game h3 { margin-top: 2px; }
.where { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.where li { padding: 4px 9px; border-radius: 3px; font: 500 12.5px/1.2 var(--ui); background: rgba(13,16,12,.65); color: var(--text);
  box-shadow: inset 3px 0 0 var(--c, var(--brass)); }
.where li b { color: var(--c, var(--brass-hi)); font-weight: 700; }
.c-olive { --c: #A9B86A; } .c-souls { --c: #4FD6C0; } .c-lash { --c: #D9502E; } .c-gold { --c: #E3B64C; }

/* «Кто это?»: силуэт и портрет */
.who { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.who figure { margin: 0; text-align: center; font-size: 12px; color: var(--text-dim); }
.who img { display: block; height: 110px; width: auto; margin: 0 auto 4px; }
.who .portrait img { border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--line-brass); width: 84px; height: 110px; object-fit: cover; }
.who .arrow { align-self: center; font: 700 22px/1 var(--display); color: var(--brass); }

/* «Янтарь или Сапфир» */
.vs { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.vs img { width: 64px; height: 66px; object-fit: contain; }
.vs .half { width: 46px; height: 92px; object-fit: cover; }
.vs i { font: 900 18px/1 var(--display); color: var(--brass); font-style: normal; margin: 0 6px; }

/* карточки героев в настоящих рамках: окно рамки — из MANIFEST */
.tcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: end; }
.tcard { margin: 0; text-align: center; }
.tframe { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); }
.tframe .port { position: absolute; left: calc(var(--x) / var(--w) * 100%); top: calc(var(--y) / var(--h) * 100%); width: calc(var(--ww) / var(--w) * 100%);
  height: calc(var(--wh) / var(--h) * 100%); object-fit: cover; object-position: center 20%; }
.tframe .frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.tframe .name { position: absolute; left: calc(var(--nx) / var(--w) * 100%); top: calc(var(--ny) / var(--h) * 100%); width: calc(var(--nw) / var(--w) * 100%);
  height: calc(var(--nh) / var(--h) * 100%); display: grid; place-items: center; font: 900 clamp(10px, 1.1vw, 14px)/1 var(--display); letter-spacing: .06em; color: #2a1d08; }
.tframe.steel .name { color: #1d232a; }
.tframe.glowing .name { color: #e8dcff; text-shadow: 0 0 8px rgba(155,92,255,.9); }
.tcard figcaption { margin-top: 10px; font: 700 15px/1.2 var(--display); color: var(--rc); }
.tcard figcaption small { display: block; margin-top: 3px; font: 400 13px/1.3 var(--ui); color: var(--text-dim); }
.tframe.chaos::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 10px; box-shadow: 0 0 40px 6px rgba(155,92,255,.45); }
.tframe.gold::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 10px; box-shadow: 0 0 36px 4px rgba(242,193,78,.35); }

/* ветки прокачки */
.branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.branch { --bc: var(--weapon); }
.branch.vit { --bc: var(--vitality); } .branch.spi { --bc: var(--spirit-branch); }
.branch h3 { color: var(--bc); }
.steps6 { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: st; }
.steps6 li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.3; }
.steps6 img { width: 44px; height: 44px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.steps6 b { display: block; color: #fff7de; font-size: 14px; }
.steps6 span { color: var(--text-dim); }
.steps6 em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--bc); font-weight: 600; white-space: nowrap; }
.branch .sum { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed rgba(201,164,92,.25); font-size: 13.5px; color: var(--text-dim); }

/* предметы */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-3);
  background: rgba(13,16,12,.5); box-shadow: inset 0 0 0 1px var(--line); }
.item img { width: 48px; height: 48px; object-fit: contain; }
.item b { display: block; font-size: 14.5px; color: #fff7de; }
.item span { display: block; font-size: 13px; line-height: 1.35; color: var(--text-dim); }
.item em { font-style: normal; color: var(--brass-hi); font-weight: 600; }

/* шаги для новичка */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; counter-increment: s; padding: 54px 18px 18px; }
.steps li::before { content: counter(s); position: absolute; top: 12px; left: 18px; font: 900 34px/1 var(--display); color: var(--brass); }
.steps li img { position: absolute; top: 10px; right: 14px; width: 48px; height: 48px; object-fit: contain; }
.steps h3 { font-size: 18px; }
.steps p { font-size: 14.5px; color: var(--text-dim); margin: 0; }

/* души: два кошелька */
.wallets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wallet h3 { display: flex; align-items: center; gap: 10px; }
.wallet h3 img { width: 34px; height: 34px; object-fit: contain; }

/* звания и ранги — значки в ряд */
.ranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: center; }
.ranks img { height: 64px; width: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.ranks b { display: block; font: 700 14px/1.2 var(--display); color: var(--text); }
.ranks span { font-size: 12.5px; color: var(--text-dim); }

/* глоссарий призов */
.prizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.prizes li { padding: 9px 12px; border-radius: var(--r-2); background: rgba(13,16,12,.5); box-shadow: inset 3px 0 0 var(--kk, var(--brass)), inset 0 0 0 1px var(--line);
  font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.prizes li b { display: block; font: 700 13px/1.3 var(--ui); letter-spacing: .06em; color: #fff7de; }

/* команды */
.cmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmds dl { margin: 0; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 8px 14px; align-items: baseline; }
.cmds dt { line-height: 1.9; }
.cmds dt code { white-space: normal; }
.cmds dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.cmds h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 12px; }
.cmds h3 img { width: 30px; height: 30px; object-fit: contain; }
.cmds .page-only { margin-top: 10px; font-size: 13px; color: var(--text-dim); }

/* вопросы */
.faq { display: grid; gap: 8px; }
.faq details { border-radius: var(--r-3); background: rgba(26,31,23,.8); box-shadow: inset 0 0 0 1px var(--line); }
.faq details[open] { box-shadow: inset 0 0 0 1px var(--line-brass); }
.faq summary { position: relative; padding: 14px 44px 14px 18px; cursor: pointer; list-style: none; font: 600 16px/1.35 var(--ui); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 18px 14px; color: var(--text-dim); }
.faq details > div p { color: var(--text); }

/* заметка */
.note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--r-3);
  background: linear-gradient(90deg, rgba(127,224,191,.09), rgba(127,224,191,.02)); box-shadow: inset 3px 0 0 var(--soul), inset 0 0 0 1px rgba(47,143,120,.35); }
.note img { width: 40px; height: 40px; object-fit: contain; }
.note p { margin: 0; font-size: 15px; }
.note.brass { background: linear-gradient(90deg, rgba(201,164,92,.1), rgba(201,164,92,.02)); box-shadow: inset 3px 0 0 var(--brass), inset 0 0 0 1px rgba(110,83,38,.5); }

/* сделки Брокера */
.deals td:first-child { white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.deals td b { color: var(--gold); letter-spacing: .03em; }
.plus { color: var(--soul); }
.minus { color: var(--danger-soft); }

/* цена хаоса: дорожка */
.chaos-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; padding: 0; list-style: none; }
.chaos-path li { padding: 10px 14px; border-radius: var(--r-3); background: rgba(13,16,12,.6); box-shadow: inset 0 0 0 1px var(--line); text-align: center;
  font: 700 20px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--text); }
.chaos-path li small { display: block; margin-top: 4px; font: 500 11px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.chaos-path li.past { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(229,83,61,.6); }
.chaos-path li.next { color: #e8dcff; box-shadow: inset 0 0 0 1px #6b45b0, 0 0 22px rgba(155,92,255,.3); }
.chaos-path .to { color: var(--brass); font-weight: 700; padding: 0 2px; background: none; box-shadow: none; }

/* призыв в конце */
.finale { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 56px; padding: 26px 28px; }
.finale > img { width: 140px; height: auto; filter: drop-shadow(0 8px 20px rgba(127,224,191,.35)); }
.finale h2 { margin: 0 0 8px; font: 900 clamp(24px, 2.8vw, 34px)/1.1 var(--display); color: var(--brass-hi); }

.foot { position: relative; z-index: 1; padding: 26px var(--gut) 40px; text-align: center; font-size: 13.5px; color: var(--text-dim);
  border-top: 1px solid var(--line); background: rgba(13,16,12,.6); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 8px; }
.foot a { color: var(--brass-hi); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- адаптив */
@media (max-width: 1100px) {
  .wheels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard .wh { width: 62%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --gut: 16px; }
  .dtop { gap: 10px; }
  .brand i { display: none; }
  .dnav a { padding: 8px 7px; font-size: 11.5px; letter-spacing: .06em; }
  .dnav a.opt { display: none; }
  .g2, .g3, .g4, .branches, .cmds, .wallets { grid-template-columns: minmax(0, 1fr); }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part { padding-top: 44px; }
  .finale { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .finale > img { margin: 0 auto; width: 110px; }
  .finale .acts { justify-content: center; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .dhero { min-height: 0; }
  .dhero .bg { height: 62%; object-position: 62% 30%; }
  .dhero.guide .bg { object-position: 72% 40%; }
  .dhero::after, .dhero.news::after { background: linear-gradient(180deg, rgba(18,21,16,.1) 0, rgba(18,21,16,.25) 30%, rgba(18,21,16,.9) 52%, var(--bg-page) 64%); }
  .dhero .in { padding-top: 44vw; padding-bottom: 28px; }
  .dhero h1 { max-width: none; }
  .acts .btn { flex: 1 1 auto; }
  .wheels { grid-template-columns: minmax(0, 1fr); }
  .wcard .wh { width: 70%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .sh { grid-template-columns: minmax(0, 1fr); }
  .sh .no { grid-row: auto; align-self: start; font-size: 34px; margin-bottom: 8px; }
  .game { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .game > img { width: 64px; height: 64px; }
  .ico.big { grid-template-columns: 72px minmax(0, 1fr); }
  .ico.big > img { width: 72px; height: 72px; }
  .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .ranks b { font-size: 12.5px; overflow-wrap: anywhere; }
  .cmds dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cmds dd { margin-bottom: 8px; }
  th, td { padding: 8px 10px; font-size: 13.5px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 16px 14px; }
}
@media (max-width: 380px) {
  .dnav a { padding: 8px 5px; font-size: 11px; }
  .brand b { font-size: 15px; }
  .brand img { width: 30px; height: 30px; }
}