Initial addition of the Arcade study feature. Add connections as the first working game.

src/components/arcade/ArcadeGameShell.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useRouter } from "next/navigation";
+
+export function ArcadeGameShell({
+  title,
+  exitHref,
+  elapsedSeconds,
+  complete,
+  children,
+}: {
+  title: string;
+  exitHref: string;
+  elapsedSeconds: number;
+  complete: boolean;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  function exitGame() {
+    if (!complete && !window.confirm("Leave this round? Your progress will not be saved.")) return;
+    router.push(exitHref);
+  }
+  const minutes = Math.floor(elapsedSeconds / 60);
+  const seconds = String(elapsedSeconds % 60).padStart(2, "0");
+  return (
+    <div className="connections-world connections-stage mx-auto w-full max-w-6xl p-1 pb-16 sm:p-3">
+      <header className="connections-topbar mb-5 flex items-center justify-between gap-4 rounded-2xl border border-border-light bg-bg-surface/85 px-4 py-3 shadow-sm">
+        <button onClick={exitGame} className="min-h-10 rounded-xl px-3 text-sm font-bold text-text-muted hover:bg-bg-surface-alt hover:text-text-heading">← Exit</button>
+        <h1 className="truncate text-center text-lg font-extrabold text-text-heading">{title}</h1>
+        <div className="min-w-16 text-right font-mono text-sm font-bold text-text-muted" aria-label={`${elapsedSeconds} seconds elapsed`}>{minutes}:{seconds}</div>
+      </header>
+      {children}
+    </div>
+  );
+}