*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0d0f16; --bg2:#12151e; --card:#161a25; --card2:#1b2030;
  --line:#252b3b; --line2:#323a4f;
  --fg:#eef0f7; --fg2:#c7ccdb; --muted:#a3abc0;
  --accent:#8b7bff; --on-accent:#12111c; --accent2:#5ad1c0; --warn:#ffb454; --bad:#ff7a7a;
  --badge-guide-fg:#cfc4ff; --badge-guide-bg:#1d1a35; --badge-guide-bd:#3b3566;
  --badge-imp-fg:#ffd9a8; --badge-imp-bg:#2a2113; --badge-imp-bd:#5d4a26;
  --badge-dis-fg:#a8e5ff; --badge-dis-bg:#12242c; --badge-dis-bd:#28505e;
  --badge-run-fg:#ffc9de; --badge-run-bg:#2c1420; --badge-run-bd:#5d2b3f;
  --badge-news-fg:#bff0c8; --badge-news-bg:#13251a; --badge-news-bd:#2b5137;
  --tile-ink:#0d0f16;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -18px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --r:12px; --r-lg:16px; --max:1400px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f4f5f9; --bg2:#eceef5; --card:#ffffff; --card2:#f3f5fa;
  --line:#e2e5ee; --line2:#cfd4e1;
  --fg:#14161f; --fg2:#3d4356; --muted:#5d6478;
  --accent:#5a45d8; --on-accent:#ffffff; --accent2:#0d8574; --warn:#a25c00; --bad:#c02b3b;
  --badge-guide-fg:#4a3bbf; --badge-guide-bg:#ece9ff; --badge-guide-bd:#d3ccff;
  --badge-imp-fg:#8a5300; --badge-imp-bg:#fff4e2; --badge-imp-bd:#f4ddb4;
  --badge-dis-fg:#0a6f8c; --badge-dis-bg:#e6f7fd; --badge-dis-bd:#bfe5f2;
  --badge-run-fg:#a8174a; --badge-run-bg:#ffeaf1; --badge-run-bd:#f8c8da;
  --badge-news-fg:#1d6b31; --badge-news-bg:#eaf7ec; --badge-news-bd:#c3e6c9;
  --tile-ink:#14161f;
  --shadow:0 1px 2px rgba(20,22,31,.06),0 10px 28px -20px rgba(20,22,31,.35);
  --shadow-sm:0 1px 2px rgba(20,22,31,.08);
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.22;letter-spacing:-.015em;font-weight:650}
h1{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.2rem)}
h2{font-size:clamp(1.2rem,1.02rem + .6vw,1.5rem)}
h3{font-size:1.06rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.35em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
code{font-family:var(--mono);font-size:.9em;background:var(--card2);padding:.1em .4em;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--card);border:1px solid var(--line2);padding:10px 14px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;min-height:60px;position:relative}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand svg{width:24px;height:24px;flex:0 0 auto}
/* The owner's logo, two sizes: the dark-theme cut and a light-theme cut where
   the white tile is repainted lavender (otherwise it vanishes on white). It is
   the whole brand in the header — no wordmark next to it — so it is shown
   larger than it was when the site name sat beside it; the stored file is
   170×96, so 64×36 still lands on a 2.6× retina asset. */
.brand-mark{flex:0 0 auto;width:64px;height:36px;display:block;
  background:url(/assets/logo.webp?v=2) no-repeat center/contain}
html[data-theme="light"] .brand-mark{background-image:url(/assets/logo-light.webp?v=2)}
/* Search: поле стоит в строке шапки СЛЕВА от значка (слово владельца 01.10.2026:
   «на десктопе поисковое окно должно появляться не снизу от значка поиска а слева»),
   а подсказки раскрываются под полем поверх страницы. Значок и остальные кнопки
   остаются на своих местах: группа .head-act прижата вправо, поэтому ширина поля
   растит её влево. */
.head-search{position:relative;width:320px;max-width:min(320px,46vw);z-index:46}
.head-search[hidden]{display:none}
.head-search input{width:100%;padding:9px 12px;font-size:.92rem;background:var(--bg2);border-color:var(--line)}
.head-sug{position:absolute;left:0;top:calc(100% + 8px);width:100%;min-width:320px;max-height:min(60vh,440px);overflow:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px;z-index:60}
.head-sug[hidden]{display:none}
.head-sug a{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:9px;color:var(--fg);text-decoration:none}
.head-sug a:hover,.head-sug a:focus{background:var(--card2)}
.head-sug .hs-k{flex:0 0 54px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* Слово владельца 01.10.2026: «Нужно чтобы было видно название игры в результатах поиска».
   Раньше описание было тянущимся и задавливало название: замер на живом домене по слову
   «among» — у строки игры имя занимало 11 px при своей ширине 80 (то есть было срезано до
   буквы). Теперь имя не сжимается, описание забирает остаток и обрезается многоточием. */
.head-sug .hs-t{flex:0 0 auto;max-width:58%;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head-sug .hs-d{flex:1 1 auto;min-width:0;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head-sug .hs-all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--accent)}
/* На телефоне поле остаётся в шапке, а подсказки ложатся на всю ширину экрана поверх
   страницы — так просил владелец в ответе 4а. Чтобы строка шапки не вылезала за экран,
   пока поиск открыт, логотип и остальные кнопки на это время убираются: в строке
   остаются поле и значок поиска, как на десктопе. Top списка задаёт скрипт. */
@media(max-width:640px){
  .head-search{width:min(300px,calc(100vw - 132px))}
  .head-sug{position:fixed;left:8px;right:8px;width:auto;min-width:0;max-height:64vh}
  /* На телефоне описание убирается вовсе: строка — это тип и название, и название
     видно целиком (слово владельца: «Нужно чтобы было видно название игры»). */
  .head-sug .hs-d{display:none}
  .head-sug .hs-t{max-width:100%}
  html[data-search="1"] .site-head .brand{display:none}
  html[data-search="1"] .head-act > *:not(.head-search):not([data-search-toggle]){display:none}
  html[data-search="1"] .head-search{width:auto;flex:1 1 auto;max-width:none}
}
.head-act{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:var(--card);border:1px solid var(--line2);border-radius:10px;color:var(--fg);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:17px;height:17px}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}
html[data-theme="light"] .icon-sun{display:none}
html[data-theme="light"] .icon-moon{display:block}
.burger{display:none}
.hide-sm{display:inline-flex}
/* The mirror of hide-sm: the phone's write control. The text button needs a row
   the header does not have at 390 px, so under 640 px the same action is an
   icon-only button — measured 38 px + 8 px gap against 151 px of free space. */
.head-act .only-sm{display:none}
@media(max-width:640px){
  .head-act .hide-sm{display:none}.brand-mark{width:54px;height:30px}.head-act .only-sm{display:inline-flex}}
@media(max-width:960px){
  .burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    background:var(--card);border:1px solid var(--line2);border-radius:10px;color:var(--fg);cursor:pointer}
}

/* ---------- three-column shell ---------- */
.app{
  display:grid;grid-template-columns:216px minmax(0,1fr) 320px;gap:26px;
  align-items:start;padding-top:22px;padding-bottom:40px;
}
.app__col--left{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto}
/* The rail scrolls with the page and keeps its own scrollbar when it is taller
   than the viewport, the same way the left column does. */
.app__col--right{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;
  scrollbar-width:thin}
@media(max-width:1200px){
  .app{grid-template-columns:200px minmax(0,1fr);gap:22px}
  .app__col--right{position:static;grid-column:1/-1;max-height:none;overflow:visible}
}
@media(max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app__col--left{position:fixed;inset:60px 0 auto;z-index:35;max-height:none;overflow:auto;
    background:var(--bg2);border-bottom:1px solid var(--line);padding:12px 16px 18px;box-shadow:var(--shadow)}
  .app__col--left[hidden]{display:none}
  /* panels are touched, not clicked: every row clears the 44px target.
     Selector is deliberately heavier than the base .menu a rule below, which
     would otherwise win on source order. */
  .app__col--left .menu a{padding:12px 12px;font-size:1rem}
  .app__col--left .menu-head{margin-top:22px}
}

/* ---------- left menu ---------- */
.menu{list-style:none;padding:0;margin:0 0 18px}
.menu li{margin:0}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--fg2);
  font-size:.95rem;font-weight:520}
