Merge skin/effects pickers into one lobby Cosmetics modal (#4617)

## What

Replaces the three lobby cosmetic buttons (skin, flag, effects) with
two: **Flag** and **Cosmetics**. The new Cosmetics button opens a single
tabbed modal (`#modal=cosmetics`) with:

- **Skins** — the combined patterns + image-skins grid (from
TerritoryPatternsModal)
- **Effects** — all effect types via the tabbed effects-grid, same
layout as the Store

## Changes

- New `CosmeticsModal` and `CosmeticsInput` (lobby button previews the
selected skin/pattern, shows a "Cosmetics" label on defaults, hidden on
CrazyGames via `no-crazygames`)
- Removed `TerritoryPatternsModal`, `EffectsModal`, `PatternInput`,
`EffectsInput` and their wiring in Main.ts / index.html / LangSelector
- Selecting a skin or pattern no longer closes the modal — the tile
highlight moves to the new selection (matches the Effects tab behavior)
- i18n: added `cosmetics.title/button_title/search`; removed the keys
orphaned by the deleted components

## Notes

- Deep links to the old `#modal=territory-patterns` and `#modal=effects`
no longer resolve
- A follow-up PR (crowns cosmetic) stacks on this branch

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

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

src/client/components/PlayPage.ts

@@ -121,40 +121,32 @@ export class PlayPage extends LitElement {
               <username-input
                 class="flex-1 min-w-0 h-10 lg:h-[50px]"
               ></username-input>
-              <pattern-input
-                id="pattern-input-mobile"
-                show-select-label
-                adaptive-size
-                class="shrink-0 lg:hidden"
-              ></pattern-input>
               <flag-input
                 id="flag-input-mobile"
                 show-select-label
                 class="shrink-0 lg:hidden h-10 w-10"
               ></flag-input>
-              <effects-input
-                id="effects-input-mobile"
-                class="shrink-0 lg:hidden h-10 w-10"
-              ></effects-input>
+              <cosmetics-input
+                id="cosmetics-input-mobile"
+                show-select-label
+                adaptive-size
+                class="no-crazygames shrink-0 lg:hidden"
+              ></cosmetics-input>
             </div>
           </div>
 
-          <!-- Skin + flag: right col -->
+          <!-- Flag + cosmetics: right col -->
           <div class="hidden lg:flex h-[60px] gap-2">
-            <pattern-input
-              id="pattern-input-desktop"
-              show-select-label
-              class="flex-1 h-full"
-            ></pattern-input>
             <flag-input
               id="flag-input-desktop"
               show-select-label
               class="flex-1 h-full"
             ></flag-input>
-            <effects-input
-              id="effects-input-desktop"
-              class="flex-1 h-full"
-            ></effects-input>
+            <cosmetics-input
+              id="cosmetics-input-desktop"
+              show-select-label
+              class="no-crazygames flex-1 h-full"
+            ></cosmetics-input>
           </div>
         </div>