/* ============================================================
   Poki2 — Poki-style game portal
   ============================================================ */

/* ---------- Reset & Variables ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* brand */
  --brand:        #006bb3;
  --brand-dark:   #005499;
  --brand-light:  #d8ecff;

  /* surfaces */
  --bg:           #f0f2f5;
  --surface:      #ffffff;
  --surface-2:    #eaecf0;

  /* text */
  --text:         #1e1e2e;
  --text-muted:   #505662;

  /* sidebar */
  --sidebar-bg:   #002b49;
  --sidebar-text: #c4d6e8;
  --sidebar-hover:#003d66;
  --sidebar-active:#009cff;
  --sidebar-w:    260px;

  /* topbar */
  --topbar-h:     56px;

  /* card */
  --card-radius:  12px;

  /* transitions */
  --ease:         cubic-bezier(.4,0,.2,1);

  /* overlay */
  --overlay-bar-h: 48px;
  /* footer spacing to prevent overlap with content and overlays */
  --footer-h: 120px;
  /* row height used to compute 3-row category pages height
     Adjusted in media queries below for responsiveness */
  --category-row-h: 220px;
  /* height reserved for the card title/info area inside each card */
  --card-info-h: 48px;
  /* bottom navigation surface (mobile) */
  --bottom-nav-bg: #073047; /* deeper blue surface to contrast white page */
  --bottom-nav-text: #ffffff;
  --bottom-nav-border: rgba(255,255,255,0.06);
  --bottom-nav-elevation: 0 -8px 28px rgba(3,12,24,0.22);
}

html{font-size:16px;scroll-behavior:smooth}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  min-height:100dvh;
}
/* Accessibility helpers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:12px;background:#fff;color:var(--text);padding:8px 12px;border-radius:6px;z-index:1100;transform:translateY(-150%);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .12s}
.skip-link:focus-visible{transform:translateY(0);opacity:1;pointer-events:auto;outline:3px solid var(--brand)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
img{display:block;max-width:100%}
input{font:inherit}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  display:flex;flex-direction:column;
  z-index:900;
  transform:translateX(0);
  transition:transform .3s var(--ease);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.sidebar-header{
  padding:16px 20px;
  display:flex;align-items:center;gap:10px;
}
.sidebar-logo{
  display:flex;align-items:center;gap:8px;
  font-size:1.3rem;font-weight:700;color:#fff;
}
.logo-icon{font-size:1.5rem}

.sidebar-nav{flex:1;padding:8px 0}
.sidebar-nav .nav-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  font-size:.86rem;
  border-radius:0 24px 24px 0;
  margin-right:12px;
  /* avoid transitioning color; use opacity for hover smoothing */
  transition:background .15s, opacity .15s;
  cursor:pointer;
}
.sidebar-nav .nav-item .nav-emoji{font-size:1.15rem;min-width:24px;text-align:center}
.sidebar-nav .nav-item{opacity:.98}
.sidebar-nav .nav-item:hover{background:var(--sidebar-hover);color:#fff;opacity:1}
.sidebar-nav .nav-item.active{background:var(--brand);color:#fff;font-weight:600}

.sidebar-footer{
  padding:14px 20px;
  font-size:.75rem;
  display:flex;gap:12px;
  border-top:1px solid rgba(255,255,255,.1);
  justify-content:center; /* center footer content */
  align-items:center;
  text-align:center;
}
.sidebar-footer a:hover{color:#fff}

.sidebar-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:899;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.sidebar-overlay.show{opacity:1;pointer-events:auto}

/* ---------- Main wrapper ---------- */
.main-wrap{
  margin-left:var(--sidebar-w);
  min-height:calc(100dvh - var(--footer-h)); /* 保证内容区不会被footer遮挡 */
  display:flex;
  flex-direction:column;
  /* prefer transform for composited animations; avoid transitioning margin-left */
  transition: transform .3s var(--ease);
  will-change: transform;
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;
  height:var(--topbar-h);
  background:var(--surface);
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  z-index:800;
}
.topbar-logo{
  font-size:1.15rem;font-weight:700;color:var(--brand);
  display:none;           /* visible only on mobile */
}
.menu-btn{
  display:none;           /* visible only on mobile */
  padding:6px;
  border-radius:8px;
}
.menu-btn:hover{background:var(--surface-2)}
/* Focus-visible styles for keyboard users — avoids focus ring on mouse/programmatic focus */
.menu-btn:focus-visible,
.nav-item:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius:8px;
}

.search-wrap{
  flex:1;max-width:420px;
  position:relative;
}
.search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);
  pointer-events:none;
}
.search-input{
  width:100%;
  padding:9px 14px 9px 40px;
  border:2px solid var(--surface-2);
  border-radius:24px;
  outline:none;
  background:var(--bg);
  /* prefer composited animations: animate box model via transform/opacity only */
  transition: background .2s var(--ease), transform .18s var(--ease);
}
.search-input:focus{transform:translateZ(0)}

/* ---- Shuffle button ---- */
.shuffle-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  color:var(--text-muted);
  transition: background-color .15s, transform .3s;
  flex-shrink:0;
}
.shuffle-btn:hover{background:var(--brand-light);color:var(--brand)}
.shuffle-btn:active{transform:rotate(180deg)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,#009cff 0%,#6c3bff 100%);
  color:#fff;
  padding:48px 28px 40px;
  border-radius:0 0 20px 20px;
  text-align:center;
}
.hero-title{font-size:1.8rem;font-weight:800;margin-bottom:8px}
.hero-sub{font-size:1rem;opacity:.85;margin-bottom:18px}

/* Hero featured games row */
.hero-featured{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:8px;
}
.hero-card{
  width: clamp(72px, 9vw, 120px);
  height: clamp(72px, 9vw, 120px);
  border-radius:14px;overflow:hidden;
  cursor:pointer;
  /* animate transform only for compositing; apply shadow instantly on hover */
  transition: transform .2s var(--ease);
  will-change: transform;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  flex-shrink:0;
}
.hero-card:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero-card img{width:100%;height:100%;object-fit:fill;object-position:center center}
/* Reserve layout space for hero thumbnails to avoid CLS */
.hero-card{
  display:block;
  aspect-ratio:1 / 1;
  object-position:center center;
  background-color:#f3f4f6;
}

