fixed sig-select deck styling, room.html aperture styling

src/apps/epic/views.py

@@ -219,6 +219,7 @@ def gatekeeper(request, room_id):
     else:
         ctx = _gate_context(room, request.user)
     ctx["room"] = room
+    ctx["page_class"] = "page-gameboard"
     return render(request, "apps/gameboard/room.html", ctx)
 
 

src/static_src/scss/_room.scss

@@ -7,7 +7,9 @@ $gate-line: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 60vh;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
 }
 
 
@@ -677,3 +679,71 @@ $inv-strip:   30px;   // visible height of each stacked card after the first
         }
     }
 }
+
+// ─── Significator deck (SIG_SELECT phase) ──────────────────────────────────
+
+// When the sig deck is present, switch room-page from centred to column layout
+.room-page:has(#id_sig_deck) {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 1rem;
+
+    .room-shell {
+        max-height: 50vh;
+    }
+}
+
+#id_sig_deck {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    padding: 0.75rem;
+    overflow-y: auto;
+    align-content: flex-start;
+    max-height: 45vh;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(var(--terUser), 0.3) transparent;
+}
+
+.sig-card {
+    width: 70px;
+    height: 108px;
+    border-radius: 0.4rem;
+    background: rgba(var(--priUser), 1);
+    border: 0.1rem solid rgba(var(--secUser), 0.4);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0.25rem;
+    cursor: pointer;
+    transition: transform 0.15s, border-color 0.15s;
+    position: relative;
+
+    &:hover {
+        border-color: rgba(var(--secUser), 1);
+        transform: translateY(-2px);
+        box-shadow: 0 0 0.5rem rgba(var(--secUser), 0.3);
+    }
+
+    // Bottom corner is redundant at this size
+    .fan-card-corner--br { display: none; }
+
+    // Top corner — override game-kit's 1.5rem defaults with deeper nesting
+    .fan-card-corner--tl {
+        .fan-corner-rank { font-size: 0.65rem; padding: 0; }
+        i { font-size: 0.55rem; }
+    }
+
+    // Face — deeper nesting to beat game-kit specificity
+    .fan-card-face {
+        padding: 0.25rem 0.2rem;
+        gap: 0.1rem;
+
+        .fan-card-name-group { font-size: 0.38rem; }
+        .fan-card-name       { font-size: 0.5rem; }
+        .fan-card-arcana     { font-size: 0.35rem; }
+    }
+}

src/templates/apps/gameboard/room.html

@@ -78,7 +78,21 @@
                  data-select-sig-url="{% url 'epic:select_sig' room.id %}"
                  data-user-role="{{ user_seat.role|default:'' }}">
                 {% for card, deck_type in sig_cards %}
-                    <div class="sig-card {{ deck_type }}-deck" data-card-id="{{ card.id }}" data-deck="{{ deck_type }}">{{ card.name }}</div>
+                    <div class="sig-card {{ deck_type }}-deck" data-card-id="{{ card.id }}" data-deck="{{ deck_type }}">
+                        <div class="fan-card-corner fan-card-corner--tl">
+                            <span class="fan-corner-rank">{{ card.corner_rank }}</span>
+                            {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
+                        </div>
+                        <div class="fan-card-face">
+                            {% if card.name_group %}<p class="fan-card-name-group">{{ card.name_group }}</p>{% endif %}
+                            <h3 class="fan-card-name">{{ card.name_title }}</h3>
+                            <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
+                        </div>
+                        <div class="fan-card-corner fan-card-corner--br">
+                            <span class="fan-corner-rank">{{ card.corner_rank }}</span>
+                            {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
+                        </div>
+                    </div>
                 {% endfor %}
             </div>
         {% endif %}