*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f172a;--bg2:#1e293b;--card:#1e293b;--line:#334155;--tx:#e2e8f0;--mut:#94a3b8;--acc:#a855f7;--acc2:#22d3ee}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
img{max-width:100%;display:block}

/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:16px;height:60px}
.logo{font-weight:800;font-size:1.3rem;letter-spacing:-.5px;white-space:nowrap}
.search{flex:1;max-width:420px}
.search input{width:100%;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-size:.95rem}
.search input:focus{outline:none;border-color:var(--acc)}
.nav{display:flex;gap:14px;font-size:.9rem;color:var(--mut)}
.nav a:hover{color:var(--tx)}
@media(max-width:720px){.nav{display:none}.hd-in{gap:10px}}

/* hero */
.hero{text-align:center;padding:34px 0 18px}
.hero h1{font-size:2rem;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--mut);margin-top:8px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--mut);font-size:.85rem;cursor:pointer;transition:.15s}
.chip:hover{color:var(--tx);border-color:var(--acc)}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:14px 0}
@media(max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s}
.card:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.thumb{aspect-ratio:1/1;background:var(--bg2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.ct{padding:9px 11px}
.ci{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc{display:block;color:var(--mut);font-size:.72rem;margin-top:2px}
.nores{text-align:center;color:var(--mut);padding:40px}

/* ad slots */
.ad{margin:26px auto;text-align:center;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-lbl{font-size:.64rem;letter-spacing:1px;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.ad>div[id]{min-width:250px;min-height:90px}
/* in-grid ad row: spans the full grid width as a native content block */
.ad-row{grid-column:1/-1;margin:6px 0;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(30,41,59,.35);border:1px solid var(--line);border-radius:14px;padding:12px}
.ad-row>div[id]{min-width:250px;min-height:90px}

/* game page */
.crumb{color:var(--mut);font-size:.85rem;margin:16px 0 10px}
.crumb a:hover{color:var(--tx)}
.gh1{font-size:1.7rem;font-weight:800;margin-bottom:14px}
.player{position:relative;width:100%;max-width:840px;margin:0 auto;aspect-ratio:16/10;background:#000;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.player .poster{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.playbtn{position:absolute;inset:0;margin:auto;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:none;border:0;color:#fff;font-weight:700;font-size:1.05rem;cursor:pointer}
.playbtn:hover svg circle{fill:var(--acc)}
.player.live{aspect-ratio:16/10}
.player iframe{width:100%;height:100%;border:0;display:block}
.about-game{max-width:840px;margin:26px auto}
.about-game h2{font-size:1.25rem;margin-bottom:8px}
.about-game h3{font-size:1.05rem;margin:16px 0 6px}
.about-game p{color:#cbd5e1}
.about-game .meta{color:var(--mut);font-size:.85rem;margin-top:14px}
.about-game .meta a{color:var(--acc2)}
.more{margin:34px 0}
.more h2{font-size:1.25rem;margin-bottom:12px}

/* doc pages */
.doc{max-width:820px;padding-top:20px}
.doc h1{font-size:1.9rem;margin-bottom:16px}
.doc h2{font-size:1.2rem;margin:22px 0 8px}
.doc p{color:#cbd5e1;margin-bottom:10px}
.doc a{color:var(--acc2);text-decoration:underline}

/* footer */
.ft{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;color:var(--mut);font-size:.85rem;text-align:center}
.ft-links{margin-bottom:8px}
.ft-links a:hover{color:var(--tx)}
.ft-c{color:#64748b;font-size:.8rem}