From 596175cd1c81b8dc1e171627d7c9e245d809c234 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Wed, 1 Apr 2026 15:10:20 -0400
Subject: [PATCH] refined _room.scss styles, incl. .launch-game-btn &
 .gate-slot

---
 src/static_src/scss/_room.scss | 37 +++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index 576ba98..ec804e8 100644
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -62,6 +62,10 @@ html:has(.gate-backdrop) {
     pointer-events: none;
 }
 
+.launch-game-btn {
+    margin-top: 1rem;
+}
+
 .gate-modal {
     display: flex;
     flex-direction: column;
@@ -246,6 +250,11 @@ html:has(.gate-backdrop) {
 
 // Narrow viewport — scale down, 2×3 slot grid (portrait mobile + narrow desktop)
 @media (max-width: 700px) {
+    // Floor the gatekeeper modal below the position-strip circles (~1.5rem top + 3rem height)
+    .gate-overlay {
+        padding-top: 5.5rem;
+    }
+
     .gate-modal {
         padding: 1.25rem 1.5rem;
 
@@ -298,7 +307,7 @@ $pos-d-y: round($pos-d * 0.866);  // 95px
 // absolute children share the root stacking context with the fixed overlays.
 .position-strip {
     position: absolute;
-    top: 0.5rem;
+    top: 1.5rem;
     left: 0;
     right: 0;
     z-index: 130;
@@ -675,6 +684,32 @@ $card-h: 120px;
 
 // Landscape mobile — aggressively scale down to fit short viewport
 @media (orientation: landscape) and (max-width: 1440px) {
+    // Reflow position strip into a vertical column along the left edge,
+    // reversed so 6 is at top, 1 at bottom, below the GAMEROOM title.
+    .position-strip {
+        flex-direction: column-reverse;
+        top: 3rem;
+        left: 0.5rem;
+        right: auto;
+        gap: round($gate-gap * 0.4);
+    }
+
+    // Shallow landscape (phones): wrap into two columns — left: 6,5,4 / right: 3,2,1
+    // Columns grow rightward (wrap, not wrap-reverse) so overflow: hidden doesn't clip.
+    // order: -1 on slots 4–6 pulls them to the front of the flex sequence; combined
+    // with column-reverse they land in the left column reading 6,5,4 top-to-bottom.
+    @media (max-height: 550px) {
+        .position-strip {
+            flex-wrap: wrap;
+            // cap height to exactly 3 circles so the 4th wraps to a new column
+            max-height: #{3 * round($gate-node * 0.75) + 2 * round($gate-gap * 0.4)};
+
+            .gate-slot[data-slot="4"],
+            .gate-slot[data-slot="5"],
+            .gate-slot[data-slot="6"] { order: -1; }
+        }
+    }
+
     .gate-modal {
         padding: 0.6rem 1.25rem;