Add PageFrame, PrimaryButton, and shared layout for non-title pages

- PageFrame: parchment-background frame with title, diamond-rule divider,
  scrollable content area, and optional bottom-pinned footer slot
- PrimaryButton: shared full-width button (light blue, drop shadow, pressed
  state via translateY + shadow reduction) — used by TitleScreen and PlayerSetup
- Global button base in index.css ensures touch-friendly sizing everywhere
- TitleScreen consolidated to use PrimaryButton instead of its own button style

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

src/components/PageFrame.module.css

@@ -0,0 +1,51 @@
+.frame {
+  position: fixed;
+  inset: 1rem;
+  border: 2px solid black;
+  border-radius: 2rem;
+  background: #f5f0e4;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  padding: 1.25rem 1.5rem 0;
+  text-align: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.rule {
+  position: relative;
+  border: none;
+  border-top: 1px solid #c8b99a;
+  margin: 0.75rem 0 0;
+}
+
+.rule::before {
+  content: '◆';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #f5f0e4;
+  padding: 0 0.35em;
+  font-size: 0.55rem;
+  color: #c8b99a;
+  line-height: 1;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.5rem;
+}
+
+.footer {
+  padding: 1rem 1.5rem 1.5rem;
+}

src/components/PageFrame.tsx

@@ -0,0 +1,22 @@
+import styles from './PageFrame.module.css'
+
+interface Props {
+  title: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+}
+
+export default function PageFrame({ title, children, footer }: Props) {
+  return (
+    <div className={styles.frame}>
+      <header className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        <div className={styles.rule} role="separator" />
+      </header>
+      <div className={styles.content}>
+        {children}
+      </div>
+      {footer && <div className={styles.footer}>{footer}</div>}
+    </div>
+  )
+}

src/components/PrimaryButton.module.css

@@ -0,0 +1,17 @@
+.button {
+  width: 100%;
+  padding: 1rem;
+  background: #a8d5e8;
+  border: none;
+  border-radius: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  transition: transform 80ms ease, box-shadow 80ms ease;
+}
+
+.button:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}

src/components/PrimaryButton.tsx

@@ -0,0 +1,14 @@
+import styles from './PrimaryButton.module.css'
+
+interface Props {
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export default function PrimaryButton({ onClick, children }: Props) {
+  return (
+    <button className={styles.button} onClick={onClick}>
+      {children}
+    </button>
+  )
+}