@import"https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Comic+Neue:wght@400;700&family=Playpen+Sans:wght@400;700&display=swap";.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));padding:var(--spacing-md)}.login-card{background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;text-align:center}.login-header h1{font-size:var(--font-size-3xl);color:var(--color-primary);margin-bottom:var(--spacing-sm)}.login-header p{color:var(--color-text-light);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.input-group{text-align:left}.login-input{width:100%;padding:var(--spacing-md);font-size:var(--font-size-xl);border:3px solid #E0E0E0;border-radius:var(--radius-md);transition:all var(--transition-normal);text-align:center}.login-input:focus{border-color:var(--color-secondary);outline:none;box-shadow:0 0 0 4px #4ecdc433}.error-message{color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--spacing-xs);display:block;text-align:center}.login-btn{width:100%;padding:var(--spacing-md);font-size:var(--font-size-xl)}.existing-users{margin-top:var(--spacing-xl);border-top:2px solid #F0F0F0;padding-top:var(--spacing-lg)}.existing-users h3{font-size:var(--font-size-base);color:var(--color-text-light);margin-bottom:var(--spacing-md)}.user-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center}.user-tag{background:#f0f0f0;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);border:none;font-size:var(--font-size-base);color:var(--color-text-dark);cursor:pointer;transition:all var(--transition-fast)}.user-tag:hover{background:var(--color-secondary);color:#fff;transform:translateY(-2px)}.home-page{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-xl)}.home-header{text-align:center;margin-bottom:60px;width:100%;max-width:1200px;position:relative}.user-info{position:absolute;top:0;right:0;display:flex;align-items:center;gap:var(--spacing-md);background:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);font-weight:600;color:var(--color-text-dark)}.logout-btn-small{background:var(--color-bg-light);border:none;padding:4px 12px;border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;color:var(--color-text-light);transition:all var(--transition-fast)}.logout-btn-small:hover{background:var(--color-error);color:#fff}.main-title{font-size:3.5rem;color:var(--color-primary);margin-bottom:var(--spacing-sm);text-shadow:2px 2px 4px rgba(0,0,0,.1)}.main-subtitle{font-size:1.5rem;color:var(--color-text-light)}.home-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;width:100%;max-width:1200px}.menu-card{background:#fff;border:none;border-radius:var(--radius-xl);padding:40px;text-align:center;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);position:relative;overflow:hidden}.menu-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:var(--card-color)}.hece-card{--card-color: #FF6B6B}.patterns-card{--card-color: #4ECDC4}.games-card{--card-color: #FFE66D}.menu-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #00000026}.card-icon{font-size:4rem;margin-bottom:var(--spacing-sm);background:var(--color-bg-light);width:100px;height:100px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform var(--transition-normal)}.menu-card:hover .card-icon{transform:scale(1.1) rotate(5deg);background:var(--card-color);color:#fff}.menu-card h2{font-size:2rem;color:var(--color-text-dark);margin:0}.menu-card p{color:var(--color-text-light);font-size:1.1rem;line-height:1.5}@media(max-width:768px){.main-title{font-size:2.5rem}.user-info{position:static;margin-bottom:var(--spacing-lg);justify-content:space-between}.home-header{display:flex;flex-direction:column;margin-bottom:40px}}.sandbox-container{max-width:900px;margin:0 auto}.sandbox-header{text-align:center;margin-bottom:var(--spacing-xl)}.sandbox-header h2{font-size:var(--font-size-2xl);color:var(--color-primary);margin-bottom:var(--spacing-xs)}.sandbox-header p{color:var(--color-text-light);font-size:var(--font-size-lg)}.progress-bar{width:100%;height:12px;background:#e0e0e0;border-radius:var(--radius-full);margin-top:var(--spacing-md);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-secondary));transition:width .5s ease}.letter-selection{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--spacing-lg);align-items:center;margin-bottom:var(--spacing-xl)}.letter-group h3{text-align:center;font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.letter-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.letter-btn{width:80px;height:80px;font-size:var(--font-size-2xl);font-weight:700;border:3px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.letter-btn.consonant{background:linear-gradient(135deg,#FFB6B6,var(--color-primary));color:#fff}.letter-btn.vowel{background:linear-gradient(135deg,#A8E6CF,var(--color-success));color:#fff}.letter-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.letter-btn.selected{border-color:var(--color-accent);transform:scale(1.15);animation:pulse .8s infinite}.collision-zone{min-width:250px;min-height:150px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg)}.collision-animation{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-3xl);font-weight:700}.collision-animation.colliding .letter-left{animation:collision .6s}.collision-animation.colliding .letter-right{animation:collision .6s .1s}.letter-left{color:var(--color-primary)}.letter-right{color:var(--color-success)}.plus-sign{color:var(--color-text-light);font-size:var(--font-size-xl)}.result-syllable{font-size:var(--font-size-3xl);color:var(--color-secondary);margin-left:var(--spacing-sm)}.collision-placeholder{text-align:center;color:var(--color-text-light)}.sand-writing-section{text-align:center;margin-top:var(--spacing-xl)}.sand-writing-section h3{font-size:var(--font-size-xl);color:var(--color-text-dark);margin-bottom:var(--spacing-md)}.sand-box{width:100%;height:200px;background:linear-gradient(135deg,var(--color-bg-sand),#F9EDD8);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-md);box-shadow:inset 0 4px 12px #0000001a;position:relative;overflow:hidden}.sand-box:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(244,228,193,.3) 1px,transparent 1px),radial-gradient(circle at 60% 70%,rgba(244,228,193,.3) 1px,transparent 1px),radial-gradient(circle at 80% 20%,rgba(244,228,193,.3) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}.sand-text{font-size:5rem;font-weight:700;color:#8b6f47;text-shadow:2px 2px 4px rgba(0,0,0,.2);animation:fadeIn 1s ease;position:relative;z-index:1}.sand-placeholder{color:#a89968;font-size:var(--font-size-lg);opacity:.6}.write-btn{font-size:var(--font-size-xl);padding:var(--spacing-md) var(--spacing-xl)}.write-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.success-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;text-align:center;min-width:300px}.success-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.success-icon{font-size:4rem;animation:bounce 1s}.success-popup h3{font-size:var(--font-size-2xl);color:var(--color-success)}.success-popup p{font-size:var(--font-size-lg);color:var(--color-text-dark)}.completed-syllables{margin-top:var(--spacing-xl);text-align:center}.completed-syllables h4{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.syllable-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center}.syllable-badge{background:linear-gradient(135deg,var(--color-accent),#FFF085);color:var(--color-text-dark);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-weight:600;font-size:var(--font-size-lg);box-shadow:var(--shadow-sm)}@media(max-width:768px){.letter-selection{grid-template-columns:1fr;gap:var(--spacing-md)}.letter-buttons{flex-direction:row;justify-content:center}.letter-btn{width:60px;height:60px;font-size:var(--font-size-xl)}.collision-zone{order:-1}.sand-text{font-size:3rem}}.syllable-builder-container{max-width:1000px;margin:0 auto}.builder-header{text-align:center;margin-bottom:var(--spacing-xl)}.builder-header h2{font-size:var(--font-size-2xl);color:var(--color-secondary);margin-bottom:var(--spacing-xs)}.builder-header p{color:var(--color-text-light);font-size:var(--font-size-lg)}.word-challenge{background:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl)}.challenge-instruction{text-align:center;margin-bottom:var(--spacing-lg)}.challenge-instruction h3{font-size:var(--font-size-xl);color:var(--color-text-dark);margin-bottom:var(--spacing-sm)}.target-word{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-primary);margin:var(--spacing-md) 0;letter-spacing:4px}.word-meaning{color:var(--color-text-light);font-size:var(--font-size-base);font-style:italic}.building-zone{min-height:150px;background:linear-gradient(135deg,#f0f8ff,#e6f3ff);border:3px dashed var(--color-secondary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);margin-bottom:var(--spacing-md);transition:all var(--transition-normal)}.building-zone.error{animation:shake .5s;border-color:var(--color-error);background:linear-gradient(135deg,#ffe6e6,#ffd6d6)}.building-placeholder{text-align:center;color:var(--color-text-light);font-size:var(--font-size-lg)}.built-syllables{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.built-syllable-box{background:linear-gradient(135deg,var(--color-accent),#FFF085);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-dark);box-shadow:var(--shadow-sm);cursor:pointer;position:relative;transition:all var(--transition-fast)}.built-syllable-box:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.built-syllable-box .remove-hint{position:absolute;top:-8px;right:-8px;background:var(--color-error);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity var(--transition-fast)}.built-syllable-box:hover .remove-hint{opacity:1}.syllable-pool{margin-top:var(--spacing-xl)}.syllable-pool h4{text-align:center;font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.syllable-cards{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.syllable-card{width:100px;height:100px;background:linear-gradient(135deg,var(--color-secondary),#6EDDD5);color:var(--color-text-dark);font-size:var(--font-size-2xl);font-weight:700;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:var(--shadow-md);transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.syllable-card:hover:not(.used){transform:translateY(-8px) scale(1.05);box-shadow:var(--shadow-lg)}.syllable-card.dragging{opacity:.5;cursor:grabbing}.syllable-card.used{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.word-success-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;text-align:center;min-width:400px;max-width:90%}.word-success-popup h3{font-size:var(--font-size-2xl);color:var(--color-success)}.completed-word{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-primary);letter-spacing:2px}.word-image-placeholder{width:200px;height:200px;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:var(--spacing-md)}.image-icon{font-size:4rem}.image-note{font-size:var(--font-size-sm);color:var(--color-text-light);margin-top:var(--spacing-xs)}.error-feedback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-error);color:#fff;padding:var(--spacing-lg) var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;text-align:center;animation:shake .5s}.error-icon{font-size:3rem;display:block;margin-bottom:var(--spacing-sm)}.error-feedback p{font-size:var(--font-size-xl);font-weight:600}.completed-words-list{margin-top:var(--spacing-xl);text-align:center}.completed-words-list h4{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.word-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center}.word-badge{background:linear-gradient(135deg,var(--color-success),#A8E6CF);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-weight:600;font-size:var(--font-size-base);box-shadow:var(--shadow-sm)}@media(max-width:768px){.syllable-card{width:80px;height:80px;font-size:var(--font-size-xl)}.target-word{font-size:var(--font-size-2xl)}.word-success-popup{min-width:300px;padding:var(--spacing-lg)}.word-image-placeholder{width:150px;height:150px}}.sentence-train-container{max-width:1100px;margin:0 auto}.train-header{text-align:center;margin-bottom:var(--spacing-xl)}.train-header h2{font-size:var(--font-size-2xl);color:var(--color-accent);margin-bottom:var(--spacing-xs)}.train-header p{color:var(--color-text-light);font-size:var(--font-size-lg)}.listen-btn{background:linear-gradient(135deg,var(--color-primary),#FF8E8E);color:#fff;border:none;border-radius:var(--radius-full);padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-xl);font-weight:700;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-sm);margin:0 auto var(--spacing-lg)}.listen-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:var(--shadow-lg)}.listen-btn.playing{background:linear-gradient(135deg,var(--color-secondary),#6EDDD5);animation:pulse 1s infinite;cursor:default}.progress-info{margin-top:var(--spacing-md);font-size:var(--font-size-lg);font-weight:600;color:var(--color-primary)}.sentence-challenge{background:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl)}.challenge-info{text-align:center;margin-bottom:var(--spacing-lg)}.challenge-info h3{font-size:var(--font-size-xl);color:var(--color-text-dark);margin-bottom:var(--spacing-sm)}.target-sentence{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary);margin:var(--spacing-md) 0;letter-spacing:2px}.sentence-meaning{color:var(--color-text-light);font-size:var(--font-size-base);font-style:italic}.train-track{min-height:180px;background:linear-gradient(to bottom,transparent 0%,transparent 45%,#8B4513 45%,#8B4513 48%,transparent 48%,transparent 52%,#8B4513 52%,#8B4513 55%,transparent 55%);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);position:relative;overflow:hidden}.train-track.moving{animation:trackShake .3s infinite}@keyframes trackShake{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}.train-wrapper{display:flex;align-items:center;position:absolute;left:20px;top:50%;transform:translateY(-50%);transition:all var(--transition-normal);width:max-content}.train-engine{font-size:4rem;position:relative;transform:scaleX(-1);animation:engineBob 1s infinite;margin-right:10px;line-height:1}@keyframes engineBob{0%,to{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-5px)}}.train-track.moving .train-wrapper{animation:trainMove 2s linear forwards}.train-track.moving .train-engine{animation:engineBob .3s infinite}@keyframes trainMove{0%{left:20px}to{left:100%}}.train-cars-container{margin-left:0;min-height:100px;display:flex;align-items:center}.train-placeholder{text-align:center;color:var(--color-text-light);font-size:var(--font-size-lg);width:100%;white-space:nowrap}.train-cars{display:flex;gap:var(--spacing-xs);flex-wrap:nowrap}.train-car{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);cursor:pointer;transition:all var(--transition-normal);position:relative;flex-shrink:0}.car-content{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-xl);font-weight:700;color:#fff;position:relative}.train-car:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.train-car .remove-hint{position:absolute;top:-8px;right:-8px;background:var(--color-error);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity var(--transition-fast)}.train-car:hover .remove-hint{opacity:1}.train-smoke{position:absolute;top:-20px;right:10px;display:flex;gap:10px;transform:scaleX(-1)}.smoke{font-size:2rem;animation:smokeRise 1.5s infinite;opacity:0}.smoke:nth-child(2){animation-delay:.3s}.smoke:nth-child(3){animation-delay:.6s}@keyframes smokeRise{0%{transform:translateY(0) scale(1);opacity:.8}to{transform:translateY(-50px) scale(1.5);opacity:0}}.reset-btn{display:block;margin:0 auto}.word-station{margin-top:var(--spacing-xl)}.word-station h4{text-align:center;font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.word-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.word-btn{padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,var(--color-accent),#FFF085);color:var(--color-text-dark);font-size:var(--font-size-xl);font-weight:700;border:none;border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.word-btn:hover:not(.used):not(:disabled){transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-lg)}.word-btn.used{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.sentence-success-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;text-align:center;min-width:450px;max-width:90%}.success-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.success-icon{font-size:5rem}.sentence-success-popup h3{font-size:var(--font-size-2xl);color:var(--color-success)}.completed-sentence{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary);letter-spacing:1px;padding:var(--spacing-md);background:linear-gradient(135deg,#fff8e1,#ffecb3);border-radius:var(--radius-md)}.train-celebration{font-size:3rem;margin-top:var(--spacing-md)}.completed-sentences-list{margin-top:var(--spacing-xl)}.completed-sentences-list h4{text-align:center;font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-dark)}.sentence-badges{display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:600px;margin:0 auto}.sentence-badge{background:linear-gradient(135deg,var(--color-success),#A8E6CF);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--spacing-sm);box-shadow:var(--shadow-sm)}.badge-icon{font-size:var(--font-size-xl);font-weight:700}.badge-text{font-size:var(--font-size-base);font-weight:600}@media(max-width:768px){.train-cars-container{margin-left:80px}.train-engine{font-size:3rem;left:10px}.word-btn{font-size:var(--font-size-lg);padding:var(--spacing-sm) var(--spacing-md)}.target-sentence{font-size:var(--font-size-xl)}.sentence-success-popup{min-width:300px}}.level-selector{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.level-btn{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid var(--color-primary);background:#fff;color:var(--color-primary);font-size:var(--font-size-lg);font-weight:600;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.level-btn.active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.level-btn:hover:not(.active){background:var(--color-bg-light)}.success-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);justify-content:center;flex-wrap:wrap}.listen-btn.small{font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-lg);margin:0}.next-btn{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-lg);font-weight:700;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-success),#4CAF50);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.next-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.flashcard-container{max-width:800px;margin:0 auto;padding:var(--spacing-md)}.flashcard-container.empty{text-align:center;padding:var(--spacing-xl)}.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.mode-selector{display:flex;gap:var(--spacing-sm);background:#f0f0f0;padding:4px;border-radius:var(--radius-full)}.mode-btn{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-full);background:transparent;cursor:pointer;font-weight:600;color:var(--color-text-light);transition:all var(--transition-fast)}.mode-btn.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-sm)}.settings-panel{background:#fff;padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-lg);text-align:center}.duration-options{display:flex;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-md) 0;flex-wrap:wrap}.duration-btn{min-width:60px;height:60px;padding:0 10px;border-radius:30px;border:2px solid #E0E0E0;background:#fff;cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.duration-btn.selected{border-color:var(--color-primary);background:var(--color-primary);color:#fff;transform:scale(1.1)}.save-btn{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--font-size-sm)}.card-display-area{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.timer-bar{width:100%;height:8px;background:#e0e0e0;border-radius:var(--radius-full);overflow:hidden}.timer-fill{height:100%;background:var(--color-success);transition:width 1s linear}.timer-bar.danger .timer-fill{background:var(--color-error)}.timer-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-light)}.flash-card{width:300px;height:400px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);border:4px solid transparent}.flash-card.active{transform:scale(1.05);border-color:var(--color-accent)}.flash-card.timeout{border-color:var(--color-error);opacity:.7}.card-content{font-size:4rem;font-weight:700;color:var(--color-text-dark);text-align:center}.start-btn{font-size:var(--font-size-xl);padding:var(--spacing-md) var(--spacing-xl)}.action-buttons{display:flex;gap:var(--spacing-xl);width:100%;justify-content:center}.action-btn{flex:1;max-width:200px;padding:var(--spacing-md);font-size:var(--font-size-lg)}.btn-success{background:var(--color-success);color:#fff}.btn-error{background:var(--color-error);color:#fff}.timeout-message{text-align:center;color:var(--color-error);font-weight:600}@media(max-width:768px){.flash-card{width:100%;height:300px}.card-content{font-size:3rem}.action-buttons{flex-direction:column;gap:var(--spacing-md)}.action-btn{max-width:100%}}.letter-selection{margin:var(--spacing-md) 0}.letter-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--spacing-md)}.letter-actions{display:flex;gap:var(--spacing-sm);justify-content:center}.listen-find-container{max-width:800px;margin:0 auto;text-align:center}.listen-header{margin-bottom:var(--spacing-xl)}.listen-header h2{font-size:var(--font-size-2xl);color:var(--color-primary)}.score-board{display:flex;justify-content:center;gap:var(--spacing-xl);font-size:var(--font-size-lg);font-weight:700;color:var(--color-secondary);margin-top:var(--spacing-md)}.question-area{margin-bottom:var(--spacing-xl)}.play-sound-btn{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),#FFF085);border:none;font-size:var(--font-size-2xl);cursor:pointer;box-shadow:var(--shadow-lg);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;margin:0 auto}.play-sound-btn:hover{transform:scale(1.1)}.play-sound-btn.playing{animation:pulse 1s infinite;background:var(--color-success);color:#fff}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg);max-width:600px;margin:0 auto}.option-card{background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);font-size:var(--font-size-3xl);font-weight:700;color:var(--color-text-dark);border:3px solid transparent;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.option-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-secondary)}.feedback-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--spacing-xl);border-radius:var(--radius-lg);font-size:var(--font-size-3xl);font-weight:700;color:#fff;z-index:1000;box-shadow:var(--shadow-lg)}.feedback-popup.success{background:var(--color-success)}.feedback-popup.error{background:var(--color-error)}@media(max-width:768px){.options-grid{grid-template-columns:1fr}.play-sound-btn{width:100px;height:100px;font-size:var(--font-size-xl)}}.settings-btn{background:none;border:none;font-size:var(--font-size-lg);cursor:pointer;color:var(--color-text-dark)}.settings-panel{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 12px #0000001a;margin-bottom:20px;text-align:left;animation:fadeIn .3s ease}.letter-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}.letter-btn{width:40px;height:40px;border-radius:8px;border:2px solid #E0E0E0;background:#fff;font-weight:700;cursor:pointer;transition:all .2s}.letter-btn.selected{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.duration-options{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}.duration-btn{padding:8px 16px;border:2px solid #E0E0E0;border-radius:20px;background:#fff;cursor:pointer;transition:all .2s;min-width:60px}.duration-btn.selected{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary);font-weight:700}.letter-actions{display:flex;gap:10px;justify-content:center}.btn-sm{padding:4px 12px;font-size:.9rem;background:#f0f0f0;border:none;border-radius:4px;cursor:pointer}.settings-actions{display:flex;justify-content:flex-end;margin-top:20px}.btn-success{background-color:var(--color-success);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:700}.lowercase-font{font-family:Playpen Sans,Comic Neue,Comic Sans MS,Andika,sans-serif}.syllable-learning-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#f6d365,#fda085);font-family:Playpen Sans,Comic Neue,Comic Sans MS,Andika,sans-serif;color:#333;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 6px #0000001a;z-index:10}.back-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#555;font-weight:700;transition:transform .2s}.back-btn:hover{transform:translate(-5px);color:#000}.header h2{margin:0;font-size:1.5rem;color:#ff6b6b}.progress{font-weight:700;color:#888}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;overflow-y:auto}.syllable-card{background:#fff;padding:3rem 5rem;border-radius:30px;box-shadow:0 10px 25px #00000026;text-align:center;margin-bottom:3rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;border:5px solid #fff}.syllable-card:hover{transform:scale(1.05);border-color:#ffd93d}.syllable-text{font-size:6rem;font-weight:900;color:#4ecdc4;text-shadow:3px 3px 0px #eee;margin-bottom:1rem}.speak-btn{background:#ff6b6b;color:#fff;border:none;padding:.8rem 2rem;border-radius:50px;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 15px #ff6b6b66;transition:all .2s}.speak-btn:hover{background:#ff5252;transform:translateY(-2px)}.speak-btn.playing{animation:pulse 1s infinite}.examples-section{width:100%;max-width:800px;text-align:center}.examples-section h3{color:#fff;font-size:1.5rem;margin-bottom:1.5rem;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.examples-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.example-card{background:#fff;padding:1rem;border-radius:20px;width:180px;box-shadow:0 8px 15px #0000001a;cursor:pointer;transition:transform .2s}.example-card:hover{transform:translateY(-10px)}.example-image-placeholder{height:120px;background:#f0f0f0;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:3rem}.example-word{font-size:1.5rem;font-weight:700;color:#555}.highlighted-part{color:#ff6b6b;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:#ffd93d}.no-examples{color:#fffc;font-style:italic}.navigation{display:flex;justify-content:space-between;padding:2rem;background:#ffffff1a}.nav-btn{background:#fff;border:none;padding:1rem 2.5rem;border-radius:15px;font-size:1.2rem;font-weight:700;color:#333;cursor:pointer;box-shadow:0 4px 10px #0000001a;transition:all .2s}.nav-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 15px #00000026}.nav-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media(max-width:600px){.syllable-text{font-size:4rem}.syllable-card{padding:2rem;width:80%}.example-card{width:140px}}.reading-book-container{max-width:1000px;margin:0 auto;padding:var(--spacing-md)}.book-header{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--spacing-lg);gap:var(--spacing-md)}.book-header h2{font-size:var(--font-size-2xl);color:var(--color-primary)}.book-controls{display:flex;align-items:center;gap:var(--spacing-lg);background:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.nav-btn{background:none;border:none;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-dark);cursor:pointer;transition:all var(--transition-fast);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full)}.nav-btn:hover:not(:disabled){background:var(--color-bg-main);color:var(--color-primary)}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.page-number{font-weight:700;color:var(--color-text-light);min-width:100px;text-align:center}.book-page{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);display:flex;gap:var(--spacing-xl);min-height:500px;position:relative;overflow:hidden}.book-page:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(to right,var(--color-primary),var(--color-secondary))}.page-content{flex:1;display:flex;flex-direction:column}.passage-title{font-size:var(--font-size-2xl);color:var(--color-secondary);margin-bottom:var(--spacing-lg);text-align:center;text-transform:uppercase;letter-spacing:2px;border-bottom:2px dashed var(--color-bg-main);padding-bottom:var(--spacing-sm)}.passage-text{flex:1;font-size:var(--font-size-xl);line-height:2;color:var(--color-text-dark)}.sentence-line{margin-bottom:var(--spacing-xs);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.sentence-line:hover{background-color:var(--color-bg-main)}.sentence-line.highlight{background-color:var(--color-accent);color:var(--color-text-dark);transform:scale(1.02);box-shadow:var(--shadow-sm)}.pyramid-mode{text-align:center}.page-actions{margin-top:var(--spacing-xl);display:flex;justify-content:center}.read-all-btn{background:linear-gradient(135deg,var(--color-secondary),#6EDDD5);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:700;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-sm)}.read-all-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.read-all-btn.reading{background:var(--color-error);animation:pulse 2s infinite}.page-image-container{flex:1;display:flex;align-items:center;justify-content:center;background:var(--color-bg-main);border-radius:var(--radius-md);padding:var(--spacing-md)}.passage-image{max-width:100%;max-height:400px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);object-fit:contain}.image-icon{font-size:5rem}.image-label{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-light)}@media(max-width:768px){.book-page{flex-direction:column-reverse;padding:var(--spacing-lg)}.passage-text{font-size:var(--font-size-lg)}.page-image-container{min-height:200px}}.hece-page{min-height:100vh;display:flex;flex-direction:column}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.back-home-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.back-home-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.pattern-page{min-height:100vh;background:linear-gradient(135deg,#fff6b7,#f6416c);padding:20px;display:flex;flex-direction:column;align-items:center}.pattern-header{text-align:center;color:#fff;margin-bottom:40px;width:100%;position:relative;max-width:1200px}.pattern-header h1{font-size:3rem;text-shadow:2px 2px 4px rgba(0,0,0,.2);margin-bottom:10px}.levels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;width:100%;max-width:1200px;margin-bottom:60px}.level-card{background:#fff;border:none;border-radius:20px;padding:30px;text-align:center;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 20px #0000001a;border-bottom:6px solid var(--level-color);display:flex;flex-direction:column;align-items:center;gap:10px}.level-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #0003}.level-icon{font-size:4rem;margin-bottom:10px}.level-card h3{font-size:1.8rem;color:#333;margin:0}.level-subtitle{font-weight:700;color:var(--level-color);font-size:1.1rem}.parent-corner{background:#ffffffe6;padding:30px;border-radius:20px;width:100%;max-width:1200px}.parent-corner h3{color:#333;margin-bottom:20px;text-align:center}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.tip-card{background:#f8f9fa;padding:20px;border-radius:10px;border-left:4px solid #4ECDC4}.tip-card h4{color:#2c3e50;margin-bottom:10px}.pattern-game-container{min-height:100vh;width:100%;background:#fff;display:flex;flex-direction:column;align-items:center;padding:20px}.game-header{width:100%;max-width:1000px;display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.level-badge{padding:10px 20px;border-radius:30px;color:#fff;font-weight:700;font-size:1.2rem}.score-badge{font-size:1.5rem;font-weight:700;color:#f6416c;background:#fff0f3;padding:10px 20px;border-radius:15px}.game-content{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%;max-width:800px}.instruction{font-size:2rem;color:#333;text-align:center}.pattern-display{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;background:#f0f2f5;padding:30px;border-radius:20px;width:100%}.pattern-item{font-size:4rem;background:#fff;width:100px;height:100px;display:flex;align-items:center;justify-content:center;border-radius:15px;box-shadow:0 4px 8px #0000001a;transition:all .2s}.pattern-item.clickable{cursor:pointer}.pattern-item.clickable:hover{transform:scale(1.1);box-shadow:0 8px 16px #0003}.question-mark{color:#f6416c;animation:pulse 1s infinite}.options-container{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.option-btn{font-size:3rem;padding:20px 40px;border:none;border-radius:15px;background:#fff;box-shadow:0 4px #ddd;cursor:pointer;transition:all .1s}.option-btn:active{transform:translateY(4px);box-shadow:none}.feedback-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:40px 60px;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:20px;font-size:2rem;font-weight:700;z-index:100;animation:bounceIn .5s}.feedback-overlay.success{background:#fffffff2;color:#4caf50;box-shadow:0 10px 30px #4caf504d}.feedback-overlay.error{background:#fffffff2;color:#f44336;box-shadow:0 10px 30px #f443364d}.feedback-icon{font-size:4rem}.completed{justify-content:center}.completion-card{background:#fff;padding:60px;border-radius:30px;text-align:center;box-shadow:0 20px 60px #0000001a}.completion-card h1{font-size:3rem;color:#4ecdc4;margin-bottom:20px}.final-score{font-size:2rem;font-weight:700;color:#333;margin:30px 0}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bounceIn{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}60%{transform:translate(-50%,-50%) scale(1.1);opacity:1}to{transform:translate(-50%,-50%) scale(1)}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;padding:var(--spacing-lg) var(--spacing-md);box-shadow:var(--shadow-lg)}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.app-title{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-xs);animation:fadeIn .8s ease}.app-subtitle{font-size:var(--font-size-lg);opacity:.9;animation:fadeIn 1s ease .2s backwards}.logout-btn{background:#fff3;border:2px solid white;color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);cursor:pointer;font-weight:600;transition:all var(--transition-fast)}.logout-btn:hover{background:#fff;color:var(--color-primary)}.module-nav{display:flex;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:#fff;box-shadow:var(--shadow-sm);flex-wrap:wrap}.module-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-card);border:3px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);min-width:150px;box-shadow:var(--shadow-sm)}.module-btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-secondary)}.module-btn.active{background:linear-gradient(135deg,var(--color-accent),#FFF085);border-color:var(--color-primary);transform:scale(1.05)}.module-icon{font-size:var(--font-size-2xl)}.module-name{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-dark)}.app-main{flex:1;padding:var(--spacing-lg);max-width:1400px;margin:0 auto;width:100%}.app-footer{background:var(--color-text-dark);color:#fff;text-align:center;padding:var(--spacing-md);font-size:var(--font-size-sm)}@media(max-width:768px){.header-content{flex-direction:column;gap:var(--spacing-md);text-align:center}.module-nav{flex-direction:column;gap:var(--spacing-sm)}.module-btn{min-width:100%;flex-direction:row;justify-content:center}.app-title{font-size:var(--font-size-xl)}}.placeholder-page{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f0f2f5;text-align:center;position:relative}.placeholder-page .content{background:#fff;padding:40px;border-radius:20px;box-shadow:0 4px 12px #0000001a}.placeholder-page h1{font-size:3rem;color:#333;margin-bottom:20px}.placeholder-page p{font-size:1.5rem;color:#666}.back-btn{position:absolute;top:20px;left:20px;padding:10px 20px;font-size:1.2rem;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s}.back-btn:hover{background:#f9f9f9;transform:translateY(-2px)}:root{--color-primary: #FF6B6B;--color-secondary: #4ECDC4;--color-accent: #FFE66D;--color-success: #95E1D3;--color-error: #F38181;--color-bg-main: #FFF8F0;--color-bg-card: #FFFFFF;--color-bg-sand: #F4E4C1;--color-text-dark: #2C3E50;--color-text-light: #7F8C8D;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--font-family: "Playpen Sans", "Comic Neue", "Comic Sans MS", "Andika", sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 3rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--color-bg-main);color:var(--color-text-dark);line-height:1.6;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.card{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.btn{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-full);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.btn:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),#FF8E8E);color:#fff}.btn-secondary{background:linear-gradient(135deg,var(--color-secondary),#6EDDD5);color:#fff}.btn-accent{background:linear-gradient(135deg,var(--color-accent),#FFF085);color:var(--color-text-dark)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes collision{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-5deg)}50%{transform:scale(1.3) rotate(5deg)}75%{transform:scale(1.2) rotate(-3deg)}to{transform:scale(1) rotate(0)}}.animate-bounce{animation:bounce 1s infinite}.animate-shake{animation:shake .5s}.animate-pulse{animation:pulse 1s infinite}.animate-fadeIn{animation:fadeIn .5s}.animate-collision{animation:collision .6s}@media(max-width:768px){:root{--font-size-3xl: 2rem;--font-size-2xl: 1.5rem;--spacing-xl: 2rem}.container{padding:var(--spacing-sm)}}