.menu a svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.menu a:hover{background:var(--card);color:var(--fg)}
.menu a[aria-current="page"]{background:var(--card2);color:var(--fg);font-weight:620;box-shadow:var(--shadow-sm)}
.menu-head{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;padding:0 11px}
.menu-head:first-child{margin-top:0}
/* Кнопка Contact us: контурная, отдельно от группы GamersGuild, без горизонтальной черты
   (карточка «Блок контакты», вариант 2 владельца). */
.menu-contact{margin:40px 0 18px;padding:0}
/* Слово владельца 30.09.2026: «Опусти вниз кнопку на 40 пикселей» — верхний отступ 40 px. */
.menu-contact .btn--outline-contact{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:10px 12px;min-height:44px;border:1px solid var(--line2);border-radius:10px;background:transparent;
  color:var(--fg2);font-size:.95rem;font-weight:560;text-decoration:none}
.menu-contact .btn--outline-contact svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.menu-contact .btn--outline-contact:hover{border-color:var(--accent);color:var(--fg)}
.menu-contact .btn--outline-contact[aria-current="page"]{border-color:var(--accent);color:var(--fg)}
/* "GamersGuild" group: a disclosure with a caret, holding the pages that used
   to sit in the footer (guidelines, contact, about, policy, terms, cookies). */