/* ---- Recently Played ---- */
.recently-played .clear-recent{
  font-size:.8rem;color:var(--text-muted);
  padding:4px 10px;border-radius:14px;
  transition:background .15s, opacity .15s;
  opacity:.98;
}
.recently-played .clear-recent:hover{background:var(--surface-2);color:var(--text);opacity:1}

/* ---------- Content ---------- */
.content, .page-content {
  padding:0;
  padding-bottom:var(--footer-h); /* 固定footer时内容区留出空间 */
  min-height:calc(100vh - var(--footer-h));
  box-sizing:border-box;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* ---- Section ---- */
.category-section{
  padding:12px 20px 8px;
  /* constrain each category to a centered content column */
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}
.section-header{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:12px; /* match index spacing */
}
.section-header .section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:1.15rem;
  font-weight:700;
}
.section-title .emoji{font-size:1.2rem}
.section-header .see-all{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
  vertical-align:baseline;
  font-size:.85rem;
  font-weight:600;
  color:var(--brand);
  padding:4px 10px;
  border-radius:16px;
  transition:background .15s;
}
.see-all:hover{background:var(--brand-light)}

/* ---- Sidebar badge ---- */
.nav-badge{
  font-size:.7rem;font-weight:600;
  /* Opaque white background with dark text for good contrast on the dark sidebar */
  background:#ffffff;
  color:var(--sidebar-bg);
  padding:4px 8px;border-radius:10px;
  min-width:22px;text-align:center;
  border:1px solid rgba(0,0,0,0.06);
}
.nav-item.active .nav-badge{
  /* Keep badge white for consistent contrast; use brand-dark text on active rows */
  background:#ffffff;
  color:var(--brand-dark);
  border:1px solid rgba(0,0,0,0.06);
}

/* ---- Game grid ---- */
.game-grid{
  display:grid;
  /* use fixed-ish column sizing so the grid can be centered
     and not stretch every card to full width on large viewports */
  grid-template-columns:repeat(auto-fill,minmax(140px,160px));
  gap:12px;
  justify-content:center;
}

