/* Bonefall — один лист на обе страницы. Ни одной внешней загрузки: страница
   должна открываться с любого хостинга и из локальной папки одинаково.
   Поэтому никаких шрифтов с CDN, никаких иконочных наборов - только то, что
   уже есть в системе, и картинки из папки рядом. */
:root {
	--bg: #0b0a0d;
	--panel: #17151b;
	--panel2: #1d1a22;
	--line: #2a2531;
	--line2: #3a3344;
	--ink: #e2dbd0;
	--mute: #8f8779;
	--gold: #c9a24a;
	--gold2: #e6bf6b;
	--blood: #b8503c;
	--serif: Georgia, "Times New Roman", "Noto Serif", serif;
	--sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
	/* Поля у полосных блоков считаются от той же колонки, что и текст, - иначе
	   галерея начиналась бы не там, где абзац над ней, и глаз это ловит. */
	--gutter: max(20px, calc((100vw - 820px) / 2));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.65 var(--sans);
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
a { color: var(--gold); }
a:hover { color: var(--gold2); }
.vh {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* язык */
.langs {
	display: flex; gap: 6px; justify-content: flex-end;
	padding: 14px 0 0; flex-wrap: wrap;
}
.langs button {
	background: transparent; color: var(--mute);
	border: 1px solid var(--line); border-radius: 4px;
	padding: 5px 11px; font: 13px/1 var(--sans); cursor: pointer;
}
.langs button:hover { color: var(--ink); border-color: var(--line2); }
.langs button[aria-pressed="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* Шапка. Плакат идёт во всю ширину и растворяется в фоне книзу: рамка вокруг
   него превращала обложку в картинку на странице, а она и есть страница.
   Картинки ДВЕ, и это не прихоть: плакат рисовался вертикальным, и в полосу
   на мониторе из него влезает либо надпись, либо герои - но не то и другое.
   Поэтому на широком экране идёт полоса, собранная из той же середины
   плаката, а на телефоне - сам плакат, для которого он и делался. */
.hero { position: relative; margin: 10px 0 0; background: #08070a; }
.hero img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 1800 / 762; object-fit: cover; object-position: 50% 50%;
	max-height: 62vh;
}
.hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(11,10,13,0) 0%, rgba(11,10,13,0) 62%,
		rgba(11,10,13,.72) 86%, var(--bg) 100%);
}
.hero .cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: 0 var(--gutter) 22px; text-align: center;
}
.hero .sub {
	font-family: var(--serif); font-size: clamp(17px, 2.4vw, 23px);
	line-height: 1.35; margin: 0 auto; max-width: 34em;
	text-shadow: 0 2px 16px #000, 0 0 4px rgba(0,0,0,.9);
}
@media (min-width: 621px) and (max-width: 900px) {
	/* На узком мониторе и планшете полоса ужимается, и тёмные крылья по бокам
	   съедают половину кадра. Обрезаем их: пропорция уже, а cover срезает
	   лишнее по горизонтали, оставляя середину. */
	.hero img { aspect-ratio: 1400 / 762; }
}
@media (max-width: 620px) {
	/* Нижняя пятая часть плаката - пустая земля: она дорисовывалась, чтобы
	   заставка накрывала любой телефон. Здесь она работает подложкой под
	   подпись, поэтому кадр берём почти целиком, но сдвигаем вверх. */
	.hero img { aspect-ratio: 900 / 1400; object-position: 50% 30%; max-height: none; }
	.hero .cap { padding-bottom: 16px; }
}

/* полки */
.plat {
	display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
	margin: 14px 0 0; padding: 0; list-style: none;
}
.plat li {
	border: 1px solid rgba(201,162,74,.4); border-radius: 999px;
	background: rgba(11,10,13,.6); backdrop-filter: blur(2px);
	color: var(--ink); font-size: 13px; padding: 5px 13px; white-space: nowrap;
}
.plat li i { font-style: normal; color: var(--gold); }

h2 {
	font-family: var(--serif); font-weight: normal;
	font-size: clamp(21px, 4vw, 27px);
	margin: 6px 0 14px; padding: 0;
}
h3 { font-family: var(--serif); font-weight: normal; font-size: 18px; margin: 26px 0 6px; }
p { margin: 0 0 14px; }
.lead { font-family: var(--serif); font-size: clamp(18px, 3.6vw, 22px); line-height: 1.5; }
ul { padding-left: 20px; margin: 0 0 14px; }
li { margin-bottom: 7px; }
.mute { color: var(--mute); }
small { color: var(--mute); font-size: 13px; }

/* Заголовок раздела: над серифной строкой - короткая золотая метка. Она даёт
   ритм там, где раньше была одна горизонтальная черта на всё. */
