/* ── Body ── */
body { padding-top: calc(var(--nav-h) + var(--tabs-h)); }

/* ── Topbar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(6, 12, 24, 0.97);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 900;
}
.topbar-logo {
  font-family: 'Barlow', sans-serif;
  font-size: 21px; font-weight: 800;
  color: var(--pri);
  letter-spacing: .4px;
}
.topbar-search-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--txt2);
  background: var(--surf2);
  border: 1px solid var(--border);
}
.topbar-search-btn:active { background: var(--surf3); color: var(--pri) }

/* ── Category Tabs ── */
.cat-tabs {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: var(--tabs-h);
  background: rgba(6, 12, 24, 0.97);
  border-bottom: 1px solid var(--border);
  z-index: 850; overflow: hidden;
}
.cat-tabs-inner {
  display: flex; gap: 6px;
  padding: 0 12px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  height: 100%; align-items: center;
}
.cat-tabs-inner::-webkit-scrollbar { display: none }
.cat-tab {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px; font-weight: 600;
  color: var(--txt2);
  background: var(--surf2);
  border: 1px solid var(--border);
  transition: all var(--t);
}
.cat-tab.active {
  background: var(--pri);
  color: #fff; border-color: transparent;
  box-shadow: 0 0 12px rgba(255,108,0,.35);
}

/* ── Search Bar ── */
.search-bar-wrap {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: var(--tabs-h);
  background: rgba(6, 12, 24, 0.97);
  border-bottom: 1px solid var(--border);
  z-index: 850;
  display: flex; align-items: center;
  padding: 0 12px; gap: 8px;
}
.search-input {
  flex: 1; background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 7px 14px;
  font-size: 13px; color: var(--txt); outline: none;
}
.search-input::placeholder { color: var(--txt3) }
.search-input:focus { border-color: var(--pri); box-shadow: 0 0 0 2px rgba(255,108,0,.12) }
.search-cancel { font-size: 13px; color: var(--pri); font-weight: 600; flex-shrink: 0; padding: 4px 2px; }

/* ── Shared Section Header ── */
.sec-hd {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 14px; margin-bottom: 10px;
}
.sec-label {
  font-size: 14px; font-weight: 700; color: var(--txt);
  font-family: 'Barlow', sans-serif; letter-spacing: .3px;
}
.sec-more {
  font-size: 11px; color: var(--pri); font-weight: 600;
  background: var(--surf3); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 11px;
}
.sec-cnt {
  font-size: 11px; color: var(--txt3);
  background: var(--surf2); padding: 2px 9px;
  border-radius: 10px; border: 1px solid var(--border);
}

