Refactor modal system: BaseModal renders shell, unified open(args) API (#3923)

## Description

Refactors the modal system so that `BaseModal` owns the `<o-modal>`
shell rendering, tab state, and lifecycle. Modal subclasses now provide
content via small hook methods (`renderHeaderSlot()`, `renderBody(tab)`,
`modalConfig()`) instead of each rebuilding the `<o-modal>` template and
inline-mode branching.

This sets up the foundation for a future modal URL router (e.g.
`#modal=store&tab=flags`), which will be a follow-up PR.

### What changed

**`BaseModal`** — `src/client/components/BaseModal.ts`
- Now renders the `<o-modal>` shell itself; subclasses no longer
duplicate it
- Owns `activeTab` state and dispatches per-tab rendering via
`renderBody(tab)`
- Single `modalConfig()` method returns `{ title?, tabs?, hideHeader?,
hideCloseButton?, alwaysMaximized?, maxWidth? }`
- Uniform `open(args?)` / `close(args?)` interface; subclasses interpret
args in `onOpen(args)` / `onClose(args)`
- Tabbed modals can lazy-load via `onTabEnter(tab)` lifecycle hook
- Re-entrancy guard on `open()` so `showPage()` re-invocations don't
clobber state set by the outer call
- Initial tab defaults to first entry in `modalConfig().tabs` so the
active tab is highlighted on first open

**17 modals migrated** to the new shape:
- Tabbed: Store, UserSetting, Leaderboard, Clan
- Non-tabbed: FlagInput, Account, TokenLogin, News, TerritoryPatterns,
Troubleshooting, SinglePlayer, Matchmaking, RankedModal, Help, Language
- Lobby: JoinLobbyModal, HostLobbyModal (kept their `confirmBeforeClose`
/ `closeAndLeave` / `closeWithoutLeaving` methods)

Per-modal diffs are mostly mechanical:
- Drop the `<o-modal>` wrapper template and the `if (this.inline) return
content` branch
- Drop the inner `<div class="${this.modalContainerClass}">` wrapper
(shell styling now lives on `<o-modal>`)
- Move header content into `renderHeaderSlot()` so it lives in the
sticky header area
- Convert `super.open()`/`super.close()` overrides into
`onOpen(args)`/`onClose(args)` hooks
- For tabbed modals: drop subclass `@state activeTab`, manual
`handleTabChange`, and the `render()` switch — all owned by BaseModal
now

**Other changes:**
- `Store`: in affiliate mode (`#affiliate=X`), tabs are hidden and a
single combined grid of purchasable affiliate items is shown
- `Main.ts`: `joinModal.open(lobbyId, lobbyInfo)` callsites converted to
the new `open({ lobbyId, lobbyInfo })` shape

### Follow-up

Modal URL router (`#modal=X&tab=Y&...`) is a separate PR on top of this
foundation.

## Please complete the following:

- [x] I have added screenshots for all UI updates _(no visual changes;
smoke-tested in dev)_
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file _(no new user-visible strings)_
- [ ] I have added relevant tests to the test directory _(no test
coverage; tested in browser)_
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/components/RankedModal.ts

@@ -78,50 +78,41 @@ export class RankedModal extends BaseModal {
     return this;
   }
 
-  render() {
-    const content = html`
-      <div class="${this.modalContainerClass}">
-        ${modalHeader({
-          title: translateText("mode_selector.ranked_title"),
-          onBack: () => this.close(),
-          ariaLabel: translateText("common.back"),
-        })}
-        <div class="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-6">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            ${this.renderCard(
-              translateText("mode_selector.ranked_1v1_title"),
-              this.errorMessage ??
-                (hasLinkedAccount(this.userMeResponse)
-                  ? translateText("matchmaking_modal.elo", { elo: this.elo })
-                  : translateText("mode_selector.ranked_title")),
-              () => this.handleRanked(),
-            )}
-            ${this.renderDisabledCard(
-              translateText("mode_selector.ranked_2v2_title"),
-              translateText("mode_selector.coming_soon"),
-            )}
-            ${this.renderDisabledCard(
-              translateText("mode_selector.coming_soon"),
-              "",
-            )}
-            ${this.renderDisabledCard(
-              translateText("mode_selector.coming_soon"),
-              "",
-            )}
-          </div>
+  protected renderHeaderSlot() {
+    return modalHeader({
+      title: translateText("mode_selector.ranked_title"),
+      onBack: () => this.close(),
+      ariaLabel: translateText("common.back"),
+    });
+  }
+
+  protected renderBody() {
+    return html`
+      <div class="custom-scrollbar p-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          ${this.renderCard(
+            translateText("mode_selector.ranked_1v1_title"),
+            this.errorMessage ??
+              (hasLinkedAccount(this.userMeResponse)
+                ? translateText("matchmaking_modal.elo", { elo: this.elo })
+                : translateText("mode_selector.ranked_title")),
+            () => this.handleRanked(),
+          )}
+          ${this.renderDisabledCard(
+            translateText("mode_selector.ranked_2v2_title"),
+            translateText("mode_selector.coming_soon"),
+          )}
+          ${this.renderDisabledCard(
+            translateText("mode_selector.coming_soon"),
+            "",
+          )}
+          ${this.renderDisabledCard(
+            translateText("mode_selector.coming_soon"),
+            "",
+          )}
         </div>
       </div>
     `;
-
-    if (this.inline) {
-      return content;
-    }
-
-    return html`
-      <o-modal ?hideHeader=${true} ?hideCloseButton=${true}>
-        ${content}
-      </o-modal>
-    `;
   }
 
   private renderCard(title: string, subtitle: string, onClick: () => void) {