Update index.html

index.html

@@ -9,7 +9,8 @@
     <style>
         /* Confetti Keyframes: Start at bottom, burst up, then fall (simulating gravity) */
         @keyframes confetti-burst-fall {
-            0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
+            /* FIX 1: 確保起始可見 (opacity 1) 且從底部開始相對位移 */
+            0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } 
             10% { transform: translateY(-40vh) translateX(var(--confetti-initial-x)) rotate(180deg); opacity: 1; } /* Initial upward burst */
             100% { transform: translateY(100vh) translateX(var(--confetti-end-x-offset)) rotate(1080deg); opacity: 0.5; }
         }
@@ -58,24 +59,23 @@
             border-right: 15px solid transparent;
             border-top: 30px solid #fcd34d; /* Yellow arrow */
             z-index: 20;
-            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
-            /* NEW: 3D/Shadow effect */
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.2);
+            /* FIX 2: 移除 box-shadow，只保留 drop-shadow 修正方形陰影問題 */
+            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); 
             transition: transform 0.1s;
         }
 
-        .wheel-center-dot { /* NEW: Center Dot for stability */
+        .wheel-center-dot { /* FIX 3: 縮小尺寸 */
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 50px; 
-            height: 50px;
+            width: 20px; /* 縮小 */
+            height: 20px; /* 縮小 */
             border-radius: 50%;
             background: #fcd34d; /* Yellow */
             border: 4px solid #1f2937; /* Dark border to contrast */
             box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
-            z-index: 21; /* Above pointer/wheel */
+            z-index: 19; /* 降低 Z-index，讓 Overlay 蓋在上面 */
             pointer-events: none;
         }
 
@@ -92,7 +92,7 @@
             justify-content: center;
             text-align: center;
             pointer-events: none;
-            z-index: 10;
+            z-index: 25; /* FIX 3: 提高 Z-index，確保結果可見 */
         }
 
         .segment-text {
@@ -253,7 +253,8 @@
                 // Initial horizontal position (centered burst)
                 const startX = window.innerWidth / 2 + (Math.random() - 0.5) * 400;
                 c.style.left = `${startX}px`;
-                c.style.top = `${window.innerHeight}px`; // Start off-screen at the bottom
+                // FIX 1: 使用 100vh 確保起始點在視窗底部邊緣 (為了解決 confetti 不見的問題)
+                c.style.top = `100vh`; 
 
                 const duration = Math.random() * 2 + 3; // 3 to 5 seconds
                 const delay = Math.random() * 0.5;
@@ -508,10 +509,10 @@
             // 1. 禁用 CSS transition
             spinningWheel.style.transition = 'none';
             
-            // 2. 應用最終旋轉角度 (确保最终静止位置正確)
+            // 2. 應用最終旋轉角度 (确保最终靜止位置正確)
             spinningWheel.style.transform = `rotate(${currentRotation % 360}deg)`;
             
-            // 3. 顯示中獎者疊層 (NEW: Add flash animation)
+            // 3. 顯示中獎者疊層 
             overlayText.textContent = `${winner.id} - ${winner.name}`;
             winnerOverlay.classList.remove('opacity-0');
             winnerOverlay.classList.add('opacity-100', 'animate-flash');