body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app-header{background:linear-gradient(135deg,var(--color-primary-600) 0,var(--color-secondary-600) 100%);border-bottom:3px solid var(--color-primary-400);box-shadow:var(--shadow-lg);color:var(--color-neutral-0);padding:var(--space-2) var(--space-6);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-content{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:1200px}.header-left{flex:0 0 auto}.app-title{align-items:center;color:var(--color-neutral-0);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);gap:var(--space-2);letter-spacing:-.5px;margin:0}.title-icon{font-size:28px}.header-center{flex:1 1;text-align:center}.user-greeting{color:var(--color-neutral-100);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-shadow:0 1px 2px #0003}.header-right{flex:0 0 auto}.btn-home{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:var(--radius-lg);color:var(--color-neutral-0);cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-1);padding:var(--space-2) var(--space-3);transition:all var(--transition-normal)}.btn-home:hover{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.btn-home:active{transform:scale(.95)}.icon-home{font-size:20px}.btn-home-text{display:none}@media (min-width:640px){.btn-home-text{display:inline}.app-title{font-size:var(--font-size-2xl)}}@media (max-width:640px){.header-content{gap:var(--space-2);padding:var(--space-2) var(--space-3)}.app-title{font-size:var(--font-size-lg)}.user-greeting{font-size:var(--font-size-sm)}.header-center{display:none}.btn-home{padding:var(--space-1) var(--space-2)}.icon-home{font-size:18px}}:root{--color-primary-50:#eef2ff;--color-primary-100:#e0e7ff;--color-primary-200:#c7d2fe;--color-primary-300:#a5b4fc;--color-primary-400:#818cf8;--color-primary-500:#6366f1;--color-primary-600:#4f46e5;--color-primary-700:#4338ca;--color-primary-800:#3730a3;--color-primary-900:#312e81;--color-secondary-50:#fdf2f8;--color-secondary-100:#fce7f3;--color-secondary-200:#fbcfe8;--color-secondary-300:#f9a8d4;--color-secondary-400:#f472b6;--color-secondary-500:#ec4899;--color-secondary-600:#db2777;--color-secondary-700:#be185d;--color-secondary-800:#9d174d;--color-secondary-900:#831843;--color-success-50:#ecfdf5;--color-success-100:#d1fae5;--color-success-200:#a7f3d0;--color-success-300:#6ee7b7;--color-success-400:#34d399;--color-success-500:#10b981;--color-success-600:#059669;--color-success-700:#047857;--color-success-800:#065f46;--color-success-900:#064e3b;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-error-50:#fef2f2;--color-error-100:#fee2e2;--color-error-200:#fecaca;--color-error-300:#fca5a5;--color-error-400:#f87171;--color-error-500:#ef4444;--color-error-600:#dc2626;--color-error-700:#b91c1c;--color-error-800:#991b1b;--color-error-900:#7f1d1d;--color-info-50:#f0f9ff;--color-info-100:#e0f2fe;--color-info-200:#bae6fd;--color-info-300:#7dd3fc;--color-info-400:#38bdf8;--color-info-500:#0ea5e9;--color-info-600:#0284c7;--color-info-700:#0369a1;--color-info-800:#075985;--color-info-900:#0c4a6e;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-gold:#fbbf24;--color-gold-light:#fcd34d;--color-gold-dark:#d97706;--color-purple-accent:#8b5cf6;--color-purple-light:#a78bfa;--color-purple-dark:#7c3aed;--gradient-primary:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-purple-accent) 100%);--gradient-primary-hover:linear-gradient(135deg,var(--color-primary-600) 0%,var(--color-purple-dark) 100%);--gradient-secondary:linear-gradient(135deg,var(--color-secondary-400) 0%,var(--color-secondary-600) 100%);--gradient-secondary-hover:linear-gradient(135deg,var(--color-secondary-500) 0%,var(--color-secondary-700) 100%);--gradient-success:linear-gradient(135deg,var(--color-success-500) 0%,var(--color-success-600) 100%);--gradient-success-hover:linear-gradient(135deg,var(--color-success-600) 0%,var(--color-success-700) 100%);--gradient-warning:linear-gradient(135deg,var(--color-warning-400) 0%,var(--color-warning-600) 100%);--gradient-warning-hover:linear-gradient(135deg,var(--color-warning-500) 0%,var(--color-warning-700) 100%);--gradient-error:linear-gradient(135deg,var(--color-error-400) 0%,var(--color-error-600) 100%);--gradient-error-hover:linear-gradient(135deg,var(--color-error-500) 0%,var(--color-error-700) 100%);--gradient-info:linear-gradient(135deg,var(--color-info-400) 0%,var(--color-info-600) 100%);--gradient-info-hover:linear-gradient(135deg,var(--color-info-500) 0%,var(--color-info-700) 100%);--gradient-background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-purple-accent) 50%,var(--color-secondary-400) 100%);--gradient-gold:linear-gradient(135deg,var(--color-gold) 0%,var(--color-gold-light) 100%);--gradient-card:linear-gradient(135deg,var(--color-neutral-0) 0%,var(--color-neutral-50) 100%);--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-primary:0 4px 14px 0 #6366f166;--shadow-primary-lg:0 10px 25px -3px #6366f180;--shadow-secondary:0 4px 14px 0 #ec489966;--shadow-secondary-lg:0 10px 25px -3px #ec489980;--shadow-success:0 4px 14px 0 #10b98166;--shadow-success-lg:0 10px 25px -3px #10b98180;--shadow-warning:0 4px 14px 0 #f59e0b66;--shadow-warning-lg:0 10px 25px -3px #f59e0b80;--shadow-error:0 4px 14px 0 #ef444466;--shadow-error-lg:0 10px 25px -3px #ef444480;--shadow-info:0 4px 14px 0 #0ea5e966;--shadow-info-lg:0 10px 25px -3px #0ea5e980;--radius-none:0;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;--font-family-mono:"JetBrains Mono","Fira Code","Consolas",monospace;--font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:30px;--font-size-4xl:36px;--font-size-5xl:48px;--font-size-6xl:60px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--transition-fast:150ms ease;--transition-normal:200ms ease;--transition-slow:300ms ease;--transition-slower:500ms ease;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700}.text-primary{color:#6366f1;color:var(--color-primary-500)}.text-secondary{color:#ec4899;color:var(--color-secondary-500)}.text-success{color:#10b981;color:var(--color-success-500)}.text-warning{color:#f59e0b;color:var(--color-warning-500)}.text-error{color:#ef4444;color:var(--color-error-500)}.text-info{color:#0ea5e9;color:var(--color-info-500)}.text-muted{color:#737373;color:var(--color-neutral-500)}.text-dark{color:#262626;color:var(--color-neutral-800)}.text-light{color:#fff;color:var(--color-neutral-0)}.bg-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary)}.bg-secondary{background:linear-gradient(135deg,#f472b6,#db2777);background:var(--gradient-secondary)}.bg-success{background:linear-gradient(135deg,#10b981,#059669);background:var(--gradient-success)}.bg-warning{background:linear-gradient(135deg,#fbbf24,#d97706);background:var(--gradient-warning)}.bg-error{background:linear-gradient(135deg,#f87171,#dc2626);background:var(--gradient-error)}.bg-info{background:linear-gradient(135deg,#38bdf8,#0284c7);background:var(--gradient-info)}.bg-light{background:#f5f5f5;background:var(--color-neutral-100)}.bg-white{background:#fff;background:var(--color-neutral-0)}.bg-card{background:#fffffff2}.text-gradient-primary{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text}.text-gradient-secondary{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f472b6,#db2777);background:var(--gradient-secondary);-webkit-background-clip:text;background-clip:text}.btn{border-radius:12px;font-size:16px;font-weight:600;gap:8px;padding:12px 24px;padding:var(--space-3) var(--space-6);transition:all .2s ease;white-space:nowrap}.btn-lg{border-radius:16px;border-radius:var(--radius-xl);font-size:20px;font-size:var(--font-size-xl);padding:20px 40px;padding:var(--space-5) var(--space-10)}.btn-sm{border-radius:8px;border-radius:var(--radius-md);font-size:14px;padding:8px 16px;padding:var(--space-2) var(--space-4)}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 14px 0 #6366f166;color:#fff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5,#7c3aed);background:var(--gradient-primary-hover);box-shadow:0 10px 25px -3px #6366f180}.btn-secondary{background:linear-gradient(135deg,#f472b6,#db2777);box-shadow:0 4px 14px 0 #ec489966;box-shadow:var(--shadow-secondary);color:#fff}.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,#ec4899,#be185d);background:var(--gradient-secondary-hover);box-shadow:0 10px 25px -3px #ec489980;box-shadow:var(--shadow-secondary-lg);transform:translateY(-2px)}.btn-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px 0 #10b98166;color:#fff}.btn-success:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);background:var(--gradient-success-hover);box-shadow:0 10px 25px -3px #10b98180}.btn-warning{background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 4px 14px 0 #f59e0b66;box-shadow:var(--shadow-warning);color:#fff;color:var(--color-neutral-0)}.btn-warning:hover:not(:disabled){background:linear-gradient(135deg,#f59e0b,#b45309);background:var(--gradient-warning-hover);box-shadow:0 10px 25px -3px #f59e0b80;box-shadow:var(--shadow-warning-lg)}.btn-error{background:linear-gradient(135deg,#f87171,#dc2626);background:var(--gradient-error);box-shadow:0 4px 14px 0 #ef444466;box-shadow:var(--shadow-error);color:#fff;color:var(--color-neutral-0)}.btn-error:hover:not(:disabled){background:linear-gradient(135deg,#ef4444,#b91c1c);background:var(--gradient-error-hover);box-shadow:0 10px 25px -3px #ef444480;box-shadow:var(--shadow-error-lg);transform:translateY(-2px)}.btn-info{background:linear-gradient(135deg,#38bdf8,#0284c7);box-shadow:0 4px 14px 0 #0ea5e966;color:#fff}.btn-info:hover:not(:disabled){background:linear-gradient(135deg,#0ea5e9,#0369a1);background:var(--gradient-info-hover);box-shadow:0 10px 25px -3px #0ea5e980}.btn-outline{background:#0000;border:2px solid #6366f1;color:#6366f1;color:var(--color-primary-500)}.btn-outline:hover:not(:disabled){background:#eef2ff}.btn-ghost{background:#0000;color:#525252;color:var(--color-neutral-600)}.btn-ghost:hover:not(:disabled){background:#f5f5f5;background:var(--color-neutral-100)}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #ffffff80;border-radius:24px;border-radius:var(--radius-3xl);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;box-shadow:var(--shadow-xl);padding:24px;padding:var(--space-6)}.card-elevated{box-shadow:0 25px 50px -12px #00000040;box-shadow:var(--shadow-2xl)}.input{background:#fff;background:var(--color-neutral-0);border:2px solid #d4d4d4;border:2px solid var(--color-neutral-300);border-radius:12px;border-radius:var(--radius-lg);box-sizing:border-box;font-size:16px;font-size:var(--font-size-base);padding:16px;padding:var(--space-4);transition:all .2s ease;transition:all var(--transition-normal);width:100%}.input:focus{border-color:#6366f1;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #6366f11a;outline:none}.input-fancy{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#6366f1,#8b5cf6) border-box;background:linear-gradient(var(--color-neutral-0),var(--color-neutral-0)) padding-box,var(--gradient-primary) border-box;border:3px solid #0000;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md)}.input-fancy:focus{box-shadow:0 4px 14px 0 #6366f166;box-shadow:var(--shadow-primary)}.badge{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:#fff;color:var(--color-neutral-0);display:inline-flex;font-size:12px;font-size:var(--font-size-xs);font-weight:600;font-weight:var(--font-weight-semibold);gap:4px;gap:var(--space-1);padding:4px 12px;padding:var(--space-1) var(--space-3)}.badge-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary)}.badge-secondary{background:linear-gradient(135deg,#f472b6,#db2777);background:var(--gradient-secondary)}.badge-success{background:linear-gradient(135deg,#10b981,#059669);background:var(--gradient-success)}.badge-warning{background:linear-gradient(135deg,#fbbf24,#d97706);background:var(--gradient-warning)}.badge-error{background:linear-gradient(135deg,#f87171,#dc2626);background:var(--gradient-error)}.badge-info{background:linear-gradient(135deg,#38bdf8,#0284c7);background:var(--gradient-info)}.modal-backdrop{background:#0009;padding:16px;z-index:400;z-index:var(--z-modal-backdrop)}.modal-content{background:#fff;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;max-height:90vh;padding:32px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px;gap:var(--space-1)}.gap-2{gap:8px;gap:var(--space-2)}.gap-3{gap:12px;gap:var(--space-3)}.gap-4{gap:16px;gap:var(--space-4)}.gap-6{gap:24px;gap:var(--space-6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:700;font-weight:var(--font-weight-bold)}.font-semibold{font-weight:600;font-weight:var(--font-weight-semibold)}.icon-sm{font-size:16px!important}.icon-md{font-size:20px!important}.icon-lg{font-size:24px!important}.icon-xl{font-size:32px!important}body,html{color:var(--color-neutral-800);font-family:var(--font-family);height:100%;margin:0;padding:0}.trainer-container{align-items:flex-start;animation:gradientShift 15s ease infinite;background:var(--gradient-background);background-size:200% 200%;display:flex;justify-content:center;margin-top:-50px;min-height:100vh;padding:var(--space-3) var(--space-5);padding-top:60px;position:relative}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.trainer-card{animation:cardFloat 3s ease-in-out infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:2px solid #ffffff80;border-radius:var(--radius-3xl);box-shadow:var(--shadow-2xl);max-width:420px;padding:var(--space-6) var(--space-8);text-align:center;width:100%}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.trainer-button{background:var(--gradient-info);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-info);color:var(--color-neutral-0);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:var(--space-2);padding:var(--space-3) var(--space-5);transition:all var(--transition-normal)}.trainer-button:hover{background:var(--gradient-info-hover);box-shadow:var(--shadow-info-lg);transform:translateY(-2px)}.trainer-button:active{transform:scale(.97)}.game-button{overflow:hidden;position:relative}.game-button:before{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.game-button:active:before{height:300px;width:300px}.btn-logout{background:var(--gradient-primary);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-primary);color:var(--color-neutral-0);cursor:pointer;flex:1 1;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);min-width:120px;padding:var(--space-3) var(--space-5);transition:all var(--transition-normal)}.btn-logout:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.btn-exit{background:var(--gradient-secondary);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-secondary);color:var(--color-neutral-0);cursor:pointer;flex:1 1;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);min-width:120px;padding:var(--space-3) var(--space-5);transition:all var(--transition-normal)}.btn-exit:hover{box-shadow:var(--shadow-secondary-lg);transform:translateY(-2px)}.btn-play-word{background:var(--gradient-info);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-info);color:var(--color-neutral-0);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);margin-bottom:var(--space-3);padding:var(--space-4) var(--space-8);transition:all var(--transition-normal)}.btn-play-word:hover{box-shadow:var(--shadow-info-lg);transform:scale(1.05)}.btn-check{background:var(--gradient-success);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-success);color:var(--color-neutral-0);cursor:pointer;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);padding:var(--space-4) var(--space-12);text-shadow:1px 1px 2px #0000004d;transition:all var(--transition-normal)}.btn-check:hover{box-shadow:var(--shadow-success-lg);transform:scale(1.05)}.btn-next{background:linear-gradient(135deg,var(--color-secondary-400) 0,var(--color-warning-400) 100%);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-secondary);color:var(--color-neutral-0);cursor:pointer;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);padding:var(--space-4) var(--space-12);text-shadow:1px 1px 2px #0003;transition:all var(--transition-normal)}.btn-next:hover{box-shadow:var(--shadow-secondary-lg);transform:scale(1.05)}.trainer-input{border:2px solid var(--color-neutral-300);border-radius:var(--radius-lg);font-size:var(--font-size-base);margin:var(--space-2) auto;padding:var(--space-3);text-align:center;transition:all var(--transition-normal);width:80%}.trainer-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #6366f11a;outline:none}.trainer-input-enhanced{font-family:var(--font-family)}.trainer-input-enhanced::placeholder{color:var(--color-neutral-400);font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);letter-spacing:1px}.trainer-input-enhanced:focus{animation:pulse .3s ease-in-out}.trainer-input-enhanced:disabled{background:var(--color-neutral-100);cursor:not-allowed}.info{color:var(--color-neutral-800);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-3)}.info,.result{font-size:var(--font-size-lg)}.result{font-weight:var(--font-weight-medium);margin-top:var(--space-3)}.flash-card{background:linear-gradient(135deg,var(--color-warning-50) 0,var(--color-warning-100) 100%);border:3px solid var(--color-warning-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);color:var(--color-neutral-800);cursor:pointer;font-size:var(--font-size-5xl);font-weight:var(--font-weight-bold);margin:var(--space-8) auto;max-width:320px;padding:var(--space-10) var(--space-5);text-align:center;transition:all var(--transition-normal);width:80%}.flash-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.flash-card>div{color:var(--color-neutral-700);font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed);margin-top:var(--space-3)}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;display:flex;inset:0;justify-content:center;position:fixed;z-index:var(--z-modal)}.modal-wrong{animation:wrongShake .5s ease-in-out;background:var(--gradient-error);border-radius:var(--radius-3xl);box-shadow:var(--shadow-2xl);padding:var(--space-16) var(--space-16);text-align:center}.modal-wrong-icon{color:var(--color-neutral-0);font-size:80px;margin-bottom:var(--space-5)}.modal-wrong-title{color:var(--color-neutral-0);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-8);text-shadow:2px 2px 4px #0003}.modal-wrong-message{color:var(--color-neutral-0);font-size:var(--font-size-2xl);margin-bottom:var(--space-4);opacity:.9}.modal-wrong-correct-label{color:var(--color-neutral-0);font-size:var(--font-size-xl);margin-top:var(--space-5);opacity:.95}.modal-wrong-correct-word{background:#fff3;border-radius:var(--radius-xl);color:var(--color-neutral-0);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);letter-spacing:3px;margin-top:var(--space-4);padding:var(--space-5);text-shadow:3px 3px 6px #0000004d}.modal-success-overlay{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:fixed;z-index:var(--z-modal)}.modal-success{animation:successPop .6s cubic-bezier(.68,-.55,.265,1.55);background:var(--gradient-success);border:6px solid var(--color-neutral-0);border-radius:var(--radius-3xl);box-shadow:var(--shadow-success-lg);color:var(--color-neutral-0);font-size:72px;font-weight:var(--font-weight-bold);padding:var(--space-16) var(--space-16);text-align:center}.modal-success-icon{margin-bottom:var(--space-3)}.modal-success-text{font-size:var(--font-size-4xl)}.modal-success-points{animation:bounce .5s ease-in-out .3s;color:var(--color-gold);font-size:var(--font-size-5xl);margin-top:var(--space-5)}.game-stats-header{align-items:center;background:var(--gradient-primary);border-radius:var(--radius-lg);color:var(--color-neutral-0);display:flex;justify-content:space-between;margin-bottom:var(--space-4);padding:var(--space-3)}.game-stats-item,.game-stats-points{font-size:var(--font-size-base)}.game-stats-points,.perfect-score-banner{font-weight:var(--font-weight-bold)}.perfect-score-banner{align-items:center;background:var(--gradient-gold);border-radius:var(--radius-md);box-shadow:var(--shadow-warning);color:var(--color-neutral-800);display:flex;font-size:var(--font-size-sm);justify-content:space-between;margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3)}.personal-best{color:var(--color-error-600)}.progress-container{margin-bottom:var(--space-4)}.progress-header{color:var(--color-neutral-500);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-bottom:var(--space-1)}.progress-bar-bg{background:var(--color-neutral-200);border-radius:var(--radius-lg);height:12px;overflow:hidden;position:relative}.progress-bar-fill{border-radius:var(--radius-lg);height:100%;transition:width var(--transition-slower)}.progress-bar-fill.above-best{background:var(--gradient-success)}.progress-bar-fill.below-best{background:var(--gradient-info)}.progress-best-marker{background:var(--color-error-600);bottom:0;box-shadow:0 0 4px #d32f2fcc;position:absolute;top:0;width:2px}.achievements-container{background:var(--color-neutral-100);border-radius:var(--radius-md);margin-bottom:var(--space-4);text-align:left}.achievements-title{color:var(--color-neutral-800);margin-top:0}.achievement-badge{color:var(--color-neutral-0);font-size:var(--font-size-xs);padding:var(--space-1) var(--space-3)}.badge-perfect{background:var(--gradient-success)}.badge-streak{background:var(--gradient-warning)}.badge-first-try{background:linear-gradient(135deg,var(--color-purple-accent) 0,var(--color-purple-dark) 100%)}.badge-high-score{background:var(--gradient-info)}.next-challenge{background:var(--gradient-primary);border-radius:var(--radius-md);color:var(--color-neutral-0);margin-bottom:var(--space-4)}.next-challenge h3{margin-top:0}.next-challenge-tip{margin-top:var(--space-3);opacity:.9}.letter-boxes-container{margin:var(--space-8) auto;max-width:500px}.letter-boxes-label{color:var(--color-neutral-500);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--space-3)}.hidden-input{background:#0000;border:none;color:#0000;height:1px;left:0;opacity:.01;pointer-events:auto;position:absolute;top:0;width:1px;z-index:1}.letter-boxes-area{border-radius:var(--radius-xl);display:flex;flex-wrap:nowrap;gap:var(--space-2);justify-content:center;min-height:80px;overflow-x:auto;overflow-y:hidden;padding:var(--space-5);position:relative;transition:all var(--transition-normal)}.letter-boxes-area.active{background:linear-gradient(135deg,var(--color-primary-50) 0,var(--color-primary-100) 100%);border:3px dashed var(--color-primary-500);box-shadow:var(--shadow-md);cursor:text}.letter-boxes-area.locked{background:var(--color-neutral-100);border:3px dashed var(--color-neutral-300);cursor:not-allowed}.letter-boxes-placeholder{animation:pulse 2s ease-in-out infinite;color:var(--color-neutral-400);font-size:var(--font-size-base);text-align:center;width:100%}.letter-box{align-items:center;animation:popIn .3s cubic-bezier(.68,-.55,.265,1.55);background:var(--gradient-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--color-neutral-0);display:flex;font-family:var(--font-family);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);height:60px;justify-content:center;text-transform:uppercase;width:50px}.letter-cursor{align-self:center;animation:blink 1s step-end infinite;background:var(--color-primary-500);border-radius:2px;height:50px;width:3px}.letter-boxes-footer{align-items:center;color:var(--color-neutral-500);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-top:var(--space-3)}.letter-boxes-hint{font-style:italic}.letter-count{color:var(--color-primary-500);font-weight:var(--font-weight-bold)}.score-comparison{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--color-neutral-0)}.score-comparison.new-best{background:var(--gradient-success)}.score-comparison.matched-best{background:var(--gradient-warning)}.score-comparison.below-best{background:var(--gradient-info)}.score-comparison-points{font-size:var(--font-size-5xl);margin-bottom:var(--space-3)}.score-comparison-message{font-size:var(--font-size-lg)}.score-comparison-percentage{margin-top:var(--space-3);opacity:.9}.leaderboard{margin-top:var(--space-5)}.leaderboard td,.leaderboard th{border:1px solid var(--color-neutral-200);padding:var(--space-2)}.leaderboard th{background:var(--gradient-info)}.leaderboard tr:nth-child(2n){background-color:var(--color-neutral-50)}.floating-score{animation:floatUp 1.5s ease-out forwards;font-size:var(--font-size-4xl);text-shadow:2px 2px 4px #0000004d}.button-container{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-5)}.attempt-info-bar{background:var(--color-neutral-100);border-radius:var(--radius-md);color:var(--color-neutral-600);font-size:var(--font-size-sm);margin-bottom:var(--space-4);padding:var(--space-2);text-align:center}.summary{margin-top:var(--space-5)}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.shake-animation{animation:shake .5s}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse-animation{animation:pulse .3s ease-in-out}@keyframes popIn{0%{opacity:0;transform:scale(0) rotate(-10deg)}50%{transform:scale(1.2) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes successPop{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{transform:scale(1.1) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes wrongShake{0%,to{transform:translateX(0) rotate(0deg)}10%,30%,50%,70%,90%{transform:translateX(-10px) rotate(-2deg)}20%,40%,60%,80%{transform:translateX(10px) rotate(2deg)}}@keyframes buttonPulse{0%{box-shadow:0 0 0 0 #6366f1b3}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 0 0 #6366f100}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.welcome-screen{padding:var(--space-6);text-align:center}.welcome-icon{margin-bottom:var(--space-4)}.welcome-icon .icon-main{animation:bounce 2s ease-in-out infinite;color:var(--color-primary-500);font-size:72px}.welcome-title{color:var(--color-primary-600);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-2) 0}.welcome-subtitle{color:var(--color-neutral-500);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);margin:0 0 var(--space-8) 0}.name-section{margin-bottom:var(--space-8)}.name-label{align-items:center;color:var(--color-neutral-700);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4)}.name-label .icon-sm{color:var(--color-primary-500)}.name-input{background:var(--color-neutral-0);border:2px solid var(--color-neutral-200);border-radius:var(--radius-xl);box-sizing:border-box;color:var(--color-neutral-800);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);max-width:320px;outline:none;padding:var(--space-4) var(--space-5);text-align:center;transition:all var(--transition-normal);width:100%}.name-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-100)}.name-input::placeholder{color:var(--color-neutral-400)}.name-greeting{align-items:center;animation:popIn .3s ease-out;color:var(--color-success-600);display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;margin-top:var(--space-4)}.name-greeting .icon-sm{color:var(--color-success-500)}.list-section{animation:popIn .4s ease-out}.list-label{align-items:center;color:var(--color-neutral-700);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4)}.list-label .icon-sm{color:var(--color-primary-500)}.list-select{-webkit-appearance:none;appearance:none;background:var(--color-neutral-0);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right var(--space-4) center;background-repeat:no-repeat;background-size:20px;border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);color:var(--color-neutral-700);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);max-width:320px;outline:none;padding:var(--space-4) var(--space-5);padding-right:var(--space-12);transition:all var(--transition-normal);width:100%}.list-select:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-100)}.list-select:hover{border-color:var(--color-primary-400)}.list-divider{align-items:center;color:var(--color-neutral-400);display:flex;font-size:var(--font-size-sm);margin:var(--space-5) 0}.list-divider:after,.list-divider:before{background:var(--color-neutral-200);content:"";flex:1 1;height:1px}.list-divider span{padding:0 var(--space-4)}.list-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.icon-sm{font-size:18px!important}.icon-md,.icon-sm{vertical-align:middle}.icon-md{font-size:24px!important}.icon-lg{font-size:32px!important}.loading-indicator{align-items:center;color:var(--color-primary-500);display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}.loading-spin{animation:spin 1s linear infinite}.modal-backdrop{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;display:flex;inset:0;justify-content:center;padding:var(--space-4);position:fixed;z-index:var(--z-modal)}.modal-content{background:var(--color-neutral-0);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);max-height:85vh;max-width:500px;overflow:auto;padding:var(--space-8);width:100%}.modal-title{align-items:center;color:var(--color-primary-600);display:flex;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--space-3);justify-content:center;margin:0 0 var(--space-5) 0}.modal-title .icon-md{color:var(--color-primary-500)}.modal-instructions{margin-bottom:var(--space-5)}.modal-instructions p{align-items:center;color:var(--color-neutral-600);display:flex;font-size:var(--font-size-sm);gap:var(--space-2);margin:var(--space-2) 0}.modal-instructions .icon-sm{color:var(--color-primary-500);flex-shrink:0}.modal-instructions code{background:var(--color-neutral-100);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.modal-textarea{border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-sizing:border-box;font-family:var(--font-family-mono);font-size:var(--font-size-base);margin-bottom:var(--space-5);min-height:180px;padding:var(--space-4);resize:vertical;transition:all var(--transition-normal);width:100%}.modal-textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-100);outline:none}.modal-textarea::placeholder{color:var(--color-neutral-400)}.modal-actions{display:flex;gap:var(--space-3);justify-content:flex-end}.btn{align-items:center;border:none;border-radius:var(--radius-lg);cursor:pointer;display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;padding:var(--space-3) var(--space-5);text-decoration:none;transition:all var(--transition-normal)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:var(--gradient-primary);box-shadow:var(--shadow-primary);color:var(--color-neutral-0)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.btn-success{background:var(--gradient-success);box-shadow:var(--shadow-success);color:var(--color-neutral-0)}.btn-success:hover:not(:disabled){box-shadow:var(--shadow-success-lg);transform:translateY(-2px)}.btn-outline{background:var(--color-neutral-0);border:2px solid var(--color-primary-500);box-shadow:none;color:var(--color-primary-600)}.btn-outline:hover:not(:disabled){background:var(--color-primary-50);transform:translateY(-2px)}.btn-ghost{background:var(--color-neutral-100);box-shadow:none;color:var(--color-neutral-700)}.btn-ghost:hover:not(:disabled){background:var(--color-neutral-200)}.btn-link{background:#0000;box-shadow:none;color:var(--color-neutral-500);font-size:var(--font-size-sm)}.btn-link:hover:not(:disabled){background:#0000;color:var(--color-primary-500)}.mode-selection{padding:var(--space-4);text-align:center}.mode-title{color:var(--color-primary-600);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-6) 0}.mode-list-info{background:var(--color-primary-50);border:1px solid var(--color-primary-100);border-radius:var(--radius-xl);margin-bottom:var(--space-8);padding:var(--space-4) var(--space-5)}.mode-list-name{align-items:center;color:var(--color-primary-600);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;margin-bottom:var(--space-1)}.mode-list-name .icon-sm{color:var(--color-primary-500)}.mode-list-count{color:var(--color-neutral-500);font-size:var(--font-size-sm)}.mode-buttons{display:flex;flex-direction:column;gap:var(--space-4);margin:0 auto;max-width:320px}.btn-mode{border-radius:var(--radius-xl);font-size:var(--font-size-lg);gap:var(--space-3);padding:var(--space-5) var(--space-6)}.btn-mode .icon-md{font-size:24px!important}.btn-mode:hover:not(:disabled){transform:translateY(-3px)}.btn-info{background:var(--gradient-info);box-shadow:var(--shadow-info);color:var(--color-neutral-0)}.btn-info:hover:not(:disabled){box-shadow:var(--shadow-info-lg);transform:translateY(-2px)}.flashcard-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.flashcard-progress{color:var(--color-neutral-500);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.flashcard{align-items:center;background:var(--color-neutral-0);border:2px solid var(--color-neutral-200);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);cursor:pointer;display:flex;justify-content:center;margin-bottom:var(--space-6);min-height:180px;padding:var(--space-10) var(--space-6);position:relative;transition:all var(--transition-normal)}.flashcard:hover{border-color:var(--color-primary-300);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.flashcard-back,.flashcard-front{text-align:center;width:100%}.flashcard-word{color:var(--color-primary-600);font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold)}.flashcard-meaning{color:var(--color-neutral-700);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin-bottom:var(--space-3)}.flashcard-meaning-zh{color:var(--color-neutral-500);font-size:var(--font-size-lg)}.flashcard-flip-hint{bottom:var(--space-3);color:var(--color-neutral-300);font-size:24px!important;position:absolute;right:var(--space-3)}.flashcard-actions{margin-bottom:var(--space-5)}.flashcard-actions,.flashcard-nav{display:flex;gap:var(--space-3);justify-content:center}.practice-mode{background:var(--color-neutral-50);border-radius:var(--radius-xl);padding:var(--space-6)}.practice-title{align-items:center;color:var(--color-primary-600);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-4) 0}.practice-title .icon-md{color:var(--color-primary-500)}.practice-progress-label{color:var(--color-neutral-600);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--space-2);text-align:center}.practice-progress-bar{background:var(--color-neutral-200);border-radius:var(--radius-full);height:8px;margin-bottom:var(--space-5);overflow:hidden}.practice-progress-fill{background:var(--gradient-primary);border-radius:var(--radius-full);height:100%;transition:width var(--transition-normal)}.practice-input-area{display:flex;gap:var(--space-3);margin-bottom:var(--space-5)}.practice-input{border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);flex:1 1;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);outline:none;padding:var(--space-3) var(--space-4);text-align:center;transition:all var(--transition-normal)}.practice-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px var(--color-primary-100)}.practice-attempts{background:var(--color-neutral-0);border-radius:var(--radius-lg);max-height:200px;overflow-y:auto;padding:var(--space-4)}.practice-attempts-label{color:var(--color-neutral-700);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-3)}.practice-attempts-empty{color:var(--color-neutral-400);font-size:var(--font-size-sm);font-style:italic;padding:var(--space-4);text-align:center}.practice-attempts-list{display:flex;flex-direction:column;gap:var(--space-2)}.practice-attempt{align-items:center;border-radius:var(--radius-md);display:flex;font-size:var(--font-size-sm);justify-content:space-between;padding:var(--space-2) var(--space-3)}.practice-attempt.correct{background:var(--color-success-50);border:1px solid var(--color-success-200)}.practice-attempt.incorrect{background:var(--color-error-50);border:1px solid var(--color-error-200)}.practice-attempt-text{font-weight:var(--font-weight-medium)}.practice-attempt.correct .practice-attempt-text{color:var(--color-success-700)}.practice-attempt.incorrect .practice-attempt-text{color:var(--color-error-700)}.practice-attempt-icon{font-size:18px}.practice-attempt.correct .practice-attempt-icon{color:var(--color-success-500)}.practice-attempt.incorrect .practice-attempt-icon{color:var(--color-error-500)}.wordlist-view{margin:0 auto;max-width:800px;padding:var(--space-5)}.wordlist-title{-webkit-text-fill-color:#0000;align-items:center;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;display:flex;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--space-3);justify-content:center;margin:0 0 var(--space-5) 0}.wordlist-title .icon-md{-webkit-text-fill-color:initial;color:var(--color-primary-500)}.wordlist-container{margin-bottom:var(--space-5);max-height:500px;overflow-y:auto;padding:var(--space-2)}.wordlist-item{border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2);padding:var(--space-3);transition:all var(--transition-normal)}.wordlist-item.even{background:var(--color-neutral-50)}.wordlist-item.odd{background:var(--color-neutral-0)}.wordlist-item:hover{border-color:var(--color-primary-400);box-shadow:var(--shadow-md);transform:scale(1.01)}.wordlist-item-header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.wordlist-number{background:var(--gradient-primary);border-radius:var(--radius-md);color:var(--color-neutral-0);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);min-width:36px;opacity:.8;padding:var(--space-1) var(--space-2);text-align:center}.wordlist-content{background:linear-gradient(135deg,#fff9e6,#fef3f8);border:2px solid var(--color-warning-300);border-radius:var(--radius-md);padding:var(--space-3)}.wordlist-word{color:var(--color-neutral-800);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wordlist-meaning{color:var(--color-neutral-600);font-size:var(--font-size-sm);line-height:var(--line-height-normal);margin-bottom:var(--space-1)}.wordlist-meaning-label{font-weight:var(--font-weight-bold);margin-right:var(--space-1)}.wordlist-meaning-label.en{color:var(--color-info-600)}.wordlist-meaning-label.zh{color:var(--color-error-500)}.wordlist-sound-btn{align-items:center;background:var(--gradient-info);border:none;border-radius:var(--radius-full);box-shadow:var(--shadow-info);color:var(--color-neutral-0);cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:all var(--transition-normal);width:40px}.wordlist-sound-btn:hover{box-shadow:var(--shadow-info-lg);transform:scale(1.1)}.wordlist-back-btn{font-size:var(--font-size-lg);padding:var(--space-4) var(--space-6);width:100%}.game-container{background:var(--color-neutral-0);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;margin:0 auto;max-width:500px;min-height:100vh;overflow:hidden;width:100%}.game-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;padding:var(--space-3) var(--space-4)}.game-progress-label{color:var(--color-neutral-500);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.game-content{-webkit-overflow-scrolling:touch;flex:1 1;overflow-x:hidden;overflow-y:auto;padding:var(--space-4)}.game-banner{justify-content:space-between;margin-bottom:var(--space-2)}.game-banner,.game-banner-item{align-items:center;display:flex}.game-banner-item{font-size:var(--font-size-xs);gap:var(--space-1)}.game-banner-item,.game-banner-item.best{color:var(--color-neutral-500)}.game-banner-item .icon-sm{color:var(--color-warning-500);font-size:14px!important}.game-banner-item.best .icon-sm{color:var(--color-secondary-400)}.game-stats{background:var(--color-neutral-50);border-radius:var(--radius-lg);justify-content:space-between;margin-bottom:var(--space-3);padding:var(--space-3)}.game-stat,.game-stats{align-items:center;display:flex}.game-stat{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);gap:var(--space-2)}.game-stat.streak,.game-stat.streak .icon-sm{color:var(--color-error-500)}.game-stat.points{color:var(--color-info-600)}.game-stat.points .icon-sm{color:var(--color-info-500)}.game-progress{margin-bottom:var(--space-3)}.game-progress-header{color:var(--color-neutral-500);display:flex;font-size:var(--font-size-xs);justify-content:space-between;margin-bottom:var(--space-1)}.game-progress-bar{background:var(--color-neutral-100);border-radius:var(--radius-full);height:8px;overflow:visible;position:relative}.game-progress-fill{background:var(--gradient-primary);border-radius:var(--radius-full);height:100%;transition:width var(--transition-normal)}.game-progress-fill.above-best{background:var(--gradient-success)}.game-progress-marker{background:var(--color-warning-500);border-radius:var(--radius-sm);height:16px;position:absolute;top:-4px;transform:translateX(-50%);width:3px}.game-attempt-info{color:var(--color-neutral-400);font-size:var(--font-size-xs)}.game-attempt-info,.game-score{margin-bottom:var(--space-3);text-align:center}.game-score{color:var(--color-primary-600);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.game-hint-section{margin-bottom:var(--space-3)}.game-hint-box{animation:popIn .3s ease-out;background:linear-gradient(135deg,var(--color-warning-50) 0,var(--color-warning-100) 100%);border:2px solid var(--color-warning-300);border-radius:var(--radius-lg);color:var(--color-warning-700);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);margin-top:var(--space-3);padding:var(--space-3);text-align:center}.game-input-section{margin-bottom:var(--space-3)}.game-input{background:var(--color-neutral-0);border:3px solid var(--color-primary-400);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--color-neutral-800);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);padding:var(--space-4);text-align:center;transition:all var(--transition-normal);width:100%}.game-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #6366f133;outline:none}.game-input.disabled{background:var(--color-neutral-50);opacity:.6}.game-result{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-top:var(--space-2);padding:var(--space-1) 0;text-align:center}.game-result.success{color:var(--color-success-600)}.game-result.error{color:var(--color-error-600)}.game-spacer{height:100px}.game-modal{animation:modalPop .3s ease-out;background:var(--color-neutral-0);border-radius:var(--radius-2xl);max-width:320px;padding:var(--space-6);text-align:center;width:90%}.game-modal-icon{align-items:center;border-radius:var(--radius-full);display:flex;height:80px;justify-content:center;margin:0 auto var(--space-4);width:80px}.game-modal-icon.success{background:var(--gradient-success);color:var(--color-neutral-0)}.game-modal-icon.wrong{background:var(--gradient-error);color:var(--color-neutral-0)}.game-modal-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2)}.game-modal-success .game-modal-title{color:var(--color-success-600)}.game-modal-wrong .game-modal-title{color:var(--color-error-600)}.game-modal-message{color:var(--color-neutral-600);font-size:var(--font-size-base);margin-bottom:var(--space-3)}.game-modal-label{color:var(--color-neutral-500);font-size:var(--font-size-sm);margin-bottom:var(--space-1)}.game-modal-word{background:var(--color-primary-50);border-radius:var(--radius-lg);color:var(--color-primary-600);display:inline-block;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);padding:var(--space-2) var(--space-4)}.game-modal-points{font-size:var(--font-size-2xl);margin-top:var(--space-2)}.floating-score,.game-modal-points{color:var(--color-success-500);font-weight:var(--font-weight-bold)}.floating-score{animation:floatUp 2s ease-out forwards;font-size:var(--font-size-3xl);pointer-events:none;position:fixed;text-shadow:2px 2px 4px #0003;transform:translate(-50%,-50%);z-index:var(--z-tooltip)}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-150%) scale(1.5)}}@keyframes modalPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.summary{padding:var(--space-4);text-align:center}.summary-title{align-items:center;color:var(--color-primary-600);display:flex;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-5) 0}.summary-title .icon-md{color:var(--color-warning-500)}.score-comparison{background:var(--color-neutral-50);border:2px solid var(--color-neutral-200);border-radius:var(--radius-xl);margin-bottom:var(--space-5);padding:var(--space-5)}.score-comparison.new-best{background:linear-gradient(135deg,var(--color-success-50) 0,var(--color-warning-50) 100%);border-color:var(--color-success-300)}.score-comparison.matched-best{background:linear-gradient(135deg,var(--color-info-50) 0,var(--color-primary-50) 100%);border-color:var(--color-info-300)}.score-comparison-points{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2)}.score-comparison-message{color:var(--color-neutral-700);font-size:var(--font-size-base);margin-bottom:var(--space-2)}.score-message-content{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.score-message-content .icon-sm{color:var(--color-warning-500)}.score-comparison-percentage{color:var(--color-neutral-500);font-size:var(--font-size-sm)}.achievements-container{background:var(--color-neutral-0);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);margin-bottom:var(--space-5);padding:var(--space-4)}.achievements-title{align-items:center;color:var(--color-warning-600);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-4) 0}.achievements-title .icon-md{color:var(--color-warning-500)}.achievement-stat{align-items:center;color:var(--color-neutral-700);display:flex;font-size:var(--font-size-base);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-2) 0}.stat-icon.streak{color:var(--color-error-500)}.stat-icon.correct{color:var(--color-success-500)}.stat-icon.attempts{color:var(--color-info-500)}.stat-icon.accuracy{color:var(--color-secondary-500)}.achievement-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-4)}.achievement-badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-1);padding:var(--space-2) var(--space-3)}.badge-perfect{background:var(--gradient-primary);color:var(--color-neutral-0)}.badge-streak{background:var(--gradient-error);color:var(--color-neutral-0)}.badge-first-try{background:var(--gradient-success);color:var(--color-neutral-0)}.badge-high-score{background:var(--gradient-warning);color:var(--color-neutral-800)}.next-challenge{background:linear-gradient(135deg,var(--color-info-50) 0,var(--color-primary-50) 100%);border:1px solid var(--color-info-200);border-radius:var(--radius-xl);margin-bottom:var(--space-5);padding:var(--space-4)}.next-challenge-title{align-items:center;color:var(--color-info-600);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-3) 0}.next-challenge-title .icon-md{color:var(--color-info-500)}.next-challenge-message{color:var(--color-neutral-700);font-size:var(--font-size-base);margin:0 0 var(--space-3) 0}.next-challenge-message,.next-challenge-tip{align-items:center;display:flex;gap:var(--space-2);justify-content:center}.next-challenge-tip{background:var(--color-warning-50);border-radius:var(--radius-lg);color:var(--color-warning-600);font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.next-challenge-tip .icon-sm{color:var(--color-warning-500)}.leaderboard-title{align-items:center;color:var(--color-warning-600);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);gap:var(--space-2);justify-content:center;margin:var(--space-4) 0}.leaderboard-title .icon-md{color:var(--color-warning-500)}.leaderboard{border-collapse:collapse;font-size:var(--font-size-sm);margin-bottom:var(--space-5);width:100%}.leaderboard th{background:var(--color-primary-500);color:var(--color-neutral-0);font-weight:var(--font-weight-semibold);padding:var(--space-3);text-align:left}.leaderboard th:first-child{border-radius:var(--radius-lg) 0 0 0}.leaderboard th:last-child{border-radius:0 var(--radius-lg) 0 0}.leaderboard td{border-bottom:1px solid var(--color-neutral-100);padding:var(--space-3)}.leaderboard tr:nth-child(2n){background:var(--color-neutral-50)}.leaderboard tr:hover{background:var(--color-primary-50)}.btn-sm{font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.btn-lg{font-size:var(--font-size-lg);min-height:52px;padding:var(--space-4) var(--space-6)}.btn-block{margin-bottom:var(--space-3);width:100%}.btn-warning{background:var(--gradient-warning);border:none;color:var(--color-neutral-800)}.btn-warning:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-2px)}.btn-warning.disabled,.btn-warning:disabled{background:var(--color-neutral-300);color:var(--color-neutral-500);cursor:not-allowed;opacity:.6}.icon-xs{font-size:14px!important}.icon-xl{font-size:48px!important}.practice-type-section{margin-top:var(--space-5)}.practice-type-buttons{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}.btn-secondary{background:var(--gradient-secondary);border:none;color:var(--color-neutral-0)}.btn-secondary:hover{filter:brightness(1.05);transform:translateY(-2px)}.chinese-view{background:var(--color-neutral-0);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;margin:0 auto;max-width:500px;min-height:100vh;overflow:hidden;width:100%}.chinese-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;padding:var(--space-3) var(--space-4)}.chinese-progress{color:var(--color-neutral-500);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.chinese-content{align-items:center;display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:var(--space-4)}.chinese-word-info{margin-bottom:var(--space-4);text-align:center}.chinese-english{color:var(--color-neutral-800);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-1)}.chinese-pinyin{color:var(--color-primary-600);font-size:var(--font-size-lg);font-style:italic}.chinese-char-progress{display:flex;font-size:var(--font-size-2xl);gap:var(--space-2);justify-content:center;margin-top:var(--space-3)}.chinese-char-dot{color:var(--color-neutral-300);transition:all var(--transition-normal)}.chinese-char-dot.done{color:var(--color-success-500)}.chinese-char-dot.current{color:var(--color-primary-500);font-weight:var(--font-weight-bold)}.chinese-canvas-wrapper{margin-bottom:var(--space-4);position:relative}.chinese-canvas{-webkit-touch-callout:none;background:var(--color-neutral-50);border:3px solid var(--color-primary-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);cursor:crosshair;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.chinese-canvas svg{border-radius:var(--radius-lg);display:block;pointer-events:auto;touch-action:none}.chinese-complete-overlay{align-items:center;animation:fadeIn .3s ease-out;background:#22c55e33;border-radius:var(--radius-xl);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.chinese-complete-overlay .icon-xl{color:var(--color-success-500);font-size:64px!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chinese-char-info{color:var(--color-neutral-600);font-size:var(--font-size-base);margin-bottom:var(--space-4)}.chinese-char-info strong{color:var(--color-primary-600);font-size:var(--font-size-xl)}.chinese-mistakes{color:var(--color-error-500);font-size:var(--font-size-sm)}.chinese-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4);width:100%}.chinese-actions .btn{flex:1 1;min-width:100px}.chinese-score{color:var(--color-neutral-500);font-size:var(--font-size-sm);margin-top:var(--space-2)}.chinese-summary{padding:var(--space-5);text-align:center}.chinese-summary-title{align-items:center;color:var(--color-success-600);display:flex;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--space-2);justify-content:center;margin:0 0 var(--space-4) 0}.chinese-summary-title .icon-md{color:var(--color-success-500)}.chinese-summary-score{color:var(--color-primary-600);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-5)}.chinese-summary-list{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}.chinese-summary-item{align-items:center;background:var(--color-neutral-50);border-radius:var(--radius-lg);display:flex;justify-content:space-between;padding:var(--space-2) var(--space-3)}.chinese-summary-char{color:var(--color-neutral-800);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.chinese-summary-pinyin{color:var(--color-neutral-500);font-size:var(--font-size-sm)}.chinese-summary-result{color:var(--color-neutral-600);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.chinese-summary-result.perfect{color:var(--color-success-600)}.chinese-stroke-progress{color:var(--color-primary-500);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.chinese-spelling-display{background:linear-gradient(135deg,var(--color-primary-50) 0,var(--color-warning-50) 100%);border:2px solid var(--color-primary-200);border-radius:var(--radius-xl);margin-bottom:var(--space-4);padding:var(--space-4);text-align:center}.chinese-spelling-char{color:var(--color-primary-600);font-size:var(--font-size-5xl);font-weight:var(--font-weight-bold);line-height:1.2;margin-bottom:var(--space-2)}.chinese-spelling-english{color:var(--color-neutral-600);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.flashcard-view{background:var(--color-neutral-0);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;margin:0 auto;max-width:500px;min-height:100vh;overflow:hidden;padding:var(--space-4);width:100%}.flashcard-chinese{font-family:Microsoft YaHei,SimHei,Heiti SC,sans-serif;font-size:var(--font-size-5xl)!important}.flashcard-pinyin{color:var(--color-primary-600);font-size:var(--font-size-2xl);font-style:italic;margin-bottom:var(--space-3)}.flashcard-practice-options{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.practice-target{background:var(--color-primary-50);border-radius:var(--radius-lg);color:var(--color-primary-600);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-4);padding:var(--space-3);text-align:center}.practice-input-chinese{font-family:Microsoft YaHei,SimHei,Heiti SC,sans-serif;font-size:var(--font-size-2xl)!important}.stroke-canvas-wrapper{align-items:center;display:flex;justify-content:center;margin-bottom:var(--space-4);position:relative}.stroke-canvas{-webkit-touch-callout:none;background:var(--color-neutral-50);border:3px solid var(--color-primary-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);cursor:crosshair;height:250px;min-height:250px;min-width:250px;overflow:visible;position:relative;touch-action:none;-webkit-user-select:none;user-select:none;width:250px}.stroke-canvas svg{border-radius:var(--radius-lg);display:block;height:100%!important;pointer-events:auto;touch-action:none;width:100%!important}.stroke-complete-overlay{align-items:center;animation:fadeIn .3s ease-out;background:#22c55e33;border-radius:var(--radius-xl);display:flex;height:250px;justify-content:center;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:250px}.stroke-complete-overlay .icon-xl{color:var(--color-success-500);font-size:64px!important}.stroke-char-progress{display:flex;font-size:var(--font-size-2xl);gap:var(--space-2);justify-content:center;margin-bottom:var(--space-3)}.stroke-char-dot{color:var(--color-neutral-300);transition:all var(--transition-normal)}.stroke-char-dot.done{color:var(--color-success-500)}.stroke-char-dot.current{color:var(--color-primary-500);font-weight:var(--font-weight-bold)}.stroke-actions{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-3)}.stroke-actions .btn{flex:1 1;max-width:200px;min-width:140px}
/*# sourceMappingURL=main.25924cc5.css.map*/