*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#fad1e6,#dcc7f8);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}#root,body{min-height:100vh}#root{display:flex;flex-direction:column}@media (min-width:768px){body{font-size:18px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.home-screen{align-items:center;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:24px;position:relative}.home-container{max-width:600px;position:relative;text-align:center;width:100%;z-index:2}.background-decoration{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.floating-star{animation:float 4s ease-in-out infinite;font-size:2rem;opacity:.7;position:absolute}.star-1{animation-delay:0s;left:10%;top:10%}.star-2{animation-delay:1s;right:15%;top:20%}.star-3{animation-delay:2s;left:5%;top:60%}.star-4{animation-delay:3s;right:10%;top:70%}.star-5{animation-delay:1.5s;left:50%;top:40%}.home-content{background:linear-gradient(145deg,#fff,#f8f8f8);border-radius:24px;box-shadow:0 12px 32px #6e4b8b40;overflow:hidden;padding:48px 32px;position:relative}.cata-cover{display:flex;justify-content:center;margin-bottom:24px}.cata-image{animation:float 3s ease-in-out infinite;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;height:auto;max-width:200px}.home-content:before{background:linear-gradient(90deg,#f4c542,#e6b53a);content:"";height:4px;left:0;position:absolute;right:0;top:0}.title-section{margin-bottom:32px}.main-title{color:#6e4b8b;font-size:clamp(28px,4vw,32px);font-weight:700;line-height:1.2;margin-bottom:16px;text-shadow:0 2px 4px #6e4b8b1a}.subtitle{color:#5a3f73;font-size:clamp(20px,3vw,24px);font-weight:500;line-height:1.3;margin:0}.magic-items-preview{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:32px 0}.item-preview{animation:sparkle 2s ease-in-out infinite;cursor:pointer;font-size:3rem;transition:transform .2s ease}.item-preview:hover{transform:scale(1.1)}.item-preview:first-child{animation-delay:0s}.item-preview:nth-child(2){animation-delay:.5s}.item-preview:nth-child(3){animation-delay:1s}.item-preview:nth-child(4){animation-delay:1.5s}.button-group{align-items:center;display:flex;flex-direction:column;gap:16px}.play-button{border:none;border-radius:16px;cursor:pointer;font-size:clamp(24px,3.5vw,28px);font-weight:600;max-width:300px;min-height:56px;overflow:hidden;padding:16px 32px;position:relative;transition:all .3s ease;width:100%}.play-button.primary{background:linear-gradient(145deg,#e91e63,#c2185b);box-shadow:0 8px 24px #e91e634d;color:#fff}.play-button.secondary{background:linear-gradient(145deg,#dcc7f8,#c4b5f0);box-shadow:0 8px 24px #6e4b8b4d;color:#6e4b8b}.play-button:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.play-button:hover{box-shadow:0 12px 32px #e91e6366;transform:translateY(-2px)}.play-button:hover:before{left:100%}.play-button:active{box-shadow:0 4px 16px #e91e634d;transform:translateY(0)}@media (min-width:768px){.home-screen{padding:48px}.home-content{padding:64px 48px}.magic-items-preview{gap:24px}.item-preview{font-size:4rem}}@media (prefers-reduced-motion:reduce){.floating-star,.item-preview{animation:none}.play-button:before{display:none}}.lesson-select-screen{align-items:center;background:linear-gradient(135deg,#fad1e6,#dcc7f8);display:flex;justify-content:center;min-height:100vh;overflow-x:hidden;padding:24px;position:relative}.lesson-container{max-width:1000px;text-align:center;width:100%}.lesson-header{margin-bottom:32px}.lesson-title{color:#6e4b8b;font-size:clamp(28px,4vw,32px);font-weight:700;line-height:1.2;margin-bottom:16px;text-shadow:0 2px 4px #6e4b8b1a}.lesson-subtitle{color:#5a3f73;font-size:clamp(18px,2.5vw,22px);font-weight:500;line-height:1.4;margin:0}.lessons-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:32px}.lesson-card{align-items:center;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 4px 12px #6e4b8b26;cursor:pointer;display:flex;gap:16px;min-height:80px;padding:24px;text-align:left;transition:all .3s ease}.lesson-card:hover{border-color:#f4c542;box-shadow:0 8px 24px #6e4b8b40;transform:translateY(-4px)}.lesson-card.completed{background:linear-gradient(145deg,#e8f5e8,#d4f1d4);border-color:#4caf50}.lesson-card.completed:hover{border-color:#45a049}.lesson-icon{animation:sparkle 2s ease-in-out infinite;flex-shrink:0;font-size:3rem}.lesson-card.completed .lesson-icon{animation:none}.lesson-content{flex:1 1}.lesson-name{color:#6e4b8b;font-size:clamp(18px,2.5vw,20px);font-weight:600;margin:0 0 8px}.lesson-description{color:#5a3f73;font-size:clamp(14px,2vw,16px);line-height:1.4;margin:0 0 8px}.completed-badge{background:linear-gradient(145deg,#4caf50,#45a049);border-radius:12px;box-shadow:0 2px 8px #4caf504d;color:#4caf50;color:#fff;display:inline-block;font-size:clamp(12px,1.5vw,14px);font-weight:600;padding:4px 12px}.home-button{background:linear-gradient(145deg,#f4c542,#e6b53a);border:none;border-radius:16px;box-shadow:0 8px 24px #f4c5424d;color:#fff;cursor:pointer;font-size:clamp(18px,2.5vw,20px);font-weight:600;min-height:56px;padding:16px 32px;transition:all .3s ease}.home-button:hover{box-shadow:0 12px 32px #f4c54266;transform:translateY(-2px)}.home-button:active{box-shadow:0 4px 16px #f4c5424d;transform:translateY(0)}@media (min-width:768px){.lesson-select-screen{padding:32px}.lessons-grid{gap:24px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.lesson-card{min-height:100px;padding:32px}.lesson-icon{font-size:4rem}}@media (prefers-reduced-motion:reduce){.lesson-icon{animation:none}}.magic-counter{align-items:center;display:flex;flex-direction:column;gap:16px;padding:24px}.counter-container{align-items:center;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;overflow:hidden;padding:32px;position:relative}.counter-container:before{background:linear-gradient(90deg,#f4c542,#e6b53a);content:"";height:3px;left:0;position:absolute;right:0;top:0}.item-group{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:60px;min-width:80px}.left-group{order:1}.right-group{order:3}.magic-item{align-items:center;animation:float 3s ease-in-out infinite;background:linear-gradient(145deg,#dcc7f8,#c4b5f0);border-radius:12px;box-shadow:0 4px 12px #6e4b8b26;display:flex;font-size:2.5rem;height:60px;justify-content:center;transition:all .3s ease;width:60px}.magic-item.left{animation-delay:0s}.magic-item.right{animation-delay:1s}.magic-item.highlight{animation:glow 1s ease-in-out;background:linear-gradient(145deg,#f4c542,#e6b53a);box-shadow:0 6px 20px #f4c54266;transform:scale(1.1)}.plus-sign{align-items:center;color:#6e4b8b;display:flex;font-size:3rem;font-weight:700;height:60px;justify-content:center;order:2;width:60px}.hint-text{animation:bounce 1s ease-in-out;background:linear-gradient(145deg,#f4c542,#e6b53a);border-radius:12px;box-shadow:0 4px 12px #f4c5424d;color:#6e4b8b;color:#fff;padding:12px 24px;text-align:center}@media (min-width:768px){.magic-counter{padding:32px}.counter-container{gap:32px;padding:48px}.magic-item{font-size:3rem;height:70px;width:70px}.plus-sign{font-size:3.5rem;height:70px;width:70px}.item-group{min-height:80px;min-width:100px}}@media (prefers-reduced-motion:reduce){.magic-item,.plus-sign{animation:none}.magic-item.highlight{animation:none;transform:none}.hint-text{animation:none}}.options-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));margin:0 auto;max-width:400px;padding:24px}.option-button{align-items:center;background:linear-gradient(145deg,#fff,#f8f8f8);border:3px solid #dcc7f8;border-radius:16px;box-shadow:0 4px 12px #6e4b8b26;color:#6e4b8b;cursor:pointer;display:flex;font-size:clamp(24px,3.5vw,28px);font-weight:700;justify-content:center;min-height:56px;min-width:56px;overflow:hidden;position:relative;transition:all .3s ease}.option-button:before{background:linear-gradient(90deg,#0000,#dcc7f84d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.option-button:hover:not(:disabled){border-color:#f4c542;box-shadow:0 8px 24px #6e4b8b40;transform:translateY(-2px)}.option-button:hover:not(:disabled):before{left:100%}.option-button:active:not(:disabled){box-shadow:0 4px 16px #6e4b8b33;transform:translateY(0)}.option-button.selected{background:linear-gradient(145deg,#f4c542,#e6b53a);border-color:#e6b53a;box-shadow:0 6px 20px #f4c54266;color:#fff}.option-button.correct{animation:celebration 1.5s ease-in-out;background:linear-gradient(145deg,#4caf50,#45a049);border-color:#45a049;box-shadow:0 8px 24px #4caf5066;color:#fff;overflow:visible;position:relative;transform:scale(1.1)}.option-button.correct:before{animation:sparkle .8s ease-in-out infinite;animation-delay:.2s;content:"✨";font-size:1.5rem;left:-10px;position:absolute;top:-10px}.option-button.correct:after{animation:sparkle .8s ease-in-out infinite;animation-delay:.4s;content:"🌟";font-size:1.5rem;position:absolute;right:-10px;top:-10px}.option-button.incorrect{animation:shake .5s ease-in-out;background:linear-gradient(145deg,#f44336,#d32f2f);border-color:#d32f2f;box-shadow:0 8px 24px #f4433666;color:#fff}.option-button.neutral{background:linear-gradient(145deg,#e0e0e0,#bdbdbd);border-color:#bdbdbd;color:#9e9e9e;opacity:.6}.option-button:disabled{cursor:not-allowed}.option-button:disabled:before{display:none}@media (min-width:768px){.options-grid{gap:20px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));max-width:500px;padding:32px}.option-button{font-size:clamp(28px,4vw,32px);min-height:70px;min-width:70px}}@keyframes celebration{0%{box-shadow:0 4px 12px #6e4b8b26;transform:scale(1)}25%{box-shadow:0 12px 32px #4caf5099;transform:scale(1.2) rotate(5deg)}50%{box-shadow:0 16px 40px #4caf50cc;transform:scale(1.15) rotate(-3deg)}75%{box-shadow:0 12px 32px #4caf5099;transform:scale(1.1) rotate(2deg)}to{box-shadow:0 8px 24px #4caf5066;transform:scale(1.1)}}@media (prefers-reduced-motion:reduce){.option-button:before{display:none}.option-button.correct,.option-button.incorrect{animation:none}.option-button.correct:after,.option-button.correct:before{display:none}}.star-meter{align-items:center;display:flex;flex-direction:column;gap:8px}.star-label{color:#6e4b8b;font-size:clamp(16px,2vw,18px);font-weight:600;text-shadow:0 1px 2px #6e4b8b1a}.star-container{flex-wrap:wrap;gap:8px}.star,.star-container{align-items:center;display:flex;justify-content:center}.star{font-size:2rem;height:40px;transition:all .3s ease;width:40px}.star.filled{animation:sparkle 2s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(244,197,66,.3))}.star.empty{filter:grayscale(100%);opacity:.3}.star.filled:first-child{animation-delay:0s}.star.filled:nth-child(2){animation-delay:.2s}.star.filled:nth-child(3){animation-delay:.4s}.star.filled:nth-child(4){animation-delay:.6s}.star.filled:nth-child(5){animation-delay:.8s}@media (min-width:768px){.star{font-size:2.5rem;height:48px;width:48px}.star-container{gap:12px}}@media (prefers-reduced-motion:reduce){.star.filled{animation:none}}.game-screen{background:linear-gradient(135deg,#fad1e6,#dcc7f8);min-height:100vh;overflow-x:hidden;padding:24px;position:relative}.celebration-particles,.game-screen{align-items:center;display:flex;justify-content:center}.celebration-particles{z-index:10}.celebration-main-image{animation:bounce 1s ease-in-out infinite;border-radius:16px;box-shadow:0 8px 24px #6e4b8b4d;height:auto;max-width:200px;position:relative;z-index:11}.celebration-particle{animation:celebrationFloat 1.5s ease-out forwards;font-size:2rem;opacity:.9;position:absolute}.game-container{flex-direction:column;gap:24px;max-width:800px}.game-container,.game-header{align-items:center;display:flex;width:100%}.game-header{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 4px 12px #6e4b8b26;justify-content:space-between;padding:16px 24px}.challenge-progress{background:linear-gradient(145deg,#f4c542,#e6b53a);border-radius:12px;box-shadow:0 2px 8px #f4c5424d;color:#6e4b8b;color:#fff;font-size:clamp(16px,2vw,18px);font-weight:600;padding:8px 16px}.challenge-message{align-items:center;animation:bounce .5s ease-in-out;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:12px;box-shadow:0 4px 12px #6e4b8b26;color:#6e4b8b;display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:60px;padding:16px 24px;text-align:center}.challenge-message,.next-button{font-size:clamp(20px,3vw,24px);font-weight:600}.next-button{animation:glow 1s ease-in-out infinite;background:linear-gradient(145deg,#f4c542,#e6b53a);border:none;border-radius:16px;box-shadow:0 8px 24px #f4c5424d;color:#fff;cursor:pointer;min-height:56px;padding:16px 32px;transition:all .3s ease}.next-button:hover{box-shadow:0 12px 32px #f4c54266;transform:translateY(-2px)}.next-button:active{box-shadow:0 4px 16px #f4c5424d;transform:translateY(0)}.hint-strip{animation:bounce .5s ease-in-out;background:linear-gradient(145deg,#f4c542,#e6b53a);border-radius:12px;box-shadow:0 4px 12px #f4c5424d;color:#fff;max-width:600px;padding:16px 24px;text-align:center;width:100%}.hint-text{font-size:clamp(16px,2vw,18px);font-weight:600;margin:0}@media (min-width:768px){.game-screen{padding:32px}.game-container{gap:32px}.game-header{padding:20px 32px}.challenge-message{min-height:80px;padding:20px 32px}.next-button{min-height:70px;padding:20px 40px}.hint-strip{padding:20px 32px}}@media (prefers-reduced-motion:reduce){.challenge-message,.hint-strip,.next-button{animation:none}.celebration-particle,.wrong-particle{animation:none;opacity:.7}.wrong-main-image{animation:none}}.reward-screen{align-items:center;background:linear-gradient(135deg,#fad1e6,#dcc7f8);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:24px;position:relative}.reward-container{max-width:600px;position:relative;text-align:center;width:100%;z-index:2}.particles{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.particle{animation:float 3s ease-in-out infinite;opacity:.8}.crown-section{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:24px;box-shadow:0 12px 32px #6e4b8b40;margin-bottom:32px;overflow:hidden;padding:48px 32px;position:relative}.crown-section:before{background:linear-gradient(90deg,#f4c542,#e6b53a);content:"";height:4px;left:0;position:absolute;right:0;top:0}.crown{animation:sparkle 2s ease-in-out infinite;display:inline-block;font-size:6rem;margin-bottom:24px}.finish-image{animation:float 3s ease-in-out infinite;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;height:auto;margin-bottom:24px;max-width:200px}.reward-title{color:#6e4b8b;font-size:clamp(28px,4vw,32px);font-weight:700;line-height:1.2;margin-bottom:16px;text-shadow:0 2px 4px #6e4b8b1a}.reward-subtitle{color:#5a3f73;font-size:clamp(18px,2.5vw,22px);font-weight:500;line-height:1.4;margin:0}.stars-section{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;margin-bottom:24px;padding:32px}.score-details{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-around;margin-top:24px}.score-item{align-items:center;display:flex;flex-direction:column;gap:8px}.score-label{color:#6e4b8b;font-size:clamp(14px,2vw,16px);font-weight:500}.score-value{background:linear-gradient(145deg,#f4c542,#e6b53a);border-radius:12px;box-shadow:0 2px 8px #f4c5424d;color:#f4c542;color:#fff;font-size:clamp(18px,2.5vw,20px);font-weight:700;padding:8px 16px}.last-session{background:linear-gradient(145deg,#dcc7f8,#c4b5f0);border-radius:12px;box-shadow:0 4px 12px #6e4b8b26;margin-bottom:24px;padding:16px 24px}.last-session h3{color:#6e4b8b;font-size:clamp(16px,2vw,18px);font-weight:600;margin:0 0 8px}.last-session p{color:#5a3f73;font-size:clamp(14px,2vw,16px);font-weight:500;margin:0}.action-buttons{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.action-button{border:none;border-radius:16px;box-shadow:0 4px 12px #6e4b8b26;cursor:pointer;font-size:clamp(18px,2.5vw,20px);font-weight:600;min-height:56px;padding:16px 32px;transition:all .3s ease}.action-button.primary{background:linear-gradient(145deg,#f4c542,#e6b53a);box-shadow:0 8px 24px #f4c5424d;color:#fff}.action-button.primary:hover{box-shadow:0 12px 32px #f4c54266;transform:translateY(-2px)}.action-button.secondary{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;color:#6e4b8b}.action-button.secondary:hover{border-color:#f4c542;box-shadow:0 8px 24px #6e4b8b40;transform:translateY(-2px)}.action-button.tertiary{background:linear-gradient(145deg,#e0e0e0,#bdbdbd);border:2px solid #bdbdbd;color:#6e4b8b}.action-button.tertiary:hover{border-color:#9e9e9e;box-shadow:0 8px 24px #9e9e9e40;transform:translateY(-2px)}.action-button:active{transform:translateY(0)}@media (min-width:768px){.reward-screen{padding:32px}.crown-section{padding:64px 48px}.crown{font-size:8rem}.stars-section{padding:40px}.action-buttons{gap:24px}.action-button{min-height:70px;padding:20px 40px}}@media (prefers-reduced-motion:reduce){.crown,.particle{animation:none}}.spelling-drag-drop{align-items:center;display:flex;flex-direction:column;gap:32px;margin:0 auto;max-width:800px;padding:24px}.spelling-header{align-items:center;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;display:flex;justify-content:space-between;padding:20px 24px;width:100%}.spelling-progress{color:#6e4b8b;font-size:clamp(16px,2.5vw,18px);font-weight:600}.target-word{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;padding:32px;text-align:center;width:100%}.target-word h2{color:#6e4b8b;font-size:clamp(20px,3vw,24px);font-weight:600;margin-bottom:24px}.word-slots{flex-wrap:nowrap;gap:8px;max-width:100%;padding:8px 16px;width:100%}.word-slot,.word-slots{display:flex;justify-content:center}.word-slot{align-items:center;background:linear-gradient(145deg,#fad1e6,#f8bbd9);border:3px dashed #dcc7f8;border-radius:10px;color:#6e4b8b;flex-shrink:0;font-size:1.8rem;font-weight:700;height:60px;min-height:60px;min-width:60px;transition:all .3s ease;width:60px}.word-slot.filled{animation:celebration .5s ease-in-out;background:linear-gradient(145deg,#4caf50,#45a049);border:3px solid #4caf50;color:#fff}.word-slot.current-target{animation:pulse 1.5s ease-in-out infinite;background:linear-gradient(145deg,#f4c542,#e6b53a);border:3px solid #f4c542;box-shadow:0 0 20px #f4c54280;color:#fff}.word-slot.future{background:linear-gradient(145deg,#e0e0e0,#bdbdbd);border:3px dashed #bdbdbd;color:#9e9e9e;opacity:.6}.letter-pool{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;padding:24px;text-align:center;width:100%}.letter-pool h3{color:#6e4b8b;font-size:clamp(18px,2.5vw,20px);font-weight:600;margin-bottom:20px}.letters-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(7,1fr);margin:0 auto;max-width:500px}.letter-tile{align-items:center;background:linear-gradient(145deg,#dcc7f8,#c4b5f0);border:2px solid #dcc7f8;border-radius:10px;color:#6e4b8b;cursor:pointer;display:flex;font-size:1.5rem;font-weight:700;height:50px;justify-content:center;min-height:50px;min-width:50px;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:50px}.letter-tile.available:hover{background:linear-gradient(145deg,#f4c542,#e6b53a);border-color:#f4c542;box-shadow:0 6px 20px #6e4b8b40;color:#fff;transform:translateY(-2px)}.letter-tile.available:active{transform:scale(.95)}.letter-tile.used{background:linear-gradient(145deg,#e0e0e0,#bdbdbd);color:#9e9e9e;cursor:not-allowed;opacity:.3}.completion-celebration{overflow:hidden;position:relative}.celebration-text{animation:bounce 1s ease-in-out;font-size:clamp(24px,3.5vw,28px);margin-bottom:16px}.celebration-particles{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.particle{animation:celebrationFloat 2s ease-out forwards;font-size:1.5rem;opacity:.9;position:absolute}@keyframes celebrationFloat{0%{opacity:0;transform:translateY(0) scale(.5)}50%{opacity:1;transform:translateY(-30px) scale(1.2)}to{opacity:0;transform:translateY(-60px) scale(.8)}}@keyframes pulse{0%,to{box-shadow:0 0 20px #f4c54280;transform:scale(1)}50%{box-shadow:0 0 30px #f4c542cc;transform:scale(1.05)}}@media (min-width:768px){.spelling-drag-drop{gap:40px;padding:32px}.word-slot{font-size:2.2rem;height:70px;min-height:70px;min-width:70px;width:70px}.word-slots{gap:12px}.letter-tile{font-size:2rem;height:60px;min-height:60px;min-width:60px;width:60px}.letters-grid{gap:12px;grid-template-columns:repeat(7,1fr);max-width:600px}}.wrong-particles{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:10}.wrong-main-image{animation:wrongBounce 1s ease-in-out infinite;border-radius:16px;box-shadow:0 8px 24px #f443364d;height:auto;max-width:200px;position:relative;z-index:11}.wrong-particle{animation:wrongFloat 1.5s ease-out forwards;font-size:2rem;opacity:.9;position:absolute}@keyframes wrongBounce{0%,to{transform:scale(1) rotate(0deg)}25%{transform:scale(1.05) rotate(-2deg)}75%{transform:scale(1.05) rotate(2deg)}}@keyframes wrongFloat{0%{opacity:0;transform:translateY(0) scale(.5)}50%{opacity:1;transform:translateY(-50px) scale(1.2)}to{opacity:0;transform:translateY(-100px) scale(.8)}}@media (prefers-reduced-motion:reduce){.celebration-text,.word-slot.filled{animation:none}.word-slot.current-target{animation:none;box-shadow:0 0 15px #f4c54266}.particle,.wrong-particle{animation:none;opacity:.7}.wrong-main-image{animation:none}}.spelling-trace{align-items:center;display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:600px;padding:24px}.trace-header{background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;padding:24px;text-align:center;width:100%}.trace-header h2{color:#6e4b8b;font-size:clamp(20px,3vw,24px);font-weight:600;margin-bottom:16px}.trace-progress-info{align-items:center;background:linear-gradient(145deg,#f8f8f8,#e8e8e8);border:1px solid #dcc7f8;border-radius:12px;display:flex;justify-content:space-between;margin-bottom:16px;padding:12px 16px}.trace-progress-text{color:#6e4b8b;font-size:clamp(14px,2vw,16px);font-weight:600}.progress{flex-wrap:wrap;gap:12px}.progress,.progress-letter{display:flex;justify-content:center}.progress-letter{align-items:center;background:linear-gradient(145deg,#fad1e6,#f8bbd9);border:3px solid #dcc7f8;border-radius:12px;color:#6e4b8b;font-size:1.8rem;font-weight:700;height:50px;transition:all .3s ease;width:50px}.progress-letter.current{animation:glow 1s ease-in-out infinite;background:linear-gradient(145deg,#f4c542,#e6b53a);border-color:#f4c542;color:#fff}.progress-letter.completed{animation:celebration .5s ease-in-out;background:linear-gradient(145deg,#4caf50,#45a049);border-color:#4caf50;color:#fff}.trace-canvas-container{align-items:center;background:linear-gradient(145deg,#fff,#f8f8f8);border:2px solid #dcc7f8;border-radius:16px;box-shadow:0 8px 24px #6e4b8b33;display:flex;flex-direction:column;gap:16px;padding:24px;position:relative;width:100%}.trace-canvas{background:#fff;border:2px solid #dcc7f8;border-radius:12px;cursor:crosshair;height:auto;max-width:100%;touch-action:none}.clear-button{background:linear-gradient(145deg,#f44336,#d32f2f);border:none;border-radius:12px;box-shadow:0 4px 12px #f443364d;color:#fff;cursor:pointer;font-size:clamp(14px,2vw,16px);font-weight:600;min-height:44px;padding:12px 24px;transition:all .3s ease}.clear-button:hover{box-shadow:0 6px 16px #f4433666;transform:translateY(-2px)}.clear-button:active{box-shadow:0 2px 8px #f443364d;transform:translateY(0)}.completion-celebration{animation:celebration 1s ease-in-out;background:linear-gradient(145deg,#4caf50,#45a049);border-radius:16px;box-shadow:0 12px 32px #4caf5066;color:#fff;padding:32px;text-align:center;width:100%}.celebration-image{animation:bounce 1s ease-in-out;border-radius:12px;height:auto;margin-bottom:16px;max-width:150px}.celebration-text{font-size:clamp(20px,3vw,24px);font-weight:700;margin:0}@media (min-width:768px){.spelling-trace{gap:32px;padding:32px}.trace-canvas{height:375px;width:500px}.progress-letter{font-size:2.2rem;height:60px;width:60px}.progress{gap:16px}}@media (prefers-reduced-motion:reduce){.completion-celebration,.progress-letter.completed,.progress-letter.current{animation:none}}.app{background:linear-gradient(135deg,#fad1e6,#dcc7f8);display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;position:relative}@keyframes sparkle{0%,to{opacity:1;transform:scale(1) rotate(0deg)}50%{opacity:.8;transform:scale(1.1) rotate(180deg)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes glow{0%,to{box-shadow:0 0 20px #f4c54280}50%{box-shadow:0 0 30px #f4c542cc}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.sparkle{animation:sparkle 2s ease-in-out infinite}.bounce{animation:bounce 1s ease-in-out}.shake{animation:shake .5s ease-in-out}.glow{animation:glow 1.5s ease-in-out infinite}.float{animation:float 3s ease-in-out infinite}@media (min-width:768px){.app{font-size:18px}}.spelling-game-screen{align-items:center;background:linear-gradient(135deg,#fad1e6,#dcc7f8);display:flex;justify-content:center;min-height:100vh;overflow-x:hidden;padding:24px;position:relative}@media (prefers-reduced-motion:reduce){.bounce,.float,.glow,.shake,.sparkle{animation:none}}
/*# sourceMappingURL=main.dd27eeed.css.map*/