Update index.html

index.html

@@ -28,7 +28,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 2rem;
+            padding: 1rem;
         }
         
         .container {
@@ -37,12 +37,12 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 2rem;
+            gap: 1.5rem;
         }
         
         header {
             text-align: center;
-            margin-bottom: 1rem;
+            margin-bottom: 0.5rem;
         }
         
         h1 {
@@ -58,40 +58,75 @@
             font-weight: 300;
         }
         
+        /* Layout for desktop */
+        .main-content {
+            display: flex;
+            width: 100%;
+            flex-direction: row;
+            gap: 2rem;
+            align-items: flex-start;
+        }
+        
         .setup-panel {
             background-color: white;
-            padding: 2rem;
+            padding: 1.5rem;
             border-radius: 1rem;
             box-shadow: 0 10px 30px var(--shadow-color);
             width: 100%;
-            max-width: 500px;
+            max-width: 400px;
             transition: all 0.3s ease;
+            flex-shrink: 0;
         }
         
-        .setup-panel.minimized {
+        .setup-panel.collapsed {
             padding: 1rem;
-            max-width: 300px;
-            cursor: pointer;
+            max-width: 400px;
         }
         
-        .setup-panel.minimized .form-group {
+        .setup-panel.collapsed .form-content {
             display: none;
         }
         
-        .setup-panel.minimized .panel-title:after {
-            content: " (点击展开)";
-            font-size: 0.8rem;
-            color: var(--accent-color);
+        .setup-panel.collapsed .panel-title {
+            margin-bottom: 0;
         }
         
-        .panel-title {
-            text-align: center;
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             margin-bottom: 1.5rem;
+            cursor: pointer;
+        }
+        
+        .panel-title {
             color: var(--primary-color);
+            margin: 0;
         }
         
-        .form-group {
+        .toggle-panel {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--accent-color);
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        
+        .setup-panel.collapsed .toggle-panel {
+            transform: rotate(180deg);
+        }
+        
+        .form-row {
+            display: flex;
+            gap: 1rem;
             margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+        }
+        
+        .form-group {
+            flex: 1;
+            min-width: 150px;
         }
         
         label {
@@ -135,30 +170,19 @@
             box-shadow: 0 6px 15px var(--shadow-color);
         }
         
-        .btn-secondary {
-            background-color: var(--light-color);
-            color: var(--primary-color);
-            border: 2px solid var(--primary-color);
-        }
-        
-        .btn-secondary:hover {
-            background-color: var(--primary-color);
-            color: white;
-        }
-        
         .actions {
             display: flex;
             justify-content: center;
             gap: 1rem;
+            flex-wrap: wrap;
         }
         
         .wheel-container {
             position: relative;
             width: 100%;
-            max-width: 600px;
+            max-width: 500px;
             aspect-ratio: 1;
-            margin: 2rem 0;
-            display: none;
+            margin: 0 auto;
         }
         
         .wheel {
@@ -258,15 +282,22 @@
         
         .result-display {
             background-color: white;
-            padding: 2rem;
+            padding: 1.5rem;  /* 减小内边距 */
             border-radius: 1rem;
             box-shadow: 0 10px 30px var(--shadow-color);
             text-align: center;
-            max-width: 500px;
             width: 100%;
+            height: 100%;
             display: none;
-            position: relative;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
             overflow: hidden;
+            display: flex;  /* 使用flex布局 */
+            flex-direction: column;
+            justify-content: center;  /* 垂直居中 */
+            align-items: center;  /* 水平居中 */
         }
         
         .result-display h2 {
@@ -275,17 +306,18 @@
         }
         
         .result-number {
-            font-size: 5rem;
+            font-size: min(15vw, 8rem);  /* 自适应字体大小 */
             font-weight: bold;
             color: var(--accent-color);
-            margin: 1rem 0;
+            margin: 0.5rem 0;  /* 减小上下边距 */
             position: relative;
             transition: all 0.3s;
+            line-height: 1;  /* 设置行高为1，减少垂直空间 */
         }
         
         .result-text {
-            font-size: 1.2rem;
-            margin-bottom: 1.5rem;
+            font-size: max(1rem, min(3vw, 1.4rem));  /* 自适应字体大小 */
+            margin-bottom: 1.2rem;
         }
         
         .shine {
@@ -339,24 +371,6 @@
             box-shadow: 0 0 50px var(--accent-color), 0 0 100px rgba(255, 214, 102, 0.8);
         }
         
-        @media (max-width: 768px) {
-            h1 {
-                font-size: 2rem;
-            }
-            
-            .container {
-                gap: 1rem;
-            }
-            
-            .setup-panel, .result-display {
-                padding: 1.5rem;
-            }
-            
-            .result-number {
-                font-size: 3.5rem;
-            }
-        }
-        
         .mode-description {
             display: none;
             margin-top: 0.5rem;
@@ -395,12 +409,6 @@
             100% { transform: scale(1); }
         }
         
-        @keyframes spotlight {
-            0% { box-shadow: 0 0 10px var(--shadow-color); }
-            50% { box-shadow: 0 0 60px var(--accent-color), 0 0 120px rgba(129, 199, 132, 0.8); }
-            100% { box-shadow: 0 0 10px var(--shadow-color); }
-        }
-        
         @keyframes heartbeat {
             0% { transform: scale(1); }
             15% { transform: scale(1.15); }
@@ -410,23 +418,16 @@
             100% { transform: scale(1); }
         }
         
-        /* Spotlight effect */
-        .spotlight-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            pointer-events: none;
-            z-index: 5;
-            background: radial-gradient(
-                circle at center,
-                rgba(255, 255, 255, 0) 30%,
-                rgba(0, 0, 0, 0.7) 100%
-            );
-            opacity: 0;
-            transition: opacity 0.5s;
+        /* Fall animation for confetti */
+        @keyframes fall {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(400px) rotate(360deg);
+                opacity: 0;
+            }
         }
         
         .help-bubble {
@@ -483,6 +484,51 @@
             cursor: pointer;
             color: var(--accent-color);
         }
+        
+        /* Media queries for responsive design */
+        @media (max-width: 992px) {
+            .main-content {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .setup-panel {
+                max-width: 100%;
+                order: 1;
+            }
+            
+            .wheel-container {
+                order: 0;
+                margin-bottom: 1.5rem;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            
+            .container {
+                gap: 1rem;
+            }
+            
+            .setup-panel, .result-display {
+                padding: 1.5rem;
+            }
+            
+            .result-number {
+                font-size: 3.5rem;
+            }
+            
+            .form-row {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            
+            .form-group {
+                min-width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
@@ -492,82 +538,81 @@
             <p class="subtitle">掌控命运，抉择未来！</p>
         </header>
         
-        <div class="setup-panel">
-            <h2 class="panel-title">设置</h2>
-            <div class="form-group">
-                <label for="class-size">班级人数:</label>
-                <input type="number" id="class-size" min="1" max="100" value="30">
-            </div>
-            
-            <div class="form-group">
-                <label for="start-number">起始编号 (默认从1开始):</label>
-                <input type="number" id="start-number" min="0" value="1">
-            </div>
-            
-            <div class="form-group">
-                <label for="animation-speed">动画速度:</label>
-                <select id="animation-speed">
-                    <option value="slow">慢速 (更多悬念)</option>
-                    <option value="normal" selected>正常</option>
-                    <option value="fast">快速</option>
-                    <option value="insane">超快 (刺激模式)</option>
-                </select>
-            </div>
-            
-            <div class="form-group">
-                <label for="sound-effects">音效:</label>
-                <select id="sound-effects">
-                    <option value="off">关闭</option>
-                    <option value="basic" selected>基础音效</option>
-                    <option value="dramatic">戏剧性音效</option>
-                    <option value="suspense">悬疑���效</option>
-                </select>
-            </div>
-            
-            <div class="form-group">
-                <label for="picker-mode">选择模式:</label>
-                <select id="picker-mode">
-                    <option value="normal">正常模式</option>
-                    <option value="fake-out">假动作模式</option>
-                    <option value="oscillate">摇摆不定模式</option>
-                    <option value="mystery">神秘模式</option>
-                    <option value="double">双重选择模式</option>
-                    <option value="countdown">倒计时模式</option>
-                    <option value="elimination">淘汰赛模式</option>
-                    <option value="spotlight">聚光灯模式</option>
-                    <option value="heartbeat">心跳紧张模式</option>
-                </select>
-                <div id="mode-normal" class="mode-description">普通的转盘选择，公平公正。</div>
-                <div id="mode-fake-out" class="mode-description">即将停止时，转盘会突然改变方向！</div>
-                <div id="mode-oscillate" class="mode-description">在两个结果之间反复摇摆，到底会是谁呢？</div>
-                <div id="mode-mystery" class="mode-description">结果会短暂显示然后突然变化，充满惊喜！</div>
-                <div id="mode-double" class="mode-description">同时选出两个幸运儿！</div>
-                <div id="mode-countdown" class="mode-description">紧张的倒计时音效，增加悬念感！</div>
-                <div id="mode-elimination" class="mode-description">一轮轮淘汰，最后只留下一个幸运儿！</div>
-                <div id="mode-spotlight" class="mode-description">灯光聚焦效果，犹如舞台中央的明星！</div>
-                <div id="mode-heartbeat" class="mode-description">伴随心跳声，感受命运的紧张抉择！</div>
+        <div class="main-content">
+            <div class="setup-panel">
+                <div class="panel-header">
+                    <h2 class="panel-title">设置</h2>
+                    <button class="toggle-panel">▲</button>
+                </div>
+                
+                <div class="form-content">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="class-size">班级人数:</label>
+                            <input type="number" id="class-size" min="1" max="100" value="30">
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="start-number">起始编号:</label>
+                            <input type="number" id="start-number" min="0" value="1">
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="animation-speed">动画速度:</label>
+                            <select id="animation-speed">
+                                <option value="slow">慢速 (更多悬念)</option>
+                                <option value="normal" selected>正常</option>
+                                <option value="fast">快速</option>
+                                <option value="insane">超快 (刺激模式)</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="picker-mode">选择模式:</label>
+                            <select id="picker-mode">
+                                <option value="normal">正常模式</option>
+                                <option value="fake-out">假动作模式</option>
+                                <option value="oscillate">摇摆不定模式</option>
+                                <option value="mystery">神秘模式</option>
+                                <option value="double">双重选择模式</option>
+                                <option value="countdown">倒计时模式</option>
+                                <option value="heartbeat">心跳紧张模式</option>
+                            </select>
+                            <div id="mode-normal" class="mode-description">普通的转盘选择，公平公正。</div>
+                            <div id="mode-fake-out" class="mode-description">即将停止时，转盘会突然改变方向！</div>
+                            <div id="mode-oscillate" class="mode-description">在两个结果之间反复摇摆，到底会是谁呢？</div>
+                            <div id="mode-mystery" class="mode-description">结果会短暂显示然后突然变化，充满惊喜！</div>
+                            <div id="mode-double" class="mode-description">同时选出两个幸运儿！</div>
+                            <div id="mode-countdown" class="mode-description">紧张的倒计时，增加悬念感！</div>
+                            <div id="mode-heartbeat" class="mode-description">伴随心跳，感受命运的紧张抉择！</div>
+                        </div>
+                    </div>
+                    
+                    <div class="actions">
+                        <button id="reset-btn" class="btn">保存修改/重新开始</button>
+                    </div>
+                </div>
             </div>
             
-            <div class="actions">
-                <button id="start-btn" class="btn">开始点名</button>
-                <button id="reset-btn" class="btn btn-secondary">重置</button>
-            </div>
-        </div>
-        
-        <div class="wheel-container">
-            <div class="wheel-pointer"></div>
-            <div class="wheel">
-                <div class="wheel-inner" id="wheel-inner"></div>
+            <div class="wheel-container">
+                <div class="wheel-pointer"></div>
+                <div class="wheel">
+                    <div class="wheel-inner" id="wheel-inner"></div>
+                </div>
+                <div class="wheel-center" id="spin-btn">转!</div>
+                
+                <div class="result-display">
+                    <div class="shine"></div>
+                    <h2>点名结果</h2>
+                    <div class="result-number" id="result-number">?</div>
+                    <p class="result-text" id="result-text">请点击转盘开始</p>
+                    <button id="spin-again-btn" class="btn">再来一次</button>
+                </div>
             </div>
-            <div class="wheel-center" id="spin-btn">转!</div>
-        </div>
-        
-        <div class="result-display">
-            <div class="shine"></div>
-            <h2>点名结果</h2>
-            <div class="result-number" id="result-number">?</div>
-            <p class="result-text" id="result-text">请点击转盘开始</p>
-            <button id="spin-again-btn" class="btn">再来一次</button>
         </div>
     </div>
     
@@ -580,22 +625,19 @@
         <p><strong>摇摆不定模式:</strong> 在两个选项之间来回摇摆，增加悬念感。</p>
         <p><strong>神秘模式:</strong> 先显示一个结果，然后突然改变！谁也猜不到最终会是谁。</p>
         <p><strong>双重选择模式:</strong> 同时选出两名同学，适合小组活动。</p>
-        <p><strong>倒计时模式:</strong> 伴随紧张的倒计时音效和动画，增加刺激感。</p>
-        <p><strong>淘汰赛模式:</strong> 连续多轮抽取，逐步淘汰，最终决出命运之选。</p>
-        <p><strong>聚光灯模式:</strong> 模拟真实大型抽奖活动，灯光聚焦效果。</p>
-        <p><strong>心跳紧张模式:</strong> 伴随心跳声音效，让结果更加扣人心弦。</p>
-        <p><strong>提示:</strong> 尝试不同的音效和动画速度组合，获得最佳体验！</p>
+        <p><strong>倒计时模式:</strong> 伴随紧张的倒计时动画，增加刺激感。</p>
+        <p><strong>心跳紧张模式:</strong> 伴随心跳动画，让结果更加扣人心弦。</p>
+        <p><strong>提示:</strong> 尝试不同的动画速度，获得最佳体验！</p>
     </div>
     
     <script>
         // DOM Elements
         const setupPanel = document.querySelector('.setup-panel');
+        const togglePanelBtn = document.querySelector('.toggle-panel');
         const classSizeInput = document.getElementById('class-size');
         const startNumberInput = document.getElementById('start-number');
         const pickerModeSelect = document.getElementById('picker-mode');
         const animationSpeedSelect = document.getElementById('animation-speed');
-        const soundEffectsSelect = document.getElementById('sound-effects');
-        const startBtn = document.getElementById('start-btn');
         const resetBtn = document.getElementById('reset-btn');
         const wheelContainer = document.querySelector('.wheel-container');
         const wheelInner = document.getElementById('wheel-inner');
@@ -616,64 +658,33 @@
             mystery: document.getElementById('mode-mystery'),
             double: document.getElementById('mode-double'),
             countdown: document.getElementById('mode-countdown'),
-            elimination: document.getElementById('mode-elimination'),
-            spotlight: document.getElementById('mode-spotlight'),
             heartbeat: document.getElementById('mode-heartbeat')
         };
         
+        // Colors for the wheel segments (soft green palette)
+        const colors = [
+            '#4CAF50', '#66BB6A', '#81C784', '#A5D6A7',
+            '#C8E6C9', '#7CB342', '#8BC34A', '#9CCC65',
+            '#AED581', '#C5E1A5', '#DCEDC8', '#43A047',
+            '#388E3C', '#2E7D32', '#689F38', '#558B2F'
+        ];
+        
         // Variables
         let classSize = 30;
         let startNumber = 1;
         let mode = 'normal';
         let animationSpeed = 'normal';
-        let soundEffects = 'basic';
         let isSpinning = false;
         let segments = [];
         let selectedSegment = null;
         let secondSelectedSegment = null;
-        let eliminationCandidates = [];
-        let eliminationRound = 0;
-        
-        // Sound effects
-        const sounds = {
-            spin: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMDA4ODg4ODg4ODg4ODg4ODg4ODg4P////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAXAAAAAAAAAAbC3hL2QAAAAAAD/+9DEAAAJtPl39BEAJgpN7j84wAGMKUpWlP19W1v1f3a1apSktaUkxpJgYGAYGDEYO5eHyXh9wfP+H4fwfD6AZ8Pw+gGfnygY+MDDDDDDDDDDDDDDDD4fg+gGfh8/8Pn/+H0Az5+UMfP/+oBooyZVLj6iYqhplXOKiomz1kVdVUksYnF3KszMrUxBTUUzLjEwMKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq'),
-            result: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAXnAyMjIyMjIyMjIyMjIyMjIyMjI5OTk5OTk5OTk5OTk5OTk5OTk5P39/f39/f39/f39/f39/f39/f///////////////////////////////////////////////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAaUAAAAAAAAeblBaHYAAAAAAP/7sMQAAAfA53P5hgAKGUruPzjAASEQQQNhjHHdPnPz797ve0vbdM7vPPPGBBBQoUhISEhIAAAIQhAVOP4WOeeOJwIBANDuK+Xn8fH06Ic7etFbiMVhYAgIBgYGBwfB8Hw+H0A0NDQ0NDQ0Af/////////+qqqqoAAAAAVVVVQAAAxiMQ5nJTnOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5zmIxEZ//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////MTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'),
-            countdown: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAABAAAAeAAMDAwMDAwMDAwMDAwVVVVVVVVVVVVVVVVVaqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXw8PDw8PDw8PDw8PDw8P////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAZgAAAAAAAAei6yB8AAAAAAA//7kMQAAAs0x2/4YYABRCOqOzDACpdGMYxtBpqqtSv1KUyRRZVlzKdBkCgIBAIJiQUGijgQDBSMFwAGAAYAGPR++D4PnAEHwfJAUeBAQEBEREQIQhCNDHw+fB8HwfJAR8Pn5IIEBAQEBAQEBAT5ICAj4fTHw+f///+SCAgI+DgICPjggICbICAgICAn////5IICBMkBAT/+SCAgICAgJ////kggICAgQEyQEBAQECYICAgI+Hz////5IICAn////+SCAgIDRMNDQ0NDQ0TDQ0NDQ0NDa0mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpMQU1FMy4xMDBV'),
-            heartbeat: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMDA4ODg4ODg4ODg4ODg4ODg4ODg4P////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAXAAAAAAAAAAbC3hL2QAAAAAAD/+xDEAAAHRId9+GGAARIrKn8wwAGqqqpN9aqqkqqpN9VNIiNu7Zmg2JMICJVAwEAgELhcGAYBgMGQwZfL+XyQEBAQEeD5/y/kgICPB8/5ICAgI8Hc/kgICAj4fP8kBAQEwQEB4PggICPB3/P+SAgICPh8/8kBAQEBASD4PggICPB3P5ICAgI+D4ICAj4fD5IIPggICPB8/8kBAQEBAQEfB9/kgICAkH/JBB8Hz/kgg+CAkH/P/JBB8EHwQf/JAQEggICPg+/yQQEBMEBAR8Hz/kggICYIPgg+CD4IP+SCAgI+D5/yQEBAT/B8Hc/6oAAAAAAAAA'),
-            dramatic: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAzMzMzMzMzMzMzMzMzMzMzMzM/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/P///////////////////////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAZgAAAAAAAAAbD6L30gAAAAAAD/+7DEAAAKYOFy+cmAASikabj8qAA2lVVmtOmdzHHtK7mONOmcyczMqgoWFJwcLCwpIhYWFk4OFixQsLD/wULCwJFFCwsOaSIWFA4WFhQFFFFjGMWFhQWFhQWFhQUDGMb/BQWHNkUUUUdJowULDssUUWMWKKOkgcLDuyKKOklFqEVwsO72MWKKOkldJI/iqPaRX+yP/oRVH/ysKDu9lYf/ZVHaFUe0iv9JIO72VR7SKo8dJI6Qij2hlQdhFUeOkkdIRVHtDKg7SK//2MWKPYGKPaGVR/9lYUFh/aFC/8Ozs7O/8rOzv/DKg7uw7OzsOzo7Ozs6Ozs7Ozr///zs7Ozs6Os6Ozs7Olh2dDKo7Ozs6Ozs6OsOzs6Ozs7Ozs6Ozs6OsOzo7Ojr///w7Ojs7Ow6Ojr/w7Ozs7OsOw7Ozs6Ow7Ozs6Ow7Ozs6Ozs7DsOzs7OjsOzs7Ojr//8Ozs7Ols7OztbOzs6Ozs7O1s7OztbOzs6Ozs7O1s7OztbOzs6O1s7OztbOzs7WztbOztbOzs7O1s7OztbOzs7O1s7OzpbOzs7WztbOzs7Wzs7O1s7OztbOzs7O1s7OztbOzs7O1s7OzpbOzs7WztbOztbOzs7O1s7OzpbOzs7WztbOzs7Wzs7O1s7OztbOzs7O1s7O1s7OztbOzs7O1s7OztbOzs7WzqzWztbOztbOzs6WzpbOzs6szs6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s7OzpbOzs7WztbOzs6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsq')
-        };
-        
-        // Play a sound from the sound library
-        function playSound(soundName) {
-            // Only play if sound effects are enabled
-            if (soundEffects === 'off') return;
-            
-            // Stop any currently playing sounds
-            sounds.spin.pause();
-            sounds.spin.currentTime = 0;
-            sounds.result.pause();
-            sounds.result.currentTime = 0;
-            sounds.countdown.pause();
-            sounds.countdown.currentTime = 0;
-            sounds.heartbeat.pause();
-            sounds.heartbeat.currentTime = 0;
-            sounds.dramatic.pause();
-            sounds.dramatic.currentTime = 0;
-            
-            // Play the requested sound
-            if (sounds[soundName]) {
-                sounds[soundName].play().catch(e => {
-                    console.log("Sound could not be played: " + e);
-                });
-            }
-        }
         
         function updateModeDescription() {
             const selectedMode = pickerModeSelect.value;
             
             // Hide all descriptions
             Object.values(modeDescriptions).forEach(desc => {
-                desc.style.display = 'none';
+                if (desc) desc.style.display = 'none';
             });
             
             // Show selected description
@@ -683,56 +694,11 @@
             }
         }
         
-        function setupWheel() {
-            classSize = parseInt(classSizeInput.value) || 30;
-            startNumber = parseInt(startNumberInput.value) || 1;
-            mode = pickerModeSelect.value;
-            animationSpeed = animationSpeedSelect.value;
-            soundEffects = soundEffectsSelect.value;
-            
-            if (classSize < 1) {
-                alert('班级人数必须大于0');
-                return;
-            }
-            
-            // For elimination mode, prepare the candidates
-            if (mode === 'elimination') {
-                eliminationCandidates = [];
-                for (let i = 0; i < classSize; i++) {
-                    eliminationCandidates.push(startNumber + i);
-                }
-                eliminationRound = 0;
-            }
-            
-            // Create wheel segments
-            createWheel();
-            
-            // Show wheel, hide setup
-            setupPanel.classList.add('minimized');
-            wheelContainer.style.display = 'block';
-            resultDisplay.style.display = 'none';
-            
-            // Make setup panel expandable when minimized
-            setupPanel.addEventListener('click', function() {
-                if (this.classList.contains('minimized')) {
-                    this.classList.remove('minimized');
-                }
-            });
-        }
-        
         function createWheel() {
             // Clear previous wheel
             wheelInner.innerHTML = '';
             segments = [];
             
-            // Colors for the wheel segments (soft green palette)
-            const colors = [
-                '#4CAF50', '#66BB6A', '#81C784', '#A5D6A7',
-                '#C8E6C9', '#7CB342', '#8BC34A', '#9CCC65',
-                '#AED581', '#C5E1A5', '#DCEDC8', '#43A047',
-                '#388E3C', '#2E7D32', '#689F38', '#558B2F'
-            ];
-            
             // Create segments
             const segmentAngle = 360 / classSize;
             
@@ -763,6 +729,24 @@
             }
         }
         
+        function setupWheel() {
+            classSize = parseInt(classSizeInput.value) || 30;
+            startNumber = parseInt(startNumberInput.value) || 1;
+            mode = pickerModeSelect.value;
+            animationSpeed = animationSpeedSelect.value;
+            
+            if (classSize < 1) {
+                alert('班级人数必须大于0');
+                return;
+            }
+            
+            // Create wheel segments
+            createWheel();
+            
+            // Show wheel, hide result display if it's shown
+            resultDisplay.style.display = 'none';
+        }
+        
         function spin() {
             if (isSpinning) return;
             
@@ -814,25 +798,6 @@
                 secondSelectedSegment = segments[secondIndex];
             }
             
-            // Play sound effects if enabled
-            if (soundEffects !== 'off') {
-                playSound('spin');
-                
-                if (mode === 'countdown') {
-                    // Start countdown sound after a delay
-                    setTimeout(() => {
-                        playSound('countdown');
-                    }, spinDuration - 3000); // Start 3 seconds before end
-                }
-                
-                if (mode === 'heartbeat') {
-                    // Start heartbeat sound after a delay
-                    setTimeout(() => {
-                        playSound('heartbeat');
-                    }, spinDuration - 3000); // Start 3 seconds before end
-                }
-            }
-            
             // Process result after spinning animation
             setTimeout(() => {
                 processResult();
@@ -846,16 +811,6 @@
             let finalResult = selectedSegment.value;
             let secondResult = secondSelectedSegment ? secondSelectedSegment.value : null;
             
-            // Play result sound if enabled
-            if (soundEffects !== 'off') {
-                // Different sounds for different modes
-                if (mode === 'dramatic' && soundEffects === 'dramatic') {
-                    playSound('dramatic');
-                } else {
-                    playSound('result');
-                }
-            }
-            
             switch (mode) {
                 case 'fake-out':
                     playFakeOutEffect(finalResult);
@@ -877,14 +832,6 @@
                     playCountdownEffect(finalResult);
                     break;
                 
-                case 'elimination':
-                    playEliminationEffect(finalResult);
-                    break;
-                
-                case 'spotlight':
-                    playSpotlightEffect(finalResult);
-                    break;
-                
                 case 'heartbeat':
                     playHeartbeatEffect(finalResult);
                     break;
@@ -896,40 +843,51 @@
         }
         
         function showResult(result) {
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';  // 使用flex布局显示
             
             resultNumber.textContent = result;
             resultText.textContent = `恭喜 ${result} 号同学被选中！`;
             
-            // Add shine effect
+            // 根据结果数字的长度动态调整字体大小
+            if (result.toString().length > 2) {
+                resultNumber.style.fontSize = `min(12vw, 6rem)`;
+            } else {
+                resultNumber.style.fontSize = `min(15vw, 8rem)`;
+            }
+            
+            // 添加闪光效果
             const shine = document.querySelector('.shine');
             shine.style.opacity = '1';
             shine.style.animation = 'shine 2s 1';
             
-            // Reset animation after it completes
+            // 重置动画
             setTimeout(() => {
                 shine.style.opacity = '0';
                 shine.style.animation = 'none';
             }, 2000);
             
-            // Add confetti effect
+            // 添加纸屑效果
             createConfetti();
         }
-        
         function showDoubleResult(result1, result2) {
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';  // Use flex layout
             
             resultNumber.textContent = `${result1} & ${result2}`;
             resultText.textContent = `恭喜 ${result1} 号和 ${result2} 号同学被选中！`;
             
+            // Adjust font size based on content length
+            if (result1.toString().length + result2.toString().length > 4) {
+                resultNumber.style.fontSize = `min(10vw, 5rem)`;
+            } else {
+                resultNumber.style.fontSize = `min(12vw, 6rem)`;
+            }
+            
             // Add shine effect
             const shine = document.querySelector('.shine');
             shine.style.opacity = '1';
             shine.style.animation = 'shine 2s 1';
             
-            // Reset animation after it completes
+            // Reset animations
             setTimeout(() => {
                 shine.style.opacity = '0';
                 shine.style.animation = 'none';
@@ -938,29 +896,42 @@
             // Add confetti effect
             createConfetti();
         }
-        
         function playFakeOutEffect(finalResult) {
             // First show a fake result
             const fakeResult = ((finalResult - startNumber + Math.floor(classSize / 2)) % classSize) + startNumber;
             
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';
             
             resultNumber.textContent = fakeResult;
             resultText.textContent = `恭喜 ${fakeResult} 号同学被选中！`;
             
+            // Adjust font size based on number length
+            if (fakeResult.toString().length > 2) {
+                resultNumber.style.fontSize = `min(12vw, 6rem)`;
+            } else {
+                resultNumber.style.fontSize = `min(15vw, 8rem)`;
+            }
+            
             // After a short delay, apply shake effect and change to actual result
             setTimeout(() => {
-                resultNumber.classList.add('shake');
+                resultNumber.style.animation = 'shake 0.5s';
                 resultText.textContent = "等等，发生了什么...";
                 
                 // After shake effect, reveal true result
                 setTimeout(() => {
-                    resultNumber.classList.remove('shake');
-                    resultNumber.classList.add('jump');
+                    resultNumber.style.animation = 'none';
+                    resultNumber.offsetHeight; // Trigger reflow to restart animation
+                    resultNumber.style.animation = 'jump 0.5s';
                     resultNumber.textContent = finalResult;
                     resultText.textContent = `真正被选中的是 ${finalResult} 号同学！`;
                     
+                    // Adjust font size for final result
+                    if (finalResult.toString().length > 2) {
+                        resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                    } else {
+                        resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                    }
+                    
                     // Add shine effect
                     const shine = document.querySelector('.shine');
                     shine.style.opacity = '1';
@@ -968,7 +939,7 @@
                     
                     // Reset animations
                     setTimeout(() => {
-                        resultNumber.classList.remove('jump');
+                        resultNumber.style.animation = 'none';
                         shine.style.opacity = '0';
                         shine.style.animation = 'none';
                     }, 2000);
@@ -978,25 +949,34 @@
                 }, 1000);
             }, 1500);
         }
-        
         function playOscillateEffect(finalResult) {
             // Create alternative result
             const altResult = ((finalResult - startNumber + Math.floor(classSize / 2)) % classSize) + startNumber;
             
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';
+            
+            // Initial font size setting
+            resultNumber.style.fontSize = `min(15vw, 8rem)`;
             
             let count = 0;
             const maxOscillations = 6;
             const oscillationInterval = setInterval(() => {
                 count++;
-                resultNumber.textContent = count % 2 === 0 ? finalResult : altResult;
+                const currentResult = count % 2 === 0 ? finalResult : altResult;
+                resultNumber.textContent = currentResult;
                 resultText.textContent = "究竟会是谁呢...";
                 
+                // Adjust font size based on displayed number
+                if (currentResult.toString().length > 2) {
+                    resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                } else {
+                    resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                }
+                
                 if (count >= maxOscillations) {
                     clearInterval(oscillationInterval);
                     // Final result with visual effect
-                    resultNumber.classList.add('jump');
+                    resultNumber.style.animation = 'jump 0.5s';
                     resultNumber.textContent = finalResult;
                     resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
                     
@@ -1007,7 +987,7 @@
                     
                     // Reset animations
                     setTimeout(() => {
-                        resultNumber.classList.remove('jump');
+                        resultNumber.style.animation = 'none';
                         shine.style.opacity = '0';
                         shine.style.animation = 'none';
                     }, 2000);
@@ -1017,20 +997,19 @@
                 }
             }, 300);
         }
-        
         function playMysteryEffect(finalResult) {
             // Generate a series of random results ending with the actual one
             const mysterySteps = 3;
             const stepDelay = 600;
             
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';
             
             let step = 0;
             resultText.textContent = "神秘数字即将揭晓...";
             
             // Add flicker effect to create suspense
-            resultNumber.classList.add('flicker');
+            resultNumber.style.animation = 'flicker 0.5s infinite';
+            resultNumber.style.fontSize = `min(15vw, 8rem)`;
             
             const mysteryInterval = setInterval(() => {
                 step++;
@@ -1039,14 +1018,29 @@
                     // Show random number
                     const randomNumber = Math.floor(Math.random() * classSize) + startNumber;
                     resultNumber.textContent = randomNumber;
+                    
+                    // Adjust font size based on random number
+                    if (randomNumber.toString().length > 2) {
+                        resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                    } else {
+                        resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                    }
                 } else {
                     // Last step - show real result
                     clearInterval(mysteryInterval);
-                    resultNumber.classList.remove('flicker');
-                    resultNumber.classList.add('jump');
+                    resultNumber.style.animation = 'none';
+                    resultNumber.offsetHeight; // Trigger reflow to restart animation
+                    resultNumber.style.animation = 'jump 0.5s';
                     resultNumber.textContent = finalResult;
                     resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
                     
+                    // Adjust font size for final result
+                    if (finalResult.toString().length > 2) {
+                        resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                    } else {
+                        resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                    }
+                    
                     // Add shine effect
                     const shine = document.querySelector('.shine');
                     shine.style.opacity = '1';
@@ -1054,7 +1048,7 @@
                     
                     // Reset animations
                     setTimeout(() => {
-                        resultNumber.classList.remove('jump');
+                        resultNumber.style.animation = 'none';
                         shine.style.opacity = '0';
                         shine.style.animation = 'none';
                     }, 2000);
@@ -1064,32 +1058,38 @@
                 }
             }, stepDelay);
         }
-        
         function playCountdownEffect(finalResult) {
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';
             
             resultNumber.textContent = "3";
+            resultNumber.style.fontSize = `min(15vw, 8rem)`;
             resultText.textContent = "倒计时开始...";
             
             // Countdown animation
             setTimeout(() => {
+                resultNumber.style.animation = 'jump 0.5s';
                 resultNumber.textContent = "2";
-                resultNumber.classList.add('jump');
-                setTimeout(() => resultNumber.classList.remove('jump'), 300);
+                setTimeout(() => { resultNumber.style.animation = 'none'; }, 500);
             }, 1000);
             
             setTimeout(() => {
+                resultNumber.style.animation = 'jump 0.5s';
                 resultNumber.textContent = "1";
-                resultNumber.classList.add('jump');
-                setTimeout(() => resultNumber.classList.remove('jump'), 300);
+                setTimeout(() => { resultNumber.style.animation = 'none'; }, 500);
             }, 2000);
             
             setTimeout(() => {
-                resultNumber.classList.add('jump');
+                resultNumber.style.animation = 'jump 0.5s';
                 resultNumber.textContent = finalResult;
                 resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
                 
+                // Adjust font size for final result
+                if (finalResult.toString().length > 2) {
+                    resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                } else {
+                    resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                }
+                
                 // Add shine effect
                 const shine = document.querySelector('.shine');
                 shine.style.opacity = '1';
@@ -1097,7 +1097,7 @@
                 
                 // Reset animations
                 setTimeout(() => {
-                    resultNumber.classList.remove('jump');
+                    resultNumber.style.animation = 'none';
                     shine.style.opacity = '0';
                     shine.style.animation = 'none';
                 }, 2000);
@@ -1106,185 +1106,11 @@
                 createConfetti();
             }, 3000);
         }
-        
-        function playEliminationEffect(finalResult) {
-            eliminationRound++;
-            
-            // If this is the first round, start with all candidates
-            if (eliminationRound === 1) {
-                wheelContainer.style.display = 'none';
-                resultDisplay.style.display = 'block';
-                
-                // Show how many candidates remain
-                if (eliminationCandidates.length > 1) {
-                    resultNumber.textContent = eliminationCandidates.length;
-                    resultText.textContent = `第${eliminationRound}轮: 还剩${eliminationCandidates.length}名候选者`;
-                    
-                    // Remove the selected candidate
-                    const index = eliminationCandidates.indexOf(finalResult);
-                    if (index > -1) {
-                        eliminationCandidates.splice(index, 1);
-                    }
-                    
-                    // Provide option to continue elimination or select winner
-                    spinAgainBtn.textContent = "继续淘汰";
-                    const selectWinnerBtn = document.createElement('button');
-                    selectWinnerBtn.textContent = "选出获胜者";
-                    selectWinnerBtn.className = "btn btn-secondary";
-                    selectWinnerBtn.style.marginLeft = "10px";
-                    
-                    // Add button to DOM if not already there
-                    if (!document.getElementById('select-winner-btn')) {
-                        selectWinnerBtn.id = 'select-winner-btn';
-                        spinAgainBtn.parentNode.appendChild(selectWinnerBtn);
-                        
-                        // Add event listener
-                        selectWinnerBtn.addEventListener('click', function() {
-                            // Choose random winner from remaining candidates
-                            const winnerIndex = Math.floor(Math.random() * eliminationCandidates.length);
-                            const winner = eliminationCandidates[winnerIndex];
-                            
-                            // Display winner
-                            resultNumber.textContent = winner;
-                            resultText.textContent = `最终获胜者是 ${winner} 号同学！`;
-                            
-                            // Remove this button
-                            this.remove();
-                            spinAgainBtn.textContent = "再来一次";
-                            
-                            // Add confetti
-                            createConfetti();
-                            
-                            // Reset elimination mode
-                            eliminationRound = 0;
-                            eliminationCandidates = [];
-                        });
-                    }
-                } else if (eliminationCandidates.length === 1) {
-                    // Only one candidate left - they're the winner
-                    resultNumber.textContent = eliminationCandidates[0];
-                    resultText.textContent = `最终获胜者是 ${eliminationCandidates[0]} 号同学！`;
-                    spinAgainBtn.textContent = "再来一次";
-                    
-                    // Remove select winner button if it exists
-                    const selectWinnerBtn = document.getElementById('select-winner-btn');
-                    if (selectWinnerBtn) {
-                        selectWinnerBtn.remove();
-                    }
-                    
-                    // Add confetti
-                    createConfetti();
-                    
-                    // Reset elimination mode
-                    eliminationRound = 0;
-                    eliminationCandidates = [];
-                }
-            } else {
-                // Subsequent rounds
-                // Remove the newly selected candidate
-                const index = eliminationCandidates.indexOf(finalResult);
-                if (index > -1) {
-                    eliminationCandidates.splice(index, 1);
-                }
-                
-                // Show how many candidates remain
-                resultNumber.textContent = eliminationCandidates.length;
-                
-                if (eliminationCandidates.length > 1) {
-                    resultText.textContent = `第${eliminationRound}轮: 还剩${eliminationCandidates.length}名候选者`;
-                } else if (eliminationCandidates.length === 1) {
-                    // Only one candidate left - they're the winner
-                    resultNumber.textContent = eliminationCandidates[0];
-                    resultText.textContent = `最终获胜者是 ${eliminationCandidates[0]} 号同学！`;
-                    spinAgainBtn.textContent = "再来一次";
-                    
-                    // Remove select winner button if it exists
-                    const selectWinnerBtn = document.getElementById('select-winner-btn');
-                    if (selectWinnerBtn) {
-                        selectWinnerBtn.remove();
-                    }
-                    
-                    // Add confetti
-                    createConfetti();
-                    
-                    // Reset elimination mode
-                    eliminationRound = 0;
-                    eliminationCandidates = [];
-                } else {
-                    // No candidates left (shouldn't happen normally)
-                    resultText.textContent = `所有候选者都已淘汰！`;
-                    spinAgainBtn.textContent = "再来一次";
-                    
-                    // Remove select winner button if it exists
-                    const selectWinnerBtn = document.getElementById('select-winner-btn');
-                    if (selectWinnerBtn) {
-                        selectWinnerBtn.remove();
-                    }
-                    
-                    // Reset elimination mode
-                    eliminationRound = 0;
-                    eliminationCandidates = [];
-                }
-            }
-        }
-        
-        function playSpotlightEffect(finalResult) {
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
-            
-            // Create spotlight container if it doesn't exist
-            let spotlightContainer = document.querySelector('.spotlight-container');
-            if (!spotlightContainer) {
-                spotlightContainer = document.createElement('div');
-                spotlightContainer.className = 'spotlight-container';
-                resultDisplay.appendChild(spotlightContainer);
-            }
-            
-            // Show the spotlight
-            spotlightContainer.style.opacity = '1';
-            
-            // First show blank result
-            resultNumber.textContent = "?";
-            resultText.textContent = "聚光灯将选择...";
-            
-            // Add drumroll effect with increasing intensity
-            let drumrollInterval;
-            let intensity = 0;
-            const maxIntensity = 10;
-            
-            drumrollInterval = setInterval(() => {
-                intensity++;
-                resultNumber.style.opacity = 0.5 + (intensity / maxIntensity * 0.5);
-                
-                if (intensity >= maxIntensity) {
-                    clearInterval(drumrollInterval);
-                    
-                    // Show the result with dramatic effect
-                    resultNumber.classList.add('jump');
-                    resultNumber.textContent = finalResult;
-                    resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
-                    
-                    // Apply spotlight pulse animation
-                    resultDisplay.style.animation = 'spotlight 2s';
-                    
-                    // Create confetti
-                    createConfetti();
-                    
-                    // Gradually fade out spotlight
-                    setTimeout(() => {
-                        spotlightContainer.style.opacity = '0';
-                        resultNumber.classList.remove('jump');
-                        resultDisplay.style.animation = 'none';
-                    }, 3000);
-                }
-            }, 300);
-        }
-        
         function playHeartbeatEffect(finalResult) {
-            wheelContainer.style.display = 'none';
-            resultDisplay.style.display = 'block';
+            resultDisplay.style.display = 'flex';
             
             resultNumber.textContent = "?";
+            resultNumber.style.fontSize = `min(15vw, 8rem)`;
             resultText.textContent = "命运正在抉择...";
             
             // Add heartbeat animation to result number
@@ -1293,10 +1119,18 @@
             // After a few heartbeats, reveal the result
             setTimeout(() => {
                 resultNumber.style.animation = 'none';
-                resultNumber.classList.add('jump');
+                resultNumber.offsetHeight; // Trigger reflow to restart animation
+                resultNumber.style.animation = 'jump 0.5s';
                 resultNumber.textContent = finalResult;
                 resultText.textContent = `命运选择了 ${finalResult} 号同学！`;
                 
+                // Adjust font size for final result
+                if (finalResult.toString().length > 2) {
+                    resultNumber.style.fontSize = `min(12vw, 6rem)`;
+                } else {
+                    resultNumber.style.fontSize = `min(15vw, 8rem)`;
+                }
+                
                 // Add shine effect
                 const shine = document.querySelector('.shine');
                 shine.style.opacity = '1';
@@ -1304,7 +1138,7 @@
                 
                 // Reset animations
                 setTimeout(() => {
-                    resultNumber.classList.remove('jump');
+                    resultNumber.style.animation = 'none';
                     shine.style.opacity = '0';
                     shine.style.animation = 'none';
                 }, 2000);
@@ -1313,8 +1147,14 @@
                 createConfetti();
             }, 4000);
         }
-        
         function createConfetti() {
+            // Clear any existing confetti
+            const existingEffects = document.querySelector('.special-effects');
+            if (existingEffects) {
+                existingEffects.remove();
+            }
+            
+            // Create container for confetti
             const specialEffects = document.createElement('div');
             specialEffects.className = 'special-effects';
             resultDisplay.appendChild(specialEffects);
@@ -1344,7 +1184,10 @@
                 confetti.style.width = size + 'px';
                 confetti.style.height = size + 'px';
                 confetti.style.backgroundColor = color;
+                confetti.style.opacity = '1';
+                confetti.style.position = 'absolute';
                 
+                // Set shape
                 if (shape === 'circle') {
                     confetti.style.borderRadius = '50%';
                 } else if (shape === 'triangle') {
@@ -1358,27 +1201,7 @@
                 const duration = Math.random() * 3 + 2;
                 const delay = Math.random() * 1.5;
                 
-                confetti.style.opacity = '1';
                 confetti.style.animation = `fall ${duration}s ease-in ${delay}s forwards`;
-                
-                // Add keyframe animation for falling confetti
-                if (!document.querySelector('#confetti-animation')) {
-                    const styleSheet = document.createElement('style');
-                    styleSheet.id = 'confetti-animation';
-                    styleSheet.textContent = `
-                        @keyframes fall {
-                            0% {
-                                transform: translateY(0) rotate(0deg);
-                                opacity: 1;
-                            }
-                            100% {
-                                transform: translateY(${resultDisplay.clientHeight}px) rotate(360deg);
-                                opacity: 0;
-                            }
-                        }
-                    `;
-                    document.head.appendChild(styleSheet);
-                }
             }
             
             // Remove confetti after animation
@@ -1391,8 +1214,7 @@
         
         function reset() {
             // Reset to setup panel
-            setupPanel.classList.remove('minimized');
-            wheelContainer.style.display = 'none';
+            setupPanel.classList.remove('collapsed');
             resultDisplay.style.display = 'none';
             
             // Reset wheel rotation
@@ -1402,17 +1224,26 @@
             isSpinning = false;
             selectedSegment = null;
             secondSelectedSegment = null;
+            
+            // Recreate wheel with current settings
+            setupWheel();
         }
         
         // Initialize the app
         function init() {
+            // Create the wheel for the first time
+            setupWheel();
+            
             // Setup event listeners
-            startBtn.addEventListener('click', setupWheel);
+            togglePanelBtn.addEventListener('click', () => {
+                setupPanel.classList.toggle('collapsed');
+                togglePanelBtn.textContent = setupPanel.classList.contains('collapsed') ? '▼' : '▲';
+            });
+            
             resetBtn.addEventListener('click', reset);
             spinBtn.addEventListener('click', spin);
             spinAgainBtn.addEventListener('click', () => {
                 resultDisplay.style.display = 'none';
-                wheelContainer.style.display = 'block';
             });
             
             pickerModeSelect.addEventListener('change', updateModeDescription);
@@ -1429,8 +1260,8 @@
             updateModeDescription();
         }
         
-        // Initialize the app
-        init();
+        // Initialize the app when the document is loaded
+        document.addEventListener('DOMContentLoaded', init);
     </script>
 </body>
 </html>