.games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-bottom: 44px;
}
.game-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
}
.game-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--card-neon, var(--color-neon-cyan));
    box-shadow: 0 0 10px var(--card-neon, var(--color-neon-cyan)), 0 0 22px color-mix(in srgb, var(--card-neon, #00F5FF), transparent 70%);
}
.game-card.destacado { border-color: var(--color-neon-yellow); animation: pulse-border 2s infinite; }
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 5px var(--color-neon-yellow); }
    50% { box-shadow: 0 0 20px var(--color-neon-yellow), 0 0 40px #FFE60044; }
}
.game-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg2); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(13,13,26,.72);
    color: var(--color-neon-green);
    font-family: var(--font-display);
    font-size: .7rem;
    opacity: 0;
    transition: opacity .2s ease;
}
.game-card:hover .play-overlay { opacity: 1; }
.game-card-body { padding: 14px; display: grid; gap: 10px; }
.game-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.05; }
.game-card h3 a { color: var(--color-text); text-decoration: none; }
.game-card p { margin: 0; color: var(--color-text-muted); }
.game-stats { display: flex; justify-content: space-between; color: var(--color-text-muted); font-family: var(--font-mono); font-size: .9rem; }
.btn-card-play { width: 100%; }
.skeleton {
    min-height: 280px;
    border: 1px solid var(--color-border);
    background: linear-gradient(90deg, var(--color-surface), #242444, var(--color-surface));
    background-size: 220% 100%;
    animation: skeleton 1.1s linear infinite;
}
@keyframes skeleton { to { background-position: -220% 0; } }
@media (max-width: 1000px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .games-grid { grid-template-columns: 1fr; } }