@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap";.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:linear-gradient(135deg,#6e8efb,#a777e3);color:#fff;box-shadow:0 2px 5px #0003;position:sticky;top:0;z-index:1000}.branding-left a{color:#fff;text-decoration:none;font-weight:700;font-size:1.2em}.branding-left a:hover{text-decoration:underline}.game-title h1{margin:0;font-size:1.5em;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.header-right{display:flex;align-items:center;gap:15px}.progress-counter{font-size:.9em;background-color:#fff3;padding:5px 10px;border-radius:15px}.menu-button{background:none;border:none;color:#fff;font-size:1.8em;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.menu-button:hover{background-color:#ffffff4d}@media (max-width: 600px){.app-header{padding:8px 10px}.game-title h1{font-size:1.2em}.branding-left a{font-size:1em}.progress-counter{font-size:.8em;padding:4px 8px}.menu-button{font-size:1.5em}.header-right{gap:10px}}@media (max-width: 450px){.progress-counter{display:none}.game-title h1{font-size:1.1em}.header-right{gap:8px}}.element-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;border:1px solid #d1d5db;border-radius:8px;background-color:#fff;box-shadow:0 1px 2px #0000000d;text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background-color .15s ease;cursor:default;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.element-icon.small{padding:4px;border-radius:4px}.element-icon.medium{padding:8px;border-radius:8px}.element-icon.large{padding:12px;border-radius:10px}.element-emoji{font-size:1.8rem;line-height:1}.element-icon.small .element-emoji{font-size:1rem}.element-icon.medium .element-emoji{font-size:1.8rem}.element-icon.large .element-emoji{font-size:2.5rem}.element-name{margin-top:5px;font-size:.7rem;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:600}.element-icon.small .element-name{font-size:.6rem;margin-top:2px}.element-icon.large .element-name{font-size:.8rem;margin-top:6px}.element-icon.draggable:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 4px 8px #00000014;border-color:#9ca3af;background-color:#f9fafb}.element-icon.draggable{cursor:grab}.element-icon.draggable:active{cursor:grabbing}.inventory-controls{display:flex;flex-direction:column;padding:10px;background-color:#e9e9e9;border-bottom:1px solid #ccc;gap:10px}.search-bar{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:10px;color:#888}.search-bar input{flex-grow:1;padding:8px 8px 8px 30px;border:1px solid #ccc;border-radius:15px;font-size:.9em}.sort-buttons{display:flex;align-items:center;gap:5px;justify-content:flex-start}.sort-buttons label{margin-right:5px;font-size:.8em;color:#555}.sort-buttons button{padding:5px 8px;border:1px solid #ccc;background-color:#f8f8f8;cursor:pointer;border-radius:4px;transition:background-color .2s ease,border-color .2s ease;display:flex;align-items:center;justify-content:center;font-size:1em;color:#555}.sort-buttons button:hover{background-color:#e0e0e0}.sort-buttons button.active{background-color:#6e8efb;color:#fff;border-color:#6e8efb}.inventory-sidebar{height:calc(var(--app-height) - 60px);background-color:#f8f9fa;border-right:1px solid #dee2e6;display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 5px #0000000d;position:sticky;top:60px;flex-shrink:0}.inventory-controls{flex-shrink:0;padding:10px;background-color:#e9e9e9;border-bottom:1px solid #ccc;display:flex;flex-direction:column;gap:10px}.inventory-controls .search-bar{position:relative;display:flex;align-items:center}.inventory-controls .search-bar .search-icon{position:absolute;left:10px;color:#888;pointer-events:none;z-index:1}.inventory-controls .search-bar input{flex-grow:1;padding:8px 8px 8px 30px;border:1px solid #ccc;border-radius:15px;font-size:.9em;width:100%}.inventory-controls .sort-buttons{display:flex;align-items:center;gap:5px;justify-content:flex-start}.inventory-list{flex-grow:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;align-content:flex-start}.inventory-item{touch-action:none;opacity:1!important;transition:transform .15s ease,box-shadow .15s ease;display:block}.inventory-item .element-icon{opacity:1!important}.inventory-item .element-icon.draggable{cursor:grab}.inventory-item .element-icon.draggable:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 4px 8px #00000014}.inventory-item.source-is-dragging .element-icon.draggable{cursor:grabbing;transform:none;box-shadow:none}.no-results{padding:15px;text-align:center;color:#6c757d;grid-column:1 / -1}@keyframes newlyDiscoveredGlow{0%,to{box-shadow:0 0 8px 2px #ffd70080;border-color:#ffd700b3}50%{box-shadow:0 0 16px 5px #ffd700cc;border-color:gold}}.inventory-item.newly-discovered .element-icon{border:1px solid gold;animation:newlyDiscoveredGlow 1.5s ease-in-out 1;background-color:#fffbe6}@media (max-width: 768px){.inventory-sidebar{width:120px!important;height:calc(var(--app-height) - 60px);position:sticky;top:60px;flex-shrink:0;border-bottom:none;border-right:1px solid #dee2e6;box-shadow:2px 0 5px #0000000d;overflow:hidden;display:flex;flex-direction:column}.inventory-controls{padding:8px 5px 5px;gap:5px}.inventory-controls .sort-buttons label{display:none}.inventory-controls .sort-buttons{justify-content:center;gap:8px}.inventory-list{flex-grow:1;min-height:50px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 5px}.inventory-list .inventory-item{width:90%;max-width:65px}.inventory-list .inventory-item .element-icon{padding:5px;border-radius:6px}.inventory-list .inventory-item .element-icon .element-emoji{font-size:1.3rem}.inventory-list .inventory-item .element-icon .element-name{font-size:.6rem;margin-top:3px}.inventory-list .inventory-item .element-icon.draggable:hover{transform:none;box-shadow:0 1px 2px #0000000d;background-color:#f0f0f0}}@media (max-width: 400px){.inventory-sidebar{width:120px!important}.inventory-list{gap:8px;padding:8px 4px}.inventory-list .inventory-item{max-width:60px}.inventory-list .inventory-item .element-icon .element-emoji{font-size:1.2rem}.inventory-list .inventory-item .element-icon .element-name{display:none}}.workspace-element:active{cursor:grabbing}.workspace-element.droppable-over{outline:3px dashed #a777e3;outline-offset:4px;border-radius:12px}.workspace-element.dragging{opacity:.4}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.element-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.workspace-element.dragging{opacity:.4;transition:none;animation:none!important}@media (max-width: 768px){.workspace-element .element-icon{padding:8px;border-radius:8px}.workspace-element .element-icon .element-emoji{font-size:1.8rem}.workspace-element .element-icon .element-name{font-size:.7rem;margin-top:5px;font-weight:600}}@media (max-width: 480px){.workspace-element .element-icon{padding:6px;border-radius:6px}.workspace-element .element-icon .element-emoji{font-size:1.5rem}.workspace-element .element-icon .element-name{font-size:.6rem;margin-top:4px}}.workspace-area{flex-grow:1;height:calc(var(--app-height) - 60px);position:relative;background-color:#eef2f7;overflow:auto;-webkit-overflow-scrolling:touch;border:2px dashed transparent;transition:background-color .2s ease,border-color .2s ease}.workspace-area.over{background-color:#e0e7ef;border-color:#a777e3}.workspace-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#adb5bd;font-size:1.2em;text-align:center;pointer-events:none}.clear-button-container{position:sticky;bottom:0;right:0;left:0;padding:10px 15px;display:flex;justify-content:flex-end;pointer-events:none;z-index:19}.clear-workspace-button{z-index:20;pointer-events:auto;padding:10px 15px;background-color:#dc3545;color:#fff;border:none;border-radius:50%;width:50px;height:50px;font-size:1.5em;cursor:pointer;box-shadow:0 2px 5px #0003;transition:background-color .2s ease,transform .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.clear-workspace-button:hover{background-color:#c82333;transform:scale(1.1)}@media (max-width: 768px){.workspace-area{flex-grow:1;position:relative;overflow:auto;padding-bottom:65px}.clear-button-container{padding:8px 10px}.clear-workspace-button{width:45px;height:45px;font-size:1.3em}}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.8) translate(-10px,-10px)}to{opacity:1;transform:scale(1) translate(0)}}.workspace-element{touch-action:none}.workspace-element.element-success-appear{animation:successAppear .4s ease-out forwards}.workspace-element.droppable-over{outline:3px dashed #a777e3;outline-offset:4px;border-radius:12px;transition:outline-offset .1s ease-in-out,outline-color .1s ease-in-out}.workspace-element.dragging{opacity:.4;transition:none;animation:none}@keyframes successAppear{0%{opacity:0;transform:scale(.7) translate(-5px,-5px)}50%{opacity:.8;transform:scale(1.5)}to{opacity:1;transform:scale(1) translate(0)}}.discovered-recipe-item{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:6px;margin-bottom:8px;box-shadow:0 1px 2px #0000000d}.discovered-recipe-item .element-icon{border:none;background-color:transparent;box-shadow:none;padding:2px}.discovered-recipe-item .operator{font-size:1.2em;color:#6c757d;font-weight:700}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1100;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.menu-overlay.open{opacity:1;visibility:visible}.menu-content{background:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;position:relative;transform:scale(.9);transition:transform .3s ease}.menu-overlay.open .menu-content{transform:scale(1)}.close-menu-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:2em;color:#aaa;cursor:pointer;padding:5px;line-height:1;transition:color .2s ease}.close-menu-button:hover{color:#333}.menu-tabs{display:flex;border-bottom:1px solid #eee;margin-bottom:20px;gap:5px;flex-wrap:wrap}.menu-tabs button{padding:10px 15px;border:none;background:none;cursor:pointer;font-size:1em;color:#555;border-bottom:3px solid transparent;transition:color .2s ease,border-bottom-color .2s ease;display:flex;align-items:center;gap:5px}.menu-tabs button:hover{color:#000}.menu-tabs button.active{color:#6e8efb;border-bottom-color:#6e8efb}.menu-tabs button.reset-button{margin-left:auto;color:#dc3545;border-bottom:none}.menu-tabs button.reset-button:hover{color:#a02734;background-color:#dc35451a;border-radius:4px}.menu-tab-content{margin-top:20px}.instructions-content h2,.recipes-content h2{margin-top:0;margin-bottom:15px;color:#333;font-size:1.4em}.instructions-content ol{padding-left:20px;line-height:1.6;color:#555}.instructions-content li{margin-bottom:10px}.instructions-content strong{color:#6e8efb}.recipes-list{max-height:40vh;overflow-y:auto;padding-right:10px}.recipes-content p{color:#6c757d;text-align:center;padding:20px}@media (max-width: 600px){.menu-content{padding:20px;width:95%;max-height:85vh}.menu-tabs button{padding:8px 10px;font-size:.9em}.close-menu-button{font-size:1.8em;top:5px;right:5px}.menu-tabs button.reset-button{margin-left:0;margin-top:5px}}.resize-handle{width:8px;height:100%;background-color:#d0d0d0;cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;flex-shrink:0}.resize-handle:hover{background-color:#b0b0b0}.resize-handle:active{background-color:#909090}.resize-handle-dots{width:2px;height:30px;background:repeating-linear-gradient(to bottom,#888,#888 2px,transparent 2px,transparent 6px)}@media (max-width: 768px){.resize-handle{display:none}}.app-container{display:flex;flex-direction:column;height:var(--app-height);min-height:var(--app-height);overflow:hidden;background-color:#e9ecef}.main-content{display:flex;flex-grow:1;overflow:hidden}:root{--app-height: 100vh}html,body{padding:0;margin:0;overflow:hidden;height:100%;overscroll-behavior:none}body{margin:0;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f7f6;color:#333}#root{height:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#aaa}