/* FindPlay — Search-First Minimal */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --bg: #f4f4f4; --bg2: #fff; --card: #fff; --card-hover: #f0f0f0;
  --text: #1a1a1a; --text2: #666; --text3: #aaa;
  --border: #e0e0e0; --accent: #2563eb; --accent2: #dc2626;
  --radius: 10px; --radius-sm: 8px;
  --font: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--accent);text-decoration:none}
.page{max-width:900px;margin:0 auto;padding:0 16px}

/* Header */
header{background:var(--bg2);border-bottom:1px solid var(--border);height:56px}
.h-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{font-size:20px;font-weight:800;letter-spacing:-.5px}
.logo span{color:var(--accent)}
.hdr-acts{display:flex;gap:6px}
.icon-btn{width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid var(--border);color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Big search hero */
.search-hero{padding:40px 0 20px;text-align:center}
.search-hero h1{font-size:28px;font-weight:800;margin-bottom:6px}
.search-hero p{color:var(--text2);font-size:14px;margin-bottom:20px}
.search-box{position:relative;max-width:500px;margin:0 auto}
.search-box input{width:100%;height:50px;background:var(--bg2);border:2px solid var(--border);border-radius:14px;padding:0 16px 0 44px;font-size:16px;outline:none;color:var(--text);font-family:var(--font);box-shadow:0 4px 20px rgba(0,0,0,.02)}
.search-box input:focus{border-color:var(--accent)}
.search-box .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:16px}

/* Quick categories — small pills */
.quick-cats{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;justify-content:center;flex-wrap:nowrap}
.quick-cats::-webkit-scrollbar{display:none}
.qc{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--border);color:var(--text2);cursor:pointer;white-space:nowrap;background:var(--bg2)}
.qc:hover{border-color:var(--accent);color:var(--accent)}
.qc.act{background:var(--accent);color:#fff;border-color:var(--accent)}

/* List view — not grid */
.game-list{display:flex;flex-direction:column;gap:8px;padding-bottom:40px}
.gl-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--border);cursor:pointer;text-decoration:none;color:var(--text)}
.gl-item:hover{border-color:var(--accent)}
.gl-icon{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.gl-info{flex:1;min-width:0}
.gl-info h3{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-info .gl-meta{font-size:11px;color:var(--text3);margin-top:1px}
.gl-hot{padding:2px 8px;border-radius:6px;background:#dc2626;color:#fff;font-size:9px;font-weight:700;flex-shrink:0}
.gl-play{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}

/* Ad */
.ad-w{text-align:center;padding:8px 0}

/* Detail page */
.gd{max-width:1000px;margin:0 auto;padding:0 16px}
.bc{font-size:12px;color:var(--text3);padding:12px 0}
.dp{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pa{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.pl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:rgba(255,255,255,.95)}
.pl img{width:64px;height:64px;border-radius:14px;margin-bottom:10px}
.pl h2{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--text)}
.pl p{color:var(--text3);font-size:12px;margin-bottom:16px}
.pnb{padding:10px 30px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:600;border-radius:10px;cursor:pointer}
.gi{position:absolute;inset:0;width:100%;height:100%;border:none;display:none}
.fb{position:absolute;bottom:10px;right:10px;z-index:10;background:rgba(255,255,255,.8);color:var(--text);border:1px solid var(--border);font-size:10px;padding:4px 12px;border-radius:6px;cursor:pointer;display:none}
.gm{padding:18px 20px}
.gm h1{font-size:18px;font-weight:700}
.gm .desc{font-size:13px;line-height:1.7;color:var(--text2)}
.ib{margin-top:20px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.ib h3{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--accent)}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.si .l{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.si .v{font-size:14px;font-weight:600;margin-top:1px}

.ch{padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:12px}
.ch h1{font-size:22px;font-weight:800}
.ch p{color:var(--text2);font-size:13px}

footer{text-align:center;padding:24px;border-top:1px solid var(--border);margin-top:16px;font-size:12px;color:var(--text3)}
footer a{color:var(--text2);padding:0 8px}
footer a:hover{color:var(--accent)}

@media(max-width:640px){
  .search-hero h1{font-size:22px}
  .gl-item{padding:8px 12px}
}

/* ── Anchor Ad (bottom sticky) ── */
.gpt-anchor { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: flex; justify-content: center; background: rgba(0,0,0,0.6); padding: 4px 0; }
.gpt-anchor-inner { min-width: 320px; min-height: 50px; width: 320px; height: 50px; }

/* ── Interstitial Ad ── */
.gpt-interstitial { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; }
.gpt-interstitial-inner { min-width: 300px; min-height: 250px; width: 300px; height: 250px; }
.gpt-interstitial-close { position: absolute; top: 16px; right: 16px; background: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; cursor: pointer; z-index: 1001; }
