narrow desktop breakpoint constraint relaxed somewhat to accomodate more fringe-case window aspect ratios; #id_gear_btn now, like #id_kit_btn, restyles to contain --quaUser rgb value when menu is active; dashboard.html include ordering switched for #id_dash_applet_menu & #id_gear_btn, to fix an issue causing the menu to overlay the btn instead of the other way around

src/static_src/scss/_game-kit.scss

@@ -66,54 +66,35 @@
 .kit-bag-label {
     font-size: 0.55rem;
     text-transform: uppercase;
+    text-decoration: underline;
     letter-spacing: 0.12em;
     color: rgba(var(--secUser), 0.35);
     writing-mode: vertical-rl;
     text-orientation: mixed;
     transform: rotate(180deg);
+    padding: 0 0.25rem 0 0.5rem;
 }
 
 .kit-bag-row {
     display: flex;
     flex-direction: row;
-    gap: 0.4rem;
+    gap: 0.75rem;
 }
 
-.kit-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.15rem;
-    padding: 0.3rem 0.4rem;
-    border: 0.1rem solid rgba(var(--terUser), 0.35);
-    border-radius: 0.4rem;
-    cursor: pointer;
-    min-width: 3rem;
-    transition: border-color 0.15s, box-shadow 0.15s;
+#id_kit_bag_dialog {
+    .token {
+        font-size: 1.5rem;
+        cursor: pointer;
+        transition: filter 0.15s;
+        padding: 0 0.125rem;
+
+        &:hover .token-tooltip { display: none; } // JS positions these as fixed
+
 
-    i {
-        font-size: 1.1rem;
-        color: rgba(var(--terUser), 0.7);
     }
 
-    .kit-card-label {
-        font-size: 0.5rem;
-        color: rgba(var(--secUser), 0.45);
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    &:hover {
-        border-color: rgba(var(--terUser), 0.7);
-    }
-
-    &.selected {
-        border-color: rgba(var(--terUser), 1);
-        box-shadow:
-            0 0 0.4rem rgba(var(--terUser), 0.5),
-            0 0 1rem rgba(var(--terUser), 0.2)
-        ;
-        i { color: rgba(var(--terUser), 1); }
+    .token-tooltip {
+        z-index: 9999;
     }
 }