/*
Theme Name: GameZone
Theme URI: https://example.com/gamezone
Author: Sahil
Author URI: https://example.com
Description: AdSense-ready HTML5 online games WordPress theme. Fast, responsive, SEO-optimized, built-in ad zones, custom Games post type, categories, related games, and cookie consent banner.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamezone
*/

/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:#0f1220;
  color:#e8e9f3;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ========== HEADER ========== */
.site-header{
  background:#161a2e;
  border-bottom:1px solid #262b45;
  position:sticky;top:0;z-index:100;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.site-logo{font-size:24px;font-weight:800;color:#7c5cff;letter-spacing:.5px}
.site-logo span{color:#00e5c7}
.main-nav ul{display:flex;gap:24px}
.main-nav a{font-weight:600;font-size:15px;padding:8px 4px;transition:color .2s}
.main-nav a:hover{color:#00e5c7}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:26px}
.header-search{display:flex;align-items:center}
.header-search input{
  background:#20243c;border:1px solid #333a5c;border-radius:20px 0 0 20px;
  padding:8px 14px;color:#fff;width:180px;font-size:14px;
}
.header-search button{
  background:#7c5cff;border:none;border-radius:0 20px 20px 0;
  padding:8px 14px;color:#fff;
}

@media(max-width:860px){
  .main-nav{
    position:fixed;top:0;right:-100%;height:100vh;width:70%;max-width:300px;
    background:#161a2e;flex-direction:column;padding:80px 24px;transition:right .3s;
  }
  .main-nav.open{right:0}
  .main-nav ul{flex-direction:column;gap:18px}
  .nav-toggle{display:block}
  .header-search{display:none}
}

/* ========== HERO ========== */
.hero{
  background:linear-gradient(135deg,#1c1f3a,#0f1220 60%);
  padding:56px 0;text-align:center;
}
.hero h1{font-size:clamp(28px,5vw,44px);font-weight:800;margin-bottom:12px}
.hero h1 .accent{color:#00e5c7}
.hero p{color:#a9adcf;max-width:600px;margin:0 auto 20px;font-size:16px}
.hero-search{max-width:480px;margin:0 auto;display:flex}
.hero-search input{flex:1;padding:14px 18px;border:none;border-radius:30px 0 0 30px;font-size:15px}
.hero-search button{padding:14px 24px;border:none;background:#7c5cff;color:#fff;border-radius:0 30px 30px 0;font-weight:700}

/* ========== AD ZONES ========== */
.ad-zone{
  max-width:1200px;margin:24px auto;padding:0 16px;text-align:center;
  min-height:60px;display:flex;align-items:center;justify-content:center;
}
.ad-zone .ad-label{font-size:11px;color:#565b7f;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}

/* ========== SECTION TITLES ========== */
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:36px 0 18px;
}
.section-title h2{font-size:22px;font-weight:800}
.section-title a{color:#00e5c7;font-size:14px;font-weight:600}

/* ========== GAME GRID ========== */
.game-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}
.game-card{
  background:#161a2e;border-radius:12px;overflow:hidden;border:1px solid #262b45;
  transition:transform .18s,border-color .18s;
}
.game-card:hover{transform:translateY(-4px);border-color:#7c5cff}
.game-card .thumb{
  aspect-ratio:4/3;background:#20243c;display:flex;align-items:center;justify-content:center;
  font-size:34px;overflow:hidden;position:relative;
}
.game-card .thumb img{width:100%;height:100%;object-fit:cover}
.game-card .play-badge{
  position:absolute;inset:0;background:rgba(10,12,24,.45);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;font-size:30px;
}
.game-card:hover .play-badge{opacity:1}
.game-card .info{padding:10px 12px}
.game-card .info h3{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-card .info span{font-size:12px;color:#8a8fb5}

/* ========== CATEGORY CHIPS ========== */
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.cat-chips a{
  background:#20243c;border:1px solid #333a5c;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;
}
.cat-chips a.active,.cat-chips a:hover{background:#7c5cff;border-color:#7c5cff}

/* ========== SINGLE GAME PAGE ========== */
.game-player-wrap{background:#161a2e;border-radius:14px;overflow:hidden;border:1px solid #262b45}
.game-player-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;flex-wrap:wrap;gap:10px}
.game-player-header h1{font-size:20px;font-weight:800}
.game-actions{display:flex;gap:10px}
.btn{
  background:#20243c;border:1px solid #333a5c;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;
}
.btn.primary{background:#7c5cff;border-color:#7c5cff}
.game-frame-holder{position:relative;width:100%;background:#000;aspect-ratio:16/9}
.game-frame-holder iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.game-frame-holder.fullscreen{aspect-ratio:auto;height:100vh}
.game-meta{padding:20px 4px}
.game-meta h2{font-size:18px;margin-bottom:10px;font-weight:800}
.game-meta p{color:#c2c5e0;font-size:14px;margin-bottom:14px}
.game-tags{display:flex;gap:8px;flex-wrap:wrap}
.game-tags span{background:#20243c;padding:5px 12px;border-radius:14px;font-size:12px;color:#a9adcf}

/* ========== BLOG / ARTICLES ========== */
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
.blog-card{
  background:#161a2e;border-radius:12px;overflow:hidden;border:1px solid #262b45;
  transition:transform .18s,border-color .18s;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-4px);border-color:#7c5cff}
.blog-thumb{aspect-ratio:16/9;background:#20243c;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px}
.blog-info{padding:16px}
.blog-date{font-size:12px;color:#7c5cff;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.blog-info h3{font-size:16px;font-weight:800;margin:8px 0 8px;line-height:1.35}
.blog-info p{font-size:13.5px;color:#a9adcf;margin-bottom:12px}
.blog-readmore{font-size:13px;font-weight:700;color:#00e5c7}

/* ========== SIDEBAR ========== */
.content-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.sidebar-widget{background:#161a2e;border:1px solid #262b45;border-radius:12px;padding:16px;margin-bottom:20px}
.sidebar-widget h3{font-size:15px;font-weight:800;margin-bottom:12px}
@media(max-width:900px){.content-layout{grid-template-columns:1fr}}

/* ========== FOOTER ========== */
.site-footer{background:#0b0d18;border-top:1px solid #262b45;margin-top:60px;padding:40px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.footer-grid h4{font-size:14px;margin-bottom:12px;font-weight:800}
.footer-grid ul li{margin-bottom:8px}
.footer-grid a{font-size:13px;color:#a9adcf}
.footer-grid a:hover{color:#00e5c7}
.footer-bottom{text-align:center;font-size:12px;color:#565b7f;border-top:1px solid #262b45;padding-top:16px}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ========== COOKIE CONSENT ========== */
#gz-cookie-consent{
  position:fixed;bottom:0;left:0;right:0;background:#161a2e;border-top:1px solid #333a5c;
  padding:14px 20px;display:none;z-index:9999;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
#gz-cookie-consent p{font-size:13px;color:#c2c5e0;flex:1;min-width:220px}
#gz-cookie-consent a{color:#00e5c7;text-decoration:underline}
#gz-cookie-consent button{background:#7c5cff;border:none;color:#fff;padding:9px 20px;border-radius:8px;font-weight:700;font-size:13px}

/* ========== PAGINATION ========== */
.gz-pagination{display:flex;justify-content:center;gap:8px;margin:30px 0}
.gz-pagination a,.gz-pagination span{background:#161a2e;border:1px solid #262b45;padding:8px 14px;border-radius:8px;font-size:13px}
.gz-pagination .current{background:#7c5cff;border-color:#7c5cff}

/* ========== STATIC PAGES ========== */
.page-content{background:#161a2e;border:1px solid #262b45;border-radius:12px;padding:30px;margin:24px 0}
.page-content h1{font-size:26px;margin-bottom:16px}
.page-content h2{font-size:19px;margin:20px 0 10px}
.page-content p,.page-content li{color:#c2c5e0;font-size:14.5px;margin-bottom:10px}
.page-content ul{padding-left:20px;list-style:disc}