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>
+  )
+}

src/index.css

@@ -1,4 +1,5 @@
 *, *::before, *::after { box-sizing: border-box; }
+button { min-height: 2.75rem; font-size: 1rem; font-family: inherit; cursor: pointer; }
 html, body, #root { margin: 0; height: 100%; }
 body {
   font-family: sans-serif;

src/pages/EnterScores.tsx

@@ -1,12 +1,13 @@
+import PageFrame from '../components/PageFrame'
+
 interface Props {
   onSubmit: () => void
 }
 
 export default function EnterScores({ onSubmit }: Props) {
   return (
-    <div>
+    <PageFrame title="Enter Scores">
-      <h1>Enter Scores</h1>
       <button onClick={onSubmit}>Submit</button>
-    </div>
+    </PageFrame>
   )
 }

src/pages/PlayerSetup.tsx

@@ -1,12 +1,14 @@
+import PageFrame from '../components/PageFrame'
+import PrimaryButton from '../components/PrimaryButton'
+
 interface Props {
   onStart: () => void
 }
 
 export default function PlayerSetup({ onStart }: Props) {
   return (
-    <div>
+    <PageFrame title="Player Setup" footer={<PrimaryButton onClick={onStart}>Start</PrimaryButton>}>
-      <h1>Player Setup</h1>
+      {null}
-      <button onClick={onStart}>Start</button>
+    </PageFrame>
-    </div>
   )
 }

src/pages/ScoreSheet.tsx

@@ -1,3 +1,5 @@
+import PageFrame from '../components/PageFrame'
+
 interface Props {
   onScoreRound: () => void
   onNewGame: () => void
@@ -5,10 +7,9 @@ interface Props {
 
 export default function ScoreSheet({ onScoreRound, onNewGame }: Props) {
   return (
-    <div>
+    <PageFrame title="Score Sheet">
-      <h1>Score Sheet</h1>
       <button onClick={onScoreRound}>Score Round</button>
       <button onClick={onNewGame} style={{ fontSize: '0.75em' }}>New Game</button>
-    </div>
+    </PageFrame>
   )
 }

src/pages/TitleScreen.module.css

@@ -39,14 +39,3 @@
   right: 1.5rem;
 }
 
-.newGameButton {
-  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);
-}

src/pages/TitleScreen.tsx

@@ -1,4 +1,5 @@
 import styles from './TitleScreen.module.css'
+import PrimaryButton from '../components/PrimaryButton'
 
 interface Props {
   onNewGame: () => void
@@ -12,9 +13,7 @@ export default function TitleScreen({ onNewGame }: Props) {
         <span className={styles.titleNumber}>7</span>
       </div>
       <div className={styles.buttonRow}>
-        <button className={styles.newGameButton} onClick={onNewGame}>
+        <PrimaryButton onClick={onNewGame}>New Game</PrimaryButton>
-          New Game
-        </button>
       </div>
     </div>
   )