/* ═══════════════════════════════════════════════════════════
   Игры — надстройка над /assets/css/hub.css.
   Подключается ПОСЛЕ него. Цвета и шрифты оттуда же,
   своих не заводим.
   ═══════════════════════════════════════════════════════════ */

.gcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

.gcard{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.gcard:hover{border-color:var(--orange-2)}
.gcard.soon{background:transparent;box-shadow:none}
.gcard a.cover{position:absolute;inset:0;border-radius:inherit;z-index:2}
.gcard .slot{aspect-ratio:4/3;border-radius:12px;background:var(--honey-3)}
.gcard .gbody{min-width:0}
.gcard h3{font:800 16.5px/1.2 var(--head);color:var(--teal);margin:0;overflow-wrap:anywhere}
.gcard p{margin:4px 0 0;font:400 13.5px/1.4 var(--body);color:var(--teal-2)}
.gcard .chip{display:inline-block;margin:7px 6px 0 0;font:800 11.5px var(--head);
  color:var(--teal);background:var(--honey-2);border-radius:999px;padding:3px 10px}
.gcard .arrow{width:36px;height:36px}
.gcard.soon .arrow{background:#E7E0D4;color:#8A7B69}

/* счётчик в заголовке группы */
.gcount{font:700 14px var(--head);color:var(--brown-2);white-space:nowrap}

/* пустая группа */
.lib-empty{margin:0;padding:24px;border:2px dashed var(--line-2);border-radius:18px;
  background:rgba(255,255,255,.55);color:var(--teal-2);text-align:center}

.block{margin:32px 0 0}
.block:last-of-type{margin-bottom:44px}

/* Подпись внутри карточки урока: в hub.css класс .sh — заголовок
   секции (display:flex), и на <p> он ломает строку по словам. */
.gcard .sh,.lcard .sh{display:block;gap:0;margin:3px 0 0;
  font:400 13.5px/1.35 var(--body);color:var(--teal-2)}

@media (max-width:420px){
  .gcard{grid-template-columns:72px minmax(0,1fr) auto;gap:10px}
}

/* Лента групп под героем */
.gnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0}
.gnav a{text-decoration:none;font:700 14.5px var(--head);color:var(--teal);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px}
.gnav a:hover{background:var(--honey-2);border-color:var(--orange-2)}
.gnav .gtotal{margin-left:auto;font:700 14px var(--head);color:var(--brown-2)}
.gnav .glang{margin-left:6px;background:var(--honey-2);border-color:var(--line-2);
  font-weight:800}
.gnav .glang:hover{background:var(--honey)}

/* ── Поиск и фишки ────────────────────────────────────────── */
.gfind{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 0}
.gfind input{flex:1 1 300px;min-width:0;font:400 16px var(--body);
  padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--card);color:var(--brown)}
.gfind input::placeholder{color:#A08770}

.gtags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.gtag{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:700 13.5px var(--head);color:var(--teal);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.gtag i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--brown-2);
  background:var(--honey-3);border-radius:999px;padding:1px 7px}
.gtag:hover{border-color:var(--orange-2)}
.gtag[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.gtag[aria-pressed="true"] i{background:rgba(255,255,255,.22);color:#fff}
.gclear{background:transparent;border-style:dashed;color:var(--brown-2)}

/* Игра, внутри которой много всего: карточка шире остальных */
.gcards{grid-auto-flow:row dense}
.gcard.big{grid-column:span 2;grid-template-columns:132px minmax(0,1fr) auto;padding:14px 16px}
.gcard.big .slot{border-radius:14px}
.gcard.big h3{font-size:19px}
.gcard.big p{font-size:14.5px}
.chip.inside{background:var(--honey-3);color:var(--brown-2);border:1px solid var(--line)}
@media (max-width:700px){ .gcard.big{grid-column:span 1;grid-template-columns:96px minmax(0,1fr) auto} }

/* Счётчик рядом с названием группы в ленте */
.gnav a i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--brown-2);
  background:var(--honey-3);border-radius:999px;padding:1px 7px;margin-left:7px}
.gnav a:hover i{background:#fff}
.gnav .glang i{display:none}