:root { --bg:#0b1020; --panel:#0f172a; --text:#e6fef2; --muted:#a7b9b2; --brand:#19c37d; --brand-2:#a6ff47; --chip:#163a2a; --card:#0e1a2b; --shadow:0 8px 24px rgba(0,0,0,.35); }
*{ box-sizing:border-box } html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; }
a{ color:var(--brand); text-decoration:none } a:hover{text-decoration:underline} img{ max-width:100%; display:block }

header.site{ position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); background:rgba(11,16,32,.85); border-bottom:1px solid rgba(255,255,255,.06) }
.header-inner{ display:flex; align-items:center; gap:16px; padding:12px 16px; max-width:1200px; margin:0 auto }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px }
.brand img{ width:42px; height:42px; border-radius:12px }
.brand .name{ font-size:1.15rem; color:var(--brand-2); text-shadow:0 0 12px rgba(166,255,71,.25) }

nav.cats{ flex:1; display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; position:relative; padding:6px 28px }
nav.cats .cat-link{ white-space:nowrap; color:var(--text); background:var(--chip); padding:8px 10px; border-radius:999px; font-size:.9rem; border:1px solid rgba(255,255,255,.06) }
nav.cats .cat-link:hover{ background:#194033 }
nav.cats::before, nav.cats::after{ content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none }
nav.cats::before{ left:0; background:linear-gradient(90deg,var(--bg),transparent) }
nav.cats::after{ right:0; background:linear-gradient(270deg,var(--bg),transparent) }
nav.cats .cat-nav{ position:absolute; top:50%; transform:translateY(-50%); background:#0a1424; border:1px solid rgba(255,255,255,.1); color:var(--text); width:24px; height:28px; border-radius:6px; display:grid; place-items:center; cursor:pointer }
nav.cats .cat-nav.left{ left:2px } nav.cats .cat-nav.right{ right:2px }
nav.cats .cat-link.active{ background:#1c4b39; border-color:rgba(166,255,71,.5) }

.search{ margin-left:auto } .search input{ background:#0a1424; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:8px 12px; border-radius:10px }

main{ max-width:1200px; margin:16px auto; padding:0 16px }

.hero{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(90deg, rgba(166,255,71,.08), rgba(25,195,125,.08)); border:1px solid rgba(166,255,71,.25); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow) }
.hero h1{ margin:0; font-size:clamp(1.6rem,3.2vw,2.2rem) }
.hero p{ margin:0; color:var(--muted); font-size:.95rem }
.hero-logo img{ width:clamp(120px,18vw,200px); filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); border-radius:20px }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.card{ grid-column:span 12; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease }
.card:hover{ transform:translateY(-3px) }
@media (min-width:520px){ .card{ grid-column:span 6 } }
@media (min-width:900px){ .card{ grid-column:span 4 } }

.thumb-wrap{ display:block; aspect-ratio:16/9; overflow:hidden; background:#0a0f1a }
.card-body{ padding:12px }
.card-title{ margin:0 0 6px 0; font-size:1.05rem }
.meta{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.85rem }
.chip{ display:inline-block; background:var(--chip); color:var(--text); padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.06) }
.desc{ color:var(--muted); min-height:2.8em }
.btn{ display:inline-block; background:var(--brand); color:#062616; padding:8px 12px; border-radius:10px; font-weight:700; margin-top:8px }
.btn:hover{ filter:brightness(1.1) }

/* Player box */
.player-box{ background:#0a1424; border:1px solid rgba(255,255,255,.08); border-radius:12px; position:relative; overflow:hidden }
.player-box .loading{ position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.95rem }

footer.site{ margin-top:40px; padding:20px 16px; background:#091022; color:var(--muted); border-top:1px solid rgba(255,255,255,.06) }
.footer-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.footer-col{ grid-column:span 12 }
@media (min-width:700px){ .footer-col{ grid-column:span 3 } }

.ad-slot{ display:grid; place-items:center; min-height:90px; border:1px dashed rgba(166,255,71,.4); border-radius:10px; margin:12px 0 }
.ad-placeholder{ opacity:.5; font-size:.9rem }
.sidebar{ position:sticky; top:80px }

.layout-2col{ display:grid; grid-template-columns:1fr; gap:20px }
@media (min-width:980px){ .layout-2col{ grid-template-columns:1fr 320px } }

.page-title{ margin:10px 0 6px }
.empty{ background:#0a1424; padding:16px; border-radius:12px }

/* Detail */
.hero-game{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center }
@media (min-width:900px){ .hero-game{ grid-template-columns:320px 1fr } }
.hero-img{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06) }
.hero-text h1{ margin:0 0 6px }
.hero-text .meta{ margin:6px 0 }

.embed-wrap{ width:100%; position:relative }
.embed-wrap::before{ content:""; display:block; padding-top:var(--aspect,56.25%) }
.embed-wrap iframe, .embed-wrap .embed-container{ position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:12px; overflow:hidden }

.related{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.rel-card{ grid-column:span 6; background:#0a1424; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06); display:block }
.rel-card img{ aspect-ratio:16/9 } .rel-card span{ display:block; padding:8px; color:var(--text) }
@media (min-width:700px){ .rel-card{ grid-column:span 3 } }

.cookie-bar{ position:fixed; left:10px; right:10px; bottom:10px; background:#0a1424; border:1px solid rgba(255,255,255,.2); padding:10px 12px; border-radius:10px; z-index:50; display:flex; align-items:center; gap:10px }
.cookie-bar button{ background:var(--brand); border:none; color:#062616; padding:6px 10px; border-radius:8px; font-weight:700 }