feat: make #1 venue unmissable on the map

- #1 marker is larger (32px) with pulsing green glow animation
- Floating venue name label above #1 marker (always visible)
- Lower-ranked markers are faded (opacity 0.5–0.65)
- #1 result card highlighted with green border in panel
- Venue markers now use child elements for rank number + label

Author: TheCryptoDonkey

docs/demo.js

@@ -201,9 +201,20 @@ function addVenueMarkers(venues) {
     el.className = 'marker-venue'
     el.title = v.name
 
+    // Rank number
+    const num = document.createElement('span')
+    num.className = 'venue-num'
+    el.appendChild(num)
+
+    // Floating name label (visible only on #1)
+    const label = document.createElement('span')
+    label.className = 'venue-label'
+    label.textContent = v.name
+    el.appendChild(label)
+
     const marker = new maplibregl.Marker({ element: el })
       .setLngLat([v.lon, v.lat])
-      .setPopup(new maplibregl.Popup({ offset: 10 }).setHTML(
+      .setPopup(new maplibregl.Popup({ offset: 18 }).setHTML(
         `<b>${esc(v.name)}</b><br><small>${esc(v.venueType)}</small>`,
       ))
       .addTo(map)
@@ -226,7 +237,7 @@ function updateVenueRanks() {
     const rank = rankByName.get(venue.name) ?? 99
     const el = marker.getElement()
     el.dataset.rank = String(rank)
-    el.textContent = String(rank)
+    el.querySelector('.venue-num').textContent = String(rank)
   }
 }
 

docs/style.css

@@ -229,6 +229,15 @@ select:focus:not(:focus-visible) { outline: none; }
 
 .result-card:hover { border-color: var(--text-muted); }
 
+.result-card:first-child {
+  border-color: var(--score);
+  box-shadow: 0 0 8px rgba(128, 255, 128, 0.15);
+}
+
+.result-card:first-child .result-rank {
+  color: var(--score);
+}
+
 .result-rank {
   font-size: 18px;
   font-weight: 700;
@@ -305,56 +314,100 @@ footer {
 .marker-participant:hover { transform: scale(1.3); }
 
 .marker-venue {
+  position: relative;
   border-radius: 50%;
   background: var(--venue);
-  border: 2px solid rgba(255, 255, 255, 0.8);
-  box-shadow: 0 0 6px var(--venue);
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 4px var(--venue);
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font);
   font-weight: 700;
-  color: #fff;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  color: rgba(255, 255, 255, 0.7);
+  opacity: 0.5;
+}
+
+.marker-venue .venue-label {
+  display: none;
 }
 
 .marker-venue[data-rank="1"] {
-  width: 28px;
-  height: 28px;
-  font-size: 14px;
+  width: 32px;
+  height: 32px;
+  font-size: 15px;
   background: var(--score);
-  border-color: #fff;
-  box-shadow: 0 0 12px var(--score), 0 0 24px rgba(128, 255, 128, 0.3);
+  border: 3px solid #fff;
+  box-shadow: 0 0 16px var(--score), 0 0 32px rgba(128, 255, 128, 0.4);
   z-index: 10;
   color: var(--bg);
-  text-shadow: none;
+  opacity: 1;
+  animation: pulse-winner 2s ease-in-out infinite;
+}
+
+.marker-venue[data-rank="1"] .venue-label {
+  display: block;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  background: var(--score);
+  color: var(--bg);
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.marker-venue[data-rank="1"] .venue-label::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--score);
+}
+
+@keyframes pulse-winner {
+  0%, 100% { box-shadow: 0 0 16px var(--score), 0 0 32px rgba(128, 255, 128, 0.4); }
+  50% { box-shadow: 0 0 24px var(--score), 0 0 48px rgba(128, 255, 128, 0.6); }
 }
 
 .marker-venue[data-rank="2"] {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   font-size: 12px;
   background: var(--accent);
+  border-color: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 8px var(--accent);
   color: var(--bg);
-  text-shadow: none;
+  opacity: 0.85;
 }
 
 .marker-venue[data-rank="3"] {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   font-size: 11px;
+  opacity: 0.65;
 }
 
 .marker-venue:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   font-size: 10px;
 }
 
-.marker-venue:hover { transform: scale(1.3); }
+.marker-venue:hover {
+  transform: scale(1.3);
+  opacity: 1;
+}
 
 /* MapLibre popup overrides */
 .maplibregl-popup-content {