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/main.js

@@ -9,6 +9,7 @@ import { ConfigManager } from './components/ConfigManager.js';
 import { Clock } from './components/Clock.js';
 import { WeatherManager } from './components/WeatherManager.js';
 import { DeparturesManager } from './components/DeparturesManager.js';
+import { NewsTicker } from './components/NewsTicker.js';
 
 /**
  * Function to ensure content wrapper exists for rotated orientations
@@ -77,6 +78,9 @@ document.addEventListener('DOMContentLoaded', async function() {
             lastUpdatedId: 'last-updated'
         });
 
+        // Initialize NewsTicker (visible in landscape mode only via CSS)
+        window.newsTicker = new NewsTicker();
+
         // Set up event listeners
         document.addEventListener('darkModeChanged', event => {
             document.body.classList.toggle('dark-mode', event.detail.isDarkMode);