/* ============================================
   GAMES MENU PAGE
   ============================================ */

.games-hero {
  position: relative;
  height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(148,163,184,0.3);
}
.games-hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(700px 350px at 10% 0%, rgba(99,102,241,.3), transparent 60%),
    radial-gradient(800px 400px at 90% 100%, rgba(16,185,129,.3), transparent 60%),
    linear-gradient(180deg, #020617, #020617);
  opacity:.9;
}
.games-hero-content {
  position:relative; z-index:2; text-align:center; color:#e5e7eb;
}
.games-hero-content h1{
  font-size:2.2rem; margin-bottom:.4rem; color:#10b981;
}
.games-hero-content p{ margin:0.15rem 0; color:#9ca3af;}
.games-hero-content .hero-user span{
  color:#10b981; font-weight:600;
}

.games-main{ padding:3rem 0 4rem; }

.games-grid{
  display:grid; gap:1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.game-card{
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(15,23,42,.85));
  border-radius:16px;
  border:1px solid rgba(148,163,184,.4);
  padding:1.8rem 1.6rem;
  box-shadow:0 16px 45px rgba(15,23,42,.9);
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.game-card::before{
  content:""; position:absolute; inset:-30%;
  background: radial-gradient(circle at 20% 0%, rgba(16,185,129,.16), transparent 55%),
              radial-gradient(circle at 80% 120%, rgba(59,130,246,.16), transparent 55%);
  opacity:.7; filter:blur(40px);
  pointer-events:none;
}
.game-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 60px rgba(15,23,42,1);
  border-color:rgba(16,185,129,.6);
}

.card-icon{
  font-size:2.4rem;
  margin-bottom:.8rem;
}
.game-card h2{
  color:#e5e7eb;
  font-size:1.4rem;
  margin-bottom:.4rem;
}
.game-card p{
  color:#9ca3af;
  font-size:.95rem;
  margin-bottom:1rem;
}
.card-meta{
  list-style:none;
  padding:0;
  margin:0 0 1.4rem;
  display:flex;
  gap:1rem;
  color:#9ca3af;
  font-size:.9rem;
}
.btn-full{
  width:100%;
}