Various enhancements, restyling and new options

styles/components/_buttons.less

@@ -0,0 +1,91 @@
+/**
+ * styles/components/_buttons.less
+ *
+ * Shared SP button component — single source of truth for all dialog buttons.
+ * Imported by each dialog that needs buttons; all selectors scoped under
+ * the dialog's own namespace.
+ */
+
+// Base button — every dialog button should extend this
+.sp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-btn-gap, 6px);
+  padding: var(--sp-btn-padding, 7px 14px);
+  font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--sp-btn-font-size, 12px);
+  font-weight: 600;
+  border: 1px solid transparent;
+  border-radius: var(--sp-btn-radius, 5px);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+  line-height: 1.2;
+  user-select: none;
+
+  i { font-size: 0.9em; pointer-events: none; }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Primary action — green accent
+  &--primary {
+    background: var(--sp-btn-primary-bg, var(--sp-accent));
+    color: var(--sp-btn-primary-text, #fff);
+    letter-spacing: 0.02em;
+
+    &:hover:not(:disabled) {
+      background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
+      color: var(--sp-btn-primary-text, #fff);
+    }
+    &:active:not(:disabled) {
+      background: var(--sp-btn-primary-active, var(--sp-accent-active));
+    }
+  }
+
+  // Secondary — subtle, neutral
+  &--secondary {
+    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+    font-weight: 500;
+
+    &:hover:not(:disabled) {
+      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
+    }
+  }
+
+  // Danger — red
+  &--danger {
+    background: var(--sp-btn-danger-bg, var(--sp-color-red));
+    color: var(--sp-btn-danger-text, #fff);
+
+    &:hover:not(:disabled) {
+      background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
+    }
+  }
+
+  // Sizes
+  &--sm {
+    padding: var(--sp-btn-padding-sm, 4px 10px);
+    font-size: var(--sp-btn-font-size-sm, 11px);
+  }
+
+  &--lg {
+    padding: var(--sp-btn-padding-lg, 9px 18px);
+    font-size: var(--sp-btn-font-size-lg, 13px);
+  }
+
+  // Icon-only
+  &--icon {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    font-size: 13px;
+    justify-content: center;
+  }
+}

styles/components/_confirmation-bar.less

@@ -94,13 +94,13 @@
       
       // Hover state
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-        color: var(--sp-accent-emphasis, var(--sp-accent));
+        background-color: rgba(255, 255, 255, 0.06);
+        color: var(--sp-accent-hover);
       }
       
       // Active state
       &:active {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(255, 255, 255, 0.1);
       }
       
       // Focus state

styles/components/_directors-board.less

@@ -10,14 +10,13 @@
 // via DEFAULT_OPTIONS.classes. The content section and footer live inside PARTS.
 
 .scrying-pool.directors-board {
-  background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
+  background: var(--sp-dialog-bg);
   color: var(--sp-text-primary);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-top: 2px solid hsl(200, 55%, 40%);
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
-              inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  
+  border: var(--sp-dialog-border);
+  border-top: 2px solid var(--sp-accent);
+  border-radius: var(--sp-dialog-radius);
+  box-shadow: var(--sp-dialog-shadow);
+
   /* Ensure Director's Board appears above the video strip */
   z-index: 100;
 
@@ -40,13 +39,13 @@
     align-items: center;
     justify-content: center;
     cursor: grab;
-    color: var(--sp-text-muted, hsl(0, 0%, 70%));
+    color: var(--sp-text-muted);
     opacity: 0.35;
     font-size: 10px;
     flex-shrink: 0;
     transition: opacity 0.15s, background 0.15s;
     user-select: none;
-    border-radius: 8px 8px 0 0;
+    border-radius: var(--sp-dialog-radius) var(--sp-dialog-radius) 0 0;
 
     &:hover  { opacity: 0.8; background: rgba(255, 255, 255, 0.03); }
     &:active { cursor: grabbing; opacity: 1; }
@@ -67,7 +66,7 @@
     background: transparent;
     color: var(--sp-text-muted);
     border: none;
-    border-radius: var(--sp-radius-sm, 3px);
+    border-radius: var(--sp-radius-sm);
     cursor: pointer;
     opacity: 0.5;
     transition: opacity 0.15s, background 0.15s, color 0.15s;
@@ -107,7 +106,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 4px 8px;
+    padding: 5px 8px;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     flex-shrink: 0;
     flex-wrap: wrap;
@@ -117,31 +116,43 @@
   .directors-board__bulk-btn {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    background: rgba(74, 111, 156, 0.7);
-    color: #e8edf2;
-    border: 1px solid rgba(74, 111, 156, 0.4);
-    border-radius: 3px;
-    padding: 3px 8px;
+    gap: var(--sp-btn-gap, 6px);
+    padding: var(--sp-btn-padding-sm, 4px 10px);
+    font-size: var(--sp-btn-font-size-sm, 11px);
+    font-weight: 600;
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
-    transition: background 0.15s, opacity 0.15s;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    line-height: 1.2;
+    border: 1px solid transparent;
 
-    i { font-size: 10px; }
+    i { font-size: 10px; pointer-events: none; }
 
-    &:hover { background: rgba(74, 111, 156, 0.95); }
+    // Primary (show/hide) — green
+    background: rgba(74, 158, 107, 0.75);
+    color: #e8f0ea;
+    border-color: rgba(74, 158, 107, 0.4);
+
+    &:hover { background: rgba(74, 158, 107, 0.95); }
     &:active { opacity: 0.8; }
 
+    // Undo — neutral
     &--undo {
-      background: transparent;
-      color: var(--sp-text-muted);
-      border: 1px solid rgba(255, 255, 255, 0.12);
+      background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+      color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+      border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+      font-weight: 500;
 
-      &:hover { color: var(--sp-text-primary, #dde2e8); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
+      &:hover {
+        background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+        color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
+        border-color: rgba(255, 255, 255, 0.25);
+      }
     }
 
+    // Restore spotlight — purple (distinct semantic)
     &--restore {
-      background: rgba(123, 79, 166, 0.7);
+      background: rgba(123, 79, 166, 0.75);
       border-color: rgba(123, 79, 166, 0.4);
       &:hover { background: rgba(123, 79, 166, 0.95); }
     }
@@ -150,8 +161,8 @@
   // ── Help / shortcut-panel button ───────────────────────────────────────────
   .directors-board__help-btn {
     margin-left: auto;
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: transparent;
@@ -164,31 +175,36 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
 
-    &:hover { background: rgba(74, 111, 156, 0.8); color: #fff; border-color: transparent; }
+    &:hover {
+      background: rgba(74, 158, 107, 0.8);
+      color: #fff;
+      border-color: transparent;
+    }
   }
 
   // ── Footer (preset actions) ────────────────────────────────────────────────
   .directors-board__footer {
     display: flex;
     flex-direction: column;
-    gap: 3px;
-    padding: 5px 8px 6px;
+    gap: 4px;
+    padding: 6px 8px 8px;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     flex-shrink: 0;
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
   }
 
   .directors-board__footer-group {
     display: flex;
     align-items: center;
-    gap: 3px;
+    gap: 4px;
 
     &--presets { flex-wrap: wrap; }
 
     &--controls {
-      padding-top: 3px;
+      padding-top: 4px;
       border-top: 1px solid rgba(255, 255, 255, 0.05);
     }
   }
@@ -206,21 +222,26 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
-    font-size: 10px;
-    background: rgba(74, 111, 156, 0.65);
-    color: #d8e4f0;
-    border: 1px solid rgba(74, 111, 156, 0.35);
-    border-radius: 3px;
-    padding: 4px 6px;
+    gap: var(--sp-btn-gap, 6px);
+    padding: var(--sp-btn-padding-sm, 4px 10px);
+    font-size: var(--sp-btn-font-size-sm, 11px);
+    font-weight: 600;
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
-    transition: background 0.15s, opacity 0.15s;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
     white-space: nowrap;
+    line-height: 1.2;
+    border: 1px solid transparent;
 
-    i { font-size: 0.9em; }
+    i { font-size: 0.9em; pointer-events: none; }
 
-    &:hover { background: rgba(74, 111, 156, 0.9); }
-    &:active { opacity: 0.75; }
+    // Default — green primary
+    background: rgba(74, 158, 107, 0.7);
+    color: #e8f0ea;
+    border-color: rgba(74, 158, 107, 0.35);
+
+    &:hover { background: rgba(74, 158, 107, 0.9); color: #fff; }
+    &:active { opacity: 0.8; }
 
     &[disabled] {
       cursor: not-allowed;
@@ -230,39 +251,57 @@
       border: 1px solid rgba(255, 255, 255, 0.08);
     }
 
+    // Secondary — neutral
     &--secondary {
-      background: rgba(255, 255, 255, 0.05);
-      color: var(--sp-text-secondary, #9aa4b0);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-      &:hover { background: rgba(255, 255, 255, 0.1); color: #dde2e8; }
+      background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+      color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+      border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+      font-weight: 500;
+
+      &:hover {
+        background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+        color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
+      }
     }
 
+    // Auto-apply toggle — neutral (same as secondary)
     &--auto-apply {
-      background: rgba(255, 255, 255, 0.05);
-      color: var(--sp-text-secondary, #9aa4b0);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-      &:hover { background: rgba(255, 255, 255, 0.1); color: #dde2e8; }
+      background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+      color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+      border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+      font-weight: 500;
+
+      &:hover {
+        background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+        color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
+      }
     }
 
+    // AV mode — neutral-muted
     &--av {
       background: rgba(30, 35, 45, 0.8);
       border: 1px solid rgba(255, 255, 255, 0.1);
-      color: var(--sp-text-muted, #aaa);
+      color: var(--sp-text-muted);
+      font-weight: 500;
       &:hover { background: rgba(50, 55, 70, 0.9); }
     }
 
+    // AV mode active — red tone
     &--av-active {
       background: rgba(90, 42, 42, 0.85);
       border-color: rgba(160, 64, 64, 0.6);
       color: #f0a0a0;
+      font-weight: 500;
       &:hover { background: rgba(110, 50, 50, 0.95); }
     }
 
+    // AV config — icon-only
     &--av-config {
       background: rgba(30, 35, 45, 0.8);
       border: 1px solid rgba(255, 255, 255, 0.1);
-      color: var(--sp-text-muted, #aaa);
+      color: var(--sp-text-muted);
       flex: 0 0 auto;
+      font-weight: 500;
       &:hover { background: rgba(50, 55, 70, 0.9); }
     }
   }
@@ -280,7 +319,7 @@
 
   .directors-board__dock-layout-label {
     font-size: 10px;
-    color: var(--sp-text-muted, hsl(0, 0%, 60%));
+    color: var(--sp-text-muted);
     text-transform: uppercase;
     letter-spacing: 0.04em;
     flex-shrink: 0;
@@ -312,9 +351,9 @@
     gap: 1px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
-    color: var(--sp-text-muted, hsl(0, 0%, 65%));
+    color: var(--sp-text-muted);
     padding: 0;
     transition: background 0.15s, border-color 0.15s, color 0.15s;
 
@@ -322,14 +361,14 @@
 
     &:hover {
       background: rgba(255, 255, 255, 0.1);
-      color: var(--sp-text-primary, #dde2e8);
+      color: var(--sp-text-primary);
       border-color: rgba(255, 255, 255, 0.2);
     }
 
     &.is-active {
-      background: hsl(200, 50%, 25%);
-      border-color: hsl(200, 55%, 45%);
-      color: hsl(200, 80%, 75%);
+      background: rgba(74, 158, 107, 0.2);
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
     }
   }
 
@@ -340,4 +379,131 @@
     letter-spacing: 0.02em;
     pointer-events: none;
   }
+
+  // ── Tile shape selector bar ──────────────────────────────────────────────
+  .directors-board__tile-shape-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    flex-shrink: 0;
+    background: rgba(0, 0, 0, 0.12);
+  }
+
+  .directors-board__tile-shape-label {
+    font-size: 10px;
+    color: var(--sp-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+    margin-right: 2px;
+  }
+
+  .directors-board__tile-shape-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .directors-board__tile-border-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    flex-shrink: 0;
+    background: rgba(0, 0, 0, 0.12);
+  }
+
+  .directors-board__tile-border-label {
+    font-size: 10px;
+    color: var(--sp-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+    margin-right: 2px;
+  }
+
+  .directors-board__tile-border-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .directors-board__tile-border-btn {
+    height: 24px;
+    min-width: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    cursor: pointer;
+    color: var(--sp-text-secondary, #7a8390);
+    font-size: 10px;
+    padding: 0 6px;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+
+    &.is-active {
+      background: hsla(200, 70%, 55%, 0.2);
+      border-color: hsla(200, 70%, 55%, 0.6);
+      color: var(--sp-text-primary, #dde2e8);
+    }
+
+    &:hover:not(.is-active) {
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--sp-text-primary, #dde2e8);
+    }
+  }
+
+  .directors-board__tile-border-color {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: var(--sp-btn-radius, 5px);
+    cursor: pointer;
+    background: none;
+    flex-shrink: 0;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 2px;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 3px;
+    }
+  }
+
+  .directors-board__tile-shape-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    cursor: pointer;
+    color: var(--sp-text-muted);
+    padding: 0;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+
+    i { font-size: 11px; pointer-events: none; }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--sp-text-primary);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &.is-active {
+      background: rgba(74, 158, 107, 0.2);
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+    }
+  }
 }

styles/components/_participant-card.less

@@ -130,6 +130,29 @@
   }
 }
 
+// ── Shape variants (applied via .sp-shape-* on .participant-card) ─────────
+.scrying-pool .participant-card {
+  &.sp-shape-rounded {
+    --sp-shape-clip: inset(0 round 6px);
+  }
+
+  &.sp-shape-circle {
+    --sp-shape-clip: circle(50%);
+  }
+
+  &.sp-shape-hexagon {
+    --sp-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  }
+
+  &.sp-shape-octagon {
+    --sp-shape-clip: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
+  }
+
+  .participant-card__avatar img {
+    clip-path: var(--sp-shape-clip, none);
+  }
+}
+
 // ── Reduced motion ────────────────────────────────────────────────────────
 @media (prefers-reduced-motion: reduce) {
   .scrying-pool .participant-card {

styles/components/_player-privacy-panel.less

@@ -11,9 +11,13 @@
 .scrying-pool {
   // Dialog root element
   &.player-privacy-panel {
-    background: var(--sp-surface);
+    background: var(--sp-dialog-bg);
     color: var(--sp-text-primary);
     font-family: var(--font-primary, inherit);
+    border: var(--sp-dialog-border);
+    border-top: 2px solid var(--sp-accent);
+    border-radius: var(--sp-dialog-radius);
+    box-shadow: var(--sp-dialog-shadow);
   }
 
   // Container
@@ -43,9 +47,9 @@
   }
 
   .player-privacy-panel__notice--readonly {
-    background: hsla(48, 88%, 55%, 0.10);
-    color: hsl(48, 88%, 60%);
-    border: 1px solid hsla(48, 88%, 55%, 0.25);
+    background: var(--sp-color-yellow-subtle);
+    color: var(--sp-color-yellow);
+    border: 1px solid var(--sp-color-yellow-subtle);
   }
 
   // Section
@@ -82,13 +86,13 @@
   // Individual effect card
   .player-privacy-panel__effect {
     padding: 8px 10px;
-    border: 1px solid var(--sp-border);
-    border-radius: 5px;
-    background: linear-gradient(135deg, hsl(215,25%,11%) 0%, hsl(215,22%,9%) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    background: rgba(0, 0, 0, 0.15);
     transition: border-color 120ms ease;
 
     &:hover {
-      border-color: var(--sp-border-hover, rgba(255,255,255,0.15));
+      border-color: rgba(255, 255, 255, 0.2);
     }
   }
 
@@ -173,11 +177,11 @@
 
     i { font-size: 9px; opacity: 0.7; }
 
-    // Enabled state
+    // Enabled state — using accent green from SP tokens
     .player-privacy-panel__toggle-input:checked + & {
-      background: rgba(46, 160, 67, 0.18);
-      color: hsl(134, 61%, 60%);
-      border-color: rgba(46, 160, 67, 0.4);
+      background: var(--sp-color-green-subtle);
+      color: var(--sp-color-green);
+      border-color: color-mix(in srgb, var(--sp-accent) 40%, transparent);
 
       i { opacity: 1; }
     }
@@ -188,7 +192,7 @@
     }
     .player-privacy-panel__toggle-input:checked + &:hover,
     .player-privacy-panel__toggle-label:hover .player-privacy-panel__toggle-input:checked + & {
-      background: rgba(46, 160, 67, 0.25);
+      background: color-mix(in srgb, var(--sp-accent) 25%, transparent);
     }
   }
 
@@ -203,10 +207,10 @@
     flex-shrink: 0;
     width: 80px;
     height: 80px;
-    border: 2px solid var(--sp-border);
+    border: 2px solid rgba(255, 255, 255, 0.12);
     border-radius: 6px;
     overflow: hidden;
-    background: hsl(215,25%,11%);
+    background: rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -227,19 +231,45 @@
 
   .player-privacy-panel__portrait-choose,
   .player-privacy-panel__portrait-remove {
-    font-size: 12px;
-    padding: 5px 10px;
+    font-size: var(--sp-btn-font-size, 12px);
+    padding: var(--sp-btn-padding-sm, 5px 10px);
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: var(--sp-btn-gap, 6px);
+    border: 1px solid transparent;
+    border-radius: var(--sp-btn-radius, 5px);
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    line-height: 1.2;
+  }
+
+  .player-privacy-panel__portrait-choose {
+    background: var(--sp-btn-primary-bg, var(--sp-accent));
+    color: var(--sp-btn-primary-text, #fff);
+
+    &:hover { background: var(--sp-btn-primary-hover, var(--sp-accent-hover)); }
+  }
+
+  .player-privacy-panel__portrait-remove {
+    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+    font-weight: 500;
+
+    &:hover {
+      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
+    }
   }
 
   // GM Privacy Selector dialog
   &.gm-privacy-selector-dialog {
-    background: var(--sp-surface);
-    border: 1px solid var(--sp-border);
-    border-radius: 6px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    background: var(--sp-dialog-bg);
+    border: var(--sp-dialog-border);
+    border-top: 2px solid var(--sp-accent);
+    border-radius: var(--sp-dialog-radius);
+    box-shadow: var(--sp-dialog-shadow);
     min-width: 320px;
     max-width: 480px;
     overflow: hidden;
@@ -248,7 +278,6 @@
   .sp-gm-privacy-selector {
     display: flex;
     flex-direction: column;
-    background: var(--sp-surface);
   }
 
   .sp-dialog-header {
@@ -256,8 +285,8 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px 14px;
-    border-bottom: 1px solid var(--sp-border);
-    background: var(--sp-surface-raised);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.15);
 
     h2 {
       margin: 0;
@@ -292,8 +321,7 @@
     margin: 0;
     font-size: 12px;
     color: var(--sp-text-secondary);
-    background: var(--sp-surface);
-    border-bottom: 1px solid var(--sp-border);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
 
   .sp-user-list {
@@ -301,7 +329,6 @@
     flex-direction: column;
     padding: 8px;
     gap: 4px;
-    background: var(--sp-surface);
   }
 
   .sp-user-item {
@@ -309,14 +336,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 7px 12px;
-    border: 1px solid var(--sp-border);
-    border-radius: 4px;
-    background: linear-gradient(135deg, hsl(215,25%,11%) 0%, hsl(215,22%,9%) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    background: rgba(0, 0, 0, 0.15);
     cursor: pointer;
     transition: background 120ms ease, border-color 120ms ease;
 
     &:hover {
-      background: hsl(215,25%,14%);
+      background: rgba(0, 0, 0, 0.25);
       border-color: var(--sp-accent);
     }
   }
@@ -332,9 +359,9 @@
     font-size: 11px;
     color: var(--sp-text-secondary);
     padding: 2px 6px;
-    border: 1px solid var(--sp-border);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 3px;
-    background: rgba(255,255,255,0.04);
+    background: rgba(255, 255, 255, 0.04);
     text-transform: uppercase;
     letter-spacing: 0.03em;
   }

styles/components/_preset-import-export.less

@@ -16,8 +16,12 @@
 
 .scrying-pool.dialog.preset-export,
 .scrying-pool.dialog.preset-import {
-  background: var(--sp-surface);
+  background: var(--sp-dialog-bg);
   color: var(--sp-text-primary);
+  border: var(--sp-dialog-border);
+  border-top: 2px solid var(--sp-accent);
+  border-radius: var(--sp-dialog-radius);
+  box-shadow: var(--sp-dialog-shadow);
 
   .sp-dialog-content {
     padding: var(--sp-space-m);
@@ -29,8 +33,9 @@
     justify-content: flex-end;
     gap: var(--sp-space-xs);
     padding: var(--sp-space-m);
-    border-top: 1px solid var(--sp-border);
-    background: var(--sp-surface);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
   }
 
   // Description text
@@ -89,61 +94,66 @@
   }
 
   // ---------------------------------------------------------------------------
-  // Buttons
+  // Buttons — using shared SP button tokens
   // ---------------------------------------------------------------------------
 
   .sp-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--sp-space-xs);
-    padding: var(--sp-space-xs) var(--sp-space-m);
-    border: none;
-    border-radius: var(--sp-radius-sm);
-    font-size: var(--sp-font-size-sm);
-    font-weight: 500;
+    gap: var(--sp-btn-gap, 6px);
+    padding: var(--sp-btn-padding, 7px 14px);
+    border: 1px solid transparent;
+    border-radius: var(--sp-btn-radius, 5px);
+    font-size: var(--sp-btn-font-size, 12px);
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+    line-height: 1.2;
 
     &:disabled {
-      opacity: 0.5;
+      opacity: 0.45;
       cursor: not-allowed;
+      pointer-events: none;
     }
 
     i {
       font-size: 0.9em;
+      pointer-events: none;
     }
   }
 
   .sp-btn-primary {
-    background: var(--sp-accent);
-    color: var(--sp-accent-text);
+    background: var(--sp-btn-primary-bg, var(--sp-accent));
+    color: var(--sp-btn-primary-text, #fff);
 
     &:hover:not(:disabled) {
-      background: var(--sp-accent-hover);
+      background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
     }
 
     &:active:not(:disabled) {
-      background: var(--sp-accent-active);
+      background: var(--sp-btn-primary-active, var(--sp-accent-active));
     }
   }
 
   .sp-btn-secondary {
-    background: var(--sp-surface-subtle);
-    color: var(--sp-text-primary);
-    border: 1px solid var(--sp-border);
+    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+    font-weight: 500;
 
     &:hover:not(:disabled) {
-      background: var(--sp-surface);
+      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
     }
   }
 
   .sp-btn-danger {
-    background: var(--sp-color-red);
-    color: white;
+    background: var(--sp-btn-danger-bg, var(--sp-color-red));
+    color: var(--sp-btn-danger-text, #fff);
 
     &:hover:not(:disabled) {
-      background: var(--sp-color-red-dark);
+      background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
     }
   }
 
@@ -173,17 +183,17 @@
     align-items: center;
     gap: var(--sp-space-xs);
     padding: var(--sp-space-sm) var(--sp-space-m);
-    background: var(--sp-surface-subtle);
-    border: 1px dashed var(--sp-border);
-    border-radius: var(--sp-radius-sm);
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px dashed rgba(255, 255, 255, 0.2);
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
     color: var(--sp-text-secondary);
-    transition: all 0.15s ease;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
 
     &:hover {
       border-color: var(--sp-accent);
       color: var(--sp-accent);
-      background: var(--sp-surface);
+      background: rgba(255, 255, 255, 0.06);
     }
 
     i {
@@ -222,12 +232,12 @@
     align-items: flex-start;
     gap: var(--sp-space-sm);
     padding: var(--sp-space-xs) var(--sp-space-sm);
-    border-radius: var(--sp-radius-sm);
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
     transition: background 0.15s ease;
 
     &:hover {
-      background: var(--sp-surface-subtle);
+      background: rgba(255, 255, 255, 0.04);
     }
 
     input[type="radio"] {
@@ -273,9 +283,9 @@
     padding: 0;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--sp-border);
-    border-radius: var(--sp-radius-sm);
-    background: var(--sp-surface);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    background: rgba(0, 0, 0, 0.2);
   }
 
   .sp-preview-item {

styles/components/_preset-load-dialog.less

@@ -1,6 +1,10 @@
 .scrying-pool.preset-load-dialog {
-  background: var(--sp-surface);
+  background: var(--sp-dialog-bg);
   color: var(--sp-text-primary);
+  border: var(--sp-dialog-border);
+  border-top: 2px solid var(--sp-accent);
+  border-radius: var(--sp-dialog-radius);
+  box-shadow: var(--sp-dialog-shadow);
 
   // ── Content wrapper ────────────────────────────────────────────────────
   .preset-load-dialog__content {
@@ -47,24 +51,26 @@
     text-align: left;
     font-size: 13px;
     padding: 8px 12px;
-    border-radius: 4px;
+    border-radius: var(--sp-btn-radius);
     cursor: pointer;
-    transition: background-color 0.15s, border-color 0.15s;
+    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
+    line-height: 1.2;
 
     i { font-size: 0.85em; opacity: 0.7; flex-shrink: 0; }
 
-    // Load button — styled as a row item, not a loud primary button
+    // Load button — green accent on hover
     &--load {
-      background: var(--sp-surface-elevated, rgba(255,255,255,0.06));
+      background: rgba(255, 255, 255, 0.04);
       color: var(--sp-text-primary);
-      border: 1px solid var(--sp-border);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      font-weight: 500;
 
       &:hover {
-        background: var(--sp-accent, #4a6f9c);
-        border-color: var(--sp-accent, #4a6f9c);
+        background: rgba(74, 158, 107, 0.85);
+        border-color: var(--sp-accent);
         color: #fff;
         i { opacity: 1; }
       }
@@ -75,8 +81,9 @@
     &--cancel {
       background: transparent;
       color: var(--sp-text-muted);
-      border: 1px solid var(--sp-border);
-      &:hover { color: var(--sp-text, inherit); border-color: currentColor; }
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      font-weight: 500;
+      &:hover { color: var(--sp-text-primary); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
     }
   }
 
@@ -86,7 +93,9 @@
     justify-content: flex-end;
     gap: 8px;
     padding: 10px 12px;
-    border-top: 1px solid var(--sp-border);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.15);
     flex-shrink: 0;
+    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
   }
 }

styles/components/_preset-save-dialog.less

@@ -6,13 +6,12 @@
 @import "../tokens/_base.less";
 
 .scrying-pool.preset-save-dialog {
-  background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
+  background: var(--sp-dialog-bg);
   color: var(--sp-text-primary);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: var(--sp-dialog-border);
   border-top: 2px solid var(--sp-accent);
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
-              inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  border-radius: var(--sp-dialog-radius);
+  box-shadow: var(--sp-dialog-shadow);
 
   // ── Form wrapper ──────────────────────────────────────────────────────────
   .preset-save-dialog__form {
@@ -77,7 +76,7 @@
     font-size: 14px;
     padding: 9px 12px;
     border: 1px solid var(--sp-border);
-    border-radius: 5px;
+    border-radius: var(--sp-btn-radius);
     background: var(--sp-control-bg, #1a1d20);
     color: var(--sp-text-primary);
     outline: none;
@@ -103,47 +102,49 @@
     align-items: center;
     gap: 8px;
     padding: 10px 16px;
-    border-top: 1px solid var(--sp-border);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
     background: rgba(0, 0, 0, 0.15);
     flex-shrink: 0;
+    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
   }
 
+  // Button styles — using shared SP tokens
   .preset-save-dialog__btn {
-    font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
-    font-size: 12px;
-    font-weight: 600;
-    padding: 7px 14px;
-    border-radius: 5px;
-    cursor: pointer;
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+    gap: var(--sp-btn-gap, 6px);
+    padding: var(--sp-btn-padding, 7px 14px);
+    font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
+    font-size: var(--sp-btn-font-size, 12px);
+    font-weight: 600;
+    border: 1px solid transparent;
+    border-radius: var(--sp-btn-radius, 5px);
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+    line-height: 1.2;
 
-    i { font-size: 10px; opacity: 0.85; }
+    i { font-size: 10px; pointer-events: none; }
 
     &--save {
-      background: var(--sp-accent);
-      color: var(--sp-accent-text, #fff);
-      border: 1px solid transparent;
+      background: var(--sp-btn-primary-bg, var(--sp-accent));
+      color: var(--sp-btn-primary-text, #fff);
       letter-spacing: 0.02em;
 
-      &:hover  { background: var(--sp-accent-hover); }
-      &:active { background: var(--sp-accent-active); }
+      &:hover  { background: var(--sp-btn-primary-hover, var(--sp-accent-hover)); }
+      &:active { background: var(--sp-btn-primary-active, var(--sp-accent-active)); }
 
       i { opacity: 1; }
     }
 
     &--cancel {
-      background: transparent;
-      color: var(--sp-text-secondary);
-      border: 1px solid var(--sp-border);
+      background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+      color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+      border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
       font-weight: 500;
 
       &:hover {
-        color: var(--sp-text-primary);
-        border-color: rgba(255, 255, 255, 0.2);
-        background: rgba(255, 255, 255, 0.05);
+        background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+        color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
       }
     }
   }

styles/components/_roster-strip.less

@@ -23,9 +23,17 @@
 // WARNING: do NOT add max-width or overflow here; the outer window also carries this class
 // and would clip the expanded inner content.
 .scrying-pool-strip {
-  background: var(--sp-bg, hsl(220, 15%, 12%));
+  background: rgba(0, 0, 0, 0.01);
   border-radius: 8px;
-  
+  transition: background 0.25s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  /* Override FoundryVTT v14's .application min-width: 200px — strip sizing is controlled by JS */
+  min-width: unset;
+
   /* Ensure strip appears below Director's Board (z-index: 100) */
   z-index: 50;
 
@@ -46,14 +54,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 83px;
+  max-width: calc(var(--sp-widget-width, 83px) + 11px);
   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,
@@ -100,18 +104,16 @@
 .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;
+    width: var(--sp-widget-width, 150px);
+    height: var(--sp-widget-width, 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__shell {
+      width: calc(var(--sp-widget-width, 150px) - 59px);
+      height: calc(var(--sp-widget-width, 150px) - 59px);
     }
 
     .sp-avatar__name {
@@ -134,66 +136,52 @@
   }
 }
 
-// ── Drag grip (top bar, replaces window header drag affordance) ────────────────
-.sp-strip__grip {
-  width: 100%;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: grab;
-  color: var(--sp-text, hsl(0, 0%, 80%));
-  opacity: 0.35;
-  font-size: 10px;
-  flex-shrink: 0;
-  transition: opacity 0.15s;
-  user-select: none;
-
-  &:hover  { opacity: 0.75; }
-  &:active { cursor: grabbing; opacity: 1; }
-}
-
-// ── Lightweight close button (replaces window header) ─────────────────────────
-.sp-strip__close-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  z-index: 10;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  line-height: 18px;
-  font-size: 13px;
-  font-weight: 400;
-  background: transparent;
-  color: var(--sp-text, hsl(0, 0%, 80%));
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  opacity: 0.45;
-  transition: opacity 0.15s, background 0.15s;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.1);
-  }
-  &:active { opacity: 0.75; }
-}
-
-// ── Toolbar row: toggle + Director's Board on the same line ───────────────────
+// ── Toolbar: grip + toggle + DB + close on one line ─────────────────────────
+// All chrome lives here; hidden at rest, revealed on strip hover.
 .sp-strip__toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
+  height: 24px;
   flex-shrink: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+
+  .scrying-pool-strip:hover & {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
+// Drag grip — compact icon handle
+.sp-strip__grip {
+  width: 20px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  color: var(--sp-text, hsl(0, 0%, 80%));
+  font-size: 10px;
+  flex-shrink: 0;
+  user-select: none;
+
+  &:active { cursor: grabbing; }
+
+  .scrying-pool-strip:hover & {
+    opacity: 0.45;
+    &:hover  { opacity: 0.75; }
+    &:active { opacity: 1; }
+  }
+}
+
+// Toggle (expand/collapse)
 .sp-strip__toggle {
-  width: 83px;
-  min-width: 83px;
-  height: 28px;
+  height: 24px;
+  min-width: 22px;
+  width: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,34 +189,27 @@
   border: none;
   cursor: pointer;
   color: var(--sp-text, hsl(0, 0%, 80%));
-  font-size: 11px;
+  font-size: 10px;
   flex-shrink: 0;
   opacity: 0.6;
 
   &:hover { opacity: 1; }
 }
 
-// ── Director's Board CTA button (shown when sidebar injection not available) ──
+// Director's Board CTA button
 .sp-strip__directors-board-cta {
-  flex: 1;
-  min-width: 0;
-  height: 28px;
+  width: 22px;
+  height: 24px;
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 8px;
+  justify-content: center;
+  flex-shrink: 0;
   background: none;
   border: none;
-  border-left: 1px solid rgba(255, 255, 255, 0.06);
   cursor: pointer;
   color: var(--sp-text-secondary, #7a8390);
   font-size: 11px;
-  text-align: left;
   transition: background 0.15s, color 0.15s;
-  flex-shrink: 0;
-
-  i    { font-size: 12px; flex-shrink: 0; }
-  span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   &:hover {
     background: rgba(255, 255, 255, 0.06);
@@ -236,6 +217,35 @@
   }
 }
 
+// Spacer — pushes close button to the right
+.sp-strip__toolbar-spacer {
+  flex: 1;
+}
+
+// Close button — in-toolbar, no longer absolutely positioned
+.sp-strip__close-btn {
+  width: 20px;
+  height: 24px;
+  padding: 0;
+  line-height: 24px;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 400;
+  background: transparent;
+  color: var(--sp-text, hsl(0, 0%, 80%));
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.45;
+  transition: opacity 0.2s, background 0.15s;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.1);
+  }
+  &:active { opacity: 0.75; }
+}
+
 .sp-strip__participants {
   list-style: none;
   margin: 0;
@@ -255,6 +265,12 @@
   color: var(--sp-text-muted, hsl(0, 0%, 60%));
   padding: 4px 8px;
   margin: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  .scrying-pool-strip:hover & {
+    opacity: 1;
+  }
 }
 
 // ============================================================
@@ -263,7 +279,7 @@
 .sp-participant-avatar {
   position: relative;
   width: 83px;
-  height: 83px;
+  height: var(--sp-widget-width, 83px);
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -281,52 +297,30 @@
   }
 
   .is-expanded & {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    height: 135px; // 16:9 at 240 px strip width
-    padding: 0;
-    align-items: flex-end;
-    background: hsl(220, 15%, 14%);
+    height: auto;
+    padding: 5px;
+    background: transparent;
 
-    // Gradient scrim so name text is legible over any video
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 48px;
-      background: linear-gradient(transparent, hsla(0, 0%, 0%, 0.72));
-      z-index: 2;
-      pointer-events: none;
-      border-radius: 0 0 4px 4px;
+    &:hover {
+      background: hsl(220, 15%, 14%);
     }
 
-    .sp-avatar__img {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 1;
-      width: 48px;
-      height: 48px;
-      border-radius: 6px; // card view — rectangular
-    }
-
-    .sp-avatar__name {
-      position: absolute;
-      bottom: 20px;
-      left: 8px;
-      right: 8px;
-      z-index: 3;
-      color: hsl(0, 0%, 95%);
+    &::after { display: none; }
+
+    // Shell: sized to widget width, centered in the card
+    .sp-avatar__shell {
+      width: calc(var(--sp-widget-width) - 59px);
+      height: calc(var(--sp-widget-width) - 59px);
     }
 
+    // No names displayed in vertical mode
+    .sp-avatar__name,
     .sp-avatar__state-label {
-      position: absolute;
-      bottom: 6px;
-      left: 8px;
-      z-index: 3;
-      color: hsla(0, 0%, 85%, 0.85);
+      display: none;
     }
 
     .sp-avatar__corner-badge {
@@ -339,23 +333,86 @@
   }
 }
 
-// Video container for WebRTC stream (full AV replacement mode)
-.sp-participant-video {
+// Border shell — no clip-path, no background. Serves only as the positioning
+// parent for ::before (border), ::after (state ring), and .sp-avatar__shape (content).
+// Border and ring use the SAME clip-path as the shape but are scaled up via
+// negative inset, creating a genuine border/ring around the clipped shape.
+.sp-avatar__shell {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // Default sm size — overridden by layout-specific CSS
+  width: 60px;
+  height: 60px;
+}
+
+// Tile border — ::before with same clip-path as shape, scaled up by border-width.
+// Hidden via opacity when --sp-tile-border-active is 0 (border-width = 0)
+// so the border background doesn't bleed through transparent avatar areas.
+.sp-avatar__shell::before {
+  content: '';
   position: absolute;
-  inset: 0;
+  inset: calc(var(--sp-tile-border-width, 0px) * -1);
+  background: var(--sp-tile-border-color, transparent);
+  clip-path: var(--sp-shape-clip, none);
+  opacity: var(--sp-tile-border-active, 1);
+  z-index: -3;
+  pointer-events: none;
+}
+
+// State ring — ::after with same clip-path, scaled up same as border.
+// Uses inset box-shadow so the ring appears INSIDE the clipped area,
+// overlaying either the border (via ::before behind) or the avatar content.
+// At z-index 1 it renders above .sp-avatar__shape so the ring is visible
+// on top of the avatar video/img.
+// Gated by --sp-tile-border-active alongside the border ::before so that
+// "None" border truly removes ALL colored rings.
+.sp-avatar__shell::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--sp-tile-border-width, 0px) * -1);
+  background: transparent;
+  box-shadow: inset 0 0 0 2px transparent;
+  clip-path: var(--sp-shape-clip, none);
+  opacity: var(--sp-tile-border-active, 1);
+  z-index: 1;
+  pointer-events: none;
+  transition: box-shadow 200ms ease, opacity 200ms ease;
+}
+
+// Shape wrapper inside the shell — carries clip-path for shapes.
+.sp-avatar__shape {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  z-index: 1;
+  clip-path: var(--sp-shape-clip, none);
+}
+
+// Inner content (img and video) fill the shape
+.sp-avatar__shape .sp-avatar__img,
+.sp-avatar__shape .sp-participant-video {
+  width: 100%;
+  height: 100%;
+}
+
+// Video container for WebRTC stream (full AV replacement mode)
+// Regular flow child inside .sp-avatar__shell — contributes to shell sizing
+.sp-participant-video {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
 .sp-avatar__img {
   width: 60px;
   height: 60px;
-  border-radius: 6px;
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -365,7 +422,6 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 6px;
   background: hsl(220, 15%, 18%);
   
   .is-expanded & {
@@ -398,40 +454,50 @@
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--sp-text, hsl(0, 0%, 85%));
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  .sp-participant-avatar:hover & {
+    opacity: 1;
+  }
 }
 
 .sp-avatar__state-label {
   font-size: 0.7rem;
   color: var(--sp-text-muted, hsl(0, 0%, 60%));
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  .sp-participant-avatar:hover & {
+    opacity: 1;
+  }
 }
 
 // ============================================================
 // StateRing variants (applied as class on .sp-participant-avatar)
 // ============================================================
+// State ring via ::after on the shell — uses inset box-shadow so the ring
+// follows the same clip-path as the shape, overlaying the border's inner edge.
+// When there's no border (width=0), the ring overlays the avatar content edge.
 .sp-participant-avatar.sp-state-active,
 .sp-participant-avatar.sp-state-self-muted {
   --sp-state-color: var(--sp-state-active);
 
-  .sp-avatar__img {
-    box-shadow: 0 0 0 2px var(--sp-state-color);
+  .sp-avatar__shell::after {
+    box-shadow: inset 0 0 0 2px var(--sp-state-color);
   }
 }
 
 .sp-participant-avatar.sp-state-hidden,
 .sp-participant-avatar.sp-state-cam-lost {
   --sp-state-color: var(--sp-state-hidden);
-
-  .sp-avatar__img {
-    outline: 2px dashed var(--sp-state-color);
-    outline-offset: 2px;
-  }
 }
 
 .sp-participant-avatar.sp-state-pending {
   --sp-state-color: var(--sp-state-pending);
 
-  .sp-avatar__img {
-    box-shadow: 0 0 0 2px var(--sp-state-color);
+  .sp-avatar__shell::after {
+    box-shadow: inset 0 0 0 2px var(--sp-state-color);
   }
 }
 
@@ -439,7 +505,7 @@
 // StateRing animations — gated under no-preference (AC-16)
 // ============================================================
 @media (prefers-reduced-motion: no-preference) {
-  .sp-participant-avatar.sp-state-pending .sp-avatar__img {
+  .sp-participant-avatar.sp-state-pending .sp-avatar__shell::after {
     animation: sp-pulse 2s ease-in-out infinite;
   }
 
@@ -449,13 +515,13 @@
   }
 
   // Revert flash (200ms amber, then restore)
-  .sp-participant-avatar.sp-state-revert .sp-avatar__img {
+  .sp-participant-avatar.sp-state-revert .sp-avatar__shell::after {
     animation: sp-revert-flash 200ms ease-out forwards;
   }
 
   @keyframes sp-revert-flash {
-    0%   { box-shadow: 0 0 0 3px var(--sp-urgency-director); }
-    100% { box-shadow: 0 0 0 2px var(--sp-state-color); }
+    0%   { box-shadow: inset 0 0 0 3px var(--sp-urgency-director); }
+    100% { box-shadow: inset 0 0 0 2px var(--sp-state-color); }
   }
 }
 
@@ -591,3 +657,30 @@
     }
   }
 }
+
+// ============================================================
+// Tile shape variants (applied as .sp-shape-* on .sp-participant-avatar)
+// ============================================================
+// Defines --sp-shape-clip which is consumed by:
+//   - .sp-avatar__shape        (content clip)
+//   - .sp-avatar__shell::before (border)
+//   - .sp-avatar__shell::after  (state ring)
+// All three use the same clip-path, but ::before and ::after are scaled up
+// via negative inset to create the border/ring around the clipped shape.
+.sp-participant-avatar {
+  &.sp-shape-rounded {
+    --sp-shape-clip: inset(0 round 6px);
+  }
+
+  &.sp-shape-circle {
+    --sp-shape-clip: circle(50%);
+  }
+
+  &.sp-shape-hexagon {
+    --sp-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  }
+
+  &.sp-shape-octagon {
+    --sp-shape-clip: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
+  }
+}

styles/components/_scene-preset-panel.less

@@ -6,9 +6,9 @@
 
 // Panel container
 .directors-board__preset-panel {
-  background: linear-gradient(160deg, hsl(215,28%,13%) 0%, hsl(215,25%,10%) 100%);
-  border: 1px solid var(--sp-border);
-  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--sp-dialog-radius);
   padding: 10px 12px 12px;
   margin-top: 8px;
 
@@ -116,8 +116,8 @@
 .directors-board__preset-panel-select {
   flex: 1;
   min-width: 0;
-  background: var(--sp-surface);
-  border: 1px solid var(--sp-border);
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
   padding: 4px 6px;
   font-family: inherit;