fix: constrain nav and footer content to max-w-[1200px] like main content

Nav keeps full-width background; inner content wrapped in max-w-[1200px]
mx-auto px-7 container to align with page content width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/layout.tsx

@@ -28,6 +28,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <AppApolloProvider>
           <Nav />
           <main className="pt-[60px] min-h-screen">{children}</main>
+          <footer className="border-t mt-8" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
+            <div className="max-w-[1200px] mx-auto px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]">
+              <span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
+              <a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
+                className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
+                dev.pivoine.art
+              </a>
+            </div>
+          </footer>
         </AppApolloProvider>
       </body>
     </html>

app/players/[name]/page.tsx

@@ -38,13 +38,13 @@ export default function PlayerPage({ params }: { params: Promise<{ name: string
 
   // Fetch all goals for this player broken down by year
   const { data: goalsData } = useQuery(gql`
-    query PlayerGoalsByYear($name: String!) {
+    query PlayerGoalsByYear {
       tournaments { year }
       topScorers(limit: 1000) {
         playerName goals team { id }
       }
     }
-  `, { variables: { name } })
+  `)
 
   if (loading && !data) {
     return <div className="max-w-[1200px] mx-auto px-7 py-10 text-[#2a5c35]">Loading player…</div>

components/nav.tsx

@@ -40,9 +40,10 @@ export function Nav() {
   return (
     <>
       <nav
-        className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5"
+        className="fixed top-0 left-0 right-0 z-50 h-[60px]"
         style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
       >
+      <div className="max-w-[1200px] mx-auto px-7 h-full flex items-center">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
           {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -85,6 +86,7 @@ export function Nav() {
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
         </button>
+      </div>
       </nav>
 
       {/* Mobile menu overlay */}