/* «Игрица» — макет по SVOD.md, круги 1 и 2 консилиума (m1/, m2/).
   Вертикальный ритм: шаг 4 px. Все line-height в пикселях — дробных строк нет. */

/* ── шрифты ──────────────────────────────────────────────────────────────────
   В кириллических подмножествах Google нет НИ ОДНОГО знака препинания: ни запятой,
   ни точки, ни тире. Поэтому латинский файл нужен любой русской фразе. Круг 2:
   пересобрал латинские подмножества до ASCII + типографики — 70,8 → 29,7 КБ.
   Golos 700 выброшен целиком: им набиралась одна цифра в кружке шага. */
@font-face{font-family:Golos;src:url(fonts/golos-400-cyrillic.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;src:url(fonts/golos-600-cyrillic.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos;src:url(fonts/golos-400-latin.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2212}
@font-face{font-family:Golos;src:url(fonts/golos-600-latin.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2212}
@font-face{font-family:Bitter;src:url(fonts/bitter-700-cyrillic.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Bitter;src:url(fonts/bitter-700-latin.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B0,U+00B7,U+00BB,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2212}

/* Метрические двойники: проценты замерены в Chrome на реальной строке макета
   при 100 px, а не взяты из OS/2. Проверка после правки: ширина строки совпала
   100,00 % и 99,99 %, line-height:normal 120/120 и 119/120. */
@font-face{font-family:'Golos fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  size-adjust:106.28%;ascent-override:92.21%;descent-override:20.70%;line-gap-override:0%}
@font-face{font-family:'Bitter fallback';src:local('Georgia Bold'),local('Georgia');font-weight:700;
  size-adjust:91.35%;ascent-override:102.35%;descent-override:29.01%;line-gap-override:0%}

:root{
  --bg:#FFF8EA; --surface:#FFFFFF; --text:#2D241F; --muted:#6B5A49;
  --brand:#A53F20; --brand-hover:#8A3319; --on-brand:#FFFFFF;
  --accent:#F3C95F; --on-accent:#2D241F;
  --line:#DCCDBD; --line-strong:#9C8268; --focus:#176B87;
  --shadow:0 1px 0 rgb(45 36 31/8%), 0 18px 44px -28px rgb(72 39 24/45%);
  --sans:Golos,'Golos fallback',-apple-system,'Segoe UI',Roboto,sans-serif;
  --slab:Bitter,'Bitter fallback',Georgia,serif;
  --wrap:1120px;
}
/* Тёмная — не инверсия светлой. Круг 2: янтарь притушен (паспорт спорил с кнопкой),
   волосок поднят до видимого (карточка теряла край), текст на тон мягче — светлое
   на тёмном оптически тяжелее при том же контрасте. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#1C1714; --surface:#26201B; --text:#EDE1CF; --muted:#C6B3A3;
  --brand:#FF9A76; --brand-hover:#E07A56; --on-brand:#1A130F;
  --accent:#D9A93E; --on-accent:#2D241F;
  --line:#5E4E42; --line-strong:#A58A6B; --focus:#FFCC66;
  --shadow:0 1px 0 rgb(255 255 255/7%), 0 20px 48px -32px rgb(0 0 0/80%);
}}
:root[data-theme=dark]{
  --bg:#1C1714; --surface:#26201B; --text:#EDE1CF; --muted:#C6B3A3;
  --brand:#FF9A76; --brand-hover:#E07A56; --on-brand:#1A130F;
  --accent:#D9A93E; --on-accent:#2D241F;
  --line:#5E4E42; --line-strong:#A58A6B; --focus:#FFCC66;
  --shadow:0 1px 0 rgb(255 255 255/7%), 0 20px 48px -32px rgb(0 0 0/80%);
}
:root{color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}

/* ── основа ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/24px var(--sans);
  -webkit-font-smoothing:antialiased}
/* На тёмном сглаживание съедает и без того тонкий Golos 400. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body{-webkit-font-smoothing:auto}}
:root[data-theme=dark] body{-webkit-font-smoothing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
[id]{scroll-margin-top:72px}
@media(min-width:1024px){[id]{scroll-margin-top:80px}}
.skip{position:fixed;left:16px;top:8px;z-index:20;transform:translateY(-200%);
  display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:14px;
  background:var(--surface);color:var(--text);border:1px solid var(--line-strong);text-decoration:none}
.skip:focus-visible{transform:none}

.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
@media(min-width:480px){.wrap{width:min(100% - 40px,var(--wrap))}}
@media(min-width:720px){.wrap{width:min(100% - 48px,var(--wrap))}}
@media(min-width:1024px){.wrap{width:min(100% - 64px,var(--wrap))}}

h1,h2,h3{font-family:var(--slab);font-weight:700;margin:0;letter-spacing:0;text-wrap:balance}
p{text-wrap:pretty}
/* Ритм секций: отступ несёт нижняя граница, соседняя секция свой верх обнуляет —
   иначе между двумя секциями складывалось 192 px вместо 96. */
section{padding-block:48px}
section+section{padding-top:0}
@media(min-width:720px){section{padding-block:72px}}
@media(min-width:1024px){section{padding-block:96px}}
.h2{font-size:26px;line-height:32px;margin-bottom:12px}
@media(min-width:720px){.h2{font-size:31px;line-height:40px;letter-spacing:-.02em}}
.sub{color:var(--muted);font-size:16px;line-height:24px;margin:0 0 24px;max-width:60ch}
@media(min-width:720px){.sub{font-size:20px;line-height:28px}}

/* ── шапка ──────────────────────────────────────────────────────────────────
   Волосок рисуется тенью, а не border: border добавлял высоте шапки 57-й пиксель.
   Круг 2: переключатель тем уехал в подвал — 240 px настроек читались раньше игр. */
.hdr{position:sticky;top:0;z-index:9;background:var(--bg);box-shadow:0 1px 0 var(--line);
  padding-top:env(safe-area-inset-top)}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:56px}
@media(min-width:1024px){.hdr .wrap{height:64px}}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
  font-family:var(--slab);font-weight:700;font-size:20px;line-height:24px;padding:12px 0;flex:none}
.logo svg{flex:none}
.nav{display:none;gap:24px;margin-left:auto;font-size:16px;line-height:24px}
.nav a{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.nav a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px}
@media(min-width:720px){.nav{display:flex}}

/* переключатель темы: в подвале на десктопе, в мобильном меню на телефоне */
.theme{display:flex;gap:0;border:1px solid var(--line-strong);border-radius:999px;padding:4px;
  background:var(--surface);width:max-content}
.theme button{font:600 13px/16px var(--sans);min-height:44px;padding:8px 16px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer}
:root:not([data-theme]) [data-theme-set=system],
:root[data-theme=light] [data-theme-set=light],
:root[data-theme=dark] [data-theme-set=dark]{background:var(--accent);color:var(--on-accent)}

/* мобильная панель: <details>, работает без JS */
.menu{margin-left:auto;position:relative}
@media(min-width:720px){.menu{display:none}}
.menu>summary{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer}
.menu[open]>summary{background:var(--accent);color:var(--on-accent)}
.menu nav{position:absolute;right:0;top:56px;min-width:220px;padding:8px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow);display:grid}
.menu nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;
  color:var(--text);text-decoration:none}
.menu nav a:hover{background:var(--bg)}
.menu .theme{margin:8px 0 0;border:0;border-top:1px solid var(--line-strong);border-radius:0;
  width:auto;padding:8px 0 0;background:transparent}
.menu .theme button{flex:1;min-height:48px;border-radius:12px}

/* ── первый экран ───────────────────────────────────────────────────────────
   Круг 2: две колонки только с 1024 и поровну. На 768 доля 5fr давала колонку
   283 px — заголовок рвался на три строки по 10 знаков, кнопки вставали столбом. */
.hero{padding-block:32px 48px}
@media(min-width:720px){.hero{padding-block:48px 72px}}
@media(min-width:1024px){.hero{padding-block:56px 96px}}
.hero .wrap{display:grid;gap:24px}
@media(min-width:1024px){.hero .wrap{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.hero>.wrap>*{min-width:0}
.hero h1{font-size:39px;line-height:44px;letter-spacing:-.02em}
@media(min-width:600px){.hero h1{font-size:44px;line-height:48px}}
@media(min-width:1024px){.hero h1{font-size:49px;line-height:56px}}
.hero p{font-size:20px;line-height:28px;color:var(--muted);margin:16px 0 24px}
.by{font-size:14px;line-height:20px;color:var(--muted);margin:12px 0 0;text-wrap:pretty}
.by b{font-weight:600;color:var(--text)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero figure{margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);background:var(--surface)}
.hero figure img{aspect-ratio:800/470;object-fit:cover;width:100%}
/* 720–1023: колонка одна, и картинка во всю её ширину отжимала карточки за экран. */
@media(min-width:720px) and (max-width:1023px){.hero figure{max-width:560px}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  border-radius:14px;background:var(--brand);color:var(--on-brand);
  font:600 16px/24px var(--sans);letter-spacing:0;text-decoration:none;border:0;cursor:pointer;
  transition:background-color 120ms,border-color 120ms,transform 80ms}
/* Круг 2: color-mix к --text в тёмной теме ОСВЕТЛЯЛ кнопку. Наведение — токеном. */
.btn:hover{background:var(--brand-hover)}
.btn:active{transform:scale(.98)}
.btn:visited{color:var(--on-brand)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--surface);border-color:var(--text)}

/* ── карточки ───────────────────────────────────────────────────────────────
   Круг 2: резерв строк убран. Ряд грида и так растягивает карточки до общей высоты,
   а .foot{margin-top:auto} держит кнопки на одном пикселе. Резерв же оставлял
   пустую строку под однострочным названием в пяти карточках из шести. */
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);padding:0;margin:0;list-style:none}
@media(min-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-width:0;height:100%;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.card:hover{transform:translateY(-2px)}}
.card .cover{position:relative;display:block;aspect-ratio:800/470;
  border-radius:24px 24px 0 0;background:var(--bg);border-bottom:1px solid var(--line)}
.card .cover>img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  border-radius:24px 24px 0 0}
.card .badge{position:absolute;top:16px;left:20px;background:var(--accent);color:var(--on-accent);
  font:600 12px/16px var(--sans);padding:6px 12px;border-radius:999px}
.card .stand{position:absolute;left:20px;bottom:-34px;width:68px;height:68px;border-radius:14px;
  background:var(--surface);border:2px solid var(--line-strong);padding:4px}
.card .stand img{width:100%;height:100%;border-radius:8px;object-fit:cover}
.card .body{padding:48px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.eyebrow{color:var(--muted);font-size:13px;line-height:20px;min-height:20px;margin:0}
.card h3{font-size:25px;line-height:32px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Ссылка названия растянута на всю карточку: у строки в 30 px зона тапа была вдвое
   меньше нормы, а обложка ради этого держала вторую ссылку на тот же адрес. */
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:24px}
.card h3 a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px}
/* Кольцо фокуса рисуем на самом h3: у ссылки оно упиралось в его overflow:hidden. */
.card h3 a:focus-visible{outline:none}
.card h3:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.lead{margin:0;color:var(--text);font-size:16px;line-height:24px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Три строки на всех ширинах: короткие описания приезжают из витрины игры,
   и на двух строках предложение обрывалось многоточием посреди фразы. */
.card .foot{position:relative;margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:12px}
.card .foot .btn{flex:1}

/* ── улица Липки ────────────────────────────────────────────────────────── */
.street .wrap{display:grid;gap:24px}
@media(min-width:900px){.street .wrap{grid-template-columns:4fr 8fr;align-items:center;gap:40px}}
.street>.wrap>*{min-width:0}
.street p{margin:0;color:var(--muted);max-width:42ch}
.street .map{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px}
.street .map svg{min-width:592px}
.street .hint{font-size:13px;line-height:20px;color:var(--muted);margin:8px 0 0}
/* Подсказка живёт, пока карта в самом деле не влезает: при 900 видно 539 из 592. */
@media(min-width:1043px){.street .hint{display:none}}
.house{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.roof{fill:var(--line-strong)}
.roof-open{fill:var(--brand)}
.detail{fill:var(--accent)}
.town-label{font-family:var(--sans);font-size:21px;fill:var(--muted)}
a.town .house{stroke:var(--brand)}
a.town:hover .town-label{fill:var(--brand);text-decoration:underline}
g.soon{opacity:.55}

/* ── факты ──────────────────────────────────────────────────────────────── */
.facts{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.fact{border:1px solid var(--line);border-radius:24px;padding:20px;background:var(--surface);min-width:0}
.fact b{display:block;font-family:var(--slab);font-size:20px;line-height:28px;margin-bottom:8px}
.fact span{color:var(--muted);font-size:16px;line-height:24px}

/* ── хвост главной: журнал и студия рядом, а не двумя пустыми экранами ──── */
.tail .wrap{display:grid;gap:48px}
@media(min-width:1024px){.tail .wrap{grid-template-columns:7fr 5fr;gap:64px;align-items:start}}
.tail>.wrap>*{min-width:0}

/* ── журнал ─────────────────────────────────────────────────────────────── */
.post{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line)}
@media(max-width:479px){.post{grid-template-columns:minmax(0,1fr);gap:4px}}
.post time{color:var(--muted);font:400 13px/20px var(--sans);white-space:nowrap;padding-top:10px;
  font-variant-numeric:lining-nums tabular-nums}
.post b{font-family:var(--slab);font-size:20px;line-height:28px;font-weight:700;display:block}
/* Заголовок дневника — блочная ссылка: инлайновая давала 24 px по высоте. */
.post b a{display:block;padding-block:10px;color:var(--text);text-decoration:none}
.post b a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px}
.post b a:visited{color:var(--muted)}
.post span{color:var(--muted);font-size:16px;line-height:24px}
.post>div{min-width:0;max-width:65ch}

/* ── подвал ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:14px;line-height:20px}
footer .wrap{display:grid;gap:24px}
@media(min-width:720px){footer .wrap{grid-template-columns:minmax(0,1fr) max-content;align-items:start}}
footer nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:8px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
footer a{color:var(--text);text-decoration:none}
footer a:hover{color:var(--brand);text-decoration:underline}
footer p{margin:0;overflow-wrap:anywhere;max-width:62ch}
@media(max-width:719px){footer .theme{order:-1}}

/* ── страница игры ──────────────────────────────────────────────────────── */
.crumbs{font-size:13px;line-height:20px;color:var(--muted);padding-top:16px;margin:0}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
/* Строка-крошка без ссылки сидела на 6 px выше соседей: коробку задаёт li, не a. */
.crumbs li{display:inline-flex;align-items:center;min-height:44px}
.crumbs li+li::before{content:"›";margin:0 8px;color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong);
  display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--brand)}

