@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Fredoka:wght@400;600&display=swap";:root{--bg-color: #0f172a;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--accent: #3b82f6;--accent-glow: rgba(59, 130, 246, .5);--danger: #ef4444;--success: #10b981;--success-glow: rgba(16, 185, 129, .5);--warning: #f59e0b;--panel-bg: rgba(15, 23, 42, .65)}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}h1,h2,h3{font-family:Fredoka,sans-serif;letter-spacing:.5px}body{background:linear-gradient(135deg,#0f172a,#1e293b,#0f172a);color:var(--text-primary);display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;position:relative}body:before{content:"";position:absolute;width:600px;height:600px;background:radial-gradient(circle,#10b98126,#0000 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none}#app{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}.glass{background:var(--panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0000004d}#header-bar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;background:linear-gradient(180deg,#0f172ae6,#0f172a00);border-bottom:1px solid rgba(255,255,255,.05);z-index:10;flex-wrap:wrap;gap:.5rem}.stat-box{display:flex;flex-direction:column;background:#ffffff08;padding:.5rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.05);box-shadow:0 4px 12px #0000001a;transition:transform .2s ease}.stat-box:hover{transform:translateY(-2px);background:#ffffff0f}.player-info h1{font-size:1.3rem;background:linear-gradient(90deg,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.energy-container{min-width:200px;align-items:center}.progress-bar-bg{width:100%;height:14px;background:#0006;border-radius:8px;overflow:hidden;margin:4px 0;box-shadow:inset 0 2px 4px #00000080;border:1px solid rgba(255,255,255,.05)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--success),#34d399);box-shadow:0 0 10px var(--success-glow);transition:width .4s cubic-bezier(.4,0,.2,1),background .3s ease;position:relative}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shine 2s infinite}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.energy-low .progress-bar-fill{animation:energyPulse 1.2s ease-in-out infinite}@keyframes energyPulse{0%,to{box-shadow:0 0 10px #ef444480}50%{box-shadow:0 0 20px #ef4444e6,0 0 30px #ef44444d}}.xp-container{min-width:180px}.xp-container label{color:var(--warning);font-weight:800}.xp-progress-bar-bg{width:100%;height:10px;background:#0006;border-radius:6px;overflow:hidden;margin:3px 0;box-shadow:inset 0 1px 3px #00000080;border:1px solid rgba(255,255,255,.05)}.xp-progress-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);box-shadow:0 0 8px #f59e0b66;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;border-radius:6px}.xp-progress-fill:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shine 2.5s infinite}.xp-next-level{font-size:.7rem;color:var(--text-secondary);text-align:right;margin-top:1px}.active-tool-indicator{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--accent);font-weight:600;padding:4px 12px;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:8px;transition:all .3s ease;white-space:nowrap}.active-tool-indicator.no-tool{color:var(--text-secondary);background:#ffffff08;border-color:#ffffff0d}#game-canvas-container{flex:1;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}#game-canvas{width:100%;height:100%;cursor:crosshair;z-index:1}.clickable{cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.clickable:hover{filter:drop-shadow(0 0 8px rgba(255,255,255,.4)) brightness(1.2);transform:scale(1.05)}#bottom-bar{display:flex;gap:1rem;padding:1rem 1.5rem;height:200px;z-index:10;background:linear-gradient(0deg,#0f172ae6,#0f172a00)}.panel{flex:1;border-radius:16px;padding:1rem;display:flex;flex-direction:column}.panel h3{margin-bottom:.6rem;font-size:1.1rem;color:var(--text-primary);border-bottom:2px solid rgba(255,255,255,.05);padding-bottom:.4rem;display:flex;align-items:center;gap:.5rem}.items-list{display:flex;flex-wrap:wrap;gap:.6rem;overflow-y:auto;padding-right:.4rem}.items-list::-webkit-scrollbar{width:5px}.items-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.items-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.item-card{background:linear-gradient(145deg,#ffffff14,#ffffff05);padding:.6rem .8rem;border-radius:12px;text-align:center;min-width:80px;cursor:pointer;border:1px solid rgba(255,255,255,.05);box-shadow:0 4px 6px #0003;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;justify-content:center;gap:3px;position:relative}.item-card:hover{background:linear-gradient(145deg,#ffffff1f,#ffffff0d);transform:translateY(-4px) scale(1.02);box-shadow:0 8px 15px #0000004d;border-color:#fff3}.item-card.active{border:2px solid var(--accent);background:linear-gradient(145deg,#3b82f633,#3b82f60d);box-shadow:0 0 15px var(--accent-glow);transform:translateY(-2px)}.item-card strong{font-size:.95rem}.item-card small{color:var(--text-secondary);font-size:.75rem}.tool-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:linear-gradient(145deg,#1e293bfa,#0f172afc);color:var(--text-primary);padding:.6rem .8rem;border-radius:10px;font-size:.75rem;white-space:nowrap;z-index:100;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 20px #0006;pointer-events:none;animation:tooltipFadeIn .2s ease}.tool-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#1e293bfa}.item-card:hover .tool-tooltip{display:block}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tooltip-row{display:flex;gap:12px;justify-content:center;margin-top:4px}.tooltip-energy{color:#fbbf24}.tooltip-xp{color:#34d399}.tooltip-produces{color:#93c5fd}#hut-progress-container{max-width:220px;min-width:180px}#hut-progress-container h3{font-size:1rem;border-bottom:none;padding-bottom:0;margin-bottom:.3rem;justify-content:center}.hut-materials-list{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-size:.72rem;max-height:50px;overflow-y:auto}.hut-material-row{display:flex;justify-content:space-between;align-items:center;padding:1px 4px;border-radius:4px}.hut-material-row.has-enough{color:var(--success)}.hut-material-row.not-enough{color:var(--danger)}.build-btn{margin-top:5px;padding:5px 10px;border:none;border-radius:8px;background:linear-gradient(140deg,var(--accent),#6366f1);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;transition:all .2s ease;font-family:Fredoka,sans-serif}.build-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px var(--accent-glow);filter:brightness(1.1)}.build-btn:disabled{opacity:.4;cursor:not-allowed;background:#64748b80}.build-btn.ready{animation:buildReady 1.5s ease-in-out infinite;background:linear-gradient(140deg,var(--success),#059669)}@keyframes buildReady{0%,to{box-shadow:0 0 8px var(--success-glow)}50%{box-shadow:0 0 20px var(--success-glow),0 0 30px #10b98133}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-6px) rotate(-2deg)}50%{transform:translate(6px) rotate(2deg)}75%{transform:translate(-6px) rotate(-1deg)}to{transform:translate(0)}}.shake{animation:shake .4s ease}.hidden{display:none!important;opacity:0;pointer-events:none}#overlay-container{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:50;display:flex;justify-content:center;align-items:center;transition:opacity .3s ease}.popup{background:linear-gradient(145deg,#1e293bf2,#0f172afa);padding:2.5rem;border-radius:20px;width:90%;max-width:500px;text-align:center;display:flex;flex-direction:column;gap:1.5rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px #00000080,inset 0 1px #ffffff1a;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.popup h2{color:#60a5fa;font-size:1.8rem}#minigame-options{display:flex;flex-direction:column;gap:.8rem}.option-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-primary);padding:1rem;border-radius:12px;cursor:pointer;transition:all .2s ease;font-size:1.05rem;font-weight:600}.option-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px var(--accent-glow)}.option-btn:disabled{cursor:not-allowed}#minigame-feedback{font-size:1.1rem;padding:1rem;border-radius:8px;background:#0003}#minigame-close{background:linear-gradient(140deg,var(--success),#059669);color:#fff;border:none;padding:1rem;border-radius:12px;cursor:pointer;font-size:1.1rem;font-weight:800;margin-top:.5rem;transition:all .2s;text-transform:uppercase;letter-spacing:1px}#minigame-close:hover{transform:translateY(-2px);box-shadow:0 6px 15px var(--success-glow);filter:brightness(1.1)}#login-modal input{background:#fffffff2;color:#1e293b;transition:border-color .2s ease,box-shadow .2s ease}#login-modal input:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)}body.exhausted{position:relative}body.exhausted:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 150px #000000f2;pointer-events:none;z-index:40;animation:pulseDark 2s infinite ease-in-out}@keyframes pulseDark{0%{box-shadow:inset 0 0 120px #000000e6}50%{box-shadow:inset 0 0 180px #000000f2}to{box-shadow:inset 0 0 120px #000000e6}}#sweet-spot-container{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#0f172ad9;padding:2rem;border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#sweet-spot-container .ss-hint{font-size:.8rem;color:var(--text-secondary);margin-top:4px}.dd-workspace{display:flex;justify-content:space-between;gap:1.5rem}.dd-panel{flex:1;background:#0000004d;padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.gear-item{background:linear-gradient(145deg,#ffffff1a,#ffffff0d);padding:.8rem;margin-bottom:.5rem;border-radius:8px;cursor:grab;-webkit-user-select:none;user-select:none;font-weight:600;border:1px solid rgba(255,255,255,.1);transition:transform .2s}.gear-item:active{cursor:grabbing}.gear-item.dragging{opacity:.5;transform:scale(.95)}.dd-slots{display:flex;flex-direction:column;gap:.5rem}.gear-slot{min-height:45px;background:#0006;border:2px dashed rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.9rem;transition:all .2s}.gear-slot.drag-over{background:#3b82f633;border-color:var(--accent)}.gear-slot .gear-item{margin:0;width:100%}@keyframes toastSlide{0%{transform:translate(-50%) translateY(-20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes toastFade{0%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.toast-stack{position:fixed;top:80px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.game-toast{padding:.8rem 1.5rem;border-radius:12px;font-weight:600;font-size:1rem;box-shadow:0 8px 25px #0000004d;animation:toastSlideIn .4s ease;white-space:nowrap;pointer-events:auto}.game-toast.toast-success{background:linear-gradient(145deg,#10b981e6,#059669e6);color:#fff;border:1px solid rgba(52,211,153,.3)}.game-toast.toast-warning{background:linear-gradient(145deg,#f59e0be6,#d97706e6);color:#fff;border:1px solid rgba(251,191,36,.3)}.game-toast.toast-error{background:linear-gradient(145deg,#ef4444e6,#dc2626e6);color:#fff;border:1px solid rgba(252,165,165,.3)}.game-toast.toast-info{background:linear-gradient(145deg,#3b82f6e6,#2563ebe6);color:#fff;border:1px solid rgba(147,197,253,.3)}@keyframes toastSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.game-toast.toast-exit{animation:toastSlideOut .4s ease forwards}@keyframes toastSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes levelUp{0%{transform:scale(1)}50%{transform:scale(1.3);text-shadow:0 0 20px var(--warning)}to{transform:scale(1)}}.level-up-glow{animation:levelUp .8s ease}@keyframes gentlePulse{0%,to{opacity:.6}50%{opacity:1}}.onboarding-hint{position:absolute;z-index:5;pointer-events:none;animation:gentlePulse 2s ease-in-out infinite;font-size:.8rem;color:#fef3c7;background:#0009;padding:4px 10px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(245,158,11,.3)}@media (max-width: 900px){#header-bar{padding:.5rem .8rem;gap:.3rem}.stat-box{padding:.4rem .7rem}.player-info h1{font-size:1rem}.energy-container{min-width:150px}.xp-container{min-width:120px}#bottom-bar{height:170px;padding:.8rem;gap:.6rem}.panel h3{font-size:.95rem;margin-bottom:.4rem}.item-card{min-width:70px;padding:.4rem .6rem}.item-card strong{font-size:.8rem}#hut-progress-container{max-width:160px;min-width:140px}}@media (max-width: 600px){#header-bar{flex-wrap:wrap;justify-content:center;padding:.4rem;gap:.3rem}.stat-box{padding:.3rem .5rem;font-size:.8rem}.player-info h1{font-size:.9rem}.energy-container{min-width:120px;order:-1;flex-basis:100%}.progress-bar-bg{height:10px}#bottom-bar{height:auto;min-height:140px;max-height:200px;flex-wrap:wrap;padding:.5rem;gap:.4rem}.panel{min-width:40%;padding:.6rem}#hut-progress-container{max-width:100%;min-width:100%;flex-direction:row;justify-content:space-around;padding:.5rem}.popup{padding:1.5rem;width:95%}.popup h2{font-size:1.4rem}.option-btn{padding:.7rem;font-size:.9rem}.item-card{min-width:60px;padding:.3rem .5rem;font-size:.75rem}.item-card span[style]{font-size:18px!important}}
