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>
This commit is contained in:
2026-05-27 00:23:36 -05:00
parent 3b6bd6815d
commit e0a6aed4cf
7 changed files with 49 additions and 59 deletions
+19
View File
@@ -0,0 +1,19 @@
.card {
position: fixed;
inset: 1rem;
border: 2px solid black;
border-radius: 2rem;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pressable {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: transform 80ms ease, box-shadow 80ms ease;
}
.pressable:active:not(:disabled) {
transform: translateY(2px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}