/*
Theme Name:  Top Earning Games
Theme URI:   https://casinoapks.pk
Author:      Casino APKs Team
Description: Top Earning Games — Pakistan real-money gaming. PHP 8.0+, Mobile-first, PWA, SEO/AEO. Fixed: no duplicate FAQPage schema, single header logo, deferred JS, real game data.
Version:     11.0.0
Requires PHP: 8.3
Text Domain: casinoapks
*/

/* ── PERFORMANCE: Critical above-fold CSS ── */
/* Non-critical CSS is loaded normally; JS is deferred via wp_script_add_data */
/* For best performance: enable Cloudflare, set PHP 8.0+, use WP Super Cache */



/* ════════════════════════════════════════════
   §0  DESIGN TOKENS — "Casino Night" palette
   Deep obsidian bg · Neon green primary · Gold accent
════════════════════════════════════════════ */
:root {
  /* ─ Brand greens ─ */
  --g:       #00E676;
  --g-d:     #00C853;
  --g-l:     #69F0AE;
  --g-glow:  rgba(0,230,118,.22);
  --g-glow2: rgba(0,230,118,.08);

  /* ─ Gold highlights ─ */
  --gold:       #FFD740;
  --gold-d:     #FFC400;
  --gold-glow:  rgba(255,215,64,.22);

  /* ─ Status colours ─ */
  --red:    #FF5252;
  --blue:   #448AFF;
  --purple: #E040FB;
  --teal:   #1DE9B6;

  /* ─ Background layers (deep obsidian) ─ */
  --bg0: #04060B;   /* page canvas          */
  --bg1: #080B12;   /* sections / sidebar   */
  --bg2: #0C1018;   /* panels               */
  --bg3: #111620;   /* cards                */
  --bg4: #171E2C;   /* elevated cards       */
  --glass:   rgba(255,255,255,.03);
  --glass-b: rgba(255,255,255,.07);

  /* ─ Typography ─ */
  --text:  #EDF1FF;
  --text2: #c2c9df;
  --muted: #dee8ff;
  --faint: #cfcfcf;
  --ff: 'Nunito','Segoe UI',sans-serif;

  /* ─ Borders ─ */
  --bdr:      rgba(255,255,255,.07);
  --bdr-h:    rgba(255,255,255,.12);
  --bdr-g:    rgba(0,230,118,.3);
  --bdr-gold: rgba(255,215,64,.3);

  /* ─ Payment brand ─ */
  --jc: #00A651;
  --ep: #4CAF50;

  /* ─ Layout ─ */
  --sb-w:  252px;
  --top-h:  60px;
  --bot-h:  64px;

  /* ─ Spacing scale ─ */
  --s1:  6px;  --s2: 10px;  --s3: 16px;
  --s4: 24px;  --s5: 32px;  --s6: 48px;

  /* ─ Radii ─ */
  --r1: 6px;  --r2: 12px;  --r3: 18px;  --r4: 28px;

  /* ─ Shadows ─ */
  --sh1: 0 2px 10px rgba(0,0,0,.55);
  --sh2: 0 8px 28px rgba(0,0,0,.65);
  --sh3: 0 16px 52px rgba(0,0,0,.72);

  --ease: .18s ease;

  /* ─ Misc ─ */
  --gold-shimmer: linear-gradient(90deg,#FFD740 0%,#FFB300 50%,#FFD740 100%);
}

/* ════════════════════════════════════════════
   §1  RESET
════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg0);color:var(--text);font-family:var(--ff);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--g-l);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--g)}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.25;color:var(--text)}
p{margin-bottom:.85rem}p:last-child{margin-bottom:0}
ul,ol{list-style:none;padding:0;margin:0}
button,input,textarea,select{font-family:var(--ff);font-size:inherit}
button{cursor:pointer;border:none;background:none}
.mi{font-family:'Material Icons';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;word-wrap:normal;direction:ltr;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-font-smoothing:antialiased;font-size:20px}
.mi-xs{font-size:14px}.mi-sm{font-size:16px}.mi-lg{font-size:24px}.mi-xl{font-size:36px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ════════════════════════════════════════════
   §2  LAYOUT SHELL
════════════════════════════════════════════ */
#topbar{
  position:fixed;top:0;left:0;right:0;height:var(--top-h);
  background:rgba(4,6,11,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;
  background-clip:padding-box;
  background:
    linear-gradient(rgba(4,6,11,.97),rgba(4,6,11,.97)) padding-box,
    linear-gradient(90deg,rgba(0,230,118,.35) 0%,rgba(0,230,118,.05) 35%,transparent 70%) border-box;
  border-bottom:1px solid transparent;
  display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);z-index:1000;
}
#sidebar{
  position:fixed;top:var(--top-h);left:0;width:var(--sb-w);
  height:calc(100vh - var(--top-h));background:var(--bg1);
  border-right:1px solid var(--bdr);overflow-y:auto;overflow-x:hidden;
  z-index:900;padding:var(--s2) 0 var(--s6);
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent;
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
#sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.7)}
#sidebar::-webkit-scrollbar{width:3px}
#sidebar::-webkit-scrollbar-thumb{background:var(--faint);border-radius:3px}
#sb-overlay{display:none;position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
#sb-overlay.show{display:block}
#wrap{display:flex;flex-direction:column;min-height:100vh}
#main{margin-top:var(--top-h);flex:1;padding:var(--s3)}
footer#site-footer{
  background:var(--bg1);
  border-top:1px solid transparent;
  background:
    linear-gradient(var(--bg1),var(--bg1)) padding-box,
    linear-gradient(90deg,rgba(0,230,118,.3) 0%,transparent 40%) border-box;
  border-top:1px solid transparent;
  padding:var(--s5) var(--s3) calc(var(--s5) + var(--bot-h));
}
@media(min-width:1024px){
  #sidebar{transform:translateX(0);box-shadow:none}
  #main{margin-left:var(--sb-w)}
  footer#site-footer{margin-left:var(--sb-w);padding-bottom:var(--s5)}
  .tb-hamburger{display:none!important}
  .sb-close-btn{display:none!important}
  /* Restore logo width to align with sidebar on desktop */
  .tb-logo{min-width:calc(var(--sb-w) - var(--s3))}
  /* Restore CTA text on desktop */
  .tb-cta{padding:8px 16px;border-radius:var(--r4);width:auto;height:auto}
  .tb-cta span:not(.mi){display:inline}
  .tb-search{display:block}
}

