@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');
:root{font-family:Raleway,Arial,sans-serif;color:#f1f4ee;background:#0c1115;font-synthesis:none;font-weight:500;--lime:#d5fa68}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 30%,#273238,#0b1014 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button{color:inherit}button:disabled{opacity:.3}.app{max-width:460px;height:100svh;min-height:700px;max-height:1040px;margin:auto;background:#172126;display:flex;flex-direction:column;padding:0 18px;overflow:hidden;position:relative;box-shadow:0 0 90px #0005}header{display:flex;align-items:center;gap:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:15px;flex-shrink:0}.brand{font-size:23px;letter-spacing:-1.4px;font-weight:800;color:var(--lime);text-decoration:none}.brand span{font-size:9px;vertical-align:top;letter-spacing:0;margin-left:3px}.edition{font-size:7px;letter-spacing:1.5px;color:#809095;margin-left:auto}.icon-button{background:#ffffff06;border:1px solid #ffffff16;border-radius:50%;height:30px;width:30px;display:grid;place-items:center;font-size:13px}.heading{display:flex;align-items:center;justify-content:space-between;margin:3px 0 16px}.overline{display:block;font-size:8px;letter-spacing:1.8px;color:#839497;font-weight:700}h1{font-size:29px;letter-spacing:-1.4px;line-height:1;margin:8px 0 0}h1 span{color:var(--lime);margin-left:12px;font-size:27px}.heading .icon-button{width:40px;height:40px;border-radius:12px;background:#223035}.hud{display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:14px}.hud>div+div{border-left:1px solid #ffffff13;padding-left:20px}.hud strong{display:block;font-size:29px;font-weight:700;line-height:1.2;letter-spacing:-1px;margin-top:5px;font-variant-numeric:tabular-nums}.hud .combo strong{font-size:25px;color:var(--lime)}.combo small{display:block;font-size:7px;letter-spacing:2px;margin-top:3px;line-height:1}.clock{text-align:right}.clock .overline{text-align:right}.clock.low strong{color:#ff9d8e}.reward{display:flex;align-items:center;gap:10px;background:#222f31;border:1px solid #ffffff09;padding:10px 12px;border-radius:12px;margin-bottom:14px}.reward-coin{font-size:29px;color:var(--lime);line-height:1}.reward-main{flex:1}.reward-main>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:9px;margin-bottom:7px}.reward-main b{font-size:10px}.reward-main span{font-variant-numeric:tabular-nums;color:#9aada7;font-size:8px}.track{height:3px;border-radius:9px;background:#ffffff13;overflow:hidden}.track i{display:block;width:0;height:100%;background:var(--lime);transition:width .2s}.reward-lock{color:var(--lime);font-size:19px;margin-left:5px}.scene{position:relative;flex:1;min-height:245px;border:1px solid #3a4546;border-radius:15px;isolation:isolate;background:#2a3437;box-shadow:inset 0 0 0 4px #202a2f;overflow:hidden}.rail{position:absolute;top:0;bottom:0;width:26px;background:linear-gradient(90deg,#293438,#3c484a 50%,#20292d);z-index:2;box-shadow:2px 0 6px #0007}.rail-left{left:0}.rail-right{right:0;transform:rotate(180deg)}.rail span{position:absolute;top:45%;left:9px;writing-mode:vertical-rl;font-size:7px;letter-spacing:2px;color:#829190}.rail i{position:absolute;width:8px;height:8px;border:2px solid #182125;background:#5a6462;border-radius:50%;left:9px;top:15px;box-shadow:0 1px 1px #fff2}.rail i:last-child{top:auto;bottom:15px}.belt{position:absolute;inset:0 27px;background:#30393a;box-shadow:inset 7px 0 12px #0008,inset -7px 0 12px #0008}.belt-texture{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 45px,#111b1d 46px,#182326 48px,#54605d 49px,transparent 50px),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px);background-size:100% 50px,4px 100%;opacity:.9}.running .belt-texture{animation:convey 1.1s linear infinite}.paused .belt-texture{animation-play-state:paused}@keyframes convey{to{background-position:0 50px,0 0}}.lane-line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:repeating-linear-gradient(to bottom,#b8c8af25 0 12px,transparent 12px 26px)}.flow-arrow{position:absolute;color:#b5c5b815;font-size:60px;top:45%;left:18%;font-family:Arial}.a2{left:68%}.scene-label{position:absolute;left:38px;right:38px;top:11px;z-index:3;display:flex;align-items:center;gap:5px;color:#c0cbc0;font-size:7px;letter-spacing:1px;pointer-events:none}.scene-label>span:last-child{margin-left:auto;color:var(--lime)}.live-dot{width:4px;height:4px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px var(--lime)}.scan-line{position:absolute;top:65%;height:1px;left:0;right:0;background:#d5fa6850;box-shadow:0 -8px 18px #d5fa6830;pointer-events:none}.end-zone{position:absolute;bottom:0;left:0;right:0;height:33px;background:linear-gradient(transparent,#11191dd9);text-align:center;pointer-events:none}.end-zone span{font-size:6px;letter-spacing:1.4px;color:#a9b4a5}.end-zone b{display:block;font-size:13px;letter-spacing:14px;color:#d0e39088;line-height:1}.item{position:absolute;width:94px;height:126px;left:0;top:0;background:none;border:0;padding:0;z-index:4;touch-action:none;user-select:none;cursor:grab;will-change:transform;display:grid;place-items:center}.item img{height:126px;width:84px;object-fit:contain;pointer-events:none;filter:drop-shadow(7px 9px 3px #0008);transform:rotate(var(--angle));user-select:none}.item.selected:before{content:'';position:absolute;inset:2px 6px;border:1px dashed var(--lime);border-radius:13px;background:#d5fa680c}.item.selected img{filter:drop-shadow(0 0 5px #d5fa6888)}.item.dragging{position:fixed;z-index:1000;pointer-events:none;transform:none!important}.item.dragging img{transform:rotate(-8deg) scale(1.1)}.item.demo{pointer-events:none;opacity:.9}.start-panel{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(#111b1d22,#111b1dbb 25%,#111b1df2 100%)}.pill{background:#d5fa6815;border:1px solid #d5fa6840;color:#dbefa8;font-size:7px;letter-spacing:1.4px;padding:7px 11px;border-radius:20px}.start-panel h2{font-size:28px;letter-spacing:-1px;line-height:1.15;margin:13px 0 8px}.start-panel p{font-size:10px;line-height:1.8;color:#a7b6b5;margin:0 0 15px}.primary{display:flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-radius:11px;background:var(--lime);color:#1a2721;font-size:12px;font-weight:800;padding:15px 20px;min-width:210px}.primary:hover{background:#e3ff98}.primary span{font-size:18px;line-height:1}.sorting{padding-top:13px;flex-shrink:0}.sorting-label{display:flex;justify-content:space-between;gap:8px;font-size:7px;letter-spacing:1px;color:#bdc9be;margin-bottom:9px;min-height:10px}.sorting-label>span:last-child{color:#6f8387;white-space:nowrap}.bins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.bin{position:relative;min-height:76px;border:1px solid #ffffff12;border-radius:10px;background:#243034;padding:9px 3px 7px;text-align:center;transition:background .15s,transform .15s;box-shadow:inset 0 2px 0 #ffffff04}.bin:before{content:'';position:absolute;left:12px;right:12px;top:0;height:2px;background:var(--color);border-radius:0 0 4px 4px;opacity:.7}.bin strong{display:block;font-size:8px;letter-spacing:-.15px;margin-top:5px;color:#e8eeea;font-weight:700}.bin small{display:block;font-size:6px;margin-top:3px;color:#829493;white-space:nowrap}.bin-icon{position:relative;margin:0 auto;height:24px;width:14px;border:1.5px solid var(--color);border-radius:4px;opacity:.85}.bin-icon.bottle{width:12px;height:22px;margin-top:2px;border-radius:4px 4px 3px 3px}.bin-icon.bottle:before{content:'';position:absolute;top:-4px;left:2px;right:2px;height:4px;border:1px solid var(--color);border-radius:2px;background:#243034}.bin-icon:after{content:'';position:absolute;top:9px;left:0;right:0;border-top:1px solid var(--color)}.bin-icon.box{width:24px;height:20px;margin-top:4px;transform:skewY(-5deg);border-radius:1px}.bin-icon.carton{width:16px;border-top-width:5px;border-radius:1px}.bin-icon.bag{width:21px;border-top:3px solid var(--color);border-bottom:3px solid var(--color);border-radius:2px}.bin.dragover,.bin.flash{background:color-mix(in srgb,var(--color) 25%,#243034);border-color:var(--color);transform:translateY(-3px)}.bin.error{background:#5e3035;border-color:#fa8d86}footer{display:flex;justify-content:space-between;font-size:6px;letter-spacing:.9px;color:#6b7f81;padding:11px 0 max(9px,env(safe-area-inset-bottom));flex-shrink:0}.pause-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#142026ee;backdrop-filter:blur(8px)}.pause-overlay h2{font-size:42px;letter-spacing:-2px;margin:12px 0 25px}[hidden]{display:none!important}#toast{position:absolute;top:35px;left:30px;right:30px;z-index:11;text-align:center;font-size:10px;font-weight:700;color:#14261b;background:#d5fa68ed;border-radius:8px;padding:9px 6px;opacity:0;transition:opacity .15s;pointer-events:none;box-shadow:0 5px 15px #0003}#toast.show{opacity:1}#toast.bad{background:#ffb5a9}.floating-score{position:fixed;z-index:1001;color:var(--lime);font-weight:800;font-size:25px;pointer-events:none;animation:scorefly .8s ease-out forwards;text-shadow:0 2px 5px #000}@keyframes scorefly{to{transform:translateY(-65px);opacity:0}}.generic{display:grid;place-content:center;text-align:center;width:55px;height:85px;transform:rotate(var(--angle));color:#25352e;box-shadow:6px 8px 3px #0005;font-weight:800}.generic span{font-size:25px}.generic b{font-size:8px}.generic.glass{width:38px;height:98px;border-radius:9px 9px 5px 5px;border:3px solid #88d2b7;background:linear-gradient(90deg,#284f44,#78b49f,#245247);color:#e1f3cd}.generic.glass:before{content:'';position:absolute;top:-12px;height:13px;width:15px;left:9px;background:#5d9e83;border-radius:3px}.generic.paper{width:71px;height:65px;background:linear-gradient(90deg,#a27c51 49%,#d0ac80 50%);border:2px solid #daba8d}.generic.carton{background:#eac17c;border-top:13px solid #f4e2bd;color:#a15c26}.generic.mixed{background:#d389ab;width:65px;height:79px;clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);border-top:5px solid #f3bad3;border-bottom:5px solid #f3bad3}dialog{color:#eef4e9;border:1px solid #455249;border-radius:23px;padding:28px;max-width:410px;width:calc(100% - 30px);background:#1d2b2e;max-height:90svh}dialog::backdrop{background:#071013bb;backdrop-filter:blur(8px)}dialog h2{font-size:29px;line-height:1.15;letter-spacing:-1px}dialog p{font-size:12px;color:#a8bab4;line-height:1.8}dialog .primary{width:100%;margin-top:20px}.close{position:absolute;top:12px;right:15px;border:0;background:none;font-size:24px;color:#9bad9f}.rules-row{display:flex;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid #ffffff0d;font-size:10px;color:#a9b8b0}.rules-row b{color:var(--lime);width:55px;font-size:13px}.note{font-size:9px!important}.result-star{font-size:65px;color:var(--lime);margin-bottom:15px}#result{text-align:center}.result-stats{display:flex;justify-content:space-between;padding:20px 5px;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18}.result-stats strong{font-size:24px;display:block;color:var(--lime)}.result-stats span{font-size:9px;color:#91a79d}@media(min-width:600px){body{display:grid;place-items:center;min-height:100vh;padding:24px}.app{height:900px;max-height:calc(100svh - 48px);width:430px;min-height:740px;border:1px solid #46514d;border-radius:30px;padding:0 20px}header{padding-top:20px}.scene{min-height:260px}}@media(max-height:740px) and (max-width:599px){.app{min-height:620px;padding:0 13px}header{padding-top:8px;padding-bottom:9px}.heading{margin:0 0 10px}h1{font-size:25px}.hud{margin-bottom:10px}.hud strong{font-size:24px}.reward{padding:8px 11px;margin-bottom:10px}.bin{min-height:66px;padding:7px 2px 5px}.bin-icon{transform:scale(.85)}.sorting{padding-top:9px}footer{padding:8px 0}.scene{min-height:210px}.start-panel h2{font-size:23px}.start-panel p{font-size:9px;margin-bottom:10px}.pill{padding:5px 8px}.primary{padding:12px 17px}}@media(prefers-reduced-motion:reduce){.running .belt-texture{animation:none}.floating-score{animation-duration:.1s}}
/* Two-row mobile toolbar, 86px including outer spacing. */
.play-toolbar{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:max(8px,env(safe-area-inset-top));height:52px}
.play-toolbar .hud{display:flex;align-items:center;gap:14px;flex:1;margin:0}
.play-toolbar .hud>div{display:flex;align-items:center;gap:5px}
.play-toolbar .hud>div+div{border:0;padding:0}
.play-toolbar .hud .overline{font-size:7px;letter-spacing:.7px}
.play-toolbar .hud strong{font-size:20px;line-height:1;margin:0;letter-spacing:-.5px}
.play-toolbar .hud .combo strong{font-size:15px}
.play-toolbar .combo small{display:none}
.play-toolbar .clock{margin-left:auto}
.play-toolbar .clock strong{font-size:18px}
.play-toolbar .icon-button{width:36px;height:40px;flex-shrink:0;border-radius:10px;font-size:14px}
.reward{padding:4px 0 0;gap:7px;margin:0 0 10px;height:24px;flex-shrink:0;border:0;border-radius:0;background:none}
.reward-coin{font-size:16px}.reward-main>div:first-child{margin-bottom:3px}
.reward-main b{font-size:8px}.reward-main span{font-size:7px}
.reward-lock{font-size:13px}.track{height:2px}
.sorting{padding-bottom:max(12px,env(safe-area-inset-bottom))}
@media(min-width:600px){.app{min-height:650px}.play-toolbar{height:58px;padding-top:14px}}
/* Theme controls share the existing compact toolbar. */
.play-toolbar .hud{gap:9px;min-width:0}
.hud strong,.reward-main span{font-variant-numeric:lining-nums tabular-nums}
:root[data-theme="light"]{color:#253c32;background:#e1e7df;--lime:#497323}
[data-theme="light"] body{background:radial-gradient(ellipse at 50% 30%,#f5f7ee,#dce4da 70%)}
[data-theme="light"] .app{background:#f4f5ee;border-color:#cbd4c5;box-shadow:0 12px 65px #324a3020}
[data-theme="light"] .icon-button{background:#e9ede3;border-color:#cdd7c4;color:#30472d}
[data-theme="light"] .overline{color:#637262}
[data-theme="light"] .reward-main span{color:#63735a}
[data-theme="light"] .track{background:#dce3d3}
[data-theme="light"] .scene{background:#c0cab9;border-color:#a4b39b;box-shadow:inset 0 0 0 4px #cbd4c4}
[data-theme="light"] .rail{background:linear-gradient(90deg,#b1bfa9,#d3dccb 50%,#a2b197);box-shadow:2px 0 6px #34432c33}
[data-theme="light"] .rail span{color:#56694e}
[data-theme="light"] .rail i{background:#a5b397;border-color:#718366;box-shadow:0 1px 1px #fff8}
[data-theme="light"] .belt{background:#b9c5ae;box-shadow:inset 7px 0 12px #53634744,inset -7px 0 12px #53634744}
[data-theme="light"] .belt-texture{background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 45px,#8b9d7e 46px,#8b9d7e 48px,#d8e0d0 49px,transparent 50px),repeating-linear-gradient(90deg,#ffffff10 0 1px,transparent 1px 4px)}
[data-theme="light"] .lane-line{background:repeating-linear-gradient(to bottom,#526c4233 0 12px,transparent 12px 26px)}
[data-theme="light"] .flow-arrow{color:#526c4226}
[data-theme="light"] .scene-label{color:#3a5032}
[data-theme="light"] .scan-line{background:#4c722777;box-shadow:0 -8px 18px #54792a30}
[data-theme="light"] .end-zone{background:linear-gradient(transparent,#c7d2bbed)}
[data-theme="light"] .end-zone span,[data-theme="light"] .end-zone b{color:#536a43}
[data-theme="light"] .start-panel{background:linear-gradient(#edf2e322,#edf2e3ce 25%,#edf2e3f5 100%)}
[data-theme="light"] .pill{background:#e4edce;border-color:#aabc8a;color:#476327}
[data-theme="light"] .start-panel p{color:#5d7156}
[data-theme="light"] .primary{background:#c7ec76;color:#263b1b}
[data-theme="light"] .primary:hover{background:#b6df5e}
[data-theme="light"] .pause-overlay{background:#edf2e3ed}
[data-theme="light"] .sorting-label{color:#506548}
[data-theme="light"] .sorting-label>span:last-child{color:#687b5f}
[data-theme="light"] .bin{background:#e5ebdf;border-color:#c5d0bc;box-shadow:inset 0 2px 0 #fff8}
[data-theme="light"] .bin:before{background:color-mix(in srgb,var(--color) 60%,#315023);opacity:1}
[data-theme="light"] .bin-icon{--color:inherit;filter:brightness(.6) saturate(1.3);opacity:1}
[data-theme="light"] .bin-icon.bottle:before{background:transparent}
[data-theme="light"] .bin strong{color:#293e26}
[data-theme="light"] .bin small{color:#5e7054}
[data-theme="light"] .bin.dragover,[data-theme="light"] .bin.flash{background:color-mix(in srgb,var(--color) 50%,#eef3e7);border-color:#648545}
[data-theme="light"] .bin.error{background:#f2cbc1;border-color:#bc6556}
[data-theme="light"] .item.selected:before{border-color:#3f681c;background:#81ab2817}
[data-theme="light"] .item.selected img{filter:drop-shadow(0 0 5px #3e6b2277)}
[data-theme="light"] .floating-score{color:#335c14;text-shadow:0 2px 5px #fff}
[data-theme="light"] .clock.low strong{color:#b34530}
[data-theme="light"] dialog{background:#f4f6ec;color:#253c32;border-color:#b7c7a9}
[data-theme="light"] dialog p,[data-theme="light"] .rules-row,[data-theme="light"] .result-stats span{color:#586e4d}
[data-theme="light"] .rules-row,[data-theme="light"] .result-stats{border-color:#cfdac4}
[data-theme="light"] .close{color:#536d44}
@media(max-width:359px){.play-toolbar{gap:4px}.play-toolbar .icon-button{width:30px}.play-toolbar .hud{gap:6px}.play-toolbar .hud .overline{display:none}}

.item.item-box{width:clamp(108px,33vw,140px);height:158px}
.item.item-box img{width:100%;height:150px}