@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{color-scheme:dark;font-family:Fredoka,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0f172a}#root{display:flex;align-items:center;justify-content:center}:root{--bg-sky: #87CEEB;--bg-sky-dark: #1a1a2e;--grass: #4ade80;--grass-dark: #166534;--mountain: #6b7280;--water: #38bdf8;--sand: #fbbf24;--snow: #e2e8f0;--flower: #f472b6;--tree: #22c55e;--sun: #facc15;--star: #c084fc;--rock: #78716c;--lava: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Fredoka,sans-serif;overflow:hidden;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460)}#root{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.main-menu{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;animation:fadeIn .8s ease}.game-title{font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,#facc15,#4ade80,#38bdf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));letter-spacing:-1px}.game-subtitle{font-size:1.2rem;color:#fff9;margin-top:-1rem}.menu-scene{width:320px;height:120px;position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#87ceeb,#38bdf8 40%,#4ade80 55%,#166534);box-shadow:0 8px 32px #0000004d}.menu-mountain{position:absolute;bottom:40%;width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:80px solid #6b7280}.menu-mountain:nth-child(1){left:20px;border-bottom-color:#6b7280}.menu-mountain:nth-child(2){left:100px;border-bottom-color:#78716c;border-left-width:50px;border-right-width:50px;border-bottom-width:65px}.menu-mountain:nth-child(3){left:180px;border-bottom-color:#6b7280;border-left-width:70px;border-right-width:70px;border-bottom-width:90px}.menu-mountain:nth-child(4){left:260px;border-bottom-color:#78716c}.menu-sun{position:absolute;top:15px;right:30px;width:35px;height:35px;background:var(--sun);border-radius:50%;box-shadow:0 0 20px var(--sun),0 0 40px #facc154d}.menu-cloud{position:absolute;top:20px;width:50px;height:18px;background:#fff;border-radius:10px;opacity:.8;animation:cloudFloat 8s ease-in-out infinite}.menu-cloud:nth-child(5){left:30px;animation-delay:0s}.menu-cloud:nth-child(6){left:150px;top:30px;animation-delay:-3s;width:40px}.menu-cloud:nth-child(7){left:250px;top:15px;animation-delay:-5s;width:55px}.menu-trees{position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(180deg,#4ade80,#166534)}@keyframes cloudFloat{0%,to{transform:translate(0)}50%{transform:translate(20px)}}.menu-btn{padding:1rem 3rem;font-family:Fredoka,sans-serif;font-size:1.3rem;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px}.menu-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d}.menu-btn:active{transform:translateY(0)}.btn-play{background:linear-gradient(135deg,#4ade80,#22c55e);color:#052e16;box-shadow:0 4px 15px #4ade8066}.btn-continue{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#0c4a6e;box-shadow:0 4px 15px #38bdf866}.btn-levels{background:linear-gradient(135deg,#c084fc,#a855f7);color:#3b0764;box-shadow:0 4px 15px #c084fc66}.btn-settings{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2);font-size:1rem;padding:.8rem 2rem}.level-select{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px;height:100vh;padding:1rem;animation:fadeIn .5s ease}.level-select-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem 0 1rem}.level-select-header h2{font-size:1.8rem;color:#fff}.back-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:.5rem 1.2rem;border-radius:25px;font-family:Fredoka,sans-serif;font-size:1rem;cursor:pointer;transition:all .2s}.back-btn:hover{background:#fff3}.world-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center}.world-tab{padding:.4rem 1rem;border-radius:20px;border:2px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff9;font-family:Fredoka,sans-serif;font-size:.85rem;cursor:pointer;transition:all .2s}.world-tab.active{border-color:#facc15;background:#facc1526;color:#facc15}.world-tab.locked{opacity:.3;cursor:not-allowed}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;width:100%;padding:.5rem;overflow-y:auto;max-height:calc(100vh - 200px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.level-btn{aspect-ratio:1;border-radius:16px;border:2px solid rgba(255,255,255,.15);background:#ffffff0d;color:#fff;font-family:Fredoka,sans-serif;font-size:1.2rem;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .2s;position:relative}.level-btn:hover:not(.locked){transform:scale(1.05);border-color:#4ade80;background:#4ade801a}.level-btn.completed{border-color:#4ade80;background:#4ade801a}.level-btn.current{border-color:#facc15;background:#facc1526;box-shadow:0 0 15px #facc154d;animation:pulse 2s ease-in-out infinite}.level-btn.locked{opacity:.3;cursor:not-allowed}.level-stars{font-size:.6rem;display:flex;gap:1px}.star-filled{color:#facc15}.star-empty{color:#fff3}.game-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;height:100vh;padding:.5rem;animation:fadeIn .5s ease}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.3rem 0}.game-header .back-btn{font-size:.85rem;padding:.4rem 1rem}.level-info{text-align:center}.level-info .level-number{font-size:1.1rem;font-weight:600;color:#facc15}.level-info .world-name{font-size:.7rem;color:#ffffff80}.game-stats{display:flex;justify-content:space-around;width:100%;padding:.5rem;margin-bottom:.5rem}.stat-box{text-align:center;background:#ffffff0d;padding:.4rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.stat-label{font-size:.65rem;color:#ffffff80;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:1.3rem;font-weight:700;color:#fff}.stat-value.warning{color:#ef4444;animation:pulse 1s ease-in-out infinite}.target-bar{width:100%;margin-bottom:.5rem;background:#ffffff1a;border-radius:10px;height:8px;overflow:hidden}.target-fill{height:100%;border-radius:10px;transition:width .5s ease;background:linear-gradient(90deg,#4ade80,#facc15)}.target-label{font-size:.75rem;color:#fff9;text-align:center;margin-bottom:.5rem}.board-wrapper{position:relative;background:#0000004d;border-radius:16px;padding:8px;border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 10px #0000004d}.board{display:grid;gap:3px;-webkit-user-select:none;user-select:none}.tile{border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:pointer;transition:all .15s ease;position:relative;border:2px solid transparent;background:#ffffff0d;aspect-ratio:1}.tile:hover{transform:scale(1.08);z-index:2}.tile.selected{border-color:#facc15;box-shadow:0 0 12px #facc1580;transform:scale(1.1);z-index:3}.tile.hint{animation:hintPulse .8s ease-in-out infinite}.tile.matched{animation:matchPop .4s ease forwards}.tile.falling{animation:fallIn .3s ease}.tile.obstacle{background:#78716c66;border:2px solid rgba(120,113,108,.6);cursor:not-allowed}.tile.special-bomb:after{content:"";position:absolute;width:8px;height:8px;background:#ef4444;border-radius:50%;top:2px;right:2px;box-shadow:0 0 6px #ef4444}.tile.special-line-h:after{content:"";position:absolute;width:70%;height:3px;background:#38bdf8;border-radius:2px;box-shadow:0 0 6px #38bdf8}.tile.special-line-v:after{content:"";position:absolute;width:3px;height:70%;background:#38bdf8;border-radius:2px;box-shadow:0 0 6px #38bdf8}.combo-display{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:100}.combo-text{font-size:3rem;font-weight:700;color:#facc15;text-shadow:0 2px 10px rgba(250,204,21,.5);animation:comboPop .8s ease forwards}.score-pop{position:absolute;font-size:1.2rem;font-weight:700;color:#4ade80;text-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:none;animation:scoreFloat 1s ease forwards;z-index:50}.powerups{display:flex;gap:.8rem;margin-top:.8rem}.powerup-btn{width:48px;height:48px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:#ffffff0d;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}.powerup-btn:hover:not(:disabled){border-color:#facc15;background:#facc151a;transform:scale(1.1)}.powerup-btn:disabled{opacity:.3;cursor:not-allowed}.powerup-btn .count{position:absolute;bottom:-4px;right:-4px;background:#ef4444;color:#fff;font-size:.6rem;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.result-card{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid rgba(255,255,255,.1);border-radius:24px;padding:2rem;text-align:center;min-width:300px;animation:slideUp .5s ease}.result-card h2{font-size:2rem;margin-bottom:.5rem}.result-card h2.win{color:#4ade80}.result-card h2.lose{color:#ef4444}.result-stars{font-size:2.5rem;margin:1rem 0;display:flex;justify-content:center;gap:.5rem}.result-stars .star{animation:starPop .5s ease forwards;opacity:0}.result-stars .star:nth-child(1){animation-delay:.2s}.result-stars .star:nth-child(2){animation-delay:.5s}.result-stars .star:nth-child(3){animation-delay:.8s}.result-score{font-size:1.5rem;color:#fff;margin:.5rem 0}.result-target{font-size:.9rem;color:#ffffff80;margin-bottom:1.5rem}.result-buttons{display:flex;gap:1rem;justify-content:center}.result-btn{padding:.7rem 1.5rem;border-radius:25px;border:none;font-family:Fredoka,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.result-btn:hover{transform:translateY(-2px)}.result-btn.primary{background:linear-gradient(135deg,#4ade80,#22c55e);color:#052e16}.result-btn.secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes hintPulse{0%,to{transform:scale(1);border-color:#facc154d}50%{transform:scale(1.1);border-color:#facc15b3}}@keyframes matchPop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}to{transform:scale(0);opacity:0}}@keyframes fallIn{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes comboPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3);opacity:1}to{transform:scale(1);opacity:0}}@keyframes scoreFloat{0%{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}50%{transform:scale(1.3) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes shakeBoard{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media(max-width:400px){.game-title{font-size:2.5rem}.tile{font-size:1.3rem}.board{gap:2px}.board-wrapper{padding:5px}}
