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/FlagInputModal.ts

@@ -122,67 +122,49 @@ export class FlagInputModal extends BaseModal {
     `;
   }
 
-  render() {
-    const content = html`
-      <div class="${this.modalContainerClass}">
-        <div
-          class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
-        >
-          ${modalHeader({
-            title: translateText("flag_input.title"),
-            onBack: () => this.close(),
-            ariaLabel: translateText("common.back"),
-            rightContent: html`<not-logged-in-warning></not-logged-in-warning>`,
-          })}
+  protected renderHeaderSlot() {
+    return html`
+      <div
+        class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
+      >
+        ${modalHeader({
+          title: translateText("flag_input.title"),
+          onBack: () => this.close(),
+          ariaLabel: translateText("common.back"),
+          rightContent: html`<not-logged-in-warning></not-logged-in-warning>`,
+        })}
 
-          <div class="md:flex items-center gap-2 justify-center mt-4">
-            <input
-              class="h-12 w-full max-w-md border border-white/10 bg-black/60
+        <div class="md:flex items-center gap-2 justify-center mt-4">
+          <input
+            class="h-12 w-full max-w-md border border-white/10 bg-black/60
               rounded-xl shadow-inner text-xl text-center focus:outline-none
               focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 text-white placeholder-white/30 transition-all"
-              type="text"
-              placeholder=${translateText("flag_input.search_flag")}
-              .value=${this.search}
-              @change=${this.handleSearch}
-              @keyup=${this.handleSearch}
-            />
-          </div>
-        </div>
-        <div class="flex justify-center py-3 shrink-0">
-          <o-button
-            class="no-crazygames"
-            variant="primary"
-            size="sm"
-            translationKey="main.store"
-            @click=${() => {
-              this.close();
-              window.showPage?.("page-item-store");
-            }}
-          ></o-button>
-        </div>
-
-        <div
-          class="flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent mr-1"
-        >
-          ${this.renderFlags()}
+            type="text"
+            placeholder=${translateText("flag_input.search_flag")}
+            .value=${this.search}
+            @change=${this.handleSearch}
+            @keyup=${this.handleSearch}
+          />
         </div>
       </div>
     `;
+  }
 
-    if (this.inline) {
-      return content;
-    }
-
+  protected renderBody() {
     return html`
-      <o-modal
-        id="flag-input-modal"
-        title=${translateText("flag_input.title")}
-        ?inline=${this.inline}
-        hideHeader
-        hideCloseButton
-      >
-        ${content}
-      </o-modal>
+      <div class="flex justify-center py-3 shrink-0">
+        <o-button
+          class="no-crazygames"
+          variant="primary"
+          size="sm"
+          translationKey="main.store"
+          @click=${() => {
+            this.close();
+            window.showPage?.("page-item-store");
+          }}
+        ></o-button>
+      </div>
+      <div class="px-3 pb-3">${this.renderFlags()}</div>
     `;
   }