.menu-group{margin:18px 0 0}
.menu-group>summary{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  color:var(--fg2);font-size:.95rem;font-weight:520;cursor:pointer;list-style:none}
.menu-group>summary::-webkit-details-marker{display:none}
.menu-group>summary:hover{background:var(--card);color:var(--fg)}
.menu-group[open]>summary{color:var(--fg)}
.menu-group .caret{margin-left:auto;width:15px;height:15px;opacity:.75;transition:transform .15s}
.menu-group>summary .mi{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.menu-group[open] .caret{transform:rotate(180deg)}
.menu-sub{margin:2px 0 0 11px;padding-left:10px;border-left:1px solid var(--line)}
.menu-sub a,.menu-btn{padding:8px 10px;font-size:.9rem}
.menu-btn{display:flex;width:100%;align-items:center;background:none;border:0;border-radius:10px;
  color:var(--fg2);font:inherit;font-size:.9rem;font-weight:520;text-align:left;cursor:pointer}
.menu-btn:hover{background:var(--card);color:var(--fg)}

/* ---------- centre + rail blocks ---------- */
.center{min-width:0}
.rail{display:grid;gap:16px}
.rail-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.rail-box h2,.rail-box h3{font-size:.98rem;margin:0 0 12px}
/* The ad slot: the network's iframe is 300px wide, so the box keeps 8px of
   padding instead of 18px and centres it. Nothing is reserved when the network
   returns nothing - client.mjs removes the empty box (see loadBanner).
   Слова владельца 30.09.2026: «убери стандартную окантовку рекламного блока в
   правой колонке» — рамки и фона карточки у этого блока нет, остаётся только
   само объявление. */
.rail-box--ad{padding:10px 8px;display:flex;justify-content:center;overflow:hidden;border:0;background:none}
/* The wide slot between list entries (the posts and games lists). It is only
   ever inserted where the list itself is 728 px or wider, so nothing here has to
   cope with a narrow column. */
.list-ad{margin:16px 0;display:flex;justify-content:center}
.grid--games>.list-ad{grid-column:1/-1}
.rail-list{list-style:none;padding:0;margin:0}
.rail-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line);margin:0}
.rail-list li:last-child{border-bottom:0;padding-bottom:0}
.rail-list .n{font-size:.82rem;color:var(--muted);font-weight:600;min-width:16px;line-height:1.5}
.rail-list a{font-size:.92rem;line-height:1.45}
.rail-list .sub{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
/* The rail lists open with a small picture (owner's mockup, 28.09.2026): the
   112x64 file drawn in a 56x32 box, so a list row costs ~4 KB instead of the
   16-23 KB of the 360/480 copies. A picture without that copy falls back to the
   initials tile, which keeps the same box. */
.rail-thumb{width:56px;height:32px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:var(--bg2)}
.rail-list--thumb li{align-items:center}
.rail-list--thumb li>span:last-child{min-width:0}
.rail-link{display:block;font-size:.92rem;padding:7px 0;border-bottom:1px solid var(--line)}
.rail-link:last-child{border-bottom:0}
.rail-tags{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- section heads ---------- */
.sec{padding:26px 0}
.sec--tight{padding:18px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head h2{margin:0;font-size:1.22rem;letter-spacing:-.01em}
.sec-head p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.sec-head a{font-size:.9rem;color:var(--accent);white-space:nowrap}
.feed{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.feed li{margin:0}
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card--link{display:flex;flex-direction:column;gap:9px;transition:border-color .15s,transform .15s}
.card--link:hover{border-color:var(--line2);transform:translateY(-1px);color:inherit}
.card h2,.card h3{margin:0}
.card p{margin:0;color:var(--fg2);font-size:.94rem}
.meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line2)}
.badge{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:650;
  color:var(--accent2);background:var(--badge-dis-bg);border:1px solid var(--badge-dis-bd);border-radius:999px;padding:3px 9px}
.badge--guide{color:var(--badge-guide-fg);background:var(--badge-guide-bg);border-color:var(--badge-guide-bd)}
.badge--impression{color:var(--badge-imp-fg);background:var(--badge-imp-bg);border-color:var(--badge-imp-bd)}
.badge--discussion{color:var(--badge-dis-fg);background:var(--badge-dis-bg);border-color:var(--badge-dis-bd)}
.badge--roundup{color:var(--badge-run-fg);background:var(--badge-run-bg);border-color:var(--badge-run-bd)}
.badge--news{color:var(--badge-news-fg);background:var(--badge-news-bg);border-color:var(--badge-news-bd)}
/* The badge row: the type of the post first, then a chip per game it names. */
.chip--game{font-size:.72rem;padding:3px 9px;letter-spacing:0;margin-left:2px}
.src-list{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.src-list a{font-size:.88rem;color:var(--fg2);border:1px solid var(--line2);border-radius:999px;padding:4px 11px;text-decoration:none}
.src-list a:hover{color:var(--fg);border-color:var(--accent)}
/* The «Games» list on a studio wiki page (owner's decision 06.10.2026): every title
   the studio is credited with, our own records linked, the rest plain. Two columns
   on a wide screen, one on a phone, so a long list stays readable. */
.glist{list-style:none;padding:0;margin:0 0 1.5em;columns:2;column-gap:28px}
.glist li{margin:0 0 6px;font-size:.95rem;line-height:1.4;break-inside:avoid}
@media (max-width:640px){.glist{columns:1}}
.post-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.post-card h2,.post-card h3{margin:6px 0 4px;font-size:1.06rem}
.tile{width:48px;height:48px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:.95rem;color:var(--tile-ink);letter-spacing:-.02em;
  background:linear-gradient(145deg,hsl(var(--h) 62% 68%),hsl(calc(var(--h) + 34) 58% 52%))}
.tile--lg{width:100%;height:96px;border-radius:var(--r);font-size:1.5rem}
/* News thumbnails in the feed: 16:9, same column as the initials tile it
   replaces, so cards keep their rhythm whether or not a picture exists. */
.thumb{width:132px;height:76px;border-radius:12px;flex:0 0 auto;object-fit:cover;background:var(--card2)}
/* The feed (home and /posts/) draws its picture at the size of a game cover in
   the games list, 240×138, and stacks under 761 px the way a game card does
   (owner's decision, 2026-09-27). Every other list a post card appears in — the
   "Community posts" block on a game page, a profile — keeps the 132×76 box. */
[data-feed] .post-card .thumb{width:240px;height:138px;border-radius:var(--r)}
@media(max-width:760px){
  [data-feed] .post-card{grid-template-columns:minmax(0,1fr)}
  [data-feed] .post-card .thumb{order:-1;width:100%;height:auto;aspect-ratio:616/353}
}
.article-fig{margin:0 0 16px}
.article-img{display:block;width:100%;height:auto;max-width:616px;border-radius:var(--r);object-fit:cover}
.img-cap{font-size:.83rem;color:var(--muted);margin:8px 0 0;max-width:616px;line-height:1.45}
/* ---------- cover art ---------- */
.cover{display:block;width:100%;height:auto;aspect-ratio:616/353;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line);background:var(--card2)}
.cover--card{margin-bottom:2px}
/* ---------- game page hero (owner's mockup, 28.09.2026) ----------
   The cover fills the whole first panel, the text sits on a dark gradient at the
   bottom of it, and the panel is framed and rounded. The gradient is a fixed
   dark-to-transparent wash and the text over it is light in BOTH themes: the
   picture behind it is a colour photograph, so a theme-aware colour would put
   dark text on a dark image half the time. */
.game-hero{position:relative;display:grid;align-items:end;min-height:240px;
  border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:#0d0f16}
.game-hero .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__img--plain{background:linear-gradient(140deg,hsl(var(--h,258) 42% 24%),#0d0f16)}
.hero__body{position:relative;padding:22px 24px 20px;
  background:linear-gradient(180deg,rgba(8,10,16,0) 0%,rgba(8,10,16,.55) 42%,rgba(8,10,16,.9) 100%)}
.game-hero h1{margin:0 0 8px;color:#f5f6fa;font-size:clamp(1.5rem,3.2vw,2.15rem);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero__dek{margin:0;max-width:62ch;color:#e6e9f2}
.chips.chips--hero{margin:18px 0 0}   /* отступ между текстом игры и тегами (владелец, 28.09.2026) */
.chips--hero .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#f5f6fa}
.chips--hero .chip--price{background:rgba(139,123,255,.3);border-color:rgba(139,123,255,.45)}
@media(max-width:640px){.game-hero{min-height:200px}.hero__body{padding:16px 14px 14px}}
/* Кнопка Game History в шапке страницы игры: левый верхний угол, полупрозрачная, с размытием
   (вариант 4 владельца, карточка «Game History»). Лежит поверх обложки, поэтому фон —
   полупрозрачный тёмный с blur, а не карточка темы. */
/* Кнопки первого блока страницы игры — одной строкой: Game History, справа от неё Compare.
   Слово владельца 30.09.2026: «кнопка сравнения должна стоять справа от кнопки Game History
   и фон кнопки должен быть такой же». До правки обе кнопки были абсолютными с одним и тем же
   адресом (left:14px;top:14px) и стояли друг на друге (замер: обе на 297,98 px). Теперь их
   раскладывает общий контейнер, а фон, рамка и тень у Compare такие же, как у Game History. */
.ghbtns{position:absolute;top:14px;left:14px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 28px)}
.ghbtn{position:relative;z-index:auto;display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(13,15,22,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#f2f4fa;font-size:.88rem;font-weight:560;text-decoration:none;box-shadow:0 1px 10px rgba(0,0,0,.35)}
.ghbtn:hover{background:rgba(13,15,22,.6);color:#fff;border-color:rgba(255,255,255,.4)}
.ghbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ghbtn__ic{display:inline-flex;width:17px;height:17px}
.ghbtn__ic svg{width:17px;height:17px}
@media(max-width:640px){.ghbtns{top:10px;left:10px;gap:6px}.ghbtn{min-height:36px;padding:6px 12px;font-size:.82rem}}
/* Таймлайн истории: дата слева, событие справа, вертикальная линия между ними (вариант 1
   владельца: «вертикальная шкала с датой слева, как на моём макете»). Сверху новые.
   Размеры — по словам владельца 30.09.2026: «дата и заголовок должны быть одинаково
   отцентрированы по вертикали и расположены посередине точки; расстояние сверху от точки
   до линии должно быть точно таким же, как от линии до точки снизу».
   --tl-lh — высота первой строки, одинаковая у даты и у заголовка: их середины совпадают,
   и точка, отцентрованная по этой середине, стоит ровно между ними;
   --tl-dot — диаметр точки, --tl-gap — зазор «точка → линия» и «линия → следующая точка»
   (вниз линия выходит ровно на --tl-gap от точки следующего события), --tl-pad — отступ
   между событиями. */
.tl{list-style:none;padding:0;margin:0;--tl-lh:22px;--tl-dot:9px;--tl-gap:8px;--tl-pad:22px}
.tl__item{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 22px;position:relative;
  margin:0;padding:0 0 var(--tl-pad);align-items:start}
.tl__item:last-child{padding-bottom:0}
/* Дата и заголовок события начинаются на одном уровне и имеют одинаковую высоту строки. */
.tl__d{color:var(--muted);font-size:.86rem;margin:0;padding:0;line-height:var(--tl-lh);white-space:nowrap}
/* align-self:stretch — чтобы блок события занимал всю высоту строки сетки (иначе высота
   блока меньше строки, когда дата длиннее текста, и нижний зазор «линия → следующая точка»
   считался бы не от той кромки). Нижнего отступа у последнего абзаца нет намеренно: его
   внешний отступ вылезал из блока и сдвигал линию на 6 px (замер: зазор снизу выходил 14 px
   вместо 8). */
.tl__b{position:relative;padding:0 0 0 22px;align-self:stretch}
.tl__x:last-child{margin-bottom:0}
/* Линия рисуется отдельным слоем и начинается НИЖЕ точки — точка с линией не соединена
   (слово владельца 30.09.2026: «точка не должна быть соединена с линией»). */
.tl__b::before{content:"";position:absolute;left:0;top:calc(var(--tl-lh)/2 - var(--tl-dot)/2);
  width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;background:var(--accent)}
.tl__b::after{content:"";position:absolute;left:4px;width:1px;background:var(--line2);
  top:calc(var(--tl-lh)/2 + var(--tl-dot)/2 + var(--tl-gap));
  bottom:calc(-1 * (var(--tl-pad) + var(--tl-lh)/2 - var(--tl-dot)/2 - var(--tl-gap)))}
.tl__item:last-child .tl__b::after{display:none}
/* Селектор с .prose перебивает правило .prose h2 (у него есть верхний отступ), иначе
   заголовок события уезжал на 29 px ниже даты — замер, слово владельца «на уровне даты».
   Обратных кавычек в комментариях этого файла быть не должно: файл — шаблонная строка. */
.prose .tl__t{font-size:1.02rem;margin:0 0 4px;line-height:var(--tl-lh)}
.tl__x{margin:0 0 6px;color:var(--fg2);font-size:.94rem}
.tl__s{margin:0;font-size:.8rem;color:var(--muted)}
@media(max-width:600px){
  .tl__item{grid-template-columns:1fr;gap:4px}
  .tl__b{padding-left:18px}
}
/* A heading with its icon (Overview, Community, Similar games, Game Details,
   Latest posts) — the five shapes the owner drew on the mockup. */
.h-ico-row{display:flex;align-items:center;gap:10px}
.h-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;flex:0 0 auto;background:var(--card2);border:1px solid var(--line);color:var(--accent)}
.h-ico svg{width:17px;height:17px}
.h-ico--overview{color:#6ea8fe;background:rgba(110,168,254,.14);border-color:rgba(110,168,254,.3)}
.h-ico--chat{color:#a78bfa;background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.3)}
.h-ico--pad{color:#34d399;background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.3)}
.h-ico--info{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.3)}
.h-ico--list{color:#60a5fa;background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.3)}
.h-ico--play{color:#f87171;background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.3)}
.h-ico--quote{color:#a78bfa;background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.3)}
.h-ico--star{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.3)}
.rail-box .h-ico-row{font-size:.98rem;margin:0 0 12px}
.rail-box .h-ico{width:26px;height:26px;border-radius:8px}
.rail-box .h-ico svg{width:15px;height:15px}
/* "Nothing yet …" row in the Community block: the note and the way in sit on
   one line, the way the mockup draws it. */
.community-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg2)}
.community-empty p{margin:0;flex:1 1 260px;color:var(--fg2);font-size:.95rem}
.community-empty .btn{flex:0 0 auto}
/* Trailer block: our own poster with a play button, linking out to YouTube (the
   owner's choice — an embedded player would put a third-party frame in the page
   and force a CSP change). */
.trailer{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.trailer img{display:block;width:100%;height:auto;aspect-ratio:616/353;object-fit:cover}
.trailer__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.trailer__play svg{width:46px;height:46px;filter:drop-shadow(0 3px 12px rgba(0,0,0,.6))}
.trailer:hover .trailer__play svg{transform:scale(1.08)}
.trailer__cap{margin:8px 0 0;font-size:.84rem;color:var(--muted)}
.game-card{display:flex;flex-direction:column;gap:9px;padding:14px}
.game-card__body{display:flex;flex-direction:column;gap:9px;min-width:0}
/* Слово владельца 30.09.2026: обложка и заголовок — ссылки на игру, год и жанр — ссылки на
   свои страницы фильтров. Описание в карточке обрезано четырьмя строками с многоточием
   (его же слово: «ограничится описанием в 4 строки, в конце последней многоточие»). */
.game-card__cover{display:block;line-height:0;border-radius:var(--r-lg);overflow:hidden}
.game-card__title{color:inherit}
.game-card .meta a{color:var(--fg2);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--fg2) 45%,transparent)}
.game-card .meta a:hover{color:var(--accent);text-decoration-color:currentColor}
.game-card__sum{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* From 761 px up a game card in a list is a row: cover left at 240 px, the
   rest of the info right, the two centred vertically (owner's decision,
   2026-09-27). Under 761 px the card stays the stack it was, cover on top. */
@media(min-width:761px){
  .grid--games{grid-template-columns:minmax(0,1fr)}
  .game-card{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:18px;row-gap:9px;align-items:center}
  .game-card>.cover{width:240px;max-width:none;margin:0}
}
/* The "Similar games" block on a game page is three CARDS side by side, not rows
   (owner's mockup, 28.09.2026): the cover goes back on top of the text and the
   grid stays three columns from 761 px up, where the games database itself is a
   list of wide rows. */
.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:761px){
  .related-grid .game-card{display:flex;grid-template-columns:none;flex-direction:column;align-items:stretch}
  .related-grid .game-card>.cover{width:100%;margin:0}
}
@media(max-width:1200px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.related-grid{grid-template-columns:minmax(0,1fr)}}
/* The Similar games cards are narrow, so the owner asked for two things here
   (28.09.2026): the description stops after three lines with an ellipsis, and the
   pricing chip does not take part — the same cards in /games/ keep both. */
.related-grid .game-card__sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.related-grid .game-card .chip--price{display:none}
.game-card h3{font-size:1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.chip{font-size:.8rem;color:var(--fg2);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;white-space:nowrap}
.chip--accent{color:var(--accent2);border-color:var(--badge-dis-bd);background:var(--badge-dis-bg)}
/* Price model: a chip of its own kind, so it does not read as a tag. */
.chip--price{color:var(--fg);border-color:var(--line2);font-weight:600;letter-spacing:.02em}
/* The /games/ filter says which tags are on and offers to clear them. */
.tag-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);margin:0 0 12px}
.tag-bar .chip{margin:0}
a.chip:hover{border-color:var(--accent);color:var(--fg)}

/* ---------- buttons, forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:10px;border:1px solid var(--line2);background:var(--card);
  color:var(--fg);font:inherit;font-size:.93rem;font-weight:560;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--fg)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.btn--ghost{background:transparent}
.btn--sm{padding:7px 12px;font-size:.87rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
label{display:block;font-size:.9rem;color:var(--fg2);margin:0 0 6px;font-weight:520}
input,textarea,select{width:100%;font:inherit;color:var(--fg);background:var(--bg2);
  border:1px solid var(--line2);border-radius:10px;padding:10px 12px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
textarea{min-height:150px;resize:vertical}
.field{margin-bottom:16px}
/* The four-digit code: big and spaced out, so it can be typed from a phone in
   one look at the message. Tabular figures stop the digits shifting. */
.field--code input{font-size:1.5rem;letter-spacing:.45em;text-align:center;
  font-variant-numeric:tabular-nums;padding:13px 12px 13px 20px}
[data-step-2] h2{margin:0 0 8px}
.hint{font-size:.83rem;color:var(--muted);margin:6px 0 0}
/* ---------- game picker (publish form) ---------- */
/* One box with a list under it instead of a multiple select: the list hangs
   under the field, the picked games sit above it as chips. */
.picker{position:relative}
.picker__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:270px;overflow:auto;
  margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line2);
  border-radius:12px;box-shadow:var(--shadow)}
.picker__list li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.95rem}
.picker__list li:hover,.picker__list li[aria-selected="true"]{background:var(--bg2)}
.chips--pick{margin:10px 0 0}
.chip__x{margin-left:7px;padding:0;border:0;background:none;color:inherit;cursor:pointer;font-size:.95rem;line-height:1}
.form-note{font-size:.85rem;color:var(--muted)}
.status{margin:14px 0 0;font-size:.91rem;min-height:1.2em}
.status--ok{color:var(--accent2)}
.status--bad{color:var(--bad)}

/* ---------- article / prose ---------- */
.prose h2{margin-top:1.8rem}
/* Центральные блоки страницы игры (Overview, Screenshots, Awards, Community…): слова владельца
   30.09.2026 — «сделай расстояние между всеми отдельными центральными блоками на странице
   чуть больше». Правило только про блоки с иконкой (.h-ico-row), то есть про игровые страницы,
   и не задевает заголовки в тексте постов и статей вики. */
.prose>h2.h-ico-row{margin-top:2.4rem}
.prose h3{margin-top:1.4rem}
.prose p,.prose li{color:var(--fg2)}
/* Autolinks the build puts inside body text (a game or a studio named in a post
   or a wiki article) are purple, per the owner's request — the same accent the
   rest of the site uses, which passes AA contrast on both themes. Underlined on
   purpose: a link in a block of text must not be told apart by colour alone
   (the project's own rule, and axe's link-in-text-block check). */
.prose p a,.prose li a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose p a:hover,.prose li a:hover{color:var(--fg)}
/* Фиолетовое выделение — только для ссылок в тексте записи (слово владельца 29.09.2026:
   «Ссылки должны выделяться фиолетовым только в тексте записи, теги, заголовки оставляем
   как было»). На странице игры лента постов и правые списки лежат внутри общего блока
   .prose, и правило выше красило заодно чипы-теги, имена авторов и заголовки карточек
   (замер: 4 из 4 ссылок в ленте — фиолетовые). Возвращаем им прежний вид. */
.prose .feed a,.prose .card a,.prose .rail a,.prose a.chip{color:inherit;text-decoration:none}
.prose .feed a:hover,.prose .card a:hover,.prose .rail a:hover{color:var(--fg)}
/* Обзор игры: свёрнутый вид — первый абзац обрезан по строке с многоточием, остальные
   абзацы скрыты, под ними кнопка. Развёрнутый (.is-open) — обычный текст. */
.prose__foldlead{margin-bottom:0}
.prose__fold:not(.is-open) .prose__foldlead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prose__fold:not(.is-open) #game-overview-full>:not(.prose__foldlead){max-height:0;overflow:hidden;margin:0;padding:0}
/* Подзаголовки внутри обзора. Слово владельца 30.09.2026: «Я указал тебе заголовки 2 уровня
   (##) — он должен быть крупнее обычного текста, под и над ним немного пустого места».
   Поэтому строка «## » печатается тегом h2 и получает размер крупнее текста и воздух сверху
   и снизу (селектор с id перебивает общее правило .prose h2). */
#game-overview-full .prose__sub{margin:1.8rem 0 .6rem;font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.3;letter-spacing:-.01em;color:var(--fg)}
#game-overview-full .prose__sub:first-child{margin-top:0}
.prose-toggle{margin:12px 0 0;padding:9px 16px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;background:var(--card);color:var(--fg2);font:inherit;font-size:.85rem;cursor:pointer}
.prose-toggle:hover{border-color:var(--accent);color:var(--fg)}
.prose-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Кадры игры: ряд миниатюр 16:9 и попап на <dialog> (вид владельца, к нему он вернулся
   30.09.2026 словами «Откати старый вид скриншотов»). */
.shots__row{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:640px){.shots__row{grid-template-columns:repeat(6,1fr)}}
.shots__item{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;line-height:0;text-decoration:none}
.shots__item:hover{border-color:var(--accent)}
.shots__item img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.shots__more{margin:10px 0 0}
.shots__link{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
/* Плитка видео: тот же бокс, что у кадра, плюс значок воспроизведения и длительность. */
.shots__item--video{position:relative;padding:0;background:none;cursor:pointer}
/* Плитка ролика без картинки: у игры нет ни кадров, ни обложки (четыре игры владелец
   разрешил опубликовать без обложки). Рисуется мягким градиентом от слага — как
   запасной герой-фон на странице игры, а не пустой рамкой. */
.shots__blank{display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(140deg,hsl(var(--h,258) 42% 24%),#0d0f16)}
.shots__item--video .vid__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.22)}
.shots__item--video .vid__play svg{width:34px;height:34px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.65))}
.shots__item--video:hover .vid__play{background:rgba(0,0,0,.34)}
.vid__len{position:absolute;right:6px;bottom:6px;padding:1px 5px;border-radius:5px;
  background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;font-variant-numeric:tabular-nums}
/* Панель видео из макета владельца: постер, кнопка play, стрелки, подпись «название · время». */
.videos{margin:16px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 13px 13px}
.videos__body{position:relative}
.media__head{display:flex;align-items:center;gap:10px;margin:0 0 10px;min-width:0}
.media__count{font-size:.82rem;color:var(--muted)}
.media__all{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:.84rem;color:var(--accent);white-space:nowrap;cursor:pointer}
.vid__frame{display:block;width:100%;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;line-height:0;padding:0;background:none;cursor:pointer}
.vid__frame:hover{border-color:var(--accent)}
.vid__frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.media__nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(13,15,22,.5);backdrop-filter:blur(6px);
  color:#fff;font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.media__nav--prev{left:8px}.media__nav--next{right:8px}
.media__nav:hover{background:rgba(13,15,22,.72)}
.vid__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.vid__play svg{width:44px;height:44px;filter:drop-shadow(0 3px 12px rgba(0,0,0,.6))}
.vid__cap{display:flex;align-items:baseline;gap:8px;margin:9px 0 0;font-size:.85rem;color:var(--fg2);min-width:0}
.vid__cap [data-vid-title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid__time{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.vidbox__body{background:#000}
.vidbox__body iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vidbox__note{margin:0;padding:8px 14px 12px;font-size:.82rem;color:var(--muted)}
.vidbox__list{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.vidbox__list button{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--fg2);font:inherit;font-size:.82rem;cursor:pointer;max-width:100%;text-align:left}
.shotbox{width:min(1100px,92vw);max-height:92vh;padding:0;border:1px solid var(--line2);border-radius:14px;background:var(--bg);color:var(--fg)}
.shotbox::backdrop{background:rgba(0,0,0,.72)}
.shotbox__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.shotbox__cap{font-size:.85rem;color:var(--muted)}
.shotbox__close{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--fg);font-size:1.1rem;line-height:1;cursor:pointer}
.shotbox__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:14px;overflow:auto;max-height:78vh}
.shotbox__grid a{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;line-height:0}
.shotbox__grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.shotbox__view{margin:0;padding:0 14px 14px}
.shotbox__view img{width:100%;height:auto;max-height:74vh;object-fit:contain;background:var(--card);border-radius:10px}
/* Листалка кадров: слово владельца 01.10.2026 — в попапе она стоит САМОЙ ВЕРХУ, под ней
   крупный кадр, а ниже полоса превьюшек (порядок в разметке: nav → view → grid).
   Между листалкой и кадром нужен воздух: «Добавь отступ между пагинацией и большой
   версией скриншота» — иначе кнопки липнут к картинке. */
.shotbox__nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 14px 16px;font-size:.85rem;color:var(--muted)}
.shotbox__nav[hidden]{display:none}
.shotbox__nav button{min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--fg);font-size:1.2rem;cursor:pointer}
.shotbox--single .shotbox__view img{max-height:58vh}
.shotbox--single .shotbox__grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 14px 14px;max-height:none}
.shotbox--single .shotbox__grid a{flex:0 0 132px}
.shotbox--single .shotbox__grid a[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media(max-width:640px){
  .shotbox--single .shotbox__view img{max-height:46vh}
  .shotbox--single .shotbox__grid a{flex:0 0 96px}
}
/* Красная полоса владельца над шапкой (карточка «Сделай страницу быстрого
   реагирования», ответ владельца 2а: показывается только ему и только когда есть
   хоть один незакрытый пункт). Литеральный красный с белым текстом читается в обеих
   темах, поэтому токены темы здесь не берём. */
.deskbar{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#8f1d16;color:#fff;font-size:.86rem;font-weight:600;text-decoration:none}
.deskbar:hover{background:#a5241b;color:#fff}
.deskbar__dot{width:8px;height:8px;border-radius:50%;background:#ff6b5e;flex:0 0 auto}
.deskbar__txt{flex:1 1 auto}
.deskbar__go{white-space:nowrap;opacity:.9}
.desk__total{font-size:.95rem;color:var(--fg2);margin:0 0 18px}
@media(max-width:640px){ .deskbar{font-size:.8rem;padding:8px 12px} }

/* Магазины и цены: плотный список строк «логотип магазина · название · чипы платформ · цена ·
   Open» — вариант 5 владельца (30.09.2026: «Мне нравится Вариант 5 — плотный список с чипами
   платформ, только добавь логотипы магазинов»). Лучшая цена подсвечивается только фоном,
   левой черты нет (его слово того же дня). */
.stores{margin:20px 0 0}
/* Слово владельца 30.09.2026 (второе, того же дня): «линия и выделение должны начинаться от
   самого края до конца» — боковой отступ уехал со списка на саму строку. Полотно строки теперь
   во всю ширину блока, поэтому и разделительная линия, и подсветка лучшей цены идут от края до
   края, а логотип и цена остаются на своих 14 px от рамки (первое слово того же дня). */
.stores__list{list-style:none;margin:0;padding:0}
/* Дополнения и издания: строки с меткой, названием и датой справа. */
/* Кнопка Compare рядом с Game History — фон, рамка и тень такие же, как у Game History
   (слово владельца 30.09.2026: «фон кнопки должен быть такой-же»). Класс .ghbtn--cmp остаётся
   только как признак для валидатора, отдельных правил вида у него больше нет. */
/* Страница сравнения: два поля выбора сверху, таблица свойств под ними. Значения —
   одного цвета (слово владельца 30.09.2026): ни полосы, ни цветного выделения у
   различающихся строк нет. */
.cmphead{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 18px}
@media(min-width:720px){.cmphead{grid-template-columns:1fr 1fr}}
.cmppick{position:relative}
.cmppick__field{position:relative}
.cmppick__label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:5px}
.cmppick__input{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--fg);font:inherit}
.cmppick__input:focus{outline:2px solid var(--accent);outline-offset:1px}
/* Крестик очистки центрируется по самому полю (слово владельца 30.09.2026: «поправь крестики»):
   раньше он висел в 26 px от верха блока и стоял у верхнего края поля, а не посреди него. */
.cmppick__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg2);font:inherit;
  font-size:15px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.cmppick__clear:hover{border-color:var(--accent);color:var(--fg)}
.cmppick__list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:10px;max-height:260px;overflow:auto}
.cmppick__list button{display:block;width:100%;text-align:left;padding:7px 9px;border:0;border-radius:7px;
  background:none;color:var(--fg2);font:inherit;cursor:pointer}
.cmppick__list button:hover,.cmppick__list button.is-active{background:var(--accent);color:#fff}
.cmp{width:100%;border-collapse:collapse;margin:0}
.cmp th,.cmp td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--fg2)}
.cmp thead th{color:var(--fg);font-size:.9rem}
.cmp thead a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.cmp__thumb{border-radius:6px;object-fit:cover}
.cmp tbody th{width:34%;color:var(--muted);font-weight:400}
/* Значения-сущности со своей страницей печатаются ссылками (слово владельца 30.09.2026) —
   цветом ссылки, чтобы кликабельность была видна без наведения. */
