/* GameCheats — Main Stylesheet */
/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:       #6c3ce1;
  --primary-dark:  #5429c0;
  --primary-light: #ede9fd;
  --accent:        #00c896;
  --surface:       #ffffff;
  --surface2:      #f5f4f8;
  --surface3:      #eeecf5;
  --border:        rgba(0,0,0,.10);
  --border2:       rgba(0,0,0,.18);
  --text:          #1a1825;
  --text2:         #4b4762;
  --text3:         #8c88a6;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 2px 12px rgba(0,0,0,.07);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.10);
  --tag-survival:  #dcf5e8; --tag-survival-t: #1a6636;
  --tag-vehicle:   #e8eeff; --tag-vehicle-t:  #1a2e6e;
  --tag-weapons:   #fff0e8; --tag-weapons-t:  #7a2c00;
  --tag-police:    #e8f4ff; --tag-police-t:   #0c3a6e;
  --tag-chaos:     #fff8e0; --tag-chaos-t:    #6e4400;
  --tag-misc:      #f0eef8; --tag-misc-t:     #3d3568;
}

[data-theme="dark"] {
  --primary:       #8b63f0;
  --primary-dark:  #7245e0;
  --primary-light: #2a2050;
  --accent:        #00c896;
  --surface:       #1c1a2e;
  --surface2:      #231f38;
  --surface3:      #2a2642;
  --border:        rgba(255,255,255,.09);
  --border2:       rgba(255,255,255,.16);
  --text:          #eae8f5;
  --text2:         #b0aac8;
  --text3:         #6b6585;
  --shadow:        0 2px 12px rgba(0,0,0,.3);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.4);
  --tag-survival:  #0d3320; --tag-survival-t: #5ce88e;
  --tag-vehicle:   #0a1940; --tag-vehicle-t:  #7aadff;
  --tag-weapons:   #3a1800; --tag-weapons-t:  #ffb07a;
  --tag-police:    #001f40; --tag-police-t:   #7ac4ff;
  --tag-chaos:     #2e2000; --tag-chaos-t:    #ffce70;
  --tag-misc:      #1a1830; --tag-misc-t:     #b8b0e8;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--surface2);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  transition: background .25s, color .25s;
}
img { max-width:100%; display:block; }
a { color: var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ─── Layout ─────────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.container-sm { max-width:780px; margin:0 auto; padding:0 20px; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 12px rgba(0,0,0,.07);
}
.hd-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; height: 64px;
  max-width: 1200px; margin: 0 auto;
}

/* Logo */
.hd-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.hd-logo img { height: 72px; width: auto; }
.hd-logo-text {
  font-size: 20px; font-weight: 800; color: var(--primary);
  letter-spacing: -1px; white-space: nowrap;
}

/* Search — grows to fill space */
.hd-search {
  flex: 1; max-width: 480px; margin: 0 16px;
  display: flex; align-items: center;
  background: var(--surface2); border: 1.5px solid var(--border2);
  border-radius: 28px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.hd-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,60,225,.12);
  background: var(--surface);
}
.hd-search-ico {
  position: absolute; left: 14px;
  width: 16px; height: 16px; color: var(--text3); pointer-events: none;
}
.hd-search input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 10px 10px 10px 40px; font-size: 14px; color: var(--text);
  min-width: 0;
}
.hd-search input::placeholder { color: var(--text3); }
.hd-search-btn {
  padding: 0 18px; height: 40px; margin: 4px 4px 4px 0;
  border: none; border-radius: 22px;
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter .15s;
}
.hd-search-btn:hover { filter: brightness(1.1); }

/* Right actions */
.hd-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Nav links */
.hd-nav { display: flex; align-items: center; gap: 2px; }
.hd-nav-link {
  padding: 7px 13px; border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--text2);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.hd-nav-link:hover { background: var(--surface2); color: var(--text); text-decoration: none; }

/* Theme button */
.hd-theme-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border2);
  background: var(--surface2); color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.hd-theme-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--primary); }

