body{min-height:100%;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(90% 60% at 50% -10%,rgba(30,91,255,.35),transparent 70%),radial-gradient(60% 40% at 100% 100%,rgba(0,229,255,.08),transparent 70%),var(--deep)}
.bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 0,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 70%)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:17px}
nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
nav a{color:#c6d0e0;text-decoration:none;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
nav a:hover,nav a:focus-visible{color:#fff;border-color:var(--cyan);outline:none}
main{max-width:1120px;margin:0 auto;padding:0 18px}
.hero{padding:44px 0 26px}
.eyebrow{color:var(--cyan);letter-spacing:.32em;font-size:12px;font-weight:700}
.hero h1{font-size:clamp(48px,12vw,92px);line-height:1;letter-spacing:.04em;margin:8px 0 12px}
.hero h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 34px rgba(0,229,255,.5)}
.lead{color:#c6d0e0;font-size:16px;line-height:1.55;max-width:560px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr;gap:20px}}
.game{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:linear-gradient(180deg,#141b29,#0f131b);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.game:hover,.game:focus-visible{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 14px 40px rgba(0,229,255,.12);outline:none}
.art svg{display:block;width:100%;height:auto;aspect-ratio:16/9}
.meta{padding:14px 16px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.meta h2{width:100%;font-size:21px;letter-spacing:.03em}
.meta p{width:100%;color:#aeb9cc;font-size:14px;line-height:1.5;margin-bottom:4px}
.tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.best{font-size:12px;font-weight:600;color:var(--gold)}
.more{padding:40px 0 10px}
.more h2{font-size:20px;margin-bottom:12px}
.links{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.links{grid-template-columns:repeat(3,1fr)}}
.links a{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:rgba(18,23,34,.7)}
.links a span{color:#aeb9cc;font-size:13px}
.links a:hover,.links a:focus-visible{border-color:var(--cyan);outline:none}
footer{max-width:1120px;margin:0 auto;padding:30px 18px max(30px,env(safe-area-inset-bottom));color:#7f8ca2;font-size:12.5px}
.tag.new{background:linear-gradient(90deg,#ffd166,#ff9f43);color:#3a2a00;border-color:transparent;font-weight:800}
.coins-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:#c6d0e0;max-width:640px}
.coins-line .sk-coin{height:32px}