*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:#061427;color:#cfe8ff;font-family:Segoe UI,Roboto,system-ui,Arial}

/* ── Background starfield canvas ──────────────────────────────── */
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* ── Header ───────────────────────────────────────────────────── */
header{text-align:center;padding:60px 20px 40px}
header h1{margin:0 0 10px;font-size:clamp(32px,7vw,72px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#6ef;text-shadow:0 0 18px #6ef,0 0 48px #3af}
.tagline{margin:0;font-size:clamp(11px,2vw,15px);letter-spacing:.22em;text-transform:uppercase;color:#4a7a99}

/* ── Game grid ────────────────────────────────────────────────── */
main{max-width:960px;margin:0 auto;padding:0 20px 60px}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}

.game-card{background:#081c30;border:1px solid #000;border-radius:12px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.game-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(102,238,255,.15)}

.game-thumb{height:180px;position:relative;overflow:hidden;background:#000}
.game-thumb video{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%) scale(1.22);width:100%;height:100%;object-fit:cover;border:none;outline:none}

.game-info{padding:20px 22px 24px}
.game-info h2{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6ef}
.game-info p{margin:0 0 18px;font-size:13px;line-height:1.7;color:#6a8fa8}

.play-btn{display:inline-block;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#061427;background:#6ef;border-radius:5px;padding:10px 28px;text-decoration:none;transition:background .14s,transform .1s,box-shadow .14s;box-shadow:0 0 14px rgba(102,238,255,.45)}
.play-btn:hover{background:#fff;transform:scale(1.05);box-shadow:0 0 28px rgba(102,238,255,.8)}
.play-btn:active{transform:scale(0.97)}

/* ── Footer ───────────────────────────────────────────────────── */
footer{text-align:center;padding:20px;font-size:11px;letter-spacing:.08em;color:#1e4060;border-top:1px solid #0a1d33}
footer a{color:#1e4060;text-decoration:none}
footer a:hover{color:#6ef}