Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout

Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/components/WeatherManager.js

@@ -371,10 +371,62 @@ class WeatherManager {
             if (this.sunTimes) {
                 this.updateDaylightHoursBar();
             }
+
+            // Update compact weather bar (landscape mode)
+            this.renderCompactWeatherBar();
         } catch (error) {
             console.error('Error updating weather UI:', error);
         }
     }
+
+    /**
+     * Render compact weather bar for landscape mode
+     * Shows: [icon] temp condition | Sunrise HH:MM | Sunset HH:MM
+     */
+    renderCompactWeatherBar() {
+        const bar = document.getElementById('compact-weather-bar');
+        if (!bar || !this.weatherData) return;
+
+        bar.textContent = '';
+
+        const icon = document.createElement('img');
+        icon.className = 'weather-bar-icon';
+        icon.src = this.weatherData.icon || '';
+        icon.alt = this.weatherData.condition || '';
+        bar.appendChild(icon);
+
+        const tempSpan = document.createElement('span');
+        const strong = document.createElement('strong');
+        strong.textContent = `${this.weatherData.temperature}\u00B0C`;
+        tempSpan.appendChild(strong);
+        tempSpan.appendChild(document.createTextNode(` ${this.weatherData.condition || ''}`));
+        bar.appendChild(tempSpan);
+
+        const sep1 = document.createElement('span');
+        sep1.className = 'weather-bar-sep';
+        sep1.textContent = '|';
+        bar.appendChild(sep1);
+
+        let sunriseStr = '--:--';
+        let sunsetStr = '--:--';
+        if (this.sunTimes) {
+            sunriseStr = this.formatTime(this.sunTimes.today.sunrise);
+            sunsetStr = this.formatTime(this.sunTimes.today.sunset);
+        }
+
+        const sunriseSpan = document.createElement('span');
+        sunriseSpan.textContent = `\u2600\uFE0F Sunrise ${sunriseStr}`;
+        bar.appendChild(sunriseSpan);
+
+        const sep2 = document.createElement('span');
+        sep2.className = 'weather-bar-sep';
+        sep2.textContent = '|';
+        bar.appendChild(sep2);
+
+        const sunsetSpan = document.createElement('span');
+        sunsetSpan.textContent = `\uD83C\uDF19 Sunset ${sunsetStr}`;
+        bar.appendChild(sunsetSpan);
+    }
     
     /**
      * Update sunrise and sunset times from API data