style(rithmomachia): improve divider styling and make tabs responsive

Panel Divider:
- Change from purple (rgba(139, 92, 246)) to neutral gray (#e5e7eb)
- Matches guide's light gray theme better
- Width: 2px (thinner), grows to 3px on hover
- Hover color: medium gray (#9ca3af)
- More elegant and fits the design aesthetic

Guide Tabs:
- Make tabs fully responsive with flex: '1 1 0'
- All tabs always visible and sized equally
- Remove horizontal scroll and fade indicators
- Tabs shrink/grow to fit available width
- Add text overflow handling for very narrow states
- Clean, simple design without scroll affordances

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

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx

@@ -574,101 +574,64 @@ export function PlayingGuideModal({
         )}
       </div>
 
-      {/* Navigation Tabs - ultra responsive with scroll indicators */}
+      {/* Navigation Tabs - fully responsive, always fit in available width */}
       <div
+        data-element="guide-nav"
         style={{
-          position: 'relative',
+          display: 'flex',
+          flexDirection: 'row',
+          borderBottom: '2px solid #e5e7eb',
+          background: '#f9fafb',
           flexShrink: 0,
         }}
       >
-        <div
+        {sections.map((section) => (
-          data-element="guide-nav"
+          <button
-          style={{
+            key={section.id}
-            display: 'flex',
+            type="button"
-            flexDirection: 'row', // Always horizontal, even when very narrow
+            data-action={`navigate-${section.id}`}
-            borderBottom: '2px solid #e5e7eb',
+            onClick={() => setActiveSection(section.id)}
-            background: '#f9fafb',
+            style={{
-            overflow: 'auto',
+              flex: '1 1 0', // Equal width tabs
-            flexShrink: 0,
+              minWidth: 0, // Allow shrinking below content size
-            // Hide scrollbar for cleaner look - indicators show scroll availability
+              padding: isVeryNarrow ? '10px 6px' : isNarrow ? '10px 8px' : '14px 20px',
-            scrollbarWidth: 'none',
+              fontSize: isVeryNarrow ? '16px' : isNarrow ? '12px' : '14px',
-            msOverflowStyle: 'none',
+              fontWeight: activeSection === section.id ? 'bold' : '500',
-          }}
+              color: activeSection === section.id ? '#7c2d12' : '#6b7280',
-        >
+              background: activeSection === section.id ? 'white' : 'transparent',
-          {sections.map((section) => (
+              cursor: 'pointer',
-            <button
+              transition: 'all 0.2s',
-              key={section.id}
+              border: 'none',
-              type="button"
+              borderBottom: `3px solid ${activeSection === section.id ? '#7c2d12' : 'transparent'}`,
-              data-action={`navigate-${section.id}`}
+              display: 'flex',
-              onClick={() => setActiveSection(section.id)}
+              alignItems: 'center',
-              style={{
+              justifyContent: 'center',
-                flex: '0 0 auto', // Don't grow or shrink, natural size
+              gap: isVeryNarrow ? '0' : isNarrow ? '4px' : '6px',
-                minWidth: 'fit-content',
+              lineHeight: 1,
-                padding: isVeryNarrow ? '10px 6px' : isNarrow ? '10px 8px' : '14px 20px',
+              whiteSpace: 'nowrap',
-                fontSize: isVeryNarrow ? '16px' : isNarrow ? '12px' : '14px',
+              overflow: 'hidden',
-                fontWeight: activeSection === section.id ? 'bold' : '500',
+              textOverflow: 'ellipsis',
-                color: activeSection === section.id ? '#7c2d12' : '#6b7280',
+            }}
-                background: activeSection === section.id ? 'white' : 'transparent',
+            onMouseEnter={(e) => {
-                cursor: 'pointer',
+              if (activeSection !== section.id) {
-                transition: 'all 0.2s',
+                e.currentTarget.style.background = '#f3f4f6'
-                border: 'none',
+              }
-                borderBottom: `3px solid ${activeSection === section.id ? '#7c2d12' : 'transparent'}`,
+            }}
-                display: 'flex',
+            onMouseLeave={(e) => {
-                alignItems: 'center',
+              if (activeSection !== section.id) {
-                justifyContent: 'center',
+                e.currentTarget.style.background = 'transparent'
-                gap: isVeryNarrow ? '0' : isNarrow ? '4px' : '6px',
+              }
-                lineHeight: 1,
+            }}
-                whiteSpace: 'nowrap',
+            title={section.label}
-              }}
+          >
-              onMouseEnter={(e) => {
+            <span style={{ fontSize: isVeryNarrow ? '18px' : 'inherit' }}>{section.icon}</span>
-                if (activeSection !== section.id) {
+            {!isVeryNarrow && (
-                  e.currentTarget.style.background = '#f3f4f6'
+              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                }
+                {isNarrow ? section.label.split(' ')[0] : section.label}
-              }}
+              </span>
-              onMouseLeave={(e) => {
+            )}
-                if (activeSection !== section.id) {
+          </button>
-                  e.currentTarget.style.background = 'transparent'
+        ))}
-                }
-              }}
-              title={isVeryNarrow ? section.label : undefined}
-            >
-              <span style={{ fontSize: isVeryNarrow ? '18px' : 'inherit' }}>{section.icon}</span>
-              {!isVeryNarrow && (
-                <span>{isNarrow ? section.label.split(' ')[0] : section.label}</span>
-              )}
-            </button>
-          ))}
-        </div>
-
-        {/* Fade indicators for horizontal scroll - show at all narrow widths */}
-        {(isNarrow || isVeryNarrow) && (
-          <>
-            <div
-              style={{
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: isVeryNarrow ? '16px' : '20px',
-                background: 'linear-gradient(to right, rgba(249, 250, 251, 0.95), transparent)',
-                pointerEvents: 'none',
-                zIndex: 1,
-              }}
-            />
-            <div
-              style={{
-                position: 'absolute',
-                right: 0,
-                top: 0,
-                bottom: 0,
-                width: isVeryNarrow ? '16px' : '20px',
-                background: 'linear-gradient(to left, rgba(249, 250, 251, 0.95), transparent)',
-                pointerEvents: 'none',
-                zIndex: 1,
-              }}
-            />
-          </>
-        )}
       </div>
 
       {/* Content */}

apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx

@@ -196,12 +196,13 @@ export function RithmomachiaGame() {
                   </Panel>
                   <PanelResizeHandle
                     className={css({
-                      width: '4px',
+                      width: '2px',
-                      background: 'rgba(139, 92, 246, 0.3)',
+                      background: '#e5e7eb',
                       cursor: 'col-resize',
-                      transition: 'background 0.2s',
+                      transition: 'all 0.2s',
                       _hover: {
-                        background: 'rgba(139, 92, 246, 0.6)',
+                        background: '#9ca3af',
+                        width: '3px',
                       },
                     })}
                   />
@@ -213,12 +214,13 @@ export function RithmomachiaGame() {
                   <Panel minSize={50}>{gameContent}</Panel>
                   <PanelResizeHandle
                     className={css({
-                      width: '4px',
+                      width: '2px',
-                      background: 'rgba(139, 92, 246, 0.3)',
+                      background: '#e5e7eb',
                       cursor: 'col-resize',
-                      transition: 'background 0.2s',
+                      transition: 'all 0.2s',
                       _hover: {
-                        background: 'rgba(139, 92, 246, 0.6)',
+                        background: '#9ca3af',
+                        width: '3px',
                       },
                     })}
                   />