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: none;
-    border: 0.1rem solid rgba(var(--terUser), 0.5);
+    background-color: transparent;
-    border-radius: 1rem;
+
-    background-color: rgba(var(--priUser), 1);
+    .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,41 +814,8 @@ $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) ──────────────────────────────────
 

src/templates/apps/gameboard/_partials/_gatekeeper.html

@@ -6,6 +6,7 @@
     <div class="gate-overlay">
         <div class="gate-modal" role="dialog" aria-label="Gatekeeper">
 
+            <div class="gate-title-panel">
                 <header class="gate-header">
                     <h1>{{ room.name }}</h1>
                     <div class="gate-status-wrap">
@@ -15,7 +16,10 @@
                         </span>
                     </div>
                 </header>
+            </div>
 
+            <div class="gate-top-row">
+                <div class="gate-main-panel">
                     <div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot or carte_active %} claimed{% elif token_depleted %} depleted{% else %} locked{% endif %}">
                         {% if can_drop %}
                             <form method="POST" action="{% url 'epic:drop_token' room.id %}" style="display:contents">
@@ -43,16 +47,20 @@
                             </form>
                         {% endif %}
                     </div>
+                </div>
 
+                <div class="gate-roles-panel">
                     {% if room.gate_status == 'OPEN' %}
                         <form method="POST" action="{% url 'epic:pick_roles' room.id %}" style="display:contents">
                             {% csrf_token %}
                             <button type="submit" class="launch-game-btn btn btn-primary btn-xl">PICK ROLES</button>
                         </form>
                     {% endif %}
+                </div>
+            </div>
 
             {% if request.user == room.owner %}
-                <div class="form-container">
+                <div class="gate-invite-panel">
                     <h3>Invite Friend</h3>
                     <form method="POST" action="{% url 'epic:invite_gamer' room.id %}" style="display:flex; gap:0.5rem; align-items:center;">
                         {% csrf_token %}