.site-header{background:var(--surface);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:40px;height:40px}
.main-nav{display:flex;gap:12px}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:6px}
.main-nav a[aria-current]{background:rgba(91,141,239,0.08)}
.container{max-width:980px;margin:0 auto;padding:24px}
:root{--accent:#6aa0ff;--bg:#0b1220;--text:#e6eef8;--surface:rgba(255,255,255,0.03);--muted:#9aa4b2;--border:rgba(255,255,255,0.06)}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:var(--text);background-image:linear-gradient(rgba(8,12,20,0.9),rgba(8,12,20,0.9)),url("assets/background.png");background-color:var(--bg);background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed}
.tagline{color:var(--muted);margin:0}
.hero{background:linear-gradient(90deg,rgba(106,160,255,0.06),transparent);padding:48px;border-radius:8px;margin:24px auto;max-width:720px;text-align:left}
.hero h1, .hero h2{ text-align:center; margin-top:0 }
.btn{background:var(--accent);color:#fff;border:0;padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:16px}
.features article{background:var(--surface);padding:16px;border-radius:8px;border:1px solid var(--border)}
.game-link{display:inline-block;background:var(--accent);color:#07101a;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;border:0}
.game-link:hover{filter:brightness(0.95);transform:translateY(-1px)}
.game-link:focus{outline:2px solid rgba(106,160,255,0.22);outline-offset:2px}
.game-link:visited{color:#07101a}
.site-footer{padding:16px;text-align:center;color:var(--muted);margin-top:32px}
.header-row{gap:8px}
.contact-form{display:grid;gap:12px;max-width:640px}
.contact-form label{display:flex;flex-direction:column;gap:6px}
.muted{color:#6b7280}
.gallery{display:flex;flex-direction:column;align-items:center;gap:12px}
.gallery img{width:100%;height:auto;border-radius:8px;max-width:720px}
.intro-image{display:block;max-width:720px;width:100%;height:auto;margin:16px auto;border-radius:8px}
.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.link-contrast a:not(.brand){color:var(--accent);font-weight:600;text-decoration:none}
.link-contrast a:not(.brand):hover{ text-decoration:underline }
.link-contrast a:not(.brand):visited{ color:rgba(255,255,255,0.9) }
.memory-card{background:var(--surface);padding:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);height:80px}
.memory-card.flipped{background:linear-gradient(90deg,rgba(106,160,255,0.06),rgba(255,255,255,0.03))}
.score{font-weight:700}

/* Responsive tweaks (mobile-first) */
/* Make header stack and allow nav to wrap on small screens */
.site-header .container{padding:14px 16px}
.header-row{display:flex;align-items:center;justify-content:space-between}
.brand{gap:10px}
.main-nav{flex-wrap:wrap}
.main-nav a{padding:8px;border-radius:6px}

@media (max-width:700px){
	.header-row{flex-direction:column;align-items:stretch;gap:8px}
	.brand{justify-content:flex-start}
	.main-nav{display:flex;justify-content:flex-end;gap:8px}
	.container{padding:16px}
	.hero{padding:28px;margin:18px auto}
}

@media (max-width:520px){
	.site-header .container{padding:12px}
	.brand{justify-content:center}
	.main-nav{justify-content:center}
	.hero{padding:20px;border-radius:6px}
	.intro-image{margin:12px auto}
	.features{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
	.memory-board{grid-template-columns:repeat(2,1fr)}
	.container{padding:12px}
	body{background-attachment:scroll}
}

/* Improve tap targets */
.main-nav a, .btn, .game-link{touch-action:manipulation}

/* Reduce heavy backgrounds on very small screens */
@media (max-width:380px){
	.hero{padding:14px}
	.logo{width:34px;height:34px}
	.site-footer{padding:12px;font-size:14px}
}

/* Ensure media always scales */
img{max-width:100%;height:auto;display:block}
video, iframe{max-width:100%}

/* Media page layout */
.media-grid{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:12px auto;width:auto}
.media-item{max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;margin:0}
.media-preview{width:100%;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.media-item figcaption{margin-top:8px;color:var(--muted);font-weight:600}
.media-item h3.media-title{margin-top:8px;color:var(--muted);font-weight:700;font-size:1.05rem}

/* Center gallery on pages that opt in */
.gallery.centered{display:flex;flex-direction:column;align-items:center}
.media-btn{display:inline-block;margin-top:10px;text-decoration:none;font-size:16px;font-family:inherit;line-height:1.2}
.media-coming-soon{opacity:0.95}
.media-intro{width:100%;max-width:720px;text-align:center;margin:0 0 12px;color:var(--muted)}
/* Dialog styling for Coming Soon modal */
dialog#coming-soon-dialog{border:none;border-radius:8px;padding:20px;max-width:420px;width:90%;background:var(--surface);color:var(--text);box-shadow:0 12px 32px rgba(2,6,23,0.7)}
dialog#coming-soon-dialog::backdrop{background:rgba(0,0,0,0.5)}

/* Hamburger / collapsible nav */
.nav-toggle{display:none;background:transparent;border:0;padding:6px;cursor:pointer}
.nav-toggle .hamburger{display:inline-block;width:24px}
.nav-toggle .hamburger span{display:block;height:2px;background:var(--text);margin:4px 0;border-radius:2px}

@media (max-width:700px){
	.nav-toggle{display:block}
	/* hide nav by default on small screens, reveal when .open */
	.main-nav{display:none;flex-direction:column;gap:8px;align-items:stretch;background:transparent;padding:8px}
	.main-nav.open{display:flex}
	.main-nav a{display:block;padding:10px;border-radius:6px}
}

/* When a11y-expanded is true, ensure nav shows */
.nav-toggle[aria-expanded="true"] + .main-nav, .nav-toggle[aria-expanded="true"] ~ .main-nav{display:flex}