/* Burger button — mobile only */
.hd-burger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 38px; height: 38px; border: 1.5px solid var(--border2);
  border-radius: 10px; background: var(--surface2); cursor: pointer; padding: 8px;
}
.hd-burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--text2); transition: transform .25s, opacity .25s;
}
.hd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile drawer ──────────────────────────────────────────────────────── */
.hd-mobile-menu {
  display: none; /* shown by JS via .open */
  flex-direction: column; gap: 0;
  position: fixed; inset: 64px 0 0 0; z-index: 199;
  background: var(--surface);
  border-top: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.hd-mobile-menu.open { display: flex; transform: translateX(0); }

/* Mobile search */
.hd-m-search {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.hd-m-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--text);
}
.hd-m-search button {
  border: none; background: var(--primary); color: #fff;
  border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer;
}

/* Mobile nav links */
.hd-m-nav { display: flex; flex-direction: column; padding: 8px 0; }
.hd-m-nav a {
  padding: 15px 24px; font-size: 16px; font-weight: 500;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.hd-m-nav a:hover { background: var(--surface2); }

/* Mobile bottom bar */
.hd-m-bottom {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; margin-top: auto;
  border-top: 1px solid var(--border);
}

/* ─── Search bar (old, kept for backward compat) ─────────────────────────── */
.search-wrap { display: none; } /* hidden — replaced by .hd-search */


/* ─── Search bar ─────────────────────────────────────────────── */
.search-wrap {
  flex: 1; max-width: 420px; position: relative;
  display: flex; align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 24px;
  transition: border-color .15s, box-shadow .15s;
}
.search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,60,225,.15);
}
.search-wrap input {
  flex: 1; padding: 9px 8px 9px 40px;
  border: none; border-radius: 24px;
  background: transparent; color: var(--text);
  font-size: 14px; outline: none; min-width: 0;
}
.search-wrap .search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text3); pointer-events: none;
}
.search-results-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  max-height:360px; overflow-y:auto; z-index:200; display:none;
}
.search-results-dropdown.visible { display:block; }
.search-result-item {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  cursor:pointer; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--border);
  transition:background .1s;
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--surface2); }
.search-result-item img { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.search-result-item .sri-placeholder { width:36px; height:36px; border-radius:6px; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--primary); flex-shrink:0; }
.search-result-item .sri-name { font-weight:500; font-size:14px; }
.search-result-item .sri-meta { font-size:12px; color:var(--text3); }
.search-result-badges { display:flex; gap:4px; margin-top:2px; flex-wrap:wrap; }
.sri-badge { font-size:10px; padding:1px 6px; border-radius:10px; background:var(--surface3); color:var(--text2); }

