/* Games hub — image-forward card grid (2 columns even on mobile, more
   like an app-store listing than Services' centered icon tiles), since
   a game benefits far more from a visible thumbnail than a service
   tile does. "Coming soon" tiles shown muted with a badge on the cover
   rather than hidden, so the section can grow incrementally - same
   spirit as Services' own placeholder tiles. */

.games-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .7rem;
}

.game-tile {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.game-tile:hover {
    transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.22);
    border-color: color-mix(in srgb, var(--indigo) 30%, var(--border));
}

.game-tile-cover {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; background: var(--indigo-soft, var(--paper)); color: var(--indigo);
    font-size: 1.8rem; overflow: hidden;
}
.game-tile-cover img { width: 100%; height: 100%; object-fit: cover; }

.game-tile-play {
    position: absolute; bottom: .4rem; right: .4rem;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; font-size: .7rem;
}

.game-tile-body { padding: .6rem .65rem; display: flex; flex-direction: column; gap: .15rem; }
.game-tile-title { font-weight: 700; font-size: .84rem; color: var(--ink); line-height: 1.25; }
.game-tile-category {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--indigo); align-self: flex-start;
}
.game-tile-desc {
    font-size: .72rem; color: var(--ink-soft); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.game-tile-soon { opacity: .72; cursor: default; }
.game-tile-badge {
    position: absolute; top: .4rem; right: .4rem;
    font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    background: var(--marigold-deep); color: #fff; padding: .15rem .45rem; border-radius: 999px;
}

@media (min-width: 560px) {
    .games-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
    .games-grid { grid-template-columns: repeat(4, 1fr); }
}