/* ════════════════════════════════════════
   FEATURED SECTION  (replaces full-bleed banner)
   — horizontal split: info left / image right
════════════════════════════════════════ */
.featured-sec { padding: 14px 14px 0; }
.featured-card {
  display: flex; min-height: 130px;
  border-radius: var(--r); overflow: hidden;
  background: var(--surf);
  border: 1px solid var(--border);
  box-shadow: var(--sh); cursor: pointer;
  transition: border-color var(--t);
}
.featured-card:active { border-color: var(--pri) }
.featured-body {
  flex: 1; padding: 16px 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
  min-width: 0;
}
.feat-badge {
  display: inline-block; background: var(--pri); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 8px; border-radius: 9px;
  text-transform: uppercase; letter-spacing: .6px;
  align-self: flex-start;
}
.feat-title {
  font-size: 16px; font-weight: 800; color: var(--txt);
  line-height: 1.2; font-family: 'Barlow', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-desc {
  font-size: 11px; color: var(--txt2); line-height: 1.45;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.feat-play-btn {
  display: inline-flex; align-items: center;
  background: var(--pri); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 13px;
  align-self: flex-start; margin-top: 2px;
}
.featured-cover {
  width: 118px; flex-shrink: 0; position: relative;
}
.featured-cover::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 26px;
  background: linear-gradient(to right, var(--surf), transparent);
  z-index: 1; pointer-events: none;
}
.featured-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════
   HOT GAMES  (2-row grid: 2 big + 3 small)
   replaces: mosaic A (2×2 big + 5 small)
════════════════════════════════════════ */
.hot-sec { padding: 16px 14px 0; }
.hot-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 8px;
}
.htcard {
  position: relative; cursor: pointer;
  border-radius: var(--r); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.htcard:active { opacity: .82 }
.htcard img { aspect-ratio: 1; width: 100%; object-fit: cover; display: block; }
.htcard-nm {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 5px 8px;
  background: linear-gradient(to top, rgba(6,12,24,.90), transparent);
  color: #fff; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hot-bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hsmcard { cursor: pointer; }
.hsmcard-img {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.hsmcard:active .hsmcard-img { opacity: .82 }
.hsmcard-img img { width: 100%; height: 100%; object-fit: cover; }
.hsmcard-nm {
  font-size: 10px; color: var(--txt2); font-weight: 500;
  text-align: center; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   ACTION  (numbered rank list)
   replaces: icon + name horizontal list
════════════════════════════════════════ */
.rank-sec { padding: 16px 14px 0; }
.ritem {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surf); border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: pointer; margin-bottom: 6px;
}
.ritem:last-child { margin-bottom: 0 }
.ritem:active { opacity: .80 }
.rnum {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  background: var(--surf2); color: var(--txt3);
}
.rn-1 { background: var(--pri); color: #fff; }
.rn-2 { background: var(--acc); color: #fff; }
.rn-3 { background: var(--acc-d); color: #fff; }
.rthumb {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2);
}
.rthumb img { width: 100%; height: 100%; object-fit: cover; }
.rbody { flex: 1; min-width: 0; }
.rname {
  font-size: 13px; font-weight: 600; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rtag {
  font-size: 10px; color: var(--txt3);
  background: var(--surf3); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 8px; display: inline-block;
}
.rplay { font-size: 15px; color: var(--pri); flex-shrink: 0; }

/* ════════════════════════════════════════
   PUZZLE  (horizontal scroll)
   replaces: side-by-side 2×2 mini grid
════════════════════════════════════════ */
.puzzle-sec { padding: 16px 0 0; }
.puzzle-scroll {
  display: flex; gap: 10px;
  padding: 0 14px 4px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.puzzle-scroll::-webkit-scrollbar { display: none }
.pzcard { flex-shrink: 0; width: 82px; cursor: pointer; }
.pzcard-img {
  width: 82px; height: 82px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.pzcard:active .pzcard-img { opacity: .82 }
.pzcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pzcard-nm {
  font-size: 10px; color: var(--txt2); font-weight: 500;
  text-align: center; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   KIDS  (4-column icon grid)
   replaces: side-by-side 2×2 mini grid
════════════════════════════════════════ */
.kids-sec { padding: 16px 14px 0; }
.kids-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kcard { cursor: pointer; text-align: center; }
.kcard-img {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.kcard:active .kcard-img { opacity: .82 }
.kcard-img img { width: 100%; height: 100%; object-fit: cover; }
.kcard-nm {
  font-size: 9px; color: var(--txt2); font-weight: 500;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   SPORTS  (spotlight card + 2×2 grid)
   replaces: mosaic B alternating wide rows
════════════════════════════════════════ */
.sports-sec { padding: 16px 14px 0; }
.spot-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  cursor: pointer; aspect-ratio: 16 / 7;
  background: var(--surf2); border: 1px solid var(--border);
  box-shadow: var(--sh); margin-bottom: 8px;
}
.spot-card:active { opacity: .85 }
.spot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-ovl {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(6,12,24,.92), transparent);
}
.spot-badge {
  display: inline-block; background: var(--acc); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 1px 7px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 3px;
}
.spot-name {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Shared 2-col grid (Sports + Racing) */
.two-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.twcard { cursor: pointer; }
.twcard-img {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.twcard:active .twcard-img { opacity: .82 }
.twcard-img img { width: 100%; height: 100%; object-fit: cover; }
.twcard-nm {
  font-size: 10px; color: var(--txt2); font-weight: 500;
  margin-top: 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   ADVENTURE  (full hero image + 3-col row)
   replaces: horizontal feat-top card + 4-col
════════════════════════════════════════ */
.adv-sec { padding: 16px 14px 0; }
.adv-hero {
  position: relative; border-radius: var(--r); overflow: hidden;
  cursor: pointer; aspect-ratio: 16 / 9;
  background: var(--surf2); border: 1px solid var(--border);
  box-shadow: var(--sh); margin-bottom: 8px;
}
.adv-hero:active { opacity: .85 }
.adv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-hero-ovl {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(6,12,24,.94) 42%, transparent);
}
.adv-badge {
  display: inline-block; background: var(--pri); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 1px 7px; border-radius: 8px;
  text-transform: uppercase; margin-bottom: 4px;
}
.adv-name {
  font-size: 14px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.adv-desc {
  font-size: 10px; color: rgba(255,255,255,.62); line-height: 1.4;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Shared 3-col grid (Adventure + Girl) */
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tgcard { cursor: pointer; }
.tgcard-img {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf2); border: 1px solid var(--border);
}
.tgcard:active .tgcard-img { opacity: .82 }
.tgcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tgcard-nm {
  font-size: 10px; color: var(--txt2); font-weight: 500;
  margin-top: 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════
   RACING  (2-col grid)
   replaces: horizontal scroll small cards
════════════════════════════════════════ */
.racing-sec { padding: 16px 14px 0; }

/* ════════════════════════════════════════
   GIRL  (3-col grid)
   replaces: horizontal scroll small cards
════════════════════════════════════════ */
.girl-sec { padding: 16px 14px 0; }

/* ════════════════════════════════════════
   ALL GAMES  (2-col with name overlay)
   replaces: 3-col grid name-below
════════════════════════════════════════ */
.all-sec { padding: 16px 14px 0; }
.all-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.agcard {
  cursor: pointer; border-radius: var(--r-sm); overflow: hidden;
  position: relative;
  background: var(--surf2); border: 1px solid var(--border);
}
.agcard:active { opacity: .82 }
.agcard-img { aspect-ratio: 1; overflow: hidden; }
.agcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agcard-nm {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(6,12,24,.90), transparent);
  color: #fff; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.more-wrap { text-align: center; padding: 16px 0; }
.more-btn {
  padding: 10px 32px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  color: var(--pri); font-weight: 600; font-size: 13px;
}

/* ════════════════════════════════════════
   FILTER / SEARCH
════════════════════════════════════════ */
.filter-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 8px;
}
.filter-back {
  font-size: 12px; color: var(--pri); font-weight: 600;
  flex-shrink: 0;
  background: var(--surf3); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 11px;
}
.filter-title {
  flex: 1; font-size: 14px; font-weight: 700; color: var(--txt);
  font-family: 'Barlow', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-cnt {
  font-size: 11px; color: var(--txt3);
  background: var(--surf2); padding: 2px 9px;
  border-radius: 10px; border: 1px solid var(--border);
  flex-shrink: 0;
}
.grid-sec { padding: 0 14px 0; }
.games-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.gcard {
  cursor: pointer; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surf); border: 1px solid var(--border);
}
.gcard:active { opacity: .82 }
.gcard-img { aspect-ratio: 1; overflow: hidden; background: var(--surf2); }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; }
.gcard-nm {
  font-size: 10px; color: var(--txt);
  padding: 4px 4px 5px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.empty-msg { text-align: center; color: var(--txt3); padding: 48px 20px; font-size: 14px; }
.loadmore-wrap { text-align: center; padding: 16px 0; }
.loadmore-btn {
  padding: 10px 32px; background: transparent;
  border: 1px solid var(--border2); border-radius: var(--r-lg);
  color: var(--pri); font-weight: 600; font-size: 13px;
}