:root{color:#f4e4c8;font-synthesis:none;background:#302b24;font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(#62513b,#27251f);place-items:center;display:grid}.stage{--unit:45px;background:#a77e53;width:min(100vw,56.25dvh);height:100dvh;position:relative;overflow:hidden;box-shadow:0 0 100px #0008}canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.hud{pointer-events:none;position:absolute;inset:0}.hud>[data-x]{position:absolute;transform:translate(-50%,-50%)}button{font:inherit;color:#f6e4c3;border-radius:calc(var(--unit)*.17);cursor:pointer;touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:linear-gradient(#87613f,#644329);border:2px solid #c39a65;box-shadow:0 3px #422e20,inset 0 0 0 2px #775137}button:active{filter:brightness(1.25)}button:disabled{opacity:.35;cursor:default}.hud>button{width:max(40px,calc(var(--unit)*.91));height:max(42px,calc(var(--unit)*.91));font-size:calc(var(--unit)*.58);line-height:1}#selection{gap:calc(var(--unit)*.17);white-space:nowrap;display:flex}#selection button{font-size:calc(var(--unit)*.25);min-height:36px;padding:4px 13px}#instruction{width:calc(var(--unit)*6.4);text-align:center;color:#f0dfc3}#instruction p{font-size:clamp(10px,calc(var(--unit)*.27),15px);margin:0 0 5px;line-height:1.3}#instruction small{font-size:clamp(8px,calc(var(--unit)*.2),12px);color:#ccb793;display:block}#overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#2c251cb8;justify-content:center;align-items:center;padding:20px;position:absolute;inset:0}#overlay:not([hidden]){display:flex}.modal{text-align:center;color:#503b28;background:#ead6ad;border:3px solid #b38a54;border-radius:15px;width:100%;padding:30px 20px;box-shadow:0 8px 30px #0005}.modal>span{color:#997546;font-size:40px}.modal h1{font-size:28px}.modal p{font-size:14px;line-height:1.5}.modal button{margin-top:15px;padding:12px 20px}[hidden]{display:none!important}@media (width<=420px){.stage{width:100vw}#selection button{min-height:38px;padding:4px 10px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}#placement-feedback{z-index:3;pointer-events:none;color:#fff0e1;white-space:nowrap;text-shadow:0 1px #24101b;background:#5b2625f2;border:1px solid #ffa799;border-radius:7px;padding:7px 11px;font-size:12px;font-weight:700;position:absolute;transform:translate(-50%);box-shadow:0 3px 9px #160d2099}#overlay{z-index:5}#case-transition{z-index:10;pointer-events:auto;position:absolute;inset:0;overflow:hidden}.case-door{background:repeating-linear-gradient(0deg,#24151c20 0 2px,#0000 2px 5px),repeating-linear-gradient(90deg,#0000 0 59px,#160e172e 60px 63px),radial-gradient(at 50% 35%,#90572f,#412623 80%);border:5px solid #bd8948;width:50.5%;transition:transform .56s cubic-bezier(.65,0,.25,1);position:absolute;top:0;bottom:0;box-shadow:inset 0 0 0 5px #44271f,inset 0 0 0 8px #daac65,inset 0 0 65px #170f1bc9,0 0 30px #0e091be0}.case-door:before,.case-door:after{content:"";background:linear-gradient(90deg,#352124,#65402b,#302023);border:2px solid #c18a44;height:12%;position:absolute;left:5%;right:5%;box-shadow:inset 0 3px #e3b47177,0 5px 9px #180e19a6}.case-door:before{top:15%}.case-door:after{bottom:15%}.case-door-left{left:0;transform:translate(-110%)}.case-door-right{right:0;transform:translate(110%)}.case-door i{background:linear-gradient(135deg,#f5d383,#a56c2b 50%,#e0b362);border:3px solid #e2b45d;border-radius:4px;width:21%;height:7%;position:absolute;top:47%;box-shadow:0 4px #362123,inset 0 0 0 3px #815122}.case-door-left i{right:3%}.case-door-right i{left:3%}.order-seal{text-align:center;color:#452a20;opacity:0;background:linear-gradient(135deg,#ffe2a5,#d9ac70);border:3px double #80512c;padding:18px 8px;transition:opacity .18s,transform .25s;position:absolute;top:34%;left:12%;right:12%;transform:translateY(8px);box-shadow:0 5px 20px #180f1bae}.order-seal span,.order-seal small{letter-spacing:1px;font-size:11px;display:block}.order-seal strong{margin-top:10px;font-size:26px;display:block}.order-seal p{margin:8px 0 14px;font-size:15px}.closed .case-door{transform:translate(0)}.closed .order-seal{opacity:1;transition-delay:.48s;transform:translateY(0)}.order-complete #scene{animation:.85s ease-out packed-glow}@keyframes packed-glow{35%{filter:brightness(1.24)saturate(1.12)}to{filter:none}}@media (prefers-reduced-motion:reduce){.case-door,.order-seal{transition:none!important}.order-complete #scene{animation:none}}:root{color:#fff3da;background:#191d30;font-family:Trebuchet MS,ui-rounded,system-ui,sans-serif}body{background:repeating-linear-gradient(135deg,#23273a 0 38px,#272c41 39px 41px,#23273a 42px 78px)}.stage{background:#233e54;box-shadow:0 0 0 4px #111725,0 16px 70px #10132299}button{color:#fff6dd;text-shadow:1px 2px #242035;background:#df6a62;border:3px solid #151c2e;border-radius:10px;font-weight:900;transition:transform .1s,filter .1s;box-shadow:0 4px #161c2d,inset 0 3px #ffa57c,inset 0 -4px #a43f57}button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}.hud>button:hover:not(:disabled){transform:translate(-50%,calc(-50% - 1px))}button:active:not(:disabled){filter:none;box-shadow:0 1px #161c2d,inset 0 2px #ffa57c}button:focus-visible{outline-offset:3px;outline:3px solid #a5ffe0}#hint,#rotate{background:#67bcb3;box-shadow:0 4px #161c2d,inset 0 3px #bef7db,inset 0 -4px #398695}#previous,#next{background:#59506e;box-shadow:0 4px #161c2d,inset 0 3px #a189a6,inset 0 -4px #38344d}#instruction{color:#fff1d5;text-shadow:1px 1px #1d1b2c}#instruction p{font-weight:700}#instruction small{color:#d8c8d9}#overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111a3299}.modal{color:#25263c;background:#ffebbb;border:4px solid #192036;border-radius:18px;padding:26px 20px;box-shadow:0 9px #13182b,inset 0 5px #fff7df}.modal>span{color:#d15476;text-shadow:2px 3px #f7bf6e;display:inline-block}.modal h1{letter-spacing:-1px;font-weight:900}.modal p{font-weight:600}#placement-feedback{color:#fff9e3;text-shadow:0 1px #6f2747;background:#dc586b;border:2px solid #141d30;box-shadow:0 3px #151b2a}#placement-feedback[data-state=valid]{background:#357c75;border-color:#a5f4d4}#placement-feedback[data-state=outside]{background:#a35b43;border-color:#ffe2a0}.case-door{background:repeating-linear-gradient(90deg,#0000 0 72px,#201d3544 73px 76px),#8c4d65;border-color:#171e31;box-shadow:inset 0 0 0 5px #f28273,inset 0 0 0 9px #171e31,0 0 0 3px #171e31}.case-door:before,.case-door:after{background:#df716a;border:3px solid #171e31;box-shadow:inset 0 5px #ffa17a,0 5px #171e31}.case-door i{background:#f0c366;border:3px solid #171e31;box-shadow:inset 0 4px #ffe9a6,0 4px #171e31}.order-seal{color:#25263c;background:#ffebbb;border:3px solid #171e31;border-radius:9px;box-shadow:0 6px #171e31}.order-seal strong{font-weight:900}.order-seal span{color:#a94469;font-weight:900}@media (prefers-reduced-motion:reduce){button{transition:none}}#tutorial-hand{z-index:3;pointer-events:none;font-size:calc(var(--unit)*.7);color:#fff0cb;text-shadow:2px 3px #172439,-1px -1px #172439;transform-origin:0 0;position:absolute}#tutorial-hand[data-gesture=drag]{animation:2.5s ease-in-out infinite teach-drag}#tutorial-hand[data-gesture=tap]{animation:1.1s ease-in-out infinite teach-tap}@keyframes teach-drag{0%,12%{opacity:0;transform:translate(0)scale(1)}20%{opacity:1;transform:translate(0)scale(.9)}70%,83%{opacity:1;transform:translate(var(--travel-x),var(--travel-y)) scale(.95)}95%,to{opacity:0;transform:translate(var(--travel-x),var(--travel-y))}}@keyframes teach-tap{50%{transform:translateY(6px)scale(.85)}}.tutorial-focus{outline-offset:4px;outline:3px solid #fff09b;animation:1s ease-in-out infinite tutorial-glow}@keyframes tutorial-glow{50%{filter:brightness(1.3)}}#magic-flash{z-index:4;pointer-events:none;opacity:0;background:radial-gradient(at 50% 40%,#fff9cce0 0%,#a8ffe666 25%,#c78eff22 50%,#0000 72%);position:absolute;inset:0}#magic-flash.burst{animation:.38s ease-out magic-impact}@keyframes magic-impact{0%{opacity:0;transform:scale(.6)}12%{opacity:.85}to{opacity:0;transform:scale(1.3)}}@media (prefers-reduced-motion:reduce){#tutorial-hand{animation:none!important}.tutorial-focus{animation:none}.burst{animation:none!important}}#music{background:#7973a7;box-shadow:0 4px #161c2d,inset 0 3px #b6aed8,inset 0 -4px #504a78}#music[aria-pressed=false]{color:#c8c4d9;background:#48465f}.modal #sfx{background:#59506e;margin:16px auto 0;padding:9px 16px;font-size:14px;display:block}