/* ==================== Reset & Base ==================== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f4f6f9;
      color: #222;
      min-height: 100vh;
    }

    /* ==================== Header ==================== */
    header {
      background: #fff;
      border-bottom: 1px solid #e8eaed;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      position: sticky;
      top: 0;
      z-index: 200;
    }
    .header-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
      height: 60px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .logo {
      font-size: 20px;
      font-weight: 700;
      color: #2563eb;
      white-space: nowrap;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .logo-icon { font-size: 22px; }
    .header-count {
      font-size: 13px;
      color: #6b7280;
      white-space: nowrap;
    }
    .header-count strong { color: #2563eb; }

    /* ==================== Hero Section ==================== */
    .hero-section {
      max-width: 1280px;
      margin: 22px auto 0;
      padding: 0 20px;
    }
    .hero-section h2 {
      font-size: 15px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hero-section h2::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e5e7eb;
    }
    #heroGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }
    .hero-card {
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
      transition: transform .2s, box-shadow .2s;
    }
    .hero-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
    .hero-thumb { position: relative; width: 100%; padding-bottom: 100%; background: #eee; }
    .hero-thumb img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0); 
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .hero-card:hover .hero-overlay { background: rgba(0,0,0,0.35); }
    .play-btn {
      color: #fff;
      background: #2563eb;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity .2s, transform .2s;
    }
    .hero-card:hover .play-btn { opacity: 1; transform: scale(1); }
    .hero-title {
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ==================== Category Bar ==================== */
    .cat-section {
      max-width: 1280px;
      margin: 20px auto 0;
      padding: 0 20px;
    }
    #categoryBar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .cat-btn {
      padding: 7px 18px;
      border-radius: 20px;
      border: 1.5px solid #e0e3ea;
      background: #fff;
      font-size: 13px;
      font-weight: 500;
      color: #4b5563;
      cursor: pointer;
      font-family: inherit;
      transition: all .18s;
    }
    .cat-btn:hover { border-color: #2563eb; color: #2563eb; }
    .cat-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }

    /* ==================== Ad: Top ==================== */
    .ad-wrap {
      max-width: 1280px;
      margin: 20px auto 0;
      padding: 0 20px;
    }
    .ad-slot {
      background: #fff;
      border: 1px dashed #d1d5db;
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      color: #9ca3af;
      font-size: 12px;
    }
    .ad-slot-inner {
      background: #f9fafb;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #9ca3af;
    }
    .ad-top-inner { min-height: 90px; }
    .ad-mid-inner { min-height: 250px; }
    .ad-bot-inner { min-height: 90px; }

    /* ==================== Main Layout ==================== */
    .main-layout {
      max-width: 1280px;
      margin: 20px auto 0;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 1fr 200px;
      gap: 20px;
      align-items: start;
    }

    /* ==================== Games Grid ==================== */
    .grid-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .grid-header h2 {
      font-size: 15px;
      font-weight: 600;
      color: #374151;
    }
    .games-count-badge {
      font-size: 12px;
      color: #6b7280;
      background: #f3f4f6;
      padding: 3px 10px;
      border-radius: 12px;
    }
    .games-count-badge strong { color: #2563eb; }
    #gamesGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 14px;
    }
    .game-card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
    }
    .game-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
    .game-thumb { width: 100%; padding-bottom: 100%; background: #eee; position: relative; }
    .game-thumb img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    }
    .card-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .game-card:hover .card-overlay { background: rgba(0,0,0,0.3); }
    .play-btn-sm {
      width: 34px; height: 34px;
      background: #2563eb;
      color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity .2s, transform .2s;
    }
    .game-card:hover .play-btn-sm { opacity: 1; transform: scale(1); }
    .game-info { padding: 9px 10px; }
    .game-title {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ==================== Sidebar Top List ==================== */
    .sidebar { position: sticky; top: 76px; }
    .sidebar-box {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .sidebar-title {
      padding: 13px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #topList { padding: 6px 0; }
    .top-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      cursor: pointer;
      transition: background .15s;
    }
    .top-item:hover { background: #f7f8fa; }
    .top-rank {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #9ca3af;
      background: #f3f4f6;
      flex-shrink: 0;
    }
    .top-rank--hot { background: #fef3c7; color: #d97706; }
    .top-name {
      font-size: 12px;
      color: #374151;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ==================== Load More ==================== */
    .load-more {
      text-align: center;
      padding: 28px 0 10px;
      grid-column: 1;
    }
    #loadMoreBtn {
      padding: 11px 40px;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 24px;
      font-size: 15px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background .2s, transform .15s;
    }
    #loadMoreBtn:hover { background: #1d4ed8; transform: translateY(-1px); }

    /* ==================== Footer ==================== */
    footer {
      background: #fff;
      border-top: 1px solid #e8eaed;
      margin-top: 40px;
      padding: 28px 20px;
    }
    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .footer-links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .footer-links a {
      font-size: 13px;
      color: #6b7280;
      text-decoration: none;
      transition: color .15s;
    }
    .footer-links a:hover { color: #2563eb; }
    .footer-stats {
      font-size: 13px;
      color: #9ca3af;
    }
    .footer-stats strong { color: #6b7280; }
    .footer-copy {
      font-size: 12px;
      color: #9ca3af;
    }

    /* ==================== Responsive ==================== */
    @media (max-width: 900px) {
      .main-layout { grid-template-columns: 1fr; }
      .sidebar { display: none; }
      #heroGrid { grid-template-columns: repeat(3, 1fr); }
      #heroGrid .hero-card:nth-child(n+4) { display: none; }
    }
    @media (max-width: 600px) {
      #heroGrid { grid-template-columns: repeat(2, 1fr); }
      #heroGrid .hero-card:nth-child(n+3) { display: none; }
      #gamesGrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
      .header-count { display: none; }
      .load-more { padding: 20px 0; }
    }