From cc51de35e397641f5c0f4a054ea350cd5d255cd7 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 29 Nov 2025 06:38:28 -0600
Subject: [PATCH] fix(know-your-world): move Start button to top-right settings
 panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All setup controls (Mode, Guidance, Start) now in a single top-right panel,
matching the position of gameplay controls for seamless transition.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../know-your-world/components/SetupPhase.tsx | 150 +++++-------------
 1 file changed, 44 insertions(+), 106 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 4d6c932e..2e44b6ab 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
@@ -514,113 +514,51 @@ export function SetupPhase() {
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-        </div>
-      </div>
 
-      {/* BOTTOM-CENTER: Start Button - positioned prominently */}
-      <div
-        data-element="setup-start-container"
-        className={css({
-          position: 'absolute',
-          bottom: { base: '2', sm: '4' },
-          left: '50%',
-          transform: 'translateX(-50%)',
-          zIndex: 50,
-        })}
-      >
-        {/* Start Button - Travel-themed, region-specific */}
-        <button
-          data-action="start-game"
-          onClick={startGame}
-          className={css({
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: { base: '2', sm: '3' },
-            padding: { base: '2 4', sm: '3 5' },
-            width: { base: '280px', sm: '320px' },
-            height: { base: '56px', sm: '80px' },
-            fontSize: { base: 'md', sm: 'lg' },
-            fontWeight: 'bold',
-            color: 'white',
-            rounded: 'xl',
-            cursor: 'pointer',
-            transition: 'all 0.2s ease-out',
-            overflow: 'hidden',
-            border: '2px solid rgba(255,255,255,0.2)',
-            boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
-            _hover: {
-              transform: 'scale(1.02)',
-              boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
-            },
-            _active: {
-              transform: 'scale(0.98)',
-            },
-          })}
-          style={{
-            background: regionTheme.gradient,
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = regionTheme.gradientHover
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = regionTheme.gradient
-          }}
-        >
-          {/* Decorative flag strip at top */}
-          <div
-            className={css({
-              position: 'absolute',
-              top: '0',
-              left: '0',
-              right: '0',
-              height: { base: '16px', sm: '20px' },
-              display: 'flex',
-              justifyContent: 'center',
-              gap: '1',
-              fontSize: { base: '2xs', sm: 'xs' },
-              bg: 'rgba(0,0,0,0.15)',
-              paddingTop: '1px',
-              overflow: 'hidden',
-            })}
-          >
-            {regionTheme.flagEmojis.map((flag, i) => (
-              <span key={i} className={css({ opacity: 0.9 })}>
-                {flag}
-              </span>
-            ))}
-          </div>
-
-          {/* Main content */}
-          <div
+          {/* Start Button - Travel-themed, compact for panel */}
+          <button
+            data-action="start-game"
+            onClick={startGame}
             className={css({
+              position: 'relative',
               display: 'flex',
               alignItems: 'center',
-              gap: { base: '2', sm: '3' },
-              marginTop: { base: '6px', sm: '8px' },
+              justifyContent: 'center',
+              gap: '2',
+              padding: '2 3',
+              width: { base: '160px', sm: '220px' },
+              height: { base: '48px', sm: '72px' },
+              fontSize: { base: 'sm', sm: 'md' },
+              fontWeight: 'bold',
+              color: 'white',
+              rounded: 'xl',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease-out',
+              overflow: 'hidden',
+              border: '2px solid rgba(255,255,255,0.2)',
+              boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
+              _hover: {
+                transform: 'scale(1.02)',
+                boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
+              },
+              _active: {
+                transform: 'scale(0.98)',
+              },
             })}
+            style={{
+              background: regionTheme.gradient,
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = regionTheme.gradientHover
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = regionTheme.gradient
+            }}
           >
-            {/* Travel icons */}
-            <div
-              className={css({
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                fontSize: { base: 'lg', sm: '2xl' },
-                lineHeight: 1,
-              })}
-            >
-              <span>{regionTheme.icons[0]}</span>
-              <span
-                className={css({
-                  fontSize: { base: 'xs', sm: 'sm' },
-                  marginTop: '-2px',
-                })}
-              >
-                {regionTheme.icons[1]}
-              </span>
-            </div>
+            {/* Travel icon */}
+            <span className={css({ fontSize: { base: 'lg', sm: 'xl' } })}>
+              {regionTheme.icons[0]}
+            </span>
 
             {/* Text content */}
             <div
@@ -632,16 +570,16 @@ export function SetupPhase() {
             >
               <span
                 className={css({
-                  fontSize: { base: 'md', sm: 'lg' },
+                  fontSize: { base: 'sm', sm: 'md' },
                   fontWeight: 'bold',
                   textShadow: '0 1px 2px rgba(0,0,0,0.2)',
                 })}
               >
-                Start {contextLabel}
+                Start
               </span>
               <span
                 className={css({
-                  fontSize: { base: 'xs', sm: 'sm' },
+                  fontSize: { base: '2xs', sm: 'xs' },
                   fontWeight: 'normal',
                   opacity: 0.9,
                 })}
@@ -649,8 +587,8 @@ export function SetupPhase() {
                 {totalRegionCount} regions
               </span>
             </div>
-          </div>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   )