* {margin:0;padding:0;box-sizing:border-box} body {font-family:'Comic Sans MS','Chalkboard SE','Arial Rounded MT Bold',cursive,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;overflow-x:hidden;position:relative} body::before {content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.05) 2%,transparent 2%),radial-gradient(circle at 60% 30%,rgba(255,255,255,0.05) 2%,transparent 2%),radial-gradient(circle at 80% 70%,rgba(255,255,255,0.05) 2%,transparent 2%),radial-gradient(circle at 40% 80%,rgba(255,255,255,0.05) 2%,transparent 2%),linear-gradient(45deg,transparent 48%,rgba(255,255,255,0.03) 48%,rgba(255,255,255,0.03) 52%,transparent 52%);background-size:80px 80px,120px 120px,90px 90px,110px 110px,50px 50px;background-position:0 0,40px 40px,80px 10px,20px 60px,0 0;pointer-events:none;z-index:0} #welcomeScreen {position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;animation:fadeIn 0.5s ease-in} #welcomeScreen.hidden {animation:fadeOut 0.5s ease-out forwards;pointer-events:none} .welcome-content {text-align:center;color:white;animation:bounceIn 1s ease-out;max-width:900px;padding:20px} .welcome-content h1 {font-size:4em;margin-bottom:20px;text-shadow:4px 4px 8px rgba(0,0,0,0.3);animation:rainbow 3s ease-in-out infinite} .welcome-subtitle {font-size:1.5em;margin-bottom:30px;opacity:0.95;font-weight:600} .welcome-features {display:flex;justify-content:center;gap:40px;margin:30px 0;flex-wrap:wrap} .feature-item {display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(255,255,255,0.15);padding:20px 30px;border-radius:20px;backdrop-filter:blur(10px);transition:all 0.3s;border:2px solid rgba(255,255,255,0.2);cursor:pointer;user-select:none} .feature-item:hover {transform:translateY(-10px) scale(1.05);background:rgba(255,255,255,0.3);box-shadow:0 15px 35px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.4)} .feature-item:active {transform:translateY(-5px) scale(1.02)} .feature-icon {font-size:3em;animation:bounce 2s infinite} .feature-item span:last-child {font-size:1.2em;font-weight:bold} .welcome-tagline {font-size:1.3em;margin-top:30px;opacity:0.9;font-style:italic} .get-started-btn {margin-top:40px;padding:20px 50px;font-size:1.5em;font-weight:bold;background:white;color:#667eea;border:none;border-radius:50px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.3);transition:all 0.3s;animation:pulse 2s infinite} .get-started-btn:hover {transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(0,0,0,0.4);background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:white} .get-started-btn:active {transform:translateY(-2px) scale(1.02)} @keyframes pulse {0%,100% {opacity:1;transform:scale(1)} 50% {opacity:1;transform:scale(1.08)} } #languageSelection {position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:999;padding:20px} #languageSelection.show {display:flex;animation:fadeIn 0.5s ease-in} #languageSelection.hidden {animation:fadeOut 0.5s ease-out forwards;pointer-events:none} .language-content h2 {color:white;font-size:3em;margin-bottom:40px;text-align:center;text-shadow:3px 3px 6px rgba(0,0,0,0.3)} .language-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:25px;max-width:900px;width:100%;padding:20px} .language-btn {background:white;color:#667eea;font-size:1.5em;font-weight:bold;padding:30px 20px;border:none;border-radius:20px;cursor:pointer;transition:all 0.3s;box-shadow:0 8px 20px rgba(0,0,0,0.2);transform:scale(1)} .language-btn:hover {transform:scale(1.1) translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.3);background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:white} .language-btn:active {transform:scale(0.95)} @keyframes fadeIn {from {opacity:0} to {opacity:1} } @keyframes fadeOut {from {opacity:1} to {opacity:0} } @keyframes bounceIn {0% {transform:scale(0.3);opacity:0} 50% {transform:scale(1.05)} 70% {transform:scale(0.9)} 100% {transform:scale(1);opacity:1} } @keyframes rainbow {0%,100% {color:#fff} 25% {color:#ffeb3b} 50% {color:#ff9800} 75% {color:#4fc3f7} } .container {background:white;border-radius:30px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:950px;width:100%;position:relative;z-index:1;opacity:0;animation:slideUp 0.8s ease-out forwards;animation-delay:0.2s} @keyframes slideUp {from {opacity:0;transform:translateY(50px)} to {opacity:1;transform:translateY(0)} } h1 {text-align:center;color:#667eea;margin-bottom:10px;font-size:2.5em;text-shadow:2px 2px 4px rgba(0,0,0,0.1)} .subtitle {text-align:center;color:#666;margin-bottom:30px;font-size:1.2em} .progress-bar {width:100%;height:8px;background:#e0e0e0;border-radius:10px;margin-bottom:20px;overflow:hidden} .progress-fill {height:100%;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:10px;transition:width 0.3s ease} .controls {display:flex;gap:20px;margin-top:30px;margin-bottom:20px;flex-wrap:wrap;justify-content:center;padding-top:30px;border-top:2px solid #eee} .voice-controls {display:flex;justify-content:center;margin-bottom:30px} .voice-controls .control-group {width:100%;max-width:400px} .control-group {display:flex;flex-direction:column;gap:10px} label {font-weight:bold;color:#555;font-size:1.1em} select,button {padding:12px 24px;font-size:1.1em;border-radius:15px;border:2px solid #667eea;cursor:pointer;font-family:'Comic Sans MS',cursive,sans-serif;transition:all 0.3s} select {background:white} button {background:#667eea;color:white;font-weight:bold} button:hover {background:#764ba2;transform:scale(1.05)} button:active {transform:scale(0.95)} button:disabled {opacity:0.5;cursor:not-allowed} .display-area {text-align:center;min-height:400px} .single-view {display:flex;flex-direction:column;align-items:center;gap:30px;position:relative} .letter-container {display:flex;align-items:center;justify-content:center;gap:40px;width:100%;max-width:1200px;position:relative} .sound-toggle-btn {position:absolute;top:10px;right:10px;padding:12px 20px;font-size:1.1em;font-weight:bold;background:rgba(255,255,255,0.9);color:#667eea;border:2px solid #667eea;border-radius:25px;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:10} .sound-toggle-btn:hover {background:#667eea;color:white;transform:scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,0.25)} .sound-toggle-btn.active {background:#4CAF50;color:white;border-color:#4CAF50} .sound-toggle-btn.active:hover {background:#45a049} .letter-display {font-size:20em;color:#667eea;font-weight:bold;text-shadow:4px 4px 8px rgba(0,0,0,0.2);animation:bounce 0.5s;min-height:300px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;user-select:none} .letter-display:hover {transform:scale(1.05)} .english-text {font-size:2em;color:#764ba2;font-weight:bold;margin-top:10px} @keyframes bounce {0%,100% {transform:scale(1)} 50% {transform:scale(1.1)} } @keyframes swing {0%,100% {transform:rotate(-3deg)} 50% {transform:rotate(3deg)} } @keyframes clickFlash {0% {color:#667eea;transform:scale(1)} 20% {color:#ff6b6b;transform:scale(1.2)} 40% {color:#4ecdc4;transform:scale(1.15)} 60% {color:#ffd93d;transform:scale(1.2)} 80% {color:#a29bfe;transform:scale(1.15)} 100% {color:#667eea;transform:scale(1)} } .navigation {display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center} .nav-btn {background:#764ba2;padding:15px 30px;font-size:1.2em} .nav-arrow {width:90px;height:90px;border-radius:50%;font-size:2.8em;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#7c8ff0,#5a6ed8);border:none;box-shadow:0 10px 30px rgba(102,126,234,0.4),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3);flex-shrink:0;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275)} .nav-arrow::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(145deg,rgba(255,255,255,0.3),transparent);border-radius:50%;opacity:0;transition:opacity 0.3s} .nav-arrow:hover {transform:scale(1.12) translateY(-3px);box-shadow:0 15px 40px rgba(102,126,234,0.6),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.4);background:linear-gradient(145deg,#8c9ff8,#6a7ee8)} .nav-arrow:hover::before {opacity:1} .nav-arrow:active {transform:scale(1.05) translateY(-1px);box-shadow:0 8px 20px rgba(102,126,234,0.5)} .nav-arrow-left {margin-right:20px;animation:pulse-left 2s ease-in-out infinite} .nav-arrow-right {margin-left:20px;animation:pulse-right 2s ease-in-out infinite} @keyframes pulse-left {0%,100% {box-shadow:0 10px 30px rgba(102,126,234,0.4),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3)} 50% {box-shadow:0 10px 30px rgba(102,126,234,0.6),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3)} } @keyframes pulse-right {0%,100% {box-shadow:0 10px 30px rgba(102,126,234,0.4),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3)} 50% {box-shadow:0 10px 30px rgba(102,126,234,0.6),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3)} } .speak-btn {background:linear-gradient(145deg,#f093fb,#f5576c);padding:20px 40px;font-size:1.3em;border:none;border-radius:50px;box-shadow:0 10px 30px rgba(240,147,251,0.4),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.3);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:hidden} .speak-btn::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(145deg,rgba(255,255,255,0.2),transparent);opacity:0;transition:opacity 0.3s} .speak-btn:hover {transform:translateY(-3px) scale(1.05);box-shadow:0 15px 40px rgba(240,147,251,0.6),inset 0 -2px 10px rgba(0,0,0,0.1),inset 0 2px 10px rgba(255,255,255,0.4);background:linear-gradient(145deg,#ff9ff5,#ff6b8a)} .speak-btn:hover::before {opacity:1} .speak-btn:active {transform:translateY(-1px) scale(1.02)} .grid-view {display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:15px;padding:20px} .letter-card {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;font-size:3em;font-weight:bold;padding:30px;border-radius:15px;cursor:pointer;transition:all 0.3s;box-shadow:0 5px 15px rgba(0,0,0,0.2);transform-origin:top center;user-select:none} .letter-card:hover {animation:swing 0.5s ease-in-out infinite;box-shadow:0 10px 25px rgba(0,0,0,0.3)} .letter-card.clicked {animation:clickFlash 1.2s ease-in-out} .hidden {display:none !important} .position-indicator {color:#764ba2;font-size:1.2em;font-weight:bold} .keyboard-hint {text-align:center;color:#888;font-size:0.9em;margin-top:20px} .confetti {position:fixed;width:10px;height:10px;background:#f0f;z-index:9999;animation:confetti-fall 3s linear forwards;pointer-events:none} @keyframes confetti-fall {to {transform:translateY(100vh) rotate(360deg);opacity:0} } .stats {display:flex;justify-content:space-around;margin-bottom:20px;flex-wrap:wrap;gap:15px} .stat-item {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:15px 25px;border-radius:15px;font-size:1.1em;font-weight:bold;box-shadow:0 4px 10px rgba(0,0,0,0.2)} footer {margin-top:30px;text-align:center;color:#666;font-size:0.9em;padding-top:20px;border-top:2px solid #eee} @media (max-width:600px) {.letter-display {font-size:10em;min-height:200px} .letter-container {gap:20px} h1 {font-size:1.8em} .controls {flex-direction:column} .english-text {font-size:1.5em} .welcome-content h1 {font-size:2.5em} .welcome-subtitle {font-size:1.2em} .welcome-features {flex-direction:column;gap:20px} .feature-item {padding:15px 20px} .feature-icon {font-size:2.5em} .welcome-tagline {font-size:1.1em} .get-started-btn {font-size:1.3em;padding:15px 40px} .sound-toggle-btn {top:5px;right:5px;padding:10px 15px;font-size:0.9em} .nav-arrow {width:60px;height:60px;font-size:2em} .nav-arrow-left {margin-right:10px} .nav-arrow-right {margin-left:10px} .language-content h2 {font-size:2em} .language-btn {font-size:1.2em;padding:20px 15px} }