@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap";:root{--bg-dark: #0f172a;--bg-panel: rgba(30, 41, 59, .8);--text-main: #f8fafc;--text-muted: #94a3b8;--accent-primary: #3b82f6;--accent-secondary: #8b5cf6;--accent-success: #22c55e;--accent-danger: #ef4444;--font-main: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-dark);color:var(--text-main);overflow:hidden;-webkit-user-select:none;user-select:none}.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1e293b,#020617)}.game-container{position:relative;width:100%;max-width:600px;height:100vh;max-height:900px;display:flex;flex-direction:column;background-size:cover;background-position:center;box-shadow:0 0 50px #00000080;overflow:hidden;transition:background 1s ease-in-out}.theme-farm{background-image:url(/images/bg_farm.png)}.theme-forest{background-image:url(/images/bg_forest.png)}.theme-castle{background-image:url(/images/bg_castle.png)}.theme-space{background-image:url(/images/bg_space.png)}.hud{position:relative;width:100%;aspect-ratio:1000 / 380;background-image:url(/images/bar_top.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;z-index:10;margin:0;padding:0}.hud-left{position:absolute;left:8%;top:32%;z-index:12}.health-bar{position:absolute;left:21%;right:24%;bottom:8%;height:20%;display:flex;justify-content:space-around;align-items:center;gap:0;z-index:11}.custom-heart{width:19%;height:100%;object-fit:contain;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.custom-heart.filled{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)) brightness(1.2)}.custom-heart.empty{filter:grayscale(100%) opacity(.3) drop-shadow(0 1px 2px rgba(0,0,0,.5))}.score{font-size:1.1rem;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.9);color:#fff;text-transform:uppercase;letter-spacing:1px}.hud-center{position:absolute;left:calc(38% + 100px);top:28%;transform:translate(-50%);z-index:12}.hud-right{position:absolute;right:7.5%;top:10%;width:21%;height:55%;display:flex;align-items:center;justify-content:center}.weapon-indicator{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:transparent;border:none;box-shadow:none;border-radius:0}.hud-weapon-icon{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));animation:none}.level-indicator{font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#e2e8f0;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.9)}.level-indicator span{font-size:3.8rem;font-weight:900;background:linear-gradient(90deg,#fcd34d,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.9));margin-left:8px;position:relative;top:10px;display:inline-block}.game-area{flex:1;position:relative;overflow:hidden}.enemy-container{position:absolute;top:100px;left:0;display:flex;flex-direction:column;align-items:center;will-change:transform}.enemy-sprite{font-size:5rem;filter:drop-shadow(0 10px 15px rgba(0,0,0,.5))}.enemy-name{font-size:1rem;font-weight:600;background:#00000080;padding:2px 8px;border-radius:12px;margin-top:-10px}.enemy-health-bar{width:80%;height:12px;background:#0006;border:2px solid #000000;border-radius:6px;margin-bottom:8px;overflow:hidden;box-shadow:0 2px 4px #00000080}.enemy-health-fill{height:100%;background:var(--accent-danger);transition:width .3s ease}.projectile{position:absolute;font-size:3rem;transform:translate(-50%);filter:drop-shadow(0 0 10px rgba(255,255,255,.8));pointer-events:none}.math-console-wrapper{position:absolute;bottom:0;left:0;width:100%}.balls-container{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:0 20px 20px;position:relative;z-index:1;transform:translateY(60px)}.problem-display-container{background-image:url(/images/bar_bottom.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;border:none;box-shadow:none;padding:15px 30px;display:flex;justify-content:center;align-items:center;aspect-ratio:1000 / 200;width:100%;position:relative;z-index:10}.problem-display{font-size:2.6rem;font-weight:800;background:transparent;padding:0;border-radius:0;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fcd34d;text-shadow:0 3px 6px rgba(0,0,0,.9),0 0 15px rgba(252,211,77,.4);transform:translateY(5px)}.problem-display .times{color:#fbbf24}.answer-ball{width:100px;height:125px;background-image:url(/images/baloon_1.png);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;border:none;color:#fff;font-size:1.8rem;font-weight:800;font-family:inherit;cursor:pointer;position:relative;display:flex;justify-content:center;align-items:center;padding-bottom:54px;transition:filter .2s ease}.answer-ball:hover{filter:brightness(1.2)}.drag-area{position:absolute;bottom:0;left:0;width:100%;height:200px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%)}.drag-instructions{text-align:center;margin-bottom:20px;font-size:1.2rem;font-weight:600;animation:pulse 1.5s infinite}.weapon-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;background:#ffffff1a;outline:none;position:absolute;bottom:80px;opacity:0;z-index:20}.weapon-avatar{position:absolute;bottom:60px;font-size:4rem;transform:translate(-50%);cursor:pointer;filter:drop-shadow(0 0 15px rgba(255,255,255,.8));transition:transform .1s;z-index:10}.weapon-avatar:hover{transform:translate(-50%) scale(1.1)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;text-align:center;padding:20px}.overlay h2{font-size:3rem;margin-bottom:10px}.overlay p{font-size:1.5rem;color:var(--text-muted);margin-bottom:30px}.big-emoji{font-size:6rem;margin-bottom:30px;animation:bounce 2s infinite}.btn-primary{padding:15px 40px;font-size:1.5rem;font-weight:800;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:30px;cursor:pointer;box-shadow:0 10px 20px #0000004d;transition:transform .2s,box-shadow .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 25px #0006}.overlay-danger h2{color:var(--accent-danger)}.overlay-success h2{color:var(--accent-success)}.overlay-victory h2{background:linear-gradient(90deg,#fcd34d,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.start-screen-container{width:100%;max-width:600px;height:100vh;max-height:900px;position:relative;overflow:hidden;background-color:#000;display:flex;justify-content:center;align-items:center;box-shadow:0 0 50px #00000080}.start-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:0}.start-overlay-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.start-logo-placeholder{margin-top:100px;text-align:center}.start-logo-placeholder h1{font-size:4rem;color:#fff;text-shadow:0 4px 15px rgba(0,0,0,.8),0 0 30px rgba(255,215,0,.5);font-weight:900;letter-spacing:2px}.start-menu-options,.start-menu-modal{display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px;min-width:250px;margin-top:auto;margin-bottom:80px}.start-menu-modal{color:#fff;text-align:center}.start-menu-modal h2{font-size:2.5rem;margin-bottom:20px;color:#fbbf24}.start-menu-modal p{font-size:1.2rem;line-height:1.6;margin-bottom:15px}.option-row{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:1.5rem;margin-bottom:20px}.toggle-btn{background:#333;color:#fff;border:2px solid #555;padding:10px 20px;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .2s;width:100px}.toggle-btn.active{background:#10b981;border-color:#059669;box-shadow:0 0 15px #10b98180}.start-btn{background:linear-gradient(145deg,#4f46e5,#4338ca);color:#fff;border:none;padding:12px 30px;font-size:1.2rem;font-weight:800;border-radius:50px;cursor:pointer;width:100%;max-width:250px;transition:all .3s ease;box-shadow:0 10px 20px #0000004d,inset 0 2px 5px #fff3;text-transform:uppercase;letter-spacing:1px}.start-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 25px #0006,inset 0 2px 5px #ffffff4d;filter:brightness(1.2)}.start-btn.primary{background:linear-gradient(145deg,#10b981,#059669);font-size:1.4rem;padding:15px 35px}.start-btn.secondary{background:linear-gradient(145deg,#64748b,#475569);font-size:1.4rem;margin-top:20px}