* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg); color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh; overflow-x: hidden;
    padding-bottom: var(--tabbar-h);
  }
  .cat { max-width: 1400px; margin: 0 auto; padding: 18px 32px 60px; font-family: var(--font-ui); }

  /* ── Вступление: «Играй. Создавай. Делись с друзьями.» ── */
  /* Свечение лампы */
  body::after {
    content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%);
    width: 800px; height: 500px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse, rgba(240,192,64,0.06) 0%, transparent 70%);
  }
  /* Hero — по бренд-буку, раздел 05 «Поле персонажей»: 25 своих спрайтов
     (кот, мишка, робот, НЛО, поезд…) модулем 3–4 px, наклон −7°, тёмное
     золото #43301A…#5A4420 и пара акцентов #A57E24. field.v2.png собран из
     макета главной — те же 213 спрайтов в том же порядке. Края поля затухают
     маской, сверху — вуаль (::after): к краям и под текстом темнее */
  .intro {
    position: relative; z-index: 1; text-align: center; padding: 40px 28px 30px;
    overflow: hidden;
    background: radial-gradient(90% 120% at 50% -10%, #2a1c0b, #0B0805 62%);
  }
  .intro::before {
    content: ''; position: absolute; top: -34%; left: -10%; width: 120%; height: 168%; z-index: 0; pointer-events: none;
    background: url(/img/px/field.v2.png) center / 1800px 796px repeat; image-rendering: pixelated;
    transform: rotate(-7deg); opacity: .8;
    -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.45) 24%,#000 40%,#000 60%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.08) 88%,rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.45) 24%,#000 40%,#000 60%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.08) 88%,rgba(0,0,0,0) 100%);
  }
  .intro::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg,#0B0805 0%,rgba(11,8,5,.72) 16%,rgba(11,8,5,.2) 34%,rgba(11,8,5,.2) 66%,rgba(11,8,5,.72) 84%,#0B0805 100%),
                radial-gradient(62% 48% at 50% 52%, rgba(11,8,5,.96) 0%, rgba(11,8,5,.85) 50%, rgba(11,8,5,.4) 100%);
  }
  .intro > * { position: relative; z-index: 1; }
  .beta-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid #6b4f16; color: var(--gold-mid);
    font: 400 12px var(--font-mono); letter-spacing: .22em; text-transform: uppercase;
    padding: 5px 16px; border-radius: 999px; margin-bottom: 12px;
  }
  .intro h1 {
    font: 900 clamp(34px, 4.6vw, 54px)/1.04 var(--font-display); letter-spacing: var(--ls-display, .05em);
    margin: 0 auto 12px; color: var(--text); max-width: 24ch; text-wrap: balance;
  }
  .intro h1 .line2 { color: var(--flame); display: block; }
  .net-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 16px;
              border-radius: 6px; border: 0; border-bottom: 4px solid #0B0703; background: var(--surface-3);
              box-shadow: inset 0 1px 0 rgba(242,231,201,.12), 0 0 0 1px rgba(232,168,28,.45);
              color: var(--gold); text-decoration: none; font: 700 14px var(--font-body); }
  .net-link:hover { filter: brightness(1.15); }
  .intro-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 14px; }
  .intro-links .net-link { margin-top: 0; gap: 10px; }
  .intro-create { display: flex; justify-content: center; margin-top: 12px; }
  /* Компьютер: ссылки и «Создать» в одном ряду — приветствие ниже, игры выше (09.10) */
  @media (min-width: 761px) { .intro-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; } .intro-actions .intro-links, .intro-actions .intro-create { margin-top: 0; } }
  .intro-create .btn-create { padding: 15px 30px; font-size: 17px; }
  /* «Найти» — клавиша внутри поля справа */
  .search-input { padding-right: 112px !important; }
  .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .search-go {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%); z-index: 1;
    padding: 9px 18px; border-radius: 6px; cursor: pointer; font: 700 15px var(--font-body);
    background: var(--surface-3); color: var(--gold); border: 0; border-bottom: 3px solid #0B0703;
    box-shadow: inset 0 1px 0 rgba(242,231,201,.12); transition: filter .15s;
  }
  .search-go:hover { filter: brightness(1.08); }
  .search-go:active { transform: translateY(calc(-50% + 2px)); }
  .net-link[hidden] { display: none; }
  .net-link span { color: #8fd07f; }
  .intro-sub {
    color: #B9A67E; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55;
    max-width: 56ch; margin: 0 auto 8px;
  }
  .search-row { display: flex; gap: 14px; max-width: 620px; margin: 0 auto; }
  .search-wrap { flex: 1; position: relative; }
  /* Золотая точка вместо лупы — как в макете */
  .search-wrap::before {
    content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 8px; height: 8px; border-radius: 50%; background: var(--gold-mid);
  }
  .search-input {
    width: 100%; background: var(--card); border: 1px solid var(--border-strong); border-radius: 8px;
    padding: 17px 22px 17px 42px; color: var(--text); font: 16px var(--font-body);
    outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
  }
  .search-input:focus { border-color: var(--gold-mid); box-shadow: 0 0 0 3px rgba(232,168,28,0.12); }
  .btn-create {
    background: var(--key-gold); color: var(--outline); border: 0; border-bottom: 4px solid #6E4E06;
    border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,235,190,.4);
    padding: 13px 24px; font: 700 15px var(--font-body); cursor: pointer; white-space: nowrap;
    transition: filter .15s, transform .08s; text-decoration: none; display: flex; align-items: center; gap: 8px;
  }
  .btn-create:hover { filter: brightness(1.08); }
  .btn-create:active { transform: translateY(2px); }
  .intro-art { display: none; border: 0; aspect-ratio: 1600 / 623; background: #0c0905 url(/img/island/island.v1.jpg) center / 100% 100% no-repeat; color-scheme: dark; }
  .sort-sel { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); color: var(--text-2); font: 400 13px var(--font-body); white-space: nowrap; }
  .sort-sel select { background: transparent; border: 0; color: var(--text); font: 700 14px var(--font-body); padding: 14px 4px; outline: none; cursor: pointer; }
  .sort-sel select option { background: var(--card); }
  @media (max-width: 760px) {
    .sort-sel { position: relative; flex: none; width: 52px; padding: 0; justify-content: center; }
    .sort-sel span { display: none; }
    .sort-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; }
    .sort-sel::before { content: ''; width: 20px; height: 14px; background:
      linear-gradient(var(--gold-mid), var(--gold-mid)) 0 0 / 20px 3px no-repeat,
      linear-gradient(var(--gold-mid), var(--gold-mid)) 0 5.5px / 14px 3px no-repeat,
      linear-gradient(var(--gold-mid), var(--gold-mid)) 0 11px / 8px 3px no-repeat; }
  }
  @media (min-width: 761px) {
    .intro { background: #0B0805; }
    .intro::before, .intro::after { display: none; }
    .intro-art { display: block; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); right: max(32px, calc((100% - 1336px) / 2)); width: min(58%, 840px); height: auto;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
      -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }
  }
  /* Макет 09.10: на компьютере приветствие слева, под ним «Игры» + переключатель, поиск, жанры */
  .ctitle { display: flex; align-items: center; gap: 12px; margin: 0; font: var(--fw-display, 700) 30px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--text); }
  .ctitle .px { width: 32px; height: 32px; }
  .ctitle small { font: 400 14px var(--font-mono); color: var(--text-3, #9C8862); letter-spacing: 0; }
  .ctop .modes { margin-left: auto; }
  .cat .search-row { max-width: none; margin: 0 0 14px; }
  @media (min-width: 761px) {
    .ctop .modes, .cat .sort-sel { width: 260px; box-sizing: border-box; height: 56px; flex: none; }
    .ctop .modes a { flex: 1; justify-content: center; }
    .ctop .modes { width: auto; }   /* три кнопки (15.10, «Все игры») — по содержимому */
    .cat .sort-sel { justify-content: space-between; }
    .cat .sort-sel select { flex: 1; }
  }
  @media (min-width: 761px) {
    .intro { min-height: 440px; padding-top: 56px; padding-bottom: 48px; text-align: left; padding-left: max(32px, calc((100% - 1336px) / 2)); padding-right: max(32px, calc((100% - 1336px) / 2)); }
    .intro h1 { margin-left: 0; max-width: 18ch; }
    .intro-sub { margin-left: 0; }
    .intro-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .intro-actions .intro-links { justify-content: flex-start; }
    /* «Играть по сети» — той же ширины и высоты, что «Создать свою игру» (15.10):
       колонка по ширине самой широкой кнопки, обе растянуты на неё */
    .intro-actions { display: inline-flex; align-items: stretch; }
    .intro-actions .intro-create, .intro-actions .intro-links { display: flex; }
    .intro-actions .btn-create, .intro-actions .net-link { flex: 1; justify-content: center; }
    .intro-actions .net-link { padding: 14px 30px; font-size: 17px; }
  }
  .cat { position: relative; z-index: 1; border-top: 1px solid var(--border); padding-top: 18px; }

  /* ── Лента | Каталог и поиск ── */
  .ctop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .modes {
    display: flex; gap: 2px; padding: 4px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border-strong);
  }
  .modes a {
    padding: 8px 16px; border-radius: 6px; text-decoration: none;
    color: var(--text-2); font: 700 14px var(--font-body);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .modes a .px { width: 18px; height: 18px; }
  .modes a { white-space: nowrap; }
  /* «Все игры» на телефоне — в нижней панели: третья кнопка здесь вылезала за край */
  @media (max-width: 760px) { .modes .m-all { display: none; } }
  .modes a:hover { color: var(--gold-light); }
  .modes a.on { background: var(--key-gold); color: var(--outline); box-shadow: inset 0 1px 0 rgba(255,235,190,.4), 0 3px 0 #6E4E06; }

  /* ── Типы игр ── */
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin-bottom: 18px; }
  .chips::-webkit-scrollbar { display: none; }
  /* На компьютере — переносом: прокрутка вбок скрыта, мышью её не видно
     и не прокрутить, последний тип срезался краем. На телефоне — свайпом */
  @media (min-width: 761px) { .chips { flex-wrap: wrap; overflow: visible; } }
  .chip {
    flex: none; display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 6px; cursor: pointer;
    background: var(--surface-3); border: 0; border-bottom: 3px solid #0B0703; color: var(--text);
    box-shadow: inset 0 1px 0 rgba(242,231,201,.1);
    font: 700 14px var(--font-body); white-space: nowrap;
    transition: filter .15s, color .15s;
  }
  .chip small { color: var(--text-3); font: 500 11px var(--font-mono); }
  .chip:hover { color: var(--gold-light); filter: brightness(1.15); }
  .chip.on { background: var(--key-gold); border-bottom-color: #6E4E06; color: var(--outline); box-shadow: inset 0 1px 0 rgba(255,235,190,.4); }
  .chip.on small { color: rgba(26,18,4,0.7); }

  /* ── Баннер: горячие игры, как витрина Xbox ── */
  .hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 34px; background: var(--card);
          border: 1px solid var(--border); box-shadow: 0 0 60px rgba(232,168,28,.08); }
  .htrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .htrack::-webkit-scrollbar { display: none; }
  .hslide {
    position: relative; flex: 0 0 100%; scroll-snap-align: center;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 28px;
    min-height: 380px; padding: 36px 40px 48px;
    overflow: hidden;
  }
  .hbg {
    position: absolute; inset: -60px; background: center / cover no-repeat;
    filter: blur(40px) brightness(0.35) saturate(1.4); z-index: 0;
  }
  .hslide > *:not(.hbg) { position: relative; z-index: 1; }
  .htype {
    display: inline-block; margin-bottom: 14px;
    background: var(--chip); color: var(--gold-mid);
    font: 500 12px var(--font-mono); padding: 5px 11px; border-radius: 999px;
  }
  .hslide h2 {
    font: var(--fw-display, 700) clamp(28px, 3.6vw, 48px)/1.08 var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--text);
    margin-bottom: 12px; text-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  .hby { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; }
  .hby .sc-ava { width: 26px; height: 26px; }
  .hby a { color: var(--text); text-decoration: none; font-weight: 600; }
  .hby .m { color: var(--muted); }
  .hdesc {
    color: rgba(242,231,201,0.85); font: 15px/1.5 var(--font-body); margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hbtns { display: flex; gap: 10px; flex-wrap: wrap; }
  .bplay, .bsec {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    padding: 12px 22px; border-radius: 6px; font: 700 15px var(--font-body);
    border: 0; border-bottom: 4px solid #0B0703; transition: filter .15s, transform .08s;
  }
  .bplay { background: var(--key-gold); color: var(--outline); border-bottom-color: #6E4E06; box-shadow: inset 0 1px 0 rgba(255,235,190,.4); }
  .bsec { background: var(--key-dark); color: var(--text); box-shadow: inset 0 1px 0 rgba(242,231,201,.12); }
  .bplay:hover, .bsec:hover { filter: brightness(1.1); }
  .bplay:active, .bsec:active { transform: translateY(2px); }
  .hshot {
    display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
    background: var(--stripes); box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    border: 2px solid var(--border-strong);
  }
  .hshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hshot { position: relative; }
  /* Видео на наведении — поверх картинки, под значками плитки */
  .thover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
  .hdots { position: absolute; left: 40px; bottom: 18px; display: flex; gap: 8px; z-index: 2; }
  .hdots button { width: 22px; height: 6px; border-radius: 0; border: none; cursor: pointer; background: #3a2a12; padding: 0; }
  .hdots button.on { background: var(--gold); }

  /* ── Полки ── */
  .row { margin-bottom: 30px; }
  .rhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
  .rhead h2 { font: var(--fw-display, 700) 24px var(--font-display); color: var(--text); letter-spacing: var(--ls-display, .05em); }
  .rhead .all {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--gold); font: 500 13px var(--font-mono); padding: 4px 0;
  }
  .rhead .all:hover { color: var(--flame); }
  /* Заголовок полки открывает то же, что «Все →» — кнопка, а не h2 с
     обработчиком: с клавиатуры она работает сама */
  .rhead .rtitle {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  }
  .rhead .rtitle:hover { color: var(--flame); }
  .rail-wrap { position: relative; }
  /* Полка с прокруткой вбок обрезает всё, что за её краем, — и увеличенную
     на наведении плитку с рамкой и тенью тоже: слева и сверху выделение
     срезалось. Запас внутри полки, отрицательные поля — чтобы плитки стояли
     там же, где заголовок */
  .rail {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding: 12px 14px 28px; margin: -12px -14px -28px;
    scroll-padding-left: 14px;
  }
  .rail::-webkit-scrollbar { display: none; }
  /* В полку входит целое число плиток — последняя не срезается краем
     (решение Вадима 16.09). % у flex-basis — от ширины полки без запаса,
     то есть ровно ширина заголовка. Стрелка листает на страницу */
  .rail { --n: 5; }
  @media (max-width: 1300px) { .rail { --n: 4; } }
  @media (max-width: 1050px) { .rail { --n: 3; } }
  .rail .tile, .rail .sk-tile {
    flex: 0 0 calc((100% - 16px * (var(--n) - 1)) / var(--n)); scroll-snap-align: start;
  }
  .rbtn {
    position: absolute; top: calc(50% - 30px); z-index: 3;
    width: 42px; height: 42px; border-radius: 6px; cursor: pointer;
    background: var(--key-dark); border: 0; border-bottom: 4px solid #0B0703; color: var(--gold);
    font: 22px/1 var(--font-ui); display: none; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  }
  .rbtn.l { left: -14px; } .rbtn.r { right: -14px; }
  @media (hover: hover) { .rail-wrap:hover .rbtn:not([disabled]) { display: flex; } }

  /* ── Плитка игры ── */
  /* Карточка игры: превью сверху, подпись снизу, рамка и золотое свечение на наведении */
  .tile {
    display: block; text-decoration: none; color: var(--text); min-width: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    padding-bottom: 12px; transition: border-color .2s, box-shadow .2s;
  }
  .tile:hover, .tile:focus-visible { border-color: var(--gold-mid); box-shadow: var(--glow); }
  .thumb {
    position: relative; aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden;
    background: radial-gradient(circle at 50% 40%, hsl(var(--tone) 40% 18%), #0E0A06 75%);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
  }
  .tile .trow, .tile .tsub, .tile > .tname { padding: 0 14px; }
  .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .temoji { font-size: 54px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); }
  .tbadge {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    background: var(--gold-mid); color: var(--outline); font: 500 11px var(--font-mono);
    padding: 3px 9px; border-radius: 999px;
  }
  .tage { position: absolute; left: 8px; bottom: 8px; z-index: 1; }
  .tvid {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    background: rgba(11,8,5,0.8); color: var(--text); font: 500 11px var(--font-mono);
    padding: 3px 8px; border-radius: 999px;
  }
  .tplay {
    position: absolute; right: 10px; bottom: 10px; z-index: 1;
    width: 42px; height: 38px; border-radius: 6px;
    background: var(--key-gold); color: var(--outline); border-bottom: 4px solid #6E4E06;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }
  .tplay svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
  .tile:hover .tplay, .tile:focus-visible .tplay { opacity: 1; transform: none; }
  .tile:focus-visible { outline: none; }
  .trow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .tile > .tname { margin-top: 12px; }   /* плитка «Создать свою» — без «i» */
  .tname {
    flex: 1; min-width: 0; font: 700 17px var(--font-display); letter-spacing: var(--ls-display, .05em); color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Рейтинг — доля 👍 среди оценок, в строке под названием после ❤ (26.09):
     рядом с названием значок съедал и без того длинное название.
     100% и 0% не показываем: это одна-две оценки, а не рейтинг */
  .trate { color: var(--text); font-weight: 600; white-space: nowrap; display: inline-block; }
  /* Без цвета по проценту (решение Вадима 26.09): у новой игры первые
     оценки случайны, красный значок отпугнул бы с самого начала */
  /* «i» — страница игры. Плитка сама ссылка на игру, вложить <a> нельзя —
     поэтому span с ролью ссылки, переход в обработчике клика ниже */
  .tinfo {
    position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    background: var(--key-dark); border: 1px solid var(--border-strong); color: var(--text-2);
    font: 500 12px var(--font-mono); line-height: 1; cursor: pointer;
    transition: all 0.18s; -webkit-tap-highlight-color: transparent;
  }
  .tinfo::after { content: ''; position: absolute; inset: -10px; }   /* пальцу — 42 px */
  .tinfo:hover, .tinfo:focus-visible { background: rgba(232,168,28,0.24); color: var(--flame); border-color: var(--accent); outline: none; }
  /* Закладка — рядом с «i». На картинке ей места нет: там «Новая» и «▶ видео» */
  .tfav {
    position: relative; flex-shrink: 0; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; transition: color .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .tfav::after { content: ''; position: absolute; inset: -10px; }
  .tfav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
  .tfav:hover, .tfav:focus-visible { color: var(--flame); outline: none; }
  .tfav.on { color: var(--flame); }
  .tfav.on svg { fill: currentColor; }
  .tsub { margin-top: 4px; font: 400 12px var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile.cta { border-style: dashed; border-color: var(--border-strong); }
  .tile.cta .thumb {
    background: var(--stripes); flex-direction: column; gap: 6px; color: var(--gold);
    font: 700 15px var(--font-body);
  }
  .tile.cta .thumb b { font-size: 34px; }

  /* ── Сетка: тип, поиск, «Все →» ── */
  .ghead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .gback {
    width: 40px; height: 40px; border-radius: 6px; cursor: pointer;
    background: var(--key-dark); border: 0; border-bottom: 4px solid #0B0703; color: var(--gold); font-size: 18px;
  }
  .ghead h2 { font: var(--fw-display, 700) 28px var(--font-display); letter-spacing: var(--ls-display, .05em); }
  .ghead .count { color: var(--text-3); font: 13px var(--font-mono); }
  .gsort { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; padding: 4px; border-radius: 10px;
           background: var(--surface); border: 1px solid var(--border-strong); }
  .gsort button {
    background: none; border: 0; color: var(--text-2); cursor: pointer;
    border-radius: 6px; padding: 7px 12px; font: 700 13px var(--font-body);
  }
  .gsort button:hover { color: var(--gold-light); }
  .gsort button.on { color: var(--gold); background: var(--key-dark); }
  .gfeed {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    background: var(--key-dark); border: 0; border-bottom: 4px solid #0B0703; color: var(--text);
    box-shadow: inset 0 1px 0 rgba(242,231,201,.12);
    border-radius: 6px; padding: 8px 14px; font: 700 14px var(--font-body);
  }
  .glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; }
  .gmore { display: flex; justify-content: center; margin-top: 28px; }
  .gmore button {
    padding: 13px 30px; border-radius: 6px; cursor: pointer;
    background: var(--key-dark); border: 0; border-bottom: 4px solid #0B0703; color: var(--text);
    box-shadow: inset 0 1px 0 rgba(242,231,201,.12); font: 700 15px var(--font-body);
  }
  .gempty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 50px 20px; line-height: 1.6; }
  .gempty b { display: block; font-size: 42px; margin-bottom: 8px; }

  /* ── Скелетоны ── */
  .sk { background: linear-gradient(100deg, #150E07 30%, #241a0d 50%, #150E07 70%) 0 0 / 300% 100%;
        animation: shimmer 1.6s infinite linear; border-radius: 12px; }
  @keyframes shimmer { to { background-position: -300% 0; } }
  .sk-hero { height: 380px; border-radius: 20px; margin-bottom: 30px; }
  .sk-title { height: 20px; width: 180px; margin-bottom: 14px; }
  .sk-tile { flex: 0 0 clamp(200px, 19vw, 270px); aspect-ratio: 16 / 10; }

  .fail { text-align: center; padding: 60px 20px; color: var(--muted); }
  .fail button { margin-top: 14px; padding: 11px 24px; border-radius: 6px; border: 0; border-bottom: 4px solid #0B0703;
                 background: var(--key-dark); color: var(--text); font: 700 14px var(--font-body); cursor: pointer; }

  /* ── Телефон ── */
  @media (max-width: 760px) {
    .cat { padding: 20px 0 40px; }
    /* Приветствие компактно: на первом экране телефона должна быть видна игра */
    .intro { padding: 26px 16px 22px; }
    .beta-badge { margin-bottom: 12px; padding: 5px 12px; font-size: 10px; }
    .intro h1 { font-size: 31px; margin-bottom: 10px; }
    .intro-sub { font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
    .intro-sub br { display: none; }
    .search-input { padding: 13px 16px 13px 38px; font-size: 16px; }
    .search-wrap::before { left: 17px; }
    .intro-links { margin-top: 12px; gap: 8px; }
    .btn-create, .intro-links .net-link { padding: 10px 14px; font-size: 14px; }
    .ctop, .chips, .rhead, .ghead, .glist, .gmore, .fail { padding-left: 16px; padding-right: 16px; }
    /* «Игры» и «Каталог | Лента» — как на компьютере (09.10) */
    .ctop { gap: 10px; margin-bottom: 10px; flex-wrap: nowrap; }
    .ctitle { font-size: 22px; gap: 8px; }
    .ctitle .px { width: 26px; height: 26px; }
    .ctop .modes { padding: 3px; }
    .ctop .modes a { padding: 7px 12px; font-size: 13px; }
    .ctop .modes a .px { width: 16px; height: 16px; }
    .cat .search-row { padding: 0 16px; gap: 8px; }
    /* Баннер на телефоне — картинка во всю ширину, текст поверх неё снизу,
       как в приложении Xbox. Двумя блоками он занимал целый экран */
    .hero { border-radius: 0; margin-bottom: 24px; }
    .hslide { display: block; padding: 0; min-height: 0; }
    .hslide .hshot { aspect-ratio: 4 / 3; border-radius: 0; border: none; box-shadow: none; }
    .hslide > .htext {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: 70px 16px 30px;
      background: linear-gradient(to bottom, transparent, rgba(11,8,5,0.78) 38%, rgba(11,8,5,0.95));
    }
    .hslide h2 { font-size: 27px; margin-bottom: 8px; }
    .htype { margin-bottom: 8px; }
    .hby { margin-bottom: 12px; font-size: 13px; }
    .hdesc, .bfeed { display: none; }
    .hdots { left: 16px; bottom: 12px; }
    .bplay, .bsec { padding: 10px 18px; font-size: 14px; }
    .rail { padding: 12px 16px 28px; margin: -12px 0 -28px; gap: 12px; scroll-padding-left: 16px; }
    .rail .tile, .rail .sk-tile { flex-basis: 44vw; }
    .rhead h2 { font-size: 19px; }
    .glist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .gsort { margin: 0 16px; order: 5; flex: 1 0 calc(100% - 32px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .gsort::-webkit-scrollbar { display: none; }
    .gsort button { flex: none; }
    .sk-hero { border-radius: 0; height: 330px; }
    .tname { font-size: 15px; }
    .tile { border-radius: 12px; }
    .tile .trow, .tile .tsub, .tile > .tname { padding: 0 10px; }
    .temoji { font-size: 44px; }
    .tplay { display: none; }
    .site-footer { margin-bottom: 0; }
  }

  @media (pointer: coarse) {
    .rhead .all, .rhead .rtitle { min-height: 40px; display: inline-flex; align-items: center; }
  }

  /* Название карточки — до двух строк целиком; закладка и «i» ушли из его строки
     вниз, к автору и просмотрам (07.10: на телефоне название обрезалось до «Паук одно…») */
  .tile { position: relative; }
  .trow { align-items: flex-start; }
  .tname {
    white-space: normal; text-overflow: clip; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.5em;   /* карточки в полке одной высоты */
  }
  .tby { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0 14px; min-height: 24px; }
  .tauthor { flex: 1; min-width: 0; font: 12.5px var(--font-mono); color: var(--text-2);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Цифры — одной строкой без переноса: у них своя строка во всю ширину */
  .tile .tsub { color: var(--text-2); font-size: 12.5px; white-space: nowrap; margin-top: 2px; }
  .tile .tsub .pi { margin-right: 3px; }
  /* Точек «·» между цифрами нет — разделяют сами значки */
  .tile .tsub .pi-heart, .tile .tsub .trate { margin-left: 3px; }
  .tile.cta .tsub { white-space: normal; }
  /* Телефон и Retina: значки мельче — модуль 1,5 CSS px = ровно 3 физических
     пикселя при плотности 2×, пиксели остаются чёткими */
  @media (min-resolution: 2dppx) {
    .tile .tsub .pi-eye { width: 13.5px; height: 10.5px; }
    .tile .tsub .pi-heart, .tile .tsub .pi-like { width: 10.5px; height: 10.5px; vertical-align: -1px; }
  }
  @media (max-width: 760px) {
    .tby { padding: 0 10px; gap: 6px; }
    .tile .tsub { font-size: 12px; }
    /* Телефон: автор и один счётчик (просмотры); лайки и рейтинг — на странице игры (09.10) */
    .tile .tsub .tlike, .tile .tsub .trate { display: none; }
  }
  /* Самые узкие телефоны: цифры мельче и поля карточки уже — иначе «1,2 тыс · 5 · 83%» не влезает */
  @media (max-width: 360px) {
    .tile .trow, .tile .tsub, .tile > .tname, .tby { padding-left: 8px; padding-right: 8px; }
    .tile .tsub { font-size: 11px; }
    .tile .tsub .pi-heart, .tile .tsub .trate { margin-left: 1px; }
  }
  @media (max-width: 760px) {
    .intro-create { margin-top: 10px; }
    .intro-create .btn-create { width: 100%; justify-content: center; padding: 13px 16px; font-size: 16px; }
    .search-input { padding-right: 92px !important; }
    .search-go { padding: 8px 13px; font-size: 14px; right: 6px; }
    .intro-links .net-link .px { width: 20px !important; height: 20px !important; }
    /* Как «Создать свою игру»: на всю ширину, той же высоты */
    .intro-links .net-link { width: 100%; justify-content: center; padding: 13px 16px; font-size: 16px; }
  }

  /* ══ Статистика сайта (12.10) — как на старых порталах, в нашем стиле ══ */
  .sstats { margin: 34px 0 0; display: grid; gap: 14px; }   /* на всю ширину каталога (.cat) */
  #home[hidden] ~ .sstats, #grid:not([hidden]) ~ .sstats { display: none; }
  .ss-panel { background: var(--card); border: 1px solid var(--border-strong, #3a2a12); border-radius: 8px; overflow: hidden; }
  .ss-head { padding: 9px 14px; background: var(--chip, #241a0d); color: var(--gold, #F0C040);
             font: 700 12px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
             border-bottom: 1px solid var(--border-strong, #3a2a12); }
  .ss-body { padding: 12px 14px; }
  .ss-big { font-size: 15px; font-weight: 700; color: var(--text); }
  .ss-big b { color: var(--gold, #F0C040); font-family: var(--font-mono, monospace); }
  .ss-names { margin-top: 8px; font-size: 13.5px; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 0 12px; }
  .ss-names a { color: var(--text-2, #C6B38A); text-decoration: none; }
  .ss-names a:hover { color: var(--gold, #F0C040); text-decoration: underline; }
  .ss-note { margin-top: 8px; color: var(--muted); font-size: 13px; }
  .ss-note b { color: var(--text-2, #C6B38A); }
  .ss-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .ss-num { background: var(--bg, #0B0805); border: 1px solid var(--border, #2a1e10); border-radius: 6px; padding: 9px 11px; }
  .ss-num b { display: block; font: 700 19px/1.1 var(--font-mono, monospace); color: var(--gold, #F0C040); }
  .ss-num span { font-size: 12px; color: var(--muted); }
  .ss-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ss-list { display: grid; gap: 8px; }
  .ss-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
  .ss-row .n { width: 20px; text-align: center; font: 700 13px var(--font-mono, monospace); color: var(--muted); }
  .ss-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--chip, #241a0d); }
  .ss-row .t { min-width: 0; }
  .ss-row .t b { display: block; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ss-row:hover .t b { color: var(--gold, #F0C040); }
  .ss-row .t span { font-size: 12px; color: var(--muted); }
  .ss-row .emo { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
                 font-size: 18px; background: var(--chip, #241a0d); }
  .ss-row .t span.q { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ss-row .when { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
  @media (max-width: 640px) { .ss-cols { grid-template-columns: 1fr; } }