:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-50: #fef9f3;--primary-100: #fef3e7;--primary-200: #fce4c4;--primary-300: #f9cd8f;--primary-400: #f5a647;--primary-500: #f39c12;--primary-600: #d68910;--primary-700: #b5730e;--primary-800: #945d0c;--teal-50: #f0fdfa;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--purple-50: #faf5ff;--purple-100: #f3e8ff;--purple-200: #e9d5ff;--purple-300: #d8b4fe;--purple-400: #c084fc;--purple-500: #a855f7;--purple-600: #9333ea;--purple-700: #7e22ce;--purple-800: #6b21a8;--coral-50: #fff7ed;--coral-100: #ffedd5;--coral-200: #fed7aa;--coral-300: #fdba74;--coral-400: #fb923c;--coral-500: #f97316;--coral-600: #ea580c;--coral-700: #c2410c;--indigo-50: #eef2ff;--indigo-100: #e0e7ff;--indigo-200: #c7d2fe;--indigo-300: #a5b4fc;--indigo-400: #818cf8;--indigo-500: #6366f1;--indigo-600: #4f46e5;--indigo-700: #4338ca;--indigo-800: #3730a3;--success-50: #f0fdf4;--success-100: #dcfce7;--success-500: #22c55e;--success-600: #16a34a;--success-700: #15803d;--error-50: #fef2f2;--error-100: #fee2e2;--error-500: #ef4444;--error-600: #dc2626;--error-700: #b91c1c;--gray-50: #fafafa;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-600: #52525b;--gray-700: #3f3f46;--gray-800: #27272a;--gray-900: #18181b;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .15), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--shadow-glow: 0 0 20px rgb(243 156 18 / .15);--glow-teal: 0 0 30px rgb(20 184 166 / .2);--glow-purple: 0 0 30px rgb(168 85 247 / .2);--glow-gold: 0 0 30px rgb(243 156 18 / .2);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-3xl: 2rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem}body{font-family:-apple-system,BlinkMacSystemFont,Inter,SF Pro Display,Segoe UI,Helvetica Neue,Arial,sans-serif;background:radial-gradient(at 0% 0%,var(--primary-100) 0px,transparent 50%),radial-gradient(at 100% 0%,var(--teal-100) 0px,transparent 50%),radial-gradient(at 100% 100%,var(--purple-100) 0px,transparent 50%),radial-gradient(at 0% 100%,var(--coral-100) 0px,transparent 50%),linear-gradient(135deg,var(--primary-50) 0%,var(--teal-50) 25%,var(--indigo-50) 50%,var(--purple-50) 75%,var(--coral-50) 100%);min-height:100vh;color:var(--gray-800);line-height:1.6;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.01) 2px,rgba(0,0,0,.01) 4px);pointer-events:none;z-index:1;opacity:.5}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;z-index:2}.App{width:100%;max-width:1400px;position:relative}.game-board{background:#ffffffd9;backdrop-filter:blur(40px) saturate(180%);border:1.5px solid rgba(255,255,255,.8);border-radius:var(--radius-3xl);padding:2.5rem;box-shadow:var(--shadow-2xl),inset 0 1px #ffffffe6,0 0 0 1px #0000000d;text-align:center;min-height:700px;display:flex;flex-direction:column;position:relative;overflow:hidden;margin:0 auto;width:100%;transition:all .4s cubic-bezier(.4,0,.2,1)}.game-board:hover{box-shadow:var(--shadow-2xl),var(--shadow-glow),inset 0 1px #ffffffe6,0 0 0 1px #0000000d}.game-board:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--primary-500) 0%,var(--teal-500) 25%,var(--indigo-500) 50%,var(--purple-500) 75%,var(--coral-500) 100%);border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;animation:shimmer 8s linear infinite;background-size:200% 100%}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.game-board:after{content:"";position:absolute;inset:0;border-radius:var(--radius-3xl);background:radial-gradient(circle at 50% 0%,rgba(243,156,18,.05) 0%,transparent 50%);pointer-events:none}.game-board.loading{justify-content:center;align-items:center}.loading-spinner{font-size:1.125rem;font-weight:700;color:transparent;background:linear-gradient(135deg,var(--primary-600) 0%,var(--teal-600) 30%,var(--purple-600) 60%,var(--coral-600) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradientShift 3s ease infinite,pulse 2s ease-in-out infinite;position:relative;padding:2rem}.loading-spinner:after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border:4px solid transparent;border-top-color:var(--primary-500);border-right-color:var(--teal-500);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.game-header{margin-bottom:40px}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.game-header h1{background:linear-gradient(135deg,var(--primary-600) 0%,var(--teal-600) 30%,var(--purple-600) 60%,var(--coral-600) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;font-size:2.75rem;font-weight:900;margin:0;letter-spacing:-.04em;text-align:left;position:relative;animation:gradientShift 8s ease infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.05))}@keyframes gradientShift{0%,to{background-position:0% center}50%{background-position:100% center}}.reset-button{background:#fffc;color:var(--gray-600);border:2px solid var(--gray-200);padding:.75rem 1.25rem;font-size:.9375rem;font-weight:600;border-radius:var(--radius-xl);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);position:relative;overflow:hidden}.reset-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--error-50),var(--coral-50));opacity:0;transition:opacity .3s ease}.reset-button:hover:not(:disabled){color:var(--error-600);border-color:var(--error-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}.reset-button:hover:not(:disabled):before{opacity:1}.reset-button:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.5)}.game-content{flex:1;display:flex;gap:40px;align-items:stretch}.game-left{flex:1;display:flex;flex-direction:column;justify-content:center}.game-right{flex:1;display:flex;align-items:center;justify-content:center}.game-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.letter-display{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.letter-container{background:linear-gradient(135deg,#ffffffe6,#fffc),linear-gradient(135deg,var(--primary-100) 0%,var(--teal-100) 50%,var(--purple-100) 100%);border:2px solid transparent;padding:4rem;border-radius:var(--radius-3xl);box-shadow:var(--shadow-xl),inset 0 1px #fff,inset 0 0 0 1px #ffffff80;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1);min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}.letter-container:before{content:"";position:absolute;inset:-3px;background:linear-gradient(135deg,var(--primary-400),var(--teal-400),var(--indigo-400),var(--purple-400),var(--coral-400));background-size:200% 200%;border-radius:var(--radius-3xl);z-index:-1;opacity:0;transition:opacity .5s ease;animation:gradientRotate 6s linear infinite}@keyframes gradientRotate{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.letter-container:hover:before{opacity:.6}.letter-container:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(243,156,18,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(168,85,247,.1) 0%,transparent 50%);border-radius:var(--radius-3xl);pointer-events:none;opacity:0;transition:opacity .5s ease}.letter-container:hover:after{opacity:1}.letter-container:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-2xl),var(--glow-gold),inset 0 1px #fff,inset 0 0 0 1px #ffffff80}.arabic-letter{font-size:9rem;font-weight:700;color:var(--primary-700);font-family:Geeza Pro,Al Nile,Baghdad,Damascus,Arabic Typesetting,Times New Roman,serif;text-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 16px rgba(243,156,18,.2);direction:rtl;unicode-bidi:bidi-override;margin:0;line-height:1;user-select:none;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));animation:subtleFloat 6s ease-in-out infinite}@keyframes subtleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.letter-container:hover .arabic-letter{transform:scale(1.08) rotate(2deg);color:var(--teal-700);text-shadow:0 4px 8px rgba(0,0,0,.15),0 8px 20px rgba(20,184,166,.3);filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));animation:none}.choice-buttons{margin-top:2rem;width:100%}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:500px;margin:0 auto}.choice-button{background:#fff;color:var(--gray-800);border:2px solid var(--gray-200);padding:1.25rem 1.5rem;font-size:1.1rem;font-weight:600;border-radius:var(--radius-2xl);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-md),inset 0 1px #fff;position:relative;overflow:hidden;min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px)}.choice-button .button-text{position:relative;z-index:2;display:inline-block}.choice-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));opacity:0!important;transition:all .3s ease;z-index:0;pointer-events:none}.choice-button:nth-child(1):before{background:linear-gradient(135deg,var(--primary-500) 0%,var(--primary-600) 100%)}.choice-button:nth-child(2):before{background:linear-gradient(135deg,var(--teal-500) 0%,var(--teal-600) 100%)}.choice-button:nth-child(3):before{background:linear-gradient(135deg,var(--indigo-500) 0%,var(--indigo-600) 100%)}.choice-button:nth-child(4):before{background:linear-gradient(135deg,var(--purple-500) 0%,var(--purple-600) 100%)}.choice-button:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.choice-button:hover:not(:disabled):after{left:100%}.choice-button:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl),0 0 20px #0000001a,inset 0 1px #ffffff80}.choice-button:hover:not(:disabled):before{opacity:0!important}.choice-button:active:not(:disabled){transform:translateY(-2px) scale(1);box-shadow:var(--shadow-lg);transition:all .1s ease}.choice-button:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.3)}.choice-button:nth-child(1):hover:not(:disabled){box-shadow:var(--shadow-xl),var(--glow-gold)}.choice-button:nth-child(2):hover:not(:disabled){box-shadow:var(--shadow-xl),var(--glow-teal)}.choice-button:nth-child(3):hover:not(:disabled){box-shadow:var(--shadow-xl),0 0 30px #6366f133}.choice-button:nth-child(4):hover:not(:disabled){box-shadow:var(--shadow-xl),var(--glow-purple)}.choice-button.selected{background:linear-gradient(135deg,var(--primary-400) 0%,var(--primary-500) 100%);color:#fff;transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-lg),0 0 20px #f39c124d;border-color:var(--primary-300)}.choice-button.selected:before{opacity:1}.choice-button.correct-highlight{background:linear-gradient(135deg,var(--success-500) 0%,var(--success-600) 100%)!important;color:#fff!important;animation:correctPulse .6s ease-out;border-color:var(--success-400)!important;text-shadow:0 1px 2px rgba(0,0,0,.2)}.choice-button.correct-highlight:before{background:linear-gradient(135deg,var(--success-500) 0%,var(--success-600) 100%)!important;opacity:1!important;z-index:0}.choice-button.correct-highlight .button-text{color:#fff!important;position:relative;z-index:2}@keyframes correctPulse{0%{transform:scale(1);box-shadow:var(--shadow-md)}50%{transform:scale(1.05);box-shadow:var(--shadow-xl),0 0 25px #22c55e66}to{transform:scale(1);box-shadow:var(--shadow-lg),0 0 20px #22c55e4d}}.choice-button.incorrect-highlight{background:linear-gradient(135deg,var(--error-500) 0%,var(--error-600) 100%)!important;color:#fff!important;animation:incorrectPulse .6s ease-out;border-color:var(--error-400)!important;text-shadow:0 1px 2px rgba(0,0,0,.2)}.choice-button.incorrect-highlight:before{background:linear-gradient(135deg,var(--error-500) 0%,var(--error-600) 100%)!important;opacity:1!important;z-index:0}.choice-button.incorrect-highlight .button-text{color:#fff!important;position:relative;z-index:2}@keyframes incorrectPulse{0%{transform:scale(1);box-shadow:var(--shadow-md)}50%{transform:scale(1.05);box-shadow:var(--shadow-xl),0 0 25px #ef444466}to{transform:scale(1);box-shadow:var(--shadow-lg),0 0 20px #ef44444d}}.inline-feedback{margin-top:1.5rem;padding:1rem 1.5rem;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;gap:.75rem;backdrop-filter:blur(10px) saturate(150%);border:2px solid transparent;animation:slideInUp .4s ease-out;box-shadow:var(--shadow-lg);max-width:500px;margin-left:auto;margin-right:auto}.inline-feedback.correct{background:linear-gradient(135deg,var(--success-50) 0%,var(--success-100) 100%);border-color:var(--success-300);color:var(--success-800)}.inline-feedback.incorrect{background:linear-gradient(135deg,var(--error-50) 0%,var(--error-100) 100%);border-color:var(--error-300);color:var(--error-800)}.inline-feedback .feedback-icon{font-size:1.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0}.inline-feedback.correct .feedback-icon{background:var(--success-500);color:#fff}.inline-feedback.incorrect .feedback-icon{background:var(--error-500);color:#fff}.inline-feedback .feedback-text{font-size:1.125rem;font-weight:700;letter-spacing:.01em}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.score-tracker{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.score-item{display:flex;flex-direction:column;align-items:center;padding:1rem 1.25rem;border-radius:var(--radius-2xl);min-width:100px;background:#fffffff2;border:2px solid rgba(255,255,255,.5);box-shadow:var(--shadow-md),inset 0 1px #fff;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(10px)}.score-item:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;transition:all .3s ease;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}.score-item.correct:before{background:linear-gradient(90deg,var(--success-500),var(--success-600))}.score-item.wrong:before{background:linear-gradient(90deg,var(--error-500),var(--error-600))}.score-item.total:before{background:linear-gradient(90deg,var(--indigo-500),var(--purple-500))}.score-item:after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s ease;border-radius:var(--radius-2xl)}.score-item.correct:after{background:radial-gradient(circle at center,var(--success-50),transparent)}.score-item.wrong:after{background:radial-gradient(circle at center,var(--error-50),transparent)}.score-item.total:after{background:radial-gradient(circle at center,var(--indigo-50),transparent)}.score-item:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-xl),inset 0 1px #fff}.score-item:hover:after{opacity:.5}.score-label{font-size:.875rem;margin-bottom:.25rem;color:var(--gray-600);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.score-value{font-size:1.75rem;font-weight:800;color:var(--gray-800);line-height:1}.score-item.correct .score-value{color:var(--success-600)}.score-item.wrong .score-value{color:var(--error-600)}.score-item.total .score-value{color:var(--primary-600)}.feedback-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;border-radius:var(--radius-2xl);margin-top:1.5rem;animation:slideIn .4s ease-out;box-shadow:var(--shadow-lg);border:2px solid transparent}.feedback-message.correct{background:linear-gradient(135deg,var(--success-50) 0%,var(--success-100) 100%);border-color:var(--success-200);color:var(--success-800)}.feedback-message.incorrect{background:linear-gradient(135deg,var(--error-50) 0%,var(--error-100) 100%);border-color:var(--error-200);color:var(--error-800)}.feedback-message.compact{padding:1rem 1.5rem;border-radius:var(--radius-xl);margin-top:1.5rem;display:inline-flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-lg);border:2px solid transparent;backdrop-filter:blur(10px);transition:all .3s ease;transform:translateY(0)}.feedback-message.compact .feedback-icon{font-size:1.5rem;margin-bottom:0;font-weight:900;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0}.feedback-message.compact .feedback-text{font-size:1.125rem;margin-bottom:0;font-weight:700;letter-spacing:.01em}.feedback-message.compact.correct{background:linear-gradient(135deg,var(--success-50) 0%,var(--success-100) 100%);border-color:var(--success-300);color:var(--success-800);animation:bounceIn .4s ease-out}.feedback-message.compact.correct .feedback-icon{background:var(--success-500);color:#fff;text-shadow:none}.feedback-message.compact.correct .feedback-text{color:var(--success-700)}.feedback-message.compact.incorrect{background:linear-gradient(135deg,var(--error-50) 0%,var(--error-100) 100%);border-color:var(--error-300);color:var(--error-800);animation:shakeIn .5s ease-out}.feedback-message.compact.incorrect .feedback-icon{background:var(--error-500);color:#fff;text-shadow:none}.feedback-message.compact.incorrect .feedback-text{color:var(--error-700)}.feedback-message.compact:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.feedback-message.compact.correct:hover{border-color:var(--success-400)}.feedback-message.compact.incorrect:hover{border-color:var(--error-400)}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(20px)}50%{opacity:1;transform:scale(1.05) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes shakeIn{0%{opacity:0;transform:scale(.3) translate(0)}25%{opacity:.7;transform:scale(1.05) translate(-3px)}50%{opacity:1;transform:scale(1.02) translate(3px)}75%{opacity:1;transform:scale(1.01) translate(-2px)}to{opacity:1;transform:scale(1) translate(0)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.feedback-content{text-align:center}.feedback-icon{font-size:4rem;margin-bottom:20px}.feedback-text{font-size:1.5rem;margin-bottom:30px;line-height:1.4}.next-button{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:15px 30px;font-size:1.1rem;font-weight:600;border-radius:10px;cursor:pointer;transition:all .3s ease}.next-button:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.confirmation-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.confirmation-dialog{background:#fffffffa;backdrop-filter:blur(40px);border-radius:var(--radius-3xl);padding:2.5rem;max-width:420px;width:90%;text-align:center;box-shadow:var(--shadow-2xl),inset 0 1px #fff,0 0 0 1px #0000000d;animation:slideIn .4s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.8);position:relative;overflow:hidden}.confirmation-dialog:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--error-500),var(--coral-500));border-radius:var(--radius-3xl) var(--radius-3xl) 0 0}.confirmation-dialog h3{color:var(--gray-800);font-size:1.75rem;font-weight:800;margin-bottom:1rem;letter-spacing:-.02em}.confirmation-dialog p{color:var(--gray-600);font-size:1.0625rem;line-height:1.6;margin-bottom:2rem}.confirmation-buttons{display:flex;gap:15px;justify-content:center}.confirm-button{padding:.875rem 1.75rem;border:none;border-radius:var(--radius-xl);font-size:1.0625rem;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-width:120px;position:relative;overflow:hidden}.confirm-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.confirm-button:hover:before{left:100%}.confirm-button.cancel{background:var(--gray-100);color:var(--gray-700);border:2px solid var(--gray-200);box-shadow:var(--shadow-sm)}.confirm-button.cancel:hover{background:var(--gray-200);border-color:var(--gray-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.confirm-button.reset{background:linear-gradient(135deg,var(--error-500) 0%,var(--error-600) 100%);color:#fff;box-shadow:var(--shadow-lg),0 0 20px #ef44444d}.confirm-button.reset:hover:not(:disabled){background:linear-gradient(135deg,var(--error-600) 0%,var(--error-700) 100%);transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl),0 0 30px #ef444466}.confirm-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.round-progress{background:#fffffff2;border-radius:var(--radius-2xl);padding:1.25rem 1.5rem;box-shadow:var(--shadow-md),inset 0 1px #fff;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5);margin-bottom:1.5rem;position:relative;overflow:hidden}.round-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.round-info h3{font-size:1.125rem;font-weight:700;color:var(--gray-800);margin:0;background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.question-counter{font-size:.875rem;font-weight:600;color:var(--gray-600);background:var(--gray-100);padding:.375rem .75rem;border-radius:var(--radius-lg)}.progress-bar{display:flex;flex-direction:column;gap:.5rem}.progress-bar-track{height:8px;background:var(--gray-200);border-radius:9999px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px #0000000d}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-500) 0%,var(--teal-500) 25%,var(--indigo-500) 50%,var(--purple-500) 100%);border-radius:9999px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 2px 8px #00000026}.progress-bar-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShimmer 2s linear infinite}@keyframes progressShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-text{font-size:.75rem;font-weight:600;color:var(--gray-600);text-align:right;letter-spacing:.025em}.round-complete{display:flex;align-items:center;justify-content:center;min-height:500px;padding:2rem;position:relative;z-index:10}.round-complete-content{width:100%;max-width:600px;text-align:center;animation:scaleIn .5s cubic-bezier(.4,0,.2,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.completion-header h2{font-size:2.5rem;font-weight:900;margin-bottom:.75rem;background:linear-gradient(135deg,var(--primary-600) 0%,var(--teal-600) 30%,var(--purple-600) 70%,var(--coral-600) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradientShift 6s ease infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.05))}.completion-message{font-size:1.25rem;font-weight:600;color:var(--gray-700);margin-bottom:2.5rem}.round-summary{background:#fffffff2;border-radius:var(--radius-2xl);padding:2rem;margin-bottom:2rem;box-shadow:var(--shadow-xl),inset 0 1px #fff;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5)}.round-summary h3{font-size:1.25rem;font-weight:700;color:var(--gray-800);margin-bottom:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem .75rem;background:linear-gradient(135deg,var(--gray-50),var(--gray-100));border-radius:var(--radius-xl);transition:all .3s ease;position:relative;overflow:hidden}.stat-item:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-100) 0%,var(--purple-100) 100%);opacity:0;transition:opacity .3s ease}.stat-item:hover{transform:translateY(-4px)}.stat-item:hover:before{opacity:1}.stat-value{font-size:2.25rem;font-weight:900;background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1}.stat-label{font-size:.875rem;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em;position:relative;z-index:1}.overall-progress{background:#fffffff2;border-radius:var(--radius-2xl);padding:1.5rem 2rem;margin-bottom:2rem;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5)}.overall-progress h3{font-size:1.125rem;font-weight:700;color:var(--gray-800);margin-bottom:1rem}.overall-stats{display:flex;flex-direction:column;gap:.75rem}.overall-stat{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--gray-50);border-radius:var(--radius-lg);transition:all .2s ease}.overall-stat:hover{background:var(--gray-100);transform:translate(4px)}.overall-label{font-size:.9375rem;font-weight:600;color:var(--gray-700)}.overall-value{font-size:1.125rem;font-weight:800;background:linear-gradient(135deg,var(--primary-600),var(--teal-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:1rem 2rem;font-size:1.125rem;font-weight:700;border:none;border-radius:var(--radius-2xl);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-width:180px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff}.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl),var(--glow-gold)}.btn-secondary{background:#fff;color:var(--gray-700);border:2px solid var(--gray-300)}.btn-secondary:hover{transform:translateY(-4px) scale(1.02);background:var(--gray-50);border-color:var(--gray-400)}@media (max-width: 768px){#root{padding:.5rem}.game-board{padding:1.5rem;margin:.5rem;min-height:600px;width:calc(100vw - 1rem);max-width:none;border-radius:var(--radius-2xl)}.stats-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.header-top{flex-direction:column;gap:1rem;align-items:center}.game-header h1{font-size:2.25rem;text-align:center}.reset-button{padding:12px 20px;font-size:.875rem;min-height:44px}.game-content{flex-direction:column;gap:1.5rem}.game-right{order:-1}.arabic-letter{font-size:7rem}.letter-container{padding:3rem 2rem;min-height:250px}.choices-grid{grid-template-columns:1fr;gap:1rem;width:100%;max-width:none}.choice-button{min-height:60px;padding:1.25rem 1.5rem;font-size:1.125rem}.score-tracker{gap:.75rem;justify-content:center;width:100%}.score-item{min-width:85px;padding:.75rem 1rem;min-height:44px}.score-value{font-size:1.5rem}.feedback-text{font-size:1.125rem}.feedback-message.compact{padding:1.125rem 1.375rem;gap:.875rem;margin-top:1.25rem;width:100%;max-width:none;justify-content:center}.feedback-message.compact .feedback-icon{width:36px;height:36px;font-size:1.625rem}.feedback-message.compact .feedback-text{font-size:1.125rem;text-align:center}.confirmation-dialog{padding:1.5rem;margin:1.25rem;width:calc(100vw - 2.5rem);max-width:350px}.confirmation-buttons{flex-direction:column;gap:1rem}.confirm-button{min-height:48px;padding:14px 24px}}@media (max-width: 480px){.game-board{padding:1.25rem;margin:.5rem}.game-header h1{font-size:2rem}.arabic-letter{font-size:5rem}.letter-container{padding:2rem 1.5rem;min-height:200px}.choice-button{padding:1rem 1.25rem;font-size:1rem}.score-item{min-width:75px;padding:.625rem .875rem}.score-value{font-size:1.25rem}.score-label{font-size:.75rem}}@media (min-width: 481px) and (max-width: 767px){.game-board{padding:2rem;margin:1rem;max-width:600px;margin-left:auto;margin-right:auto}.arabic-letter{font-size:7rem}.letter-container{padding:3rem 2.5rem;min-height:280px}.choice-button{padding:1.125rem 1.375rem;font-size:1.05rem}}@media (min-width: 768px) and (max-width: 1024px){.game-board{padding:2.5rem;margin:1.5rem;max-width:900px;margin-left:auto;margin-right:auto}.game-content{gap:3rem}.arabic-letter{font-size:8rem}.letter-container{padding:4rem 3rem;min-height:350px}.choices-grid{grid-template-columns:1fr 1fr;gap:1.25rem;max-width:400px}.choice-button{padding:1.375rem 1.75rem;font-size:1.125rem;border-radius:var(--radius-xl);min-height:60px}.score-item{min-width:110px;padding:1.125rem 1.375rem}.score-value{font-size:2rem}}@media (min-width: 1025px) and (max-width: 1280px){.game-board{padding:3rem;margin:2rem;max-width:1100px;margin-left:auto;margin-right:auto}.game-content{gap:4rem}.arabic-letter{font-size:9rem}.letter-container{padding:4.5rem 3.5rem;min-height:380px}.choices-grid{max-width:500px;gap:1.5rem}.choice-button{padding:1.5rem 2rem;font-size:1.2rem}}@media (min-width: 1281px){.game-board{padding:3.5rem;margin:2rem auto;max-width:1300px}.game-content{gap:5rem}.arabic-letter{font-size:10rem}.letter-container{padding:5rem 4rem;min-height:400px}.choices-grid{max-width:550px;gap:1.75rem}.choice-button{padding:1.75rem 2.25rem;font-size:1.25rem}.score-item{min-width:120px;padding:1.25rem 1.5rem}.score-value{font-size:2.125rem}}@media (min-width: 1601px){.game-board{padding:4rem;margin:3rem auto;max-width:1400px;min-height:800px}.game-header h1{font-size:3.5rem}.game-content{gap:6rem}.arabic-letter{font-size:11rem}.letter-container{padding:6rem 5rem;min-height:450px}.choices-grid{max-width:600px;gap:2rem}.choice-button{padding:2rem 2.5rem;font-size:1.375rem;border-radius:var(--radius-2xl)}.score-item{min-width:140px;padding:1.5rem 1.75rem}.score-value{font-size:2.5rem}.score-label{font-size:1rem}}.comeback-section{background:linear-gradient(135deg,var(--coral-50) 0%,var(--primary-50) 100%);border-radius:var(--radius-2xl);padding:2rem;margin-bottom:2rem;box-shadow:var(--shadow-lg),inset 0 1px #fff;backdrop-filter:blur(10px);border:2px solid var(--coral-200);position:relative;overflow:hidden}.comeback-section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--coral-500),var(--primary-500));border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}.comeback-section h3{font-size:1.5rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,var(--coral-600),var(--primary-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comeback-section p{font-size:1.0625rem;color:var(--gray-700);line-height:1.6;margin-bottom:1.5rem}.wrong-letters-preview{background:#fffc;border-radius:var(--radius-xl);padding:1.25rem;border:1px solid var(--coral-200)}.wrong-letters-preview strong{display:block;font-size:.9375rem;font-weight:700;color:var(--gray-800);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.025em}.letters-list{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.wrong-letter{background:linear-gradient(135deg,var(--coral-100),var(--coral-200));color:var(--coral-800);padding:.5rem .75rem;border-radius:var(--radius-lg);font-size:.9375rem;font-weight:600;border:1px solid var(--coral-300);box-shadow:var(--shadow-sm);transition:all .2s ease}.wrong-letter:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-comeback{background:linear-gradient(135deg,var(--coral-500),var(--coral-600));color:#fff;box-shadow:var(--shadow-lg),0 0 20px #fb923c4d;position:relative;overflow:hidden}.btn-comeback:after{content:"⚡";position:absolute;top:50%;right:1rem;transform:translateY(-50%);font-size:1.25rem;opacity:.8}.btn-comeback:hover:not(:disabled){background:linear-gradient(135deg,var(--coral-600),var(--coral-700));transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl),0 0 30px #fb923c66}.comeback-badge{display:inline-block;margin-left:.5rem;font-size:1.125rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@media (max-width: 768px){.comeback-section{padding:1.5rem;margin-bottom:1.5rem}.comeback-section h3{font-size:1.25rem}.comeback-section p{font-size:1rem}.wrong-letters-preview{padding:1rem}.letters-list{gap:.375rem}.wrong-letter{padding:.375rem .625rem;font-size:.875rem}.btn-comeback{min-width:100%;margin-bottom:.75rem}.btn-comeback:after{right:.75rem;font-size:1.125rem}}.game-mode-selector{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,var(--primary-50) 0%,var(--teal-50) 50%,var(--purple-50) 100%);background-attachment:fixed}.selector-title{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary-600),var(--teal-600),var(--purple-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem;text-shadow:var(--shadow-md);animation:gradientShift 6s ease infinite}.selector-subtitle{font-size:1.25rem;color:var(--gray-600);margin-bottom:3rem;text-align:center}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:800px;width:100%}.mode-card{background:#fffffff2;backdrop-filter:blur(10px);border:2px solid transparent;border-radius:1.5rem;padding:2.5rem 2rem;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);opacity:0;transition:opacity .4s ease}.mode-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-2xl)}.mode-card:hover:before{opacity:1}.letters-mode{border-color:var(--primary-200)}.letters-mode:hover{border-color:var(--primary-400);box-shadow:var(--shadow-xl),var(--glow-gold)}.numbers-mode{border-color:var(--teal-200)}.numbers-mode:hover{border-color:var(--teal-400);box-shadow:var(--shadow-xl),var(--glow-teal)}.mode-icon{font-size:5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;transition:all .4s ease}.letters-mode .mode-icon{background:linear-gradient(135deg,var(--primary-100),var(--primary-200));color:var(--primary-700)}.numbers-mode .mode-icon{background:linear-gradient(135deg,var(--teal-100),var(--teal-200));color:var(--teal-700)}.mode-card:hover .mode-icon{transform:scale(1.1) rotate(5deg)}.mode-title{font-size:1.75rem;font-weight:700;margin-bottom:.75rem;color:var(--gray-800)}.mode-description{font-size:1rem;color:var(--gray-600);line-height:1.6;margin-bottom:1.25rem}.mode-count{display:inline-block;padding:.5rem 1.25rem;border-radius:2rem;font-size:.875rem;font-weight:600;transition:all .3s ease}.letters-mode .mode-count{background:linear-gradient(135deg,var(--primary-100),var(--primary-200));color:var(--primary-700)}.numbers-mode .mode-count{background:linear-gradient(135deg,var(--teal-100),var(--teal-200));color:var(--teal-700)}.mode-card:hover .mode-count{transform:scale(1.05)}.back-to-menu-button{position:fixed;top:1.5rem;left:1.5rem;padding:.75rem 1.5rem;background:#fffffff2;backdrop-filter:blur(10px);border:2px solid var(--gray-200);border-radius:.75rem;color:var(--gray-700);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);z-index:100;display:flex;align-items:center;gap:.5rem}.back-to-menu-button:hover{background:#fff;border-color:var(--primary-400);color:var(--primary-700);transform:translate(-3px);box-shadow:var(--shadow-lg)}.back-to-menu-button:active{transform:translate(-1px)}.support-button{position:fixed;top:1.5rem;right:1.5rem;padding:.875rem 1.5rem;background:linear-gradient(135deg,#ff5f5f,#ff8a4c,#ffc947);color:#fff;border:none;border-radius:var(--radius-xl);font-size:1rem;font-weight:700;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg),0 0 20px #ff5f5f66;z-index:100;display:flex;align-items:center;gap:.625rem;position:relative;overflow:hidden;backdrop-filter:blur(10px);border:2px solid rgba(255,95,95,.3)}.support-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ff5f5f,#ff8a4c);opacity:0;transition:opacity .3s ease}.support-button:hover:before{opacity:1}.support-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-2xl),0 0 30px #ff5f5f99,0 0 60px #ff8a4c4d;border-color:#ff5f5f80}.support-button:active{transform:translateY(-2px) scale(1.02);transition:all .1s ease}.support-icon{font-size:1.25rem;position:relative;z-index:2;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.support-text{position:relative;z-index:2;font-family:inherit;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.1)}.support-button:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s ease}.support-button:hover:after{left:100%}@media (max-width: 768px){.support-button{top:1rem;right:1rem;padding:.75rem 1.25rem;font-size:.9375rem;border-radius:var(--radius-lg)}.support-text{display:none}.support-icon{font-size:1.375rem}}@media (max-width: 480px){.support-button{top:.75rem;right:.75rem;padding:.75rem;min-width:48px;min-height:48px;justify-content:center}}@media (min-width: 769px){.support-button{padding:1rem 1.75rem;font-size:1.0625rem}.support-icon{font-size:1.375rem}}@media (max-width: 768px){.selector-title{font-size:2.5rem}.selector-subtitle{font-size:1rem;margin-bottom:2rem}.mode-cards{grid-template-columns:1fr;gap:1.5rem}.mode-card{padding:2rem 1.5rem}.mode-icon{font-size:4rem;width:100px;height:100px}.mode-title{font-size:1.5rem}.back-to-menu-button{top:1rem;left:1rem;padding:.625rem 1.25rem;font-size:.875rem}}