1.44 - New Filters, profiles & Mobile fixes

assets/css/ui.css

@@ -2,7 +2,6 @@
    ui.css — Status banners, legend, about block, footer, and responsive.
    ════════════════════════════════════════════════════════════════════════ */
 
-
 /* ── EVENT BANNER ───────────────────────────────────────────────────── */
 /* Animated slide-down banner for cosmic/weather/promo events.           */
 
@@ -196,9 +195,8 @@
 .almanac-entry-desc {
   font-family: Manrope, sans-serif;
   font-size: 12px;
-  color: '#4a3420';
-  line-height: 1.55;
   color: #4a3420;
+  line-height: 1.55;
 }
 .almanac-entry-visibility {
   display: inline-block;
@@ -236,6 +234,51 @@
   }
 }
 
+/* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */
+@media (max-width: 640px) {
+  .event-banner-wrap.visible {
+    max-height: 260px;           /* generous — banner can be tall with dates line */
+  }
+
+  .event-banner-wrap {
+    margin-top: 8px;             /* push banner clear of the fixed nav bar */
+    margin-bottom: 18px;         /* breathing room between banner and header */
+  }
+
+  .event-banner {
+    align-items: flex-start;     /* stop dismiss ✕ drifting downward */
+    gap: 10px;
+    padding: 18px 12px 14px 14px;
+    margin-bottom: 0;
+    border-radius: 4px;
+  }
+
+  .event-banner-emoji {
+    font-size: 20px;
+    margin-top: 3px;             /* visually balance the dates-line margin-top below */
+  }
+
+  .event-banner-title {
+    font-size: 15px;
+    line-height: 1.25;
+    margin-bottom: 3px;
+  }
+
+  .event-banner-msg {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .event-banner-dismiss {
+    margin-top: 0;               /* keep ✕ pinned flush to the top-right */
+    padding: 0 2px;
+    font-size: 16px;
+    line-height: 1.4;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+}
+
 /* ── CUSTOM SELECT DROPDOWN ─────────────────────────────────────────── */
 /* Cross-platform replacement for native <select> on the col-toggles bar */
 
@@ -252,6 +295,7 @@
   padding: 5px 10px 5px 13px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
+  border-radius: 0;
   background: #f5edd6;
   color: #6b4228;
   font-family: Manrope, sans-serif;
@@ -299,19 +343,15 @@
   transform: rotate(225deg);
   margin-bottom: -1px;
 }
-.cs-wrap.open .cs-arrow-old {
-  transform: rotate(180deg);
-}
-
 /* Grouped left (fused with checkbox pill) */
 .cs-btn.grouped-left {
   border-right: none;
-  border-radius: 20px 0 0 20px;
+  border-radius: 0;
 }
 .cs-btn.grouped-left:only-child,
 .cs-btn.grouped-left.last-child {
   border-right: 1.5px solid #c9b08a;
-  border-radius: 20px;
+  border-radius: 0;
 }
 
 /* The floating dropdown panel */
@@ -384,7 +424,7 @@
   border-left: none;
   margin-left: -1px;
   padding-left: 11px;
-  border-radius: 0 20px 20px 0;
+  border-radius: 0;
   background: #f5edd6;
   color: #6b4228;
   user-select: none;