/* ════════════════════════════════════════════
   §3  TOPBAR
════════════════════════════════════════════ */
.tb-hamburger{width:38px;height:38px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--text);transition:background var(--ease);flex-shrink:0}
.tb-hamburger:hover{background:var(--glass-b)}
.tb-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.tb-logo-badge{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--g),var(--g-d));display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.15)}
.tb-logo-badge .mi{color:#000;font-size:19px}
.tb-logo-name{font-size:17px;font-weight:900;color:var(--text);letter-spacing:-.3px}
.tb-logo-name em{color:var(--g);font-style:normal}
.tb-search{flex:1;max-width:440px;position:relative}
.tb-search input{width:100%;background:var(--glass-b);border:1px solid var(--bdr);border-radius:var(--r4);padding:8px 14px 8px 38px;color:var(--text);font-size:13px;outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
.tb-search input::placeholder{color:var(--muted)}
.tb-search input:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow)}
.tb-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:17px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.tb-cta{background:linear-gradient(135deg,var(--g),var(--g-d));color:#000;padding:8px 14px;border-radius:var(--r4);font-size:12px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;box-shadow:0 2px 16px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.2);transition:all var(--ease);text-decoration:none;flex-shrink:0}
.tb-cta:hover{transform:translateY(-1px);box-shadow:0 4px 22px var(--g-glow);color:#000}
.tb-cta .mi{font-size:15px}

/* ════════════════════════════════════════════
   §4  SIDEBAR NAV
════════════════════════════════════════════ */
.sb-head{display:flex;align-items:center;gap:9px;padding:var(--s3);border-bottom:1px solid var(--bdr);margin-bottom:var(--s2)}
.sb-head-name{font-size:14px;font-weight:900;color:var(--text)}
.sb-head-name em{color:var(--g);font-style:normal}
.sb-close-btn{margin-left:auto;width:28px;height:28px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all var(--ease)}
.sb-close-btn:hover{background:var(--glass-b);color:var(--text)}
.sb-section-lbl{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--faint);padding:var(--s4) var(--s3) var(--s1)}
.sb-div{height:1px;background:var(--bdr);margin:var(--s1) var(--s2)}
.sb-link{display:flex;align-items:center;gap:12px;padding:11px var(--s3);color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:all var(--ease);width:100%;text-align:left}
.sb-link:hover{color:var(--text);background:var(--glass)}
.sb-link.active{color:#000;background:linear-gradient(90deg,var(--g),var(--g-d));border-radius:var(--r2);margin:2px var(--s2);width:calc(100% - 16px);padding:11px 14px;box-shadow:0 2px 18px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.2);font-weight:800}
.sb-link.active:hover{color:#000}
.sb-link-ic{font-size:20px;flex-shrink:0;width:22px;display:flex;align-items:center}
.sb-badge{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--glass-b);color:var(--muted)}
.sb-link.active .sb-badge{background:rgba(0,0,0,.2);color:#000}

/* ════════════════════════════════════════════
   §5  BREADCRUMB
════════════════════════════════════════════ */
.gv-bc{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:var(--s3);padding:8px 12px;background:var(--bg2);border-radius:var(--r2);border:1px solid var(--bdr)}
.gv-bc a{color:var(--muted)}.gv-bc a:hover{color:var(--g-l)}
.bc-sep{color:var(--faint);margin:0 1px}
.bc-cur{color:var(--g);font-weight:700}

/* ════════════════════════════════════════════
   §6  BUTTONS
════════════════════════════════════════════ */

/* ── Big neomorphic download ── */
.btn-dl{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:16px;border-radius:16px;
  background:linear-gradient(145deg,#26FFA6,#00C853);color:#000;
  font-size:16px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:all .12s ease;
  box-shadow:
    6px 6px 20px rgba(0,0,0,.7),
    -2px -2px 8px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.2);
  position:relative;overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.btn-dl::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 55%);pointer-events:none}
.btn-dl:hover{
  transform:translateY(-2px);
  box-shadow:8px 10px 26px rgba(0,0,0,.75),-2px -2px 8px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.3);
  color:#000;
}
.btn-dl:active{
  transform:translateY(2px) scale(.98);
  box-shadow:2px 2px 6px rgba(0,0,0,.7),inset 0 4px 8px rgba(0,0,0,.45);
  color:#000;
}
.btn-dl .mi{font-size:22px}

/* ── Card compact download ── */
.btn-dl-sm{
  display:inline-flex;align-items:center;gap:4px;
  height:34px;padding:0 12px;border-radius:10px;
  background:linear-gradient(145deg,#26FFA6,#00C853);color:#000;
  font-size:11px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all .1s ease;
  box-shadow:3px 3px 9px rgba(0,0,0,.55),-1px -1px 4px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-dl-sm:hover{transform:translateY(-1px);color:#000;box-shadow:4px 5px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-dl-sm:active{transform:scale(.94);color:#000;box-shadow:1px 1px 4px rgba(0,0,0,.6),inset 0 3px 6px rgba(0,0,0,.4)}
.btn-dl-sm .mi{font-size:14px}

/* ── Ghost / outline ── */
.btn-ghost{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:10px;background:var(--glass);border:1px solid var(--bdr);color:var(--muted);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all var(--ease)}
.btn-ghost:hover{color:var(--text);border-color:var(--bdr-h);background:var(--glass-b)}
.btn-ghost .mi{font-size:16px}

/* ── Table CTA ── */
.btn-tbl{display:inline-flex;align-items:center;gap:3px;background:var(--g);color:#000;padding:6px 13px;border-radius:20px;font-size:11px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:0 2px 10px var(--g-glow);transition:all var(--ease)}
.btn-tbl:hover{background:var(--g-d);color:#000;transform:translateY(-1px)}
.btn-tbl .mi{font-size:14px}

/* ════════════════════════════════════════════
   §7  SECTION HEADERS
════════════════════════════════════════════ */
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);gap:var(--s2)}
.sec-hd h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:7px}
.sec-hd h2 .mi{font-size:20px}
.see-all{font-size:11px;font-weight:800;color:var(--g);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:2px;white-space:nowrap}
.see-all:hover{color:var(--g-l)}
.sec-gap{margin-bottom:var(--s5)}

/* SEO-targeted H2/H3 with left-border accent */
.content-h2{
  font-size:1.1rem;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:8px;
  border-left:3px solid var(--g);padding:10px 12px;
  background:rgba(0,230,118,.04);border-radius:0 var(--r1) var(--r1) 0;
  margin-bottom:var(--s3);
}
.content-h2 .mi{color:var(--g)}
.content-h3{
  font-size:.95rem;font-weight:700;color:var(--text2);
  display:flex;align-items:center;gap:7px;
  border-left:2px solid var(--gold);padding:7px 10px;
  background:rgba(255,215,64,.03);border-radius:0 var(--r1) var(--r1) 0;
  margin:var(--s3) 0 var(--s2);
}
.content-h3 .mi{color:var(--gold);font-size:17px}

/* ════════════════════════════════════════════
   §8  BADGES + FRESHNESS
════════════════════════════════════════════ */
@keyframes freshPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,230,118,.3)}50%{box-shadow:0 0 0 5px rgba(0,230,118,0)}}
.freshness{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--g);background:rgba(0,230,118,.07);border:1px solid rgba(0,230,118,.22);border-radius:20px;padding:3px 10px;margin-bottom:var(--s2);animation:freshPulse 3s ease infinite}
.freshness .mi{font-size:14px}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.5px;text-transform:uppercase}
.badge-hot  {background:var(--red);  color:#fff}
.badge-new  {background:var(--blue); color:#fff}
.badge-top  {background:var(--gold); color:#000}
.badge-free {background:var(--g);    color:#000}
.badge-safe {background:rgba(0,230,118,.1);color:var(--g);border:1px solid rgba(0,230,118,.3);box-shadow:0 0 8px rgba(0,230,118,.1)}
.badge-18   {background:rgba(255,82,82,.1);color:var(--red);border:1px solid rgba(255,82,82,.3)}
.badge-virus{background:rgba(0,230,118,.1);color:var(--g);border:1px solid rgba(0,230,118,.3)}
.trust-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s2)}

/* ════════════════════════════════════════════
   §9  SECURITY SCAN ANIMATION
════════════════════════════════════════════ */
@keyframes scan{0%{top:0;opacity:.85}100%{top:100%;opacity:0}}
.sec-scan{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.28);border-radius:var(--r2);padding:9px 14px;width:100%;margin-bottom:var(--s3);box-shadow:0 0 18px rgba(0,230,118,.08),inset 0 1px 0 rgba(0,230,118,.1)}
.sec-scan::after{content:'';position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(0,230,118,.9),transparent);animation:scan 2.2s linear infinite;pointer-events:none}
.sec-scan .mi{color:var(--g);font-size:24px;flex-shrink:0}
.sec-scan-txt{font-size:12px;font-weight:800;color:var(--g)}
.sec-scan-sub{font-size:10px;color:var(--muted);margin-top:1px}