/* Круг 2: правая колонка разделена. Наверху — то, ради чего пришли (название,
   кнопка), ниже паспорт: одним куском колонка пустовала на 1366×768. */
.game{display:grid;gap:24px;padding-block:16px 48px;
  grid-template-areas:"media" "cta" "steps" "pass" "prose"}
.game>*{min-width:0}
.g-media{grid-area:media}.g-cta{grid-area:cta}.g-steps{grid-area:steps}
.g-pass{grid-area:pass}.g-prose{grid-area:prose}
@media(min-width:1024px){.game{grid-template-columns:minmax(0,1fr) 380px;column-gap:40px;row-gap:32px;
  padding-block:24px 96px;align-items:start;
  grid-template-areas:"media cta" "steps pass" "prose pass"}}

.poster{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg)}
.poster img{aspect-ratio:16/9;object-fit:cover;object-position:var(--pos,50% 50%);width:100%}
.game h1{font-size:36px;line-height:40px;letter-spacing:-.02em;margin-bottom:12px}
@media(min-width:480px){.game h1{font-size:39px;line-height:44px}}
.lead2{font-size:20px;line-height:28px;color:var(--muted);margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;
  padding:5px 10px;font-size:14px;line-height:20px;max-width:100%;overflow-wrap:anywhere}
