/* «Все игры» (15.10, просьба Вадима, по образцу aippy.ai): все игры одной
     стеной крупных карточек, вкладки сверху, подгрузка при прокрутке.
     Данные — тот же /api/feed, что у ленты и сетки каталога */
  /* margin: 0 — как на остальных страницах: без него браузер ставил свои 8 px, и шапка
     на /games и /tag/… стояла не у края (21.10) */
  body { background: var(--bg); margin: 0; }
  .wall { max-width: 1680px; margin: 0 auto; padding: 18px 24px 40px; }

  .whead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .wtitle { 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); }
  .wtitle .px { width: 32px; height: 32px; }
  .wtitle small { font: 400 14px var(--font-mono); color: var(--text-3); letter-spacing: 0; }
  /* Поиск — своей строкой по центру под заголовком (15.10, просьба Вадима) */
  .whead { flex-direction: column; align-items: stretch; }
  .wsearch { display: flex; width: 100%; max-width: 560px; margin: 0 auto; }
  .wsearch input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 8px; box-sizing: border-box;
                   background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font: 15px var(--font-body); }
  .wsearch input:focus { outline: none; border-color: var(--gold-mid); }

  /* Вкладки — подборки, как Hot / Latest у aippy */
  .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border);
          margin-bottom: 14px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 12px 16px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
         color: var(--text-2); font: 700 15px var(--font-body); white-space: nowrap; margin-bottom: -1px; }
  .tab:hover { color: var(--gold-light); }
  .tab.on { color: var(--gold); border-bottom-color: var(--gold); }

  .types { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin-bottom: 18px; }
  .types::-webkit-scrollbar { display: none; }
  @media (min-width: 761px) { .types { flex-wrap: wrap; overflow: visible; } }
  .type { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 6px; cursor: pointer;
          background: var(--surface-3); border: 0; border-bottom: 3px solid #0B0703; color: var(--text);
          font: 700 13px var(--font-body); letter-spacing: .03em; white-space: nowrap; }
  .type small { color: var(--text-3); font: 500 11px var(--font-mono); }
  .type:hover { color: var(--gold-light); }
  .type.on { background: var(--key-gold); border-bottom-color: #6E4E06; color: var(--outline); }
  .type.on small { color: rgba(26,18,4,.7); }

  /* Стена: 5 в ряд на широком, 2 на телефоне */
  .grid { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .card { display: block; text-decoration: none; color: inherit; min-width: 0; }
  /* 16:10, как плитки каталога на главной; на телефоне — вертикальные 3:4 (ниже). Углы 6 px — как у клавиш бренда */
  .pic { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden;
         background: hsl(var(--tone, 30) 45% 14%); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s, transform .15s; }
  .card:hover .pic { border-color: var(--gold-mid); box-shadow: 0 0 26px rgba(232,168,28,.18); transform: translateY(-2px); }
  .pic img, .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .pic .emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; }
  .pic .new { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 8px; border-radius: 5px;
              background: var(--key-gold); color: var(--outline); font: 700 11px var(--font-mono); text-transform: uppercase; }
  .pic .sc-age { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
  .pic .sc-net { position: absolute; right: 10px; top: 10px; z-index: 1; }
  .pic .vid { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 5px;
              background: rgba(11,8,5,.75); color: var(--text-2); font: 600 11px var(--font-mono); }

  .meta { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
  .meta .sc-ava { width: 34px; height: 34px; }
  .mtext { min-width: 0; flex: 1; }
  .mname { font: 700 16px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card:hover .mname { color: var(--gold-light); }
  .mby { margin-top: 2px; font: 13px var(--font-body); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mby time { color: var(--text-3); margin-left: 8px; }
  .mnums { margin-top: 6px; display: flex; gap: 14px; font: 500 12px var(--font-mono); color: var(--text-3); white-space: nowrap; }
  .mnums span { display: inline-flex; align-items: center; }

  .sk .pic { background: var(--surface-3); animation: skp 1.2s ease-in-out infinite alternate; }
  .sk .mname, .sk .mby { height: 12px; border-radius: 4px; background: var(--surface-3); margin-top: 8px; }
  .sk .mby { width: 60%; }
  @keyframes skp { from { opacity: .55; } to { opacity: 1; } }

  .empty { grid-column: 1 / -1; text-align: center; padding: 60px 16px; color: var(--text-2); font-size: 16px; }
  .empty a { color: var(--gold); }
  .more { text-align: center; padding: 26px 0 0; color: var(--text-3); font: 13px var(--font-mono); min-height: 20px; }

  @media (max-width: 760px) {
    .wall { padding: 12px 16px 24px; }
    .wtitle { font-size: 24px; }
    .wsearch { max-width: none; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    /* Телефон — вертикальные карточки 3:4 (15.10, решение Вадима): обложка 3:2 по бокам
       обрезается, середина остаётся; 9:16 срезало бы больше половины */
    .pic { border-radius: 5px; aspect-ratio: 3 / 4; }
    .meta .sc-ava { display: none; }
    .mname { font-size: 14px; }
    .mby { font-size: 12px; }
    .mby time { display: none; }
    .mnums { gap: 10px; font-size: 11px; }
  }

  /* ── Подборки по тегам под типами на /games (21.10) ── */
  .types a.type { text-decoration: none; color: inherit; }
  /* Типы — кнопки-клавиши (фильтр на месте), подборки — хештеги-ссылки (уводят на /tag/…):
     без плашки, тоньше и приглушённее, отделены чертой — чтобы не путать (21.10) */
  .tagrow { gap: 6px 18px; align-items: baseline; margin-top: -6px; padding-top: 12px; border-top: 1px solid var(--border); }
  .tagrow-label { flex: none; color: var(--text-3); font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding-right: 2px; }
  .htag { flex: none; display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-2); text-decoration: none;
          font: 400 14px var(--font-body); letter-spacing: .02em; white-space: nowrap; }
  .htag:not(.tagrow-all)::before { content: '#'; color: var(--gold-mid, #E8A81C); opacity: .7; margin-right: -2px; }
  .htag small { color: var(--text-3); font: 400 11px var(--font-mono); }
  .htag:hover { color: var(--gold-light); }
  .htag:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .tagrow .tagrow-all { color: var(--gold-light); }

  /* ── Страницы тегов /tag/<slug> и /tags (21.10, routes/tags.py): HTML с сервера, те же карточки ── */
  .tagpage .tagintro { max-width: 900px; margin: -4px 0 14px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
  .tagpage .tagcrumbs { margin: 0 0 18px; color: var(--text-3); font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .tagpage .tagcrumbs a { color: var(--text-2); text-decoration: none; }
  .tagpage .tagcrumbs a:hover { color: var(--gold-light); }
  .tagpage .types a.type { text-decoration: none; color: inherit; }
  .tagpage h2 { margin: 26px 0 10px; font: var(--fw-display, 700) 18px var(--font-display); color: var(--text); }
  .tagpage .tagnear { margin-top: 36px; }
  .tagpage .tagnear p, .tagpage > p:last-child { color: var(--text-2); }
  .tagpage .tagnear a:not(.htag), .tagpage > p a { color: var(--gold-light); }
  .htags { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 18px; }
  .tagpage h2 small { color: var(--text-3); font: 500 12px var(--font-mono); margin-left: 6px; }
  .taggrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 16px; }
  .taggrid .pic { aspect-ratio: 16 / 9; }
  .taggrid .pic .vid { background: var(--key-gold); color: var(--outline); }
  .taggrid .mname { font-size: 15px; }
  @media (max-width: 760px) { .taggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .taggrid .pic { aspect-ratio: 4 / 3; } }
  .tagpage .mabout { color: var(--text-3); font-size: 12px; line-height: 1.35; margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }