/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a0f;color:#e0e0e0;line-height:1.6}
a{color:#6cb4ff;text-decoration:none}
a:hover{color:#8fc8ff}
img{max-width:100%;display:block}

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

/* === HEADER === */
.site-header{background:#12121a;border-bottom:1px solid #1e293b;padding:14px 0;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.5px}
.logo span{color:#6cb4ff}
.nav,.nav-links{display:flex;gap:20px}
.nav a,.nav-links a{color:#888;font-size:14px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav a:hover,.nav a.active,.nav-links a:hover,.nav-links a.active{color:#fff;border-bottom-color:#6cb4ff}

/* === SEARCH === */
.search-box{position:relative}
.search-box input{background:#1a1a2e;border:1px solid #2a2a3a;border-radius:8px;padding:8px 14px 8px 36px;color:#fff;font-size:14px;width:220px;transition:.2s}
.search-box input:focus{outline:none;border-color:#6cb4ff;width:280px}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5}
.search-results{position:absolute;top:100%;left:0;right:0;background:#1a1a2e;border:1px solid #2a2a3a;border-radius:0 0 8px 8px;max-height:300px;overflow-y:auto;display:none;z-index:200}
.search-results a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #1e1e30;font-size:13px;color:#ccc}
.search-results a:hover{background:#252540}
.search-results img{width:60px;height:28px;object-fit:cover;border-radius:4px}

/* === HERO === */
.hero{text-align:center;padding:50px 20px 30px}
.hero h1{font-size:36px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-0.5px}
.hero p{color:#888;font-size:16px}
.stat-num{font-size:56px;font-weight:800;color:#6cb4ff;margin:16px 0 4px;line-height:1}

/* === CATEGORY STRIP === */
.cat-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 0 30px}
.cat-chip{display:inline-flex;align-items:center;gap:6px;background:#1a1a2e;border:1px solid #2a2a3a;border-radius:20px;padding:6px 14px;font-size:13px;color:#ccc;transition:.2s}
.cat-chip:hover{border-color:#6cb4ff;color:#fff;background:#1e2040}
.cat-chip .count{background:#2a2a3a;color:#888;font-size:11px;padding:1px 7px;border-radius:10px}

/* === SECTIONS === */
.section{padding:20px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-header h2{font-size:22px;color:#fff;font-weight:700}
.section-header a{color:#6cb4ff;font-size:14px}
.section-header a:hover{color:#fff}

/* === GAMES GRID === */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding-bottom:16px}
.game-card{display:block;background:#14141f;border:1px solid #1e293b;border-radius:10px;overflow:hidden;transition:.25s}
.game-card:hover{border-color:#6cb4ff;transform:translateY(-3px);box-shadow:0 8px 25px rgba(108,180,255,.12)}
.card-img{height:135px;overflow:hidden;background:#111}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.3s}
.game-card:hover .card-img img{transform:scale(1.05)}
.card-img.placeholder{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.8);text-align:center;padding:12px;height:135px}
.card-body{padding:14px}
.card-body h3{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-genre{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.5px}

/* === BREADCRUMBS === */
.breadcrumbs{padding:16px 0 0;font-size:13px;color:#555}
.breadcrumbs a{color:#777}
.breadcrumbs a:hover{color:#6cb4ff}

/* === PAGINATION === */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:30px 0}
.page-btn{background:#1a1a2e;border:1px solid #2a2a3a;border-radius:8px;padding:10px 20px;color:#6cb4ff;font-size:14px;font-weight:500;transition:.2s}
.page-btn:hover{background:#252540;border-color:#6cb4ff}
.page-info{color:#666;font-size:14px}

/* === SEO BLOCK === */
.seo-block{background:#12121a;border:1px solid #1e293b;border-radius:8px;padding:20px;margin-bottom:24px;color:#999;font-size:14px;line-height:1.7}

/* === FOOTER === */
.site-footer{background:#0d0d14;border-top:1px solid #1e293b;margin-top:40px;padding:40px 0 30px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-bottom:24px}
.footer-col h4{color:#fff;font-size:14px;margin-bottom:12px;font-weight:600}
.footer-col a{display:block;color:#666;font-size:13px;padding:2px 0;transition:.2s}
.footer-col a:hover{color:#6cb4ff}
.footer-bottom{text-align:center;color:#444;font-size:12px;padding-top:20px;border-top:1px solid #1a1a2a}

/* === RESPONSIVE === */
@media(max-width:768px){
  .header-inner{flex-wrap:wrap}
  .search-box input{width:100%;min-width:0}
  .search-box input:focus{width:100%}
  .hero h1{font-size:26px}
  .stat-num{font-size:40px}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card-img{height:100px}
  .footer-grid{grid-template-columns:1fr}
  .nav,.nav-links{gap:12px}
  .nav a,.nav-links a{font-size:13px}
  .cat-strip{gap:6px}
}
@media(max-width:480px){
  .games-grid{grid-template-columns:1fr 1fr;gap:10px}
  .card-img{height:90px}
  .card-body{padding:10px}
  .card-body h3{font-size:13px}
  .hero{padding:30px 10px 20px}
}


/* === FIX: search icon === */
.search-box svg{width:16px;height:16px;pointer-events:none}

/* === FIX: footer 4 columns === */
.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}