:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:#f2f5ff; font-family:Inter,sans-serif; background:radial-gradient(circle at 20% 10%, rgba(101,249,212,.14), transparent 28rem), radial-gradient(circle at 78% 15%, rgba(245,100,161,.14), transparent 25rem), radial-gradient(circle at 54% 70%, rgba(140,94,255,.13), transparent 28rem), #070a15; }
a { color:inherit; text-decoration:none; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:0; z-index:10; background:rgba(7,10,21,.78); backdrop-filter:blur(12px); padding:1rem clamp(1rem,5vw,3rem); border-bottom:1px solid rgba(141,165,255,.12); }
.brand { display:flex; align-items:center; gap:.7rem; font-family:Bungee,sans-serif; font-size:1.15rem; }
.brand img { width:35px; height:35px; border-radius:.4rem; }
.brand span { color:#65f9d4; }
.nav { display:flex; gap:1.3rem; color:#a7b0c9; font-size:.9rem; }
.nav a:hover { color:#65f9d4; }
.hero { max-width:1100px; margin:4rem auto 2rem; padding:0 clamp(1rem,5vw,3rem); text-align:center; }
.badges { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.7rem; }
.badge { color:#a7b0c9; border:1px solid rgba(141,165,255,.13); background:rgba(255,255,255,.04); border-radius:99rem; padding:.34rem .75rem; font-size:.8rem; }
.hero h1 { font-family:Bungee,sans-serif; font-size:clamp(2.5rem,8vw,4.5rem); margin:0 0 1rem; }
.hero h1 span { color:#65f9d4; }
.hero p { max-width:46rem; margin:1rem auto 2rem; color:#a7b0c9; line-height:1.65; font-size:1.03rem; }
.hero a { display:inline-flex; align-items:center; padding:.8rem 1.3rem; background:#65f9d4; color:#041b18; font-weight:800; border-radius:99rem; }
.games-grid { max-width:1100px; margin:0 auto; padding:0 clamp(1rem,5vw,3rem); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.game-card { position:relative; overflow:hidden; border-radius:1.4rem; border:1px solid rgba(141,165,255,.12); background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(12,16,31,.85)); padding:1.3rem; min-height:11rem; display:flex; flex-direction:column; gap:1rem; transition:transform .18s ease; }
.game-card:hover { transform:translateY(-4px); border-color:rgba(101,249,212,.35); }
.game-card::before { content:""; position:absolute; top:-4rem; right:-4rem; width:12rem; height:12rem; border-radius:50%; background:var(--accent,#65f9d4); filter:blur(50px); opacity:.18; }
.card-copy { position:relative; z-index:1; }
.tag { color:var(--accent,#65f9d4); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.game-card h2 { font-family:Bungee,sans-serif; font-size:1.15rem; margin:.4rem 0 .3rem; }
.game-card p { margin:0; color:#a7b0c9; font-size:.9rem; line-height:1.5; }
.play-demo { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; font-weight:800; margin-top:auto; }
.mini { width:2rem; height:2rem; border:1px solid rgba(141,165,255,.2); display:grid; place-items:center; border-radius:.65rem; font-size:.8rem; }
.game-shell { padding:clamp(1rem,3vw,2rem); margin:auto; max-width:1000px; width:100%; background:rgba(15,19,38,.86); border:1px solid rgba(141,165,255,.16); border-radius:1.5rem; box-shadow:0 25px 60px rgba(0,0,0,.25); }
.top { display:grid; gap:.6rem; margin-bottom:1rem; }
.game-title { font-family:Bungee,sans-serif; font-size:clamp(1.7rem,4vw,2.8rem); margin:0; }
.back { color:#a7b0c9; font-size:.9rem; }
.back:hover { color:#65f9d4; }
.stats { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:.8rem; }
.stat { background:rgba(255,255,255,.06); border-radius:.8rem; padding:.55rem .9rem; min-width:5.8rem; text-align:center; }
.stat dt { color:#a7b0c9; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.stat dd { margin:.15rem 0 0; font-size:1.45rem; font-weight:800; font-variant-numeric:tabular-nums; }
.canvas-wrap { display:grid; place-items:center; background:#02030a; border-radius:1rem; overflow:hidden; margin-top:1rem; }
canvas { width:100%; height:auto; max-width:900px; display:block; touch-action:none; user-select:none; }
.cta { border:0; background:#65f9d4; color:#041b18; font-weight:900; border-radius:.8rem; padding:.85rem 1.2rem; cursor:pointer; min-height:2.8rem; }
.ghost { border:1px solid rgba(141,165,255,.18); background:rgba(255,255,255,.08); color:#f2f5ff; border-radius:.8rem; padding:.85rem 1.1rem; font-weight:700; cursor:pointer; min-height:2.8rem; }
.ghost:hover { border-color:#65f9d4; color:#65f9d4; }
.instructions { margin-top:1rem; border-radius:1rem; padding:1rem 1.2rem; background:rgba(255,255,255,.04); border:1px solid rgba(141,165,255,.1); color:#a7b0c9; }
.instructions h2 { margin:0 0 .5rem; color:#fff; font-size:1.1rem; }
.section-head { max-width:1100px; margin:0 auto 1.4rem; padding:0 clamp(1rem,5vw,3rem); }
.section-head h2 { font-family:Bungee,sans-serif; font-size:clamp(1.45rem,4vw,2.2rem); margin:0; padding:0 clamp(1rem,5vw,3rem); padding-left:clamp(1rem,5vw,3rem); padding-right:0; }
.section-head p { color:#a7b0c9; margin:.4rem 0; }
.site-footer { border-top:1px solid rgba(141,165,255,.1); padding:1.4rem clamp(1rem,5vw,3rem); display:flex; justify-content:space-between; align-items:center; gap:1rem; color:#a7b0c9; font-size:.85rem; margin-top:3rem; }
.footer-links { display:flex; gap:1rem; }
@media (max-width:650px){ .nav{display:none} .site-footer{flex-direction:column; text-align:center} }