*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,sans-serif;background:#fff;color:#111;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:20px;text-align:center}
header h1{font-size:32px;margin-bottom:10px}
header p{margin-bottom:30px;color:#444}

.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.game{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:10px;transition:transform .3s,box-shadow .3s}
.game:hover{transform:translateY(-5px);box-shadow:0 6px 18px rgba(0,0,0,0.2)}
.game img{width:100%;border-radius:10px}
.btn{margin-top:15px;display:inline-block;padding:12px 20px;border:none;border-radius:30px;background:linear-gradient(90deg,#3ddc84,#0f9d58);color:#fff;font-weight:bold;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:all .2s}
.btn:hover{transform:scale(1.05)}
.btn:active{transform:scale(0.95);box-shadow:0 2px 6px rgba(0,0,0,0.3)}

footer{margin-top:40px;font-size:13px;color:#666}

.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}
.background::before,.background::after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(0,150,255,0.1);animation:move 20s linear infinite}
.background::after{background:rgba(255,0,150,0.1);top:50%;left:50%;animation-duration:30s}
@keyframes move{0%{transform:translate(-100px,-100px)}50%{transform:translate(100px,100px)}100%{transform:translate(-100px,-100px)}}