@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--color-red: #e84040;--color-blue: #4080e8;--color-green: #40c840;--color-purple: #a040e8;--color-cyan: #40c8e8;--color-yellow: #e8e040;--color-orange: #e89040;--bg-dark: #0a0a12;--bg-card: rgba(255, 255, 255, .04);--font-pixel: "Press Start 2P", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-dark);color:#e0e0e0;font-family:var(--font-pixel);overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.menu{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#0a0a12,#121220,#0a0a12)}.menu-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.color-drop{position:absolute;border-radius:50%;filter:blur(60px);opacity:.15;animation:float 8s ease-in-out infinite}.drop1{width:300px;height:300px;background:var(--color-red);top:10%;left:10%;animation-delay:0s}.drop2{width:250px;height:250px;background:var(--color-blue);top:60%;right:15%;animation-delay:2s}.drop3{width:200px;height:200px;background:var(--color-green);bottom:15%;left:30%;animation-delay:4s}.drop4{width:180px;height:180px;background:var(--color-yellow);top:30%;right:30%;animation-delay:6s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.9)}}.menu-content{position:relative;z-index:1;text-align:center;max-width:700px;padding:2rem}.menu-logo{margin-bottom:2rem}.yoshi-icon{display:inline-block;width:60px;height:60px;position:relative;margin-bottom:1rem}.yoshi-head{width:36px;height:28px;background:#60c060;border-radius:12px 8px 6px 10px;position:absolute;top:0;left:0}.yoshi-head:before{content:"";width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;top:6px;left:6px}.yoshi-head:after{content:"";width:6px;height:6px;background:#222;border-radius:50%;position:absolute;top:8px;left:8px}.yoshi-body{width:40px;height:30px;background:#60c060;border-radius:6px 16px 12px 8px;position:absolute;top:18px;left:14px}.yoshi-body:before{content:"";width:28px;height:18px;background:#f0f0d0;border-radius:4px 10px 8px 6px;position:absolute;top:6px;left:6px}.game-title{display:flex;flex-direction:column;gap:.3rem;line-height:1.4}.title-yoshi{font-size:2.5rem;color:#60c060;text-shadow:3px 3px 0 #2a6a2a,0 0 20px rgba(96,192,96,.3)}.title-island{font-size:2rem;color:#e0d080;text-shadow:2px 2px 0 #6a6030}.title-sub{font-size:.9rem;color:#f0f0f0;letter-spacing:.3em;text-shadow:1px 1px 0 #444}.menu-tagline{font-size:.6rem;color:#ffffff80;margin-bottom:2.5rem;line-height:1.8}.menu-buttons{display:flex;flex-direction:column;gap:1rem;align-items:center;margin-bottom:2.5rem}.btn{font-family:var(--font-pixel);font-size:.7rem;padding:.8rem 1.5rem;border:2px solid rgba(255,255,255,.2);border-radius:4px;background:#ffffff0f;color:#e0e0e0;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.1em}.btn:hover{background:#ffffff1f;border-color:#fff6;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(180deg,#60c060,#408040);border-color:#60c060;color:#fff}.btn-primary:hover{background:linear-gradient(180deg,#70d070,#50a050);border-color:#70d070}.btn-large{font-size:.8rem;padding:1rem 2rem;min-width:280px;display:flex;align-items:center;justify-content:center;gap:.8rem}.btn-icon{font-size:1rem}.menu-features{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:2rem;text-align:left}.feature{display:flex;align-items:center;gap:.6rem;font-size:.55rem;color:#fff9}.feature-icon{font-size:.8rem}.menu-controls{background:var(--bg-card);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:1.2rem}.menu-controls h3{font-size:.6rem;color:#ffffff80;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.2em}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.control-item{font-size:.5rem;color:#ffffff80;display:flex;align-items:center;gap:.4rem}kbd{font-family:var(--font-pixel);font-size:.45rem;padding:.2rem .4rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:3px;color:#fff}.level-select{min-height:100vh;padding:2rem;max-width:800px;margin:0 auto}.level-select h2{font-size:1.2rem;color:#e0d080;text-align:center;margin-bottom:.5rem}.level-select-hint{font-size:.55rem;color:#fff6;text-align:center;margin-bottom:2rem}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:2rem}.level-card{font-family:var(--font-pixel);background:var(--bg-card);border:2px solid rgba(255,255,255,.08);border-radius:8px;padding:1.2rem;cursor:pointer;transition:all .2s;text-align:left;color:inherit}.level-card:hover{border-color:#ffffff4d;transform:translateY(-3px);box-shadow:0 8px 24px #0000004d}.level-card.custom{border-color:#e8e0404d}.level-card-number{font-size:1.5rem;color:#fff3;margin-bottom:.5rem}.level-card-name{font-size:.7rem;color:#fff;margin-bottom:.4rem}.level-card-desc{font-size:.45rem;color:#fff6;line-height:1.6;margin-bottom:.6rem}.level-card-colors{display:flex;gap:.3rem}.color-dot{width:10px;height:10px;border-radius:50%}.color-red{background:var(--color-red)}.color-blue{background:var(--color-blue)}.color-green{background:var(--color-green)}.color-purple{background:var(--color-purple)}.color-cyan{background:var(--color-cyan)}.color-yellow{background:var(--color-yellow)}.color-orange{background:var(--color-orange)}.custom-levels-heading{font-size:.7rem;color:#ffffff80;margin-bottom:.8rem}.back-btn{display:block;margin:0 auto}.game-container{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a12}.game-canvas{width:960px;height:540px;max-width:100vw;max-height:80vh;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid rgba(255,255,255,.1);cursor:crosshair}.controls-hint{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;padding:.5rem;font-size:.45rem;color:#ffffff4d}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);pointer-events:none;z-index:10}.hud-level{font-size:.55rem;color:#fff9;min-width:120px}.hud-score{font-size:.55rem;color:#e0d080;min-width:80px}.hud-inventory{display:flex;gap:.3rem;flex:1;justify-content:center}.hud-color-slot{width:36px;height:36px;border:2px solid #444;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .2s}.hud-color-slot.active{border-width:3px;transform:scale(1.1)}.hud-color-pip{width:10px;height:10px;border-radius:50%}.hud-color-count{font-size:.4rem;color:#fff9;position:absolute;bottom:1px;right:3px}.hud-current{font-size:.5rem;color:#ffffff80;min-width:100px;text-align:right}.level-complete-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s}.level-complete-box{background:linear-gradient(180deg,#1a2a1a,#0a120a);border:2px solid #60c060;border-radius:8px;padding:2rem 3rem;text-align:center;display:flex;flex-direction:column;gap:1rem;animation:popIn .3s ease-out}.level-complete-box h2{font-size:1rem;color:#60c060;text-shadow:0 0 20px rgba(96,192,96,.5)}.level-complete-box p{font-size:.6rem;color:#e0d080}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.mixer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:50}.mixer-panel{background:linear-gradient(180deg,#1a1a2a,#0a0a18);border:2px solid rgba(255,255,255,.15);border-radius:8px;padding:1.5rem;min-width:360px;max-width:420px}.mixer-panel h3{font-size:.8rem;color:#fff;text-align:center;margin-bottom:.3rem}.mixer-hint{font-size:.45rem;color:#fff6;text-align:center;margin-bottom:1rem}.mixer-colors{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:1rem}.mixer-color-btn{font-family:var(--font-pixel);font-size:.45rem;padding:.4rem .6rem;border:2px solid transparent;border-radius:4px;color:#fff;cursor:pointer;transition:all .15s;position:relative;text-transform:capitalize}.mixer-color-btn:hover:not(.disabled){transform:scale(1.05)}.mixer-color-btn.sel1{border-color:#fff;box-shadow:0 0 10px #ffffff4d}.mixer-color-btn.sel2{border-color:#ffd040;box-shadow:0 0 10px #ffd0404d}.mixer-color-btn.disabled{cursor:not-allowed}.mixer-count{position:absolute;top:-6px;right:-6px;background:#333;color:#fff;font-size:.35rem;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}.mixer-preview{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;background:#ffffff08;border-radius:4px;margin-bottom:1rem;font-size:.6rem}.mixer-plus,.mixer-equals{color:#ffffff4d;font-size:.7rem}.mixer-fail{color:#ff646480}.mixer-actions{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}.mixer-recipes{border-top:1px solid rgba(255,255,255,.08);padding-top:.8rem}.mixer-recipes h4{font-size:.5rem;color:#ffffff4d;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.1em}.recipe{font-size:.45rem;color:#fff6;margin-bottom:.3rem}.editor{height:100vh;display:flex;flex-direction:column;background:#0a0a12}.editor-toolbar{display:flex;align-items:center;gap:1rem;padding:.5rem;background:#00000080;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}.editor-tools{display:flex;gap:.3rem}.tool-btn{font-family:var(--font-pixel);font-size:.5rem;padding:.4rem .6rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#ffffff0a;color:#aaa;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.2rem;transition:all .15s}.tool-btn:hover{background:#ffffff14}.tool-btn.active{background:#60c06033;border-color:#60c060;color:#60c060}.tool-label{font-size:.35rem;text-transform:capitalize}.editor-options{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}.editor-options label{font-size:.45rem;color:#ffffff80;display:flex;align-items:center;gap:.3rem}.editor-options select,.editor-options input[type=range]{font-family:var(--font-pixel);font-size:.4rem;background:#222;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:.2rem .3rem}.editor-options input[type=checkbox]{accent-color:#60c060}.exit-color-check{display:inline-flex;gap:.2rem;margin-right:.3rem}.editor-canvas{flex:1;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}.editor-bottom{display:flex;align-items:center;gap:1rem;padding:.5rem;background:#00000080;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}.editor-info{display:flex;gap:.8rem}.editor-info label{font-size:.45rem;color:#ffffff80;display:flex;align-items:center;gap:.3rem}.editor-info input{font-family:var(--font-pixel);font-size:.45rem;background:#222;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:.3rem .5rem;width:160px}.editor-stats{font-size:.45rem;color:#ffffff4d;flex:1;text-align:center}.editor-actions{display:flex;gap:.5rem}@media(max-width:980px){.game-canvas{width:100vw;height:auto;max-height:60vh}.title-yoshi{font-size:1.8rem}.title-island{font-size:1.4rem}.control-grid{grid-template-columns:repeat(2,1fr)}.menu-features{grid-template-columns:1fr}}