Various enhancements, restyling and new options

templates/directors-board.hbs

@@ -18,7 +18,7 @@
 
     {{#unless isEmpty}}
       {{#each participants}}
-        {{> "modules/scrying-pool/templates/participant-card.hbs"}}
+        {{> "modules/scrying-pool/templates/participant-card.hbs" shape=../tileShape}}
       {{/each}}
     {{else}}
       <p class="directors-board__empty" role="listitem">
@@ -78,6 +78,41 @@
     </div>
   </div>
 
+  {{!-- Tile shape selector --}}
+  <div class="directors-board__tile-shape-bar" role="toolbar" aria-label="Tile shape">
+    <span class="directors-board__tile-shape-label">Shape</span>
+    <div class="directors-board__tile-shape-group">
+      {{#each tileShapes}}
+      <button type="button"
+              class="directors-board__tile-shape-btn{{#if isActive}} is-active{{/if}}"
+              data-action="set-tile-shape"
+              data-shape="{{key}}"
+              data-tooltip="{{label}}">
+        <i class="fas {{icon}}" aria-hidden="true"></i>
+      </button>
+      {{/each}}
+    </div>
+  </div>
+
+  {{!-- Tile border controls --}}
+  <div class="directors-board__tile-border-bar" role="toolbar" aria-label="Tile border">
+    <span class="directors-board__tile-border-label">Border</span>
+    <div class="directors-board__tile-border-group">
+      {{#each tileBorderWidths}}
+      <button type="button"
+              class="directors-board__tile-border-btn{{#if isActive}} is-active{{/if}}"
+              data-action="set-tile-border-width"
+              data-width="{{value}}"
+              data-tooltip="{{label}}">{{label}}</button>
+      {{/each}}
+    </div>
+    <input type="color"
+           class="directors-board__tile-border-color"
+           data-action="set-tile-border-color"
+           value="{{tileBorderColor}}"
+           data-tooltip="Border color" />
+  </div>
+
   {{!-- Story 5.2: Video widget width customization --}}
   <div class="directors-board__widget-width-bar" role="toolbar" aria-label="{{localize 'scrying-pool.directorsBoard.widgetWidth.label'}}">
     <span class="directors-board__widget-width-label">{{localize "scrying-pool.directorsBoard.widgetWidth.label"}}</span>

templates/participant-card.hbs

@@ -1,5 +1,5 @@
 {{!-- Participant Card — single participant tile in the Director's Board --}}
-<div class="scrying-pool participant-card sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}}"
+<div class="scrying-pool participant-card sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}} sp-shape-{{shape}}"
      role="listitem"
      aria-label="{{cardAriaLabel}}"
      data-user-id="{{userId}}"

templates/roster-strip.hbs

@@ -3,16 +3,6 @@
      role="complementary"
      aria-label="Scrying Pool">
 
-  {{!-- Drag grip (top bar, replaces window header drag affordance) --}}
-  <div class="sp-strip__grip" data-action="drag-grip" aria-hidden="true">
-    <i class="fas fa-grip-lines"></i>
-  </div>
-
-  {{!-- Lightweight close button (top-right corner, replaces window header) --}}
-  <button class="sp-strip__close-btn" data-action="close-strip"
-          aria-label="Close Scrying Pool"
-          data-tooltip="Close">×</button>
-
   {{!-- First-open tip (right-click affordance) --}}
   {{#if showFirstOpenTip}}
     <p class="sp-strip__first-tip">
@@ -21,8 +11,12 @@
     </p>
   {{/if}}
 
-  {{!-- Toolbar row: toggle + Director's Board side by side --}}
+  {{!-- Toolbar: grip + toggle + Director's Board + close on one line --}}
   <div class="sp-strip__toolbar">
+    <div class="sp-strip__grip" data-action="drag-grip" aria-hidden="true">
+      <i class="fas fa-grip-lines"></i>
+    </div>
+
     <button class="sp-strip__toggle" data-action="toggle-expanded"
             aria-label="{{#if isExpanded}}Collapse Scrying Pool{{else}}Expand Scrying Pool{{/if}}"
             aria-expanded="{{isExpanded}}"
@@ -33,15 +27,20 @@
     {{#if isGM}}
       <button class="sp-strip__directors-board-cta" data-action="open-directors-board"
               aria-label="Open Director's Board"
-              data-tooltip="Director's Board">
+              data-tooltip="{{localize "scrying-pool.directorsBoard.openButton"}}">
         <i class="fas fa-border-all" aria-hidden="true"></i>
-        <span>Director's Board</span>
       </button>
     {{/if}}
+
+    <span class="sp-strip__toolbar-spacer"></span>
+
+    <button class="sp-strip__close-btn" data-action="close-strip"
+            aria-label="Close Scrying Pool"
+            data-tooltip="Close">×</button>
   </div>
 
   {{!-- Participant list --}}
-  <ul class="sp-strip__participants" role="list" style="--sp-widget-width: {{widgetWidth}}px;">
+  <ul class="sp-strip__participants" role="list">
     {{#if isEmpty}}
       {{!-- EmptyStatePanel --}}
       <li class="sp-strip__empty-state" role="listitem">
@@ -52,7 +51,7 @@
       {{#each participants}}
         <li class="sp-strip__participant-item" role="listitem">
           {{!-- ParticipantAvatar (44×44px container) --}}
-          <button class="sp-participant-avatar sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}}"
+          <button class="sp-participant-avatar sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}} sp-shape-{{../tileShape}}"
                   data-user-id="{{userId}}"
                   data-action="open-popover"
                   role="button"
@@ -60,16 +59,20 @@
                   data-tooltip="{{name}} — {{stateLabel}}"
                   aria-pressed="false" style="width: {{../widgetWidth}}px; min-width: {{../widgetWidth}}px;">
 
-            {{!-- Video container for stream-access mode (full AV replacement) --}}
-            {{#if hasStreamAccess}}
-              <div class="sp-participant-video" aria-hidden="true"></div>
-            {{/if}}
+            <div class="sp-avatar__shell">
+              <div class="sp-avatar__shape">
+                {{!-- Video container for stream-access mode (full AV replacement) --}}
+                {{#if hasStreamAccess}}
+                  <div class="sp-participant-video" aria-hidden="true"></div>
+                {{/if}}
 
-            {{!-- Avatar image (32px rounded) - shown as fallback when no video --}}
-            <img class="sp-avatar__img" src="{{avatarSrc}}" alt="" aria-hidden="true" />
+                {{!-- Avatar image (32px rounded) - shown as fallback when no video --}}
+                <img class="sp-avatar__img" src="{{avatarSrc}}" alt="" aria-hidden="true" />
 
-            {{!-- Corner badge (12px bottom-right) --}}
-            <span class="sp-avatar__corner-badge" aria-hidden="true"></span>
+                {{!-- Corner badge (12px bottom-right) --}}
+                <span class="sp-avatar__corner-badge" aria-hidden="true"></span>
+              </div>
+            </div>
 
             {{!-- Expanded view: name + state rows (vertical-md) --}}
             {{#if ../isExpanded}}