From 824f35590b800877c8b49b938c1a3715be65d502 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Fri, 3 Apr 2026 14:55:37 -0400
Subject: [PATCH] minor styling fixes

---
 src/static_src/scss/_applets.scss | 10 ++++++++-
 src/static_src/scss/_room.scss    | 35 +++++++++++++++++++++++--------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss
index 8cda897..1ca4947 100644
--- a/src/static_src/scss/_applets.scss
+++ b/src/static_src/scss/_applets.scss
@@ -179,7 +179,15 @@
         overflow: hidden;
         z-index: 1;
 
-        a { color: rgba(var(--terUser), 1); text-decoration: none; }
+        a {
+            color: rgba(var(--terUser), 1);
+            text-decoration: none;
+
+            &:hover {
+                color: rgba(var(--ninUser), 1);
+                text-shadow: 0 0 0.5rem rgba(var(--terUser), 1);
+            }
+        }
     }
 }
 
diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index 7828d3a..95e310a 100644
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -597,8 +597,8 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
 // ─── Card stack ────────────────────────────────────────────────────────────
 
 .card-stack {
-    width: 60px;
-    height: 90px;
+    width: 90px;
+    height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -622,6 +622,12 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
     }
 }
 
+// ─── Card dimensions ───────────────────────────────────────────────────────
+// Role cards are landscape format — wider than tall — and the largest card type.
+// Sig cards (half this size) will be layered on top during SIG_SELECT.
+$card-w: 160px;
+$card-h: 110px;
+
 // ─── Role select modal ─────────────────────────────────────────────────────
 
 .role-select-backdrop {
@@ -637,23 +643,26 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
 }
 
 #id_role_select {
-    display: flex;
+    // Always a 3×2 grid — 6 landscape cards in a row would overflow any viewport.
+    display: grid;
+    grid-template-columns: repeat(3, $card-w);
     gap: 1rem;
     pointer-events: none;
 
+    // Narrow portrait: scale cards down so the 3-col grid still fits
     @media (max-width: 600px) {
-        display: grid;
-        grid-template-columns: repeat(3, 80px);
-        grid-template-rows: repeat(2, 120px);
+        grid-template-columns: repeat(3, 110px);
         gap: 0.75rem;
+
+        .card {
+            width: 110px;
+            height: 75px;
+        }
     }
 }
 
 // ─── Card component ────────────────────────────────────────────────────────
 
-$card-w: 80px;
-$card-h: 120px;
-
 .card {
     width: $card-w;
     height: $card-h;
@@ -709,6 +718,14 @@ $card-h: 120px;
 
 // Landscape mobile — aggressively scale down to fit short viewport
 @media (orientation: landscape) and (max-width: 1440px) {
+    // Sink navbar below gate/role-select overlays when a modal is open.
+    // Landscape navbar z-index is 300 (_base.scss); gate-backdrop/overlay are
+    // 100/120, so the sidebar bleeds over the modal without this override.
+    html:has(.gate-backdrop) body .container .navbar,
+    html:has(.role-select-backdrop) body .container .navbar {
+        z-index: 50;
+    }
+
     // 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 {