* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100vh; background:#0a0a1a; color:#fff; font-family:'Segoe UI',Arial,sans-serif; }

/* HEADER */
.header { background:linear-gradient(135deg,#0a0a1a 0%,#1a1a2e 50%,#0a0a1a 100%); padding:40px 20px 30px; text-align:center; border-bottom:2px solid rgba(0,240,255,0.2); }
.logo { font-size:2.5rem; font-weight:900; letter-spacing:4px; }
.logo span { color:#00f0ff; text-shadow:0 0 20px rgba(0,240,255,0.5); }
.subtitle { color:rgba(255,255,255,0.5); margin-top:5px; font-size:0.9rem; letter-spacing:3px; }

/* CONTAINER */
.container { max-width:1200px; margin:0 auto; padding:20px 15px; }

/* STATS BAR */
.stats-bar { display:flex; gap:15px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.stat { background:#1a1a2e; padding:10px 20px; border-radius:10px; font-size:0.85rem; border:1px solid rgba(255,255,255,0.1); }
.stat-num { color:#00f0ff; font-weight:800; font-size:1.1rem; }

/* SEARCH */
.search-bar { margin-bottom:15px; }
.search-bar input { width:100%; padding:12px 18px; border-radius:12px; border:2px solid rgba(255,255,255,0.1); background:#1a1a2e; color:#fff; font-size:1rem; outline:none; transition:border 0.2s; }
.search-bar input:focus { border-color:#00f0ff; box-shadow:0 0 15px rgba(0,240,255,0.2); }
.search-bar input::placeholder { color:rgba(255,255,255,0.3); }

/* GENRE FILTER */
.genre-filter { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; }
.genre-btn { background:#1a1a2e; border:1px solid rgba(255,255,255,0.15); color:#fff; padding:6px 16px; border-radius:20px; cursor:pointer; font-size:0.8rem; font-weight:600; transition:all 0.2s; }
.genre-btn:hover { border-color:#00f0ff; }
.genre-btn.active { background:linear-gradient(135deg,#00f0ff,#ff00aa); color:#fff; border-color:transparent; }

/* GAMES GRID */
.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; margin-bottom:30px; }

/* GAME CARD */
.game-card { background:#1a1a2e; border-radius:16px; border:2px solid rgba(255,255,255,0.08); overflow:hidden; cursor:pointer; transition:all 0.3s; position:relative; }
.game-card:hover { border-color:#00f0ff; transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,240,255,0.15); }
.badge { position:absolute; top:12px; right:12px; color:#000; padding:4px 10px; border-radius:6px; font-size:0.7rem; font-weight:800; z-index:2; }
.card-icon { height:140px; display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; }
.card-icon::after { content:''; position:absolute; bottom:0; left:0; right:0; height:30px; background:linear-gradient(transparent,#1a1a2e); }
.card-body { padding:16px 20px 20px; }
.card-title { font-size:1.3rem; font-weight:800; margin-bottom:4px; }
.card-subtitle { color:rgba(255,255,255,0.5); font-size:0.85rem; margin-bottom:10px; }
.card-genres { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.genre-tag { background:rgba(0,240,255,0.1); color:#00f0ff; padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:600; }
.card-desc { color:rgba(255,255,255,0.7); font-size:0.8rem; line-height:1.5; margin-bottom:12px; }
.card-features { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.feature { color:#00ff88; font-size:0.7rem; font-weight:600; }
.card-actions { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.btn { display:inline-block; padding:10px 20px; border-radius:10px; font-weight:700; font-size:0.85rem; text-decoration:none; text-align:center; transition:all 0.2s; letter-spacing:1px; }
.btn-play { background:linear-gradient(135deg,#00f0ff,#ff00aa); color:#fff; box-shadow:0 4px 15px rgba(0,240,255,0.3); }
.btn-play:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,240,255,0.5); }
.btn-secondary { background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { border-color:#00f0ff; }
.card-meta { display:flex; gap:15px; font-size:0.75rem; color:rgba(255,255,255,0.4); }

/* NO RESULTS */
.no-results { text-align:center; padding:40px; color:rgba(255,255,255,0.4); font-size:1.1rem; }

/* COMING SOON */
.coming-soon { margin-top:20px; }
.coming-soon h2 { font-size:1.5rem; margin-bottom:15px; background:linear-gradient(90deg,#00f0ff,#ff00aa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.coming-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.coming-item { background:#1a1a2e; padding:14px; border-radius:12px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,0.05); opacity:0.7; }
.coming-icon { font-size:1.5rem; }
.coming-info { flex:1; }
.coming-info strong { font-size:0.85rem; display:block; }
.coming-info span { font-size:0.7rem; color:rgba(255,255,255,0.4); }
.coming-eta { font-size:0.65rem; color:#ffee00; background:rgba(255,238,0,0.1); padding:3px 8px; border-radius:6px; }

/* FOOTER */
.footer { text-align:center; padding:30px 20px; border-top:1px solid rgba(255,255,255,0.05); margin-top:30px; }
.footer p { color:rgba(255,255,255,0.3); font-size:0.8rem; }
.footer a { color:#00f0ff; text-decoration:none; }
.footer a:hover { text-decoration:underline; }

/* RESPONSIVE */
@media(max-width:480px) {
    .logo { font-size:1.8rem; }
    .games-grid { grid-template-columns:1fr; }
    .coming-list { grid-template-columns:1fr; }
    .card-icon { height:100px; font-size:3rem; }
    .header { padding:25px 15px 20px; }
    .stats-bar { gap:8px; }
    .stat { padding:8px 14px; font-size:0.75rem; }
}