From afe79f1a486a23426c17c46d51bf2f76d1727f21 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Wed, 1 Apr 2026 23:12:49 -0400
Subject: [PATCH] other minor styling fixes for gatekeeper modal, position
 circles

---
 src/static_src/scss/_room.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index 77dfa1f..4f8d81d 100644
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -302,14 +302,20 @@ $pos-d-x: round($pos-d * 0.5);    // 55px
 $pos-d-y: round($pos-d * 0.866);  // 95px
 
 // ─── Position strip ────────────────────────────────────────────────────────
-// Numbered gate-slot circles rendered above the backdrop (z 130 > overlay 120
-// > backdrop 100).  .room-page is position:relative with no z-index, so its
-// absolute children share the root stacking context with the fixed overlays.
-// When role-select is open, suppress pointer events so the strip doesn't
-// intercept clicks on cards (landscape: strip overlaps centered card fan).
+// Numbered gate-slot circles sit above the gate backdrop/overlay (z 130 > 120
+// > 100) but below the role-select fan (z 200), tray (310), and menus (310+).
+// .room-page is position:relative with no z-index, so its absolute children
+// share the root stacking context with the fixed overlays.
+// When the gate modal or role-select fan is open, suppress pointer events so
+// the strip doesn't intercept clicks or hover effects on the modal beneath it
+// (landscape: strip overlaps centered card fan too).
 // Must target .gate-slot directly — it has an explicit pointer-events: auto
 // override that wins over a rule on the parent .position-strip alone.
+html:has(.gate-backdrop) .position-strip .gate-slot,
 html:has(.role-select-backdrop) .position-strip .gate-slot { pointer-events: none; }
+// Re-enable clicks on confirm/reject/drop-token forms inside slots
+html:has(.gate-backdrop) .position-strip .gate-slot form,
+html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: auto; }
 
 .position-strip {
     position: absolute;
@@ -608,7 +614,7 @@ html:has(.role-select-backdrop) .position-strip .gate-slot { pointer-events: non
 .role-select-backdrop {
     position: fixed;
     inset: 0;
-    z-index: 100;
+    z-index: 200;
     display: flex;
     justify-content: center;
     align-items: center;