:root{
	--bg: #0f1724;
	--card: #0b1220;
	--accent: #7dd3fc;
	--text: #e6eef8;
	--muted: rgba(230,238,248,.7);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased}

/* Top nav */
nav{position:sticky;top:0;left:0;width:100%;display:flex;align-items:center;gap:0.75rem;padding:.4rem 1rem;background:linear-gradient(90deg,rgba(125,211,252,.04),transparent);border-bottom:1px solid rgba(255,255,255,.03);backdrop-filter:blur(6px);}
nav img#logo{height:44px;display:block;background-color:var(--text);border-radius:8px;}
nav a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:8px;background:transparent;border:1px solid transparent;white-space:nowrap;font-weight:600;transition:transform .15s ease,box-shadow .18s ease,background-color .15s ease,color .15s ease}
nav a p{margin:0}

/* hover + focus for nav links */
nav a:hover, nav a:focus-visible{background:rgba(125,211,252,0.08);color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 18px rgba(2,6,23,0.45)}
nav a:active{transform:translateY(0)}

/* Game grid */
#gameSelector{margin:1rem auto;padding:0.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-width:980px}
#gameSelector a{text-decoration:none}
.item{height:120px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:flex-end;justify-content:center;padding:.4rem;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(2,6,23,.6)}
.item h3{margin:0;background:rgba(0,0,0,.55);padding:.35rem .5rem;border-radius:6px;color:var(--text);font-size:0.95rem}

/* About section */
#about{max-width:980px;margin:1rem auto;padding:1rem}
.title{font-size:1.6rem;margin-bottom:.5rem;color:var(--accent)}
#aboutText{color:var(--muted);line-height:1.45}

footer{max-width:980px;margin:2rem auto;color:var(--muted);padding:1rem}

/* Small screens tweaks */
@media (max-width:720px){
	nav{padding:.4rem .6rem}
	nav img#logo{height:40px}
	#gameSelector{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
	.item{height:110px}
}

@media (max-width:420px){
	.title{font-size:1.25rem}
	.item h3{font-size:0.9rem}
}