/* Reset & basic */
* { margin:0; padding:0; box-sizing:border-box; scroll-behavior: smooth; }
body { font-family: 'Arial', sans-serif; line-height:1.6; background:#0d0d0d; color:#eee; }
a { color:#7ed957; text-decoration:none; }
a:hover { text-decoration:underline; }
header { padding:30px 20px; display:flex; justify-content:space-between; align-items:center; background:#111; position:sticky; top:0; z-index:100; }
header h1 { font-size:28px; }
nav a { margin-left:20px; font-weight:600; }
.hero { padding:120px 20px; text-align:center; background: url('../images/hero-bg.jpg') center/cover no-repeat; color:#fff; }
.hero h2 { font-size:48px; margin-bottom:10px; }
.hero p { font-size:20px; opacity:0.9; }

section { padding:60px 20px; max-width:1000px; margin:auto; }
h2 { font-size:36px; border-bottom:2px solid #333; padding-bottom:15px; margin-bottom:25px; }

.games { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.game-card { background:#1a1a1a; padding:20px; border-radius:10px; transition: transform 0.3s, box-shadow 0.3s; }
.game-card:hover { transform: translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.5); }
.game-card img { width:100%; border-radius:8px; margin:10px 0; }

.game-detail img { width:100%; max-width:900px; display:block; margin:20px auto; border-radius:10px; }
.back-btn { display:inline-block; margin-top:20px; padding:10px 15px; background:#7ed957; color:#111; border-radius:5px; font-weight:600; }

footer { text-align:center; padding:25px; background:#111; opacity:0.7; margin-top:40px; }

.contact-links a { margin-right:15px; }

.fade-in { opacity:0; transform: translateY(20px); animation: fadeIn 1s forwards; animation-play-state:paused; }
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }

@media(max-width:768px) {
  header { flex-direction:column; align-items:flex-start; }
  nav { margin-top:10px; }
  .hero h2 { font-size:36px; }
  .hero p { font-size:18px; }
}