/* CaroGames — Carousel Showcase */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --bg: #0d0d0d; --bg2: #141414; --card: #1a1a1a; --card-hover: #222;
  --surface: #111; --text: #efefef; --text2: #888; --text3: #555;
  --border: rgba(255,255,255,.04); --accent: #ff3d3d; --accent2: #ff6b3d;
  --radius: 12px; --radius-sm: 8px;
  --font: 'Space Grotesk', -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(--text);text-decoration:none}
.page{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
header{position:sticky;top:0;z-index:100;background:rgba(13,13,13,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:56px}
.h-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:12px}
.logo{font-size:18px;font-weight:700;letter-spacing:-.3px}
.logo span{color:var(--accent)}
.srch-d{display:none;position:relative;flex:1;max-width:260px}
.srch-d input{width:100%;height:34px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0 10px 0 32px;font-size:13px;outline:none;color:var(--text);font-family:var(--font)}
.srch-d input:focus{border-color:var(--accent)}
.srch-d .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3)}
@media(min-width:768px){.srch-d{display:block}}
.hdr-acts{display:flex;gap:6px}
.icon-btn{width:36px;height:36px;border-radius:8px;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)}
.nav{display:none;gap:2px}
.nav a{padding:6px 12px;font-size:13px;font-weight:500;color:var(--text2);border-radius:6px}
.nav a:hover{background:rgba(255,61,61,.06);color:var(--text)}
@media(min-width:768px){.nav{display:flex}}

/* ═══ CAROUSEL HERO ═══ */
.carousel-wrap{position:relative;margin:20px 0;overflow:hidden;border-radius:var(--radius);background:#000;min-height:320px}
.carousel-inner{position:relative;width:100%;min-height:320px}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;padding:32px 36px;min-height:320px;pointer-events:none}
.carousel-slide.act{opacity:1;pointer-events:auto}
.carousel-slide .slide-bg{position:absolute;inset:0;opacity:.12;background-size:cover;background-position:center;filter:blur(8px)}
.carousel-slide .slide-content{position:relative;z-index:1;display:flex;align-items:center;gap:24px;width:100%}
.slide-icon{width:100px;height:100px;border-radius:16px;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.05)}
.slide-text{flex:1}
.slide-badge{display:inline-block;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:1px;margin-bottom:8px}
.slide-text h2{font-size:24px;font-weight:700;margin-bottom:4px}
.slide-text p{color:var(--text2);font-size:13px;margin-bottom:10px;max-width:480px}
.slide-meta{display:flex;gap:12px;font-size:11px;color:var(--text3);margin-bottom:14px}
.slide-btn{display:inline-flex;padding:10px 26px;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer}
.slide-btn:hover{background:var(--accent2)}

/* Carousel dots */
.carousel-dots{display:flex;gap:8px;justify-content:center;padding:12px 0}
.c-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);cursor:pointer;border:none}
.c-dot.act{background:var(--accent);width:24px;border-radius:4px}

/* Category strips — replaces "All Games" */
.cat-strip-wrap{margin-bottom:24px}
.cat-strip-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cat-strip-hdr h3{font-size:16px;font-weight:600}
.cat-strip-hdr a{font-size:12px;color:var(--text3)}
.cat-strip-hdr a:hover{color:var(--accent)}
.cat-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:thin;cursor:grab}
.cat-strip::-webkit-scrollbar{height:3px}
.cat-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.cs-item{flex-shrink:0;width:130px;cursor:pointer;text-decoration:none;color:var(--text)}
.cs-item:hover{transform:translateY(-3px)}
.cs-item .thumb{width:100%;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.cs-item .thumb img{width:100%;height:100%;object-fit:cover}
.cs-item .hot{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;font-size:7px;font-weight:700;padding:1px 6px;border-radius:4px}
.cs-item .name{font-size:12px;font-weight:500;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-item .stats{font-size:10px;color:var(--text3);margin-top:2px}
.cs-item .thumb{position:relative}

/* Category page grid */
.ch{padding:20px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.ch h1{font-size:22px;font-weight:700}
.ch p{color:var(--text2);font-size:13px}
.gg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:20px}
@media(min-width:500px){.gg{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.gg{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.gg{grid-template-columns:repeat(5,1fr)}}
.gc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;text-decoration:none;color:var(--text)}
.gc:hover{border-color:var(--accent)}
.gc .thumb{width:100%;aspect-ratio:1;overflow:hidden;background:var(--surface);position:relative}
.gc .thumb img{width:100%;height:100%;object-fit:cover}
.gc .hot{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;font-size:7px;font-weight:700;padding:1px 6px;border-radius:4px}
.gc .info{padding:8px 10px}
.gc .info h3{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .info .m{font-size:10px;color:var(--text3);margin-top:2px;display:flex;gap:8px}
.lm{display:block;margin:0 auto 20px;padding:8px 24px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text2);font-size:13px;cursor:pointer;font-family:var(--font)}
.lm:hover{border-color:var(--accent);color:var(--accent)}

/* Detail page */
.bc{font-size:12px;color:var(--text3);padding:12px 0}
.gd{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.gd{grid-template-columns:2fr 1fr}}
.pp{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.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:linear-gradient(rgba(13,13,13,.9),rgba(13,13,13,.95))}
.pl img{width:64px;height:64px;border-radius:14px;margin-bottom:10px}
.pl h2{color:#fff;font-size:18px;font-weight:600;margin-bottom:4px}
.pl p{color:var(--text3);font-size:12px;margin-bottom:16px}
.pnb{padding:10px 28px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:600;border-radius:8px;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(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.1);font-size:10px;padding:4px 12px;border-radius:6px;cursor:pointer;display:none}
.gm{padding:16px 18px}
.gm h1{font-size:18px;font-weight:600}
.gm .sr{display:flex;gap:10px;font-size:11px;padding:4px 12px;border:1px solid var(--border);border-radius:6px;color:var(--text2);margin-bottom:8px}
.gm .desc{font-size:13px;line-height:1.7;color:var(--text2)}
.ib{border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.ib h3{font-size:12px;font-weight:600;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}
.ad-w{text-align:center;padding:8px 0}

/* Search overlay */
.so{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);flex-direction:column}
.so.open{display:flex}
.so-h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.so-h input{flex:1;font-size:16px;background:transparent;border:none;color:var(--text);outline:none;font-family:var(--font)}
.so-r{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}

footer{border-top:1px solid var(--border);padding:24px 0;margin-top:8px;text-align:center;font-size:12px;color:var(--text3)}
footer a{color:var(--text2);padding:0 8px}
footer a:hover{color:var(--accent)}

@media(max-width:640px){
  .carousel-wrap{min-height:auto}
  .carousel-slide{padding:20px;min-height:auto;flex-direction:column;text-align:center}
  .carousel-slide .slide-content{flex-direction:column;text-align:center}
  .slide-icon{width:70px;height:70px}
  .slide-text p{max-width:100%}
  .slide-meta{justify-content:center}
  .slide-text h2{font-size:18px}
  .gg{gap:8px}
}

/* ── 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; }