Make the important events panel scrollable (#4346)

## What

Cap the height of the **Tier 1 (important) events panel** and make it
scroll when many events stack up, instead of letting it grow unbounded
up the screen.

## Why

The less-important (Tier 2) events panel was already height-capped and
scrollable, but the important panel had no limit — a burst of important
events (chat, nukes inbound, alliance changes, etc.) could push the
panel arbitrarily tall.

## Changes (`src/client/hud/layers/EventsDisplay.ts`)

- Added `max-h-[30vh] lg:max-h-[40vh] overflow-y-auto` to the
important-events container.
- Mirrored the existing Tier 2 auto-scroll-to-bottom behavior for the
important panel (new `.important-events-container` query + scroll
tracking), so the newest important events stay in view rather than being
hidden below the fold. If the player scrolls up, auto-scroll pauses
(same as Tier 2).

## Testing

Verified in the live game by injecting 15 important events:
- Panel is height-capped and scrollable (`scrollHeight 540 >
clientHeight 400`).
- Auto-scrolls to the newest (`scrollTop` pinned to bottom); events 5–15
visible, older ones reachable by scrolling up.

lint clean.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

src/client/hud/layers/EventsDisplay.ts

@@ -74,11 +74,19 @@ export class EventsDisplay extends LitElement implements Controller {
   private _eventsContainer?: HTMLDivElement;
   private _shouldScrollToBottom = true;
 
+  @query(".important-events-container")
+  private _importantEventsContainer?: HTMLDivElement;
+  private _shouldScrollImportantToBottom = true;
+
   updated(changed: Map<string, unknown>) {
     super.updated(changed);
     if (this._eventsContainer && this._shouldScrollToBottom) {
       this._eventsContainer.scrollTop = this._eventsContainer.scrollHeight;
     }
+    if (this._importantEventsContainer && this._shouldScrollImportantToBottom) {
+      this._importantEventsContainer.scrollTop =
+        this._importantEventsContainer.scrollHeight;
+    }
   }
 
   private renderButton(options: {
@@ -172,6 +180,14 @@ export class EventsDisplay extends LitElement implements Controller {
       this._shouldScrollToBottom = true;
     }
 
+    if (this._importantEventsContainer) {
+      const el = this._importantEventsContainer;
+      this._shouldScrollImportantToBottom =
+        el.scrollHeight - el.scrollTop - el.clientHeight < 5;
+    } else {
+      this._shouldScrollImportantToBottom = true;
+    }
+
     if (!this._isVisible && !this.game.inSpawnPhase()) {
       this._isVisible = true;
       this.requestUpdate();
@@ -640,7 +656,7 @@ export class EventsDisplay extends LitElement implements Controller {
         ${tier1Events.length > 0 || showBetrayalTimer
           ? html`
               <div
-                class="bg-gray-800 backdrop-blur-sm rounded-lg shadow-lg border-l-4 border-red-500"
+                class="bg-gray-800 backdrop-blur-sm max-h-[30vh] lg:max-h-[40vh] overflow-y-auto rounded-lg shadow-lg border-l-4 border-red-500 important-events-container"
               >
                 <table
                   class="w-full border-collapse text-white text-base lg:text-lg font-medium pointer-events-auto"