.cmp tbody a{color:var(--accent2)}
.cmp tbody a:hover{text-decoration:underline}
.cmpnote{color:var(--muted);font-size:.9rem}
.cmpfallback{columns:2;list-style:none;padding:0;margin:10px 0 0;color:var(--fg2)}
.dlc{list-style:none;margin:6px 0 0;padding:0}
.dlc__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline;
  gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.dlc__row:last-child{border-bottom:0}
.dlc__kind{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dlc__name{color:var(--fg2)}
.dlc__date{color:var(--muted);font-size:.84rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.dlc__row{grid-template-columns:minmax(0,1fr) auto}.dlc__kind{grid-column:1/-1}}
/* Колонки фиксированы (слово владельца 30.09.2026: «кнопки Open должны быть одна под другой,
   лого магазина должны быть один под другим»): логотип и название в первой колонке, платформы
   во второй, цена и кнопка прижаты вправо — у всех строк одинаковые оси. */
/* Ширины колонок ОДИНАКОВЫ у всех строк (auto давал каждой строке свои оси — кнопки и
   логотипы не совпадали, замер: Open на 993 и 452 px). */
/* Цена и кнопка стоят одной правой группой (замер 30.09.2026: у скидочной строки цена со
   прежней ценой и процентом шире колонки в 120 px и вылезала правее — цены двух строк были
   на 102 и 86 px от края). Правый край группы фиксирован, поэтому цены строк совпадают
   всегда, какой бы длины ни была надпись. */
.stores__row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);justify-items:start}
.stores__tail{display:inline-flex;align-items:center;gap:10px;justify-self:end;white-space:nowrap}
.stores__list .stores__row:last-child{border-bottom:0}
.stores__row.stores__best{background:color-mix(in srgb,var(--accent) 11%,transparent);border-radius:9px}
.stores__store{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--fg);white-space:nowrap}
.stores__logo{width:18px;height:18px;border-radius:5px;flex:0 0 auto}
.stores__chips{display:inline-flex;flex-wrap:wrap;gap:5px;min-width:0}
.stores__chip{font-size:.72rem;color:var(--fg2);background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 7px;white-space:nowrap}
.stores__price{margin-left:auto;font-weight:650;color:var(--fg);white-space:nowrap}
.stores__price--free{color:var(--accent2);font-weight:560}
.stores__was{color:var(--muted);font-size:.88em;font-weight:400}
.stores__off{color:var(--accent2);font-size:.85em;white-space:nowrap}
.stores__go{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;font-size:.84rem;color:var(--fg2);white-space:nowrap}
.stores__go:hover{border-color:var(--accent);color:var(--fg)}
.stores__note{margin:10px 0 0;font-size:.8rem;color:var(--muted)}
@media(max-width:560px){
  /* На телефоне две колонки: магазин слева, цена и кнопка справа, платформы — отдельной строкой
     (замер: прежний flex-набор на grid-строке давал боковую прокрутку 10 px). */
  .stores__row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .stores__chips{grid-column:1/-1;justify-self:start}
  .stores__tail{justify-self:end}
}
/* Системные требования: строки с иконками параметров — Requirement · Minimum · Recommended.
   Левое выделение сбоку отсутствует (правка владельца к варианту 4). */