/* ════════════════════════════════════════════
   §10  FEATURED BANNER
════════════════════════════════════════════ */
.feat-banner{background:var(--bg2);border:1px solid var(--bdr);border-top:2px solid var(--g);border-radius:var(--r3);overflow:hidden;margin-bottom:var(--s5);box-shadow:0 0 24px rgba(0,230,118,.05)}
.feat-bar{display:flex;align-items:center;justify-content:space-between;padding:11px var(--s3);background:linear-gradient(90deg,rgba(0,230,118,.12),rgba(0,230,118,.03));border-bottom:1px solid var(--bdr)}
.feat-bar-l{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text)}
.feat-bar-l .mi{color:var(--g);font-size:18px}
.feat-bar-sub{font-size:11px;color:var(--muted);font-weight:400}
.feat-bar-r{font-size:11px;font-weight:800;color:var(--g);text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:2px}
.feat-bar-r:hover{color:var(--g-l)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.feat-item{position:relative;overflow:hidden;border-right:1px solid var(--bdr)}
.feat-item:last-child{border-right:none}
.feat-ss{aspect-ratio:16/9;overflow:hidden;background:var(--bg3);cursor:pointer}
.feat-ss img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.feat-item:hover .feat-ss img{transform:scale(1.05)}
.feat-ss .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem}
.feat-foot{display:flex;align-items:center;justify-content:space-between;padding:10px var(--s2);gap:8px;background:var(--bg2);border-top:1px solid var(--bdr)}
.feat-foot-meta{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.feat-ic{width:30px;height:30px;border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--bdr)}
.feat-ic img{width:100%;height:100%;object-fit:cover}
.feat-title{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.feat-rating{font-size:10px;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:2px}
.feat-rating .mi{font-size:12px}

/* ════════════════════════════════════════════
   §11  CATEGORY PILLS
════════════════════════════════════════════ */
@keyframes pillShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
.cat-pills{display:flex;gap:6px;overflow-x:auto;margin-bottom:var(--s4);padding-bottom:3px;scrollbar-width:none;-ms-overflow-style:none}
.cat-pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--r4);font-size:12px;font-weight:700;background:var(--bg2);border:1px solid var(--bdr);color:var(--muted);cursor:pointer;transition:all var(--ease);text-decoration:none;white-space:nowrap;flex-shrink:0}
.pill:hover{border-color:var(--g);color:var(--g)}
.pill.active{background:linear-gradient(135deg,var(--g) 0%,var(--g-d) 50%,var(--g) 100%);background-size:200% auto;animation:pillShimmer 3s linear infinite;border-color:var(--g);color:#000;font-weight:800;box-shadow:0 2px 14px var(--g-glow)}
.pill .mi{font-size:15px}

/* ════════════════════════════════════════════
   §12  GAME CARD  ← CORE COMPONENT
════════════════════════════════════════════ */
.game-card{
  background:linear-gradient(160deg,var(--bg3) 0%,var(--bg2) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r3);overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
  contain:layout style paint;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  will-change:transform;
}
/* Gloss overlay */
.game-card::before{content:'';position:absolute;inset:0;border-radius:var(--r3);background:linear-gradient(160deg,rgba(255,255,255,.025) 0%,transparent 60%);pointer-events:none;z-index:0}
.game-card>*{position:relative;z-index:1}
.game-card:hover{transform:translateY(-4px);border-color:rgba(0,230,118,.35);box-shadow:0 0 0 1px rgba(0,230,118,.18),0 10px 34px rgba(0,0,0,.65),0 2px 0 rgba(0,230,118,.1) inset}

/* Screenshot */
.gc-ss{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg3)}
.gc-ss img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.game-card:hover .gc-ss img{transform:scale(1.05)}
.gc-ss .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.2rem}
.gc-ss-badge{position:absolute;top:8px;left:8px;z-index:2}
.gc-ss-flash{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 0 12px var(--g-glow)}
.gc-ss-flash .mi{font-size:13px;color:#000}

/* Category strip */
.gc-cat{padding:7px var(--s3);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:6px;background:rgba(255,255,255,.015)}
.gc-cat-lbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;display:flex;align-items:center;gap:4px}
.gc-cat-lbl .mi{font-size:14px}
/* "Verified" — replaces old "Trusteit" */
.gc-verified{font-size:10px;color:var(--g);font-weight:800;display:inline-flex;align-items:center;gap:2px}
.gc-verified .mi{font-size:13px}

