/* ─── Game Cards grid ────────────────────────────────────────────── */
.game-cards-section {
    padding: 10px; background: var(--bg-base); min-height: 200px;
}
.game-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Card */
.game-card {
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    background: var(--bg-card);
}
.game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.game-card-inner { cursor: pointer; }

/* Thumbnail */
.game-thumbnail {
    position: relative; aspect-ratio: 1 / 1.12;
    background: linear-gradient(135deg, #0a2560, #006CFF);
    overflow: hidden;
}
.game-thumbnail img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.38s ease;
}
.game-card:hover .game-thumbnail img { transform: scale(1.06); }
.game-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.provider-badge {
    background: rgba(255,255,255,.16); color: #fff;
    font-size: 0.6875rem; font-weight: 800;
    padding: 4px 7px; border-radius: var(--radius-sm);
    letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Badges */
.game-badge {
    position: absolute; top: 5px; right: 5px;
    padding: 2px 5px; border-radius: var(--radius-sm);
    font-size: 0.5625rem; font-weight: 700; letter-spacing: .5px; z-index: 1;
}
.game-badge--new { background: var(--accent-green); color: #fff; }
.game-badge--hot { font-size: 0.8rem; background: none; padding: 2px; }

/* Hover overlay */
.game-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.48);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    opacity: 0; transition: opacity var(--transition);
}
.game-card:hover .game-overlay,
.game-card:focus-within .game-overlay { opacity: 1; }
@media (hover: none) {
    .game-overlay { opacity: 0; }
    .game-card:active .game-overlay { opacity: 1; }
}
.game-play-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform var(--transition);
}
.game-play-btn svg { width: 16px; height: 16px; margin-left: 2px; }
.game-play-btn:active { transform: scale(.9); }
.game-fav-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.game-fav-btn svg { width: 13px; height: 13px; }
.game-fav-btn.active svg { fill: var(--accent-gold); stroke: var(--accent-gold); }

/* Info strip */
.game-info {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px; background: var(--bg-card);
}
.game-provider-tag, .game-type-tag {
    font-size: 0.55rem; font-weight: 700; letter-spacing: .5px;
    padding: 2px 5px; border-radius: var(--radius-sm);
}
.game-provider-tag { background: var(--primary); color: #fff; }
.game-type-tag { background: var(--primary-faint); color: var(--neutral-1); }

/* Empty state */
.game-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 40px 20px; color: var(--neutral-2);
}
.game-empty svg { width: 44px; height: 44px; opacity: .4; }

/* Load more */
.game-load-more { display: flex; justify-content: center; padding: 14px 0; }
.load-more-btn {
    padding: 9px 26px; border-radius: var(--radius-xl);
    background: var(--bg-surface); color: var(--primary);
    font-size: 0.8125rem; font-weight: 600;
    border: 1.5px solid var(--primary);
    transition: all var(--transition);
}
.load-more-btn:hover { background: var(--primary); color: #fff; }

@media (max-width: 320px) { .game-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 481px) { .game-cards-grid { grid-template-columns: repeat(3, 1fr); } }