:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}#root{width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}a{color:inherit;text-decoration:none}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s}.plan-container{max-width:1200px;margin:2rem auto;padding:2rem}.plan-title{text-align:center;font-size:3rem;margin-bottom:3rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.sparkle{display:inline-block;animation:sparkle 2s infinite}.plan-section{margin-bottom:3rem;background:#ffffff1a;border-radius:20px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.plan-section h2{font-size:2rem;margin-bottom:1.5rem;color:gold}.mechanics-grid,.design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.mechanic-card,.design-card{background:#ffffff1a;padding:1.5rem;border-radius:15px;border:1px solid rgba(255,255,255,.2)}.mechanic-card h3,.design-card h3{margin-bottom:1rem;color:#ffb6c1}.mode-list{display:flex;flex-direction:column;gap:1.5rem}.mode-card{background:#ffffff1a;padding:1.5rem;border-radius:15px;border:1px solid rgba(255,255,255,.2)}.mode-card.story-mode{border:2px solid #FFD700;background:#ffd7001a}.mode-card h3{color:#ffb6c1;margin-bottom:.5rem}.mode-card p{margin-bottom:1rem;font-style:italic}.story-examples{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)}.story-examples h4{color:gold;margin-bottom:.5rem}.tech-list h3{color:#ffb6c1;margin-top:1.5rem;margin-bottom:.5rem}.tech-list ul{margin-bottom:1rem;padding-left:1.5rem}.next-steps{padding-left:2rem;line-height:2}.next-steps li{margin-bottom:.5rem}ul{list-style-type:none;padding-left:0}ul li:before{content:"✨ ";color:gold}.game-container{max-width:1400px;margin:2rem auto;padding:2rem;position:relative}.falling-ingredients-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.falling-ingredient{position:absolute;font-size:2rem;pointer-events:none;text-shadow:2px 2px 4px rgba(0,0,0,.3);filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}.game-header{text-align:center;margin-bottom:2rem}.game-mode-tabs{display:flex;justify-content:center;gap:1rem;margin:1.5rem 0;flex-wrap:wrap}.mode-tab{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);padding:.75rem 1.5rem;border-radius:25px;cursor:pointer;transition:all .3s;font-size:1rem;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mode-tab:hover{background:#fff3;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.mode-tab.active{background:linear-gradient(45deg,gold,orange);border-color:gold;color:#333;box-shadow:0 5px 20px #ffd70066}.game-header h1{font-size:2.5rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.story-narration{background:#ffffff1a;border-radius:15px;padding:1rem;max-width:600px;margin:0 auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.story-narration p{font-size:1.1rem;margin-bottom:.5rem;font-style:italic}.narration-controls{display:flex;gap:1rem;justify-content:center;margin:1rem 0}.narration-control{background:#ffd7004d;border:2px solid #FFD700;color:#fff;padding:.5rem 1rem;border-radius:20px;cursor:pointer;font-size:1rem;transition:background .3s}.narration-control:hover{background:#ffd70080}.narration-control.play{background:#4caf504d;border-color:#4caf50}.narration-control.play:hover{background:#4caf5080}.narration-control.stop{background:#f443364d;border-color:#f44336}.narration-control.stop:hover{background:#f4433680}.narration-control.skip{background:#2196f34d;border-color:#2196f3}.narration-control.skip:hover{background:#2196f380}.story-progress{text-align:center;margin-top:.5rem;font-size:.9rem;color:gold;font-weight:700}.game-area{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;align-items:start}.ingredients-shelf{background:#ffffff1a;border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ingredients-shelf h2{font-size:1.5rem;margin-bottom:1rem;text-align:center;color:gold}.ingredients-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.ingredient-bottle{border-radius:15px;padding:1rem;text-align:center;cursor:pointer;border:2px solid rgba(255,255,255,.3);transition:transform .3s;display:flex;flex-direction:column;align-items:center;gap:.5rem}.ingredient-bottle:hover{transform:translateY(-5px)}.ingredient-bottle.highlighted{border:3px solid #FFD700!important;box-shadow:0 0 20px #ffd70099}.ingredient-emoji{font-size:2rem}.ingredient-name{font-size:.9rem;color:#fff;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);background:#0000004d;padding:2px 6px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cauldron-area{display:flex;flex-direction:column;align-items:center;gap:2rem}.cauldron{position:relative;width:300px;height:300px}.cauldron.stirring{animation:stir .5s ease-in-out infinite}@keyframes stir{0%,to{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}.cauldron-liquid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;background:#3c1e10cc;transition:all .8s ease;overflow:hidden;box-shadow:inset 0 0 50px #00000080}.cauldron.active .cauldron-liquid{animation:liquidGlow 3s ease-in-out infinite}@keyframes liquidGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.bubble-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.bubble{position:absolute;border-radius:50%;background:#fff9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.3)}.bubble.large{width:25px;height:25px;background:radial-gradient(circle at 30% 30%,#fffc,#ffffff4d);box-shadow:inset 0 0 10px #fff6}.bubble.small{width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#ffffffe6,#fff6);box-shadow:inset 0 0 5px #ffffff80}.steam{position:absolute;width:30px;height:30px;background:radial-gradient(circle,rgba(255,255,255,.4),transparent);border-radius:50%;filter:blur(8px)}.swirl-effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;pointer-events:none}.swirl{width:100%;height:100%;border-radius:50%;opacity:.3;mix-blend-mode:overlay}.wooden-spoon{position:absolute;top:40%;left:50%;transform-origin:bottom center;pointer-events:none;z-index:10}.spoon-handle{width:8px;height:120px;background:linear-gradient(180deg,#d2691e,#8b4513,sienna 60%,#8b4513);border-radius:4px;position:relative;margin:0 auto;box-shadow:2px 0 4px #0000004d,inset 1px 0 2px #fff3}.spoon-handle:before{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:6px;height:110px;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%);border-radius:3px}.spoon-bowl{width:24px;height:32px;background:linear-gradient(145deg,#d2691e,sienna,#8b4513);border-radius:50%/60% 60% 40% 40%;margin:-2px auto 0;position:relative;box-shadow:2px 2px 6px #0006,inset -1px -1px 3px #0000004d,inset 1px 1px 2px #fff3}.spoon-bowl:before{content:"";position:absolute;top:2px;left:3px;width:18px;height:24px;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.4) 0%,transparent 70%);border-radius:50%/60% 60% 40% 40%}.cauldron.stirring .swirl{animation:stirSwirl .5s ease-in-out infinite}@keyframes stirSwirl{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.cauldron-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#4a4a4a,#2c2c2c);border:5px solid #1A1A1A;display:flex;align-items:center;justify-content:center;z-index:-1}.cauldron-icon{font-size:4rem;opacity:.3}.cauldron-controls{display:flex;gap:1rem}.stir-button,.reset-button{padding:.75rem 1.5rem;border-radius:25px;border:none;font-size:1.1rem;cursor:pointer;transition:transform .3s,box-shadow .3s;font-weight:700}.stir-button{background:linear-gradient(45deg,#87ceeb,#98fb98);color:#333}.reset-button{background:linear-gradient(45deg,#ff69b4,#ffb6c1);color:#fff}.stir-button:hover,.reset-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.stir-button:disabled{opacity:.5;cursor:not-allowed}.stir-button.highlighted{border:3px solid #FFD700!important;box-shadow:0 0 20px #ffd70099;background:linear-gradient(45deg,gold,orange)!important}.potion-result{background:#ffd70033;border:2px solid #FFD700;border-radius:20px;padding:2rem;text-align:center;position:relative}.potion-result h2{font-size:1.5rem;margin-bottom:.5rem}.result-name{font-size:2rem;color:gold;font-weight:700}.success-sparkle{position:absolute;top:-20px;right:-20px;font-size:3rem}.recipe-book{background:#ffffff1a;border-radius:20px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.recipe-book h2{font-size:1.5rem;margin-bottom:1rem;text-align:center;color:gold}.current-ingredients{background:#0003;border-radius:10px;padding:1rem;min-height:100px;margin-bottom:1rem}.current-ingredients p{text-align:center;opacity:.7}.added-ingredient{background:#ffffff1a;padding:.5rem;border-radius:10px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.recipe-hint{background:#ffd7001a;border:1px solid #FFD700;border-radius:10px;padding:1rem}.recipe-hint h3{color:gold;margin-bottom:.5rem}.recipe-hint p{font-style:italic}.recipe-selection{background:#ffd7001a;border:1px solid #FFD700;border-radius:15px;padding:1.5rem}.recipe-selection h3{color:gold;margin-bottom:1rem;text-align:center}.recipe-card{background:#ffffff1a;border-radius:10px;padding:1rem;margin-bottom:1rem;cursor:pointer;transition:transform .3s,box-shadow .3s;border:2px solid transparent}.recipe-card:hover{transform:translateY(-3px);box-shadow:0 5px 15px #ffd7004d;border-color:gold}.recipe-card h4{color:#ffb6c1;margin-bottom:.5rem}.difficulty{font-weight:700;padding:.2rem .5rem;border-radius:10px;font-size:.8rem;display:inline-block;margin-bottom:.5rem}.difficulty.medium{background:#ffa5004d;color:orange}.difficulty.hard{background:#ff45004d;color:#ff4500}.difficulty.expert{background:#8a2be24d;color:#8a2be2}.recipe-description{font-style:italic;margin-bottom:.5rem}.steps-count{color:#87ceeb;font-size:.9rem}.recipe-progress{background:#ffd7001a;border:2px solid #FFD700;border-radius:15px;padding:1.5rem}.recipe-progress h3{color:gold;margin-bottom:1rem;text-align:center}.progress-bar{background:#0000004d;border-radius:10px;height:20px;margin-bottom:1rem;overflow:hidden}.progress-fill{background:linear-gradient(45deg,gold,orange);height:100%;transition:width .5s ease;border-radius:10px}.recipe-feedback{background:#4caf5033;border:1px solid #4CAF50;border-radius:10px;padding:.5rem;margin:1rem 0;color:#98fb98;font-weight:700;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.current-step{background:#2196f333;border:1px solid #2196F3;border-radius:10px;padding:1rem;margin-top:1rem}.current-step strong{color:#87ceeb}.mode-selection{text-align:center;margin-bottom:2rem;padding:1.5rem;background:#ffd7001a;border:1px solid #FFD700;border-radius:15px}.mode-selection h3{color:gold;margin-bottom:1rem}.mode-button{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;padding:1rem 2rem;margin:0 1rem;border-radius:25px;font-size:1.2rem;cursor:pointer;transition:all .3s;font-weight:700}.mode-button:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}.mode-button.two-player{background:linear-gradient(45deg,#ff6b6b,#ee5a52)}.two-player-header{text-align:center;margin-bottom:1.5rem;padding:1rem;background:#ff6b6b1a;border:2px solid #FF6B6B;border-radius:15px}.two-player-header h3{color:#ff6b6b;margin-bottom:.5rem}.player-status{background:#4caf5033;padding:.5rem;border-radius:10px;margin-top:.5rem}.two-player-timer{text-align:center;background:#ffd70033;padding:1rem;border-radius:10px;margin-bottom:1rem;border:1px solid #FFD700}.two-player-timer p{color:gold;font-weight:700;margin:.25rem 0}.cancel-button{background:linear-gradient(45deg,#f44336,#d32f2f);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:20px;cursor:pointer;font-size:1rem;margin-top:1rem;transition:all .3s}.cancel-button:hover{transform:translateY(-2px);box-shadow:0 5px 10px #0000004d}.winner-display{text-align:center;background:linear-gradient(135deg,#ffd7004d,#ff69b433);border:3px solid #FFD700;border-radius:20px;padding:2rem;margin:2rem 0}.winner-display h2{color:gold;margin-bottom:1.5rem;font-size:2.5rem}.winner-name{color:#ff69b4;font-size:3rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:winnerGlow 2s ease-in-out infinite}@keyframes winnerGlow{0%,to{text-shadow:2px 2px 4px rgba(0,0,0,.5)}50%{text-shadow:0 0 20px rgba(255,105,180,.8),2px 2px 4px rgba(0,0,0,.5)}}.player-times{display:flex;justify-content:space-around;margin:2rem 0;gap:2rem}.player-result{background:#ffffff1a;padding:1.5rem;border-radius:15px;flex:1;border:2px solid transparent}.player-result:first-child{border-color:#4caf50}.player-result:last-child{border-color:#2196f3}.player-result h4{color:gold;margin-bottom:.5rem;font-size:1.5rem}.player-result p{margin:.25rem 0;font-size:1.1rem}.play-again-button{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1.2rem;cursor:pointer;margin-top:1rem;transition:all .3s;font-weight:700}.play-again-button:hover{transform:translateY(-3px);box-shadow:0 7px 20px #4caf5066}.start-section{background:#4caf501a;border:2px solid #4CAF50;border-radius:15px;padding:1.5rem;text-align:center;margin:1rem 0}.start-section h3{color:#4caf50;margin-bottom:.5rem}.start-button{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1.5rem;cursor:pointer;margin:1rem;transition:all .3s;font-weight:700;animation:pulse 2s infinite}.start-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 7px 20px #4caf5066}@keyframes pulse{0%,to{box-shadow:0 5px 15px #4caf504d}50%{box-shadow:0 7px 25px #4caf5099}}.recipe-instructions{background:#ffd7001a;border:2px solid #FFD700;border-radius:15px;padding:1rem;margin-bottom:1.5rem}.recipe-instructions h2{color:gold;margin-bottom:1rem;text-align:center}.live-timer{background:#ff450033;border:2px solid #FF4500;border-radius:10px;padding:.75rem;margin:1rem 0;text-align:center;font-weight:700;font-size:1.2rem;color:#ff4500;animation:timerPulse 1s infinite}@keyframes timerPulse{0%,to{background:#ff450033}50%{background:#ff450066}}.target-time{color:gold;font-weight:400}.celebration-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}.confetti{position:absolute;font-size:3rem;animation:confettiFall 3s linear infinite}.confetti:nth-child(1){left:10%;animation-delay:0s}.confetti:nth-child(2){left:30%;animation-delay:.5s}.confetti:nth-child(3){left:50%;animation-delay:1s}.confetti:nth-child(4){left:70%;animation-delay:1.5s}.rainbow-animation{position:absolute;top:20%;left:50%;transform:translate(-50%);font-size:5rem;animation:rainbowBounce 2s ease-in-out infinite}@keyframes confettiFall{0%{top:-10%;transform:rotate(0)}to{top:110%;transform:rotate(720deg)}}@keyframes rainbowBounce{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.2)}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:linear-gradient(135deg,#667eeae6,#764ba2e6);border:3px solid #FFD700;border-radius:25px;padding:2rem;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;text-align:center;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px #00000080}.modal-header{margin-bottom:1.5rem}.modal-header h2{color:gold;font-size:2.5rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.modal-subtitle{color:#fff;font-size:1.2rem;margin-bottom:1rem}.modal-recipe-info{background:#ffffff1a;border-radius:15px;padding:1.5rem;margin:1rem 0;border:2px solid rgba(255,215,0,.3)}.modal-recipe-info h3{color:#ffb6c1;margin-bottom:.5rem;font-size:1.8rem}.modal-recipe-info .difficulty{display:inline-block;margin:.5rem 0}.modal-recipe-info .recipe-description{font-style:italic;margin:.5rem 0;font-size:1.1rem}.modal-recipe-info .steps-count{color:#87ceeb;font-size:1rem;margin-top:.5rem}.modal-start-button{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;padding:1.5rem 3rem;border-radius:30px;font-size:2rem;cursor:pointer;margin:1rem;transition:all .3s;font-weight:700;animation:modalPulse 2s infinite;box-shadow:0 8px 25px #4caf5066}.modal-start-button:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 35px #4caf5099}@keyframes modalPulse{0%,to{box-shadow:0 8px 25px #4caf5066;transform:scale(1)}50%{box-shadow:0 12px 35px #4caf50b3;transform:scale(1.02)}}.modal-game-complete{text-align:center}.modal-winner{font-size:4rem;color:#ff69b4;margin:1rem 0;text-shadow:3px 3px 6px rgba(0,0,0,.7);animation:winnerGlow 2s ease-in-out infinite}.modal-results{display:flex;justify-content:space-around;gap:2rem;margin:2rem 0}.modal-player-result{background:#ffffff26;border-radius:20px;padding:1.5rem;flex:1;border:3px solid transparent}.modal-player-result.winner{border-color:gold;background:#ffd7001a}.modal-player-result.player1{border-color:#4caf50}.modal-player-result.player2{border-color:#2196f3}.modal-player-result h4{color:gold;font-size:1.8rem;margin-bottom:1rem}.modal-player-result .time{font-size:2.5rem;font-weight:700;color:#fff;margin:.5rem 0}.modal-player-result .recipe-name{color:#ffb6c1;font-size:1.2rem;margin-bottom:.5rem}.modal-buttons{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.modal-button{padding:1rem 2rem;border:none;border-radius:25px;font-size:1.2rem;cursor:pointer;font-weight:700;transition:all .3s}.modal-button.primary{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff}.modal-button.secondary{background:linear-gradient(45deg,#ff6b6b,#ee5a52);color:#fff}.modal-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.close-modal{position:absolute;top:1rem;right:1rem;background:#f44336cc;border:none;border-radius:50%;width:40px;height:40px;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s}.close-modal:hover{background:#f44336;transform:scale(1.1)}@media (max-width: 1024px){.game-area{grid-template-columns:1fr}.ingredients-grid{grid-template-columns:repeat(4,1fr)}.modal-content{padding:1.5rem;margin:1rem}.modal-results{flex-direction:column;gap:1rem}.modal-start-button{font-size:1.5rem;padding:1rem 2rem}}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.2);position:sticky;top:0;z-index:100}.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none;display:flex;align-items:center;gap:.5rem}.logo-icon{font-size:2rem}.nav-links{display:flex;gap:2rem}.nav-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:20px;transition:background .3s}.nav-link:hover{background:#fff3}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes sparkle{0%{opacity:0}50%{opacity:1}to{opacity:0}}