/* Body */
.gc-body{padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.gc-meta-row{display:flex;align-items:flex-start;gap:10px}
.gc-icon{width:40px;height:40px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--bdr)}
.gc-icon img{width:100%;height:100%;object-fit:cover}
.gc-info{flex:1;min-width:0}
.gc-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);margin-bottom:2px}
.gc-name a{color:var(--text)}.gc-name a:hover{color:var(--g)}
.gc-rating{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--gold);font-weight:800}
.gc-rating .mi{font-size:13px}
.gc-dl-count{color:var(--muted);font-weight:400;font-size:10px}
.gc-excerpt{font-size:12px;color:rgba(154,163,191,.9);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Stats — "Cashout" label (not "Cahut") */
.gc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;background:rgba(255,255,255,.04);border-radius:var(--r2);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.gc-stat{text-align:center;padding:8px 4px;position:relative;border-right:1px solid rgba(255,255,255,.08)}
.gc-stat:last-child{border-right:none}
.gc-stat-lbl{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:rgba(160,170,200,.75);margin-bottom:3px;font-weight:600}
.gc-stat-val{font-size:12px;font-weight:900;color:#EDF1FF}

/* Payment logos */
.gc-pays{display:flex;gap:5px;flex-wrap:wrap}
.pay-jc,.pay-ep{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 9px 4px 5px;border-radius:7px;border:1px solid;line-height:1}
.pay-jc{color:var(--jc);border-color:rgba(0,166,81,.3);background:rgba(0,166,81,.07)}
.pay-ep{color:var(--ep);border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.07)}
.pay-jc img,.pay-ep img{border-radius:4px;flex-shrink:0}

/* Bonus strip */
.gc-bonus{font-size:11px;color:rgba(154,163,191,.95);background:rgba(0,230,118,.08);border-left:2px solid var(--g);padding:5px 9px;border-radius:0 5px 5px 0;display:flex;align-items:center;gap:5px}
.gc-bonus .mi{font-size:14px;color:var(--g);flex-shrink:0}

/* Card footer — CSS Grid (zero overflow ever) */
.gc-foot{padding:var(--s1) var(--s3) var(--s2);border-top:1px solid var(--bdr);background:rgba(255,255,255,.015);display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}
.gc-foot .btn-ghost,.gc-foot .btn-dl-sm{width:100%;justify-content:center}

/* ════════════════════════════════════════════
   §13  GRIDS
════════════════════════════════════════════ */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);contain:layout style}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);contain:layout style}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3);contain:layout style}

/* ════════════════════════════════════════════
   §14  LIST VIEW
════════════════════════════════════════════ */
.list-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);overflow:hidden}
.list-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--bdr);transition:background var(--ease)}
.list-item:last-child{border-bottom:none}
.list-item:hover{background:var(--glass)}
.li-ic{width:52px;height:52px;border-radius:12px;overflow:hidden;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--bdr);flex-shrink:0}
.li-ic img{width:100%;height:100%;object-fit:cover}
.li-info{min-width:0}
.li-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:rgba(154,163,191,.85);flex-wrap:wrap}
.li-stars{color:var(--gold);font-weight:700;display:flex;align-items:center;gap:2px}
.li-stars .mi{font-size:13px}
.li-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
/* "Verified" replaces "Trusteit" */
.li-verified{font-size:10px;color:var(--g);font-weight:800;display:flex;align-items:center;gap:2px}
.li-verified .mi{font-size:13px}

