From a15d91dfe609d692704e01c86766c8a0a751aa35 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Sun, 5 Apr 2026 19:10:02 -0400
Subject: [PATCH] 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                | 104 +++++++++---------
 .../apps/gameboard/_partials/_gatekeeper.html |  92 +++++++++-------
 2 files changed, 105 insertions(+), 91 deletions(-)

diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index b14c15a..6775ea2 100644
--- a/src/static_src/scss/_room.scss
+++ b/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
diff --git a/src/templates/apps/gameboard/_partials/_gatekeeper.html b/src/templates/apps/gameboard/_partials/_gatekeeper.html
index 1884d8b..fbb3257 100644
--- a/src/templates/apps/gameboard/_partials/_gatekeeper.html
+++ b/src/templates/apps/gameboard/_partials/_gatekeeper.html
@@ -6,53 +6,61 @@
     <div class="gate-overlay">
         <div class="gate-modal" role="dialog" aria-label="Gatekeeper">
 
-            <header class="gate-header">
-                <h1>{{ room.name }}</h1>
-                <div class="gate-status-wrap">
-                    <span class="gate-status-text">{{ room.get_gate_status_display }}</span>
-                    <span class="status-dots" aria-hidden="true">
-                        <span></span><span></span><span></span><span></span>
-                    </span>
-                </div>
-            </header>
-
-            <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">
-                        {% csrf_token %}
-                        <button type="submit" class="token-rails" aria-label="Insert token to play">
-                            <span class="rail"></span>
-                            <span class="rail"></span>
-                        </button>
-                    </form>
-                {% else %}
-                    <div class="token-rails">
-                        <span class="rail"></span>
-                        <span class="rail"></span>
+            <div class="gate-title-panel">
+                <header class="gate-header">
+                    <h1>{{ room.name }}</h1>
+                    <div class="gate-status-wrap">
+                        <span class="gate-status-text">{{ room.get_gate_status_display }}</span>
+                        <span class="status-dots" aria-hidden="true">
+                            <span></span><span></span><span></span><span></span>
+                        </span>
                     </div>
-                {% endif %}
-                <div class="token-panel">
-                    <div class="token-denomination">1</div>
-                    <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
-                    <span class="token-return-label">PUSH TO RETURN</span>
-                </div>
-                {% if user_can_reject %}
-                    <form method="POST" action="{% url 'epic:return_token' room.id %}" style="display:contents">
-                        {% csrf_token %}
-                        <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
-                    </form>
-                {% endif %}
+                </header>
             </div>
 
-            {% 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 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">
+                                {% csrf_token %}
+                                <button type="submit" class="token-rails" aria-label="Insert token to play">
+                                    <span class="rail"></span>
+                                    <span class="rail"></span>
+                                </button>
+                            </form>
+                        {% else %}
+                            <div class="token-rails">
+                                <span class="rail"></span>
+                                <span class="rail"></span>
+                            </div>
+                        {% endif %}
+                        <div class="token-panel">
+                            <div class="token-denomination">1</div>
+                            <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
+                            <span class="token-return-label">PUSH TO RETURN</span>
+                        </div>
+                        {% if user_can_reject %}
+                            <form method="POST" action="{% url 'epic:return_token' room.id %}" style="display:contents">
+                                {% csrf_token %}
+                                <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
+                            </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 %}