.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 0 16px;margin-bottom:22px;border-bottom:1px solid var(--sz-line);min-height:56px}
.cat-head .l{min-width:0;display:flex;align-items:center;gap:13px}
.cat-head .cat-glyph{font-size:1.6rem;color:var(--sz-blue-hi);line-height:1}
.cat-head h2{font-size:1.7rem;margin-bottom:3px}
.cat-head .s{font-size:0.92rem;color:var(--sz-blue-hi);font-weight:600}

/* flex rather than grid, so a trailing row of two tiles sits on the centre
   axis instead of hugging the left edge */
.game-grid{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.gt{flex:0 1 232px;max-width:280px;background:var(--sz-bg2);
  border:1px solid var(--sz-edge);box-shadow:0 0 0 1px var(--sz-edge-soft) inset;
  border-radius:3px;padding:34px 16px 15px;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,background .18s;position:relative}
.gt:hover{border-color:var(--sz-edge-hi);transform:translateY(-2px);background:var(--sz-bg3)}
.gt-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
.gt-icon{flex-shrink:0;width:38px;height:38px;border-radius:3px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;background:rgba(42,142,135,0.2);border:1px solid var(--sz-edge)}
.gt:hover .gt-icon{background:rgba(213,173,73,0.16);border-color:var(--sz-amber-dim)}
.gt h3{font-size:1rem;margin:0;min-width:0;overflow-wrap:anywhere}
.gt:hover h3{color:var(--sz-amber)}
.gt .d{font-family:var(--mn);font-size:0.66rem;color:var(--sz-mute);line-height:1.55;
  margin-bottom:14px;flex:1;overflow-wrap:anywhere}
.gt .go{display:flex;align-items:center;justify-content:center;min-height:38px;border-radius:3px;
  font-size:0.8rem;font-weight:800;letter-spacing:0.4px;
  background:var(--sz-amber);color:#0a1123;transition:background .18s}
.gt:hover .go{background:var(--sz-amber-hi)}
.gt.locked .go{background:rgba(42,142,135,0.28);color:#8fede7;border:1px solid var(--sz-blue-hi)}
.gt.locked:hover .go{background:var(--sz-blue);color:#fff}

.fam-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.fam-nav a{display:inline-flex;align-items:center;gap:7px;font-size:0.82rem;font-weight:700;
  padding:9px 17px;border-radius:999px;border:1px solid var(--sz-edge);color:var(--sz-mute);transition:all .18s}
.fam-nav a:hover{border-color:var(--sz-edge-hi);color:var(--sz-amber)}
.fam-nav a.on{background:var(--sz-blue);border-color:var(--sz-blue-hi);color:#fff}
.cat-note{font-size:0.82rem;color:var(--sz-mute);text-align:center;margin:-8px 0 18px}
@media(max-width:620px){ .gt{flex:1 1 100%;max-width:none} }