.g-cta .btn{width:100%}
.note{font-size:14px;line-height:20px;color:var(--muted);margin:12px 0 16px;text-align:center}

.pass{margin:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);overflow:hidden}
/* В тёмной янтарная шапка спорила с кнопкой «Играть» — тут она просто заголовок. */
.pass b{display:block;font-family:var(--slab);font-size:16px;line-height:24px;
  padding:12px 16px;background:var(--accent);color:var(--on-accent)}
.pass dl{margin:0}
.pass .row{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:16px;
  padding:12px 16px;font-size:16px;line-height:24px;box-shadow:inset 0 1px 0 var(--line)}
.pass dt,.pass dd{margin:0}
.pass dd{color:var(--muted);text-align:right;overflow-wrap:anywhere;
  font-variant-numeric:lining-nums tabular-nums}
/* Ссылка, стоящая в строке одна (почта в реквизитах), сама себе зона тапа: 44 px.
   Инлайновая ссылка внутри предложения под правило 2.5.8 не подпадает и не трогается. */
.pass dd a,.prose dd a{display:inline-flex;align-items:center;min-height:44px}

.steps{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.steps figure{margin:0;min-width:0}
.steps img{width:100%;border-radius:18px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover}
.steps figcaption{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;
  font-size:14px;line-height:20px;color:var(--muted);margin-top:12px;min-height:40px}
.steps b{display:inline-flex;width:24px;height:24px;border-radius:999px;background:var(--accent);
  color:var(--on-accent);align-items:center;justify-content:center;font:600 12px/16px var(--sans)}

.game section{padding-block:0}
.g-steps .h2{margin-bottom:16px}
.prose{max-width:65ch}
.prose ul{margin:0 0 16px;padding-left:24px}
.prose li{font-size:16px;line-height:24px;margin-bottom:8px}
.prose p{font-size:16px;line-height:24px}
/* Переносы только там, где строка узкая: на десктопе «ку-кушка» выглядит дёшево. */
/* «Политика конфиденциальности» одним словом шире колонки на 360 px: заголовок
   переносим по слогам, а если словарь переносов не подхватился — по буквам. */
@media(max-width:479px){.prose p,.prose li,.lead2,.fact span,.prose h1,.prose .h2{hyphens:auto;hyphenate-limit-chars:8 4 4}
  .prose h1,.prose .h2{overflow-wrap:break-word}}
.prose .h2{margin:48px 0 16px}
.prose .h2:first-child{margin-top:0}

/* Раскрывалки: правила ограничены .prose — глобальные задевали мобильное меню. */
summary{cursor:pointer;list-style:none}
summary::marker{content:""}
.prose details{border-top:1px solid var(--line-strong);padding:0}
.prose details>summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;
  min-height:48px;padding-block:12px;font-weight:600;line-height:24px}
