Update app.py

app.py

@@ -618,420 +618,454 @@ def generate_performance_html():
                 <div class="stat-percent">success</div>
             </div>
         </div>
-        
-        <!-- Recent Words -->
-        <div class="section-title">
-            <span class="section-icon">📋</span>
-            <h4 class="section-text">RECENT</h4>
-        </div>
-        
-        <div class="recent-words-container">
-    """
-    
-    if recent_words:
-        for word_data in recent_words:
-            status_class = "perfect" if word_data['status'] == 'perfect' else "hint"
-            status_icon = "✨" if word_data['status'] == 'perfect' else "💡"
-            
-            html += f"""
-            <div class="word-item {status_class}">
-                <div class="word-main">
-                    <span class="word-icon">{status_icon}</span>
-                    <span class="word-text">{word_data['word'][:15]}{'...' if len(word_data['word']) > 15 else ''}</span>
-                </div>
-                <div class="word-details">
-                    <span class="word-points">+{word_data['points']}</span>
-                </div>
-            </div>
-            """
-    else:
-        html += '<div class="empty-state">No words yet</div>'
-    
-    html += """
-        </div>
-        
-        <!-- Performance Analytics -->
-        <div class="section-title">
-            <span class="section-icon">📈</span>
-            <h4 class="section-text">ANALYTICS</h4>
-        </div>
-        
-        <div class="analytics-grid">
-            <div class="analytics-item">
-                <div class="analytics-label">Streak</div>
-                <div class="analytics-value streak-display">
-    """
-    
-    # Current streak
-    streak = tracker['analytics']['perfect_streak']
-    for i in range(min(5, streak)):
-        html += '<span class="streak-dot active"></span>'
-    if streak > 5:
-        html += f'<span class="streak-count">+{streak-5}</span>'
-    
-    html += f"""
-                </div>
-            </div>
-            <div class="analytics-item">
-                <div class="analytics-label">Hints</div>
-                <div class="analytics-value">{tracker['analytics']['total_hints']}</div>
-            </div>
-        </div>
     </div>
     """
     
     return html
 
 # -----------------------------
-# SIMPLE CSS - NO SCROLLING
+# SIMPLE CSS - NO SIDEBAR, NO SCROLLING
 # -----------------------------
 css = """
