diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,31 +3,32 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Spelling Trainer Pro | Premium Edition</title>
+    <title>Spelling Trainer Pro | Ultra Premium</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Fredoka+One&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Fredoka+One&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <style>
         :root {
-            --primary: #6366f1;
-            --primary-light: #818cf8;
-            --primary-dark: #4f46e5;
+            --primary: #8b5cf6;
+            --primary-light: #a78bfa;
+            --primary-dark: #7c3aed;
             --secondary: #10b981;
             --secondary-light: #34d399;
             --accent: #f59e0b;
+            --accent-light: #fbbf24;
             --danger: #ef4444;
             --success: #10b981;
             --warning: #f59e0b;
-            --dark-bg: #0f172a;
-            --dark-card: #1e293b;
-            --dark-text: #f1f5f9;
+            --dark-bg: #0f0f23;
+            --dark-card: #1a1a2e;
+            --dark-text: #f8fafc;
             --dark-muted: #94a3b8;
-            --dark-border: #334155;
-            --glass-bg: rgba(30, 41, 59, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-            --glow: 0 0 20px rgba(99, 102, 241, 0.4);
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --dark-border: #2d2d5a;
+            --glass-bg: rgba(26, 26, 46, 0.85);
+            --glass-border: rgba(139, 92, 246, 0.2);
+            --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            --glow: 0 0 30px rgba(139, 92, 246, 0.5);
+            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         * {
@@ -36,6 +37,10 @@
             box-sizing: border-box;
         }
 
+        html {
+            scroll-behavior: smooth;
+        }
+
         body {
             font-family: 'Inter', sans-serif;
             background-color: var(--dark-bg);
@@ -45,31 +50,30 @@
             position: relative;
         }
 
-        /* Animated Background */
-        .bg-animation {
+        /* Advanced Animated Background */
+        .cosmic-bg {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: -2;
-            background: linear-gradient(-45deg, 
-                #0a0a2a 0%, 
-                #1a0033 25%, 
-                #0d1b2a 50%, 
-                #001524 75%, 
-                #000814 100%);
-            background-size: 400% 400%;
-            animation: gradientBG 20s ease infinite;
+            background: 
+                radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
+                radial-gradient(ellipse at 40% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
+                linear-gradient(180deg, #0f0f23 0%, #1a1a2e 100%);
+            background-size: 200% 200%;
+            animation: cosmicPulse 30s ease infinite;
         }
 
-        @keyframes gradientBG {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
+        @keyframes cosmicPulse {
+            0%, 100% { background-position: 0% 0%; }
+            33% { background-position: 100% 100%; }
+            66% { background-position: 0% 100%; }
         }
 
-        .particles {
+        .stars {
             position: fixed;
             top: 0;
             left: 0;
@@ -79,90 +83,146 @@
             pointer-events: none;
         }
 
-        .particle {
+        .star {
             position: absolute;
+            background: white;
             border-radius: 50%;
-            background: rgba(255, 255, 255, 0.1);
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
-            animation: float linear infinite;
+            animation: twinkle var(--duration, 3s) infinite var(--delay, 0s);
         }
 
-        @keyframes float {
-            0% {
-                transform: translateY(100vh) rotate(0deg);
-                opacity: 0;
-            }
-            10% {
-                opacity: 0.3;
-            }
-            90% {
-                opacity: 0.3;
-            }
-            100% {
-                transform: translateY(-100px) rotate(360deg);
-                opacity: 0;
-            }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.1; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.2); }
+        }
+
+        /* Nebula Animation */
+        .nebula {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80vw;
+            height: 80vh;
+            z-index: -1;
+            opacity: 0.1;
+            background: 
+                radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.4) 0%, transparent 50%),
+                radial-gradient(circle at 70% 70%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
+            filter: blur(60px);
+            animation: nebulaFloat 40s ease-in-out infinite;
+        }
+
+        @keyframes nebulaFloat {
+            0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
+            33% { transform: translate(-50%, -50%) rotate(120deg) scale(1.1); }
+            66% { transform: translate(-50%, -50%) rotate(240deg) scale(0.9); }
         }
 
-        /* Main Layout */
+        /* Main Container */
         .app-container {
-            max-width: 1400px;
+            max-width: 1600px;
             margin: 0 auto;
             padding: 20px;
             display: grid;
-            grid-template-columns: 300px 1fr;
+            grid-template-columns: 1fr;
             gap: 25px;
             min-height: 100vh;
         }
 
         /* Header */
         .header {
-            grid-column: 1 / -1;
             text-align: center;
-            padding: 20px 0;
+            padding: 30px 20px;
             margin-bottom: 20px;
-            border-bottom: 1px solid var(--dark-border);
+            background: rgba(26, 26, 46, 0.7);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            border: 1px solid var(--glass-border);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent, rgba(139, 92, 246, 0.1), transparent);
+            transform: translateX(-100%);
+            animation: shine 8s infinite;
+        }
+
+        @keyframes shine {
+            0% { transform: translateX(-100%); }
+            50%, 100% { transform: translateX(100%); }
         }
 
         .header h1 {
             font-family: 'Orbitron', sans-serif;
-            font-size: 2.8rem;
+            font-size: 3.5rem;
             font-weight: 900;
-            background: linear-gradient(135deg, var(--primary), var(--primary-light));
+            background: linear-gradient(135deg, var(--primary), var(--accent-light), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             letter-spacing: 2px;
+            text-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
         }
 
         .header p {
             color: var(--dark-muted);
-            font-size: 1.1rem;
+            font-size: 1.2rem;
             font-family: 'Fredoka One', cursive;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        /* Main Layout Grid */
+        .main-grid {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 25px;
+        }
+
+        @media (max-width: 1200px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
         }
 
         /* Sidebar */
         .sidebar {
             background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
             padding: 25px;
             border: 1px solid var(--glass-border);
             box-shadow: var(--shadow);
             height: fit-content;
             position: sticky;
             top: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+
+        @media (max-width: 1200px) {
+            .sidebar {
+                position: static;
+                margin-bottom: 25px;
+            }
         }
 
         .sidebar-section {
-            margin-bottom: 30px;
-            padding-bottom: 20px;
+            padding-bottom: 25px;
             border-bottom: 1px solid var(--dark-border);
         }
 
         .sidebar-section:last-child {
             border-bottom: none;
-            margin-bottom: 0;
             padding-bottom: 0;
         }
 
@@ -171,41 +231,42 @@
             font-size: 1rem;
             font-weight: 600;
             color: var(--primary-light);
-            margin-bottom: 15px;
+            margin-bottom: 20px;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
 
         .section-title i {
             font-size: 1.2rem;
+            color: var(--accent);
         }
 
-        /* Main Content */
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 25px;
-        }
-
+        /* Tabs */
         .tab-container {
             background: var(--glass-bg);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
             border: 1px solid var(--glass-border);
             box-shadow: var(--shadow);
             overflow: hidden;
+            min-height: 600px;
         }
 
         .tab-header {
             display: flex;
-            background: rgba(15, 23, 42, 0.8);
+            background: rgba(15, 15, 35, 0.9);
             border-bottom: 1px solid var(--dark-border);
+            position: relative;
+            overflow-x: auto;
         }
 
         .tab-button {
             flex: 1;
-            padding: 18px 20px;
+            min-width: 180px;
+            padding: 20px;
             background: transparent;
             border: none;
             color: var(--dark-muted);
@@ -216,44 +277,55 @@
             transition: var(--transition);
             position: relative;
             overflow: hidden;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+
+        .tab-button::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            transition: var(--transition);
         }
 
         .tab-button:hover {
             color: var(--primary-light);
-            background: rgba(99, 102, 241, 0.1);
+            background: rgba(139, 92, 246, 0.1);
         }
 
         .tab-button.active {
             color: var(--primary-light);
-            background: rgba(99, 102, 241, 0.15);
+            background: rgba(139, 92, 246, 0.15);
         }
 
-        .tab-button.active::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 3px;
-            background: linear-gradient(90deg, var(--primary), var(--primary-light));
+        .tab-button.active::before {
+            width: 80%;
         }
 
         .tab-content {
             padding: 30px;
             display: none;
+            animation: fadeIn 0.6s ease;
         }
 
         .tab-content.active {
             display: block;
-            animation: fadeIn 0.5s ease;
         }
 
         @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        /* Game Tab */
+        /* Game Header */
         .game-header {
             display: flex;
             justify-content: space-between;
@@ -261,111 +333,199 @@
             margin-bottom: 30px;
             padding-bottom: 20px;
             border-bottom: 1px solid var(--dark-border);
+            flex-wrap: wrap;
+            gap: 20px;
         }
 
         .progress-container {
             display: flex;
             align-items: center;
-            gap: 15px;
+            gap: 20px;
+            flex: 1;
+            min-width: 300px;
+        }
+
+        .progress-wrapper {
+            flex: 1;
         }
 
         .progress-bar {
-            width: 200px;
-            height: 10px;
+            height: 12px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 5px;
+            border-radius: 6px;
             overflow: hidden;
+            position: relative;
         }
 
         .progress-fill {
             height: 100%;
-            background: linear-gradient(90deg, var(--secondary), var(--primary));
-            border-radius: 5px;
-            transition: width 0.5s ease;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            border-radius: 6px;
+            transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+            position: relative;
+            overflow: hidden;
         }
 
-        .stats-container {
-            display: flex;
-            gap: 20px;
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            animation: shimmer 2s infinite;
         }
 
-        .stat-box {
-            background: rgba(15, 23, 42, 0.5);
-            padding: 15px 20px;
-            border-radius: 12px;
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 15px;
+            flex: 2;
+            min-width: 400px;
+        }
+
+        @media (max-width: 768px) {
+            .stats-grid {
+                min-width: 100%;
+            }
+        }
+
+        .stat-card {
+            background: rgba(15, 15, 35, 0.5);
+            border-radius: 16px;
+            padding: 20px;
             text-align: center;
-            min-width: 120px;
             border: 1px solid var(--dark-border);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, transparent, rgba(139, 92, 246, 0.1), transparent);
+            opacity: 0;
+            transition: var(--transition);
+        }
+
+        .stat-card:hover::before {
+            opacity: 1;
         }
 
         .stat-value {
             font-family: 'Orbitron', sans-serif;
-            font-size: 2rem;
+            font-size: 2.2rem;
             font-weight: 700;
             color: var(--primary-light);
             margin-bottom: 5px;
+            text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
         }
 
         .stat-label {
             font-size: 0.9rem;
             color: var(--dark-muted);
+            font-weight: 500;
+            letter-spacing: 0.5px;
         }
 
         /* Word Display */
         .word-display-container {
-            background: rgba(15, 23, 42, 0.5);
-            border-radius: 20px;
-            padding: 40px;
-            text-align: center;
-            margin: 30px 0;
+            background: rgba(15, 15, 35, 0.6);
+            border-radius: 24px;
+            padding: 50px 30px;
+            margin: 40px 0;
             border: 2px solid var(--dark-border);
             transition: var(--transition);
-            min-height: 200px;
+            position: relative;
+            overflow: hidden;
+            min-height: 250px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
+        .word-display-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 24px;
+            padding: 3px;
+            background: linear-gradient(135deg, var(--primary), transparent, var(--accent));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
         .word-display-container.correct {
             border-color: var(--success);
-            box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
+            box-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
         }
 
         .word-display-container.incorrect {
             border-color: var(--warning);
-            box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
+            box-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
         }
 
         .word-display {
             font-family: 'Orbitron', sans-serif;
-            font-size: 3.5rem;
+            font-size: 4rem;
             font-weight: 900;
-            letter-spacing: 10px;
+            letter-spacing: 15px;
             color: var(--dark-text);
-            margin-bottom: 10px;
+            margin-bottom: 15px;
+            text-align: center;
+            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            line-height: 1.2;
             word-break: break-word;
+            padding: 0 20px;
+        }
+
+        @media (max-width: 768px) {
+            .word-display {
+                font-size: 2.5rem;
+                letter-spacing: 8px;
+                padding: 0 10px;
+            }
         }
 
         .word-context {
-            font-size: 1.2rem;
+            font-size: 1.3rem;
             color: var(--dark-muted);
             font-style: italic;
-            margin-top: 15px;
+            text-align: center;
             font-family: 'Fredoka One', cursive;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 0 20px;
         }
 
         /* Audio Controls */
         .audio-controls {
-            display: flex;
-            justify-content: center;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 15px;
-            margin: 25px 0;
-            flex-wrap: wrap;
+            margin: 40px 0;
         }
 
         .audio-btn {
-            padding: 14px 24px;
-            border-radius: 12px;
+            padding: 18px 24px;
+            border-radius: 16px;
             border: none;
             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
             color: white;
@@ -376,9 +536,25 @@
             transition: var(--transition);
             display: flex;
             align-items: center;
-            gap: 10px;
-            min-width: 180px;
             justify-content: center;
+            gap: 12px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .audio-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: 0.5s;
+        }
+
+        .audio-btn:hover::before {
+            left: 100%;
         }
 
         .audio-btn:hover {
@@ -387,10 +563,14 @@
         }
 
         .audio-btn.secondary {
-            background: linear-gradient(135deg, var(--dark-card), #2d3748);
+            background: linear-gradient(135deg, var(--dark-card), #2a2a4a);
             border: 1px solid var(--dark-border);
         }
 
+        .audio-btn.secondary:hover {
+            border-color: var(--primary);
+        }
+
         .audio-btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
@@ -398,54 +578,75 @@
             box-shadow: none;
         }
 
+        .audio-btn:disabled::before {
+            display: none;
+        }
+
         /* Input Area */
         .input-container {
-            margin: 40px 0;
+            margin: 50px 0;
+            position: relative;
         }
 
         .input-label {
             font-family: 'Orbitron', sans-serif;
             font-size: 1.1rem;
             color: var(--primary-light);
-            margin-bottom: 15px;
+            margin-bottom: 20px;
             display: block;
+            text-align: center;
         }
 
         .answer-input {
             width: 100%;
-            padding: 20px;
-            font-size: 1.5rem;
+            padding: 25px 30px;
+            font-size: 1.8rem;
             font-family: 'Fredoka One', cursive;
-            background: rgba(15, 23, 42, 0.7);
+            background: rgba(15, 15, 35, 0.8);
             border: 2px solid var(--dark-border);
-            border-radius: 15px;
+            border-radius: 20px;
             color: var(--dark-text);
             text-align: center;
             transition: var(--transition);
+            outline: none;
+        }
+
+        @media (max-width: 768px) {
+            .answer-input {
+                font-size: 1.4rem;
+                padding: 20px;
+            }
         }
 
         .answer-input:focus {
-            outline: none;
             border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+            box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
         }
 
         .answer-input::placeholder {
             color: var(--dark-muted);
+            font-size: 1.4rem;
+        }
+
+        .hint-text {
+            text-align: center;
+            color: var(--dark-muted);
+            margin-top: 15px;
+            font-size: 0.95rem;
+            opacity: 0.8;
         }
 
         /* Action Buttons */
         .action-buttons {
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 20px;
-            margin-top: 30px;
-            flex-wrap: wrap;
+            margin-top: 40px;
         }
 
         .action-btn {
-            flex: 1;
-            padding: 18px 30px;
-            border-radius: 15px;
+            padding: 22px 30px;
+            border-radius: 18px;
             border: none;
             font-family: 'Orbitron', sans-serif;
             font-weight: 700;
@@ -455,41 +656,61 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 12px;
-            min-width: 200px;
+            gap: 15px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .action-btn::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            transform: translateX(-100%);
+            transition: transform 0.6s ease;
+        }
+
+        .action-btn:hover::after {
+            transform: translateX(100%);
         }
 
         .action-btn.primary {
             background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
             color: white;
             border: 2px solid rgba(16, 185, 129, 0.3);
+            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
         }
 
         .action-btn.primary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);
+            transform: translateY(-4px);
+            box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);
         }
 
         .action-btn.secondary {
-            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+            background: linear-gradient(135deg, var(--primary), var(--primary-light));
             color: white;
             border: 2px solid rgba(139, 92, 246, 0.3);
+            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
         }
 
         .action-btn.secondary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
+            transform: translateY(-4px);
+            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
         }
 
         .action-btn.warning {
-            background: linear-gradient(135deg, var(--warning), #fbbf24);
+            background: linear-gradient(135deg, var(--warning), var(--accent-light));
             color: white;
             border: 2px solid rgba(245, 158, 11, 0.3);
+            box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
         }
 
         .action-btn.warning:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
+            transform: translateY(-4px);
+            box-shadow: 0 15px 40px rgba(245, 158, 11, 0.4);
         }
 
         .action-btn:disabled {
@@ -499,43 +720,173 @@
             box-shadow: none;
         }
 
+        .action-btn:disabled::after {
+            display: none;
+        }
+
         /* Feedback */
         .feedback-container {
             margin-top: 30px;
-            padding: 20px;
-            border-radius: 15px;
+            padding: 25px;
+            border-radius: 20px;
             text-align: center;
-            font-size: 1.2rem;
+            font-size: 1.3rem;
             font-weight: 600;
             display: none;
+            animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            position: relative;
+            overflow: hidden;
         }
 
-        .feedback-container.correct {
-            background: rgba(16, 185, 129, 0.15);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            color: var(--secondary-light);
-            display: block;
-        }
-
-        .feedback-container.incorrect {
-            background: rgba(245, 158, 11, 0.15);
-            border: 1px solid rgba(245, 158, 11, 0.3);
-            color: var(--warning);
-            display: block;
+        @keyframes popIn {
+            0% { transform: scale(0.5); opacity: 0; }
+            100% { transform: scale(1); opacity: 1; }
         }
 
-        /* Analytics Tab */
-        .dashboard-container {
+        .feedback-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: inherit;
+            filter: blur(20px);
+            z-index: -1;
+            opacity: 0.5;
+        }
+
+        .feedback-container.correct {
+            background: rgba(16, 185, 129, 0.2);
+            border: 2px solid rgba(16, 185, 129, 0.4);
+            color: var(--secondary-light);
+            display: block;
+        }
+
+        .feedback-container.incorrect {
+            background: rgba(245, 158, 11, 0.2);
+            border: 2px solid rgba(245, 158, 11, 0.4);
+            color: var(--warning);
+            display: block;
+        }
+
+        /* Form Elements */
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 10px;
+            color: var(--dark-text);
+            font-weight: 500;
+            font-size: 0.95rem;
+        }
+
+        .form-select {
+            width: 100%;
+            padding: 14px 18px;
+            background: rgba(15, 15, 35, 0.8);
+            border: 1px solid var(--dark-border);
+            border-radius: 12px;
+            color: var(--dark-text);
+            font-family: 'Inter', sans-serif;
+            font-size: 1rem;
+            transition: var(--transition);
+            cursor: pointer;
+        }
+
+        .form-select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 14px 18px;
+            background: rgba(15, 15, 35, 0.8);
+            border: 1px solid var(--dark-border);
+            border-radius: 12px;
+            color: var(--dark-text);
+            font-family: 'Inter', sans-serif;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+        }
+
+        /* ElevenLabs Configuration */
+        .elevenlabs-config {
+            background: rgba(139, 92, 246, 0.1);
+            border-radius: 16px;
+            padding: 25px;
+            margin-bottom: 30px;
+            border: 1px solid rgba(139, 92, 246, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .elevenlabs-config::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+        }
+
+        .config-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+
+        .config-header i {
+            font-size: 1.5rem;
+            color: var(--primary);
+        }
+
+        .config-header h3 {
+            font-family: 'Orbitron', sans-serif;
+            color: var(--primary-light);
+            font-size: 1.2rem;
+        }
+
+        .config-description {
+            color: var(--dark-muted);
+            margin-bottom: 20px;
+            font-size: 0.95rem;
+            line-height: 1.5;
+        }
+
+        /* Dashboard */
+        .dashboard-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 25px;
         }
 
         .dashboard-card {
-            background: rgba(15, 23, 42, 0.5);
+            background: rgba(15, 15, 35, 0.6);
             border-radius: 20px;
             padding: 25px;
             border: 1px solid var(--dark-border);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .dashboard-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--primary);
+            box-shadow: var(--shadow);
         }
 
         .dashboard-card h3 {
@@ -545,57 +896,88 @@
             font-size: 1.3rem;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
         }
 
         .dashboard-card h3 i {
-            font-size: 1.5rem;
+            font-size: 1.4rem;
+            color: var(--accent);
         }
 
         /* Badges */
         .badge-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
             gap: 15px;
             margin-top: 15px;
         }
 
         .badge {
-            background: rgba(30, 41, 59, 0.8);
-            border-radius: 15px;
-            padding: 15px;
+            background: rgba(26, 26, 46, 0.8);
+            border-radius: 16px;
+            padding: 20px;
             text-align: center;
             border: 2px solid transparent;
             transition: var(--transition);
             position: relative;
             overflow: hidden;
+            cursor: pointer;
+        }
+
+        .badge::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 16px;
+            padding: 2px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+            opacity: 0;
+            transition: var(--transition);
+        }
+
+        .badge:hover::before {
+            opacity: 1;
         }
 
         .badge.earned {
             border-color: var(--accent);
-            box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2);
+            box-shadow: 0 5px 20px rgba(245, 158, 11, 0.2);
+        }
+
+        .badge.earned::before {
+            opacity: 1;
         }
 
         .badge.locked {
             opacity: 0.5;
-            filter: grayscale(0.7);
+            filter: grayscale(0.8);
         }
 
         .badge-icon {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
+            font-size: 3rem;
+            margin-bottom: 12px;
+            display: block;
         }
 
         .badge-name {
             font-family: 'Orbitron', sans-serif;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
             font-weight: 600;
             margin-bottom: 5px;
+            color: var(--dark-text);
         }
 
         .badge-desc {
             font-size: 0.8rem;
             color: var(--dark-muted);
+            line-height: 1.3;
         }
 
         /* History */
