*{box-sizing:border-box}html,body{margin:0;background:#e2eddc;color:#493e30;font-family:'Yu Gothic','MS Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:2px solid #68967e;background:#fff7e7;border-radius:5px;padding:7px 10px;font-weight:700}a{color:inherit;text-decoration:none}button:focus-visible,[role=button]:focus-visible,a:focus-visible{outline:3px solid #dc7a60;outline-offset:3px}.game{max-width:520px;margin:auto;background:#fff7e7;min-height:100dvh;box-shadow:0 0 60px #5f7b7133}header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#4a876d;color:#fff9e5;height:39px;font-size:10px}header span{font-size:7px;letter-spacing:1px}header button{padding:3px 6px;font-size:9px}.heading{padding:10px 16px;background:linear-gradient(#c4dfbe,#ddecce);border-bottom:4px solid #65987a;text-align:center}.heading small{font-size:9px;color:#53775e;letter-spacing:2px}h1{font-weight:950;font-size:clamp(25px,6.5vw,37px);margin:4px 0 9px;letter-spacing:1px;text-shadow:2px 2px #fff9e5}h1 span{color:#568f75;margin-left:7px}.stats{display:flex;gap:12px;justify-content:center}.stats>div{flex:1;background:#fffbed;border:2px solid #b5c8a1;border-radius:7px;padding:4px;font-size:11px}.stats>div+div{background:#fff0ea;border-color:#e4b7a2}.stats strong{font:bold 30px monospace;padding-left:6px}#scene{position:relative;aspect-ratio:4/4.5;max-height:610px;background:#d8d6a9 url('/bag-market.png') center/100% 100% no-repeat;overflow:hidden;isolation:isolate;touch-action:none}.clerk-note{position:absolute;top:28%;left:4%;background:#fff8e6e8;border:2px solid #aebf8a;padding:6px 8px;font-size:10px;box-shadow:3px 3px #395f4e33}.progress{position:absolute;top:3%;left:12%;width:76%;background:#fff9e9f5;border:3px solid #aaba91;border-radius:9px;padding:8px 12px;z-index:3}.progress>div:first-child{display:flex;justify-content:space-between;font-size:12px}.progress span{font-size:9px;color:#768064}.track{margin-top:7px;background:#d4d8c8;border:2px solid #7e9479;height:15px;border-radius:4px;overflow:hidden}#fill{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#68ac72 0 12px,#8ac38a 12px 16px);transition:width .06s}#bag{position:absolute;left:6%;bottom:5%;width:88%;height:65%;touch-action:none;user-select:none;cursor:grab;transform:translateX(var(--shake,0px));z-index:2}#bag svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 5px 0 #65534025);shape-rendering:crispEdges}.bag-body{fill:#f3f6f0e8;stroke:#8eaaa5;stroke-width:3}.bag-shadow{fill:#6c77654a}.bag-fold{fill:none;stroke:#bdcfca;stroke-width:3}.bag-shine{fill:#fff}.hand{fill:#f2c19c;stroke:#a57558;stroke-width:2}.sleeve{fill:#5c9c78;stroke:#457e64;stroke-width:3}#mouth{fill:#a4b4ad;transition:transform .15s;transform-origin:center;transform-box:fill-box}#bag.ready #mouth{fill:#6d917b;transform:scaleY(2.5)}#bag.open #mouth{fill:#728578;transform:scale(.95,8)}#bag.packed{animation:packed .5s ease-in-out}#arrows{position:absolute;left:24%;top:44%;width:52%;text-align:center;color:#c16c58;font-size:18px;font-weight:900;text-shadow:2px 2px #fff;pointer-events:none}#drop-zone{display:none;position:absolute;top:37%;left:18%;width:64%;padding:8px;text-align:center;border:2px dashed #e4ac59;color:#fff8df;background:#4d736bd9;font-size:11px;pointer-events:none}#bag.open #drop-zone{display:block}#bag.open #arrows,#bag.packed #arrows{display:none}#product{position:absolute;right:4%;top:24%;width:18%;padding:4px;background:#fff9e8eb;z-index:4;touch-action:none;user-select:none;transition:opacity .15s;box-shadow:3px 4px #566f5c44}#product svg{width:100%;height:65px;shape-rendering:crispEdges;pointer-events:none}#product span{display:block;font-size:10px;pointer-events:none}#product.selected{outline:3px solid #e5a248}#product.dragging{transition:none;pointer-events:auto;z-index:9}#product:disabled{opacity:.45;cursor:default}#feedback{position:absolute;bottom:0;left:3%;right:3%;margin:0 0 7px;padding:8px;background:#fff8e9f5;border:2px solid #b8bd95;border-radius:5px;z-index:5;text-align:center;font-size:12px;font-weight:bold;pointer-events:none}#combo{position:absolute;right:5%;top:17%;color:#497b59;background:#fff8e5c9;font-size:12px;padding:4px;z-index:2}.controls{display:flex;gap:5px;padding:8px 10px 0}.controls button{flex:1;font-size:10px;padding:9px 3px}.controls button:disabled{opacity:.4;cursor:default}.help{font-size:9px;color:#7d806a;text-align:center;padding:0 8px;line-height:1.7}footer{display:flex;justify-content:space-between;padding:9px 13px;font-size:10px;border-top:3px solid #709c7c;color:#5b745f;background:#e4ecd6}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:#2346328f;backdrop-filter:blur(3px);z-index:20;padding:20px;overflow:auto}.panel{width:min(420px,100%);background:#fff8e8;border:4px solid #64977b;box-shadow:7px 7px #315e4a66;padding:25px 22px;text-align:center;border-radius:9px}.panel small{font-size:9px;color:#57816b;letter-spacing:1px}.panel h2{font-size:23px;line-height:1.5}.panel p{font-size:12px;line-height:1.9}.panel ol{list-style-position:inside;padding:12px 8px;text-align:left;font-size:13px;line-height:2.2;border-block:1px solid #c7ceb0}.primary{display:block;width:100%;background:#5d9b78;color:#fffbe8;border-color:#366c53;box-shadow:3px 3px #b7cc9f;padding:14px 8px;font-size:15px}#share{margin:12px auto 0}#result-score{display:block;font-size:42px;color:#508468;margin:15px}#result-score:empty{display:none}[hidden]{display:none!important}@keyframes packed{50%{transform:translateY(30px);opacity:.5}}@media(max-width:370px){header span{display:none}.stats strong{font-size:26px}#arrows{font-size:16px}.progress{padding:6px 8px}.progress>div:first-child{font-size:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
header button{color:#456c56}