*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:#09090b;color:#fafafa;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{background:#111113;color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.hrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand-dot{width:12px;height:12px;border-radius:3px;background:#eab308;display:inline-block}
.hnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.hnav a{padding:6px 12px;border-radius:16px;font-weight:600;font-size:.92rem;opacity:.9}
.hnav a:hover,.hnav a.active{background:#22c55e;opacity:1}
.hright{display:flex;align-items:center;gap:10px;margin-left:auto}
#searchBox{padding:8px 12px;border-radius:999px;border:0;min-width:170px;font-size:.9rem}
.lang-sw{background:#eab308;color:#fafafa;padding:7px 14px;border-radius:999px;font-weight:700;font-size:.85rem}
.hero{display:grid;gap:16px;margin:22px 0;align-items:stretch}
.hero-A,.hero-D,.hero-E{grid-template-columns:1fr 1.4fr}
.hero-txt h1{font-size:1.7rem;line-height:1.25;margin-bottom:10px}
.hero-txt p{color:#a1a1aa;font-size:.98rem}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-B,.hero-G{grid-template-columns:repeat(3,1fr)}
.hero-C,.hero-F{grid-template-columns:1.6fr 1fr}
.hero-main{position:relative;border-radius:16px;overflow:hidden;min-height:320px}
.hero-main img{width:100%;height:100%;object-fit:cover}
.hero-side{display:grid;gap:12px}
.hero-card{position:relative;border-radius:16px;overflow:hidden;min-height:150px}
.hero-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-card .hero-info,.hero-main .hero-info{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;padding:28px 12px 10px;display:flex;flex-direction:column}
.hero-info span{font-size:.78rem;opacity:.85}
.intro-blk{background:#18181b;border-radius:16px;padding:14px 18px;margin:18px 0;color:#a1a1aa;font-size:.95rem;border:1px solid rgba(128,128,128,.15)}
.gsec{margin:26px 0}
.sec-title{font-size:1.25rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sec-title span::before{content:'';display:inline-block;width:8px;height:22px;background:#22c55e;border-radius:3px;margin-right:10px;vertical-align:middle}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.gcard{position:relative;background:#18181b;border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s;border:1px solid rgba(128,128,128,.14)}
.gcard:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.badge{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:800;color:#fff;z-index:2}
.b-hot{background:#eab308}.b-new{background:#22c55e}
.gc-body{padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.gc-title{font-weight:700;font-size:.9rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-cat{font-size:.75rem;color:#a1a1aa}
.crumbs{font-size:.85rem;color:#a1a1aa;margin:14px 0}
.crumbs a:hover{text-decoration:underline}
.game-page .play-box{display:grid;grid-template-columns:2fr 1fr;gap:20px;background:#18181b;border-radius:16px;padding:16px;border:1px solid rgba(128,128,128,.14)}
.play-frame{position:relative;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;min-height:420px;display:flex;align-items:center;justify-content:center}
.play-frame.playing{min-height:0}
.play-btn{background:#22c55e;color:#fff;border:0;font-size:1.25rem;font-weight:800;padding:16px 34px;border-radius:999px;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.play-btn:hover{transform:scale(1.05)}
.play-thumb{border-radius:16px;margin-bottom:12px}
.play-title{font-size:1.45rem;margin-bottom:8px}
.cat-chip{display:inline-block;background:#eab308;color:#fafafa;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:700;margin-bottom:12px}
.play-desc{color:#a1a1aa;font-size:.95rem}
.howto{background:#18181b;border-radius:16px;padding:16px 18px;margin:20px 0;border:1px solid rgba(128,128,128,.14)}
.howto h2{font-size:1.05rem;margin-bottom:8px}
.howto p{color:#a1a1aa;font-size:.93rem;white-space:pre-line}
.cat-head{margin:22px 0}
.cat-head h1{font-size:1.5rem;margin-bottom:8px}
.cat-head p{color:#a1a1aa;max-width:760px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{background:#18181b;border:1px solid rgba(128,128,128,.2);padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:600}
.chip:hover{background:#22c55e;color:#fff}
.site-footer{background:#111113;color:#d7d7d7;margin-top:40px;padding:34px 0 20px}
.f-brand{font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:10px}
.f-desc{font-size:.9rem;color:#a1a1aa;max-width:720px;margin-bottom:14px}
.f-links{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.f-links a{color:#fff;font-size:.9rem;opacity:.85}.f-links a:hover{opacity:1;text-decoration:underline}
.f-copy{font-size:.8rem;color:#a1a1aa}
@media(max-width:900px){.hero-A,.hero-D,.hero-E,.hero-B,.hero-G,.hero-C,.hero-F{grid-template-columns:1fr}.game-page .play-box{grid-template-columns:1fr}.hnav{order:3;width:100%}}

.gcard:hover{box-shadow:0 0 20px #22c55e55}
.brand{letter-spacing:1px;text-transform:uppercase}