:root { --lime:#CCFF00; --ink:#080A04; --panel:#0E1206; --line:#23271a; --mute:#A6AA9C; --white:#F4F6F4; --red:#FF2A3C; }
* { box-sizing:border-box; margin:0; }
html { background:var(--ink); color:var(--white); font-family:'Chakra Petch',system-ui,sans-serif; -webkit-text-size-adjust:100%; }
body { min-height:100dvh; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.top { position:absolute; inset:0 0 auto 0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:max(14px,env(safe-area-inset-top)) clamp(14px,4vw,40px) 14px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Unbounded',sans-serif; font-weight:900; font-size:clamp(13px,1.6vw,18px); letter-spacing:.02em; white-space:nowrap; }
.brand img { width:36px; height:36px; border-radius:9px; background:var(--lime); object-fit:cover; }
.brand b { color:var(--lime); } .brand i { font-style:normal; color:var(--lime); }
nav { display:flex; align-items:center; gap:clamp(10px,2vw,22px); font-weight:700; font-size:14px; }
nav a:hover { color:var(--lime); }
nav .buy { background:var(--lime); color:var(--ink); padding:9px 16px; border-radius:999px; white-space:nowrap; }
nav .buy:hover { color:var(--ink); filter:brightness(1.08); }
.hero { position:relative; min-height:min(78vh,820px); display:flex; align-items:flex-end; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,4,.55) 0%,rgba(8,10,4,0) 22%,rgba(8,10,4,0) 45%,rgba(8,10,4,.92) 88%,var(--ink) 100%); }
.hero-copy { position:relative; z-index:2; padding:0 clamp(16px,5vw,64px) clamp(26px,5vh,56px); max-width:900px; }
.kicker { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--lime); letter-spacing:.18em; font-size:13px; margin-bottom:12px; }
h1 { font-family:'Unbounded',sans-serif; font-weight:900; font-size:clamp(38px,7.4vw,96px); line-height:.98; text-transform:uppercase; letter-spacing:-.01em; }
h1 em { font-style:normal; color:var(--lime); }
.sub { margin-top:16px; font-size:clamp(16px,1.6vw,20px); color:#D2D4CB; max-width:36em; }
.ticker { overflow:hidden; background:var(--lime); color:var(--ink); font-family:'Unbounded',sans-serif; font-weight:900; font-size:14px; padding:11px 0; transform:rotate(-1deg) scale(1.02); }
.ticker div { display:flex; gap:26px; width:max-content; animation:slide 26s linear infinite; }
@keyframes slide { to { transform:translateX(-33.333%); } }
.games { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px); padding:clamp(34px,6vw,72px) clamp(14px,4vw,40px); max-width:1640px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, border-color .18s, box-shadow .18s; }
.card:hover, .card:focus-visible { transform:translateY(-6px); border-color:var(--lime); box-shadow:0 18px 60px -20px rgba(204,255,0,.45); outline:none; }
.shot { aspect-ratio:16/9; background:#050603; overflow:hidden; }
.shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.card:hover .shot img { transform:scale(1.05); }
.body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tag { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--lime); }
h2 { font-family:'Unbounded',sans-serif; font-weight:900; font-size:clamp(22px,2.2vw,30px); text-transform:uppercase; }
.body p:not(.tag) { color:var(--mute); line-height:1.45; }
.play { margin-top:auto; align-self:flex-start; background:var(--lime); color:var(--ink); font-weight:700; padding:11px 22px; border-radius:999px; font-size:16px; }
footer { padding:26px clamp(14px,4vw,40px) max(34px,env(safe-area-inset-bottom)); color:#66695E; font-size:13px; text-align:center; border-top:1px solid var(--line); }
@media (max-width:1280px) { .games { grid-template-columns:repeat(2,1fr); max-width:1100px; } }
@media (max-width:900px) { .games { grid-template-columns:1fr; max-width:560px; } .hero { min-height:min(60vh,520px); } .hero img { object-position:50% 30%; } nav a:not(.buy) { display:none; } }
@media (prefers-reduced-motion:reduce) { .ticker div { animation:none; } .card, .shot img { transition:none; } }