/* ════════════════════════════════════════════
   §15  COMPARISON TABLE
   Columns: Rank · App · Cashout Speed · Min Deposit · Bonus Code · Download
════════════════════════════════════════════ */
.cmp-outer{overflow-x:auto;border-radius:var(--r3);border:1px solid var(--bdr);-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;min-width:560px;font-size:13px;background:var(--bg2)}
.cmp-table thead tr{background:linear-gradient(90deg,rgba(0,230,118,.1),rgba(0,230,118,.03));border-bottom:1px solid var(--bdr)}
.cmp-table th{padding:12px 14px;text-align:left;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g);font-weight:800;white-space:nowrap}
.cmp-table td{padding:11px 14px;border-bottom:1px solid var(--bdr);color:var(--text2);vertical-align:middle}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.cmp-table tbody tr:first-child td{background:linear-gradient(90deg,rgba(255,215,64,.05),transparent)}
.cmp-table tr:hover td{background:var(--glass)}
.cmp-rank{font-size:1.1rem;font-weight:900;color:var(--faint);width:36px;text-align:center}
.cmp-r1{color:var(--gold);text-shadow:0 0 14px var(--gold-glow)}
.cmp-r2{color:#9E9E9E;text-shadow:0 0 8px rgba(158,158,158,.4)}
.cmp-r3{color:#FF8F00;text-shadow:0 0 8px rgba(255,143,0,.4)}
.cmp-app{display:flex;align-items:center;gap:9px}
.cmp-app-ic{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--bdr)}
.cmp-app-ic img{width:100%;height:100%;object-fit:cover}
.cmp-app-name{font-weight:800;color:var(--text);font-size:13px}
.cmp-app-sub{font-size:10px;color:rgba(154,163,191,.8);margin-top:1px}
/* Cashout speed colour coding */
.cmp-speed-fast{font-weight:800;color:var(--g)!important}
.cmp-speed-med{font-weight:700;color:var(--gold)!important}
.cmp-speed{font-weight:700;color:var(--g)}
.cmp-bonus{font-weight:700;color:var(--gold)}

/* Copyable bonus code */
.cmp-code{display:inline-flex;align-items:center;gap:0;border-radius:var(--r1);overflow:hidden;border:1px dashed rgba(255,215,64,.4)}
.cmp-code-val{background:rgba(255,215,64,.07);color:var(--gold);font-size:11px;font-weight:800;padding:4px 8px;letter-spacing:1.5px;font-family:monospace}
.cmp-code-copy{background:rgba(255,215,64,.14);color:var(--gold);border:none;border-left:1px dashed rgba(255,215,64,.3);padding:4px 8px;cursor:pointer;transition:background var(--ease);display:flex;align-items:center}
.cmp-code-copy:hover{background:rgba(255,215,64,.25)}
.cmp-code-copy.copied{color:var(--g)}
.cmp-code-copy .mi{font-size:15px}

/* ════════════════════════════════════════════
   §16  WITHDRAWAL PROOF CAROUSEL
════════════════════════════════════════════ */
.proof-section{background:linear-gradient(160deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid rgba(0,230,118,.12);border-radius:var(--r3);padding:var(--s3);overflow:hidden;margin-bottom:var(--s5)}
.proof-hd{font-size:14px;font-weight:800;margin-bottom:var(--s3);display:flex;align-items:center;gap:8px}
.proof-hd .mi{color:var(--g)}
.proof-mask{overflow:hidden;margin:0 calc(-1 * var(--s3));padding:0 var(--s3)}
.proof-track{display:flex;gap:var(--s2);animation:proofScroll 30s linear infinite;width:max-content}
.proof-track:hover{animation-play-state:paused}
@keyframes proofScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.proof-card{flex-shrink:0;width:190px;background:linear-gradient(160deg,var(--bg4) 0%,var(--bg3) 100%);border:1px solid var(--bdr);border-radius:var(--r2);padding:var(--s2);transition:transform var(--ease)}
.proof-card:hover{transform:translateY(-2px)}
.proof-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.proof-logo{width:26px;height:26px;border-radius:6px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff}
.proof-logo img{width:26px;height:26px;object-fit:contain;border-radius:5px}
.proof-from{font-size:11px;font-weight:700;color:var(--text)}
.proof-time{font-size:10px;color:var(--muted)}
.proof-amount{font-size:1.05rem;font-weight:900;color:var(--g);margin-bottom:2px;text-shadow:0 0 14px rgba(0,230,118,.4)}
.proof-lbl{font-size:10px;color:var(--muted)}
.proof-msg{font-size:10px;color:var(--text2);background:var(--bg2);border-radius:4px;padding:5px 7px;margin-top:5px;line-height:1.4;border:1px solid var(--bdr);font-family:monospace}

/* ════════════════════════════════════════════
   §17  FAQ (AEO)
════════════════════════════════════════════ */
.faq-item{border:1px solid var(--bdr);border-radius:var(--r2);overflow:hidden;margin-bottom:6px;background:var(--bg2)}
.faq-btn{width:100%;background:transparent;border:none;padding:14px var(--s3);text-align:left;color:var(--text);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);transition:background var(--ease)}
.faq-btn:hover{background:var(--glass)}
.faq-answer{display:none;padding:0 var(--s3) var(--s2);font-size:13px;color:var(--muted);line-height:1.75}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-btn{background:var(--glass);border-bottom:1px solid var(--bdr)}
.faq-chev{flex-shrink:0;color:var(--g);transition:transform .2s ease;font-size:20px}
.faq-item.open .faq-chev{transform:rotate(180deg)}

/* ════════════════════════════════════════════
   §18  APP REVIEW PAGE (single-game_listing)
   Complete layout: screenshots, stats, tabs, steps
════════════════════════════════════════════ */
/* Screenshot scroller */
.ss-scroller{display:flex;gap:10px;overflow-x:auto;margin-bottom:var(--s3);scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.ss-scroller::-webkit-scrollbar{display:none}
.ss-frame{flex-shrink:0;width:clamp(160px,42vw,260px);border-radius:var(--r2);overflow:hidden;border:1px solid var(--bdr);cursor:pointer;transition:transform var(--ease)}
.ss-frame:hover{transform:scale(1.02)}
.ss-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ss-frame .no-ss{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--bg3)}

/* App info row */
.app-info-row{display:flex;align-items:flex-start;gap:var(--s3);background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--bdr);border-radius:var(--r3);padding:var(--s3);margin-bottom:var(--s3)}
.app-big-ic{width:68px;height:68px;border-radius:16px;overflow:hidden;flex-shrink:0;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:32px;border:1.5px solid var(--bdr)}
.app-big-ic img{width:100%;height:100%;object-fit:cover}
.app-title{font-size:1.4rem;font-weight:900;margin-bottom:3px}
.app-dev{font-size:13px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
/* "Verified" replaces old "Trusteit" */
.app-verified{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--g)}
.app-verified .mi{font-size:16px}

