Fianlize deck strip and management

styles/components/_roster-strip.less

@@ -43,13 +43,92 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 44px;
+  max-width: 83px;
   overflow: hidden;
   transition: max-width 200ms ease-in-out;
 
   &.is-expanded {
     max-width: 240px;
   }
+
+  // Horizontal and mosaic layouts: width is controlled by JS setPosition
+  &.sp-layout-horizontal-sm,
+  &.sp-layout-horizontal-md,
+  &.sp-layout-mosaic-sm,
+  &.sp-layout-mosaic-md {
+    max-width: none;
+    align-items: flex-start;
+  }
+}
+
+// ── Horizontal layout ────────────────────────────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md {
+  .sp-strip__participants {
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 4px;
+    gap: 4px;
+    justify-content: flex-start;
+    width: auto;
+  }
+}
+
+// ── Mosaic layout ────────────────────────────────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
+  .sp-strip__participants {
+    display: grid;
+    padding: 4px;
+    gap: 4px;
+    // Keep width: 100% (from base) so auto-fill has a definite inline size
+  }
+}
+
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 83px);
+}
+
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
+  grid-template-columns: repeat(auto-fill, 150px);
+}
+
+// ── Medium tile size for horizontal / mosaic ─────────────────────────────────
+.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md,
+.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
+  .sp-participant-avatar {
+    width: 150px;
+    height: 150px;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 4px 4px;
+    gap: 4px;
+
+    .sp-avatar__img {
+      width: 91px;
+      height: 91px;
+      border-radius: 6px;
+      flex-shrink: 0;
+    }
+
+    .sp-avatar__name {
+      display: block;
+      font-size: 0.65rem;
+      text-align: center;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .sp-avatar__corner-badge {
+      bottom: 4px;
+      right: 4px;
+    }
+
+    // Remove the is-expanded overlay styles that interfere with tile layout
+    &::after { display: none; }
+  }
 }
 
 // ── Drag grip (top bar, replaces window header drag affordance) ────────────────
@@ -109,8 +188,8 @@
 }
 
 .sp-strip__toggle {
-  width: 44px;
-  min-width: 44px;
+  width: 83px;
+  min-width: 83px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -164,6 +243,10 @@
   gap: 4px;
 }
 
+.sp-strip__participant-item {
+  margin: 0; // override browser/Foundry default <li> margins
+}
+
 .sp-strip__first-tip {
   font-size: 0.75rem;
   color: var(--sp-text-muted, hsl(0, 0%, 60%));
@@ -176,8 +259,8 @@
 // ============================================================
 .sp-participant-avatar {
   position: relative;
-  width: 44px;
-  height: 44px;
+  width: 83px;
+  height: 83px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -223,6 +306,7 @@
       z-index: 1;
       width: 48px;
       height: 48px;
+      border-radius: 6px; // card view — rectangular
     }
 
     .sp-avatar__name {
@@ -266,9 +350,9 @@
 }
 
 .sp-avatar__img {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -278,7 +362,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 50%;
+  border-radius: 6px;
   background: hsl(220, 15%, 18%);
   
   .is-expanded & {