/* ─── Theme toggle ───────────────────────────────────────────── */
.theme-toggle {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border2);
  background:var(--surface2); color:var(--text2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:background .15s;
  flex-shrink:0;
}
.theme-toggle:hover { background:var(--surface3); }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad { padding:20px; }
.card-head {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-title { font-size:15px; font-weight:600; }

/* ─── Game card grid ─────────────────────────────────────────── */
.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.game-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .15s, box-shadow .15s; cursor:pointer; text-decoration:none; color:inherit; display:block; }
.game-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; }
.game-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--surface3); }
.game-card-img-placeholder { width:100%; aspect-ratio:16/9; background:var(--primary-light); display:flex; align-items:center; justify-content:center; color:var(--primary); font-weight:700; font-size:22px; }
.game-card-body { padding:12px; }
.game-card-name { font-weight:600; font-size:15px; margin-bottom:4px; }
.game-card-meta { font-size:12px; color:var(--text3); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.game-score { display:inline-flex; align-items:center; gap:3px; font-weight:600; color:var(--accent); font-size:13px; }
.game-card-badges { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.badge { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500; background:var(--surface3); color:var(--text2); }
.badge-cheat { background:#e8f0ff; color:#1a3080; }
.badge-guide { background:#e8fff5; color:#0a5230; }
[data-theme="dark"] .badge-cheat { background:#0d1a40; color:#7aadff; }
[data-theme="dark"] .badge-guide { background:#0a2a1e; color:#5ce8a0; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; cursor:pointer;
  border:none; text-decoration:none; transition:all .15s;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); text-decoration:none; color:#fff; }
.btn-outline { background:transparent; border:1.5px solid var(--border2); color:var(--text2); }
.btn-outline:hover { background:var(--surface3); text-decoration:none; }
.btn-sm { padding:7px 14px; font-size:13px; }
.btn-icon { width:36px; height:36px; padding:0; justify-content:center; }

/* ─── Game page action buttons ───────────────────────────────── */
.game-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.game-action-btn {
  flex:1; min-width:140px; padding:14px 18px;
  border-radius:var(--radius); background:var(--surface);
  border:2px solid var(--border); color:var(--text);
  text-align:center; text-decoration:none; font-weight:600;
  font-size:14px; transition:all .15s; display:flex;
  flex-direction:column; align-items:center; gap:6px;
}
.game-action-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); text-decoration:none; }
.game-action-btn.active { border-color:var(--primary); background:var(--primary); color:#fff; }
.game-action-icon { font-size:22px; }

/* ─── Console tabs ───────────────────────────────────────────── */
.console-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.console-tab {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text2); font-size:13px; font-weight:500;
  cursor:pointer; transition:all .15s; text-decoration:none;
}
.console-tab:hover { border-color:var(--primary); color:var(--primary); text-decoration:none; }
.console-tab.active { border-color:var(--primary); background:var(--primary); color:#fff; }
.console-tab img { width:20px; height:20px; object-fit:contain; }
.console-tab .logo-ph { width:20px; height:20px; border-radius:4px; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; }

/* ─── Cheat cards ────────────────────────────────────────────── */
.cheat-section { margin-bottom:24px; }
.cheat-section-title {
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text3); margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;
}
.cheat-list { display:flex; flex-direction:column; gap:8px; }
.cheat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .15s;
}
.cheat-card:hover { border-color:var(--border2); }
.cheat-card-head {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.cheat-name { font-weight:600; font-size:15px; line-height:1.3; }
.cheat-tag {
  font-size:11px; padding:3px 10px; border-radius:20px;
  white-space:nowrap; flex-shrink:0; font-weight:600;
}
.tag-survival { background:var(--tag-survival); color:var(--tag-survival-t); }
.tag-vehicle  { background:var(--tag-vehicle);  color:var(--tag-vehicle-t);  }
.tag-weapons  { background:var(--tag-weapons);  color:var(--tag-weapons-t);  }
.tag-police   { background:var(--tag-police);   color:var(--tag-police-t);   }
.tag-chaos    { background:var(--tag-chaos);    color:var(--tag-chaos-t);    }
.tag-misc, .tag-default { background:var(--tag-misc); color:var(--tag-misc-t); }
.cheat-card-body {
  padding: 12px 16px 14px;
  background: rgba(0,0,0,.025);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
[data-theme="dark"] .cheat-card-body {
  background: rgba(255,255,255,.045);
}
.cheat-note { font-size:12px; color:var(--text3); margin-top:8px; line-height:1.5; font-style:italic; }

/* ─── Button combo display ───────────────────────────────────── */
.btn-combo {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.btn-img {
  width:32px; height:32px; border-radius:7px; object-fit:contain;
  vertical-align:middle;
}
.btn-pill {
  height:32px; min-width:32px; padding:0 8px;
  border-radius:7px; display:inline-flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; color:#fff;
  letter-spacing:.02em;
}
.btn-pill-unknown { background:#607d8b; }
.combo-plus { font-size:14px; color:var(--text3); padding:0 2px; font-weight:300; }
.combo-hold-label {
  font-size:11px; padding:3px 8px; border-radius:4px;
  background:var(--surface3); color:var(--text3); font-style:italic;
}

/* ─── PC keyboard keys ───────────────────────────────────────── */
.pc-combo { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pc-type-label { font-size:12px; color:var(--text3); margin-right:4px; font-style:italic; }
.pc-key {
  height:32px; min-width:32px; padding:0 8px;
  border-radius:6px; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600;
  font-family: 'Courier New', monospace;
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border2);
  box-shadow:0 2px 0 var(--border2);
}

/* ─── Similar games grid ─────────────────────────────────────── */
.similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.similar-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .15s,box-shadow .15s; text-decoration:none; color:inherit; display:block; }
.similar-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; }
.similar-reasons { display:flex; gap:4px; flex-wrap:wrap; padding:8px 12px 0; }
.similar-reason { font-size:10px; padding:2px 7px; border-radius:10px; background:var(--primary-light); color:var(--primary); font-weight:500; }

/* ─── Guide content ──────────────────────────────────────────── */
.guide-body { line-height:1.8; font-size:16px; color:var(--text); }
.guide-body h2 { font-size:22px; font-weight:700; margin:2em 0 .7em; color:var(--text); }
.guide-body h3 { font-size:18px; font-weight:600; margin:1.5em 0 .5em; }
.guide-body p  { margin-bottom:1em; }
.guide-body ul,
.guide-body ol { padding-left:1.5em; margin-bottom:1em; }
.guide-body li { margin-bottom:.35em; }
.guide-body img { border-radius:var(--radius); margin:1.5em 0; }
.guide-body blockquote { border-left:4px solid var(--primary); padding:.5em 1em; background:var(--primary-light); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.5em 0; }
.guide-body a { color:var(--primary); text-decoration:underline; }

/* ─── Page hero ──────────────────────────────────────────────── */
.page-hero {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:32px 0 28px;
}
.page-hero .inner { display:flex; gap:24px; align-items:flex-start; max-width:1100px; margin:0 auto; padding:0 20px; }
.game-cover { width:120px; height:120px; border-radius:var(--radius); object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.game-cover-placeholder { width:120px; height:120px; border-radius:var(--radius); background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:30px; color:var(--primary); flex-shrink:0; border:1px solid var(--border); }
.page-hero h1 { font-size:28px; font-weight:800; line-height:1.2; margin-bottom:6px; }
.page-hero .hero-meta { font-size:13px; color:var(--text3); display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.page-hero .hero-desc { font-size:15px; color:var(--text2); max-width:600px; line-height:1.6; margin-top:8px; }
.breadcrumb { font-size:13px; color:var(--text3); margin-bottom:12px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.breadcrumb a { color:var(--text3); text-decoration:none; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb span { color:var(--border2); }

/* ─── Share buttons ──────────────────────────────────────────── */
.share-buttons {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:16px 0; border-top:1px solid var(--border); margin-top:24px;
}
.share-label { font-size:13px; color:var(--text3); font-weight:500; }
.share-btn {
  padding:6px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500;
  border:1px solid var(--border2); background:var(--surface);
  color:var(--text2); cursor:pointer; text-decoration:none; transition:all .15s;
  display:inline-flex; align-items:center; gap:6px;
}
.share-btn:hover { border-color:var(--primary); color:var(--primary); text-decoration:none; }
.share-fb:hover { border-color:#1877f2; color:#1877f2; }
.share-tw:hover { border-color:#000; color:#000; }
.share-wa:hover { border-color:#25d366; color:#25d366; }
.share-tg:hover { border-color:#0088cc; color:#0088cc; }
.share-rd:hover { border-color:#ff4500; color:#ff4500; }

/* ─── Affiliate banner ───────────────────────────────────────── */
.affiliate-bar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; margin:20px 0; }
.affiliate-inline { display:flex; align-items:center; gap:12px; }
.affiliate-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; }

/* ─── Sidebar ad slot ────────────────────────────────────────── */
.ad-slot { background:var(--surface3); border:1px dashed var(--border2); border-radius:var(--radius); padding:20px; text-align:center; color:var(--text3); font-size:12px; margin:16px 0; min-height:100px; display:flex; align-items:center; justify-content:center; }

/* ─── Footer ─────────────────────────────────────────────────── */

[data-theme="dark"] 

body > 






/* ─── Sections ───────────────────────────────────────────────── */
.section { padding:32px 0; }
.section-title { font-size:20px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* ─── SEO Score Meter ────────────────────────────────────────── */
.seo-score-bar { height:6px; border-radius:3px; background:var(--surface3); overflow:hidden; margin:6px 0; }
.seo-score-fill { height:100%; border-radius:3px; transition:width .4s, background .4s; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width:768px) {
  .site-header .inner { flex-wrap:wrap; }
  /* Header responsive */
  .hd-search { display: none; }       /* hide desktop search on mobile */
  .hd-nav    { display: none; }       /* hide desktop nav on mobile */
  .hd-theme-btn:not(.hd-m-bottom .hd-theme-btn) { display: none; } /* hide desktop theme on mobile */
  .hd-burger { display: flex; }       /* show burger */
  .hd-inner  { padding: 0 16px; }
  .search-wrap { display: none; }
  .page-hero .inner { flex-direction:column; }
  .game-cover, .game-cover-placeholder { width:80px; height:80px; }
  .page-hero h1 { font-size:22px; }
  .games-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .game-actions { flex-direction:column; }
  .game-action-btn { min-width:unset; }
  .site-nav { display:none; }
}

/* ── Console cards (game page cheat section) ─────────────────────────────── */
.console-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.console-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  cursor: pointer;
}
.console-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--text);
}
.console-card-active {
  border-color: var(--primary);
  background: var(--primary-light, rgba(99,102,241,.06));
}
.console-card-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.console-card-name {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  line-height: 1.2;
}
.console-card-count {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}
.console-solo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.console-solo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
}
.console-solo-link:hover { color: var(--primary); text-decoration: none; }
.console-cheat-count {
  font-size: 12px;
  color: var(--text3);
  font-weight: 400;
  margin-left: 4px;
}
.console-full-link { margin-left: auto; text-decoration: none; }

/* ── AI translate loading state ─────────────────────────────────────────── */
.a-btn-ai.is-loading {
  opacity: .75;
  cursor: not-allowed;
  pointer-events: none;
}
.a-btn-ai.is-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Header search submit button */
.header-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; border-radius: 20px;
  background: var(--primary); color: #fff; cursor: pointer;
  flex-shrink: 0; margin: 3px; transition: filter .15s;
}
.header-search-btn:hover { filter: brightness(1.12); }

/* ── Combo direction hint ──────────────────────────────────────────────────── */
.combo-direction-hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  padding: 6px 14px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text3);
  letter-spacing: .02em;
}
[data-theme="dark"] .combo-direction-hint { background: rgba(255,255,255,.06); }

/* ── Language switcher ─────────────────────────────────────────────────────── */
/* Circle button showing 2-letter code */
.lang-circle-btn {
  display: flex; align-items: center; gap: 3px;
  height: 38px; padding: 0 8px;
  border-radius: 20px;
  border: 1.5px solid var(--border2);
  background: var(--surface2); color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  justify-content: center;
}
.lang-circle-btn:hover { background: var(--surface); border-color: var(--primary); }
/* Flag image inside button: display as circle */
.lang-circle-btn img {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border2);
  flex-shrink: 0;
}
.lang-chevron { opacity: .4; flex-shrink: 0; }

/* Dropdown panel */
.lang-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 152px;
  z-index: 9999;
  overflow: hidden;
  padding: 5px;
}
.lang-dropdown.visible, .gc-lang-sw-dd.visible { display: block; }

/* Each language option row */
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  text-decoration: none; color: var(--text);
  font-size: 14px; transition: background .12s;
}
.lang-opt:hover { background: var(--surface2); text-decoration: none; }
.lang-opt-active {
  background: var(--primary-light, rgba(108,60,225,.08));
  color: var(--primary); font-weight: 600;
}
.lang-opt-name { flex: 1; }
.lang-check { flex-shrink: 0; color: var(--primary); }

/* ── PC How-to guide box ───────────────────────────────────────────────────── */
.pc-howto {
  margin-bottom: 20px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}
.pc-howto-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--primary);
  margin-bottom: 12px;
}
.pc-howto-steps {
  margin: 0 0 10px; padding-left: 20px;
  display: flex; flex-direction: column; gap: 5px;
}
.pc-howto-steps li { font-size: 13px; color: var(--text2); line-height: 1.5; }
.pc-howto-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--text3); font-style: italic;
  padding-top: 8px; border-top: 1px solid var(--border);
}