section { padding-top: 44px; }
section.tight { padding-bottom: 0; }
.kick {
	display: block; font: 12px/1 var(--sans); letter-spacing: .16em;
	text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.kick::before {
	content: ""; display: inline-block; width: 22px; height: 1px;
	background: var(--gold); vertical-align: middle; margin-right: 9px; opacity: .7;
}

/* Классы. Спрайты - те же, что бегают в игре, поэтому масштабируются
   ступеньками и без сглаживания: пиксель должен остаться пикселем. */
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cls {
	margin: 0; padding: 14px 12px 16px; text-align: center;
	border: 1px solid var(--line); border-radius: 10px;
	background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.cls img {
	display: block; margin: 0 auto 8px; height: 92px; width: auto;
	image-rendering: pixelated; image-rendering: crisp-edges;
}
@media (max-width: 640px) {
	/* Три колонки на телефоне дают по сотне пикселей на карточку, и в них не
	   помещается даже название. Кладём карточку набок: спрайт слева, текст
	   справа - строка читается, а рост страницы меньше, чем у трёх башен. */
	.classes { grid-template-columns: 1fr; gap: 10px; }
	.cls { display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; }
	.cls img { margin: 0; height: 76px; flex: 0 0 auto; }
	.cls .nm { margin-bottom: 2px; }
}

/* Стрелок. Её нет на телефоне - она продаётся отдельно к версии для Steam,
   поэтому в ряду классов ей не место: человек, пришедший из App Store, не
   должен искать в игре то, чего в ней нет. Но и молчать о ней незачем. */
.dlc {
	display: flex; align-items: center; gap: 16px; margin-top: 16px;
	border: 1px dashed var(--line2); border-radius: 10px; padding: 12px 16px;
}
.dlc img {
	height: 74px; width: auto; flex: 0 0 auto; opacity: .85;
	image-rendering: pixelated; image-rendering: crisp-edges;
}
.dlc p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.5; }
.dlc b { color: var(--ink); font-weight: normal; }
.cls .nm {
	display: block; font-family: var(--serif); font-weight: normal;
	font-size: 17px; letter-spacing: .04em; color: var(--gold2); margin-bottom: 4px;
}
.cls .ln { display: block; color: var(--mute); font-size: 13px; line-height: 1.45; }

/* Факты - те же пять строк, что были списком, но каждая со своим заголовком:
   список читался как примечание, а это и есть содержание игры. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }
.fact {
	border: 1px solid var(--line); border-radius: 10px;
	background: var(--panel); padding: 14px 16px 15px;
}
.fact .nm {
	display: block; font-family: var(--serif); font-weight: normal;
	font-size: 17px; margin-bottom: 3px;
}
.fact .ln { display: block; color: var(--mute); font-size: 14px; line-height: 1.5; }

/* Галерея. Раньше полоса упиралась в край колонки и обрывалась без всякого
   знака, что её можно тянуть. Теперь она идёт во всю ширину окна, начинается
   ровно под текстом, а по краям гаснет - обрыв читается как продолжение. */
.gallery {
	display: flex; gap: 14px;
	padding: 4px var(--gutter) 16px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.gallery img {
	flex: 0 0 auto; width: 238px; height: auto; border-radius: 10px;
	border: 1px solid var(--line); scroll-snap-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
@media (max-width: 620px) { .gallery img { width: 200px; } }
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.gallery::-webkit-scrollbar-track { background: transparent; }

/* карточки площадок */
.where { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .where { grid-template-columns: 1fr; } }
.card {
	border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
	background: var(--panel);
}
.card .nm { font-family: var(--serif); font-weight: normal; font-size: 18px; display: block; }
.card .ln { display: block; color: var(--mute); font-size: 14px; margin-top: 2px; }
.card .tag {
	display: inline-block; font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
	border: 1px solid rgba(201,162,74,.4); border-radius: 999px;
	padding: 2px 9px; margin: 10px 0 0;
}

.box {
	border: 1px solid var(--line); border-left: 3px solid var(--gold);
	background: var(--panel); border-radius: 0 8px 8px 0;
	padding: 14px 18px; margin: 0 0 16px;
}

footer {
	margin: 60px 0 0; padding: 22px 0 36px;
	border-top: 1px solid var(--line); color: var(--mute); font-size: 14px;
	display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between;
}

/* Язык. Без скрипта видна английская версия - пустая страница у человека с
   выключенным JS и у части поисковых роботов хуже, чем не тот язык. Скрипт
   первым делом ставит класс js на <html>, и правила ниже берут верх. */
[data-l] { display: none; }
[data-l].on { display: block; }
li[data-l].on { display: list-item; }
span[data-l].on, b[data-l].on, a[data-l].on { display: inline; }

/* Запасной вид - на случай выключенного скрипта. Правила видны только пока на
   <html> нет класса js, а его ставит первая же строчка в <head>, так что
   мигания между двумя состояниями не бывает. */
html:not(.js) [data-l="en"] { display: block; }
html:not(.js) span[data-l="en"], html:not(.js) b[data-l="en"], html:not(.js) a[data-l="en"] { display: inline; }
html:not(.js) li[data-l="en"] { display: list-item; }