@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #0f0f19;
  background-image: radial-gradient(circle at top right, rgba(79, 70, 229, 0.2), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(219, 39, 119, 0.2), transparent 40%);
  color: #e0e0e0;
}

.font-orbitron { font-family: 'Orbitron', sans-serif; }
.text-glow { text-shadow: 0 0 8px rgba(255,255,255,0.3), 0 0 20px rgba(79,70,229,0.45); }

.game-card {
  background-color: rgba(23,23,33,0.6);
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  animation: fadeIn .5s ease-out forwards;
  overflow: hidden; position: relative;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.game-card:hover { transform: translateY(-4px); box-shadow: 0 10px 35px rgba(79,70,229,0.25); border-color: rgba(129,140,248,0.4); }
.game-card:before {
  content: '';
  position: absolute; inset: 0; border-radius: 1rem; border: 2px solid transparent;
  background: linear-gradient(45deg, #4f46e5, #db2777) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude; opacity: 0;
  transition: opacity .3s ease;
}
.game-card:hover:before { opacity: 1; }

.card-image-container { position: relative; }
.card-image { display: block; width: 100%; height: 200px; object-fit: cover; }
.play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.game-card:hover .play-overlay { opacity: 1; }
.play-button { font-family: 'Orbitron', sans-serif; color: #fff; border: 2px solid #fff; padding: .75rem 1.5rem; border-radius: 50px; text-transform: uppercase; letter-spacing: .1em; }

.language-switcher { display: inline-flex; align-items: center; color: #9ca3af; cursor: pointer; transition: color .3s ease; }
.language-switcher:hover { color: #fff; }
select.lang-dropdown { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #e0e0e0; padding: .4rem .6rem; border-radius: .5rem; }
select.lang-dropdown option { color: #111827; }

/* Search bar */
#search-wrapper { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
#game-search { width: 100%; background: rgba(17,24,39,0.7); border: 1px solid rgba(129,140,248,0.35); color: #e5e7eb; padding: .6rem .9rem; border-radius: .6rem; }
#filter-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip { padding: .25rem .6rem; border-radius: 9999px; border: 1px solid rgba(129,140,248,.4); color: #c7d2fe; background: rgba(17,24,39,.6); cursor: pointer; font-size: .825rem; }
.filter-chip.active { background: rgba(79,70,229,.2); border-color: rgba(129,140,248,.8); }