feat(private-room): add image grid and swipe gallery

Render unlocked albums as adaptive nine-image grids and open the selected source image in the Gallery. Add pointer-driven swipe thresholds, edge resistance, animated snapping, adjacent-image loading, reduced-motion support, and coverage for filtering and navigation.

src/app/private-room/private-room-screen.module.css

@@ -384,47 +384,64 @@
   font-weight: 760;
 }
 
-.mediaCover {
+.mediaGrid {
+  display: grid;
+  gap: 4px;
+  margin-top: 14px;
+}
+
+.mediaGridSingle {
+  width: min(72%, 280px);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mediaGridDouble {
+  width: min(72%, 320px);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mediaGridTriple {
+  width: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mediaGridItem {
   position: relative;
   display: block;
   width: 100%;
-  margin-top: 14px;
+  aspect-ratio: 1;
   padding: 0;
   border: 0;
   overflow: hidden;
-  border-radius: clamp(20px, 5.185vw, 28px);
+  border-radius: 6px;
   background: #f3eef0;
   cursor: pointer;
   font: inherit;
-  text-align: inherit;
-  box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
+  transition: filter 0.16s ease, transform 0.16s ease;
 }
 
-.momentCoverImage {
-  display: block;
-  width: 100%;
-  height: auto;
+.mediaGridSingle .mediaGridItem {
   aspect-ratio: 4 / 5;
-  object-fit: cover;
 }
 
-.mediaCountBadge {
+.mediaGridImage {
+  object-fit: cover;
+  user-select: none;
+}
+
+.mediaGridOverflow {
   position: absolute;
-  top: 12px;
-  right: 12px;
-  display: inline-flex;
-  min-height: 30px;
+  inset: 0;
+  z-index: 1;
+  display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 11px;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 999px;
-  background: rgba(28, 19, 23, 0.72);
+  justify-content: center;
+  background: rgba(24, 18, 21, 0.56);
   color: #ffffff;
-  font-size: 12px;
-  font-weight: 800;
-  box-shadow: 0 8px 18px rgba(28, 19, 23, 0.18);
-  backdrop-filter: blur(12px);
+  font-size: clamp(22px, 6.296vw, 34px);
+  font-weight: 760;
+  letter-spacing: -0.02em;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
 }
 
 .emptyMediaCover {
@@ -474,12 +491,37 @@
   overflow: hidden;
   background: #090909;
   color: #ffffff;
-  touch-action: pan-y;
+  overscroll-behavior: contain;
 }
 
-.galleryImageFrame {
+.galleryViewport {
   position: absolute;
   inset: 0;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: pan-y;
+  user-select: none;
+}
+
+.galleryViewport[data-dragging="true"] {
+  cursor: grabbing;
+}
+
+.gallerySlide {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  transform: translate3d(
+    calc(var(--gallery-slide-offset, 0%) + var(--gallery-drag-offset, 0px)),
+    0,
+    0
+  );
+  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.galleryViewport[data-dragging="true"] .gallerySlide {
+  transition: none;
 }
 
 .galleryImage {
@@ -630,7 +672,7 @@
   transform: translateY(-1px);
 }
 
-.mediaCover:hover {
+.mediaGridItem:hover {
   filter: brightness(1.02);
 }
 
@@ -644,7 +686,7 @@
   transform: translateY(1px) scale(0.99);
 }
 
-.mediaCover:active {
+.mediaGridItem:active {
   transform: scale(0.995);
 }
 
@@ -658,7 +700,7 @@
 
 .primaryCta:focus-visible,
 .lockedPreview:focus-visible,
-.mediaCover:focus-visible,
+.mediaGridItem:focus-visible,
 .galleryClose:focus-visible,
 .galleryNav:focus-visible,
 .dialogPrimary:focus-visible,
@@ -690,3 +732,9 @@
     transform: scale(1.01);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .gallerySlide {
+    transition: none;
+  }
+}