/* Stats strip */
.app-stats{display:flex;background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid rgba(255,255,255,.07);border-radius:var(--r2);overflow:hidden;margin-bottom:var(--s3)}
.app-stat{flex:1;padding:13px 6px;text-align:center;border-right:1px solid var(--bdr);position:relative}
.app-stat:last-child{border-right:none}
.app-stat-val{font-size:15px;font-weight:900;color:var(--text);margin-bottom:2px}
.app-stat-val.gold{color:var(--gold)}
.app-stat-lbl{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}

/* Payment big badges */
.pays-row{display:flex;gap:8px;justify-content:center;margin-bottom:var(--s3);flex-wrap:wrap}
.pay-big{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;padding:8px 16px 8px 8px;border-radius:var(--r2);border:1px solid;line-height:1}
.pay-big.jc{color:var(--jc);border-color:rgba(0,166,81,.3);background:rgba(0,166,81,.07)}
.pay-big.ep{color:var(--ep);border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.07)}
.pay-big img{border-radius:6px;flex-shrink:0}

/* Bonus info box */
.bonus-box{text-align:center;padding:12px;margin-bottom:var(--s3);background:rgba(0,230,118,.06);border-radius:var(--r2);border:1px solid rgba(0,230,118,.15)}
.bonus-box-lbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;display:flex;align-items:center;justify-content:center;gap:4px}
.bonus-box-val{font-size:1.1rem;font-weight:900;color:var(--g)}
.bonus-code-wrap{display:inline-flex;align-items:center;gap:0;border-radius:var(--r1);overflow:hidden;border:1px dashed rgba(255,215,64,.4);margin-top:6px}
.bonus-code-val{background:rgba(255,215,64,.07);color:var(--gold);font-size:12px;font-weight:800;padding:5px 10px;letter-spacing:1.5px;font-family:monospace}
.bonus-code-copy{background:rgba(255,215,64,.14);color:var(--gold);border:none;border-left:1px dashed rgba(255,215,64,.3);padding:5px 9px;cursor:pointer;transition:background var(--ease);display:flex;align-items:center}
.bonus-code-copy:hover{background:rgba(255,215,64,.25)}
.bonus-code-copy.copied{color:var(--g)}
.bonus-code-copy .mi{font-size:16px}

/* Tab bar */
.app-tabs{display:flex;border-bottom:1px solid var(--bdr);margin-bottom:var(--s3);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.app-tabs::-webkit-scrollbar{display:none}
.app-tab{padding:11px 17px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--ease);background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap;flex-shrink:0}
.app-tab:hover{color:var(--text)}
.app-tab.active{color:var(--g);border-bottom-color:var(--g)}

/* Content panels */
.c-panel{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s2)}
.c-panel p{font-size:13px;color:var(--text2);line-height:1.8}

/* Feature / How-to list */
.feat-list{display:flex;flex-direction:column;gap:8px}
.feat-list-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text2)}
.feat-list-item .mi{color:var(--g);flex-shrink:0;font-size:18px}
.steps{display:flex;flex-direction:column;gap:var(--s2)}
.step-row{display:flex;align-items:flex-start;gap:var(--s2)}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--g);color:#000;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-body strong{display:block;font-size:13px;font-weight:800;margin-bottom:1px;color:var(--text)}
.step-body span{font-size:12px;color:var(--muted);line-height:1.5}

/* Info table */
.info-tbl{width:100%;border-collapse:collapse;font-size:13px}
.info-tbl td{padding:8px 0;border-bottom:1px solid var(--bdr)}
.info-tbl tr:last-child td{border-bottom:none}
.info-tbl td:first-child{color:var(--muted);width:42%}
.info-tbl td:last-child{font-weight:700;color:var(--text)}

/* ════════════════════════════════════════════
   §19  TRUST BAR + 18+ BANNER
════════════════════════════════════════════ */
.trust-bar{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);padding:var(--s3) var(--s4);margin-bottom:var(--s5)}
.trust-bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.trust-bar-item{display:flex;align-items:center;gap:var(--s2)}
.trust-bar-item+.trust-bar-item{border-left:1px solid var(--bdr);padding-left:var(--s3)}
.trust-bar-ic .mi{font-size:26px;color:var(--g)}
.trust-bar-item h4{font-size:13px;font-weight:800;margin-bottom:2px}
.trust-bar-item p{font-size:12px;color:var(--muted);margin:0}

/* 18+ Responsible Gaming banner — important trust signal */
.rg-banner{display:flex;align-items:center;gap:var(--s2);padding:11px var(--s3);background:linear-gradient(90deg,rgba(255,82,82,.09),rgba(255,82,82,.04));border:1px solid rgba(255,82,82,.25);border-left:3px solid var(--red);border-radius:var(--r2);font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:var(--s3);box-shadow:0 2px 12px rgba(255,82,82,.07)}
.rg-banner .mi{color:var(--red);font-size:22px;flex-shrink:0}
.rg-banner strong{color:var(--red)}

