From 7013a7b0683d9187f12a07814534a89aca176363 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 29 Nov 2025 06:40:03 -0600
Subject: [PATCH] fix(know-your-world): restore Start button character
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bring back the travel-themed design:
- Decorative flag strip at top
- Stacked travel icons (✈️🌍 etc)
- "Start {Region}" text with context
- Region count subtitle
- Gradient background with hover effects

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../know-your-world/components/SetupPhase.tsx | 87 ++++++++++++++-----
 .../know-your-world/customCrops.ts            |  1 -
 2 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx b/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
index 2ac9d669..9d6d5949 100644
--- a/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
@@ -515,7 +515,7 @@ export function SetupPhase() {
           </Select.Portal>
         </Select.Root>
 
-          {/* Start Button - Travel-themed, compact for panel */}
+          {/* Start Button - Travel-themed with character */}
           <button
             data-action="start-game"
             onClick={startGame}
@@ -527,7 +527,7 @@ export function SetupPhase() {
               gap: '2',
               padding: '2 3',
               width: { base: '160px', sm: '220px' },
-              height: { base: '48px', sm: '72px' },
+              height: { base: '64px', sm: '72px' },
               fontSize: { base: 'sm', sm: 'md' },
               fontWeight: 'bold',
               color: 'white',
@@ -555,37 +555,82 @@ export function SetupPhase() {
               e.currentTarget.style.background = regionTheme.gradient
             }}
           >
-            {/* Travel icon */}
-            <span className={css({ fontSize: { base: 'lg', sm: 'xl' } })}>
-              {regionTheme.icons[0]}
-            </span>
+            {/* Decorative flag strip at top */}
+            <div
+              className={css({
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                height: '14px',
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '0.5',
+                fontSize: '2xs',
+                bg: 'rgba(0,0,0,0.15)',
+                paddingTop: '1px',
+                overflow: 'hidden',
+              })}
+            >
+              {regionTheme.flagEmojis.slice(0, 4).map((flag, i) => (
+                <span key={i} className={css({ opacity: 0.9 })}>
+                  {flag}
+                </span>
+              ))}
+            </div>
 
-            {/* Text content */}
+            {/* Main content */}
             <div
               className={css({
                 display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
+                alignItems: 'center',
+                gap: '2',
+                marginTop: '6px',
               })}
             >
-              <span
+              {/* Travel icons */}
+              <div
                 className={css({
-                  fontSize: { base: 'sm', sm: 'md' },
-                  fontWeight: 'bold',
-                  textShadow: '0 1px 2px rgba(0,0,0,0.2)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  fontSize: { base: 'md', sm: 'lg' },
+                  lineHeight: 1,
                 })}
               >
-                Start
-              </span>
-              <span
+                <span>{regionTheme.icons[0]}</span>
+                <span className={css({ fontSize: 'xs', marginTop: '-2px' })}>
+                  {regionTheme.icons[1]}
+                </span>
+              </div>
+
+              {/* Text content */}
+              <div
                 className={css({
-                  fontSize: { base: '2xs', sm: 'xs' },
-                  fontWeight: 'normal',
-                  opacity: 0.9,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
                 })}
               >
-                {totalRegionCount} regions
-              </span>
+                <span
+                  className={css({
+                    fontSize: { base: 'sm', sm: 'md' },
+                    fontWeight: 'bold',
+                    textShadow: '0 1px 2px rgba(0,0,0,0.2)',
+                  })}
+                >
+                  Start {contextLabel}
+                </span>
+                <span
+                  className={css({
+                    fontSize: { base: '2xs', sm: 'xs' },
+                    fontWeight: 'normal',
+                    opacity: 0.9,
+                  })}
+                >
+                  {totalRegionCount} regions
+                </span>
+              </div>
             </div>
           </button>
         </div>
diff --git a/apps/web/src/arcade-games/know-your-world/customCrops.ts b/apps/web/src/arcade-games/know-your-world/customCrops.ts
index 7e98148d..b59d8fda 100644
--- a/apps/web/src/arcade-games/know-your-world/customCrops.ts
+++ b/apps/web/src/arcade-games/know-your-world/customCrops.ts
@@ -15,7 +15,6 @@ export interface CropOverrides {
 export const customCrops: CropOverrides = {
   world: {
     africa: '394.40 344.29 254.23 229.00',
-    oceania: '785.47 464.88 216.32 133.43',
     'south-america': '204.64 424.60 185.09 230.17',
     'north-america': '-17.45 150.31 444.57 299.97',
     europe: '399.21 102.01 198.44 266.44',