Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -137,23 +137,60 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
                             const largeArcFlag = slice.angle > 180 ? 1 : 0;
                             const pathData = `M 0 0 L ${startX} ${startY} A 1 1 0 ${largeArcFlag} 0 ${endX} ${endY} Z`;
 
+                            // Text Layout Logic
+                            // If slice is narrow (<45 deg) OR text is long (>4 chars), use Vertical Stack
+                            const isVertical = slice.angle < 45 || slice.name.length > 4;
+                            const midAngle = (slice.startAngle + slice.endAngle) / 2;
+                            const displayText = slice.name.length > 8 ? slice.name.substring(0,7)+'..' : slice.name;
+
                             return (
                                 <g key={i}>
                                     <path d={pathData} fill={slice.color} stroke="white" strokeWidth="0.01" />
-                                    {/* Text Label - Midpoint */}
-                                    <g transform={`rotate(${(slice.startAngle + slice.endAngle)/2}) translate(0.6)`}>
-                                        <text 
-                                            x="0" y="0" 
-                                            fill="white" 
-                                            fontSize="0.08" 
-                                            fontWeight="bold" 
-                                            textAnchor="middle" 
-                                            dominantBaseline="middle"
-                                            transform="rotate(90)"
-                                            style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}
-                                        >
-                                            {slice.name.length > 6 ? slice.name.substring(0,5)+'..' : slice.name}
-                                        </text>
+                                    
+                                    <g transform={`rotate(${midAngle})`}>
+                                        {isVertical ? (
+                                            // Vertical Stack Mode (Characters stacked radially)
+                                            displayText.split('').map((char, idx) => {
+                                                const charSize = 0.08;
+                                                const spacing = 0.09;
+                                                // Center the stack around radius ~0.6
+                                                const totalHeight = displayText.length * spacing;
+                                                const startR = 0.65 - (totalHeight / 2) + (spacing/2);
+                                                const r = startR + idx * spacing;
+                                                
+                                                return (
+                                                    <text 
+                                                        key={idx}
+                                                        x={r} 
+                                                        y={0} 
+                                                        fill="white" 
+                                                        fontSize={charSize} 
+                                                        fontWeight="bold" 
+                                                        textAnchor="middle" 
+                                                        dominantBaseline="middle"
+                                                        transform={`rotate(90, ${r}, 0)`}
+                                                        style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}
+                                                    >
+                                                        {char}
+                                                    </text>
+                                                );
+                                            })
+                                        ) : (
+                                            // Horizontal Mode (Tangential)
+                                            <text 
+                                                x={0.65} 
+                                                y={0} 
+                                                fill="white" 
+                                                fontSize="0.09" 
+                                                fontWeight="bold" 
+                                                textAnchor="middle" 
+                                                dominantBaseline="middle"
+                                                transform="rotate(90, 0.65, 0)"
+                                                style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}
+                                            >
+                                                {displayText}
+                                            </text>
+                                        )}
                                     </g>
                                 </g>
                             );