feat: add progression logic for puzzle residences

- Implemented functions to manage puzzle progress including checking if residences are started, complete, and unlocked.
- Added utility functions to retrieve piece IDs based on residence and route.
- Introduced a new TypeScript file for progression management.
- Integrated puzzle data configuration and residence data for seamless progression tracking.

src/components/letter/LetterTemplate.tsx

@@ -442,19 +442,28 @@ const LetterTemplate = ({
               <div
                 className="relative w-[1200px] h-full pointer-events-auto"
                 onClick={(e) => e.stopPropagation()}
-                style={{ perspective: '1200px' }}
+                style={{
+                  perspective: '1200px',
+                  WebkitPerspective: '1200px',
+                }}
               >
                 <motion.div
                   className="relative w-full h-full"
                   initial={false}
                   animate={{ rotateY: submitted ? 180 : 0 }}
                   transition={{ duration: 0.7, ease: 'easeInOut' }}
-                  style={{ transformStyle: 'preserve-3d' }}
+                  style={{
+                    transformStyle: 'preserve-3d',
+                    WebkitTransformStyle: 'preserve-3d',
+                  }}
                 >
                   <div
                     className="absolute inset-0"
                     style={{
                       backfaceVisibility: 'hidden',
+                      WebkitBackfaceVisibility: 'hidden',
+                      transform: 'translateZ(0)',
+                      WebkitTransform: 'translateZ(0)',
                       pointerEvents: submitted ? 'none' : 'auto',
                     }}
                   >
@@ -510,8 +519,10 @@ const LetterTemplate = ({
                   <div
                     className="absolute inset-0"
                     style={{
-                      transform: 'rotateY(180deg)',
+                      transform: 'rotateY(180deg) translateZ(0)',
+                      WebkitTransform: 'rotateY(180deg) translateZ(0)',
                       backfaceVisibility: 'hidden',
+                      WebkitBackfaceVisibility: 'hidden',
                       pointerEvents: submitted ? 'auto' : 'none',
                     }}
                   >