/* ════════════════════════════════════════════
   §20  BLOG POST CARD
════════════════════════════════════════════ */
.post-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.pc-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg3);position:relative}
.pc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;display:block}
.post-card:hover .pc-thumb img{transform:scale(1.04)}
.pc-thumb .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:var(--bg3)}
.pc-cat-badge{position:absolute;top:8px;left:8px;background:var(--g);color:#000;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 9px;border-radius:5px}
.pc-body{padding:var(--s3);flex:1;display:flex;flex-direction:column;gap:5px}
.pc-meta{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:5px}
.pc-meta .mi{font-size:13px;color:var(--g)}
.pc-title{font-size:13px;font-weight:800;line-height:1.35;flex:1}
.pc-title a{color:var(--text)}.pc-title a:hover{color:var(--g)}
.pc-excerpt{font-size:12px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{padding:8px var(--s3);border-top:1px solid var(--bdr);background:var(--glass)}
.pc-read-more{font-size:12px;font-weight:800;color:var(--g);display:flex;align-items:center;gap:3px}

/* ════════════════════════════════════════════
   §21  FLOATING WHATSAPP + PWA BANNER
════════════════════════════════════════════ */
#float-wa{position:fixed;bottom:calc(var(--bot-h) + 14px);right:16px;z-index:9997;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(min-width:1024px){#float-wa{bottom:22px}}
.wa-btn{width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.45);cursor:pointer;transition:transform var(--ease),box-shadow var(--ease);text-decoration:none;animation:waPulse 2.8s ease infinite;position:relative}
@keyframes waPulse{0%,100%{box-shadow:0 4px 16px rgba(37,211,102,.45)}50%{box-shadow:0 4px 24px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.1)}}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(37,211,102,.65)}
.wa-btn svg{width:28px;height:28px;fill:#fff}
.wa-tooltip{position:absolute;right:60px;bottom:12px;background:var(--bg4);border:1px solid var(--bdr);color:var(--text);font-size:12px;font-weight:700;padding:7px 12px;border-radius:12px;white-space:nowrap;box-shadow:var(--sh1);opacity:0;pointer-events:none;transition:opacity var(--ease)}
.wa-btn:hover .wa-tooltip{opacity:1}

#pwa-banner{display:none;position:fixed;bottom:calc(var(--bot-h) + 10px);left:10px;right:10px;background:var(--bg3);border:1px solid rgba(0,230,118,.3);border-radius:var(--r2);padding:12px 14px;z-index:9996;align-items:center;gap:12px;box-shadow:var(--sh3);animation:slideUp .35s ease}
#pwa-banner.show{display:flex}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.pwa-ic{width:42px;height:42px;background:linear-gradient(135deg,var(--g),var(--g-d));border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pwa-ic .mi{font-size:22px;color:#000}
.pwa-txt{flex:1;min-width:0}
.pwa-txt strong{display:block;font-size:13px;font-weight:800;margin-bottom:1px}
.pwa-txt span{font-size:11px;color:var(--muted)}
.pwa-install-btn{background:var(--g);color:#000;border:none;padding:8px 14px;border-radius:var(--r2);font-size:12px;font-weight:900;cursor:pointer;flex-shrink:0;transition:all var(--ease)}
.pwa-install-btn:hover{background:var(--g-d)}
.pwa-dismiss{background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;padding:4px;flex-shrink:0}

/* ════════════════════════════════════════════
   §22  STICKY BOTTOM NAV — 4 icons: Home · Top Apps · Payment Guides · Support
════════════════════════════════════════════ */
#bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bot-h);
  background:rgba(6,8,14,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid transparent;
  background:
    linear-gradient(rgba(6,8,14,.98),rgba(6,8,14,.98)) padding-box,
    linear-gradient(90deg,rgba(0,230,118,.28),transparent 60%) border-box;
  border-top:1px solid transparent;
  box-shadow:0 -6px 30px rgba(0,0,0,.65),0 -1px 0 rgba(0,230,118,.1);
  z-index:9998;grid-template-columns:repeat(4,1fr);align-items:stretch;
}
@media(max-width:1023px){#bottom-nav{display:grid}}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.2px;transition:color var(--ease);padding:5px 2px;background:none;border:none;cursor:pointer;position:relative}
.bn-item .mi{font-size:22px;transition:color var(--ease)}
.bn-item:hover,.bn-item.active{color:var(--g)}
.bn-item.active .mi,.bn-item:hover .mi{text-shadow:0 0 12px var(--g-glow)}
/* Active indicator notch */
.bn-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:2px;background:var(--g);border-radius:0 0 3px 3px;box-shadow:0 0 8px var(--g-glow)}

/* ════════════════════════════════════════════
   §23  AUTHOR BOX (EEAT)
════════════════════════════════════════════ */
.author-box{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);padding:var(--s3);display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s3)}
.author-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g-d));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-av .mi{font-size:28px;color:#000}
.author-info strong{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.author-role{font-size:11px;color:var(--g);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:4px}
.author-info p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}
.article-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);margin-bottom:var(--s3);font-size:12px;color:var(--muted)}
.article-meta span{display:flex;align-items:center;gap:4px}
.article-meta .mi{font-size:15px;color:var(--g)}
.article-meta strong{color:var(--text)}