.specs{margin:20px 0 0}   /* отступ от заголовка: слово владельца 30.09.2026 */
.specs__head,.specs__row{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr 1fr;gap:12px;align-items:start}
.specs__head{padding:0 0 8px;border-bottom:1px solid var(--line);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.specs__row{padding:11px 0;border-bottom:1px solid var(--line)}
.specs__row:last-of-type{border-bottom:0}
.specs__k{display:flex;align-items:center;gap:9px;font-weight:620;color:var(--fg);font-size:.94rem}
.specs__ic{display:inline-flex;width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.specs__ic svg{width:20px;height:20px}
.specs__v{font-size:.92rem;color:var(--fg2);overflow-wrap:anywhere}
.specs__note{margin:10px 0 0;font-size:.8rem;color:var(--muted)}
@media(max-width:560px){
  .specs__head{display:none}
  .specs__row{grid-template-columns:1fr;gap:4px}
  .specs__row .specs__v::before{content:attr(data-l);display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
}
/* Награды: плитки со значком церемонии, годом, названием и категорией (вариант 2 владельца). */
/* Слова владельца 30.09.2026: «сделай отступ от заголовка до блока чуть больше» — было 14 px. */
.awards{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px}
/* Слово владельца 30.09.2026: список наград показываем целиком, а когда строк больше восьми —
   вертикальная прокрутка внутри блока. Высота взята по восьми плиткам (две колонки по четыре
   ряда), поэтому блок с прокруткой не выше обычного блока без неё. */
.awards--scroll{max-height:322px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.awards--scroll::-webkit-scrollbar{width:8px}
.awards--scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.awards--scroll::-webkit-scrollbar-track{background:transparent}
.awards__item{flex:1 1 300px;min-width:240px;display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.awards__logo{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
.awards__logo--plain{background:var(--card2);border:1px solid var(--line2)}
.awards__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.awards__line{font-size:.86rem;color:var(--muted)}
.awards__cat{font-size:.95rem;font-weight:620;color:var(--fg)}
@media(max-width:600px){.awards__item{flex:1 1 100%}}
/* Языки: развёрнутая таблица — по горизонтали языки, ниже отметки Text и Audio.
   Таблица прокручивается внутри своего контейнера, поэтому страница по горизонтали не едет. */
.langs{margin:20px 0 0}   /* отступ от заголовка: слово владельца 30.09.2026 */
.langs__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;
  /* Содержимое таблицы (2670 px при десятках языков) вылезало за обёртку в область прокрутки
     документа: страница на 390 px уезжала по горизонтали (замер: scrollX доходил до 2194 px).
     contain:layout держит широкий потомок внутри обёртки — замер после правки: scrollWidth
     документа 390, окно не сдвигается, при этом таблица по-прежнему прокручивается внутри
     блока. Без кавычек в этом комментарии: файл — шаблонная строка, обратные кавычки её рвут. */contain:layout}
.langs__scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langs__t{border-collapse:collapse;font-size:.9rem;min-width:100%}
.langs__t th,.langs__t td{padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.langs__t tbody tr:last-child th,.langs__t tbody tr:last-child td{border-bottom:0}
.langs__t thead th{font-size:.86rem;color:var(--fg2);background:var(--card)}
.langs__t thead th span{margin-left:7px}
.langs__lead{position:sticky;left:0;background:var(--bg);color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;z-index:1;border-right:1px solid var(--line)}
.langs__t tbody .langs__lead{color:var(--fg2);font-size:.86rem;text-transform:none;letter-spacing:0;font-weight:620}
.langs__yes{color:var(--accent);font-weight:700}
.langs__no{color:var(--muted)}
.langs__note{margin:10px 0 0;font-size:.8rem;color:var(--muted)}
/* Флаги языков нарисованы кодом — картинок и сторонних запросов нет. */
.lflag{display:inline-block;width:18px;height:12px;border-radius:3px;flex:0 0 auto;background:#2a3040}
.lflag--en{background:linear-gradient(180deg,#f4f5f7 0 34%,#cf142b 34% 66%,#f4f5f7 66%)}
.lflag--fr{background:linear-gradient(90deg,#1b4fa0 0 34%,#f4f5f7 34% 66%,#d4343a 66%)}
.lflag--it{background:linear-gradient(90deg,#1f8a4c 0 34%,#f4f5f7 34% 66%,#cf2437 66%)}
.lflag--de{background:linear-gradient(180deg,#1b1b1b 0 34%,#c8102e 34% 66%,#f2c200 66%)}
.lflag--es{background:linear-gradient(180deg,#c8102e 0 26%,#f0c000 26% 74%,#c8102e 74%)}
.lflag--mx{background:linear-gradient(90deg,#1f8a4c 0 34%,#f4f5f7 34% 66%,#cf2437 66%)}
.lflag--br{background:linear-gradient(180deg,#1f9d55 0 30%,#f2c200 30% 70%,#1c3f94 70%)}
.lflag--pt{background:linear-gradient(90deg,#1f7a4d 0 40%,#c8102e 40%)}
.lflag--ru{background:linear-gradient(180deg,#f4f5f7 0 34%,#1c3f94 34% 66%,#d4213d 66%)}
.lflag--pl{background:linear-gradient(180deg,#f4f5f7 0 50%,#d4213d 50%)}
.lflag--cz{background:linear-gradient(180deg,#f4f5f7 0 50%,#d4213d 50%)}
.lflag--hu{background:linear-gradient(180deg,#c8102e 0 34%,#f4f5f7 34% 66%,#1f8a4c 66%)}
.lflag--tr{background:linear-gradient(180deg,#c8102e 0 70%,#f4f5f7 70%),radial-gradient(circle at 42% 50%,#f4f5f7 0 3px,transparent 3px)}
.lflag--jp{background:radial-gradient(circle at 50% 50%,#c8102e 0 3.4px,#f4f5f7 3.4px)}
.lflag--kr{background:radial-gradient(circle at 50% 50%,#c8102e 0 3.4px,#1b4fa0 3.4px 5px,#f4f5f7 5px)}
.lflag--cn{background:linear-gradient(135deg,#ffd400 0 24%,#de2910 24%)}
.lflag--tw{background:linear-gradient(180deg,#c8102e 0 50%,#0f3d91 50%)}
.lflag--sa{background:linear-gradient(180deg,#1f7a4d 0 74%,#f4f5f7 74%)}
.lflag--th{background:linear-gradient(180deg,#c8102e 0 20%,#f4f5f7 20% 35%,#1c3f94 35% 65%,#f4f5f7 65% 80%,#c8102e 80%)}
.lflag--vn{background:linear-gradient(180deg,#da251d,#da251d),radial-gradient(circle at 50% 50%,#ffd400 0 3px,transparent 3px)}
.lflag--ua{background:linear-gradient(180deg,#1c6fc4 0 50%,#f2c200 50%)}
.lflag--nl{background:linear-gradient(180deg,#c8102e 0 34%,#f4f5f7 34% 66%,#1b4fa0 66%)}
.lflag--se{background:linear-gradient(90deg,transparent 40%,#f2c200 40% 58%,transparent 58%),linear-gradient(180deg,transparent 38%,#f2c200 38% 62%,transparent 62%),linear-gradient(#1b6bb0,#1b6bb0)}
.lflag--no{background:linear-gradient(90deg,transparent 42%,#f4f5f7 42% 56%,transparent 56%),linear-gradient(180deg,transparent 40%,#f4f5f7 40% 60%,transparent 60%),linear-gradient(#d4213d,#d4213d)}
.lflag--dk{background:linear-gradient(90deg,transparent 40%,#f4f5f7 40% 56%,transparent 56%),linear-gradient(180deg,transparent 38%,#f4f5f7 38% 62%,transparent 62%),linear-gradient(#c8102e,#c8102e)}
.lflag--fi{background:linear-gradient(90deg,transparent 42%,#1b4fa0 42% 58%,transparent 58%),linear-gradient(180deg,transparent 40%,#1b4fa0 40% 60%,transparent 60%),linear-gradient(#f4f5f7,#f4f5f7)}
.lflag--gr{background:linear-gradient(180deg,#1b6bb0 0 22%,#f4f5f7 22% 44%,#1b6bb0 44% 66%,#f4f5f7 66% 88%,#1b6bb0 88%)}
.lflag--ro{background:linear-gradient(90deg,#1c3f94 0 34%,#f2c200 34% 66%,#c8102e 66%)}
.lflag--bg{background:linear-gradient(180deg,#f4f5f7 0 34%,#1f8a4c 34% 66%,#c8102e 66%)}
.lflag--in{background:linear-gradient(180deg,#f0a020 0 34%,#f4f5f7 34% 66%,#1f8a4c 66%)}
.lflag--id{background:linear-gradient(180deg,#d4213d 0 50%,#f4f5f7 50%)}
.lflag--hr{background:linear-gradient(180deg,#c8102e 0 34%,#f4f5f7 34% 66%,#1b4fa0 66%)}
.lflag--by{background:linear-gradient(180deg,#c8102e 0 66%,#1f8a4c 66%)}
.lflag--ct{background:linear-gradient(180deg,#f2c200 0 25%,#c8102e 25% 50%,#f2c200 50% 75%,#c8102e 75%)}
.lflag--kz{background:linear-gradient(180deg,#2bb0e0,#2bb0e0),radial-gradient(circle at 50% 50%,#f2c200 0 3px,transparent 3px)}
.lflag--ge{background:linear-gradient(90deg,transparent 42%,#c8102e 42% 58%,transparent 58%),linear-gradient(180deg,transparent 40%,#c8102e 40% 60%,transparent 60%),linear-gradient(#f4f5f7,#f4f5f7)}
.lflag--ph{background:linear-gradient(180deg,#1b4fa0 0 50%,#c8102e 50%)}
.lflag--my{background:linear-gradient(180deg,#c8102e 0 14%,#f4f5f7 14% 28%,#c8102e 28% 42%,#f4f5f7 42% 56%,#c8102e 56% 70%,#f4f5f7 70% 84%,#c8102e 84%)}

.prose blockquote{margin:1.4rem 0;padding:2px 0 2px 16px;border-left:2px solid var(--accent);color:var(--fg2)}
/* Breadcrumbs: visible to crawlers and to screen readers, not to the eye.
   Kept in the DOM (nav.crumbs) and in the BreadcrumbList JSON-LD; the owner asked
   for the vc.ru arrangement, so the trail is clipped instead of painted. Clipped
   links would still take focus, so the anchors carry tabindex="-1" in crumbsHtml. */
.crumbs{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.byline{display:flex;align-items:center;gap:12px;margin:16px 0 0}
.byline .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--tile-ink);
  background:linear-gradient(145deg,hsl(var(--h) 62% 68%),hsl(calc(var(--h) + 34) 58% 52%))}
.byline .who{font-size:.9rem}
.byline .who b{display:block;font-weight:600}
.byline .who span{color:var(--muted);font-size:.82rem}
.toc ol{margin:0;padding-left:18px;font-size:.9rem}
.toc a{color:var(--fg2)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin:10px 0 0;color:var(--fg2)}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.9rem}
.facts dt{color:var(--muted);white-space:nowrap}
.facts dd{margin:0}
.aside-note{font-size:.85rem;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.article-head{padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px}

/* ---------- reactions on a post ---------- */
/* Six boxes under the article. The block ships hidden and is filled by the
   client after /api/reactions answers, so nothing is printed before there is
   something to print — and nothing is printed at all if the call fails. */
.react{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.react[hidden]{display:none}
.react__row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.react__btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--card);color:var(--fg2);
  font:inherit;font-size:.9rem;cursor:pointer;line-height:1.2}
.react__btn:hover{border-color:var(--accent);color:var(--fg)}
.react__btn[aria-pressed="true"]{border-color:var(--accent);background:var(--card2);color:var(--fg);font-weight:620}
.react__e{font-size:1.02rem;line-height:1}
.react__n{font-variant-numeric:tabular-nums;color:inherit}
.react__note{margin:0;font-size:.86rem;color:var(--muted)}
.react__note a{color:var(--accent)}
/* A link inside a paragraph is not marked by colour alone (Lighthouse
   accessibility, 28.09.2026): the underline is the non-colour cue both here and
   in the comment gate below. */
.react__note a,.cmt__gate a{text-decoration:underline;text-underline-offset:2px}

/* ---------- comments on a post ---------- */
/* The list is filled by the client: the page is static, so nothing about a
   comment is in the HTML. The text of a comment is printed as text with its own
   line breaks (white-space:pre-wrap) and can never become markup; an unusually
   long word (a pasted key, a wall of characters) wraps instead of pushing the
   column wider. */
.cmt{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.cmt__h{margin:0 0 14px;font-size:1.12rem}
.cmt__h .meta{font-weight:400}
.cmt__gate{margin:0 0 12px;font-size:.92rem;color:var(--fg2)}
.cmt__gate a{color:var(--accent)}
.cmt__form{margin:0 0 14px}
.cmt__form textarea{min-height:104px}
.cmt__replying{margin:8px 0 0;font-size:.88rem;color:var(--accent2)}
.cmt__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.cmt__list{list-style:none;margin:6px 0 0;padding:0}
.cmt__item{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.cmt__item:last-child{border-bottom:0}
.cmt__head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 6px}
.cmt__who{font-weight:600;font-size:.94rem}
a.cmt__who:hover{color:var(--accent)}
.cmt__when,.cmt__edited,.cmt__mine{font-size:.8rem;color:var(--muted)}
.cmt__mine{border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.cmt__body{margin:0;color:var(--fg2);font-size:.95rem;white-space:pre-wrap;overflow-wrap:anywhere}
.cmt__gone{margin:0 0 6px;font-size:.86rem;color:var(--muted);font-style:italic}
.cmt__acts{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.cmt__acts button{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer}
.cmt__acts button:hover{color:var(--accent)}
.cmt__edit{margin:0}
.cmt__kids{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line2)}
.cmt__kids .cmt__item{border-bottom:0;padding:10px 0}
.cmt__more{margin:14px 0 0}
.cmt__empty{margin:10px 0 0}

/* ---------- оценки игры (карточка «Оценка», слова владельца 30.09.2026) ---------- */
/* Кружок средней оценки — вариант A5: та же высота, фон, рамка, размытие и тень,
   что у кнопки Game History, только в правом верхнем углу обложки. Сборка рисует
   его с трёх опубликованных оценок, поэтому на странице он появляется у тех игр,
   где балл уже есть. */
.hrate{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:41px;height:41px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(13,15,22,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.35);color:var(--fg)}
.hrate__n{font-size:13px;font-weight:700;line-height:1}
@media(max-width:640px){.hrate{top:10px;right:10px;width:36px;height:36px}.hrate__n{font-size:11.5px}}
/* Блок внизу страницы: средний балл, десять кнопок-цифр и поле отзыва (вариант B1),
   отзывы карточками (вариант C4). */
.rate{margin:16px 0 0}
.rate__sum{margin:0 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rate__avg{font-size:1.55rem;font-weight:750;color:var(--fg)}
.rate__out{color:var(--muted);font-size:.92rem}
.rate__form{display:grid;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
/* Атрибут hidden не работает против display:grid — форма оставалась видимой гостю
   (та же ловушка, что у карточек списка). Поэтому скрытие задано правилом. */
.rate__form[hidden],.rate__guest[hidden]{display:none}
.rate__nums{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0}
.rate__legend{width:100%;padding:0 0 8px;font-size:.86rem;color:var(--muted)}
.rate__num{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);
  color:var(--fg);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer}
.rate__num:hover{border-color:var(--accent)}
.rate__num[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#0b0d14}
.rate__lab{font-size:.86rem;color:var(--muted)}
.rate__text{width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--fg);font:inherit;resize:vertical}
.rate__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rate__msg{color:var(--muted);font-size:.9rem}
.rate__guest{margin:0;font-size:.92rem;color:var(--fg2)}
.rate__guest a{color:var(--accent)}
.rate__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.rate__item{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.rate__av{flex:0 0 auto;width:38px;height:38px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--fg2);overflow:hidden}
.rate__av img{width:100%;height:100%;object-fit:cover}
.rate__main{min-width:0;flex:1 1 auto}
.rate__head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 5px}
.rate__who{font-weight:600;font-size:.94rem}
a.rate__who:hover{color:var(--accent)}
.rate__when,.rate__edited,.rate__mine{font-size:.8rem;color:var(--muted)}
.rate__mine{border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.rate__body{margin:0;color:var(--fg2);font-size:.95rem;white-space:pre-wrap;overflow-wrap:anywhere}
.rate__score{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  border-radius:11px;background:var(--card2);border:1px solid var(--line2);font-weight:750;font-size:1rem;color:var(--fg)}
.rate__acts{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.rate__acts button{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer}
.rate__acts button:hover{color:var(--accent)}
.game-card__score{color:var(--fg2);font-weight:600}

/* ---------- filters / tables ---------- */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters .f-search{grid-column:1/-1}}
.count{font-size:.86rem;color:var(--muted);margin:0 0 12px}
.empty{color:var(--muted);padding:22px;border:1px dashed var(--line2);border-radius:var(--r);text-align:center}
/* A filter hides its items with the HTML hidden attribute, but every card layout
   sets display:flex and that beats the attribute, so the list stayed on screen while
   the counter read "2 results". Win over the layout for filter items only. */
[data-item][hidden]{display:none}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:560;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;background:var(--bg2)}
tr:last-child td{border-bottom:0}

/* ---------- cookie banner (fixed: no layout shift) ----------
   Слово владельца 01.10.2026: «Сделай баннеры более компактными». Тексты трогать
   нельзя (они его), поэтому ужимается только коробка: меньше внутренних полей,
   меньше воздуха между абзацем и кнопками, чуть мельче подпись. Замеры до и после —
   в PRODUCT_OVERVIEW.md и на странице примеров. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px;pointer-events:none}
.cc[hidden]{display:none}
.cc__inner{pointer-events:auto;max-width:1100px;margin:0 auto;background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:13px 16px;
  display:grid;grid-template-columns:1fr;gap:10px}
.cc__inner p{margin:0;font-size:.86rem;line-height:1.5;color:var(--fg2);max-width:76ch}
.cc__inner strong{color:var(--fg)}
.cc__btns{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;justify-items:start}
.cc__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-self:start;min-width:0;max-width:100%}
/* Слово владельца 01.10.2026: «Перенеси кнопку настроек в это место» — по его скриншоту
   (стрелка идёт от строки кнопок вниз-влево) ссылка «Cookie settings» переехала ПОД пару
   кнопок и стоит слева, а не справа от неё. Раскладка стала сеткой в один столбец:
   первая строка — пара кнопок, вторая — ссылка. */
.cc__link{background:none;border:0;color:var(--fg2);text-decoration:underline;cursor:pointer;font:inherit;font-size:.86rem;padding:6px 4px;justify-self:start}
.cc__link:hover{color:var(--fg)}
/* Ссылка, переехавшая в текст, стоит вплотную к «Cookie Policy» без полей кнопки. */
.cc__inner p .cc__link{padding:0 1px}
@media(max-width:860px){.cc__btns{justify-items:stretch}.cc__pair{width:100%}}
/* Слово владельца 01.10.2026 для зон A и C на большом экране: кнопки стоят слева
   столбиком (одна под другой), текст — по правую сторону от них. На телефоне и в
   зоне B раскладка прежняя: текст сверху, кнопки снизу. */
@media(min-width:861px){
  .cc--side .cc__inner{grid-template-columns:auto 1fr;gap:18px;align-items:center}
  .cc--side .cc__btns{grid-column:1;grid-row:1}
  .cc--side .cc__inner p{grid-column:2;grid-row:1}
  .cc--side .cc__pair{grid-template-columns:1fr}
}
/* On a phone the banner is the first screen's lower half: measured 390x355 at
   390x844 (42 % of the viewport), with the two consent boxes 157x115 each
   because their legal labels wrapped into five lines. The copy is the owner's,
   so only the box is compacted here: tighter padding, a smaller paragraph, and
   the two buttons stacked full width instead of two narrow columns. Measured
   after that change: 390x243 (29 %), and after the 01.10.2026 compaction —
   390x212 (25 %). */
@media(max-width:640px){
  .cc{padding:6px}
  .cc__inner{padding:10px 12px;gap:8px;border-radius:13px}
  .cc__inner p{font-size:.79rem;line-height:1.4;max-width:100%}
  .cc__btns{gap:6px}
  .cc__pair{grid-template-columns:1fr;gap:6px}
  .cc__pair .btn{width:100%;padding-top:8px;padding-bottom:8px}
  .cc__link{font-size:.79rem;padding:4px 4px}
}

/* ---------- modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:70;background:rgba(6,8,12,.72);display:grid;place-items:center;padding:18px}
.modal__box{width:100%;max-width:620px;max-height:88vh;overflow:auto;background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:22px}
.modal__box h2{margin-bottom:6px}
.cc-cat{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:10px;background:var(--bg2)}
.cc-cat__row{display:flex;gap:12px;align-items:flex-start}
.cc-cat input[type=checkbox]{width:auto;margin-top:5px}
.cc-cat b{display:block}
.cc-cat span{font-size:.86rem;color:var(--muted)}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
@media(max-width:520px){.modal__foot .btn{width:100%}}

/* ---------- profile pictures ----------
   The circle stands in for the initials tile wherever a member appears. One
   size on purpose (256 px), shown at whichever size the place needs: the file is
   small enough that a second smaller copy would cost more (another file per
   member, another thing to keep in step) than it saves. */
.av--img{border-radius:50%;object-fit:cover;display:block;background:var(--bg2)}
.av--lg{width:72px;height:72px;font-size:1.4rem}
.av--sm{width:28px;height:28px;font-size:.72rem}
.av--xs{width:22px;height:22px;font-size:.66rem}
.prof-head{display:flex;align-items:center;gap:16px}
.prof-head h1{margin:0}
.prof-head .meta{margin-top:6px}
.member-cell{display:inline-flex;align-items:center;gap:9px}
.member-cell .av,.member-cell .av--img{flex:0 0 auto}
.av-edit{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.av-edit__slot{flex:0 0 auto}
.av-edit__slot .av,.av-edit__slot .av--img{width:88px;height:88px;font-size:1.6rem}
.cmt__av{width:22px;height:22px;margin-right:7px;vertical-align:-5px}

/* ---------- newsletter popup ----------
   A card in the corner, never a screen over the page: nothing is covered, the
   article stays readable and scrollable, and there is no focus trap — so it
   cannot be what Google calls an intrusive interstitial on mobile. It is first
   party and sets one cookie of its own; no request is made to draw it, and the
   only call it ever makes is the subscribe one, after a tap. */
.nl[hidden]{display:none}
.nl{position:fixed;z-index:55;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:18px}
.nl__close{position:absolute;top:6px;right:6px;background:none;border:0;color:var(--muted);
  cursor:pointer;font:inherit;font-size:1.15rem;line-height:1;padding:6px 8px}
.nl__close:hover{color:var(--fg)}
.nl h2{margin:0 26px 6px 0;font-size:1.05rem}
.nl p{margin:0 0 12px;font-size:.88rem;color:var(--fg2)}
.nl form{margin:0}
.nl label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px}
.nl input[type=email],.nl input[type=text]{width:100%}
.nl .nl__terms{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.nl .nl__terms input{width:auto;margin-top:4px;flex:0 0 auto}
.nl .nl__acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.nl .status{margin:10px 0 0;font-size:.85rem}
@media(max-width:560px){.nl{right:10px;left:10px;bottom:10px;width:auto}}

/* The header row fits "Profile" — two characters longer than "Join" — only with
   tighter spacing at 320 px: measured 3 px of overflow with the default 8 px gap
   and 12 px button padding, 0 px from 360 px up. Scope: the header buttons only. */
@media(max-width:340px){.head-act{gap:6px}.head-act .btn--sm{padding:7px 9px}}