.prose details>summary::after{content:"";justify-self:center;width:10px;height:10px;
  border:solid var(--line-strong);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);
  transition:transform 120ms}
.prose details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.prose details p{margin:0;padding-bottom:16px;color:var(--muted);font-size:16px;line-height:24px}

/* Альбом на телефоне: ~360 px рабочей высоты, постер обязан ужаться. */
@media(orientation:landscape) and (max-height:480px) and (max-width:1023px){
  .game{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;
    grid-template-areas:"media cta" "steps steps" "pass pass" "prose prose"}
  .poster img{aspect-ratio:auto;height:40svh;object-fit:cover}
  .game h1{font-size:31px;line-height:36px}
  .lead2{font-size:16px;line-height:24px}
}

/* ── системные состояния ────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .card:hover{transform:none}
  .btn:active{transform:none}
}
@media(prefers-contrast:more){
  .card,.fact,.pass,.chips li,.street .map,.poster{border-color:var(--line-strong)}
  a:not(.btn):not(.logo){text-decoration:underline}
  .btn{border:2px solid var(--on-brand)}
}
@media(forced-colors:active){
  .btn{border:1px solid ButtonText}
  .card .badge,.pass b,.steps b{background:Mark;color:MarkText}
  .theme button[aria-pressed=true]{background:Highlight;color:HighlightText}
}
/* Печать: сбрасываем ТОКЕНЫ, а не только body — иначе из тёмной темы на белый лист
   уезжал кремовый текст (1,16:1). */
