wrapped the _gatekeeper.html partial modal to split each function into four different panels; removed deviant landscape styling to unify it with default styling (much more robust now)

src/static_src/scss/_room.scss

@@ -63,19 +63,64 @@ html:has(.gate-backdrop) {
     margin-top: 5rem;
 }
 
-.launch-game-btn {
-    margin-top: 1rem;
-}
-
 .gate-modal {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+    gap: 0.5rem;
+    min-width: 26rem;
     pointer-events: auto;
-    padding: 2rem;
-    border: 0.1rem solid rgba(var(--terUser), 0.5);
-    border-radius: 1rem;
-    background-color: rgba(var(--priUser), 1);
+    border: none;
+    background-color: transparent;
+
+    .gate-title-panel {
+        border: 0.1rem solid rgba(var(--terUser), 0.25);
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        background: rgba(var(--priUser), 1);
+    }
+
+    .gate-top-row {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+    }
+
+    .gate-main-panel {
+        flex: 3;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 0.1rem solid rgba(var(--terUser), 0.25);
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        background: rgba(var(--priUser), 1);
+    }
+
+    .gate-roles-panel {
+        flex: 1;
+        min-width: 5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 0.1rem solid rgba(var(--terUser), 0.25);
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        background: rgba(var(--priUser), 1);
+
+        .launch-game-btn { margin-top: 0; }
+    }
+
+    .gate-invite-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        border: 0.1rem solid rgba(var(--terUser), 0.25);
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+        background: rgba(var(--priUser), 1);
+    }
 
     .gate-header {
         text-align: center;
@@ -107,8 +152,6 @@ html:has(.gate-backdrop) {
             font-size: 0.75em;
             text-transform: uppercase;
             letter-spacing: 0.15em;
-            margin-bottom: 1rem;
-
             .status-dots {
                 display: inline-flex;
                 span {
@@ -244,9 +287,6 @@ html:has(.gate-backdrop) {
         }
     }
 
-    .form-container {
-        margin-top: 1rem;
-    }
 }
 
 // Narrow viewport — scale down, 2×3 slot grid (portrait mobile + narrow desktop)
@@ -261,7 +301,6 @@ html:has(.gate-backdrop) {
 
         .gate-header {
             h1 { font-size: 1.5rem; }
-            .gate-status-wrap { margin-bottom: 0.5rem; }
         }
 
         .token-slot { min-width: 150px; }
@@ -775,42 +814,9 @@ $card-h: 60px;
         }
     }
 
-    .gate-modal {
-        padding: 0.6rem 1.25rem;
-
-        .gate-header {
-            h1 { font-size: 1rem; margin: 0 0 0.25rem; }
-            .gate-status-wrap { font-size: 0.65em; margin-bottom: 0.35rem; }
-        }
-
-        .token-slot {
-            min-width: 130px;
-
-            .token-rails,
-            button.token-rails { padding: 0.4rem 0.35rem; }
-
-            .token-panel {
-                padding: 0.3rem 0.5rem;
-
-                .token-denomination { font-size: 1.1em; }
-            }
-        }
-
-        .form-container {
-            margin-top: 0.75rem;
-            h3 { font-size: 0.85rem; margin: 0.5rem 0; }
-
-            form { gap: 0.35rem; }
-
-            .form-control-lg {
-                --_pad-v: 0.4rem;
-                font-size: 0.9rem;
-            }
-        }
-    }
-
 }
 
+
 // ─── Significator deck (SIG_SELECT phase) ──────────────────────────────────
 
 // When the sig deck is present, switch room-page from centred to column layout