@@ -605,18 +987,33 @@
             padding-right: 10px;
         }
 
+        .history-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .history-list::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+
+        .history-list::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 3px;
+        }
+
         .history-item {
-            padding: 15px;
-            margin-bottom: 10px;
-            background: rgba(15, 23, 42, 0.3);
-            border-radius: 12px;
+            padding: 18px;
+            margin-bottom: 12px;
+            background: rgba(15, 15, 35, 0.4);
+            border-radius: 14px;
             border-left: 4px solid var(--success);
             transition: var(--transition);
+            cursor: pointer;
         }
 
         .history-item:hover {
-            background: rgba(15, 23, 42, 0.5);
             transform: translateX(5px);
+            background: rgba(15, 15, 35, 0.6);
         }
 
         .history-item.hint {
@@ -626,6 +1023,7 @@
         .history-header {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             margin-bottom: 8px;
         }
 
@@ -638,75 +1036,104 @@
         .history-stats {
             font-size: 0.9rem;
             color: var(--dark-muted);
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
 
-        /* TTS Settings */
-        .tts-settings {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
+        .history-details {
+            font-size: 0.85rem;
+            color: var(--dark-muted);
+            display: flex;
+            gap: 15px;
         }
 
-        .setting-group {
-            margin-bottom: 20px;
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            max-width: 400px;
         }
 
-        .setting-label {
-            display: block;
-            margin-bottom: 10px;
-            color: var(--dark-text);
-            font-weight: 500;
+        @media (max-width: 768px) {
+            .toast-container {
+                bottom: 20px;
+                right: 20px;
+                left: 20px;
+                max-width: none;
+            }
         }
 
-        .setting-select {
-            width: 100%;
-            padding: 12px 15px;
-            background: rgba(15, 23, 42, 0.7);
-            border: 1px solid var(--dark-border);
-            border-radius: 10px;
-            color: var(--dark-text);
-            font-family: 'Inter', sans-serif;
-            font-size: 1rem;
-            transition: var(--transition);
+        .toast {
+            background: var(--dark-card);
+            border-radius: 16px;
+            padding: 20px 25px;
+            border-left: 4px solid var(--primary);
+            box-shadow: var(--shadow);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            transform: translateX(100%);
+            opacity: 0;
+            animation: slideIn 0.3s forwards;
+            backdrop-filter: blur(10px);
         }
 
-        .setting-select:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        @keyframes slideIn {
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
         }
 
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 15px;
+        .toast.success {
+            border-left-color: var(--success);
         }
 
-        .slider-value {
-            min-width: 40px;
-            text-align: center;
-            font-weight: 600;
-            color: var(--primary-light);
+        .toast.warning {
+            border-left-color: var(--warning);
+        }
+
+        .toast.error {
+            border-left-color: var(--danger);
+        }
+
+        .toast-icon {
+            font-size: 1.5rem;
         }
 
-        input[type="range"] {
+        .toast-content {
             flex: 1;
-            height: 8px;
-            -webkit-appearance: none;
-            background: rgba(15, 23, 42, 0.7);
-            border-radius: 4px;
-            outline: none;
         }
 
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background: var(--primary);
+        .toast-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        .toast-message {
+            font-size: 0.9rem;
+            color: var(--dark-muted);
+            line-height: 1.4;
+        }
+
+        .toast-close {
+            background: transparent;
+            border: none;
+            color: var(--dark-muted);
             cursor: pointer;
-            border: 2px solid white;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            font-size: 1.2rem;
+            transition: var(--transition);
+        }
+
+        .toast-close:hover {
+            color: var(--danger);
         }
 
         /* Modal */
@@ -716,12 +1143,12 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(5px);
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
             display: flex;
             align-items: center;
             justify-content: center;
-            z-index: 1000;
+            z-index: 2000;
             opacity: 0;
             visibility: hidden;
             transition: var(--transition);
@@ -734,133 +1161,87 @@
 
         .modal {
             background: var(--dark-card);
-            border-radius: 25px;
+            border-radius: 28px;
             padding: 40px;
             max-width: 600px;
             width: 90%;
-            border: 1px solid var(--dark-border);
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-            transform: translateY(30px);
+            max-height: 90vh;
+            overflow-y: auto;
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
+            transform: translateY(40px) scale(0.95);
             transition: var(--transition);
+            position: relative;
         }
 
         .modal-overlay.active .modal {
-            transform: translateY(0);
+            transform: translateY(0) scale(1);
         }
 
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 25px;
+            margin-bottom: 30px;
         }
 
         .modal-title {
             font-family: 'Orbitron', sans-serif;
-            font-size: 1.8rem;
+            font-size: 2rem;
             color: var(--primary-light);
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         .modal-close {
             background: transparent;
             border: none;
             color: var(--dark-muted);
-            font-size: 1.5rem;
+            font-size: 1.8rem;
             cursor: pointer;
             transition: var(--transition);
-        }
-
-        .modal-close:hover {
-            color: var(--danger);
-        }
-
-        /* Toast Notifications */
-        .toast-container {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            z-index: 100;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-
-        .toast {
-            background: var(--dark-card);
-            border-radius: 12px;
-            padding: 18px 25px;
-            border-left: 4px solid var(--primary);
-            box-shadow: var(--shadow);
+            width: 40px;
+            height: 40px;
             display: flex;
             align-items: center;
-            gap: 15px;
-            transform: translateX(100%);
-            opacity: 0;
-            animation: slideIn 0.3s forwards;
-            min-width: 300px;
-        }
-
-        .toast.success {
-            border-left-color: var(--success);
-        }
-
-        .toast.warning {
-            border-left-color: var(--warning);
-        }
-
-        .toast.error {
-            border-left-color: var(--danger);
-        }
-
-        @keyframes slideIn {
-            to {
-                transform: translateX(0);
-                opacity: 1;
-            }
-        }
-
-        .toast-icon {
-            font-size: 1.5rem;
-        }
-
-        .toast-content {
-            flex: 1;
-        }
-
-        .toast-title {
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-
-        .toast-message {
-            font-size: 0.9rem;
-            color: var(--dark-muted);
+            justify-content: center;
+            border-radius: 50%;
         }
 
-        .toast-close {
-            background: transparent;
-            border: none;
-            color: var(--dark-muted);
-            cursor: pointer;
-            font-size: 1.2rem;
+        .modal-close:hover {
+            color: var(--danger);
+            background: rgba(239, 68, 68, 0.1);
         }
-
-        /* Responsive */
-        @media (max-width: 1200px) {
-            .app-container {
-                grid-template-columns: 1fr;
-            }
-            
-            .sidebar {
-                position: static;
-                margin-bottom: 25px;
-            }
-            
-            .dashboard-container {
-                grid-template-columns: 1fr;
-            }
+
+        /* Loading States */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary);
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
 
+        /* Utility Classes */
+        .text-center { text-align: center; }
+        .mt-1 { margin-top: 10px; }
+        .mt-2 { margin-top: 20px; }
+        .mt-3 { margin-top: 30px; }
+        .mb-1 { margin-bottom: 10px; }
+        .mb-2 { margin-bottom: 20px; }
+        .mb-3 { margin-bottom: 30px; }
+        .p-1 { padding: 10px; }
+        .p-2 { padding: 20px; }
+        .p-3 { padding: 30px; }
+
+        /* Mobile Responsiveness */
         @media (max-width: 768px) {
             .app-container {
                 padding: 15px;
@@ -870,161 +1251,258 @@
                 font-size: 2.2rem;
             }
             
+            .header p {
+                font-size: 1rem;
+            }
+            
             .word-display {
                 font-size: 2.5rem;
-                letter-spacing: 5px;
+                letter-spacing: 8px;
             }
             
-            .audio-controls {
-                flex-direction: column;
-                align-items: center;
+            .word-context {
+                font-size: 1.1rem;
+            }
+            
+            .stat-value {
+                font-size: 1.8rem;
+            }
+            
+            .tab-button {
+                min-width: 140px;
+                padding: 15px;
+                font-size: 0.9rem;
             }
             
-            .audio-btn {
-                width: 100%;
-                max-width: 300px;
+            .audio-controls {
+                grid-template-columns: 1fr;
             }
             
             .action-buttons {
-                flex-direction: column;
+                grid-template-columns: 1fr;
+            }
+            
+            .dashboard-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .badge-grid {
+                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            
+            .word-display {
+                font-size: 2rem;
+                letter-spacing: 5px;
+            }
+            
+            .word-context {
+                font-size: 1rem;
             }
             
-            .action-btn {
-                width: 100%;
+            .stat-value {
+                font-size: 1.5rem;
             }
             
-            .stats-container {
-                flex-wrap: wrap;
-                justify-content: center;
+            .tab-button {
+                min-width: 120px;
+                padding: 12px 10px;
+                font-size: 0.8rem;
             }
             
-            .stat-box {
-                min-width: 100px;
+            .audio-btn, .action-btn {
+                padding: 16px 20px;
+                font-size: 0.9rem;
+            }
+            
+            .answer-input {
+                font-size: 1.2rem;
+                padding: 16px;
+            }
+            
+            .modal {
+                padding: 25px;
+            }
+            
+            .modal-title {
+                font-size: 1.5rem;
             }
         }
     </style>
 </head>
 <body>
-    <!-- Animated Background -->
-    <div class="bg-animation"></div>
-    <div class="particles" id="particles"></div>
+    <!-- Advanced Background -->
+    <div class="cosmic-bg"></div>
+    <div class="nebula"></div>
+    <div class="stars" id="stars"></div>
 
     <!-- Toast Container -->
     <div class="toast-container" id="toastContainer"></div>
 
+    <!-- Session Complete Modal -->
+    <div class="modal-overlay" id="sessionCompleteModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h2 class="modal-title">🎉 Session Complete!</h2>
+                <button class="modal-close" id="modalCloseBtn">&times;</button>
+            </div>
+            <div id="modalContent"></div>
+        </div>
+    </div>
+
     <!-- Main App Container -->
     <div class="app-container">
         <!-- Header -->
         <header class="header">
             <h1>Spelling Trainer Pro</h1>
-            <p>Premium Edition • Master Your Spelling Skills</p>
+            <p>Ultra Premium Edition • Powered by ElevenLabs AI</p>
         </header>
 
-        <!-- Sidebar -->
-        <aside class="sidebar">
-            <!-- User Profile -->
-            <div class="sidebar-section">
-                <h3 class="section-title"><i class="fas fa-user"></i> User Profile</h3>
-                <div class="setting-group">
-                    <label class="setting-label">Your Name</label>
-                    <input type="text" id="userName" class="setting-select" placeholder="Enter your name" value="Spelling Master">
+        <!-- Main Grid -->
+        <div class="main-grid">
+            <!-- Sidebar -->
+            <aside class="sidebar">
+                <!-- User Profile -->
+                <div class="sidebar-section">
+                    <h3 class="section-title"><i class="fas fa-user-astronaut"></i> User Profile</h3>
+                    <div class="form-group">
+                        <label class="form-label">Your Name</label>
+                        <input type="text" id="userName" class="form-input" placeholder="Enter your name" value="Spelling Master">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Experience Level</label>
+                        <select id="userLevel" class="form-select">
+                            <option value="beginner">🚀 Beginner</option>
+                            <option value="intermediate">⭐ Intermediate</option>
+                            <option value="advanced">👑 Advanced</option>
+                            <option value="expert">🏆 Expert</option>
+                        </select>
+                    </div>
+                    <button id="saveProfileBtn" class="audio-btn secondary mt-2">
+                        <i class="fas fa-save"></i> Save Profile
+                    </button>
                 </div>
-                <button id="saveProfileBtn" class="audio-btn secondary" style="margin-top: 15px; width: 100%;">
-                    <i class="fas fa-save"></i> Save Profile
-                </button>
-            </div>
 
-            <!-- Training Mode -->
-            <div class="sidebar-section">
-                <h3 class="section-title"><i class="fas fa-running"></i> Training Mode</h3>
-                <div class="setting-group">
-                    <label class="setting-label">Select Mode</label>
-                    <select id="trainingMode" class="setting-select">
-                        <option value="learning">Learning (Ordered)</option>
-                        <option value="practice">Practice (Random)</option>
-                        <option value="sentence">Sentence Practice</option>
-                        <option value="time">Time Mode</option>
-                        <option value="trini">Trini Mode</option>
-                    </select>
-                </div>
-                
-                <div class="setting-group">
-                    <label class="setting-label">Difficulty Level</label>
-                    <select id="difficultyLevel" class="setting-select">
-                        <option value="grade1">Grade 1</option>
-                        <option value="grade2">Grade 2</option>
-                        <option value="grade3">Grade 3</option>
-                        <option value="grade4">Grade 4</option>
-                        <option value="grade5">Grade 5</option>
-                        <option value="advanced">Advanced</option>
-                    </select>
-                </div>
-            </div>
+                <!-- Training Settings -->
+                <div class="sidebar-section">
+                    <h3 class="section-title"><i class="fas fa-cogs"></i> Training Settings</h3>
+                    <div class="form-group">
+                        <label class="form-label">Training Mode</label>
+                        <select id="trainingMode" class="form-select">
+                            <option value="learning">📚 Learning (Ordered)</option>
+                            <option value="practice">🎯 Practice (Random)</option>
+                            <option value="sentence">💬 Sentence Mastery</option>
+                            <option value="time">⏰ Time Challenge</option>
+                            <option value="trini">🇹🇹 Trini Mode</option>
+                        </select>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">Difficulty Level</label>
+                        <select id="difficultyLevel" class="form-select">
+                            <option value="grade1">Grade 1</option>
+                            <option value="grade2">Grade 2</option>
+                            <option value="grade3">Grade 3</option>
+                            <option value="grade4">Grade 4</option>
+                            <option value="grade5">Grade 5</option>
+                            <option value="grade6">Grade 6</option>
+                            <option value="advanced">Advanced</option>
+                        </select>
+                    </div>
 
-            <!-- TTS Settings -->
-            <div class="sidebar-section">
-                <h3 class="section-title"><i class="fas fa-volume-up"></i> TTS Settings</h3>
-                <div class="setting-group">
-                    <label class="setting-label">Voice</label>
-                    <select id="voiceSelect" class="setting-select">
-                        <!-- Voices will be populated dynamically -->
-                    </select>
-                </div>
-                
-                <div class="setting-group">
-                    <label class="setting-label">Rate <span id="rateValue" class="slider-value">1.0</span></label>
-                    <div class="slider-container">
-                        <input type="range" id="rateSlider" min="0.5" max="2" step="0.1" value="1">
+                    <div class="form-group">
+                        <label class="form-label">Words per Session</label>
+                        <select id="sessionLength" class="form-select">
+                            <option value="10">10 Words</option>
+                            <option value="15" selected>15 Words</option>
+                            <option value="20">20 Words</option>
+                            <option value="25">25 Words</option>
+                            <option value="custom">Custom</option>
+                        </select>
                     </div>
                 </div>
-                
-                <div class="setting-group">
-                    <label class="setting-label">Pitch <span id="pitchValue" class="slider-value">1.0</span></label>
-                    <div class="slider-container">
-                        <input type="range" id="pitchSlider" min="0.5" max="2" step="0.1" value="1">
+
+                <!-- ElevenLabs Configuration -->
+                <div class="elevenlabs-config">
+                    <div class="config-header">
+                        <i class="fas fa-robot"></i>
+                        <h3>ElevenLabs AI Voices</h3>
+                    </div>
+                    <p class="config-description">
+                        Enter your API key to unlock premium AI voices with human-like quality.
+                        Get your free API key from <a href="https://beta.elevenlabs.io" target="_blank" style="color: var(--primary-light);">beta.elevenlabs.io</a>
+                    </p>
+                    
+                    <div class="form-group">
+                        <label class="form-label">API Key</label>
+                        <input type="password" id="elevenlabsApiKey" class="form-input" placeholder="Enter your ElevenLabs API key">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label class="form-label">Voice Model</label>
+                        <select id="elevenlabsVoice" class="form-select">
+                            <option value="">Select a voice...</option>
+                            <!-- Voices will be loaded dynamically -->
+                        </select>
+                    </div>
+                    
+                    <div class="form-group">
+                        <div style="display: flex; gap: 10px;">
+                            <button id="testElevenlabsBtn" class="audio-btn secondary" style="flex: 1;">
+                                <i class="fas fa-play"></i> Test Voice
+                            </button>
+                            <button id="clearApiKeyBtn" class="audio-btn secondary" style="flex: 1;">
+                                <i class="fas fa-times"></i> Clear
+                            </button>
+                        </div>
                     </div>
                 </div>
-                
-                <button id="testVoiceBtn" class="audio-btn secondary" style="margin-top: 10px; width: 100%;">
-                    <i class="fas fa-play-circle"></i> Test Voice
-                </button>
-            </div>
 
-            <!-- Session Management -->
-            <div class="sidebar-section">
-                <h3 class="section-title"><i class="fas fa-history"></i> Session</h3>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                    <button id="saveSessionBtn" class="audio-btn secondary">
-                        <i class="fas fa-save"></i> Save
-                    </button>
-                    <button id="newSessionBtn" class="audio-btn secondary">
-                        <i class="fas fa-plus"></i> New
-                    </button>
+                <!-- Quick Stats -->
+                <div class="sidebar-section">
+                    <h3 class="section-title"><i class="fas fa-chart-line"></i> Quick Stats</h3>
+                    <div id="quickStats">
+                        <!-- Stats will be populated dynamically -->
+                    </div>
                 </div>
-            </div>
 
-            <!-- Performance Stats -->
-            <div class="sidebar-section">
-                <h3 class="section-title"><i class="fas fa-chart-bar"></i> Quick Stats</h3>
-                <div id="quickStats">
-                    <!-- Stats will be populated dynamically -->
+                <!-- Session Controls -->
+                <div class="sidebar-section">
+                    <h3 class="section-title"><i class="fas fa-gamepad"></i> Session Controls</h3>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <button id="saveSessionBtn" class="audio-btn secondary">
+                            <i class="fas fa-save"></i> Save
+                        </button>
+                        <button id="newSessionBtn" class="audio-btn secondary">
+                            <i class="fas fa-redo"></i> New
+                        </button>
+                    </div>
+                    <button id="exportDataBtn" class="audio-btn secondary mt-2" style="width: 100%;">
+                        <i class="fas fa-download"></i> Export Data
+                    </button>
                 </div>
-            </div>
-        </aside>
+            </aside>
 
-        <!-- Main Content -->
-        <main class="main-content">
-            <!-- Tab Navigation -->
-            <div class="tab-container">
+            <!-- Main Content -->
+            <main class="tab-container">
+                <!-- Tab Navigation -->
                 <div class="tab-header">
                     <button class="tab-button active" data-tab="game">
-                        <i class="fas fa-gamepad"></i> Spelling Game
+                        <i class="fas fa-spell-check"></i> Spelling Game
                     </button>
                     <button class="tab-button" data-tab="analytics">
-                        <i class="fas fa-chart-line"></i> Analytics
+                        <i class="fas fa-chart-bar"></i> Analytics
+                    </button>
+                    <button class="tab-button" data-tab="voices">
+                        <i class="fas fa-microphone-alt"></i> Voice Studio
                     </button>
-                    <button class="tab-button" data-tab="tts">
-                        <i class="fas fa-microphone-alt"></i> TTS Lab
+                    <button class="tab-button" data-tab="settings">
+                        <i class="fas fa-sliders-h"></i> Settings
                     </button>
                 </div>
 
@@ -1033,33 +1511,43 @@
                     <!-- Game Header -->
                     <div class="game-header">
                         <div class="progress-container">
-                            <div class="progress-bar">
-                                <div class="progress-fill" id="progressFill" style="width: 30%;"></div>
+                            <div class="progress-wrapper">
+                                <div class="progress-bar">
+                                    <div class="progress-fill" id="progressFill" style="width: 20%;"></div>
+                                </div>
+                                <div style="text-align: center; margin-top: 10px; color: var(--dark-muted);" id="progressText">
+                                    Word 3/15
+                                </div>
                             </div>
-                            <span id="progressText">Word 3/10</span>
                         </div>
                         
-                        <div class="stats-container">
-                            <div class="stat-box">
-                                <div class="stat-value" id="scoreValue">150</div>
-                                <div class="stat-label">Score</div>
+                        <div class="stats-grid">
+                            <div class="stat-card">
+                                <div class="stat-value" id="scoreValue">0</div>
+                                <div class="stat-label">SCORE</div>
                             </div>
-                            <div class="stat-box">
-                                <div class="stat-value" id="streakValue">3</div>
-                                <div class="stat-label">Streak</div>
+                            <div class="stat-card">
+                                <div class="stat-value" id="streakValue">0</div>
+                                <div class="stat-label">STREAK</div>
                             </div>
-                            <div class="stat-box">
-                                <div class="stat-value" id="accuracyValue">85%</div>
-                                <div class="stat-label">Accuracy</div>
+                            <div class="stat-card">
+                                <div class="stat-value" id="accuracyValue">0%</div>
+                                <div class="stat-label">ACCURACY</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-value" id="timeValue">0s</div>
+                                <div class="stat-label">TIME</div>
                             </div>
                         </div>
                     </div>
 
                     <!-- Word Display -->
                     <div class="word-display-container" id="wordDisplay">
-                        <div>
-                            <div class="word-display" id="currentWord">E _ U C _ T _ O N</div>
-                            <div class="word-context" id="wordContext">"The process of receiving or giving systematic instruction"</div>
+                        <div style="text-align: center;">
+                            <div class="word-display" id="currentWord">_ _ _ _ _ _ _ _</div>
+                            <div class="word-context" id="wordContext">
+                                Loading your first word...
+                            </div>
                         </div>
                     </div>
 
@@ -1068,23 +1556,28 @@
                         <button id="hearWordBtn" class="audio-btn">
                             <i class="fas fa-volume-up"></i> Hear Word (1)
                         </button>
-                        <button id="contextBtn" class="audio-btn secondary" disabled>
+                        <button id="contextBtn" class="audio-btn secondary">
                             <i class="fas fa-headphones"></i> Context (2)
                         </button>
                         <button id="spellOutBtn" class="audio-btn secondary">
                             <i class="fas fa-spell-check"></i> Spell Out (3)
                         </button>
                         <button id="slowSpeechBtn" class="audio-btn secondary">
-                            <i class="fas fa-tachometer-alt"></i> Slow Speech (4)
+                            <i class="fas fa-tachometer-alt"></i> Slow (4)
+                        </button>
+                        <button id="repeatBtn" class="audio-btn secondary">
+                            <i class="fas fa-redo"></i> Repeat (5)
                         </button>
                     </div>
 
                     <!-- Input Area -->
                     <div class="input-container">
-                        <label class="input-label">Type your answer:</label>
-                        <input type="text" id="answerInput" class="answer-input" placeholder="Type the word here... Press Enter to submit">
-                        <div class="hint-text" id="hintText" style="margin-top: 10px; color: var(--dark-muted); font-size: 0.9rem;">
-                            Hint: Press Enter to submit your answer
+                        <label class="input-label">Type your spelling:</label>
+                        <input type="text" id="answerInput" class="answer-input" 
+                               placeholder="Type the word here... Press Enter to submit"
+                               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                        <div class="hint-text" id="hintText">
+                            Hint: Press Enter to submit or Tab to get a hint
                         </div>
                     </div>
 
@@ -1099,6 +1592,9 @@
                         <button id="nextWordBtn" class="action-btn secondary" disabled>
                             <i class="fas fa-arrow-right"></i> Next Word (N)
                         </button>
+                        <button id="revealBtn" class="action-btn secondary">
+                            <i class="fas fa-eye"></i> Reveal Word (R)
+                        </button>
                     </div>
 
                     <!-- Feedback -->
@@ -1107,39 +1603,27 @@
 
                 <!-- Analytics Tab -->
                 <div class="tab-content" id="analytics-tab">
-                    <div class="dashboard-container">
+                    <div class="dashboard-grid">
                         <!-- Performance Overview -->
                         <div class="dashboard-card">
                             <h3><i class="fas fa-chart-pie"></i> Performance Overview</h3>
                             <div id="performanceChart">
                                 <!-- Chart will be rendered here -->
-                                <div style="display: flex; flex-direction: column; gap: 15px;">
-                                    <div>
-                                        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
-                                            <span>Perfect First Tries</span>
-                                            <span>65%</span>
-                                        </div>
-                                        <div style="height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;">
-                                            <div style="width: 65%; height: 100%; background: linear-gradient(90deg, var(--success), var(--secondary-light)); border-radius: 5px;"></div>
-                                        </div>
+                                <div style="height: 200px; display: flex; align-items: flex-end; gap: 10px; margin-top: 20px;">
+                                    <div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
+                                        <div style="width: 80%; background: linear-gradient(to top, var(--success), var(--secondary-light)); border-radius: 8px 8px 0 0; height: 80%;"></div>
+                                        <div style="margin-top: 10px; color: var(--dark-text); font-weight: 600;">Perfect</div>
+                                        <div style="color: var(--dark-muted); font-size: 0.9rem;">65%</div>
                                     </div>
-                                    <div>
-                                        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
-                                            <span>With Hints</span>
-                                            <span>25%</span>
-                                        </div>
-                                        <div style="height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;">
-                                            <div style="width: 25%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 5px;"></div>
-                                        </div>
+                                    <div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
+                                        <div style="width: 80%; background: linear-gradient(to top, var(--primary), var(--primary-light)); border-radius: 8px 8px 0 0; height: 50%;"></div>
+                                        <div style="margin-top: 10px; color: var(--dark-text); font-weight: 600;">Hint</div>
+                                        <div style="color: var(--dark-muted); font-size: 0.9rem;">25%</div>
                                     </div>
-                                    <div>
-                                        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
-                                            <span>Incorrect</span>
-                                            <span>10%</span>
-                                        </div>
-                                        <div style="height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;">
-                                            <div style="width: 10%; height: 100%; background: linear-gradient(90deg, var(--warning), #fbbf24); border-radius: 5px;"></div>
-                                        </div>
+                                    <div style="flex: 1; display: flex; flex-direction: column; align-items: center;">
+                                        <div style="width: 80%; background: linear-gradient(to top, var(--warning), var(--accent-light)); border-radius: 8px 8px 0 0; height: 20%;"></div>
+                                        <div style="margin-top: 10px; color: var(--dark-text); font-weight: 600;">Wrong</div>
+                                        <div style="color: var(--dark-muted); font-size: 0.9rem;">10%</div>
                                     </div>
                                 </div>
                             </div>
@@ -1171,77 +1655,40 @@
                     </div>
                 </div>
 
-                <!-- TTS Lab Tab -->
-                <div class="tab-content" id="tts-tab">
-                    <div class="dashboard-container">
-                        <!-- TTS Testing -->
+                <!-- Voice Studio Tab -->
+                <div class="tab-content" id="voices-tab">
+                    <div class="dashboard-grid">
+                        <!-- Voice Testing -->
                         <div class="dashboard-card">
-                            <h3><i class="fas fa-flask"></i> TTS Testing Lab</h3>
+                            <h3><i class="fas fa-flask"></i> Voice Testing Lab</h3>
                             <div style="margin-bottom: 20px;">
-                                <label class="setting-label">Test Text</label>
-                                <textarea id="testText" class="setting-select" style="height: 100px; resize: vertical;">Hello! Welcome to the Spelling Trainer Pro. This is a test of the text-to-speech system.</textarea>
+                                <label class="form-label">Test Text</label>
+                                <textarea id="testText" class="form-input" style="height: 120px; resize: vertical;">Welcome to Spelling Trainer Pro! This premium edition features cutting-edge text-to-speech technology with ElevenLabs AI voices. Test how different voices sound with your spelling words.</textarea>
                             </div>
-                            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px;">
                                 <button id="testTtsBtn" class="audio-btn">
-                                    <i class="fas fa-play"></i> Speak Text
+                                    <i class="fas fa-play"></i> Speak
                                 </button>
                                 <button id="stopTtsBtn" class="audio-btn secondary">
                                     <i class="fas fa-stop"></i> Stop
                                 </button>
-                                <button id="downloadTtsBtn" class="audio-btn secondary">
-                                    <i class="fas fa-download"></i> Download Audio
+                                <button id="downloadAudioBtn" class="audio-btn secondary">
+                                    <i class="fas fa-download"></i> Download
                                 </button>
                             </div>
-                        </div>
-
-                        <!-- Advanced TTS Settings -->
-                        <div class="dashboard-card">
-                            <h3><i class="fas fa-sliders-h"></i> Advanced TTS Settings</h3>
-                            <div class="tts-settings">
-                                <div>
-                                    <div class="setting-group">
-                                        <label class="setting-label">Voice Engine</label>
-                                        <select id="engineSelect" class="setting-select">
-                                            <option value="web-speech">Web Speech API</option>
-                                            <option value="azure">Azure Cognitive (Premium)</option>
-                                            <option value="google">Google Cloud TTS</option>
-                                            <option value="amazon">Amazon Polly</option>
-                                        </select>
-                                    </div>
-                                    
-                                    <div class="setting-group">
-                                        <label class="setting-label">Speech Style</label>
-                                        <select id="styleSelect" class="setting-select">
-                                            <option value="default">Default</option>
-                                            <option value="news">News Reading</option>
-                                            <option value="conversational">Conversational</option>
-                                            <option value="cheerful">Cheerful</option>
-                                            <option value="sad">Sad</option>
-                                            <option value="angry">Angry</option>
-                                        </select>
-                                    </div>
-                                </div>
-                                
-                                <div>
-                                    <div class="setting-group">
-                                        <label class="setting-label">Volume <span id="volumeValue" class="slider-value">1.0</span></label>
-                                        <div class="slider-container">
-                                            <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
-                                        </div>
-                                    </div>
-                                    
-                                    <div class="setting-group">
-                                        <div class="setting-label">
-                                            <input type="checkbox" id="autoPlayCheck" checked>
-                                            <label for="autoPlayCheck" style="display: inline; margin-left: 8px;">Auto-play word on new question</label>
-                                        </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label">Speech Settings</label>
+                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px;">
+                                    <div>
+                                        <div style="color: var(--dark-muted); font-size: 0.9rem; margin-bottom: 5px;">Speed</div>
+                                        <input type="range" id="speechRate" min="0.5" max="2" step="0.1" value="1" style="width: 100%;">
+                                        <div style="text-align: center; color: var(--primary-light); margin-top: 5px;" id="rateValue">1.0x</div>
                                     </div>
-                                    
-                                    <div class="setting-group">
-                                        <div class="setting-label">
-                                            <input type="checkbox" id="spellCheckCheck" checked>
-                                            <label for="spellCheckCheck" style="display: inline; margin-left: 8px;">Enable spell checking</label>
-                                        </div>
+                                    <div>
+                                        <div style="color: var(--dark-muted); font-size: 0.9rem; margin-bottom: 5px;">Pitch</div>
+                                        <input type="range" id="speechPitch" min="0.5" max="2" step="0.1" value="1" style="width: 100%;">
+                                        <div style="text-align: center; color: var(--primary-light); margin-top: 5px;" id="pitchValue">1.0</div>
                                     </div>
                                 </div>
                             </div>
@@ -1249,27 +1696,109 @@
 
                         <!-- Voice Gallery -->
                         <div class="dashboard-card">
-                            <h3><i class="fas fa-user-circle"></i> Voice Gallery</h3>
-                            <div id="voiceGallery" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
+                            <h3><i class="fas fa-users"></i> Voice Gallery</h3>
+                            <div id="voiceGallery" style="margin-top: 20px;">
                                 <!-- Voice cards will be populated dynamically -->
                             </div>
                         </div>
+
+                        <!-- Voice Comparison -->
+                        <div class="dashboard-card">
+                            <h3><i class="fas fa-balance-scale"></i> Voice Comparison</h3>
+                            <div id="voiceComparison">
+                                <!-- Comparison will be populated dynamically -->
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </main>
-    </div>
 
-    <!-- Session Complete Modal -->
-    <div class="modal-overlay" id="sessionCompleteModal">
-        <div class="modal">
-            <div class="modal-header">
-                <h2 class="modal-title">🎉 Session Complete!</h2>
-                <button class="modal-close" id="modalCloseBtn">&times;</button>
-            </div>
-            <div id="modalContent">
-                <!-- Content will be populated dynamically -->
-            </div>
+                <!-- Settings Tab -->
+                <div class="tab-content" id="settings-tab">
+                    <div class="dashboard-grid">
+                        <!-- Game Settings -->
+                        <div class="dashboard-card">
+                            <h3><i class="fas fa-gamepad"></i> Game Settings</h3>
+                            <div class="form-group">
+                                <label class="form-label" style="display: flex; align-items: center; gap: 10px;">
+                                    <input type="checkbox" id="autoPlayCheck" checked>
+                                    Auto-play word on new question
+                                </label>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" style="display: flex; align-items: center; gap: 10px;">
+                                    <input type="checkbox" id="soundEffectsCheck" checked>
+                                    Enable sound effects
+                                </label>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" style="display: flex; align-items: center; gap: 10px;">
+                                    <input type="checkbox" id="animationsCheck" checked>
+                                    Enable animations
+                                </label>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label" style="display: flex; align-items: center; gap: 10px;">
+                                    <input type="checkbox" id="hintsEnabledCheck" checked>
+                                    Enable hints
+                                </label>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Difficulty Adjustment</label>
+                                <select id="difficultyAdjustment" class="form-select">
+                                    <option value="auto">Auto-adjust based on performance</option>
+                                    <option value="fixed">Fixed difficulty</option>
+                                    <option value="progressive">Progressive difficulty</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <!-- Audio Settings -->
+                        <div class="dashboard-card">
+                            <h3><i class="fas fa-volume-up"></i> Audio Settings</h3>
+                            <div class="form-group">
+                                <label class="form-label">Default TTS Engine</label>
+                                <select id="ttsEngine" class="form-select">
+                                    <option value="web-speech">Web Speech API (Free)</option>
+                                    <option value="elevenlabs">ElevenLabs AI (Premium)</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Voice Gender</label>
+                                <select id="voiceGender" class="form-select">
+                                    <option value="any">Any</option>
+                                    <option value="male">Male</option>
+                                    <option value="female">Female</option>
+                                    <option value="neutral">Neutral</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Volume</label>
+                                <input type="range" id="masterVolume" min="0" max="1" step="0.1" value="0.8" style="width: 100%;">
+                                <div style="text-align: center; color: var(--primary-light); margin-top: 5px;" id="volumeValue">80%</div>
+                            </div>
+                        </div>
+
+                        <!-- Data Management -->
+                        <div class="dashboard-card">
+                            <h3><i class="fas fa-database"></i> Data Management</h3>
+                            <div style="display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px;">
+                                <button id="exportProgressBtn" class="audio-btn secondary">
+                                    <i class="fas fa-file-export"></i> Export Progress
+                                </button>
+                                <button id="importProgressBtn" class="audio-btn secondary">
+                                    <i class="fas fa-file-import"></i> Import Progress
+                                </button>
+                                <button id="clearDataBtn" class="audio-btn secondary">
+                                    <i class="fas fa-trash"></i> Clear All Data
+                                </button>
+                                <button id="resetSettingsBtn" class="audio-btn secondary">
+                                    <i class="fas fa-undo"></i> Reset Settings
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
         </div>
     </div>
 
@@ -1279,9 +1808,9 @@
         const AppState = {
             // Game State
             currentWordIndex: 0,
-            totalWords: 10,
-            score: 150,
-            streak: 3,
+            totalWords: 15,
+            score: 0,
+            streak: 0,
             attempts: 0,
             hintsUsed: 0,
             currentWord: "",
@@ -1290,72 +1819,84 @@
             revealedLetters: 0,
             isCorrect: false,
             isFirstTry: true,
+            startTime: null,
+            sessionTime: 0,
             
             // TTS State
+            ttsEngine: 'web-speech', // 'web-speech' or 'elevenlabs'
             voices: [],
             currentVoice: null,
             speechRate: 1.0,
             speechPitch: 1.0,
-            speechVolume: 1.0,
+            speechVolume: 0.8,
             isSpeaking: false,
-            speechUtterance: null,
+            
+            // ElevenLabs State
+            elevenlabsApiKey: localStorage.getItem('elevenlabsApiKey') || '',
+            elevenlabsVoices: [],
+            currentElevenlabsVoice: null,
+            isElevenlabsConfigured: false,
             
             // User Data
-            userName: "Spelling Master",
-            userLevel: "Beginner",
-            userXP: 450,
+            userName: localStorage.getItem('userName') || 'Spelling Master',
+            userLevel: localStorage.getItem('userLevel') || 'beginner',
+            userXP: parseInt(localStorage.getItem('userXP')) || 0,
             
             // Game Data
-            wordList: [
-                { word: "EDUCATION", context: "The process of receiving or giving systematic instruction" },
-                { word: "KNOWLEDGE", context: "Facts, information, and skills acquired through experience" },
-                { word: "LEARNING", context: "The acquisition of knowledge or skills through study" },
-                { word: "TEACHER", context: "A person who helps others to acquire knowledge" },
-                { word: "STUDENT", context: "A person who is studying at a school or college" },
-                { word: "SCHOOL", context: "An institution for educating children" },
-                { word: "UNIVERSITY", context: "An institution of higher education and research" },
-                { word: "LIBRARY", context: "A building or room containing collections of books" },
-                { word: "SCIENCE", context: "The systematic study of the structure and behavior of the physical world" },
-                { word: "MATHEMATICS", context: "The abstract science of number, quantity, and space" }
-            ],
+            wordLists: {
+                grade1: [],
+                grade2: [],
+                grade3: [],
+                grade4: [],
+                grade5: [],
+                grade6: [],
+                sentence1: [],
+                sentence2: [],
+                sentence3: [],
+                time: [],
+                trini: []
+            },
+            currentWordList: [],
             
             // Performance Data
             performance: {
-                totalWords: 45,
-                perfectFirstTries: 25,
-                hintCorrect: 15,
-                incorrect: 5,
-                totalTime: 1250, // seconds
-                averageTime: 28, // seconds per word
-                longestStreak: 8,
-                currentStreak: 3
+                totalSessions: parseInt(localStorage.getItem('totalSessions')) || 0,
+                totalWordsCompleted: parseInt(localStorage.getItem('totalWordsCompleted')) || 0,
+                perfectFirstTries: parseInt(localStorage.getItem('perfectFirstTries')) || 0,
+                hintCorrect: parseInt(localStorage.getItem('hintCorrect')) || 0,
+                incorrect: parseInt(localStorage.getItem('incorrect')) || 0,
+                totalTime: parseInt(localStorage.getItem('totalTime')) || 0,
+                longestStreak: parseInt(localStorage.getItem('longestStreak')) || 0,
+                currentStreak: 0
             },
             
             // Badges
             badges: [
-                { id: 1, name: "Perfect 10", description: "10 words perfect in a row", earned: true, icon: "🔟" },
-                { id: 2, name: "Word Explorer", description: "Completed 50 words", earned: true, icon: "📚" },
-                { id: 3, name: "Fast Learner", description: "<30s average per word", earned: true, icon: "⚡" },
-                { id: 4, name: "Accuracy Master", description: "90%+ accuracy", earned: false, icon: "🎯" },
-                { id: 5, name: "Perfect Session", description: "100% accuracy in a session", earned: false, icon: "💯" },
-                { id: 6, name: "Vocabulary King", description: "Completed 100 words", earned: false, icon: "👑" }
+                { id: 1, name: "Perfect 10", description: "10 words perfect in a row", earned: false, icon: "🔟", rarity: "common" },
+                { id: 2, name: "Word Explorer", description: "Completed 50 words", earned: false, icon: "📚", rarity: "common" },
+                { id: 3, name: "Fast Learner", description: "<30s average per word", earned: false, icon: "⚡", rarity: "uncommon" },
+                { id: 4, name: "Accuracy Master", description: "90%+ accuracy", earned: false, icon: "🎯", rarity: "rare" },
+                { id: 5, name: "Perfect Session", description: "100% accuracy in a session", earned: false, icon: "💯", rarity: "epic" },
+                { id: 6, name: "Vocabulary King", description: "Completed 100 words", earned: false, icon: "👑", rarity: "legendary" },
+                { id: 7, name: "Streak Master", description: "20+ perfect streak", earned: false, icon: "🔥", rarity: "rare" },
+                { id: 8, name: "Hint Free", description: "Complete session without hints", earned: false, icon: "💪", rarity: "uncommon" },
+                { id: 9, name: "Speed Demon", description: "<15s average per word", earned: false, icon: "🚀", rarity: "epic" },
+                { id: 10, name: "Consistency", description: "7 days streak", earned: false, icon: "📅", rarity: "rare" }
             ],
             
             // History
-            history: [
-                { word: "KNOWLEDGE", status: "perfect", attempts: 1, hints: 0, time: 24, timestamp: Date.now() - 3600000 },
-                { word: "EDUCATION", status: "perfect", attempts: 1, hints: 0, time: 32, timestamp: Date.now() - 7200000 },
-                { word: "LEARNING", status: "hint", attempts: 2, hints: 1, time: 45, timestamp: Date.now() - 10800000 },
-                { word: "TEACHER", status: "perfect", attempts: 1, hints: 0, time: 18, timestamp: Date.now() - 14400000 },
-                { word: "STUDENT", status: "perfect", attempts: 1, hints: 0, time: 22, timestamp: Date.now() - 18000000 }
-            ]
+            history: JSON.parse(localStorage.getItem('wordHistory')) || [],
+            sessionHistory: []
         };
 
         // Initialize the application
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
+            // Create starry background
+            createStars();
+            
             // Initialize components
-            initParticles();
-            initTTS();
+            await initTTS();
+            await loadWordLists();
             initGame();
             initUI();
             initEventListeners();
@@ -1366,145 +1907,158 @@
             updateQuickStats();
             renderBadges();
             renderHistory();
-            renderVoiceGallery();
             
-            // Show welcome toast
-            showToast('Welcome to Spelling Trainer Pro!', 'Get ready to master your spelling skills.', 'success');
+            // Show welcome
+            showToast('Welcome to Spelling Trainer Pro!', 'Get ready to master your spelling skills with premium AI voices.', 'success');
+            
+            // Start timer
+            AppState.startTime = Date.now();
+            startTimer();
         });
 
-        // Initialize particle background
-        function initParticles() {
-            const container = document.getElementById('particles');
-            const particleCount = 30;
+        // Create starry background
+        function createStars() {
+            const starsContainer = document.getElementById('stars');
+            const starCount = 150;
             
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
+            for (let i = 0; i < starCount; i++) {
+                const star = document.createElement('div');
+                star.className = 'star';
                 
                 // Random properties
                 const size = Math.random() * 3 + 1;
-                particle.style.width = `${size}px`;
-                particle.style.height = `${size}px`;
-                particle.style.left = `${Math.random() * 100}%`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.left = `${Math.random() * 100}%`;
+                star.style.top = `${Math.random() * 100}%`;
                 
                 // Random animation
-                const duration = Math.random() * 15 + 15;
-                particle.style.animationDuration = `${duration}s`;
-                particle.style.animationDelay = `${Math.random() * 5}s`;
+                const duration = Math.random() * 5 + 3;
+                const delay = Math.random() * 5;
+                star.style.setProperty('--duration', `${duration}s`);
+                star.style.setProperty('--delay', `${delay}s`);
                 
-                // Random color
-                const colors = [
-                    'rgba(129, 140, 248, 0.3)',
-                    'rgba(120, 119, 198, 0.3)',
-                    'rgba(52, 211, 153, 0.2)',
-                    'rgba(251, 191, 36, 0.2)'
-                ];
-                particle.style.background = colors[Math.floor(Math.random() * colors.length)];
-                particle.style.boxShadow = `0 0 ${size * 3}px currentColor`;
+                // Random opacity
+                star.style.opacity = Math.random() * 0.5 + 0.2;
                 
-                container.appendChild(particle);
+                starsContainer.appendChild(star);
             }
         }
 
         // Initialize TTS system
-        function initTTS() {
-            // Check if browser supports Web Speech API
+        async function initTTS() {
+            // Check browser support
             if (!('speechSynthesis' in window)) {
-                showToast('TTS Error', 'Your browser does not support text-to-speech functionality.', 'error');
+                showToast('TTS Error', 'Your browser does not support text-to-speech. Please use Chrome, Edge, or Safari.', 'error');
                 return;
             }
             
-            // Load available voices
-            speechSynthesis.addEventListener('voiceschanged', function() {
+            // Load Web Speech API voices
+            const loadVoices = () => {
                 AppState.voices = speechSynthesis.getVoices();
-                populateVoiceSelect();
-                
-                // Set default voice (prefer English voices)
-                const defaultVoice = AppState.voices.find(voice => 
-                    voice.lang.startsWith('en-') && voice.name.includes('Female')) || 
-                    AppState.voices.find(voice => voice.lang.startsWith('en-')) || 
-                    AppState.voices[0];
-                
-                if (defaultVoice) {
-                    AppState.currentVoice = defaultVoice;
-                    document.getElementById('voiceSelect').value = defaultVoice.voiceURI;
+                if (AppState.voices.length > 0) {
+                    // Set default voice
+                    const defaultVoice = AppState.voices.find(voice => 
+                        voice.lang.startsWith('en-') && voice.name.includes('Female')) || 
+                        AppState.voices.find(voice => voice.lang.startsWith('en-')) || 
+                        AppState.voices[0];
+                    
+                    if (defaultVoice) {
+                        AppState.currentVoice = defaultVoice;
+                    }
                 }
-            });
+            };
             
-            // Trigger voices loading
-            speechSynthesis.getVoices();
-        }
-
-        // Populate voice selection dropdown
-        function populateVoiceSelect() {
-            const voiceSelect = document.getElementById('voiceSelect');
-            voiceSelect.innerHTML = '';
+            // Load voices when they become available
+            if (speechSynthesis.getVoices().length > 0) {
+                loadVoices();
+            } else {
+                speechSynthesis.addEventListener('voiceschanged', loadVoices);
+            }
             
-            AppState.voices.forEach(voice => {
-                const option = document.createElement('option');
-                option.value = voice.voiceURI;
-                option.textContent = `${voice.name} (${voice.lang})`;
-                voiceSelect.appendChild(option);
-            });
+            // Check if ElevenLabs API key is available
+            if (AppState.elevenlabsApiKey) {
+                await loadElevenLabsVoices();
+            }
         }
 
-        // Render voice gallery
-        function renderVoiceGallery() {
-            const gallery = document.getElementById('voiceGallery');
-            if (!gallery || AppState.voices.length === 0) return;
-            
-            gallery.innerHTML = '';
-            
-            // Filter to show only English voices
-            const englishVoices = AppState.voices.filter(voice => voice.lang.startsWith('en-'));
-            
-            englishVoices.slice(0, 6).forEach(voice => {
-                const card = document.createElement('div');
-                card.className = 'badge';
-                card.style.cursor = 'pointer';
-                card.innerHTML = `
-                    <div class="badge-icon">🗣️</div>
-                    <div class="badge-name">${voice.name}</div>
-                    <div class="badge-desc">${voice.lang}</div>
-                `;
-                
-                card.addEventListener('click', function() {
-                    AppState.currentVoice = voice;
-                    document.getElementById('voiceSelect').value = voice.voiceURI;
-                    speakText(`Hello, I am ${voice.name}. I will be your voice for this session.`);
-                    showToast('Voice Changed', `Now using ${voice.name}`, 'success');
+        // Load ElevenLabs voices
+        async function loadElevenLabsVoices() {
+            try {
+                const response = await fetch('https://api.elevenlabs.io/v1/voices', {
+                    headers: {
+                        'xi-api-key': AppState.elevenlabsApiKey
+                    }
                 });
                 
-                gallery.appendChild(card);
+                if (response.ok) {
+                    const data = await response.json();
+                    AppState.elevenlabsVoices = data.voices || [];
+                    AppState.isElevenlabsConfigured = true;
+                    populateElevenLabsVoices();
+                    showToast('ElevenLabs Connected', 'Premium AI voices are now available!', 'success');
+                } else {
+                    showToast('ElevenLabs Error', 'Invalid API key. Please check your credentials.', 'error');
+                }
+            } catch (error) {
+                console.error('Failed to load ElevenLabs voices:', error);
+                showToast('Connection Error', 'Could not connect to ElevenLabs API.', 'error');
+            }
+        }
+
+        // Populate ElevenLabs voice dropdown
+        function populateElevenLabsVoices() {
+            const select = document.getElementById('elevenlabsVoice');
+            select.innerHTML = '<option value="">Select a voice...</option>';
+            
+            AppState.elevenlabsVoices.forEach(voice => {
+                const option = document.createElement('option');
+                option.value = voice.voice_id;
+                option.textContent = voice.name;
+                select.appendChild(option);
             });
+            
+            // Select first voice by default
+            if (AppState.elevenlabsVoices.length > 0) {
+                select.value = AppState.elevenlabsVoices[0].voice_id;
+                AppState.currentElevenlabsVoice = AppState.elevenlabsVoices[0].voice_id;
+            }
         }
 
-        // Speak text using TTS
-        function speakText(text, options = {}) {
+        // Speak text using selected TTS engine
+        async function speakText(text, options = {}) {
             // Stop any ongoing speech
             speechSynthesis.cancel();
             
-            // Create utterance
+            if (AppState.ttsEngine === 'elevenlabs' && AppState.isElevenlabsConfigured) {
+                await speakWithElevenLabs(text, options);
+            } else {
+                speakWithWebSpeech(text, options);
+            }
+        }
+
+        // Speak with Web Speech API
+        function speakWithWebSpeech(text, options = {}) {
             const utterance = new SpeechSynthesisUtterance(text);
             
             // Apply settings
-            utterance.voice = AppState.currentVoice;
+            if (AppState.currentVoice) {
+                utterance.voice = AppState.currentVoice;
+            }
             utterance.rate = options.rate || AppState.speechRate;
             utterance.pitch = options.pitch || AppState.speechPitch;
             utterance.volume = options.volume || AppState.speechVolume;
             
             // Event handlers
-            utterance.onstart = function() {
+            utterance.onstart = () => {
                 AppState.isSpeaking = true;
-                AppState.speechUtterance = utterance;
             };
             
-            utterance.onend = function() {
+            utterance.onend = () => {
                 AppState.isSpeaking = false;
-                AppState.speechUtterance = null;
             };
             
-            utterance.onerror = function(event) {
+            utterance.onerror = (event) => {
                 console.error('Speech synthesis error:', event);
                 AppState.isSpeaking = false;
                 showToast('Speech Error', 'Could not speak the text. Please try again.', 'error');
@@ -1514,35 +2068,203 @@
             speechSynthesis.speak(utterance);
         }
 
-        // Spell out a word letter by letter
-        function spellOutWord(word) {
-            const letters = word.split('');
-            let fullText = '';
+        // Speak with ElevenLabs
+        async function speakWithElevenLabs(text, options = {}) {
+            try {
+                const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${AppState.currentElevenlabsVoice}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'xi-api-key': AppState.elevenlabsApiKey
+                    },
+                    body: JSON.stringify({
+                        text: text,
+                        model_id: 'eleven_monolingual_v1',
+                        voice_settings: {
+                            stability: 0.5,
+                            similarity_boost: 0.75,
+                            speed: options.rate || AppState.speechRate
+                        }
+                    })
+                });
+                
+                if (response.ok) {
+                    const audioBlob = await response.blob();
+                    const audioUrl = URL.createObjectURL(audioBlob);
+                    const audio = new Audio(audioUrl);
+                    
+                    audio.volume = options.volume || AppState.speechVolume;
+                    
+                    audio.onplay = () => {
+                        AppState.isSpeaking = true;
+                    };
+                    
+                    audio.onended = () => {
+                        AppState.isSpeaking = false;
+                        URL.revokeObjectURL(audioUrl);
+                    };
+                    
+                    audio.onerror = () => {
+                        AppState.isSpeaking = false;
+                        showToast('Playback Error', 'Could not play the audio.', 'error');
+                    };
+                    
+                    audio.play();
+                } else {
+                    throw new Error('API request failed');
+                }
+            } catch (error) {
+                console.error('ElevenLabs TTS error:', error);
+                // Fall back to Web Speech API
+                speakWithWebSpeech(text, options);
+                showToast('ElevenLabs Failed', 'Falling back to standard TTS.', 'warning');
+            }
+        }
+
+        // Load word lists from files
+        async function loadWordLists() {
+            const files = [
+                'grade1.txt', 'grade2.txt', 'grade3.txt', 'grade4.txt', 'grade5.txt', 'grade6.txt',
+                'sent1.txt', 'sentence2.txt', 'sentence3.txt', 'time.txt', 'trini.txt'
+            ];
+            
+            for (const file of files) {
+                try {
+                    const response = await fetch(`lists/${file}`);
+                    if (response.ok) {
+                        const text = await response.text();
+                        const words = parseWordList(text);
+                        const key = file.replace('.txt', '').replace('sentence', 'sentence');
+                        AppState.wordLists[key] = words;
+                    }
+                } catch (error) {
+                    console.error(`Failed to load ${file}:`, error);
+                    // Use fallback data if files can't be loaded
+                    AppState.wordLists[file.replace('.txt', '')] = getFallbackWordList(file);
+                }
+            }
             
-            letters.forEach((letter, index) => {
-                fullText += letter;
-                if (index < letters.length - 1) fullText += '. ';
-            });
+            // Set initial word list
+            AppState.currentWordList = AppState.wordLists.grade1;
+        }
+
+        // Parse word list text
+        function parseWordList(text) {
+            const lines = text.split('\n');
+            const words = [];
             
-            fullText += '.';
-            speakText(fullText, { rate: 0.8 });
+            for (const line of lines) {
+                if (line.trim()) {
+                    const parts = line.split('|');
+                    if (parts.length >= 1) {
+                        const word = parts[0].trim();
+                        const context = parts.length > 1 ? parts[1].trim() : '';
+                        if (word) {
+                            words.push({ word, context });
+                        }
+                    }
+                }
+            }
+            
+            return words;
+        }
+
+        // Get fallback word list if files can't be loaded
+        function getFallbackWordList(file) {
+            // Return some sample words based on file name
+            const fallbackWords = {
+                grade1: [
+                    { word: "CAT", context: "The cat sat on the mat." },
+                    { word: "DOG", context: "The dog ran in the yard." },
+                    { word: "SUN", context: "The sun is bright today." }
+                ],
+                grade2: [
+                    { word: "APPLE", context: "She ate an apple." },
+                    { word: "CHAIR", context: "Sit on the chair." },
+                    { word: "HOUSE", context: "They live in a big house." }
+                ],
+                // Add more fallback lists as needed
+            };
+            
+            const key = file.replace('.txt', '');
+            return fallbackWords[key] || fallbackWords.grade1;
         }
 
         // Initialize game state
         function initGame() {
-            // Set initial word
-            const currentWordData = AppState.wordList[AppState.currentWordIndex];
-            AppState.currentWord = currentWordData.word;
-            AppState.currentContext = currentWordData.context;
+            const mode = document.getElementById('trainingMode').value;
+            const difficulty = document.getElementById('difficultyLevel').value;
+            
+            // Select appropriate word list
+            let wordListKey = difficulty;
+            if (mode === 'sentence') {
+                wordListKey = 'sent1'; // Default to sentence1
+            } else if (mode === 'time') {
+                wordListKey = 'time';
+            } else if (mode === 'trini') {
+                wordListKey = 'trini';
+            }
+            
+            AppState.currentWordList = AppState.wordLists[wordListKey] || AppState.wordLists.grade1;
+            
+            // Set session length
+            AppState.totalWords = parseInt(document.getElementById('sessionLength').value);
+            if (isNaN(AppState.totalWords) || AppState.totalWords > AppState.currentWordList.length) {
+                AppState.totalWords = Math.min(15, AppState.currentWordList.length);
+            }
+            
+            // Reset game state
+            AppState.currentWordIndex = 0;
+            AppState.score = 0;
+            AppState.streak = 0;
+            AppState.sessionTime = 0;
+            AppState.performance.currentStreak = 0;
+            AppState.sessionHistory = [];
+            
+            // Shuffle if in practice mode
+            if (mode === 'practice') {
+                shuffleArray(AppState.currentWordList);
+            }
+            
+            // Update UI
+            updateUI();
+        }
+
+        // Load current word
+        function loadWord() {
+            if (AppState.currentWordIndex >= AppState.currentWordList.length) {
+                showSessionCompleteModal();
+                return;
+            }
+            
+            const wordData = AppState.currentWordList[AppState.currentWordIndex];
+            AppState.currentWord = wordData.word.toUpperCase();
+            AppState.currentContext = wordData.context;
             AppState.maskedWord = maskWord(AppState.currentWord, 0);
             AppState.revealedLetters = 0;
             AppState.isCorrect = false;
             AppState.isFirstTry = true;
             AppState.attempts = 0;
             AppState.hintsUsed = 0;
+            
+            // Update display
+            document.getElementById('currentWord').textContent = AppState.maskedWord;
+            document.getElementById('wordContext').textContent = AppState.currentContext || "No context available for this word.";
+            document.getElementById('wordDisplay').className = 'word-display-container';
+            document.getElementById('feedbackContainer').className = 'feedback-container';
+            document.getElementById('answerInput').value = '';
+            document.getElementById('nextWordBtn').disabled = true;
+            
+            // Auto-play if enabled
+            if (document.getElementById('autoPlayCheck')?.checked) {
+                setTimeout(() => speakText(AppState.currentWord), 500);
+            }
+            
+            // Update progress
+            updateProgress();
         }
 
-        // Mask a word (hide some letters)
+        // Mask word for display
         function maskWord(word, revealed) {
             return word.split('').map((char, index) => {
                 if (char === ' ') return ' ';
@@ -1550,15 +2272,7 @@
             }).join(' ');
         }
 
-        // Load a new word
-        function loadWord() {
-            // Auto-play the word if setting is enabled
-            if (document.getElementById('autoPlayCheck')?.checked) {
-                setTimeout(() => speakText(AppState.currentWord), 500);
-            }
-        }
-
-        // Check the user's answer
+        // Check answer
         function checkAnswer() {
             const input = document.getElementById('answerInput');
             const userAnswer = input.value.trim().toUpperCase();
@@ -1571,10 +2285,8 @@
             AppState.attempts++;
             
             if (userAnswer === AppState.currentWord) {
-                // Correct answer
                 handleCorrectAnswer();
             } else {
-                // Incorrect answer
                 handleIncorrectAnswer();
             }
         }
@@ -1584,23 +2296,54 @@
             AppState.isCorrect = true;
             AppState.isFirstTry = AppState.attempts === 1 && AppState.hintsUsed === 0;
             
-            // Update score
+            // Calculate points
+            let points = 0;
             if (AppState.isFirstTry) {
-                AppState.score += 10;
+                points = 10;
                 AppState.streak++;
+                AppState.performance.currentStreak++;
                 playRewardSound('perfect');
-                showFeedback('✅ Perfect! +10 points', 'correct');
+                showFeedback('🎉 Perfect! +10 points', 'correct');
             } else {
-                AppState.score += 5;
+                points = 5;
+                AppState.streak = 0;
                 playRewardSound('ding');
                 showFeedback('✅ Correct! +5 points', 'correct');
             }
             
+            // Update score
+            AppState.score += points;
+            
             // Update performance data
+            AppState.performance.totalWordsCompleted++;
             if (AppState.isFirstTry) {
                 AppState.performance.perfectFirstTries++;
+            } else {
+                AppState.performance.hintCorrect++;
             }
             
+            // Update longest streak
+            if (AppState.performance.currentStreak > AppState.performance.longestStreak) {
+                AppState.performance.longestStreak = AppState.performance.currentStreak;
+            }
+            
+            // Add to history
+            const historyItem = {
+                word: AppState.currentWord,
+                status: AppState.isFirstTry ? 'perfect' : 'hint',
+                attempts: AppState.attempts,
+                hints: AppState.hintsUsed,
+                time: Math.floor((Date.now() - AppState.startTime) / 1000),
+                timestamp: Date.now(),
+                points: points
+            };
+            
+            AppState.history.unshift(historyItem);
+            AppState.sessionHistory.push(historyItem);
+            
+            // Save to localStorage
+            localStorage.setItem('wordHistory', JSON.stringify(AppState.history.slice(0, 100))); // Keep last 100
+            
             // Enable next word button
             document.getElementById('nextWordBtn').disabled = false;
             
@@ -1610,9 +2353,11 @@
             
             // Update UI
             updateUI();
+            updateQuickStats();
+            renderHistory();
             
-            // Play celebration animation
-            celebrate();
+            // Check for badges
+            checkBadges();
             
             // Auto-advance after 2 seconds
             setTimeout(() => {
@@ -1625,23 +2370,25 @@
         // Handle incorrect answer
         function handleIncorrectAnswer() {
             AppState.isFirstTry = false;
+            AppState.streak = 0;
+            AppState.performance.currentStreak = 0;
+            
             showFeedback('❌ Incorrect. Try again!', 'incorrect');
             document.getElementById('wordDisplay').classList.add('incorrect');
             
-            // Reset streak
-            AppState.streak = 0;
-            
-            // Update UI
-            updateUI();
+            // Update performance
+            AppState.performance.incorrect++;
             
             // Clear input after a delay
             setTimeout(() => {
                 document.getElementById('answerInput').value = '';
                 document.getElementById('answerInput').focus();
             }, 1000);
+            
+            updateUI();
         }
 
-        // Show feedback message
+        // Show feedback
         function showFeedback(message, type) {
             const feedback = document.getElementById('feedbackContainer');
             feedback.textContent = message;
@@ -1655,71 +2402,30 @@
 
         // Play reward sound
         function playRewardSound(type) {
-            // In a real implementation, you would play actual audio files
-            // For this demo, we'll just log and show a toast
+            if (!document.getElementById('soundEffectsCheck')?.checked) return;
+            
+            const audio = new Audio();
             if (type === 'perfect') {
-                showToast('Perfect!', 'First try correct!', 'success');
+                audio.src = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ';
+                showToast('Perfect!', 'First try correct! Amazing work!', 'success');
             } else {
-                showToast('Good job!', 'Correct answer!', 'success');
+                audio.src = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ';
+                showToast('Good job!', 'Correct answer! Keep going!', 'success');
             }
-        }
-
-        // Celebration animation
-        function celebrate() {
-            const wordDisplay = document.getElementById('wordDisplay');
-            wordDisplay.classList.add('animate__animated', 'animate__tada');
             
-            setTimeout(() => {
-                wordDisplay.classList.remove('animate__animated', 'animate__tada');
-            }, 1000);
+            audio.volume = AppState.speechVolume;
+            audio.play().catch(e => console.log('Audio play failed:', e));
         }
 
         // Move to next word
         function nextWord() {
-            // Save current word to history
-            const historyItem = {
-                word: AppState.currentWord,
-                status: AppState.isFirstTry ? 'perfect' : 'hint',
-                attempts: AppState.attempts,
-                hints: AppState.hintsUsed,
-                time: Math.floor(Math.random() * 30) + 15,
-                timestamp: Date.now()
-            };
-            
-            AppState.history.unshift(historyItem);
-            
-            // Update word index
             AppState.currentWordIndex++;
             
             if (AppState.currentWordIndex >= AppState.totalWords) {
-                // Session complete
                 showSessionCompleteModal();
                 return;
             }
             
-            // Load new word
-            const currentWordData = AppState.wordList[AppState.currentWordIndex];
-            AppState.currentWord = currentWordData.word;
-            AppState.currentContext = currentWordData.context;
-            AppState.maskedWord = maskWord(AppState.currentWord, 0);
-            AppState.revealedLetters = 0;
-            AppState.isCorrect = false;
-            AppState.isFirstTry = true;
-            AppState.attempts = 0;
-            AppState.hintsUsed = 0;
-            
-            // Reset UI
-            document.getElementById('nextWordBtn').disabled = true;
-            document.getElementById('wordDisplay').classList.remove('correct', 'incorrect');
-            document.getElementById('answerInput').value = '';
-            document.getElementById('feedbackContainer').className = 'feedback-container';
-            document.getElementById('contextBtn').disabled = !AppState.currentContext;
-            
-            // Update UI
-            updateUI();
-            renderHistory();
-            
-            // Load and speak new word
             loadWord();
         }
 
@@ -1728,135 +2434,172 @@
             const modal = document.getElementById('sessionCompleteModal');
             const content = document.getElementById('modalContent');
             
+            // Calculate session stats
+            const perfectCount = AppState.sessionHistory.filter(item => item.status === 'perfect').length;
+            const accuracy = AppState.sessionHistory.length > 0 ? 
+                Math.round((perfectCount / AppState.sessionHistory.length) * 100) : 0;
+            
             content.innerHTML = `
                 <div style="text-align: center; padding: 20px 0;">
-                    <div style="font-size: 4rem; margin-bottom: 20px;">🏆</div>
-                    <h3 style="color: var(--primary-light); margin-bottom: 15px;">Amazing Work!</h3>
-                    <p style="margin-bottom: 25px; color: var(--dark-muted);">You've completed all ${AppState.totalWords} words in this session.</p>
+                    <div style="font-size: 4rem; margin-bottom: 20px; animation: bounce 1s infinite alternate;">🏆</div>
+                    <h3 style="color: var(--primary-light); margin-bottom: 15px; font-size: 2rem;">Session Complete!</h3>
+                    <p style="margin-bottom: 30px; color: var(--dark-muted); font-size: 1.1rem;">
+                        You've completed ${AppState.totalWords} words with amazing skill!
+                    </p>
                     
                     <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px;">
-                        <div class="stat-box">
-                            <div class="stat-value">${AppState.score}</div>
+                        <div class="stat-card" style="background: rgba(16, 185, 129, 0.1);">
+                            <div class="stat-value" style="color: var(--success);">${AppState.score}</div>
                             <div class="stat-label">Total Score</div>
                         </div>
-                        <div class="stat-box">
-                            <div class="stat-value">${AppState.streak}</div>
-                            <div class="stat-label">Final Streak</div>
+                        <div class="stat-card" style="background: rgba(139, 92, 246, 0.1);">
+                            <div class="stat-value" style="color: var(--primary-light);">${accuracy}%</div>
+                            <div class="stat-label">Accuracy</div>
                         </div>
-                        <div class="stat-box">
-                            <div class="stat-value">${AppState.performance.perfectFirstTries}</div>
+                        <div class="stat-card" style="background: rgba(245, 158, 11, 0.1);">
+                            <div class="stat-value" style="color: var(--warning);">${perfectCount}</div>
                             <div class="stat-label">Perfect Words</div>
                         </div>
-                        <div class="stat-box">
-                            <div class="stat-value">${Math.floor(AppState.performance.totalTime / 60)}m</div>
+                        <div class="stat-card" style="background: rgba(99, 102, 241, 0.1);">
+                            <div class="stat-value" style="color: var(--primary);">${Math.floor(AppState.sessionTime / 60)}m</div>
                             <div class="stat-label">Time Spent</div>
                         </div>
                     </div>
                     
-                    <div style="display: flex; gap: 15px; justify-content: center;">
-                        <button id="newSessionModalBtn" class="audio-btn" style="min-width: 150px;">
+                    <div style="background: rgba(15, 15, 35, 0.5); border-radius: 16px; padding: 20px; margin-bottom: 30px;">
+                        <h4 style="color: var(--accent); margin-bottom: 15px; font-family: 'Orbitron', sans-serif;">New Badges Earned</h4>
+                        <div id="newBadges" style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
+                            <!-- New badges will be shown here -->
+                        </div>
+                    </div>
+                    
+                    <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
+                        <button id="newSessionModalBtn" class="audio-btn" style="min-width: 180px;">
                             <i class="fas fa-redo"></i> New Session
                         </button>
-                        <button id="reviewSessionBtn" class="audio-btn secondary" style="min-width: 150px;">
-                            <i class="fas fa-chart-bar"></i> Review
+                        <button id="reviewSessionBtn" class="audio-btn secondary" style="min-width: 180px;">
+                            <i class="fas fa-chart-bar"></i> Review Analytics
+                        </button>
+                        <button id="shareResultsBtn" class="audio-btn secondary" style="min-width: 180px;">
+                            <i class="fas fa-share"></i> Share Results
                         </button>
                     </div>
                 </div>
             `;
             
+            // Check for new badges
+            checkNewBadges();
+            
             modal.classList.add('active');
             
-            // Add event listeners to modal buttons
+            // Add event listeners
             document.getElementById('newSessionModalBtn').addEventListener('click', function() {
                 startNewSession();
                 modal.classList.remove('active');
             });
             
             document.getElementById('reviewSessionBtn').addEventListener('click', function() {
-                // Switch to analytics tab
                 switchTab('analytics');
                 modal.classList.remove('active');
             });
+            
+            document.getElementById('shareResultsBtn').addEventListener('click', function() {
+                shareResults();
+            });
         }
 
-        // Start a new session
-        function startNewSession() {
-            // Reset game state
-            AppState.currentWordIndex = 0;
-            AppState.score = 0;
-            AppState.streak = 0;
-            
-            // Shuffle word list for new session
-            if (document.getElementById('trainingMode').value === 'practice') {
-                shuffleArray(AppState.wordList);
+        // Check for new badges
+        function checkNewBadges() {
+            const newBadgesContainer = document.getElementById('newBadges');
+            if (!newBadgesContainer) return;
+            
+            const newBadges = AppState.badges.filter(badge => 
+                !badge.earned && checkBadgeCriteria(badge.id)
+            );
+            
+            if (newBadges.length > 0) {
+                newBadges.forEach(badge => {
+                    badge.earned = true;
+                    const badgeElement = document.createElement('div');
+                    badgeElement.className = 'badge earned';
+                    badgeElement.style.animation = 'popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
+                    badgeElement.innerHTML = `
+                        <div class="badge-icon">${badge.icon}</div>
+                        <div class="badge-name">${badge.name}</div>
+                    `;
+                    newBadgesContainer.appendChild(badgeElement);
+                });
+                
+                // Save badges to localStorage
+                localStorage.setItem('badges', JSON.stringify(AppState.badges));
+            } else {
+                newBadgesContainer.innerHTML = '<p style="color: var(--dark-muted);">No new badges this time. Keep practicing!</p>';
             }
-            
-            // Load first word
-            const currentWordData = AppState.wordList[AppState.currentWordIndex];
-            AppState.currentWord = currentWordData.word;
-            AppState.currentContext = currentWordData.context;
-            AppState.maskedWord = maskWord(AppState.currentWord, 0);
-            AppState.revealedLetters = 0;
-            AppState.isCorrect = false;
-            AppState.isFirstTry = true;
-            AppState.attempts = 0;
-            AppState.hintsUsed = 0;
-            
-            // Reset UI
-            document.getElementById('nextWordBtn').disabled = true;
-            document.getElementById('wordDisplay').classList.remove('correct', 'incorrect');
-            document.getElementById('answerInput').value = '';
-            document.getElementById('feedbackContainer').className = 'feedback-container';
-            document.getElementById('contextBtn').disabled = !AppState.currentContext;
-            
-            // Update UI
-            updateUI();
-            
-            // Load and speak new word
-            loadWord();
-            
-            showToast('New Session', 'Started a new spelling session!', 'success');
         }
 
-        // Helper function to shuffle array
-        function shuffleArray(array) {
-            for (let i = array.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [array[i], array[j]] = [array[j], array[i]];
+        // Check badge criteria
+        function checkBadgeCriteria(badgeId) {
+            switch(badgeId) {
+                case 1: // Perfect 10
+                    return AppState.performance.currentStreak >= 10;
+                case 2: // Word Explorer
+                    return AppState.performance.totalWordsCompleted >= 50;
+                case 3: // Fast Learner
+                    return AppState.performance.totalWordsCompleted > 0 && 
+                           (AppState.performance.totalTime / AppState.performance.totalWordsCompleted) < 30;
+                case 4: // Accuracy Master
+                    return AppState.performance.totalWordsCompleted > 0 && 
+                           (AppState.performance.perfectFirstTries / AppState.performance.totalWordsCompleted) >= 0.9;
+                case 5: // Perfect Session
+                    return AppState.sessionHistory.length > 0 && 
+                           AppState.sessionHistory.every(item => item.status === 'perfect');
+                case 6: // Vocabulary King
+                    return AppState.performance.totalWordsCompleted >= 100;
+                case 7: // Streak Master
+                    return AppState.performance.currentStreak >= 20;
+                case 8: // Hint Free
+                    return AppState.sessionHistory.length > 0 && 
+                           AppState.sessionHistory.every(item => item.hints === 0);
+                case 9: // Speed Demon
+                    return AppState.performance.totalWordsCompleted > 0 && 
+                           (AppState.performance.totalTime / AppState.performance.totalWordsCompleted) < 15;
+                case 10: // Consistency
+                    // This would require tracking daily streak
+                    return false;
+                default:
+                    return false;
             }
-            return array;
         }
 
-        // Give a hint (reveal a letter)
-        function giveHint() {
-            if (AppState.revealedLetters >= AppState.currentWord.length) return;
-            
-            AppState.revealedLetters++;
-            AppState.hintsUsed++;
+        // Start a new session
+        function startNewSession() {
+            // Update performance data
+            AppState.performance.totalSessions++;
+            AppState.performance.totalTime += AppState.sessionTime;
             
-            // Update masked word
-            AppState.maskedWord = maskWord(AppState.currentWord, AppState.revealedLetters);
-            document.getElementById('currentWord').textContent = AppState.maskedWord;
+            // Save to localStorage
+            savePerformanceData();
             
-            // Update score (penalty for using hint)
-            if (AppState.isFirstTry) {
-                AppState.score = Math.max(0, AppState.score - 2);
-            }
+            // Reset for new session
+            initGame();
+            loadWord();
             
-            updateUI();
+            // Reset timer
+            AppState.startTime = Date.now();
+            AppState.sessionTime = 0;
             
-            // Speak the revealed letter
-            const revealedLetter = AppState.currentWord[AppState.revealedLetters - 1];
-            speakText(`The ${ordinalSuffix(AppState.revealedLetters)} letter is ${revealedLetter}`, { rate: 0.9 });
+            showToast('New Session', 'Started a new spelling session! Good luck!', 'success');
         }
 
-        // Helper function for ordinal suffix
-        function ordinalSuffix(i) {
-            const j = i % 10, k = i % 100;
-            if (j === 1 && k !== 11) return i + "st";
-            if (j === 2 && k !== 12) return i + "nd";
-            if (j === 3 && k !== 13) return i + "rd";
-            return i + "th";
+        // Save performance data to localStorage
+        function savePerformanceData() {
+            localStorage.setItem('totalSessions', AppState.performance.totalSessions);
+            localStorage.setItem('totalWordsCompleted', AppState.performance.totalWordsCompleted);
+            localStorage.setItem('perfectFirstTries', AppState.performance.perfectFirstTries);
+            localStorage.setItem('hintCorrect', AppState.performance.hintCorrect);
+            localStorage.setItem('incorrect', AppState.performance.incorrect);
+            localStorage.setItem('totalTime', AppState.performance.totalTime);
+            localStorage.setItem('longestStreak', AppState.performance.longestStreak);
         }
 
         // Update UI elements
@@ -1864,52 +2607,70 @@
             // Update progress
             const progressPercent = (AppState.currentWordIndex / AppState.totalWords) * 100;
             document.getElementById('progressFill').style.width = `${progressPercent}%`;
-            document.getElementById('progressText').textContent = `Word ${AppState.currentWordIndex + 1}/${AppState.totalWords}`;
+            document.getElementById('progressText').textContent = 
+                `Word ${AppState.currentWordIndex + 1}/${AppState.totalWords}`;
             
             // Update stats
             document.getElementById('scoreValue').textContent = AppState.score;
             document.getElementById('streakValue').textContent = AppState.streak;
             
             // Calculate accuracy
-            const accuracy = AppState.currentWordIndex > 0 ? 
-                Math.round((AppState.performance.perfectFirstTries / AppState.currentWordIndex) * 100) : 0;
+            const totalAttempts = AppState.performance.perfectFirstTries + AppState.performance.hintCorrect + AppState.performance.incorrect;
+            const accuracy = totalAttempts > 0 ? 
+                Math.round(((AppState.performance.perfectFirstTries + AppState.performance.hintCorrect) / totalAttempts) * 100) : 0;
             document.getElementById('accuracyValue').textContent = `${accuracy}%`;
             
-            // Update word display
+            // Update time
+            document.getElementById('timeValue').textContent = `${Math.floor(AppState.sessionTime)}s`;
+            
+            // Update word display if not correct
             if (!AppState.isCorrect) {
                 document.getElementById('currentWord').textContent = AppState.maskedWord;
             }
             
-            // Update context
-            document.getElementById('wordContext').textContent = AppState.currentContext ? 
-                `"${AppState.currentContext}"` : "No context available for this word";
-            
-            // Update button states
+            // Update context button
             document.getElementById('contextBtn').disabled = !AppState.currentContext;
+            
+            // Update hint button
             document.getElementById('hintBtn').disabled = AppState.isCorrect || AppState.revealedLetters >= AppState.currentWord.length;
         }
 
+        // Update progress
+        function updateProgress() {
+            const progressPercent = (AppState.currentWordIndex / AppState.totalWords) * 100;
+            document.getElementById('progressFill').style.width = `${progressPercent}%`;
+            document.getElementById('progressText').textContent = 
+                `Word ${AppState.currentWordIndex + 1}/${AppState.totalWords}`;
+        }
+
         // Update quick stats in sidebar
         function updateQuickStats() {
             const container = document.getElementById('quickStats');
             if (!container) return;
             
+            const accuracy = AppState.performance.totalWordsCompleted > 0 ? 
+                Math.round((AppState.performance.perfectFirstTries / AppState.performance.totalWordsCompleted) * 100) : 0;
+            
             container.innerHTML = `
-                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <span style="color: var(--dark-muted);">Level:</span>
-                    <span style="color: var(--primary-light); font-weight: 600;">${AppState.userLevel}</span>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center;">
+                    <span style="color: var(--dark-muted); font-size: 0.9rem;">Level:</span>
+                    <span style="color: var(--primary-light); font-weight: 600; font-size: 0.95rem;">${AppState.userLevel.toUpperCase()}</span>
                 </div>
-                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <span style="color: var(--dark-muted);">XP:</span>
-                    <span style="color: var(--primary-light); font-weight: 600;">${AppState.userXP}</span>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center;">
+                    <span style="color: var(--dark-muted); font-size: 0.9rem;">XP:</span>
+                    <span style="color: var(--primary-light); font-weight: 600; font-size: 0.95rem;">${AppState.userXP}</span>
                 </div>
-                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <span style="color: var(--dark-muted);">Words Today:</span>
-                    <span style="color: var(--primary-light); font-weight: 600;">${AppState.performance.totalWords}</span>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center;">
+                    <span style="color: var(--dark-muted); font-size: 0.9rem;">Words:</span>
+                    <span style="color: var(--primary-light); font-weight: 600; font-size: 0.95rem;">${AppState.performance.totalWordsCompleted}</span>
                 </div>
-                <div style="display: flex; justify-content: space-between;">
-                    <span style="color: var(--dark-muted);">Best Streak:</span>
-                    <span style="color: var(--primary-light); font-weight: 600;">${AppState.performance.longestStreak}</span>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center;">
+                    <span style="color: var(--dark-muted); font-size: 0.9rem;">Accuracy:</span>
+                    <span style="color: var(--primary-light); font-weight: 600; font-size: 0.95rem;">${accuracy}%</span>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <span style="color: var(--dark-muted); font-size: 0.9rem;">Best Streak:</span>
+                    <span style="color: var(--primary-light); font-weight: 600; font-size: 0.95rem;">${AppState.performance.longestStreak}</span>
                 </div>
             `;
         }
@@ -1921,6 +2682,12 @@
             
             container.innerHTML = '';
             
+            // Load earned badges from localStorage
+            const savedBadges = JSON.parse(localStorage.getItem('badges'));
+            if (savedBadges) {
+                AppState.badges = savedBadges;
+            }
+            
             AppState.badges.forEach(badge => {
                 const badgeElement = document.createElement('div');
                 badgeElement.className = `badge ${badge.earned ? 'earned' : 'locked'}`;
@@ -1941,8 +2708,18 @@
             
             container.innerHTML = '';
             
-            // Show only recent 5 items for sidebar-like display
-            const recentHistory = AppState.history.slice(0, 5);
+            // Show only recent 10 items
+            const recentHistory = AppState.history.slice(0, 10);
+            
+            if (recentHistory.length === 0) {
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px 20px; color: var(--dark-muted);">
+                        <i class="fas fa-history" style="font-size: 2rem; margin-bottom: 15px; opacity: 0.5;"></i>
+                        <div>No words completed yet</div>
+                    </div>
+                `;
+                return;
+            }
             
             recentHistory.forEach(item => {
                 const historyItem = document.createElement('div');
@@ -1954,10 +2731,13 @@
                             <span style="color: ${item.status === 'perfect' ? 'var(--success)' : 'var(--primary)'};">
                                 ${item.status === 'perfect' ? '⭐' : '💡'}
                             </span>
+                            <span>+${item.points}</span>
                         </div>
                     </div>
-                    <div style="font-size: 0.85rem; color: var(--dark-muted);">
-                        ${item.attempts} attempt${item.attempts > 1 ? 's' : ''} • ${item.time}s
+                    <div class="history-details">
+                        <span>${item.attempts} attempt${item.attempts > 1 ? 's' : ''}</span>
+                        <span>${item.hints} hint${item.hints !== 1 ? 's' : ''}</span>
+                        <span>${item.time}s</span>
                     </div>
                 `;
                 
@@ -1965,20 +2745,25 @@
             });
         }
 
-        // Initialize UI components
+        // Initialize UI
         function initUI() {
+            // Set form values
+            document.getElementById('userName').value = AppState.userName;
+            document.getElementById('userLevel').value = AppState.userLevel;
+            document.getElementById('elevenlabsApiKey').value = AppState.elevenlabsApiKey;
+            
             // Set slider values
-            document.getElementById('rateSlider').value = AppState.speechRate;
-            document.getElementById('pitchSlider').value = AppState.speechPitch;
-            document.getElementById('volumeSlider').value = AppState.speechVolume;
+            document.getElementById('speechRate').value = AppState.speechRate;
+            document.getElementById('speechPitch').value = AppState.speechPitch;
+            document.getElementById('masterVolume').value = AppState.speechVolume;
             
-            // Update slider value displays
-            document.getElementById('rateValue').textContent = AppState.speechRate;
-            document.getElementById('pitchValue').textContent = AppState.speechPitch;
-            document.getElementById('volumeValue').textContent = AppState.speechVolume;
+            // Update slider displays
+            document.getElementById('rateValue').textContent = `${AppState.speechRate.toFixed(1)}x`;
+            document.getElementById('pitchValue').textContent = AppState.speechPitch.toFixed(1);
+            document.getElementById('volumeValue').textContent = `${Math.round(AppState.speechVolume * 100)}%`;
             
-            // Set user name
-            document.getElementById('userName').value = AppState.userName;
+            // Set TTS engine
+            document.getElementById('ttsEngine').value = AppState.ttsEngine;
         }
 
         // Initialize event listeners
@@ -2008,22 +2793,57 @@
                 speakText(AppState.currentWord, { rate: 0.7 });
             });
             
+            document.getElementById('repeatBtn').addEventListener('click', function() {
+                speakText(AppState.currentWord);
+            });
+            
             document.getElementById('checkAnswerBtn').addEventListener('click', checkAnswer);
-            document.getElementById('hintBtn').addEventListener('click', giveHint);
+            
+            document.getElementById('hintBtn').addEventListener('click', function() {
+                giveHint();
+            });
+            
             document.getElementById('nextWordBtn').addEventListener('click', nextWord);
             
-            // Answer input - allow Enter key to submit
+            document.getElementById('revealBtn').addEventListener('click', function() {
+                revealWord();
+            });
+            
+            // Answer input - Enter key support
             document.getElementById('answerInput').addEventListener('keypress', function(e) {
                 if (e.key === 'Enter') {
                     checkAnswer();
                 }
             });
             
-            // TTS controls
-            document.getElementById('testVoiceBtn').addEventListener('click', function() {
-                speakText('This is a test of the text to speech system.');
+            // ElevenLabs configuration
+            document.getElementById('testElevenlabsBtn').addEventListener('click', async function() {
+                const apiKey = document.getElementById('elevenlabsApiKey').value;
+                if (!apiKey) {
+                    showToast('API Key Required', 'Please enter your ElevenLabs API key.', 'warning');
+                    return;
+                }
+                
+                AppState.elevenlabsApiKey = apiKey;
+                localStorage.setItem('elevenlabsApiKey', apiKey);
+                
+                await loadElevenLabsVoices();
+            });
+            
+            document.getElementById('clearApiKeyBtn').addEventListener('click', function() {
+                document.getElementById('elevenlabsApiKey').value = '';
+                AppState.elevenlabsApiKey = '';
+                localStorage.removeItem('elevenlabsApiKey');
+                AppState.isElevenlabsConfigured = false;
+                showToast('API Key Cleared', 'ElevenLabs API key has been removed.', 'success');
             });
             
+            // ElevenLabs voice selection
+            document.getElementById('elevenlabsVoice').addEventListener('change', function() {
+                AppState.currentElevenlabsVoice = this.value;
+            });
+            
+            // TTS testing
             document.getElementById('testTtsBtn').addEventListener('click', function() {
                 const text = document.getElementById('testText').value;
                 speakText(text);
@@ -2034,43 +2854,56 @@
             });
             
             // Slider controls
-            document.getElementById('rateSlider').addEventListener('input', function() {
+            document.getElementById('speechRate').addEventListener('input', function() {
                 AppState.speechRate = parseFloat(this.value);
-                document.getElementById('rateValue').textContent = this.value;
+                document.getElementById('rateValue').textContent = `${this.value}x`;
             });
             
-            document.getElementById('pitchSlider').addEventListener('input', function() {
+            document.getElementById('speechPitch').addEventListener('input', function() {
                 AppState.speechPitch = parseFloat(this.value);
                 document.getElementById('pitchValue').textContent = this.value;
             });
             
-            document.getElementById('volumeSlider').addEventListener('input', function() {
+            document.getElementById('masterVolume').addEventListener('input', function() {
                 AppState.speechVolume = parseFloat(this.value);
-                document.getElementById('volumeValue').textContent = this.value;
+                document.getElementById('volumeValue').textContent = `${Math.round(this.value * 100)}%`;
             });
             
-            // Voice selection
-            document.getElementById('voiceSelect').addEventListener('change', function() {
-                const selectedVoice = AppState.voices.find(voice => voice.voiceURI === this.value);
-                if (selectedVoice) {
-                    AppState.currentVoice = selectedVoice;
-                    showToast('Voice Selected', `Now using ${selectedVoice.name}`, 'success');
+            // TTS engine selection
+            document.getElementById('ttsEngine').addEventListener('change', function() {
+                AppState.ttsEngine = this.value;
+                if (this.value === 'elevenlabs' && !AppState.isElevenlabsConfigured) {
+                    showToast('ElevenLabs Required', 'Please configure your ElevenLabs API key first.', 'warning');
+                    switchTab('voices');
                 }
             });
             
-            // Session management
+            // Profile saving
             document.getElementById('saveProfileBtn').addEventListener('click', function() {
                 AppState.userName = document.getElementById('userName').value;
+                AppState.userLevel = document.getElementById('userLevel').value;
+                localStorage.setItem('userName', AppState.userName);
+                localStorage.setItem('userLevel', AppState.userLevel);
                 showToast('Profile Saved', `Hello ${AppState.userName}!`, 'success');
             });
             
+            // Session management
             document.getElementById('saveSessionBtn').addEventListener('click', function() {
+                saveSession();
                 showToast('Session Saved', 'Your progress has been saved.', 'success');
             });
             
-            document.getElementById('newSessionBtn').addEventListener('click', startNewSession);
+            document.getElementById('newSessionBtn').addEventListener('click', function() {
+                if (confirm('Start a new session? Current progress will be saved.')) {
+                    startNewSession();
+                }
+            });
+            
+            document.getElementById('exportDataBtn').addEventListener('click', function() {
+                exportData();
+            });
             
-            // Modal close button
+            // Modal close
             document.getElementById('modalCloseBtn').addEventListener('click', function() {
                 document.getElementById('sessionCompleteModal').classList.remove('active');
             });
@@ -2084,10 +2917,15 @@
             
             // Keyboard shortcuts
             document.addEventListener('keydown', function(e) {
-                // Don't trigger if user is typing in an input
+                // Don't trigger if user is typing in an input (except for Enter)
                 if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
-                    // Allow Enter key in answer input
-                    if (e.key !== 'Enter') return;
+                    if (e.key !== 'Enter' && e.key !== 'Tab') return;
+                }
+                
+                // Prevent default for game shortcuts
+                const shortcuts = ['1', '2', '3', '4', '5', 'h', 'H', 'n', 'N', 'r', 'R', 'Enter'];
+                if (shortcuts.includes(e.key)) {
+                    e.preventDefault();
                 }
                 
                 // Number keys for quick actions
@@ -2101,6 +2939,8 @@
                     document.getElementById('spellOutBtn').click();
                 } else if (e.key === '4') {
                     document.getElementById('slowSpeechBtn').click();
+                } else if (e.key === '5') {
+                    document.getElementById('repeatBtn').click();
                 } else if (e.key === 'h' || e.key === 'H') {
                     if (!document.getElementById('hintBtn').disabled) {
                         document.getElementById('hintBtn').click();
@@ -2109,14 +2949,39 @@
                     if (!document.getElementById('nextWordBtn').disabled) {
                         document.getElementById('nextWordBtn').click();
                     }
+                } else if (e.key === 'r' || e.key === 'R') {
+                    document.getElementById('revealBtn').click();
                 } else if (e.key === 'Enter') {
                     if (!AppState.isCorrect) {
                         document.getElementById('checkAnswerBtn').click();
                     } else if (!document.getElementById('nextWordBtn').disabled) {
                         document.getElementById('nextWordBtn').click();
                     }
+                } else if (e.key === 'Tab') {
+                    e.preventDefault();
+                    if (!AppState.isCorrect) {
+                        document.getElementById('hintBtn').click();
+                    }
                 }
             });
+            
+            // Training mode change
+            document.getElementById('trainingMode').addEventListener('change', function() {
+                initGame();
+                loadWord();
+            });
+            
+            // Difficulty level change
+            document.getElementById('difficultyLevel').addEventListener('change', function() {
+                initGame();
+                loadWord();
+            });
+            
+            // Session length change
+            document.getElementById('sessionLength').addEventListener('change', function() {
+                AppState.totalWords = parseInt(this.value);
+                updateProgress();
+            });
         }
 
         // Switch between tabs
@@ -2138,8 +3003,12 @@
             });
             
             // Special actions for specific tabs
-            if (tabId === 'tts') {
+            if (tabId === 'voices') {
                 renderVoiceGallery();
+            } else if (tabId === 'analytics') {
+                updateQuickStats();
+                renderHistory();
+                renderBadges();
             }
         }
 
@@ -2164,7 +3033,7 @@
                     <div class="toast-title">${title}</div>
                     <div class="toast-message">${message}</div>
                 </div>
-                <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
+                <button class="toast-close" onclick="document.getElementById('${toastId}').remove()">&times;</button>
             `;
             
             toastContainer.appendChild(toast);
@@ -2184,6 +3053,191 @@
             }, 5000);
         }
 
+        // Spell out word letter by letter
+        function spellOutWord(word) {
+            const letters = word.split('');
+            let fullText = '';
+            
+            letters.forEach((letter, index) => {
+                fullText += letter;
+                if (index < letters.length - 1) fullText += '. ';
+            });
+            
+            fullText += '.';
+            speakText(fullText, { rate: 0.8 });
+        }
+
+        // Give a hint
+        function giveHint() {
+            if (AppState.revealedLetters >= AppState.currentWord.length) return;
+            
+            AppState.revealedLetters++;
+            AppState.hintsUsed++;
+            
+            // Update masked word
+            AppState.maskedWord = maskWord(AppState.currentWord, AppState.revealedLetters);
+            document.getElementById('currentWord').textContent = AppState.maskedWord;
+            
+            // Update UI
+            updateUI();
+            
+            // Speak the revealed letter
+            const revealedLetter = AppState.currentWord[AppState.revealedLetters - 1];
+            speakText(`The ${getOrdinal(AppState.revealedLetters)} letter is ${revealedLetter}`, { rate: 0.9 });
+        }
+
+        // Reveal the entire word
+        function revealWord() {
+            AppState.revealedLetters = AppState.currentWord.length;
+            AppState.maskedWord = maskWord(AppState.currentWord, AppState.revealedLetters);
+            document.getElementById('currentWord').textContent = AppState.maskedWord;
+            document.getElementById('hintBtn').disabled = true;
+            
+            speakText(`The word is ${AppState.currentWord}`, { rate: 0.8 });
+            showToast('Word Revealed', 'The word has been revealed. Try to remember it!', 'warning');
+        }
+
+        // Get ordinal number (1st, 2nd, 3rd, etc.)
+        function getOrdinal(n) {
+            const s = ["th", "st", "nd", "rd"];
+            const v = n % 100;
+            return n + (s[(v - 20) % 10] || s[v] || s[0]);
+        }
+
+        // Shuffle array
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array;
+        }
+
+        // Save session
+        function saveSession() {
+            const sessionData = {
+                currentWordIndex: AppState.currentWordIndex,
+                score: AppState.score,
+                streak: AppState.streak,
+                sessionHistory: AppState.sessionHistory,
+                timestamp: Date.now()
+            };
+            
+            localStorage.setItem('savedSession', JSON.stringify(sessionData));
+        }
+
+        // Export data
+        function exportData() {
+            const data = {
+                user: {
+                    name: AppState.userName,
+                    level: AppState.userLevel,
+                    xp: AppState.userXP
+                },
+                performance: AppState.performance,
+                badges: AppState.badges.filter(b => b.earned),
+                history: AppState.history,
+                timestamp: Date.now()
+            };
+            
+            const dataStr = JSON.stringify(data, null, 2);
+            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+            
+            const exportFileDefaultName = `spelling-trainer-data-${new Date().toISOString().split('T')[0]}.json`;
+            
+            const linkElement = document.createElement('a');
+            linkElement.setAttribute('href', dataUri);
+            linkElement.setAttribute('download', exportFileDefaultName);
+            linkElement.click();
+            
+            showToast('Data Exported', 'Your progress has been exported to a JSON file.', 'success');
+        }
+
+        // Share results
+        function shareResults() {
+            const text = `I just scored ${AppState.score} points in Spelling Trainer Pro! Can you beat my score? 🎯 #SpellingTrainer`;
+            
+            if (navigator.share) {
+                navigator.share({
+                    title: 'My Spelling Trainer Results',
+                    text: text,
+                    url: window.location.href
+                });
+            } else {
+                // Fallback: copy to clipboard
+                navigator.clipboard.writeText(text).then(() => {
+                    showToast('Copied to Clipboard', 'Results copied! Share with your friends.', 'success');
+                });
+            }
+        }
+
+        // Start timer
+        function startTimer() {
+            setInterval(() => {
+                if (AppState.startTime) {
+                    AppState.sessionTime = Math.floor((Date.now() - AppState.startTime) / 1000);
+                    document.getElementById('timeValue').textContent = `${AppState.sessionTime}s`;
+                }
+            }, 1000);
+        }
+
+        // Render voice gallery
+        function renderVoiceGallery() {
+            const container = document.getElementById('voiceGallery');
+            if (!container) return;
+            
+            container.innerHTML = '';
+            
+            // Show Web Speech API voices
+            const webSpeechVoices = AppState.voices.filter(voice => voice.lang.startsWith('en-'));
+            
+            webSpeechVoices.slice(0, 6).forEach(voice => {
+                const voiceCard = document.createElement('div');
+                voiceCard.className = 'badge';
+                voiceCard.style.cursor = 'pointer';
+                voiceCard.innerHTML = `
+                    <div class="badge-icon">🗣️</div>
+                    <div class="badge-name">${voice.name}</div>
+                    <div class="badge-desc">${voice.lang}</div>
+                `;
+                
+                voiceCard.addEventListener('click', function() {
+                    AppState.currentVoice = voice;
+                    AppState.ttsEngine = 'web-speech';
+                    document.getElementById('ttsEngine').value = 'web-speech';
+                    speakText(`Hello, I am ${voice.name}. I will be your voice for this session.`);
+                    showToast('Voice Selected', `Now using ${voice.name}`, 'success');
+                });
+                
+                container.appendChild(voiceCard);
+            });
+            
+            // Show ElevenLabs voices if available
+            if (AppState.isElevenlabsConfigured) {
+                AppState.elevenlabsVoices.slice(0, 6).forEach(voice => {
+                    const voiceCard = document.createElement('div');
+                    voiceCard.className = 'badge earned';
+                    voiceCard.style.cursor = 'pointer';
+                    voiceCard.innerHTML = `
+                        <div class="badge-icon">🤖</div>
+                        <div class="badge-name">${voice.name}</div>
+                        <div class="badge-desc">AI Voice</div>
+                    `;
+                    
+                    voiceCard.addEventListener('click', function() {
+                        AppState.currentElevenlabsVoice = voice.voice_id;
+                        AppState.ttsEngine = 'elevenlabs';
+                        document.getElementById('ttsEngine').value = 'elevenlabs';
+                        document.getElementById('elevenlabsVoice').value = voice.voice_id;
+                        speakText(`Hello, I am ${voice.name}, an AI voice from ElevenLabs.`);
+                        showToast('AI Voice Selected', `Now using ${voice.name}`, 'success');
+                    });
+                    
+                    container.appendChild(voiceCard);
+                });
+            }
+        }
+
         // Make showToast function globally accessible
         window.showToast = showToast;
     </script>
