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/_applets.scss

@@ -15,6 +15,11 @@
     border-radius: 50%;
     background-color: rgba(var(--priUser), 1);
     border: 0.15rem solid rgba(var(--secUser), 1);
+
+    &.active {
+        color: rgba(var(--quaUser), 1);
+        border-color: rgba(var(--quaUser), 1);
+    }
 }
 
 // ── Applet menu (shared structure) ─────────────────────────

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;
     }
 }
 

src/static_src/scss/_room.scss

@@ -327,7 +327,7 @@ body:has(.gate-overlay) {
 }
 
 // Narrow viewport — scale down, 2×3 slot grid (portrait mobile + narrow desktop)
-@media (max-width: 550px) {
+@media (max-width: 700px) {
     .gate-modal {
         padding: 1.25rem 1.5rem;
 

src/static_src/scss/_wallet-tokens.scss

@@ -16,6 +16,17 @@
         font-size: 0.95rem;
         margin: 0 0 0.3rem 0;
         color: rgba(var(--terUser), 1);
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 0.5rem;
+
+        .token-count {
+            font-size: 0.75rem;
+            opacity: 0.65;
+            font-weight: normal;
+            flex-shrink: 0;
+        }
     }
 
     p {