.grid-games {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 50px; 
  width: 100%; 
  max-width: 1600px; 
  margin: 60px auto; 
  padding: 0 20px;
}

.grid-games .games-row {
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  gap: 40px; 
  width: 100%; 
  flex-wrap: wrap;
}

.grid-games .game-slot {
  height: 400px; 
  display: inline-flex; 
  padding: 40px 50px;
  background-image: url('img/centerBackground.png');
  background-size: 100% 100%; 
  position: relative;
  transition: transform 0.3s; 
  cursor: default;
}

.grid-games .game-slot.featured { height: 650px; padding: 60px 80px; }
.grid-games .game-slot:hover { transform: translateY(-8px); }

.grid-games .card-container {
  height: 100%; width: auto; background: #000;
  position: relative; overflow: hidden; display: flex;
}

.grid-games .game-thumb {
  height: 100%; width: auto; display: block;
  opacity: 0.85; transition: opacity 0.3s;
}

.grid-games .game-slot:hover .game-thumb { opacity: 1; }

/* EFECTOS TV */
.grid-games .game-slot.featured .tv-lines {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  background-size: 100% 2px, 3px 100%;
  z-index: 2; pointer-events: none;
}

.grid-games .game-slot.featured .card-container::after {
  content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 3px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
  z-index: 4; animation: scanline 5s linear infinite;
}

@keyframes scanline { 0% { top: 100%; } 100% { top: -5%; } }

.grid-games .game-info {
  position: absolute; bottom: 0; width: 100%; padding: 25px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  z-index: 10; pointer-events: none;
}

.grid-games .game-info h3 {
  font-size: 1.3rem; color: #fff; text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

.grid-games .game-info p { font-size: 0.9rem; color: #bbb; }

@media (max-width: 900px) {
  .grid-games .games-row { flex-direction: column; align-items: center; }
  .grid-games .game-slot { height: 320px; padding: 30px 40px; }
  .grid-games .game-slot.featured { height: 450px; padding: 40px 55px; }
}