/* Collection pages (Games, Mind) — house-consistent grid hub.
   Loads on top of app.css; matches the private hub's visual language:
   mono section labels with a trailing hairline, tinted icon chips, card grid.
   Per-item icon tints are cool jewel tones only (no orange/amber — house rule). */

.chub{max-width:680px;margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom))}

.chub .bar{display:flex;align-items:center;margin-bottom:22px}
.backpill{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);
  font-size:14px;font-weight:600;padding:9px 15px 9px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);transition:.16s var(--ease);
  -webkit-tap-highlight-color:transparent}
.backpill:hover{color:var(--ink);border-color:rgba(255,255,255,.24);background:var(--surface-2)}
.backpill:active{transform:scale(.97)}
.backpill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.chead h1{font-size:clamp(30px,7.5vw,42px);font-weight:600;letter-spacing:-.038em;line-height:1.05;
  background:linear-gradient(180deg,#fff 58%,#b9c6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.chead .lede{color:var(--ink-3);font-size:14px;margin-top:6px}

.sec{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:30px 2px 12px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.gcard{display:flex;align-items:center;gap:13px;padding:15px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.18s var(--ease);-webkit-tap-highlight-color:transparent}
.gcard:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-1px)}
.gcard:active{transform:scale(.985)}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gcard .ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--ac,#7d9cff) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ac,#7d9cff) 24%, transparent)}
.gcard .ico svg{width:20px;height:20px;fill:none;stroke:var(--ac,#7d9cff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gcard .nm{display:block;font-family:var(--mono);font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.gcard .ds{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}

@media(max-width:400px){.cgrid{grid-template-columns:1fr 1fr;gap:8px}.gcard{padding:13px;gap:11px}}