@font-face{font-family:Rubik;src:url(assets/rubik-0.ttf);font-display:swap}@font-face{font-family:Rubik;src:url(assets/rubik-3.ttf);font-weight:600 750;font-display:swap}@font-face{font-family:Rubik;src:url(assets/rubik-5.ttf);font-weight:800 1000;font-display:swap}
:root{--deep:#08484a;--dark:#103b38;--green:#01af74;--forest:#00674e;--lime:#bfd739;--mint:#42e687;--yellow:#fdc942;--paper:#f8f5eb;--body:#31534a;--shadow:#143b2926;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);font-family:Rubik,Arial,sans-serif;color:var(--dark);background:#f6f4ea}
*{box-sizing:border-box}html{min-height:100%;overscroll-behavior:none}body{margin:0;min-height:100dvh}body.in-play{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #007956;outline-offset:4px}button:disabled{cursor:default}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}img{display:block;max-width:100%;object-fit:contain}button>[class],button>svg{pointer-events:none}[hidden]{display:none!important}.svg-def{position:absolute;width:0;height:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.app{min-height:100dvh}.home,.result{width:min(100%,1250px);padding:0 clamp(22px,5vw,58px);margin:auto;position:relative}.mast{height:calc(82px + var(--safe-t));padding-top:var(--safe-t);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #08484a18;position:relative;z-index:2}.brand{width:145px;height:auto;flex:none;object-fit:contain;object-position:right center}.icon-btn{height:46px;width:46px;flex:none;border:1px solid #08484a21;border-radius:15px;background:#fffdf5;display:grid;place-items:center;padding:0;transition:background .2s,transform .2s}.icon-btn:hover{background:#e0f3d6}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:21px;height:21px}
.welcome{display:grid;grid-template-columns:.91fr 1.09fr;align-items:center;gap:clamp(26px,8vw,110px);min-height:calc(100dvh - 105px);position:relative;padding:28px 0 42px}.welcome-copy,.preview-wrap{position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:7px;background:#e0eedb;border:1px solid #b9d9bb;border-radius:100px;padding:7px 11px;font-size:12px;color:var(--deep);font-weight:700;line-height:1.2;width:max-content;max-width:100%}.eyebrow i,.hero-caption i,.room-label i{display:inline-block;width:7px;height:7px;background:#009d6b;border-radius:50%;box-shadow:0 0 0 3px #01af741c;flex:none}
h1{font-size:clamp(76px,10vw,146px);font-weight:900;line-height:.83;letter-spacing:-.085em;margin:26px 0 25px;color:var(--deep)}h1 em,.desktop-side h2 em{font-style:normal;display:inline-block;position:relative;line-height:.91;font-weight:900;letter-spacing:-.085em;color:#fffdf0;background:var(--forest);border-radius:.18em;padding:.025em .12em .095em .22em;transform:rotate(-4deg);box-shadow:0 .055em 0 var(--lime);margin-top:.1em}h1 em svg{position:absolute;left:-.33em;top:-.2em;width:.38em;height:.42em;color:#079663;stroke-width:4;overflow:visible;transform:rotate(-12deg)}
.lead{font-size:clamp(19px,2.2vw,27px);letter-spacing:-.04em;margin:0 0 7px;font-weight:800}.welcome-detail{max-width:305px;color:var(--body);font-size:16px;margin:0 0 18px;line-height:1.6}.actions{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}.button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:51px;padding:10px 20px;border-radius:15px;border:0;font-size:16px;font-weight:800;line-height:1.2;transition:transform .16s,filter .16s,background .16s;text-align:center}.button:hover{filter:brightness(1.07)}.button:active{transform:translateY(2px) scale(.99)}.primary{color:#fffdf1;background:var(--forest);box-shadow:0 3px 0 #014c3c,0 9px 19px #00674e21}.primary svg{width:21px;height:21px}.quiet{background:transparent;border:1px solid #08484a27;color:var(--deep)}.outline{background:#fffdf2;border:1px solid #08484a38;color:var(--deep)}.welcome-best{font-size:13px;display:flex;gap:8px;align-items:center;margin:-2px 0 13px;color:var(--deep)}.welcome-best svg{width:18px;height:18px;color:#087b56}
.hero-art{height:clamp(380px,46vw,600px);max-height:68dvh;min-height:310px;position:relative;isolation:isolate;overflow:hidden;border-radius:35px;background:#cfbb96 url(assets/room.webp) center 47% / cover;box-shadow:0 18px 50px #30291428;border:1px solid #55442b30}.hero-art:before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,#012a2414 10%,transparent 36%,#1b35283b)}.hero-light{position:absolute;inset:-15%;background:radial-gradient(ellipse at 60% 31%,#fff6d955,transparent 56%);mix-blend-mode:screen;animation:breathe 5s ease-in-out infinite}.hero-sticker{position:absolute;z-index:6;top:17px;right:16px;display:flex;align-items:center;gap:6px;background:#fff9e6;color:var(--deep);border-radius:11px;padding:8px 10px;font-size:11px;font-weight:700;box-shadow:0 4px 14px #37322626}.hero-sticker b{font-size:17px;line-height:1}.hero-sticker svg{width:17px;height:17px}.hero-crate{position:absolute;width:69%;aspect-ratio:1.75;background:url(assets/crate.webp) center / contain no-repeat;left:17%;top:64%;filter:drop-shadow(0 16px 14px #241b1459);z-index:3;transform:rotate(-7deg)}.hero-crate:after{content:'';position:absolute;left:32%;top:57%;width:36%;height:28%;background:url(assets/avia-boxes.png) center / contain no-repeat;filter:brightness(0) invert(1);opacity:.94}.hero-crate.hero-back{width:56%;left:14%;top:49%;z-index:2;transform:rotate(14deg);filter:brightness(.87) drop-shadow(0 9px 9px #34270d40)}.hero-float{position:absolute;z-index:4;width:23%;aspect-ratio:1;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 10px 10px #583b313d);animation:bob 4.1s ease-in-out infinite;--tilt:12deg;top:38%;left:41%}.hero-float:nth-of-type(3){top:48%;left:63%;width:18%;--tilt:24deg;animation-delay:-1.7s}.hero-float:nth-of-type(4){top:42%;left:16%;width:20%;--tilt:-20deg;animation-delay:-2.5s}.hero-spark{position:absolute;z-index:5;width:34px;height:34px;top:31%;left:25%;color:#e3ef8a;animation:breathe 3s ease-in-out infinite}.hero-caption{display:flex;justify-content:space-between;gap:8px;margin:12px 3px 0;color:#3d594e;font-size:11px;font-weight:700}.hero-caption span:first-child{display:flex;align-items:center;gap:8px}.hero-caption span:last-child{letter-spacing:.1em}.home-pattern{z-index:0;position:absolute;left:-3%;bottom:2.5%;width:20%;height:37%;border-radius:55% 0 0 0;background:repeating-linear-gradient(135deg,#bfd73937 0 8px,transparent 8px 18px);mask-image:linear-gradient(0deg,black,transparent);pointer-events:none}
.play{direction:ltr;height:100dvh;display:grid;grid-template-columns:minmax(0,510px) minmax(260px,320px);align-items:center;justify-content:center;gap:clamp(23px,6vw,100px);background:radial-gradient(ellipse at 18% 50%,#dbead4,transparent 60%),var(--paper);position:relative}.game-shell{direction:rtl;height:min(100dvh - 22px,930px);height:min(calc(100dvh - 22px),930px);width:100%;display:flex;flex-direction:column;position:relative;border-radius:24px;overflow:hidden;background:#f7f4e9;box-shadow:0 16px 45px #2b3e3038;border:1px solid #08484a29}
.hud{position:relative;z-index:8;display:grid;grid-template-columns:42px 1fr auto 1fr 42px;align-items:center;gap:9px;min-height:71px;padding:calc(8px + var(--safe-t)) 12px 8px;background:#fbf8ee;color:var(--deep);flex:none}.hud .icon-btn{width:42px;height:42px;border-radius:13px}.score-meter,.time-meter,.box-meter{display:flex;align-items:center;justify-content:center}.score-meter{flex-direction:column;gap:3px;font-size:10px;line-height:1;color:#405e52;font-weight:700}.score-meter strong{font-size:22px;font-weight:900;color:var(--deep);font-variant-numeric:tabular-nums}.time-meter{gap:6px;direction:ltr;padding:8px 10px;background:var(--deep);color:#fffbea;border:1px solid #1a6460;border-radius:100px;min-width:93px}.time-meter strong{font-variant-numeric:tabular-nums;line-height:1;font-size:22px}.time-meter svg{width:17px;height:17px;color:#d4eb67}.box-meter{flex-wrap:wrap;gap:1px 4px}.box-meter svg{width:15px;height:15px;color:#057852}.box-meter strong{font-size:18px}.box-meter small{flex-basis:100%;text-align:center;color:#4a6257;font-size:10px;font-weight:700}.clock-track{flex:none;height:4px;background:#d6e3d6;position:relative;z-index:8}.clock-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--lime),var(--green));transform-origin:right center;will-change:transform}.urgent .time-meter{background:#833b25;border-color:#833b25}.urgent .clock-track i{background:#d86632}
.stage{position:relative;min-height:0;flex:1;isolation:isolate;overflow:hidden;background:#c0a77e;touch-action:none;user-select:none;-webkit-user-select:none}.room-scene{position:absolute;inset:0 0 0;background:#c8b996 url(assets/room.webp) center 51% / cover;overflow:hidden}.room-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(145deg,#fff6dd30,transparent 51%),linear-gradient(to top,#523b2526,transparent 48%)}.room-label{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:7px;align-items:center;padding:7px 10px;border-radius:12px;background:#fffbeaeb;color:var(--deep);box-shadow:0 3px 11px #2a221826;font-size:11px;font-weight:700}.objects{position:absolute;inset:0 0 15.5%;z-index:2}.prop,.mini-prop{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--angle));background:var(--image) center / contain no-repeat;border:0;padding:0;z-index:var(--depth);-webkit-touch-callout:none}.prop{cursor:grab;touch-action:none;min-width:44px;min-height:44px;filter:drop-shadow(1px 4px 3px #281a0e5c);transition:filter .14s,opacity .14s;animation:reveal .24s cubic-bezier(.2,.75,.35,1.28) backwards}.prop:hover,.prop.selected,.prop:focus-visible{filter:drop-shadow(0 0 2px white) drop-shadow(0 0 6px #c9f369) drop-shadow(1px 4px 3px #281a0e64);z-index:100}.prop.dragging{opacity:0;transition:none;pointer-events:none;cursor:grabbing}.drag-ghost{position:fixed;pointer-events:none;z-index:150;inset:0 auto auto 0;width:var(--w);height:var(--w);background:var(--image) center / contain no-repeat;filter:drop-shadow(0 10px 9px #12271c77);will-change:transform;transform-origin:center}.fx{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}.point-fx{position:absolute;top:var(--py);left:var(--px);transform:translate(-50%,-50%);white-space:nowrap;direction:ltr;font-size:clamp(24px,6vw,36px);font-weight:900;line-height:1;color:#064838;background:#eff7a8;border:2px solid #f9ffdd;border-radius:12px;padding:6px 9px;box-shadow:0 4px 16px #234b2a45;animation:points .76s ease-out forwards}.point-fx i{display:block;font-style:normal;font-size:10px;direction:rtl;text-align:center;margin-top:3px}.particle{position:absolute;left:var(--px);top:var(--py);background:var(--color);width:var(--pw);height:var(--pw);border-radius:var(--r);box-shadow:0 0 8px #e9fc9759;animation:pop .66s cubic-bezier(.17,.7,.14,1) forwards}
.packing-zone{position:absolute;z-index:4;bottom:0;left:0;width:100%;height:24%;min-height:115px;max-height:199px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding-bottom:max(6px,var(--safe-b));pointer-events:none}.dock-art{position:absolute;bottom:0;left:0;right:0;height:78%;background:linear-gradient(0deg,#173b2fc9,#31534450 41%,transparent);z-index:-1}.crate{border:0;background:none;display:block;position:relative;width:min(58%,230px);height:calc(100% - 23px);pointer-events:auto;padding:0;isolation:isolate;touch-action:none;transform-origin:center bottom;transition:transform .18s}.crate:hover,.crate.ready{transform:translateY(-3px) scale(1.025)}.crate.drop-ready{transform:translateY(-6px) scale(1.065)}.crate-image{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 11px 7px #14281375);position:absolute;inset:0;z-index:1}.crate-glow{position:absolute;inset:-1% 4% 29%;border-radius:50%;background:radial-gradient(ellipse,#ddf15c96,transparent 68%);opacity:0;transform:scale(.8);transition:opacity .14s,transform .14s}.selected-mode .crate .crate-glow,.crate.drop-ready .crate-glow{opacity:1;transform:scale(1.56)}.crate.drop-ready .crate-image{filter:drop-shadow(0 0 6px #e1fa82) drop-shadow(0 10px 8px #24362670)}.crate-logo{position:absolute;width:41%;height:24%;left:30%;top:60%;z-index:3;display:grid;place-items:center}.crate-logo img{width:100%;filter:brightness(0) invert(1);opacity:.94}.crate-contents{position:absolute;z-index:2;inset:0 10% 51%;overflow:hidden;pointer-events:none}.crate-contents img{position:absolute;width:29%;height:68%;object-fit:contain;bottom:0;left:var(--cx);transform:rotate(var(--cr));filter:drop-shadow(0 3px 2px #07372c80);animation:in-box .22s ease-out backwards}.capacity{display:flex;align-items:center;justify-content:center;gap:8px;height:23px;color:#f3f9dd;font-size:10px;font-weight:700;direction:ltr;pointer-events:none}.capacity-dots{display:flex;gap:4px}.capacity-dots i{width:7px;height:7px;border:1px solid #f6feeaa6;border-radius:2px;background:#1e432f58}.capacity-dots i.full{background:#d0ec63;border-color:#eeffa4;box-shadow:0 0 6px #cfed5d77}
.sealed{position:absolute;bottom:19%;left:6%;width:14%;z-index:-1}.sealed-box{height:var(--sh);margin-top:-3px;max-width:76px;min-width:31px;position:relative;background:linear-gradient(100deg,#047651,#055638);border-radius:3px 4px 7px 7px;border:1px solid #8cd94975;transform:rotate(var(--sr));box-shadow:2px 3px 5px #203c286f;animation:stack-in .33s both}.sealed-box:before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;height:6px;border-radius:3px;background:linear-gradient(#35cc87,#0a8f5c);border-top:1px solid #a4eb80}.sealed-box img{position:absolute;width:50%;top:30%;left:25%;filter:brightness(0) invert(1);opacity:.8}
.sealing-copy{position:absolute;z-index:6;bottom:19px;width:min(58%,230px);height:calc(100% - 23px);animation:send-box .37s ease-in forwards;pointer-events:none;transform-origin:bottom center}.sealing-copy .crate-image{inset:0}.sealing-copy .lid{position:absolute;z-index:4;top:-4%;left:0;width:100%;height:34%;background:linear-gradient(180deg,#4be28c,#16a965 57%,#086b48 59%,#087453);clip-path:polygon(12% 0,88% 0,100% 75%,99% 100%,1% 100%,0 75%);animation:slam .16s cubic-bezier(.2,.8,.2,1.25) both;border-radius:8px}.crate.new-crate{animation:new-crate .37s cubic-bezier(.15,.65,.26,1.1) both}.hint,.toast{position:absolute;z-index:6;pointer-events:none;bottom:26%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;background:#0a4a40ed;border:1px solid #e9f6d7a8;color:#fffbed;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;box-shadow:0 6px 18px #112c2640}.hint svg{width:15px;height:15px;color:#daeb75}.toast{visibility:hidden;opacity:0;background:#e8f6a5;color:#174e36;border-color:#f6ffe0;padding:8px 13px;font-weight:800;transition:opacity .17s}.toast.active{visibility:visible;opacity:1}.countdown{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#153b32a8;color:#fffbe6;backdrop-filter:blur(3px);gap:6px}.countdown span{font-size:18px;font-weight:800}.countdown b{font-size:130px;line-height:1.03;color:#e4f7a3;text-shadow:0 6px #065940;font-weight:900;animation:count-pop .5s both}.desktop-side{direction:rtl;align-self:center;color:var(--deep)}.desktop-side .brand{margin-bottom:29px}.desktop-side h2{font-size:clamp(62px,7vw,93px);line-height:.84;letter-spacing:-.08em;margin:22px 0;font-weight:900}.desktop-side p{font-size:16px;line-height:1.6;color:var(--body);font-weight:600;margin:18px 0 26px}.side-progress{display:grid;grid-template-columns:1fr auto;gap:7px;color:var(--deep);font-size:14px;font-weight:700;padding:13px;border:1px solid #08484a26;border-radius:14px;background:#f8f9ed}.side-progress>div{grid-column:span 2;overflow:hidden;border-radius:3px;height:5px;background:#d9e7cf}.side-progress>div>i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:right;background:linear-gradient(90deg,var(--lime),var(--green));transition:transform .25s}.side-tip{display:flex;align-items:center;gap:7px;color:#365f51;margin-top:17px;font-size:12px;font-weight:700}.side-tip svg{width:17px;height:17px}
.result-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:22px 46px;align-items:center;min-height:calc(100dvh - 93px);padding:22px 0 calc(25px + var(--safe-b));align-content:center}.result-copy h2{font-size:clamp(55px,7.9vw,105px);line-height:.94;letter-spacing:-.08em;color:var(--deep);font-weight:900;margin:16px 0 9px}.result-copy p{font-size:16px;font-weight:600;color:var(--body);margin:0 0 16px}.summary{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}.summary div{border:1px solid #0a4d4127;border-radius:14px;background:#fffdf2;padding:9px 5px;display:grid;justify-items:center;gap:5px;font-size:11px;font-weight:700;color:#356052;text-align:center}.summary strong{color:var(--deep);font-size:clamp(19px,4.7vw,35px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.05em}.summary svg{width:17px;height:17px;color:#087963}.compare{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:relative;grid-column:2;grid-row:1/span 2}.compare figure{margin:0;position:relative;border-radius:17px;overflow:hidden;border:2px solid #fff9e7;box-shadow:0 8px 16px var(--shadow);background:#c5ad8a}.comparison-room{position:relative;width:100%;aspect-ratio:.78;background:url(assets/room.webp) center / cover;isolation:isolate;overflow:hidden}.mini-prop{filter:drop-shadow(0 2px 2px #3621165c);pointer-events:none}.compare figcaption{position:absolute;z-index:50;bottom:6px;left:50%;transform:translateX(-50%);padding:3px 12px;background:#fff9e8;border-radius:8px;color:var(--deep);font-weight:800;font-size:12px;white-space:nowrap}.compare figure:last-child figcaption{color:white;background:var(--forest)}.compare-arrow{width:30px;height:30px;color:var(--deep);background:#cfeb80;display:grid;place-items:center;border-radius:50%;border:2px solid #f8f5eb;position:absolute;z-index:60;top:50%;left:50%;transform:translate(-50%,-50%)}.compare-arrow svg{width:17px;height:17px}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-actions p{grid-column:span 2;margin:0 0 2px;font-size:17px;color:var(--deep);font-weight:800;line-height:1.45}.result-actions b{white-space:nowrap;color:#006c52;font-weight:900}.result-actions .button{font-size:14px;padding:9px 10px;min-height:46px}.result-actions .button svg{width:17px;height:17px}.result .mast{height:calc(68px + var(--safe-t))}
.panel{border:1px solid #a5c9a7;color:var(--deep);background:#f8f7ea;border-radius:24px;padding:24px;width:min(calc(100% - 28px),420px);box-shadow:0 22px 100px #0c352a75;max-height:calc(100dvh - 28px)}.panel::backdrop{background:#142d2580;backdrop-filter:blur(6px)}.panel h2{font-size:35px;font-weight:900;letter-spacing:-.06em;line-height:1.05;margin:13px 0 10px}.panel p{margin:8px 0 19px;color:var(--body);line-height:1.6}.close-panel{position:absolute;left:12px;top:12px;width:39px;height:39px;border-radius:13px}.steps{display:grid;gap:8px;padding:0;list-style:none;margin:17px 0}.steps li{background:#fffdf3;border:1px solid #d4e2cb;border-radius:14px;padding:10px;display:flex;gap:10px;align-items:center}.steps li>b{background:#d7ef9e;color:var(--deep);width:33px;height:33px;border-radius:11px;display:grid;place-items:center;font-weight:900;flex:none}.steps strong,.steps span{display:block}.steps strong{font-weight:800;margin-bottom:3px}.steps span{font-size:12px;line-height:1.45;color:var(--body)}.panel>.button{width:100%;margin-top:9px}
@keyframes bob{0%,100%{transform:translateY(1px) rotate(var(--tilt))}50%{transform:translateY(-13px) rotate(calc(var(--tilt) + 9deg))}}@keyframes breathe{0%,100%{opacity:.65}50%{opacity:1}}@keyframes reveal{from{opacity:0;transform:translate(-50%,-46%) rotate(var(--angle)) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1)}}@keyframes points{0%{opacity:0;transform:translate(-50%,5%) scale(.72)}19%{opacity:1;transform:translate(-50%,-52%) scale(1.08)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%) scale(.9)}}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.25);opacity:.95}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.6);opacity:0}}@keyframes in-box{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}@keyframes stack-in{from{opacity:0;translate:16px -10px}to{opacity:1;translate:0 0}}@keyframes send-box{0%,33%{transform:none;opacity:1}100%{transform:translate(-72%,16%) rotate(-13deg) scale(.39);opacity:0}}@keyframes slam{from{transform:translateY(-35%) rotate(-13deg)}to{transform:none}}@keyframes new-crate{from{opacity:.4;transform:translateX(82%) rotate(8deg) scale(.82)}to{opacity:1;transform:none}}@keyframes count-pop{from{opacity:.5;transform:scale(.77)}45%{transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@media(max-width:740px){
 .home,.result{max-width:520px;padding-inline:clamp(15px,5vw,26px)}
 .mast{height:calc(60px + var(--safe-t))}.brand{width:119px}.icon-btn{height:42px;width:42px;border-radius:13px}
 .welcome{display:flex;flex-direction:column;justify-content:center;gap:13px;min-height:calc(100dvh - 60px - var(--safe-t));padding-top:11px;padding-bottom:calc(14px + var(--safe-b))}
 .welcome-copy{display:flex;flex-direction:column;align-items:center;text-align:center;display:contents}.welcome-copy .eyebrow{font-size:11px;padding:5px 9px;order:1}.welcome-copy h1{font-size:clamp(49px,13.4vw,78px);margin:0;order:2;direction:rtl;line-height:1.01;white-space:nowrap}.welcome-copy h1 br{display:none}.welcome-copy h1 em{margin-right:.11em;margin-top:0}.lead{order:3;margin:0;font-size:17px;z-index:1}.welcome-detail{display:none}.welcome-best{order:5;margin:0 auto;font-size:11px}.welcome-best svg{width:14px;height:14px}.preview-wrap{order:4;width:100%}
 .hero-art{height:clamp(208px,46dvh,440px);min-height:0;max-height:none;border-radius:23px;background-position:center 43%}.hero-sticker{top:12px;right:11px}.hero-caption{display:none}.hero-crate{width:65%;left:18%;top:62%}.hero-crate.hero-back{width:51%;top:49%;left:14%}.hero-float{top:30%}.hero-float:nth-of-type(3){top:41%}.hero-float:nth-of-type(4){top:34%}.home-pattern{display:none}.actions{order:6;z-index:2;width:100%;flex-wrap:nowrap;gap:7px}.actions .primary{flex:1.45}.actions .quiet{flex:1;font-size:14px;padding-inline:5px}
 .play{display:flex;height:100dvh}.game-shell{height:100%;max-width:520px;border:none;border-radius:0;box-shadow:none}.desktop-side{display:none}.hud{min-height:62px;gap:5px;padding-inline:7px}.hud .icon-btn{width:42px;height:42px}.time-meter{min-width:88px;padding-inline:8px}.time-meter strong{font-size:20px}
 .result-grid{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:calc(100dvh - 60px - var(--safe-t));padding:12px 0 calc(17px + var(--safe-b))}.result .mast{height:calc(56px + var(--safe-t))}.result-copy{width:100%;text-align:center}.result-copy .eyebrow{padding:4px 9px;font-size:11px}.result-copy h2{font-size:clamp(40px,12.5vw,65px);margin:9px 0 5px}.result-copy p{font-size:13px;margin:0 0 10px}.summary{gap:5px}.summary div{padding:6px 4px;gap:3px;border-radius:11px}.summary svg{width:14px;height:14px}.summary strong{font-size:25px}.compare{width:100%}.comparison-room{aspect-ratio:auto;height:clamp(123px,23dvh,220px)}.result-actions{width:100%;gap:7px}.result-actions p{text-align:center;font-size:15px;line-height:1.38}.result-actions .button{min-height:44px}
}
@media(max-width:360px){.hud{grid-template-columns:37px 1fr auto 1fr 37px}.hud .icon-btn{height:40px;width:37px}.time-meter{min-width:75px;padding-inline:6px}.score-meter strong{font-size:19px}.button{padding-inline:10px}.welcome-copy h1{font-size:47px}}
@media (max-height:580px) and (max-width:740px){.hero-art{height:clamp(145px,37dvh,220px)}.welcome{gap:9px}.packing-zone{min-height:98px}.room-label{top:7px;right:7px}.hint,.toast{bottom:29%}.countdown b{font-size:88px}}
@media (max-height:545px) and (min-width:741px){.game-shell{min-width:360px}.play{grid-template-columns:minmax(335px,435px) minmax(195px,250px);gap:38px}.packing-zone{max-height:117px}.hud{min-height:53px}.desktop-side .brand{margin-bottom:16px}.desktop-side h2{font-size:55px;margin:13px 0}.desktop-side p{margin:12px 0 17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.point-fx{animation-duration:.42s!important}.particle{display:none}}
/* Keep the crate fully visible in the cover art and the hint away from the objects. */
.hero-crate{width:65%;left:19%;top:57%}.hero-crate.hero-back{top:44%}
.hint{bottom:auto;top:12px;left:12px;transform:none}
@media(max-width:740px){.hero-crate{width:63%;left:20%;top:56%}.hero-crate.hero-back{top:43%}.hint{top:12px;left:10px}}
@media(max-height:545px) and (min-width:741px){.play{grid-template-columns:minmax(335px,435px) minmax(195px,250px);gap:38px}.game-shell{min-width:335px}.packing-zone{max-height:117px}.hud{min-height:53px}.desktop-side .brand{margin-bottom:16px}.desktop-side h2{font-size:55px;margin:13px 0}.desktop-side p{margin:12px 0 17px}}

/* The product photo is rendered twice; the clipped near wall occludes packed items. */
.belt{position:absolute;z-index:1;top:0;bottom:calc(23px + max(6px,var(--safe-b)));left:50%;width:min(58%,230px);transform:translateX(-50%);pointer-events:none;--step:109%;--belt-ms:450ms}
.belt-crate,.crate.belt-crate{position:absolute;inset:0;width:100%;height:100%;isolation:isolate;transform-origin:center 96%}
.belt .crate-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.belt .crate-back{z-index:1;filter:drop-shadow(0 9px 5px #14281375)}
.belt .crate-front{z-index:3;filter:none;clip-path:polygon(0 25%,4% 33%,9% 33.5%,91% 33.5%,96% 33%,100% 25%,100% 100%,0 100%)}
.belt .crate-logo{z-index:4}
.belt .crate-contents{inset:0 9% 0;overflow:visible;z-index:2}
.belt .crate-contents img{width:39%;height:auto;max-height:62%;bottom:var(--cb);left:var(--cx);translate:-50% 0;rotate:var(--cr);transform:none;object-fit:contain;object-position:center;animation:none}
.belt .crate-glow{z-index:0}
.spare{transform:translate3d(var(--step),0,0) scale(.82);filter:brightness(.85)}
.parked{transform:translate3d(calc(-1 * var(--step)),0,0) scale(.82);filter:brightness(.79)}
.belt-crate .lid{position:absolute;z-index:5;top:-2%;left:-1%;width:102%;height:43%;border-radius:15px 15px 12px 12px;clip-path:polygon(9% 0,91% 0,100% 74%,99% 96%,1% 96%,0 74%);background:linear-gradient(180deg,#62b047 0%,#459536 15%,#42942c 22%,#337c2b 68%,#62b648 74%,#348d29 80%,#278124 95%);box-shadow:inset 0 3px 3px #bbed6fa6,inset 0 -4px 3px #15521da0;transform-origin:center 9%}
.belt-crate .lid::before{content:'';position:absolute;inset:14% 7% 29%;border-radius:14px;border:2px solid #9cde6480;box-shadow:inset 0 1px 5px #1d6a2840;background:repeating-linear-gradient(90deg,transparent 0 26px,#2476293d 26px 29px,transparent 30px 49px)}
.outgoing{z-index:6}
.outgoing{--landing-time:175ms;--lid-time:125ms}
.outgoing .lid{opacity:0;animation:lid-arrive var(--lid-time) cubic-bezier(.15,.8,.21,1.23) var(--landing-time) forwards}
.outgoing .crate-contents{animation:conceal-packed-items var(--lid-time) steps(1,end) var(--landing-time) forwards}
.outgoing{animation:belt-out var(--belt-ms) cubic-bezier(.58,.03,.22,.99) 300ms both}
.belt .active-crate.arriving{animation:belt-arrive var(--belt-ms) cubic-bezier(.58,.03,.22,.99) 300ms both}
.spare.advance{animation:belt-spare var(--belt-ms) cubic-bezier(.58,.03,.22,.99) 300ms both}
.parked.depart{animation:belt-retire var(--belt-ms) cubic-bezier(.58,.03,.22,.99) 300ms both}
.belt-rail{position:absolute;z-index:-1;bottom:19px;left:-2%;width:104%;height:18%;background:linear-gradient(#d0bd8c24,#24362d77),repeating-linear-gradient(90deg,#6c6e52a8 0 8px,#ad9b6b91 9px 12px,#393a2caa 13px 15px);border-top:2px solid #f2d7aa66;border-bottom:3px solid #213b3599;box-shadow:0 3px 9px #192e2b66;opacity:.83}
.sliding .belt-rail{animation:rail-move 380ms linear 300ms both}
@keyframes lid-arrive{from{opacity:.2;transform:translateY(-47%) rotateX(58deg) rotateZ(-7deg)}to{opacity:1;transform:none}}
@keyframes conceal-packed-items{to{visibility:hidden}}
@keyframes belt-out{from{transform:none;filter:none}to{transform:translate3d(calc(-1 * var(--step)),0,0) scale(.82);filter:brightness(.79)}}
@keyframes belt-arrive{from{transform:translate3d(var(--step),0,0) scale(.82);filter:brightness(.85)}to{transform:none;filter:none}}
@keyframes belt-spare{from{transform:translate3d(calc(2 * var(--step)),0,0) scale(.82)}to{transform:translate3d(var(--step),0,0) scale(.82)}}
@keyframes belt-retire{from{transform:translate3d(calc(-1 * var(--step)),0,0) scale(.82)}to{transform:translate3d(calc(-2 * var(--step)),0,0) scale(.82)}}
@keyframes rail-move{to{background-position:0 center,-90px center}}
@media(prefers-reduced-motion:reduce){.belt *, .belt-rail{animation-delay:0ms!important}}

/* Keep every object's tap center clear of the dock, even in short portrait viewports. */
.objects{bottom:max(22.5%,105px)}
.room-scene .objects{pointer-events:none}
.objects .prop{pointer-events:auto}
@media(max-width:360px){.hint{font-size:10px;padding:6px 8px}.room-label{font-size:10px;padding:6px 8px}}

/* Item foot positions follow the room art, even when the mobile viewport changes. */
.room-scene,.comparison-room{background-size:var(--bg-width,100%) var(--bg-height,100%);background-position:var(--bg-x,0px) var(--bg-y,0px);background-repeat:no-repeat}
.room-scene .objects{inset:0}
.prop,.mini-prop{height:var(--height);aspect-ratio:auto;min-width:0;min-height:0;transform-origin:50% 78%;margin:0}
.prop::before{content:'';position:absolute;display:block;width:max(100%,43px);height:max(100%,43px);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:35%;touch-action:none}
@media (max-width:740px), (any-pointer:coarse){
 .objects .prop{
  /* Keep the entire rotated touch target away from the system swipe zones. */
  left:clamp(
   calc(max(28px,env(safe-area-inset-left,0px)) + var(--touch-left)),
   var(--x),
   calc(100% - max(28px,env(safe-area-inset-right,0px)) - var(--touch-right))
  );
 }
}
.drag-ghost{height:var(--h,var(--w))}
.hint{max-width:47%;white-space:normal;text-align:center}
.comparison-room .mini-prop{filter:drop-shadow(0 1px 1px #36211643)}

.toast{top:12px;left:12px;bottom:auto;transform:none;max-width:49%;white-space:normal;text-align:center;line-height:1.3}
@media(max-width:360px){.toast{left:9px;font-size:11px}}
.room-scene,.comparison-room{background-image:var(--room-art,url(assets/room.webp))}
.room-label b{padding-inline-start:6px;margin-inline-start:1px;border-inline-start:1px solid #08484a2e;font-size:10px}
.prop.selected{outline:0}.prop:focus-visible:not(.dragging){outline:2px solid #027951;outline-offset:3px;border-radius:10px}.prop.dragging,.prop.dragging:focus-visible{outline:0;filter:drop-shadow(1px 4px 3px #281a0e43)}
.summary{grid-template-columns:repeat(4,minmax(0,1fr))}
.compare-group{grid-column:2;grid-row:1/span 2;width:100%}.compare-rooms{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.compare-rooms button{padding:6px 10px;min-height:36px;border:1px solid #0648382b;border-radius:12px;background:#fffdf5;font-size:12px;font-weight:800;color:var(--deep)}
.compare-rooms button[aria-pressed="true"]{background:var(--forest);color:white;border-color:var(--forest)}
@media(max-width:740px){.compare-rooms button{min-height:42px;flex:1 1 auto;font-size:11px;padding:5px 7px}.summary div{font-size:9px}.summary strong{font-size:22px}}