@media print{
  /* !important обязателен: тёмные токены объявлены на :root:not([data-theme=light]),
     и по специфичности (0,2,0) они перебивали голый :root, даже стоя выше в файле. */
  :root{
    --bg:#fff!important; --surface:#fff!important; --text:#000!important; --muted:#333!important;
    --brand:#000!important; --brand-hover:#000!important; --on-brand:#fff!important;
    --accent:#fff!important; --on-accent:#000!important; --line:#bbb!important;
    --line-strong:#666!important; --focus:#000!important; --shadow:none!important;
    color-scheme:light!important}
  .hdr,.skip,.theme,.menu,.cta,.btn,.street,footer nav{display:none!important}
  .game{display:block}
  .card,.poster,.pass,.fact,.hero figure{box-shadow:none}
  .lead,.card h3{display:block;overflow:visible;min-height:0}
  .steps figure,.pass .row{break-inside:avoid}
  section{padding-block:24px}
}

/* ── полоса про cookie ──────────────────────────────────────────────────── */
/* Прижата к низу, но не перекрывает содержимое насовсем: закрывается кнопкой
   и больше не приходит. Держит safe-area — на iPhone внизу жестовая полоска. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow)}
.cookie p{margin:0;max-width:72ch;color:var(--muted);font-size:14px;line-height:20px}
.cookie a{color:var(--brand)}
.cookie button{min-height:44px;padding:0 20px;border:1px solid var(--line-strong);border-radius:12px;
  background:transparent;color:var(--text);font:600 14px/20px var(--sans);cursor:pointer}
.cookie button:hover{border-color:var(--brand);color:var(--brand)}
@media print{.cookie{display:none}}

/* ── «Ещё из мастерской» на карточке ────────────────────────────────────── */
/* Соседи, а не рекомендации: список одинаковый для всех и зашит в реестре. */
.also{padding:40px 0 56px;border-top:1px solid var(--line)}
.also .h2{margin:0 0 24px}
.also ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:720px){.also ul{grid-template-columns:repeat(3,1fr);gap:24px}}
.also a{display:flex;gap:16px;align-items:center;min-height:44px;padding:16px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  text-decoration:none;color:var(--text);transition:border-color 120ms}
.also a:hover{border-color:var(--brand)}
.also img{flex:0 0 auto;width:60px;height:60px;border-radius:14px}
.also b{display:block;font:600 16px/24px var(--sans)}
.also span span{display:block;color:var(--muted);font-size:14px;line-height:20px;margin-top:4px}