Centralize duplicated card shell, press animation, and color tokens

Extract the rounded-card shell and button press animation into a shared
CSS module composed by PageFrame, TitleScreen, and all buttons, add color
tokens for repeated values, and load the saved game once on mount.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/PageFrame.module.css

@@ -1,12 +1,6 @@
 .frame {
-  position: fixed;
-  inset: 1rem;
-  border: 2px solid black;
-  border-radius: 2rem;
-  background: #f5f0e4;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  composes: card from '../styles/shared.module.css';
+  background: var(--color-parchment);
 }
 
 .header {
@@ -23,7 +17,7 @@
 .rule {
   position: relative;
   border: none;
-  border-top: 1px solid #c8b99a;
+  border-top: 1px solid var(--color-parchment-border);
   margin: 0.75rem 0 0;
 }
 
@@ -33,10 +27,10 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #f5f0e4;
+  background: var(--color-parchment);
   padding: 0 0.35em;
   font-size: 0.55rem;
-  color: #c8b99a;
+  color: var(--color-parchment-border);
   line-height: 1;
 }
 

src/components/PrimaryButton.module.css

@@ -1,19 +1,13 @@
 .button {
+  composes: pressable from '../styles/shared.module.css';
   width: 100%;
   padding: 1rem;
-  background: #a8d5e8;
+  background: var(--color-blue);
   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:not(:disabled) {
-  transform: translateY(2px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 .button:disabled {