/* Games hub: tiles are equal size and always fill the row evenly */
.gm-main { background: var(--paper-2); padding: 38px 0 80px; min-height: 70vh; }
.gm-wrap { max-width: 1120px; }
.gm-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 6px; text-align: center; }
.gm-title { font-family: var(--display); font-size: clamp(40px, 9vw, 64px); line-height: 1; text-align: center; margin: 0 0 10px; letter-spacing: .04em; }
.gm-lede { text-align: center; color: var(--ink-2); margin: 0 auto 30px; max-width: 480px; font-size: 18px; }
.gm-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 0 auto; align-items: stretch; }
.gm-tile { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--brand); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.gm-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.gm-art { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-family: var(--sans); text-align: center; }
.gm-ink { background: radial-gradient(circle at 30% 20%, #2a2a2e, #121212 70%); }
.gm-red { background: radial-gradient(circle at 30% 20%, #d4393e, #8f2024 75%); }
.gm-sand { background: radial-gradient(circle at 30% 20%, #f1e4cc, #cdb78e 80%); color: #121212; }
.gm-navy { background: radial-gradient(circle at 30% 20%, #2c4a7a, #12203a 75%); }
.gm-green { background: radial-gradient(circle at 30% 20%, #2f7a56, #123a28 75%); }
.gm-art-big { font-weight: 800; font-size: clamp(40px, 7vw, 64px); letter-spacing: .05em; font-variant-numeric: tabular-nums; line-height: 1; }
.gm-art-sub { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.gm-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; }
.gm-kind { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.gm-name { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin: 0 0 8px; }
.gm-blurb { margin: 0 0 18px; color: var(--ink-2); font-size: 16px; line-height: 1.45; flex: 1; }
.gm-play { align-self: flex-start; display: inline-block; background: var(--brand); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 24px; border-radius: 999px; text-decoration: none; }
.gm-play:hover { background: var(--brand-dark); }
/* one game: a single centred tile */
.gm-grid[data-n="1"] { max-width: 520px; }
@media (min-width: 640px) {
  .gm-grid[data-n="2"], .gm-grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
  .gm-grid[data-n="2"] { max-width: 820px; }
  .gm-grid[data-n="4"] { max-width: 820px; }
  .gm-grid[data-n="3"], .gm-grid[data-n="5"], .gm-grid[data-n="6"], .gm-grid[data-n="7"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .gm-grid[data-n="3"], .gm-grid[data-n="5"], .gm-grid[data-n="6"], .gm-grid[data-n="7"] { grid-template-columns: repeat(3, 1fr); }
}
.gm-ads { max-width: 1120px; margin-top: 36px; }
.gm-ads .ad-slot { margin-left: auto; margin-right: auto; }
.gm-tiles { display: flex; gap: 8px; }
.gm-tiles i { font-style: normal; width: clamp(40px, 7vw, 54px); height: clamp(40px, 7vw, 54px); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(22px, 4vw, 30px); color: #fff; }
.gm-tiles .g { background: #6aaa64; } .gm-tiles .y { background: #c9b458; } .gm-tiles .x { background: #787c7e; }
.gm-pw { font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 6vw, 46px); letter-spacing: .12em; line-height: 1; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.7); border-radius: 8px; padding: 12px 18px; }