.game-card{
  position:relative;
  border-radius:var(--card-radius);
  overflow:hidden;
  background:var(--surface);
  /* inset the effective drawing area by 1px on all sides */
  padding:1px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;
  /* animate transform only (composited) to avoid box-shadow animations */
  transition: transform .2s var(--ease);
  will-change: transform;
}
.game-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.game-card-img{
  width:100%;
  /* make the thumbnail square */
  aspect-ratio:1 / 1;
  /* crop to fill the square while keeping content centered */
  object-fit:cover;
  object-position:center center;
  background:transparent;
  /* only round the top corners of the image */
  border-top-left-radius: calc(var(--card-radius) - 1px);
  border-top-right-radius: calc(var(--card-radius) - 1px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display:block;
}
.game-card-info{
  padding:8px 10px;
  /* preserve shape but round only the bottom corners */
  border-bottom-left-radius: calc(var(--card-radius) - 1px);
  border-bottom-right-radius: calc(var(--card-radius) - 1px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--surface-2);
  color: var(--text);
}
.game-card-title{
  font-size:.82rem;font-weight:600;
  display:block;width:100%;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color: inherit;
}
.game-card-badge{
  position:absolute;top:6px;left:6px;
  padding:2px 7px;
  border-radius:20px;
  font-size:.62rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.4;
  pointer-events:none;
  z-index:10;
}
.game-card-badge.badge-new{background:#15803d;color:#fff}
.game-card-badge.badge-hot{background:#c2410c;color:#fff}
.game-card-badge.badge-popular{background:#1d4ed8;color:#fff}

/* ---- Category chip filter bar ---- */
.tag-chips-bar{display:flex;justify-content:flex-start;overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:var(--topbar-h,56px);z-index:100;background:var(--bg,#f0f4f8);box-shadow:0 1px 6px rgba(0,0,0,.07)}
.tag-chips-inner{display:flex;flex-wrap:nowrap;margin:0 auto;flex-shrink:0;padding:10px 20px 8px}
.tag-chips-bar:empty{display:none}
.tag-chips-bar::-webkit-scrollbar{display:none}
.tag-chip{flex-shrink:0;scroll-snap-align:start;padding:6px 14px;border-radius:20px;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:.82rem;font-weight:600;color:var(--text,#1a2332);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;line-height:1.5}
.tag-chip:hover{background:rgba(0,107,179,.08);border-color:var(--brand,#006bb3);color:var(--brand,#006bb3)}
.tag-chip.active{background:var(--brand,#006bb3);color:#fff;border-color:var(--brand,#006bb3);box-shadow:0 2px 8px rgba(0,107,179,.25)}
.tag-chip.active:hover{background:var(--brand,#006bb3);color:#fff}
@media(hover:none){.tag-chip:hover{background:#fff;border-color:rgba(0,0,0,.1);color:var(--text,#1a2332)}}

/* ---- Full category page (all games of one tag) ---- */
.full-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px;
  padding:0 20px calc(30px + var(--footer-h)); /* 增加底部空间防止footer遮挡 */
}

/* Category pages: present a single "page" per viewport and lazy-populate next pages */
.category-pages{display:block}
.category-page{
  /* allow the page to size naturally (no fixed height) so image + title
     never get clipped; JS controls pagination and visible page counts */
  min-height: auto;
  padding: 18px 20px 24px;
  box-sizing: border-box;
  display:block;
}
.category-page .game-grid{
  width:100%;
  /* match the index `.game-grid` sizing so visuals (card width/height/radius)
     are identical between index and category views */
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,160px));
  gap:12px;
  justify-content:center;
}
/* Cards inside category pages should use the same natural sizing as index
   cards: square thumbnail (aspect-ratio) with title/info below. Do not
   force a fixed total row height — this prevents clipping on small viewports. */
.category-page .game-card {
  position:relative;
  border-radius:var(--card-radius);
  overflow:hidden;
  background:var(--surface);
  padding:1px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}
.category-page .game-card .game-card-img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.category-page .game-card .game-card-info{
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.category-summary{
  margin:12px auto 20px;
  color:var(--text-muted);
  font-size:0.95rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  border-radius:10px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 6px 18px rgba(12,24,40,0.04);
}
.category-summary .category-desc{margin:0 0 6px;color:var(--text-muted)}
.category-summary .category-meta{margin:0;font-size:0.9rem;color:var(--text-muted)}

/* Tidy up section headers: title left, actions right */
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
/* ===== Category pages + summary (paginated view, CrazyGames-like) ===== */
.category-pages {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 14px;
  box-sizing: border-box;
  /* Allow natural height so cards (image + title) can render without clipping.
     JS still inserts the pager as a sibling and reserves space via padding-bottom. */
  overflow: visible;
  position: relative;
}
.category-page {
  display: block;
  margin: 8px 0 18px;
  box-sizing: border-box;
  padding: 8px 0;
}
.category-page .game-grid{
  width:100%;
  margin-top:0; /* remove extra gap so spacing equals index */
}
.category-summary {
  max-width: 1180px;
  margin: 6px auto 28px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid rgba(11,18,32,0.06);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.04);
  color: #0b1220;
}
.category-summary .category-desc { margin: 0 0 10px; color: #233; line-height:1.5 }
.category-summary .category-stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; font-size:14px }
.category-summary .category-stats .stat { color:#556; }
.category-summary .category-samples { margin: 0; color:#444; font-size:14px }

.category-pager {
  display:flex;
  gap:var(--pager-gap,40px);
  align-items:center;
  justify-content:center;
  margin: 12px 0 6px;
  flex-wrap:nowrap;
  /* slot sizing to prevent layout shift when active page changes */
  --pager-slot-w: 44px;
  --pager-gap: 40px;
  --pager-max-visible: 9; /* prev + 7 numeric + next */
  /* shrink total pager width by 20% to leave breathing room on smaller viewports */
  width: calc((var(--pager-slot-w) * var(--pager-max-visible) + var(--pager-gap) * (var(--pager-max-visible) - 1)) * 0.8);
  max-width: 100%;
}
.category-pager button {
  background: #fff;
  border: 1px solid rgba(11,18,32,0.08);
  color: #0b1220;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  width: var(--pager-slot-w);
  min-width: var(--pager-slot-w);
  text-align: center;
}

/* Fixed slot wrappers so numeric positions remain stable */
.category-pager .pager-slot{
  display:inline-flex;
  width: var(--pager-slot-w);
  min-width: var(--pager-slot-w);
  height: calc(var(--pager-slot-w) + 0px);
  align-items:center;
  justify-content:center;
}
.category-pager .pager-empty{opacity:0;display:inline-block;width:100%;height:100%}
.category-pager .pager-num{min-width:0;padding:6px 8px;border-radius:8px}
.category-pager .pager-num.active{background:#1f6feb;color:#fff}
/* Removed: legacy descendant rule that forced the pager to be static
  inside `.category-pages`. The pager is now inserted as a sibling and
  controlled by the `.category-pages + .category-pager.pinned` rule. */

/* If the pager is placed as a sibling immediately after `.category-pages`
   (preferred), ensure it uses the in-flow 'pinned' styles and doesn't get
   positioned absolutely by the descendant selector above. This selector
   targets the common DOM order we enforce in JS and is high-specificity. */
.category-pages + .category-pager.pinned {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  bottom: auto !important;
  /* Use the CSS variable so JS can tweak gap if needed */
  margin-top: calc(var(--pager-gap, 24px)) !important;
  z-index: 60 !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06) !important;
  border: 1px solid rgba(11,18,32,0.06) !important;
}

/* When we want the pager to remain fixed on-screen during page switches,
   add the `pinned` class which pins it to the viewport above the footer. */
.category-pager.pinned {
  /* Pager placed in the document flow immediately after .category-pages */
  position: relative !important;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  z-index: 60;
  background: rgba(255,255,255,0.98);
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  border: 1px solid rgba(11,18,32,0.06);
  margin-top: 8px;
}

/* Fixed-size mode: when `.fixed-size` is applied the `.category-pages`
   container reserves a fixed height based on CSS variables so the pager
   position is stable and cannot overlap content. The JS sets
   `--category-rows` and `--pager-gap` when rendering the pager. */
.category-pages.fixed-size {
  /* Allow natural height determined by children (images + titles).
     Previously we forced an explicit height here; remove that so the
     container can grow/shrink naturally. Keep padding/margin at 0 so
     reserved spacing is controlled by sibling pager margin instead. */
  /* Reserve exact space for the pager using measured vars so the
     pinned pager cannot overlap the last visible row. JS sets
     --pager-height, --pager-gap and --pager-buffer when rendering. */
    /* When fixed-size is active we use an explicit inline `height` and a
      small bottom margin. Avoid extra internal padding so the pager sits
      cleanly below the container; JS will reserve space by setting the
      container `height` and applying `margin-bottom`. */
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  overflow: visible !important;
}
.category-pager button:hover { box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
.category-pager button:disabled { opacity:0.45; cursor:not-allowed }
.category-pager .pager-num.active {
  background: #1f6feb;
  color:#fff;
  border-color: transparent;
}
.category-pager .pager-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--pager-slot-w);
  color: var(--text-muted, #556);
}
.category-pager .pager-prev, .category-pager .pager-next { font-weight:600 }
.category-pager .pager-last { margin-left:6px; font-size:13px }

/* Responsive tweaks */
@media (max-width: 640px) {
  .category-pages, .category-summary { padding-left:12px; padding-right:12px }
  .category-page .game-grid { grid-template-columns: repeat(3, 1fr); gap:10px }
  .category-section .game-grid { grid-template-columns: repeat(3, 1fr) !important; gap:10px !important; }
  :root{ --category-row-h: 140px; --pager-slot-w:36px; --pager-max-visible:7; }
  /* Ensure pager fits in narrow portrait: allow it to use full available width */
  .category-pager { width: calc((var(--pager-slot-w) * var(--pager-max-visible) + var(--pager-gap) * (var(--pager-max-visible) - 1)) * 0.95); max-width: 100%; }
}

@media (max-width: 420px) {
  /* Force 3 columns on narrow portrait to match product requirement (3 rows x 3 cols) */
  .category-page .game-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .category-section .game-grid { grid-template-columns: repeat(3, 1fr) !important; }
  :root{ --category-row-h: 120px; }
}

/* Mobile landscape: constrain category pages to a single visible row */
@media (orientation: landscape) and (max-width: 900px) {
  /* Do not force the container height — let grid/cells size naturally.
     But display 4 columns on narrow landscape to match requirement (1 row × 4 cols). */
  .category-page .game-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

/* Add extra bottom padding on narrow viewports so an in-flow pager won't
   overlap the last visible row. JS will set inline padding when it can,
   but this CSS provides a safe fallback for slow JS or disabled JS. */
@media (max-width: 640px) {
  /* larger fallback padding for narrow portrait devices */
  .category-pages { padding-bottom: 160px !important; }
}
@media (orientation: landscape) and (max-width: 900px) {
  /* fallback padding for mobile landscape */
  .category-pages { padding-bottom: 160px !important; }
}
  /* slightly smaller row height in landscape on narrow devices */
  :root { --category-row-h: 120px; }
}
/* Stronger fallbacks and stacking to avoid pager overlapping cards on narrow viewports */
@media (max-width: 640px) {

/* Desktop: enforce 6 columns for category pages so pagination shows
   2 rows × 6 columns (12 items) per page when viewport is wide. This
   ensures layout matches the JS per-device page-size logic. */
@media (min-width: 900px) {
  .category-page .game-grid,
  .category-section .game-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px;
    justify-content: center;
  }
  :root { --category-row-h: 160px; }
}

  /* Ensure an ample fallback reserve so an in-flow pager cannot overlap the last row */
  .category-pages { padding-bottom: 260px !important; }
  .category-pages + .category-pager.pinned { margin-top: 20px !important; }
}
@media (orientation: landscape) and (max-width: 900px) {
  .category-pages { padding-bottom: 160px !important; }
  .category-pages + .category-pager.pinned { margin-top: 18px !important; }
}

/* Cards need position:relative to layer above pager (z-index:10) */
.category-page .game-card { position: relative; z-index: 1; }
.category-pages { z-index: 0; }
.category-pager { z-index: 10; }
.section-header .section-title{font-size:1.2rem}
.section-header .see-all{margin-left:0}

/* Make hero content centered and constrained */
.hero-inner{max-width:1100px;margin:0 auto}

/* Slightly larger gaps for a more open layout */
.game-grid{gap:14px}
.game-card{max-width:170px}
.game-card-info{padding:10px 12px}

/* Category refresh button (icon + label) inside the section title */
.category-refresh{
  all: unset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-weight:700;
  color:var(--text);
}
.category-refresh .emoji{font-size:1.15rem}

/* ---------- Search results ---------- */
.search-results{
  padding:20px;
  padding-bottom:var(--footer-h);
}

/* ---- Empty state ---- */
.category-summary{margin-bottom:12px; color:var(--text-muted); font-size:0.95rem}
.category-summary .category-desc{margin:0 0 6px}
.category-summary .category-meta{margin:0;font-size:0.9rem;color:var(--text-muted)}
.empty-text{color:var(--text-muted);font-size:1rem}

/* ---------- Footer ---------- */
.site-footer{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  z-index:1500;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  padding:20px 18px;
  box-sizing:border-box;
  /* give a subtle rounded top to match site aesthetic */
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
/* Smooth show/hide for JS-controlled footer state. When `body.footer-hidden` is
   present the footer is translated out of view and made non-interactive so
   it does not block content or overlays. When `body.full-bleed-footer` is
   present the footer intentionally overlays page content (no extra spacing). */
.site-footer{
  transition:transform .28s var(--ease), opacity .28s var(--ease);
  will-change:transform, opacity;
}
body.footer-hidden .site-footer{
  transform:translateY(calc(100% + 8px));
  opacity:0;
  pointer-events:none;
}
body:not(.footer-hidden) .site-footer{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
/* When full-bleed mode is active the footer intentionally overlays content.
   Authors may toggle `body.full-bleed-footer` to enable overlap without
   additional page padding. */
body.full-bleed-footer .site-footer{
  /* keep footer visible and overlapping content */
  transform:translateY(0);
  opacity:1;
}
.site-footer .footer-inner,
.site-footer > .footer-brand,
.site-footer > .footer-links,
.site-footer > .footer-copy{
  /* allow footer background to fill the container while keeping inner content centered */
  max-width:100%;
  padding:0 12px;
  box-sizing:border-box;
  text-align:center;
}
.site-footer .footer-inner > .footer-brand,
.site-footer .footer-inner > .footer-links,
.site-footer .footer-inner > .footer-copy,
.site-footer > .footer-brand,
.site-footer > .footer-links,
.site-footer > .footer-copy{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
.footer-brand{
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
}
.footer-brand a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.logo-icon{line-height:1}
.footer-links{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:10px;flex-wrap:wrap;row-gap:16px;column-gap:16px;-webkit-text-size-adjust:100%}
.footer-links a{font-size:.85rem;/* prefer opacity animation over color for compositing */transition:opacity .15s;white-space:nowrap;opacity:.95;flex:0 0 auto;min-width:0;line-height:1;-webkit-text-size-adjust:100%}
.footer-links a:hover{color:#fff;opacity:1}
/* Force consistent `.footer-links` sizing and gap across Index and About pages */
.site-footer .footer-inner > .footer-links,
.site-footer > .footer-links {
  width: min(100%, 800px);
  gap: 16px !important;
  row-gap: 16px !important;
  column-gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
}

.site-footer .footer-inner > .footer-links,
.site-footer > .footer-links {
  -webkit-text-size-adjust: 100% !important;
}

.site-footer .footer-inner > .footer-links a,
.site-footer > .footer-links a {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  -webkit-text-size-adjust: 100% !important;
}

/* Strong override: ensure section header → grid spacing matches exactly
  across index and category pages. Use high specificity and !important
  to avoid cascade conflicts from earlier rules. */
.category-section > .section-header { margin-bottom: 12px !important; }
.category-section { padding-top: 12px !important; }
.category-section > .game-grid { margin-top: 0 !important; }

/* Ensure the category-section grid matches the index `.game-grid` sizing
   so spacing and card widths are visually identical across views. */
.category-section .game-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px,160px));
  gap: 14px !important;
  justify-content: center;
  margin-top: 0 !important;
}

.footer-copy{font-size:.75rem;color:#fff;opacity:1}

/* Enforce identical footer-links layout for Index + About (overrides earlier responsive collapse) */
.site-footer .footer-inner > .footer-links,
.site-footer > .footer-links {
  width: min(100%, 800px) !important;
  gap: 16px !important;
  row-gap: 16px !important;
  column-gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  -webkit-text-size-adjust: 100% !important;
}

.site-footer .footer-inner > .footer-links a,
.site-footer > .footer-links a {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  -webkit-text-size-adjust: 100% !important;
}

/* Responsive: stack footer links on narrow screens */
@media (max-width:600px){
  .footer-links{gap:8px}
}

/* Ensure informational pages also get exact gap rules on mobile browsers */
body.about-page .site-footer > .footer-links,
body.privacy-page .site-footer > .footer-links,
body.terms-page .site-footer > .footer-links,
body.contact-page .site-footer > .footer-links,
body.dmca-page .site-footer > .footer-links,
body.static-page .site-footer > .footer-links {
  gap: 16px !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  -webkit-text-size-adjust: 100% !important;
}

/* ---------- Game overlay ---------- */
.game-overlay{
  position:fixed;inset:0;
  z-index:1400;
  background:#000;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .35s var(--ease);
}
.game-overlay.open{transform:translateY(0)}
.game-overlay-bar{
  position:absolute;top:0;left:0;right:0;
  height:var(--overlay-bar-h);
  background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 70%, transparent 100%);
  display:flex;align-items:center;
  padding:0 12px;gap:10px;
  z-index:20;
  transition:opacity .3s ease, transform .3s ease;
}
.game-overlay-bar.bar-hidden{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}
/* When overlay is in pass-through mode, allow pointer events to reach the
   iframe while keeping overlay visuals hidden. This enables touch/click
   gestures to interact with the game when `use_overlay_title === false`. */
.overlay-pass-through{
  pointer-events: none;
}
.overlay-pass-through .game-iframe{
  pointer-events: auto; /* re-enable iframe interaction */
}
.overlay-pass-through .game-overlay-bar{
  display: none !important; /* hide the top bar when passing through */
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
}
/* Ensure the invisible trigger zone does not intercept touches while passthrough is active */
.overlay-pass-through .bar-trigger,
.overlay-pass-through #bar-trigger,
.overlay-pass-through .bar-trigger *{
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
}
/* Restore iframe touch behavior explicitly for problematic webviews */
.overlay-pass-through .game-iframe,
.overlay-pass-through #game-iframe{
  pointer-events: auto !important;
  touch-action: auto !important;
  -ms-touch-action: auto !important;
}

/* Allow orientation hint and its buttons to remain interactive even when overlay is in passthrough mode */
.overlay-pass-through .orient-hint,
.overlay-pass-through .orient-hint * {
  pointer-events: auto !important;
  touch-action: auto !important;
}
.overlay-pass-through .orient-hint{
  z-index: 30; /* above iframe but below other overlay chrome */
}
/* Invisible trigger zone at top to bring bar back */
.bar-trigger{
  position:absolute;top:0;left:0;right:0;
  height:60px;
  z-index:15;
}
.overlay-back{
  display:flex;align-items:center;gap:4px;
  color:#ccc;font-size:.85rem;padding:4px 8px;border-radius:8px;
}
.overlay-back:hover{background:rgba(255,255,255,.1);color:#fff}
.overlay-title{
  flex:1;color:#fff;font-size:.9rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.overlay-fullscreen{
  color:#ccc;padding:4px;border-radius:8px;
}
.overlay-fullscreen:hover{background:rgba(255,255,255,.1);color:#fff}
.game-iframe{
  position:absolute;inset:0;
  border:none;width:100%;height:100%;background:#000;
}

/* ---------- Loading overlay ---------- */
.game-loading-overlay{
  display:none;
  position:absolute;inset:0;
  z-index:5;
  background:#000;
  align-items:center;justify-content:center;
  flex-direction:column;
}
.game-loading-overlay.show{
  display:flex;
}
.loading-content{
  text-align:center;
  width:min(320px, 80vw);
}
.loading-game-icon{
  width:72px;height:72px;
  margin:0 auto 14px;
  border-radius:16px;
  background:#222;
  overflow:hidden;
}
.loading-game-icon img{
  width:100%;height:100%;object-fit:cover;
}
.loading-game-title{
  color:#fff;
  font-size:1rem;
  font-weight:600;
  margin-bottom:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.loading-bar-track{
  width:100%;
  height:6px;
  background:rgba(255,255,255,.12);
  border-radius:3px;
  overflow:hidden;
}
.loading-bar-fill{
  width:0%;
  height:100%;
  background:var(--brand);
  border-radius:3px;
  transition:width .3s ease;
}
.loading-percent{
  color:#aaa;
  font-size:.8rem;
  margin-top:10px;
}

/* ---------- Orientation hint ---------- */
.orient-hint{
  /* collapsed by default to prevent visual remnants after refresh */
  display:flex;
  position:absolute;inset:0;
  z-index:6;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  flex-direction:column;
  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s var(--ease), max-height .25s var(--ease);
}
.orient-hint.show{
  max-height:100vh;
  opacity:1;
  pointer-events:auto;
}
.orient-hint-inner{
  text-align:center;
  padding:24px;
}
.orient-hint-phone{
  margin:0 auto 20px;
  width:60px;height:100px;
  animation:orientRotate 2.5s ease-in-out infinite;
  transform-origin:center center;
}
.orient-hint.landscape .orient-hint-phone{
  animation-name:orientToLandscape;
}
.orient-hint.portrait .orient-hint-phone{
  animation-name:orientToPortrait;
}
.orient-hint-text{
  color:#fff;
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:24px;
  line-height:1.4;
}
.orient-rotate-btn{
  display:block;
  width:220px;
  margin:0 auto 12px;
  padding:14px 24px;
  font-size:1rem;
  font-weight:700;
  border:none;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.orient-rotate-btn:hover{
  background:var(--brand-dark);
  transform:scale(1.04);
}
.orient-rotate-btn:active{
  transform:scale(.97);
}
.orient-skip-btn{
  display:block;
  width:220px;
  margin:0 auto;
  padding:10px 24px;
  font-size:.85rem;
  font-weight:500;
  border:none;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  /* animate opacity instead of color for compositing */
  transition:opacity .18s;
  opacity:.95;
}
.orient-skip-btn:hover{
  color:#fff;
  opacity:1;
}
@keyframes orientToLandscape{
  0%,15%{transform:rotate(0deg)}
  35%,65%{transform:rotate(90deg)}
  85%,100%{transform:rotate(0deg)}
}
@keyframes orientToPortrait{
  0%,15%{transform:rotate(90deg)}
  35%,65%{transform:rotate(0deg)}
  85%,100%{transform:rotate(90deg)}
}

/* ---------- Pause overlay ---------- */
.game-pause-overlay{
  display:none;
  position:absolute;inset:0;
  z-index:1100;
  pointer-events:auto;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  flex-direction:column;
}
.game-pause-overlay.show{
  display:flex;
}
.pause-content{
  text-align:center;
  color:#fff;
  animation:pauseFadeIn .3s ease;
}
.pause-icon{
  font-size:64px;
  margin-bottom:12px;
}
.pause-title{
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:6px;
}
.pause-sub{
  font-size:.95rem;
  color:#aaa;
  margin-bottom:28px;
}
.pause-resume-btn{
  display:block;
  width:220px;
  margin:0 auto 12px;
  padding:14px 24px;
  font-size:1.05rem;
  font-weight:700;
  border:none;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.pause-resume-btn:hover{
  background:var(--brand-dark);
  transform:scale(1.04);
}
.pause-quit-btn{
  display:block;
  width:220px;
  margin:0 auto;
  padding:10px 24px;
  font-size:.9rem;
  font-weight:600;
  border:2px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:transparent;
  color:#ccc;
  cursor:pointer;
  transition:background .2s, transform .15s;
}
.pause-quit-btn:hover{
  background:rgba(255,255,255,.08);
  /* apply shadow instantly on hover; avoid animating box-shadow */
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
  color:#fff;
}
@keyframes pauseFadeIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}

/* ---------- Skeleton loading ---------- */
.skeleton{
  position:relative;overflow:hidden;border-radius:var(--card-radius);
  background:var(--surface-2);
}
.skeleton::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.6) 50%,transparent 100%);
  width:40%;
  transform:translateX(-120%);
  will-change:transform;
  /* animate transform (composited) instead of background-position */
  animation:shimmer-translate 1.4s infinite linear;
}
.skeleton-card{aspect-ratio:1/1}
.grid-sentinel{width:1px;height:1px;opacity:0;pointer-events:none}
.grid-placeholder{display:grid;grid-auto-flow:row;gap:12px}
.skeleton-text{display:inline-block;border-radius:6px}
.skeleton-pulse{
  animation:pulse 1.5s infinite ease-in-out;
  background:var(--surface-2);
}
@keyframes shimmer-translate{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;bottom:24px;right:24px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,156,255,.35);
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .25s, transform .25s;
  z-index:99999; /* ensure back-to-top sits above all overlays */
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--brand-dark)}

/* ---------- Game detail interstitial ---------- */
.game-detail{
  position:fixed;inset:0;
  /* well above all page elements including inflated z-index cards */
  z-index:2000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  /* prevent visual remnants on refresh by collapsing by default */
  max-height: 0;
  overflow: hidden;
  transition:opacity .25s var(--ease), max-height .25s var(--ease);
}
.game-detail.open{opacity:1;pointer-events:auto}

.game-detail.open{max-height:100vh;}

/* Prevent touch/scroll gesture propagation when detail overlay is visible */
.game-detail,
.game-detail.open{
  touch-action: none; /* disable default touch gestures */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none; /* prevent scroll chaining */
}
.detail-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
}
.detail-card{
  position:relative;
  background:var(--surface);
  border-radius:20px;
  /* inset effective drawing area by 1px */
  padding:1px;
  overflow:hidden;
  width:340px;max-width:90vw;
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  transform:scale(.92);
  transition:transform .3s var(--ease);
}
.game-detail.open .detail-card{transform:scale(1)}
.detail-img{
  width:100%;
  aspect-ratio:4/3;
  /* display full image like game-card-img: no cropping, centered */
  object-fit:contain;
  object-position:center center;
  background:transparent;
  display:block;
  /* reduce corner radius by 1px to match inset padding */
  border-radius:calc(20px - 1px) calc(20px - 1px) 0 0;
}
.detail-body{padding:18px 20px 22px;text-align:center}
.detail-title{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.detail-tags{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  margin-bottom:16px;
}
.detail-tag{
  font-size:.75rem;font-weight:600;
  padding:3px 10px;border-radius:12px;
  background:var(--brand-light);color:var(--brand-dark);
}
.detail-play-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 36px;
  border-radius:28px;
  background:var(--brand);color:#fff;
  font-size:1rem;font-weight:700;
  box-shadow:0 4px 16px rgba(0,156,255,.3);
  transition:background .15s, transform .15s;
}
.detail-play-btn:hover{background:var(--brand-dark);transform:scale(1.04)}
.detail-play-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.detail-desc{
  font-size:.88rem;
  color:var(--text-2);
  line-height:1.55;
  margin:6px 0 12px;
  min-height:0;
  max-height:80px;
  overflow:auto;
  display:none;
}
.detail-desc:not(:empty){display:block}
.detail-close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.4);color:#fff;
  font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.detail-close:hover{background:rgba(0,0,0,.6)}

/* ---- Detail fav button ---- */
.detail-btn-row{display:flex;justify-content:center;gap:12px;align-items:center;margin-bottom:8px}
.detail-fav-wrap{display:flex;justify-content:flex-start}
.detail-fav-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 18px;border-radius:20px;border:1.5px solid rgba(255,77,109,.4);background:transparent;color:#ef4444;font-size:.84rem;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s;min-width:108px;width:108px}
.detail-fav-btn svg{stroke:#ef4444;transition:fill .15s}
.detail-fav-btn.fav-active{background:rgba(239,68,68,.1);border-color:#ef4444}
.detail-fav-btn.fav-active svg{fill:#ef4444}

/* ---- P3: Share row ---- */
.detail-share-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 6px;flex-wrap:wrap}
.detail-share-label{font-size:.7rem;font-weight:600;color:var(--text-muted);letter-spacing:.03em;flex-shrink:0}
.detail-share-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s;flex-shrink:0;text-decoration:none;padding:0}
.detail-share-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.share-tw:hover{background:rgba(0,0,0,.8);border-color:#000;color:#fff}
.share-fb:hover{background:rgba(24,119,242,.2);border-color:#1877f2;color:#1877f2}
.share-copy.copied{border-color:var(--brand,#6c63ff);color:var(--brand,#6c63ff)}

/* ---- P5: Official blog/site link ---- */
.detail-blog-row{text-align:center;margin:2px 0 8px}
.detail-blog-link{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--brand,#6c63ff);text-decoration:none;opacity:.85;transition:opacity .15s}
.detail-blog-link:hover{opacity:1;text-decoration:underline}

/* ---- Detail related games ---- */
.detail-related-wrap{padding:0 12px 10px;border-top:1px solid var(--surface-2);margin-top:8px;overflow-x:auto;scrollbar-width:none;text-align:center}
.detail-related-title{font-size:.68rem;font-weight:600;color:var(--text-muted);letter-spacing:.03em;margin-bottom:6px;padding-top:8px;text-align:center}
.detail-related-row{display:inline-flex;gap:7px;padding-bottom:2px;text-align:left}
.detail-related-wrap::-webkit-scrollbar{display:none}
.detail-related-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:48px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.detail-related-item:hover{opacity:.8}
.detail-related-item img{width:44px;height:44px;border-radius:9px;object-fit:contain;background:var(--surface-2);display:block}
.detail-related-item span{font-size:.6rem;font-weight:500;color:var(--text-muted);max-width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* ---- Favorites heart on game cards ---- */
.fav-btn{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:11;padding:0;line-height:1;flex-shrink:0}
.fav-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;pointer-events:none}
.game-card:hover .fav-btn,.game-card:focus-within .fav-btn{opacity:1}
.fav-btn.faved{opacity:1;color:#ef4444}
.fav-btn.faved svg{fill:#ef4444;stroke:#ef4444}
@media(hover:none){.fav-btn{opacity:.75}}
/* Hide card overlay fav circles when detail modal is open — avoids visual bleed */
body.detail-open .fav-btn{opacity:0!important;pointer-events:none}

/* ---- Search history dropdown ---- */
.search-history-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface,#fff);border:1.5px solid var(--surface-2,#e5e7eb);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:999;overflow:hidden}
.search-hist-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer}
.search-hist-item:hover{background:var(--surface-2,#f3f4f6)}
.search-hist-text{flex:1;font-size:.88rem;color:var(--text,#1a2332)}
.search-hist-del{color:var(--text-muted,#9ca3af);font-size:.7rem;padding:2px 6px;border-radius:4px;flex-shrink:0;line-height:1.5}
.search-hist-del:hover{background:var(--surface-2,#f3f4f6);color:var(--text,#1a2332)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrap{margin-left:0}
  .menu-btn{display:flex}
  .topbar-logo{display:block}
  .hero{padding:36px 20px 30px}
  .hero-title{font-size:1.4rem}
  .hero-card{width:72px;height:72px;border-radius:10px}
}
@media(max-width:600px){
  .game-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .game-card-info{padding:5px 6px}
  .game-card-title{font-size:.72rem}
  .hero{padding:28px 14px 22px}
  .hero-title{font-size:1.15rem}
  .hero-sub{font-size:.85rem;margin-bottom:12px}
  .hero-featured{gap:8px}
  .hero-card{width:56px;height:56px;border-radius:10px}
  .category-section{padding:12px 12px 4px}
  .section-title{font-size:1rem}
  .see-all{font-size:.75rem;padding:3px 8px}
  .search-input{padding:7px 12px 7px 36px;font-size:.85rem}
}

/* Landscape / wide: show image and body side-by-side for the detail card
   - cap card height to viewport so image can fill vertically
   - make image cover the full card height (object-fit:cover)
   - make body scrollable if content exceeds available height
*/
/* ---------- Mobile Bottom Navigation ---------- */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:800;
  height:calc(56px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bottom-nav-bg);
  color:var(--bottom-nav-text);
  border-top:1px solid var(--bottom-nav-border);
  flex-direction:row;
  align-items:stretch;
  box-shadow:var(--bottom-nav-elevation);
}
.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:none;
  border:none;
  color:var(--bottom-nav-text);
  font-size:.65rem;
  font-weight:500;
  cursor:pointer;
  padding:6px 4px 4px;
  transition:color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item:hover,.bottom-nav-item:active{color:var(--bottom-nav-text);background:rgba(255,255,255,0.04)}
.bottom-nav-item.active{color:var(--bottom-nav-text);background:rgba(255,255,255,0.06)}
.bottom-nav-item svg{flex-shrink:0}
@media(max-width:900px){
  .bottom-nav{display:flex}
  .main-wrap{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .site-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)) !important}
  .back-to-top{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}
@media (orientation: landscape) and (min-width:700px) {
  .detail-card{
    width:min(1100px,92vw);
    max-width:1100px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:0;
    /* ensure card doesn't exceed viewport height */
    /* slightly larger safe area and consistent cap for better scrolling on mobile landscape */
    max-height:calc(100vh - 64px);
    min-height:0;
  }
  .detail-img{
    flex:0 0 52%;
    width:52%;
    /* show the full image, consistent with the main grid cards */
    height:100%;
    /* prefer cover in landscape so image fills the left column; fall back to contain if needed */
    object-fit:cover !important;
    object-position:center center !important;
    background:transparent;
    display:block;
    max-height:100%;
    /* left-side image: round left corners matching inset */
    border-radius:calc(20px - 1px) 0 0 calc(20px - 1px);
  }
  .detail-body{
    flex:1 1 48%;
    padding:28px 28px 32px;
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:auto; /* allow scrolling when content is tall */
    min-height:0; /* allow flex child to shrink on small heights */
  }
  /* right-side body: round right corners matching inset */
  .detail-body{border-radius:0 calc(20px - 1px) calc(20px - 1px) 0}
  .detail-tags{justify-content:flex-start}
  .detail-btn-row{justify-content:flex-start;margin:0 0 8px;gap:12px}
  .detail-play-btn{align-self:flex-start}
  .detail-related-wrap{margin-top:auto;padding-top:12px}
  .detail-close{top:12px;right:12px}
}
/* ========== Phone Landscape Optimizations ==========
   Targets phones rotated to landscape (height ≤ 500px).
   Typical: iPhone SE landscape 375×667 → 667×375; Galaxy S landscape ~360px tall.
   Goal: reclaim vertical space so content is usable without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  /* 1. Hide bottom nav — saves 56px of precious height */
  .bottom-nav { display: none !important; }
  .main-wrap { padding-bottom: 0 !important; }
  .site-footer { padding-bottom: 0 !important; }
  .back-to-top { bottom: 16px !important; }

  /* 2. Compact topbar */
  :root { --topbar-h: 44px; }
  .topbar { height: 44px; min-height: 44px; }

  /* 3. Smaller hero — clip to a compact banner */
  .hero { padding: 12px 16px 10px; }
  .hero-title { font-size: .95rem; margin-bottom: 2px; }
  .hero-sub { font-size: .75rem; margin-bottom: 8px; }
  .hero-featured { gap: 6px; }
  .hero-card { width: 48px; height: 48px; border-radius: 8px; }

  /* 4. Compact chip filter bar */
  .tag-chips-bar { padding: 5px 12px 4px; top: 44px; }
  .tag-chips-inner { gap: 6px;margin:0 auto}
  .tag-chip { padding: 4px 10px; font-size: .72rem; }

  /* 5. More columns — better use of wide viewport */
  .game-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .category-page .game-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .category-section { padding: 8px 14px 4px; }
  .section-title { font-size: .88rem; }
  .see-all { font-size: .72rem; padding: 3px 8px; }

  /* 6. Detail card: force side-by-side even on narrow phones */
  .detail-card {
    width: min(740px, 96vw);
    max-width: 96vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    max-height: calc(100vh - 16px);
    min-height: 0;
  }
  .detail-img {
    flex: 0 0 40%;
    width: 40%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent;
    display: block;
    max-height: 100%;
    border-radius: calc(20px - 1px) 0 0 calc(20px - 1px);
    aspect-ratio: unset;
  }
  .detail-body {
    flex: 1 1 60%;
    padding: 14px 16px 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    min-height: 0;
    border-radius: 0 calc(20px - 1px) calc(20px - 1px) 0;
  }
  .detail-title { font-size: .95rem; margin-bottom: 5px; }
  .detail-play-btn { align-self: flex-start; padding: 9px 20px; font-size: .88rem; }
  .detail-tags { justify-content: flex-start; }
  .detail-close { top: 8px; right: 8px; width: 28px; height: 28px; }
  .detail-fav-wrap { display: flex; justify-content: flex-start; }
  .detail-fav-btn { font-size: .8rem; padding: 6px 14px; min-width: 96px; width: 96px; }
  .detail-btn-row { justify-content: flex-start; margin: 0 0 6px; gap: 10px; }
  /* YOU MAY ALSO LIKE — compact in phone landscape */
  .detail-related-wrap { margin-top: 6px; padding: 6px 10px 6px; }
  .detail-related-title { padding-top: 4px; margin-bottom: 4px; }
  .detail-related-item img { width: 36px; height: 36px; }
  .detail-related-item { min-width: 38px; }
}

/* ---- Pagination nav (tag pages) ---- */
.pagination-nav{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 20px 8px;flex-wrap:wrap}
.pagination-nav .page-btn{display:inline-flex;align-items:center;padding:8px 18px;border-radius:20px;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:.85rem;font-weight:600;color:var(--text,#1a2332);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pagination-nav .page-btn:hover{background:rgba(0,107,179,.08);border-color:var(--brand,#006bb3);color:var(--brand,#006bb3)}
.pagination-nav .page-btn.disabled{opacity:.4;cursor:default;pointer-events:none}
.pagination-nav .page-nums{display:flex;gap:6px}
.pagination-nav .page-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:.85rem;font-weight:600;color:var(--text,#1a2332);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pagination-nav .page-num:hover{background:rgba(0,107,179,.08);border-color:var(--brand,#006bb3);color:var(--brand,#006bb3)}
.pagination-nav .page-num.active{background:var(--brand,#006bb3);color:#fff;border-color:var(--brand,#006bb3)}
@media(prefers-color-scheme:dark){.pagination-nav .page-btn,.pagination-nav .page-num{background:var(--surface,#1e2635);border-color:rgba(255,255,255,.1);color:var(--text,#e8ecf4)}}
@media(max-width:480px){.pagination-nav{padding:16px 14px 8px;gap:6px}.pagination-nav .page-btn{padding:6px 14px}}

/* ---- Tag page intro section (below hero, above tag chips) ---- */
.tag-intro{padding:0 20px 16px;max-width:760px;margin:0 auto}
.tag-intro-desc{font-size:.95rem;line-height:1.65;color:var(--text-muted,#6b7a90);margin:0 0 6px}
.tag-intro-count{font-size:.85rem;color:var(--text-muted,#6b7a90);margin:0}
.tag-intro-count strong{color:var(--brand,#006bb3)}
@media(max-width:480px){.tag-intro{padding:0 14px 12px}.tag-intro-desc{font-size:.88rem}}

/* ---- Related tag categories section (bottom of tag pages) ---- */
.related-tags-section{padding:24px 20px 32px;border-top:1px solid var(--surface-2,#e8ecf0);margin-top:12px}
.related-tags-section h2{font-size:.85rem;font-weight:700;color:var(--text-muted,#6b7a90);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.related-tags-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.related-tags-list li a{display:inline-block;padding:6px 14px;border-radius:20px;border:1.5px solid rgba(0,0,0,.1);background:#fff;font-size:.82rem;font-weight:600;color:var(--text,#1a2332);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.related-tags-list li a:hover{background:rgba(0,107,179,.08);border-color:var(--brand,#006bb3);color:var(--brand,#006bb3)}
@media(prefers-color-scheme:dark){.related-tags-list li a{background:var(--surface,#1e2635);border-color:rgba(255,255,255,.1);color:var(--text,#e8ecf4)}}
@media(max-width:480px){.related-tags-section{padding:16px 14px 24px}}