body { font-family: Arial, sans-serif; background: #1a1a1a; color: #fff; margin: 0; padding: 0; }
header { background: #2c2c2c; padding: 20px; text-align: center; }
nav { display: flex; justify-content: center; gap: 20px; align-items: center; }
nav a { color: #fff; text-decoration: none; font-size: 18px; }
nav input { padding: 8px; border: none; border-radius: 5px; width: 200px; }
#hero { text-align: center; padding: 30px; background: linear-gradient(45deg, #444, #666); }
#hero p { font-size: 24px; }
#game-list { padding: 20px; max-width: 1200px; margin: auto; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.game-card { background: #444; border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.game-card:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255,255,255,0.4); }
.game-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }
.game-card h3 { margin: 10px 0 5px; font-size: 18px; }
.game-card p { font-size: 14px; color: #ccc; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; }
.modal-content { margin: 5% auto; padding: 20px; width: 80%; max-width: 900px; background: #333; border-radius: 10px; }
.close { color: #fff; float: right; font-size: 30px; cursor: pointer; }
#game-frame { width: 100%; height: 600px; border: none; }
@media (max-width: 600px) { .games-grid { grid-template-columns: 1fr; } nav { flex-direction: column; } }