/* ════════════════════════════════════════════
   §24  FOOTER
════════════════════════════════════════════ */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--bdr)}
.footer-brand{font-size:17px;font-weight:900;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:var(--s2)}
.footer-brand em{color:var(--g);font-style:normal}
.footer-brand .mi{color:var(--g)}
.footer-desc{font-size:12px;color:var(--muted);line-height:1.8;max-width:250px}
.footer-col h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s3);font-weight:800}
.footer-col li{margin-bottom:7px}
.footer-col a{color:var(--muted);font-size:12px;transition:color var(--ease)}
.footer-col a:hover{color:var(--g)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);flex-wrap:wrap;padding-top:var(--s4)}
.footer-disc{font-size:11px;color:var(--faint);line-height:1.8;max-width:600px}
.footer-copy{font-size:11px;color:var(--faint);white-space:nowrap}

/* ════════════════════════════════════════════
   §25  MISC UI
════════════════════════════════════════════ */
.pagination{text-align:center;margin-top:var(--s5)}
.pagination .nav-links{display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:center}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r1);border:1px solid var(--bdr);font-size:13px;font-weight:700;color:var(--muted);transition:all var(--ease);background:var(--bg2)}
.pagination a:hover,.pagination .current{background:var(--g);color:#000;border-color:var(--g);box-shadow:0 2px 12px var(--g-glow)}

.fade-in{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

#scroll-top{position:fixed;bottom:calc(var(--bot-h) + 76px);right:16px;width:40px;height:40px;border-radius:50%;background:var(--bg3);border:1px solid var(--bdr);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9995;opacity:0;pointer-events:none;transition:opacity var(--ease),transform var(--ease),color var(--ease);box-shadow:var(--sh1)}
#scroll-top.visible{opacity:1;pointer-events:auto}
#scroll-top:hover{color:var(--g);transform:translateY(-2px);border-color:var(--bdr-g);box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 8px var(--g-glow)}
@media(min-width:1024px){#scroll-top{bottom:76px}}

.search-hero{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);padding:var(--s5) var(--s3);margin-bottom:var(--s5);text-align:center}
.big-search{max-width:460px;margin:var(--s3) auto 0;position:relative}
.big-search input{width:100%;background:var(--glass-b);border:1.5px solid var(--bdr);border-radius:var(--r4);padding:12px 18px 12px 44px;color:var(--text);font-size:14px;font-weight:600;outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
.big-search input:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow)}
.big-search .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px}

/* Skeleton loader */
@keyframes skeletonShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:800px 100%;animation:skeletonShimmer 1.6s infinite;border-radius:var(--r1)}
.skeleton-card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r3);overflow:hidden}
.skeleton-thumb{aspect-ratio:16/9}
.skeleton-line{height:12px;margin:8px 12px}
.skeleton-line-sm{height:10px;margin:6px 12px;width:60%}

/* Agent CTA */
.agent-cta{background:linear-gradient(135deg,rgba(255,215,64,.08),rgba(255,215,64,.03));border:1px solid var(--bdr-gold);border-radius:var(--r3);padding:var(--s5) var(--s4);text-align:center;margin-bottom:var(--s5)}
.agent-cta h2{color:var(--gold);margin-bottom:var(--s2)}
.agent-cta p{color:var(--text2);font-size:14px;max-width:500px;margin:0 auto var(--s3)}
.agent-earn{font-size:2rem;font-weight:900;color:var(--gold);display:block;margin-bottom:var(--s1);text-shadow:0 0 20px var(--gold-glow)}
.agent-earn-sub{font-size:12px;color:var(--muted)}

/* Swipe hint */
@keyframes swipeAnim{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.swipe-hint{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--faint);margin-bottom:6px}
.swipe-hint .mi{font-size:16px;animation:swipeAnim 1.8s ease infinite}
@media(min-width:768px){.swipe-hint{display:none}}

/* ════════════════════════════════════════════
   §26  RESPONSIVE BREAKPOINTS
════════════════════════════════════════════ */
@media(max-width:1280px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1023px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid>*:last-child{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .trust-bar-grid{grid-template-columns:1fr}
  .trust-bar-item+.trust-bar-item{border-left:none;padding-left:0;border-top:1px solid var(--bdr);padding-top:var(--s2)}
}
@media(max-width:720px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .app-stats{flex-wrap:wrap}.app-stat{min-width:33%}
  .footer-grid{grid-template-columns:1fr;gap:var(--s4)}
  .footer-bottom{flex-direction:column}
  .cmp-table{min-width:500px}
}
@media(max-width:480px){
  /* ── Topbar mobile fixes ── */
  .tb-logo-name{display:none}           /* hide site name text, keep icon */
  .tb-search{display:none}              /* hide search bar — too narrow */
  .tb-cta span:not(.mi){display:none}   /* hide CTA text, keep icon only */
  .tb-cta{padding:8px 11px;border-radius:50%;width:38px;height:38px;justify-content:center}
  .tb-cta .mi{font-size:18px}

  /* ── Content ── */
  .g2,.g3,.g4,.ga{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .feat-grid>*:nth-child(n+2){display:none}
  #main{padding:var(--s2)}
  footer#site-footer{padding:var(--s4) var(--s2) calc(var(--s4) + var(--bot-h))}
  .gc-foot{grid-template-columns:1fr;gap:5px}
  .gc-foot .btn-ghost,.gc-foot .btn-dl-sm{width:100%;justify-content:center}
  .cat-pills{flex-wrap:nowrap}
}

/* 540–767px — small phones/tablets: show search icon only ──*/
@media(max-width:767px){
  .tb-search{max-width:140px}
  .tb-search input{padding-left:32px;font-size:12px}
}
@media(max-width:600px){
  .tb-search{display:none}
  .tb-cta span:not(.mi){display:none}
  .tb-cta{padding:8px 11px;border-radius:50%;width:38px;height:38px;justify-content:center}
  .tb-cta .mi{font-size:18px}
}

/* 360px and below — very small phones */
@media(max-width:360px){
  #topbar{padding:0 var(--s2);gap:6px}
  .tb-logo-badge{width:32px;height:32px;border-radius:8px}
  .tb-logo-badge .mi{font-size:16px}
}