/* ── Direction banner (console cheats) ────────────────────────────────────── */
.combo-direction-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 20px;
  background: linear-gradient(90deg, rgba(108,60,225,.1) 0%, rgba(108,60,225,.04) 100%);
  border: 1.5px solid rgba(108,60,225,.3);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}
.cdb-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cdb-text { flex: 1; min-width: 0; }
.cdb-label { display: block; font-weight: 800; font-size: 15px; color: var(--primary); }
.cdb-sub   { display: block; font-size: 12px; color: var(--text3); margin-top: 2px; }
.cdb-demo  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cdb-key   { display: flex; align-items: center; justify-content: center;
             width: 28px; height: 28px; border-radius: 6px;
             background: var(--surface); border: 2px solid var(--border2);
             font-size: 12px; font-weight: 700; color: var(--text); box-shadow: 0 2px 0 var(--border2); }
.cdb-arr   { font-size: 14px; color: var(--primary); font-weight: 700; }

/* ── Tag filter bar ────────────────────────────────────────────────────────── */
.tag-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tfb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--border2);
  background: var(--surface); color: var(--text2);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tfb-btn:hover  { background: color-mix(in srgb, var(--tag-c, var(--primary)) 8%, transparent); }
.tfb-active     { background: var(--tag-c, var(--primary)) !important; color: #fff !important; border-color: var(--tag-c, var(--primary)) !important; font-weight: 700; }
.tfb-active:hover { filter: brightness(1.1); }
.tfb-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.25); color: inherit;
}
.tfb-active .tfb-count { background: rgba(255,255,255,.3); }
.tfb-btn:not(.tfb-active) .tfb-count { background: var(--surface2); color: var(--text3); }

