Add help modal and back button to score entry pages

HelpModal component shows game setup and scoring rules in a scrollable
overlay, triggered by a ? button top-right on Player Setup and Enter
Scores. Enter Scores also gets a ← back button top-left that returns
to the scoresheet without saving. PageFrame gains a headerActionLeft
slot to support the left-side button.

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

src/components/HelpModal.module.css

@@ -0,0 +1,31 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-parchment);
+  border: 2px solid black;
+  border-radius: 1.5rem;
+  width: calc(100% - 4rem);
+  max-width: 22rem;
+  max-height: 80vh;
+  overflow: hidden;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem 1.5rem 1rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.dismiss {
+  margin: 0 1.5rem 1.5rem;
+  padding: 0.6rem 1rem;
+  background: var(--color-blue);
+  color: black;
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}

src/components/HelpModal.tsx

@@ -0,0 +1,28 @@
+import styles from './HelpModal.module.css'
+
+interface Props {
+  onClose: () => void
+}
+
+export default function HelpModal({ onClose }: Props) {
+  return (
+    <div className={styles.box}>
+      <div className={styles.body}>
+          <h3>Setup</h3>
+          <ul>
+              <li>3 players, remove all 1s and 2s</li>
+              <li>4-6 players, use everything</li>
+              <li>7-8 players, remove non-yellow 2s</li>
+          </ul>
+          <h3>Scoring</h3>
+          <ul>
+              <li>Gold good! Each gold card is +5 points</li>
+              <li>Red bad! Each bad card -10 points</li>
+              <li>Black seven <em>very</em> bad: -50 points each</li>
+              <li>Last trick very good: +50 points</li>
+          </ul>
+      </div>
+      <button className={styles.dismiss} onClick={onClose}>Got it</button>
+    </div>
+  )
+}

src/components/PageFrame.module.css

@@ -11,10 +11,16 @@
 
 .headerAction {
   position: absolute;
-  top: 0.75rem;
+  top: 1rem;
   right: 1rem;
 }
 
+.headerActionLeft {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
+
 .title {
   margin: 0;
   font-size: 1.5rem;

src/components/PageFrame.tsx

@@ -5,16 +5,18 @@ interface Props {
   children: React.ReactNode
   footer?: React.ReactNode
   headerAction?: React.ReactNode
+  headerActionLeft?: React.ReactNode
   overlay?: React.ReactNode
 }
 
-export default function PageFrame({ title, children, footer, headerAction, overlay }: Props) {
+export default function PageFrame({ title, children, footer, headerAction, headerActionLeft, overlay }: Props) {
   return (
     <div className={styles.frame}>
       <header className={styles.header}>
         <h1 className={styles.title}>{title}</h1>
         <div className={styles.rule} role="separator" />
         {headerAction && <div className={styles.headerAction}>{headerAction}</div>}
+        {headerActionLeft && <div className={styles.headerActionLeft}>{headerActionLeft}</div>}
       </header>
       <div className={styles.content}>
         {children}