From e55f848a26092a2b4a5b09c3c255544ea9666f1b Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 30 Oct 2025 16:55:25 -0500
Subject: [PATCH] refactor(rithmomachia): make setup phase UI more compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce spacing and font sizes throughout the setup page to make better use
of screen space while maintaining readability and drama.

Changes:
- Reduce title font size: 6vh → 3.5vh
- Reduce subtitle and description font sizes
- Reduce all padding and margins (50% reduction)
- Reduce ornamental corner sizes: 8vh → 2.5vh
- Reduce border widths: 0.5vh → 0.3vh
- Reduce shadows for subtler effect
- Simplify description from 2 lines to 1 line
- Reduce start button size: 4vh → 2.5vh font
- Reduce threshold input width: 10vh → 6vh

Result: More compact, efficient use of space without sacrificing visual appeal.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/RithmomachiaGame.tsx           | 155 +++++++++---------
 1 file changed, 78 insertions(+), 77 deletions(-)

diff --git a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
index 14386314..0ad0e23f 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
@@ -416,9 +416,9 @@ function SetupPhase() {
           height: '100%',
           display: 'flex',
           flexDirection: 'column',
-          gap: '1.5vh',
+          gap: '1vh',
           overflow: 'hidden',
-          p: '2vh',
+          p: '1.5vh',
         })}
       >
         {lastError && (
@@ -458,93 +458,95 @@ function SetupPhase() {
           </div>
         )}
 
-        {/* Title Section - Dramatic medieval manuscript style */}
+        {/* Title Section - Compact medieval manuscript style */}
         <div
           data-element="title-section"
           className={css({
             textAlign: 'center',
             bg: 'rgba(255, 255, 255, 0.95)',
-            borderRadius: '2vh',
-            p: '3vh',
-            boxShadow: '0 2vh 6vh rgba(0,0,0,0.5)',
+            borderRadius: '1.5vh',
+            p: '1.5vh',
+            boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
             width: '100%',
             position: 'relative',
-            border: '0.5vh solid',
+            border: '0.3vh solid',
             borderColor: 'rgba(251, 191, 36, 0.6)',
             backdropFilter: 'blur(10px)',
+            flexShrink: 0,
           })}
         >
-          {/* Ornamental corners */}
+          {/* Ornamental corners - smaller */}
           <div
             className={css({
               position: 'absolute',
-              top: '-1vh',
-              left: '-1vh',
-              width: '8vh',
-              height: '8vh',
-              borderTop: '0.5vh solid',
-              borderLeft: '0.5vh solid',
+              top: '-0.5vh',
+              left: '-0.5vh',
+              width: '2.5vh',
+              height: '2.5vh',
+              borderTop: '0.3vh solid',
+              borderLeft: '0.3vh solid',
               borderColor: 'rgba(251, 191, 36, 0.8)',
-              borderRadius: '2vh 0 0 0',
+              borderRadius: '1.5vh 0 0 0',
             })}
           />
           <div
             className={css({
               position: 'absolute',
-              top: '-1vh',
-              right: '-1vh',
-              width: '8vh',
-              height: '8vh',
-              borderTop: '0.5vh solid',
-              borderRight: '0.5vh solid',
+              top: '-0.5vh',
+              right: '-0.5vh',
+              width: '2.5vh',
+              height: '2.5vh',
+              borderTop: '0.3vh solid',
+              borderRight: '0.3vh solid',
               borderColor: 'rgba(251, 191, 36, 0.8)',
-              borderRadius: '0 2vh 0 0',
+              borderRadius: '0 1.5vh 0 0',
             })}
           />
           <div
             className={css({
               position: 'absolute',
-              bottom: '-1vh',
-              left: '-1vh',
-              width: '8vh',
-              height: '8vh',
-              borderBottom: '0.5vh solid',
-              borderLeft: '0.5vh solid',
+              bottom: '-0.5vh',
+              left: '-0.5vh',
+              width: '2.5vh',
+              height: '2.5vh',
+              borderBottom: '0.3vh solid',
+              borderLeft: '0.3vh solid',
               borderColor: 'rgba(251, 191, 36, 0.8)',
-              borderRadius: '0 0 0 2vh',
+              borderRadius: '0 0 0 1.5vh',
             })}
           />
           <div
             className={css({
               position: 'absolute',
-              bottom: '-1vh',
-              right: '-1vh',
-              width: '8vh',
-              height: '8vh',
-              borderBottom: '0.5vh solid',
-              borderRight: '0.5vh solid',
+              bottom: '-0.5vh',
+              right: '-0.5vh',
+              width: '2.5vh',
+              height: '2.5vh',
+              borderBottom: '0.3vh solid',
+              borderRight: '0.3vh solid',
               borderColor: 'rgba(251, 191, 36, 0.8)',
-              borderRadius: '0 0 2vh 0',
+              borderRadius: '0 0 1.5vh 0',
             })}
           />
 
           <h1
             className={css({
-              fontSize: '6vh',
+              fontSize: '3.5vh',
               fontWeight: 'bold',
-              mb: '1.5vh',
+              mb: '0.5vh',
               color: '#7c2d12',
-              textShadow: '0.3vh 0.3vh 0 rgba(251, 191, 36, 0.5), 0.6vh 0.6vh 1vh rgba(0,0,0,0.3)',
-              letterSpacing: '0.3vh',
+              textShadow:
+                '0.15vh 0.15vh 0 rgba(251, 191, 36, 0.5), 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.3)',
+              letterSpacing: '0.2vh',
             })}
           >
             ⚔️ RITHMOMACHIA ⚔️
           </h1>
           <div
             className={css({
-              height: '0.3vh',
+              height: '0.2vh',
               width: '60%',
-              margin: '0 auto 1.5vh',
+              margin: '0 auto 0.5vh',
               background:
                 'linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent)',
             })}
@@ -552,9 +554,9 @@ function SetupPhase() {
           <p
             className={css({
               color: '#92400e',
-              fontSize: '3vh',
+              fontSize: '1.8vh',
               fontWeight: 'bold',
-              mb: '1.5vh',
+              mb: '0.3vh',
               fontStyle: 'italic',
             })}
           >
@@ -563,14 +565,12 @@ function SetupPhase() {
           <p
             className={css({
               color: '#78350f',
-              fontSize: '1.8vh',
-              lineHeight: '1.4',
+              fontSize: '1.2vh',
+              lineHeight: '1.3',
               fontWeight: '500',
             })}
           >
-            A medieval strategy game of mathematical combat.
-            <br />
-            Capture through relations • Win through harmony
+            Medieval strategy • Mathematical combat
           </p>
         </div>
 
@@ -582,10 +582,10 @@ function SetupPhase() {
             flex: 1,
             minHeight: 0,
             bg: 'rgba(255, 255, 255, 0.95)',
-            borderRadius: '2vh',
-            p: '2vh',
-            boxShadow: '0 2vh 6vh rgba(0,0,0,0.5)',
-            border: '0.3vh solid',
+            borderRadius: '1.5vh',
+            p: '1.5vh',
+            boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
+            border: '0.2vh solid',
             borderColor: 'rgba(251, 191, 36, 0.4)',
             backdropFilter: 'blur(10px)',
             display: 'flex',
@@ -595,13 +595,13 @@ function SetupPhase() {
         >
           <h2
             className={css({
-              fontSize: '2.5vh',
+              fontSize: '2vh',
               fontWeight: 'bold',
-              mb: '1.5vh',
+              mb: '1vh',
               color: '#7c2d12',
               display: 'flex',
               alignItems: 'center',
-              gap: '1vh',
+              gap: '0.5vh',
               flexShrink: 0,
             })}
           >
@@ -613,7 +613,7 @@ function SetupPhase() {
             className={css({
               display: 'grid',
               gridTemplateColumns: 'repeat(auto-fit, minmax(35%, 1fr))',
-              gap: '1.5vh',
+              gap: '1vh',
               flex: 1,
               minHeight: 0,
               alignContent: 'start',
@@ -701,12 +701,12 @@ function SetupPhase() {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    pt: '1vh',
-                    borderTop: '0.2vh solid',
+                    pt: '0.8vh',
+                    borderTop: '0.15vh solid',
                     borderColor: 'rgba(251, 191, 36, 0.3)',
                   })}
                 >
-                  <div className={css({ fontSize: '1.4vh', fontWeight: 'bold', color: '#92400e' })}>
+                  <div className={css({ fontSize: '1.2vh', fontWeight: 'bold', color: '#92400e' })}>
                     Threshold:
                   </div>
                   <input
@@ -716,15 +716,16 @@ function SetupPhase() {
                     onClick={(e) => e.stopPropagation()}
                     min="1"
                     className={css({
-                      width: '10vh',
-                      px: '1vh',
-                      py: '0.5vh',
+                      width: '6vh',
+                      minHeight: '2.5vh',
+                      px: '0.5vh',
+                      py: '0.3vh',
                       borderRadius: '0.5vh',
-                      border: '0.2vh solid',
+                      border: '0.15vh solid',
                       borderColor: 'rgba(251, 191, 36, 0.6)',
                       bg: 'rgba(255, 255, 255, 0.9)',
                       textAlign: 'center',
-                      fontSize: '1.6vh',
+                      fontSize: '1.4vh',
                       fontWeight: 'bold',
                       color: '#7c2d12',
                       _focus: {
@@ -932,7 +933,7 @@ function SetupPhase() {
           </div>
         </div>
 
-        {/* Start Button - Dramatic and always visible */}
+        {/* Start Button - Compact but dramatic */}
         <button
           type="button"
           data-action="start-game"
@@ -940,41 +941,41 @@ function SetupPhase() {
           disabled={startDisabled}
           className={css({
             width: '100%',
-            py: '3vh',
+            py: '2vh',
             bg: startDisabled
               ? 'rgba(100, 100, 100, 0.5)'
               : 'linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%)',
             color: startDisabled ? 'rgba(200, 200, 200, 0.7)' : '#7c2d12',
-            borderRadius: '2vh',
-            fontSize: '4vh',
+            borderRadius: '1.5vh',
+            fontSize: '2.5vh',
             fontWeight: 'bold',
             cursor: startDisabled ? 'not-allowed' : 'pointer',
             transition: 'all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
             boxShadow: startDisabled
-              ? '0 1vh 3vh rgba(0,0,0,0.2)'
-              : '0 2vh 6vh rgba(251, 191, 36, 0.6), inset 0 -0.5vh 1vh rgba(124, 45, 18, 0.3)',
-            border: '0.5vh solid',
+              ? '0 0.5vh 1.5vh rgba(0,0,0,0.2)'
+              : '0 1vh 3vh rgba(251, 191, 36, 0.6), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.3)',
+            border: '0.3vh solid',
             borderColor: startDisabled ? 'rgba(100, 100, 100, 0.3)' : 'rgba(245, 158, 11, 0.8)',
             textTransform: 'uppercase',
-            letterSpacing: '0.5vh',
+            letterSpacing: '0.3vh',
             textShadow: startDisabled
               ? 'none'
-              : '0.2vh 0.2vh 0.5vh rgba(124, 45, 18, 0.5), 0 0 2vh rgba(255, 255, 255, 0.3)',
+              : '0.1vh 0.1vh 0.3vh rgba(124, 45, 18, 0.5), 0 0 1vh rgba(255, 255, 255, 0.3)',
             flexShrink: 0,
             position: 'relative',
             overflow: 'hidden',
             _hover: startDisabled
               ? undefined
               : {
-                  transform: 'translateY(-1vh) scale(1.02)',
+                  transform: 'translateY(-0.5vh) scale(1.02)',
                   boxShadow:
-                    '0 3vh 8vh rgba(251, 191, 36, 0.8), inset 0 -0.5vh 1vh rgba(124, 45, 18, 0.4)',
+                    '0 1.5vh 4vh rgba(251, 191, 36, 0.8), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.4)',
                   borderColor: 'rgba(251, 191, 36, 1)',
                 },
             _active: startDisabled
               ? undefined
               : {
-                  transform: 'translateY(-0.3vh) scale(0.98)',
+                  transform: 'translateY(-0.2vh) scale(0.98)',
                 },
             _before: startDisabled
               ? undefined