/* ── Category badges (game hero) ───────────────────────────────────────────── */
.hero-cat-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
  font-size: 12px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .12s;
}
.hero-cat-badge:hover { background: rgba(255,255,255,.25); text-decoration: none; color: #fff; }

/* ── Multi-category badges (search results, game cards) ───────────────────── */
.game-cat-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text3); font-size: 11px; font-weight: 500;
}

/* ── Game category badges (game page hero) ────────────────────────────────── */
.gcat-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  text-decoration: none; letter-spacing: .02em;
  transition: filter .15s, transform .1s;
  white-space: nowrap;
}
.gcat-badge:hover {
  filter: brightness(.9);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── PC combo key separator (space, not +) ────────────────────────────────── */
.pc-key-sep { display: inline-block; width: 6px; }

/* ── PC combo: "Type: PHRASE" layout ─────────────────────────────────────── */
.pc-combo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pc-type-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.pc-phrase {
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text);
  text-transform: uppercase;
  user-select: all;
}

/* ── Homepage top-rated grid ─────────────────────────────────────────────── */
.hp-top-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .hp-top-grid { grid-template-columns: 1fr; }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
/* Sticky footer setup */
html { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.site-footer {
  flex-shrink: 0;
  background: var(--surface2, #f8f9fb);
  border-top: 1px solid var(--border);
  padding: 48px 0 0;
  margin-top: auto;
}
[data-theme="dark"] .site-footer {
  background: #14141e;
}

/* Inner layout */
.ft-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 640px) {
  .ft-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Brand column */
.ft-logo-link { text-decoration: none; display: inline-block; margin-bottom: 12px; }
.ft-logo-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.ft-logo-link:hover .ft-logo-text { color: var(--primary); }
.ft-tagline {
  font-size: 13px;
  color: var(--text3);
  line-height: 1.7;
  max-width: 300px;
  margin: 0;
}

/* Navigation column */
.ft-nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 16px;
}
.ft-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-nav-list a {
  font-size: 14px;
  color: var(--text2);
  text-decoration: none;
  transition: color .15s;
}
.ft-nav-list a:hover { color: var(--primary); }

/* Bottom bar */
.ft-bottom {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  max-width: 100%;
}