@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap";:root{--color-kitchen:#43a047;--color-kitchen-light:#a5d6a7;--color-recyclable:#1e88e5;--color-recyclable-light:#90caf9;--color-hazardous:#e53935;--color-hazardous-light:#ef9a9a;--color-other:#757575;--color-other-light:#bdbdbd;--color-start:#fb8c00;--color-start-light:#ffe0b2;--color-selected:#7b1fa2;--color-bg:#e8f5e9;--color-board-bg:#fffde7;--cell-size:min(11.5vw, 52px);--gap:min(1.2vw, 5px);--radius:10px}*{box-sizing:border-box;margin:0;padding:0}html,body{touch-action:manipulation;background:#c8e6c9;height:100%;overflow:hidden}body{background:radial-gradient(at 20% 10%,#b2dfdb 0%,#0000 50%),radial-gradient(at 80% 90%,#c5cae9 0%,#0000 50%),linear-gradient(160deg,#e0f7fa 0%,#f1f8e9 50%,#e8eaf6 100%);min-height:100%;font-family:Nunito,PingFang SC,Hiragino Sans GB,sans-serif}#app{flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex}.header{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffbf;border-bottom:3px solid #a5d6a7;padding:.6rem 1rem .5rem;box-shadow:0 2px 12px #00000014}.header h1{color:#2e7d32;letter-spacing:.03em;text-shadow:1px 2px #0000000f;font-family:Fredoka One,PingFang SC,cursive;font-size:1.35rem}.btn-help{color:#fff;cursor:pointer;background:#66bb6a;border:none;border-radius:50%;width:32px;height:32px;font-size:.9rem;transition:all .2s;position:absolute;top:.5rem;left:.5rem;box-shadow:0 2px 4px #0003}.btn-help:hover{background:#43a047;transform:scale(1.1)}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;padding:1rem;display:none;position:fixed;inset:0}.modal-overlay.active{display:flex}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:360px;max-height:85vh;padding:1.5rem;position:relative;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.modal-content h2{color:#2e7d32;text-align:center;margin-bottom:1rem;font-family:Fredoka One,cursive;font-size:1.3rem}.modal-close{color:#666;cursor:pointer;background:#f0f0f0;border:none;border-radius:50%;width:28px;height:28px;font-size:.9rem;transition:all .2s;position:absolute;top:.8rem;right:.8rem}.modal-close:hover{color:#333;background:#e0e0e0}.help-section{border-bottom:1px dashed #e0e0e0;margin-bottom:1.2rem;padding-bottom:1rem}.help-section:last-child{border-bottom:none;margin-bottom:0}.help-section h3{color:#37474f;margin-bottom:.4rem;font-size:.95rem;font-weight:700}.help-section p{color:#555;margin:0;font-size:.85rem;line-height:1.5}.highlight{color:#7b1fa2;font-weight:700}.highlight-start{color:#fb8c00;font-weight:700}.tip{color:#888!important;margin-top:.3rem!important;font-size:.8rem!important}.wildstar-demo{background:#f8f8f8;border-radius:10px;margin:.5rem 0;padding:.8rem}.demo-row{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:.5rem;display:flex}.demo-label{color:#888;min-width:50px;font-size:.75rem}.demo-cell{border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;display:inline-flex}.demo-cell.start{background:#fb8c00}.demo-cell.kitchen{background:#43a047}.demo-cell.wildstar{background:linear-gradient(135deg,gold,orange)}.demo-cell.hazardous{background:#e53935}.demo-arrow{color:#aaa;font-size:.8rem}.demo-result{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-count{border-radius:4px;padding:2px 6px;font-size:.75rem}.demo-count.kitchen{color:#2e7d32;background:#a5d6a7}.demo-count.hazardous{color:#b71c1c;background:#ef9a9a}.score-display{color:#558b2f;margin-top:2px;font-size:.78rem;font-weight:700}#score{color:#f57f17;font-family:Fredoka One,cursive;font-size:1rem}.btn-debug{color:#fff;cursor:pointer;background:#78909c;border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;transition:all .2s;position:absolute;top:.5rem;right:.5rem;box-shadow:0 2px 4px #0003}.btn-debug:hover{background:#546e7a;transform:scale(1.1)}.btn-debug.active{background:#e91e63;animation:1s ease-in-out infinite debugPulse}@keyframes debugPulse{0%,to{box-shadow:0 0 #e91e6366}50%{box-shadow:0 0 0 8px #e91e6300}}.header{position:relative}.skill-charge-num{color:#f57f17;margin-left:2px;font-family:Fredoka One,cursive;font-size:.65rem}.game-area{flex:1;justify-content:center;align-items:center;min-height:0;padding:.6rem;display:flex}.board{grid-template-columns:repeat(7, var(--cell-size));grid-template-rows:repeat(7, var(--cell-size));gap:var(--gap);padding:calc(var(--gap) * 1.5);padding-bottom:calc(var(--gap) * 1.5 + 16px);background:#fffde7;border:3px solid #ffe082;border-radius:16px;display:grid;overflow:visible;box-shadow:0 6px 24px #0000001f,0 2px 6px #00000014,inset 0 1px #ffffffe6}.cell{border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:calc(var(--cell-size) * .62);justify-content:center;align-items:center;line-height:1;transition:transform .12s,box-shadow .12s;display:flex;position:relative;overflow:visible}.cell.kitchen{background:var(--color-kitchen);box-shadow:0 2px #2e7d32}.cell.recyclable{background:var(--color-recyclable);box-shadow:0 2px #1565c0}.cell.hazardous{background:var(--color-hazardous);box-shadow:0 2px #b71c1c}.cell.other{background:var(--color-other);box-shadow:0 2px #424242}.cell.start{background:var(--color-start);z-index:2;box-shadow:0 2px #e65100,0 0 14px #ffa0008c}.cell.empty{background:#0000000f;box-shadow:inset 0 2px 4px #00000014}.cell.selected{box-shadow:0 0 0 3px var(--color-selected), 0 4px 10px #7b1fa24d;z-index:5;transform:scale(1.14)translateY(-1px)}.cell:not(.empty):not(.collecting):active{transform:scale(.94)}.footer{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffd1;border-top:3px solid #a5d6a7;padding:.5rem .6rem .7rem;box-shadow:0 -2px 12px #00000014}.bins{justify-content:space-around;align-items:flex-end;gap:.3rem;margin-bottom:.5rem;display:flex}.bin{cursor:default;flex-direction:column;align-items:center;display:flex;position:relative}.bin-svg{filter:drop-shadow(0 3px 4px #0000002e);width:min(15vw,62px);height:auto;transition:transform .15s}.bin-label{color:#37474f;white-space:nowrap;margin-top:3px;font-size:min(2.4vw,10px);font-weight:800}.bin-count-badge{color:#fff;background:#f57f17;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;min-width:min(5.5vw,22px);height:min(5.5vw,22px);padding:0 3px;font-family:Fredoka One,cursive;font-size:min(3vw,13px);line-height:1;display:flex;position:absolute;top:-6px;right:-2px;box-shadow:0 1px 4px #00000040}.bin.receiving .bin-svg{animation:.35s cubic-bezier(.34,1.56,.64,1) binBounce}.actions{justify-content:center;gap:.6rem;display:flex}.btn{cursor:pointer;letter-spacing:.02em;border:none;border-radius:50px;flex:1;max-width:140px;padding:.6rem 1rem;font-family:Nunito,sans-serif;font-size:1rem;font-weight:800;transition:opacity .15s,transform .1s,box-shadow .1s}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none!important;transform:none!important}.btn:active:not(:disabled){transform:scale(.94)translateY(1px)}.btn-collect{color:#fff;background:linear-gradient(135deg,#ab47bc,#7b1fa2);box-shadow:0 3px #4a148c,0 4px 12px #7b1fa24d}.btn-collect:not(:disabled):hover{box-shadow:0 3px #4a148c,0 6px 16px #7b1fa266}.btn-collect:disabled{background:linear-gradient(135deg,#9e9e9e,#757575);box-shadow:0 3px #616161}.btn-cancel{color:#fff;background:linear-gradient(135deg,#90a4ae,#607d8b);box-shadow:0 3px #37474f}@keyframes cellCollect{0%{opacity:1;transform:scale(1)}40%{opacity:.7;transform:scale(1.18)}to{opacity:0;transform:scale(0)}}.cell.collecting{pointer-events:none;animation:.28s cubic-bezier(.4,0,1,1) forwards cellCollect}@keyframes cellFall{0%{transform:translateY(calc(var(--fall-distance) * calc(var(--cell-size) + var(--gap)) * -1));opacity:.7}65%{transform:translateY(4px)}82%{transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.cell.falling{z-index:3;animation:.32s cubic-bezier(.34,1.4,.64,1) forwards cellFall}@keyframes cellAppear{0%{opacity:0;transform:scale(0)rotate(-15deg)}55%{opacity:1;transform:scale(1.2)rotate(4deg)}78%{transform:scale(.94)rotate(-1deg)}to{opacity:1;transform:scale(1)rotate(0)}}.cell.appearing{animation:.38s cubic-bezier(.34,1.56,.64,1) forwards cellAppear}@keyframes binBounce{0%,to{transform:scale(1)translateY(0)}40%{transform:scale(1.12)translateY(-4px)}70%{transform:scale(.96)translateY(1px)}}@keyframes startPulse{0%,to{transform:scale(1.1)rotate(0);box-shadow:0 2px #e65100,0 0 0 3px #ff980080,0 0 18px #ff980080}50%{transform:scale(1.15)rotate(180deg);box-shadow:0 2px #e65100,0 0 0 5px #ff9800b3,0 0 28px #ff9800cc}}.cell.start{z-index:4;animation:1.2s ease-in-out infinite startPulseGlow;overflow:visible}@keyframes startPulseGlow{0%,to{box-shadow:0 2px #e65100,0 0 0 3px #ff980080,0 0 18px #ff980080}50%{box-shadow:0 2px #e65100,0 0 0 5px #ff9800b3,0 0 28px #ff9800cc}}.cell.start{justify-content:center;align-items:center;display:inline-flex;position:relative}.cell.start .storm-icon{animation:1.2s linear infinite stormSpin;display:inline-block}@keyframes stormSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cell.start{font-size:calc(var(--cell-size) * .7)}.cell.start.selected{box-shadow:0 0 0 3px var(--color-selected), 0 4px 10px #7b1fa24d;animation:none;transform:scale(1.14)translateY(-1px)}.flying-particle{pointer-events:none;z-index:1000;filter:drop-shadow(0 2px 6px #0000004d);font-size:28px;transition:none;position:fixed}.cell.collecting-sequential{animation:75ms ease-in forwards cellCollectSequential}@keyframes cellCollectSequential{0%{opacity:1;transform:scale(1)}to{opacity:.5;transform:scale(.4)}}.cell.wildstar{background:linear-gradient(135deg,gold,orange);animation:.8s ease-in-out infinite wildstarPulse;box-shadow:0 2px #ff8c00,0 0 20px #ffd70099}.cell.wildstar .star-icon{animation:2s linear infinite starSpin;display:inline-block}@keyframes wildstarPulse{0%,to{box-shadow:0 2px #ff8c00,0 0 20px #ffd70099}50%{box-shadow:0 2px #ff8c00,0 0 35px #ffd700e6}}@keyframes starSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cell.wildstar-spawn{animation:.6s cubic-bezier(.34,1.56,.64,1) wildstarSpawn}@keyframes wildstarSpawn{0%{opacity:0;transform:scale(0)rotate(-180deg)}50%{opacity:1;transform:scale(1.3)rotate(0)}to{opacity:1;transform:scale(1)rotate(0)}}.cell.wildstar.selected{animation:.3s ease-in-out infinite alternate wildstarSelected}@keyframes wildstarSelected{0%{transform:scale(1.14);box-shadow:0 0 0 3px #7b1fa2,0 4px 10px #7b1fa24d}to{transform:scale(1.2);box-shadow:0 0 0 5px #7b1fa2,0 6px 15px #7b1fa280}}.bin.receiving{animation:.4s cubic-bezier(.34,1.56,.64,1) binBounceReceive}@keyframes binBounceReceive{0%,to{transform:scale(1)translateY(0)}25%{transform:scale(1.15)translateY(-6px)}50%{transform:scale(.95)translateY(2px)}75%{transform:scale(1.05)translateY(-1px)}}.skill-indicator{opacity:.4;flex-direction:column;align-items:center;width:100%;margin-top:4px;transition:opacity .3s;display:flex}.bin.has-skill .skill-indicator{opacity:1}.skill-bar{gap:3px;width:100%;margin-bottom:2px;display:flex}.skill-bar-segment{background:#0000001f;border-radius:2px;flex:1;height:8px;transition:background .3s,box-shadow .3s;overflow:hidden}.skill-bar-segment .skill-bar-fill{border-radius:2px;width:0%;height:100%;transition:width .3s}.skill-bar-segment.filled .skill-bar-fill{width:100%}.skill-bar-segment .skill-bar-fill.kitchen{background:var(--color-kitchen);box-shadow:0 0 4px #43a04766}.skill-bar-segment .skill-bar-fill.recyclable{background:var(--color-recyclable);box-shadow:0 0 4px #1e88e566}.skill-bar-segment .skill-bar-fill.hazardous{background:var(--color-hazardous);box-shadow:0 0 4px #e5393566}.skill-bar-segment .skill-bar-fill.other{background:var(--color-other);box-shadow:0 0 4px #75757566}.skill-label{color:#546e7a;white-space:nowrap;font-size:min(2.2vw,9px);font-weight:700}.bin.has-skill{cursor:pointer}.bin.has-skill:hover .bin-svg{filter:drop-shadow(0 4px 6px #00000040);transform:scale(1.08)}.bin.skills-full .skill-indicator{animation:1.5s ease-in-out infinite skillIndicatorPulse}@keyframes skillIndicatorPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.bin.skills-full .skill-bar-segment.filled .skill-bar-fill{animation:1.5s ease-in-out infinite skillBarGlow}@keyframes skillBarGlow{0%,to{filter:brightness()}50%{filter:brightness(1.3)}}.combo-skill-area{justify-content:center;max-height:0;padding:0 .6rem;transition:max-height .4s,padding .4s;display:flex;overflow:hidden}.combo-skill-area.combo-ready{max-height:60px;padding:.3rem .6rem}.btn-combo{cursor:pointer;color:#fff;letter-spacing:.03em;text-shadow:0 1px 2px #0003;background:linear-gradient(135deg,#ff8f00,#ffb300,#ff6f00);border:none;border-radius:50px;justify-content:center;align-items:center;gap:6px;width:100%;max-width:280px;padding:.5rem 1.2rem;font-family:Nunito,sans-serif;font-size:.95rem;font-weight:800;transition:opacity .3s,transform .1s;display:flex;box-shadow:0 3px #e65100,0 4px 14px #ff6f0066}.btn-combo:disabled{opacity:0;cursor:not-allowed;pointer-events:none}.btn-combo:not(:disabled){animation:1.5s ease-in-out infinite comboBtnPulse}.btn-combo:active:not(:disabled){transform:scale(.94)translateY(1px)}.combo-icon{filter:none;font-size:1.2rem;animation:2s linear infinite comboIconSpin;display:inline-block}@keyframes comboIconSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes comboBtnPulse{0%,to{box-shadow:0 3px #e65100,0 4px 14px #ff6f0066}50%{box-shadow:0 3px #e65100,0 4px 20px #ff6f00b3,0 0 30px #ffb70066}}.vortex-overlay{z-index:50;pointer-events:none;background:radial-gradient(circle,#0000001a 0%,#00000059 100%);border-radius:13px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.vortex-spinner{font-size:calc(var(--cell-size) * 3);filter:drop-shadow(0 0 20px #ff9800cc);line-height:1}.vortex-spinner.vortex-appear{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards vortexAppear}.vortex-spinner.vortex-spin{animation:.6s linear infinite vortexSpin}.vortex-spinner.vortex-disappear{animation:.4s ease-in forwards vortexDisappear}@keyframes vortexAppear{0%{opacity:0;transform:scale(0)rotate(0)}to{opacity:1;transform:scale(1.5)rotate(360deg)}}@keyframes vortexSpin{0%{transform:scale(1.5)rotate(0)}to{transform:scale(1.5)rotate(360deg)}}@keyframes vortexDisappear{0%{opacity:1;transform:scale(1.5)rotate(0)}to{opacity:0;transform:scale(0)rotate(720deg)}}.vortex-overlay.vortex-fade-out{animation:.4s ease-in forwards vortexOverlayFade}@keyframes vortexOverlayFade{0%{opacity:1}to{opacity:0}}.vortex-particle{pointer-events:none;z-index:1000;filter:drop-shadow(0 2px 4px #0000004d);font-size:24px;position:fixed}