-/* Reset everything */
+/* Reset and basic styling */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-/* Force no scroll */
-html, body {
+body, html {
     height: 100%;
     width: 100%;
-    overflow: hidden !important;
-    position: fixed;
+    overflow: hidden;
 }
 
 /* Main container */
 .gradio-container {
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
     height: 100vh !important;
-    width: 100vw !important;
-    overflow: hidden !important;
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
+    overflow-y: auto !important;
     background: #f8fafc !important;
 }
 
-/* Simple two-column layout */
-.app-container {
-    display: flex !important;
-    height: 100vh !important;
-    width: 100vw !important;
-    overflow: hidden !important;
+/* Header */
+.app-header {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 20px;
+    background: linear-gradient(135deg, #4f46e5, #6366f1);
+    border-radius: 16px;
+    color: white;
+    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.2);
 }
 
-/* Sidebar - fixed width */
-.sidebar {
-    width: 350px !important;
-    min-width: 350px !important;
-    height: 100vh !important;
-    background: white !important;
-    border-right: 1px solid #e2e8f0 !important;
-    padding: 20px !important;
-    overflow-y: auto !important;
-    position: fixed !important;
-    left: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
+.app-title {
+    font-size: 2.2rem;
+    font-weight: 800;
+    margin-bottom: 8px;
 }
 
-/* Main content */
-.main-content {
-    flex: 1 !important;
-    height: 100vh !important;
-    margin-left: 350px !important;
-    padding: 20px !important;
-    overflow-y: auto !important;
-    background: #f8fafc !important;
+.app-subtitle {
+    font-size: 1rem;
+    opacity: 0.9;
 }
 
-/* Header */
-.header {
-    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    margin-bottom: 20px !important;
-    color: white !important;
+/* Control Panel */
+.control-panel {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
-.header h1 {
-    font-size: 1.8rem !important;
-    font-weight: 700 !important;
-    margin-bottom: 4px !important;
+.control-row {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
 }
 
-.header p {
-    opacity: 0.9 !important;
-    font-size: 0.95rem !important;
+.control-item {
+    flex: 1;
+    min-width: 200px;
 }
 
-/* Cards */
-.card {
-    background: white !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    border: 1px solid #e2e8f0 !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
-    margin-bottom: 16px !important;
+/* Word Display Area */
+.game-area {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    margin-bottom: 20px;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    text-align: center;
 }
 
-/* Word display */
 .word-display-container {
-    text-align: center !important;
-    margin: 20px 0 !important;
+    margin: 20px 0;
 }
 
 .word-display {
-    font-family: monospace !important;
-    font-size: 2.5rem !important;
-    font-weight: 700 !important;
-    letter-spacing: 0.3rem !important;
-    padding: 20px !important;
-    background: white !important;
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    display: inline-block !important;
-    min-width: 300px !important;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 3rem;
+    font-weight: 700;
+    letter-spacing: 0.3rem;
+    padding: 25px;
+    background: #f8fafc;
+    border: 3px solid #e2e8f0;
+    border-radius: 12px;
+    display: inline-block;
+    min-width: 300px;
+    margin: 10px 0;
 }
 
 .word-display.correct {
-    color: #10b981 !important;
-    border-color: #10b981 !important;
-    background: rgba(16, 185, 129, 0.05) !important;
+    color: #10b981;
+    border-color: #10b981;
+    background: rgba(16, 185, 129, 0.05);
+    animation: pulse 2s infinite;
 }
 
 .word-display.incorrect {
-    color: #ef4444 !important;
-    border-color: #ef4444 !important;
-    background: rgba(239, 68, 68, 0.05) !important;
+    color: #ef4444;
+    border-color: #ef4444;
+    background: rgba(239, 68, 68, 0.05);
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.8; }
 }
 
-/* Stats row */
+/* Stats Row */
 .stats-row {
-    display: flex !important;
-    gap: 12px !important;
-    margin: 16px 0 !important;
+    display: flex;
+    gap: 15px;
+    margin: 20px 0;
 }
 
 .stat-box {
-    flex: 1 !important;
-    text-align: center !important;
-    padding: 16px !important;
-    background: white !important;
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 8px !important;
+    flex: 1;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
 }
 
 .stat-label {
-    font-size: 0.8rem !important;
-    color: #64748b !important;
-    margin-bottom: 4px !important;
+    font-size: 0.85rem;
+    color: #64748b;
+    margin-bottom: 5px;
+    font-weight: 600;
 }
 
 .stat-value {
-    font-size: 1.5rem !important;
-    font-weight: 700 !important;
-    color: #4f46e5 !important;
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #4f46e5;
 }
 
-/* Buttons */
-.btn {
-    padding: 12px 20px !important;
-    border-radius: 8px !important;
-    font-weight: 600 !important;
-    border: none !important;
-    cursor: pointer !important;
-    transition: all 0.2s !important;
+/* Progress Bar */
+.progress-container {
+    background: white;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 15px 0;
+    border: 1px solid #e2e8f0;
 }
 
-.btn-primary {
-    background: #4f46e5 !important;
-    color: white !important;
+/* Audio Controls */
+.audio-controls {
+    display: flex;
+    gap: 15px;
+    margin: 20px 0;
+    justify-content: center;
 }
 
-.btn-success {
-    background: #10b981 !important;
-    color: white !important;
+.audio-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 15px 25px;
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 120px;
 }
 
-.btn-warning {
-    background: #f59e0b !important;
-    color: white !important;
+.audio-btn:hover {
+    border-color: #4f46e5;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
 }
 
-.btn-secondary {
-    background: white !important;
-    color: #1e293b !important;
-    border: 2px solid #e2e8f0 !important;
+.audio-icon {
+    font-size: 1.5rem;
 }
 
-/* Audio controls */
-.audio-controls {
-    display: flex !important;
-    gap: 12px !important;
-    margin: 20px 0 !important;
+.audio-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #1e293b;
 }
 
-.audio-btn {
-    flex: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    gap: 8px !important;
-    padding: 16px !important;
+/* Answer Input */
+.answer-container {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    margin: 20px 0;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
-/* Input */
-.input-field {
-    width: 100% !important;
-    padding: 12px 16px !important;
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 8px !important;
-    font-size: 1rem !important;
+.answer-input {
+    width: 100%;
+    padding: 15px 20px;
+    font-size: 1.2rem;
+    border: 2px solid #e2e8f0;
+    border-radius: 10px;
+    transition: all 0.2s;
 }
 
-.input-field:focus {
-    outline: none !important;
-    border-color: #4f46e5 !important;
+.answer-input:focus {
+    outline: none;
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
-/* Action buttons */
+/* Action Buttons */
 .action-buttons {
-    display: flex !important;
-    gap: 12px !important;
-    margin: 20px 0 !important;
+    display: flex;
+    gap: 15px;
+    margin: 25px 0;
+}
+
+.action-btn {
+    flex: 1;
+    padding: 16px 24px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.action-btn-primary {
+    background: linear-gradient(135deg, #4f46e5, #6366f1);
+    color: white;
+}
+
+.action-btn-primary:hover {
+    background: linear-gradient(135deg, #4338ca, #4f46e5);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3);
+}
+
+.action-btn-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: white;
 }
 
-.action-buttons .btn {
-    flex: 1 !important;
+.action-btn-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: white;
+}
+
+.action-btn-secondary {
+    background: white;
+    color: #1e293b;
+    border: 2px solid #e2e8f0;
+}
+
+.action-btn-secondary:hover {
+    border-color: #4f46e5;
+    background: #f8fafc;
+}
+
+/* Performance Dashboard */
+.performance-container {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
-/* Performance dashboard */
 .performance-dashboard {
-    background: white !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    border: 1px solid #e2e8f0 !important;
-    margin-top: 20px !important;
+    padding: 10px;
 }
 
 .dashboard-header {
-    display: flex !important;
-    align-items: center !important;
-    gap: 12px !important;
-    margin-bottom: 20px !important;
-    padding-bottom: 16px !important;
-    border-bottom: 2px solid #6366f1 !important;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #6366f1;
 }
 
 .header-text {
-    font-size: 1.25rem !important;
-    font-weight: 700 !important;
-    color: #1e293b !important;
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #1e293b;
 }
 
 .stats-grid {
-    display: grid !important;
-    grid-template-columns: repeat(3, 1fr) !important;
-    gap: 12px !important;
-    margin-bottom: 20px !important;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
 }
 
 .stat-card {
-    text-align: center !important;
-    padding: 12px !important;
+    background: #f8fafc;
+    border-radius: 10px;
+    padding: 15px;
+    text-align: center;
+    border: 1px solid #e2e8f0;
 }
 
 .stat-label-small {
-    font-size: 0.7rem !important;
-    color: #64748b !important;
-    margin-bottom: 4px !important;
+    font-size: 0.8rem;
+    color: #64748b;
+    margin-bottom: 5px;
+    font-weight: 600;
 }
 
 .stat-value-small {
-    font-size: 1.25rem !important;
-    font-weight: 700 !important;
-    color: #4f46e5 !important;
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: #4f46e5;
 }
 
-.recent-words-container {
-    margin: 16px 0 !important;
+/* Feedback */
+.feedback-container {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid #e2e8f0;
+    min-height: 80px;
 }
 
-.word-item {
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-    padding: 12px !important;
-    margin-bottom: 8px !important;
-    background: #f8fafc !important;
-    border-radius: 8px !important;
-    border-left: 4px solid #e2e8f0 !important;
+/* Instructions */
+.instructions-container {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
-.word-item.perfect {
-    border-left-color: #10b981 !important;
+/* Responsive Design */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px !important;
+    }
+    
+    .app-title {
+        font-size: 1.8rem;
+    }
+    
+    .word-display {
+        font-size: 2.2rem;
+        min-width: 250px;
+        padding: 20px;
+    }
+    
+    .control-row {
+        flex-direction: column;
+    }
+    
+    .control-item {
+        min-width: 100%;
+    }
+    
+    .audio-controls {
+        flex-direction: column;
+    }
+    
+    .audio-btn {
+        width: 100%;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
-.word-item.hint {
-    border-left-color: #4f46e5 !important;
+@media (max-width: 480px) {
+    .word-display {
+        font-size: 1.8rem;
+        min-width: 200px;
+        padding: 15px;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .stat-value {
+        font-size: 1.5rem;
+    }
 }
 
-.analytics-grid {
-    display: grid !important;
-    grid-template-columns: 1fr 1fr !important;
-    gap: 12px !important;
+/* Gradio overrides */
+.gr-textbox, .gr-dropdown, .gr-radio, .gr-slider, .gr-button {
+    font-family: inherit !important;
 }
 
-.analytics-item {
-    padding: 12px !important;
-    background: #f8fafc !important;
-    border-radius: 8px !important;
+.gr-button {
+    font-weight: 600 !important;
 }
 
-/* Responsive */
-@media (max-width: 1024px) {
-    .app-container {
-        flex-direction: column !important;
-    }
-    
-    .sidebar {
-        width: 100% !important;
-        height: auto !important;
-        position: relative !important;
-        border-right: none !important;
-        border-bottom: 1px solid #e2e8f0 !important;
-    }
-    
-    .main-content {
-        margin-left: 0 !important;
-        height: auto !important;
-        flex: 1 !important;
-    }
+.gr-form {
+    max-height: none !important;
+}
+
+/* Custom scrollbar */
+.gradio-container::-webkit-scrollbar {
+    width: 8px;
 }
 
-/* Hide scrollbars */
-.sidebar::-webkit-scrollbar,
-.main-content::-webkit-scrollbar {
-    width: 6px !important;
+.gradio-container::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
 }
 
-.sidebar::-webkit-scrollbar-track,
-.main-content::-webkit-scrollbar-track {
-    background: #f1f5f9 !important;
+.gradio-container::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
 }
 
-.sidebar::-webkit-scrollbar-thumb,
-.main-content::-webkit-scrollbar-thumb {
-    background: #cbd5e1 !important;
-    border-radius: 3px !important;
+.gradio-container::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
 }
 """
 
 # -----------------------------
-# Gradio Interface - SIMPLE FIXED LAYOUT
+# Gradio Interface - CLEAN SINGLE COLUMN LAYOUT
 # -----------------------------
 with gr.Blocks(
     title="Spelling Trainer Pro",
@@ -1052,104 +1086,78 @@ with gr.Blocks(
     )
 ) as app:
     
-    # Main container
-    with gr.Row(elem_classes="app-container"):
+    # Main container - simple single column
+    with gr.Column():
         
-        # ============ SIDEBAR ============
-        with gr.Column(elem_classes="sidebar"):
-            # Title
+        # Header
+        with gr.Column(elem_classes="app-header"):
             gr.HTML("""
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
-                <div style="font-size: 2rem;">📚</div>
-                <div>
-                    <h2 style="color: #4f46e5; margin: 0; font-size: 1.5rem;">Spelling Trainer</h2>
-                    <p style="color: #64748b; margin-top: 4px; font-size: 0.9rem;">Master spelling skills</p>
-                </div>
-            </div>
+            <h1 class="app-title">Spelling Trainer Pro</h1>
+            <p class="app-subtitle">Master spelling skills with AI-powered practice</p>
             """)
-            
-            # Player Profile
-            user_name_input = gr.Textbox(
-                label="👤 Your Name",
-                placeholder="Enter your name...",
-                value="",
-                elem_classes="input-field"
-            )
-            
-            # Training Mode
-            mode_select = gr.Radio(
-                choices=["Learning (Ordered)", "Practice (Random)", "Sentence Practice"],
-                value="Learning (Ordered)",
-                label="🎯 Training Mode",
-                elem_classes="card"
-            )
-            
-            # Word Lists
-            grade_select = gr.Dropdown(
-                label="📚 Word List",
-                choices=available_lists,
-                value=default_list if default_list else None,
-                elem_classes="input-field"
-            )
-            
-            # Start Session
-            start_session_btn = gr.Button(
-                "🚀 Start Session", 
-                variant="primary",
-                elem_classes="btn btn-primary"
-            )
+        
+        # Control Panel
+        with gr.Column(elem_classes="control-panel"):
+            with gr.Row(elem_classes="control-row"):
+                with gr.Column(elem_classes="control-item"):
+                    user_name_input = gr.Textbox(
+                        label="👤 Your Name",
+                        placeholder="Enter your name...",
+                        value="",
+                        scale=2
+                    )
+                
+                with gr.Column(elem_classes="control-item"):
+                    mode_select = gr.Radio(
+                        choices=["Learning (Ordered)", "Practice (Random)", "Sentence Practice", "Trini Mode", "Time Mode"],
+                        value="Learning (Ordered)",
+                        label="🎯 Training Mode",
+                        scale=2
+                    )
+                
+                with gr.Column(elem_classes="control-item"):
+                    grade_select = gr.Dropdown(
+                        label="📚 Word List",
+                        choices=available_lists,
+                        value=default_list if default_list else None,
+                        scale=2
+                    )
             
             with gr.Row():
-                save_btn = gr.Button(
-                    "💾 Save", 
-                    variant="secondary",
-                    elem_classes="btn btn-secondary",
-                    scale=1
-                )
-                new_session_btn = gr.Button(
-                    "🔄 Restart", 
-                    variant="secondary",
-                    elem_classes="btn btn-secondary",
-                    scale=1
-                )
-            
-            # Voice Settings
-            with gr.Accordion("🎤 Voice Settings", open=False):
-                voice_select = gr.Dropdown(
-                    choices=list(voice_options.keys()),
-                    value="👨‍🏫 US Male (Guy)",
-                    label="Select Voice",
-                    elem_classes="input-field"
-                )
-                test_voice_btn = gr.Button(
-                    "Test Voice", 
-                    variant="secondary",
-                    elem_classes="btn btn-secondary"
-                )
-                test_audio = gr.Audio(label="Test Audio", visible=True)
+                with gr.Column(scale=2):
+                    voice_select = gr.Dropdown(
+                        choices=list(voice_options.keys()),
+                        value="👨‍🏫 US Male (Guy)",
+                        label="🎤 Select Voice",
+                        scale=1
+                    )
+                
+                with gr.Column(scale=1):
+                    start_session_btn = gr.Button(
+                        "🚀 Start Session", 
+                        variant="primary",
+                        size="lg",
+                        scale=1
+                    )
             
-            # Performance Dashboard
-            performance_html = gr.HTML(
-                value=generate_performance_html(),
-                elem_classes="performance-dashboard"
-            )
+            with gr.Row():
+                with gr.Column(scale=1):
+                    test_voice_btn = gr.Button(
+                        "Test Voice", 
+                        variant="secondary",
+                        scale=1
+                    )
+                    test_audio = gr.Audio(label="Test Audio", visible=True, scale=1)
         
-        # ============ MAIN CONTENT ============
-        with gr.Column(elem_classes="main-content"):
-            # Header
-            with gr.Column(elem_classes="header"):
-                gr.HTML("""
-                <h1>Spelling Trainer Pro</h1>
-                <p>AI-powered spelling practice for all ages</p>
-                """)
-            
+        # Game Area
+        with gr.Column(elem_classes="game-area"):
             # Progress
-            with gr.Column(elem_classes="card"):
+            with gr.Column(elem_classes="progress-container"):
                 progress_text = gr.Textbox(
                     label="",
                     value="Word 1 of 10",
                     interactive=False,
-                    elem_classes="input-field"
+                    elem_classes="stat-box"
                 )
                 progress_bar = gr.Slider(
                     minimum=0,
@@ -1190,70 +1198,107 @@ with gr.Blocks(
             with gr.Row(elem_classes="audio-controls"):
                 hear_word_btn = gr.Button(
                     "🔊 Hear Word", 
-                    elem_classes="btn btn-primary audio-btn"
+                    elem_classes="audio-btn"
                 )
                 context_btn = gr.Button(
                     "🎧 Context", 
-                    elem_classes="btn btn-secondary audio-btn"
+                    elem_classes="audio-btn"
+                )
+                spell_out_btn = gr.Button(
+                    "🔤 Spell Out", 
+                    elem_classes="audio-btn",
+                    visible=False
                 )
             
             # Audio outputs
             word_audio = gr.Audio(label="Word Audio", visible=True)
             context_audio = gr.Audio(label="Context Audio", visible=True)
+            spell_out_audio = gr.Audio(label="Spell Out Audio", visible=True)
             
             # Answer Input
-            with gr.Column(elem_classes="card"):
+            with gr.Column(elem_classes="answer-container"):
                 answer_input = gr.Textbox(
                     label="✍️ Type Your Answer",
                     placeholder="Type the word exactly as you hear it...",
                     lines=1,
-                    elem_classes="input-field"
+                    elem_classes="answer-input"
                 )
             
             # Action Buttons
             with gr.Row(elem_classes="action-buttons"):
                 check_btn = gr.Button(
                     "✅ Check Answer", 
-                    variant="primary",
-                    elem_classes="btn btn-success"
+                    elem_classes="action-btn action-btn-success"
                 )
                 hint_btn = gr.Button(
                     "💡 Get Hint", 
-                    variant="secondary",
-                    elem_classes="btn btn-warning"
+                    elem_classes="action-btn action-btn-warning"
                 )
                 next_btn = gr.Button(
                     "Next Word →", 
-                    variant="secondary",
-                    elem_classes="btn btn-primary"
+                    elem_classes="action-btn action-btn-primary"
                 )
+        
+        # Performance Dashboard
+        with gr.Column(elem_classes="performance-container"):
+            performance_html = gr.HTML(
+                value=generate_performance_html(),
+                elem_classes="performance-dashboard"
+            )
+        
+        # Feedback Area
+        with gr.Column(elem_classes="feedback-container"):
+            feedback_display = gr.Markdown("")
+        
+        # Finish Button
+        finish_btn = gr.Button(
+            "🏆 Finish Session", 
+            variant="primary", 
+            visible=False,
+            elem_classes="action-btn action-btn-primary"
+        )
+        
+        # Instructions
+        with gr.Accordion("📚 How to Play & Features", open=False, elem_classes="instructions-container"):
+            gr.Markdown("""
+            ## 🎯 Your Mission
             
-            # Feedback
-            feedback_display = gr.Markdown("", elem_classes="card")
+            **Spelling Trainer Pro** helps you master spelling through interactive learning:
             
-            # Finish Button
-            finish_btn = gr.Button(
-                "🏆 Finish Session", 
-                variant="stop", 
-                visible=False,
-                elem_classes="btn btn-primary"
-            )
+            1. **🎧 Listen** - Click "Hear Word" to listen to the pronunciation
+            2. **✍️ Type** - Enter the word exactly as you hear it
+            3. **✅ Check** - Get instant feedback on your spelling
+            4. **🚀 Advance** - Move to the next word when correct
             
-            # Instructions
-            with gr.Accordion("📚 How to Play", open=False):
-                gr.Markdown("""
-                **How to Play:**
-                1. Click "Hear Word" to listen to the pronunciation
-                2. Type the word you hear in the input box
-                3. Click "Check Answer" to see if you're correct
-                4. Use "Get Hint" if you need help
-                5. Click "Next Word" to continue
-                
-                **Scoring:**
-                - Correct on first try: 10 points
-                - Correct with hints: 5 points
-                - Build streaks for bonus points!
-                """)
+            ## 💡 Features
+            
+            ### Audio Support
+            - 🔊 **Hear Word**: Listen to pronunciation
+            - 🎧 **Context**: Hear words in sentences (when available)
+            - 🔤 **Spell Out**: Hear letters individually (enable in settings)
+            
+            ### Learning Modes
+            - 📚 **Learning (Ordered)**: Progressive learning
+            - 🎲 **Practice (Random)**: Random word order
+            - 📝 **Sentence Practice**: Full sentences with punctuation
+            - 🇹🇹 **Trini Mode**: Trinidad & Tobago words
+            - ⏰ **Time Mode**: Time-related vocabulary
+            
+            ### Scoring System
+            - ⭐ **Perfect First Try**: 10 points (earns bonus streak!)
+            - 💡 **With Hints**: 5 points (still a win!)
+            - 🔥 **Streak Bonus**: Extra points for consecutive perfect words
+            
+            ## 🎮 Tips for Success
+            
+            1. **Listen carefully** - Pay attention to pronunciation
+            2. **Use context clues** - When available, context sentences help
+            3. **Start with hints** - Use hints when stuck, but try first!
+            4. **Build streaks** - Consecutive perfect scores earn bonuses
+            5. **Practice regularly** - Consistency is key to improvement
+            
+            **Made with ❤️ for young learners • Inspired by AMARI**
+            """)
 
     # -----------------------------
     # Event Handlers
@@ -1292,41 +1337,19 @@ with gr.Blocks(
         ]
     )
     
-    # New session button
-    def on_new_session(voice_name):
+    # New session button (reusing start session button)
+    def on_new_session():
         if game_state.grade_file:
             result = initialize_session(
                 game_state.grade_file,
                 game_state.mode,
                 game_state.user_name
             )
-            handle_voice_change(voice_name)
             streak = update_streak_display()
             return result + (streak,)
         ui_updates = update_ui()
         streak = update_streak_display()
-        return ui_updates + (False, "Please select a grade level first") + (streak,)
-    
-    new_session_btn.click(
-        fn=on_new_session,
-        inputs=[voice_select],
-        outputs=[
-            word_display,
-            progress_bar,
-            progress_text,
-            attempts_display,
-            score_display,
-            hint_btn,
-            next_btn,
-            check_btn,
-            context_btn,
-            answer_input,
-            feedback_display,
-            gr.Checkbox(visible=False),
-            feedback_display,
-            streak_display
-        ]
-    )
+        return ui_updates + (False, "Please select a word list first") + (streak,)
     
     # Check answer
     def on_check_answer(answer):
@@ -1483,11 +1506,6 @@ with gr.Blocks(
         outputs=[performance_html]
     )
     
-    new_session_btn.click(
-        fn=update_dashboard,
-        outputs=[performance_html]
-    )
-    
     # Finish button visibility
     def update_finish_button():
         return gr.update(visible=game_state.is_finished())
@@ -1534,7 +1552,7 @@ with gr.Blocks(
         return streak
     
     # Add streak updates to all interactions
-    for btn in [check_btn, hint_btn, next_btn, start_session_btn, new_session_btn]:
+    for btn in [check_btn, hint_btn, next_btn, start_session_btn]:
         btn.click(
             fn=update_all_streaks,
             outputs=[streak_display]