*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#b8e8fb;color:#fff;font-family:system-ui,sans-serif;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 50% 42%,#e7f9ff,#b8e8fb 65%,#97d6f2)}main{height:100dvh;max-width:850px;margin:auto;display:flex;flex-direction:column;padding:max(22px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom))}.sorting{width:min(100%,400px);margin:auto;z-index:1}#boxes{display:flex;gap:18px;padding:0 8px}.box{flex:1;min-width:0;background:var(--color);border-radius:17px;padding:17px 12px 15px;box-shadow:inset 0 4px 0 #ffffff70,inset 0 -6px 0 #0002,0 7px 0 #528eaa25;transition:background .2s}.box.empty{opacity:.35}.sockets{display:flex;justify-content:space-around;gap:9px}.socket{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#172c4370;box-shadow:inset 0 3px 4px #12213170,0 2px 0 #ffffff65;display:grid;place-items:center}.filled{background:var(--color);border:3px solid #ffffff65;box-shadow:inset 0 -3px 0 #0003,0 2px 3px #18334566}.filled:after{content:"";width:15px;height:15px;background:#243b5480;clip-path:polygon(36% 0,64% 0,64% 36%,100% 36%,100% 64%,64% 64%,64% 100%,36% 100%,36% 64%,0 64%,0 36%,36% 36%);transform:rotate(15deg)}#buffer{display:flex;justify-content:center;gap:17px;padding:14px 0 0}#buffer .socket{width:32px;height:32px;background-color:#83b5ce}#buffer .filled{background:var(--color)}#stage{position:relative;flex:1;min-height:100px;margin:0 -18px}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.tools{display:flex;justify-content:center;gap:18px;z-index:1}button,.tools a{touch-action:manipulation;cursor:pointer;color:#467896;border:0;background:#edfaff;border-radius:16px;width:49px;height:46px;display:grid;place-items:center;font:28px system-ui;text-decoration:none;box-shadow:0 4px 0 #79b4d066,inset 0 2px 0 #fff}button:active{transform:translateY(2px)}button:focus-visible,a:focus-visible{outline:3px solid #3679d5;outline-offset:4px}dialog{border:0;border-radius:30px;background:#eefbff;padding:28px 48px;box-shadow:0 15px 60px #28608555}dialog::backdrop{background:#5090b34d;backdrop-filter:blur(5px)}#result{font-size:76px;text-align:center;color:#20c677}dialog button{margin:15px auto 0;background:#29d380;color:white;width:80px}@media(max-height:550px){main{padding-top:10px;padding-bottom:10px}.sorting{width:300px}#boxes{gap:12px}.box{padding:8px 10px}.socket{width:26px;height:26px}#buffer{padding-top:9px;gap:13px}#buffer .socket{width:24px;height:24px}.tools{position:absolute;right:16px;bottom:15px;flex-direction:column;gap:10px}.tools button,.tools a{width:40px;height:38px;font-size:25px}}
.box{position:relative;perspective:500px;transform-origin:50% 70%}.lid{position:absolute;inset:0;border-radius:17px;background:var(--color);box-shadow:inset 0 3px 0 #fff8,inset 0 -5px 0 #0002;transform-origin:50% 0;transform:rotateX(-105deg);opacity:0;z-index:2}.lid:after{content:'✓';display:grid;place-items:center;height:100%;font-size:32px;color:#fff9}.closing{animation:box-out .38s ease-in forwards}.closing .lid{animation:lid-close .16s ease-out forwards}.arriving{animation:box-in .22s cubic-bezier(.2,1.5,.5,1)}.impact{animation:impact .24s ease-out}.flying-screw{position:fixed;left:0;top:0;width:31px;height:31px;box-shadow:0 7px 9px #28536e40}#flights{position:fixed;inset:0;pointer-events:none;z-index:8}.sorting{transition:opacity .2s,transform .3s}#journey{display:none;position:fixed;inset:0;pointer-events:none}#path{position:absolute;width:100%;height:100%;overflow:visible}#path path{fill:none;stroke:#ffffff95;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 15}.model-stop{position:fixed;transform:translate(-50%,-50%);border-radius:50%;background:transparent;box-shadow:none;pointer-events:auto}.model-stop:active{transform:translate(-50%,-50%) scale(.96)}.model-stop span{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:#eefdff;color:#5a9ab1;box-shadow:0 3px 0 #589cba30;border-radius:50%;width:28px;height:28px;font-size:18px;display:grid;place-items:center}.model-stop.current span{background:#24dba0;color:white;box-shadow:0 0 0 6px #ffffff70,0 4px 0 #12977a50}.model-stop.current{border:2px solid #ffffff55}#previous-path,#following-path{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));pointer-events:auto;width:42px}#previous-path{left:22px}#following-path{right:22px}button:disabled{opacity:.3;pointer-events:none}body[data-mode=menu] #journey{display:block}body[data-mode=menu] .sorting,body[data-mode=enter] .sorting{opacity:0;pointer-events:none;transform:translateY(-20px)}body[data-mode=menu] .tools button,body[data-mode=enter] .tools{visibility:hidden}body[data-mode=menu] canvas{cursor:default}body[data-mode=enter] #journey{display:none}
@keyframes impact{35%{transform:scale(1.1,.9)}70%{transform:scale(.96,1.06)}100%{transform:scale(1)}}@keyframes lid-close{0%{opacity:1;transform:rotateX(-105deg)}100%{opacity:1;transform:rotateX(0)}}@keyframes box-out{0%,40%{transform:scale(1)}58%{transform:scale(1.08,.94)}100%{transform:translateY(-100px) rotate(-8deg) scale(.8);opacity:0}}@keyframes box-in{from{transform:translateY(-80px) scale(.8);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.closing,.arriving,.impact,.closing .lid{animation-duration:.01s}.sorting{transition:none}}
#stage{z-index:1}#path{z-index:0}.model-stop,#previous-path,#following-path{z-index:2}.tools{z-index:3}body[data-mode=menu] .tools{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%)}body[data-mode=menu] .tools button{display:none}
#journey{z-index:2}#path{position:fixed;inset:0;display:none;pointer-events:none}body[data-mode=menu] #path{display:block}

body[data-mode=menu] .tools{right:auto;width:49px}
/* Sequential journey and attempt inventory */
#menu-actions{display:none;position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4;text-align:center;width:260px}body[data-mode=menu] #menu-actions{display:block}#play{width:210px;height:56px;margin:12px auto 0;background:linear-gradient(#61e75b,#20bb48);color:white;font-weight:800;box-shadow:0 5px 0 #169837,inset 0 2px 0 #b6ffa0}#wallet{position:fixed;bottom:calc(100dvh - 70px);left:50%;transform:translateX(-50%);background:#ffffff88;border-radius:22px;padding:8px 20px;color:#557b89;font-size:22px;font-weight:bold}.shop{display:flex;justify-content:center;gap:20px}.shop button{width:85px;height:58px;font-size:22px;background:#fff1c1}.shop small{font-size:14px;display:block}#rewards{height:28px;font-size:24px}body[data-mode=menu] .tools,body[data-mode=return] .tools,body[data-mode=enter] .tools{display:none}body:not([data-mode=play]) #level-controls{display:none}body[data-mode=return] .sorting{opacity:0;pointer-events:none}body[data-mode=return] #path,body[data-mode=return] #journey{display:block}.model-stop{pointer-events:none}.tools button{position:relative;width:58px;height:54px;font-size:30px;background:#ffefc3}.tools small,#extra small{position:absolute;right:-4px;bottom:-5px;border-radius:12px;background:#f75d78;color:white;font:bold 15px system-ui;padding:2px 7px}.tools button:disabled,#extra:disabled{filter:grayscale(1);opacity:.4}.tools .selected{outline:4px solid #ffc322;animation:impact .6s infinite}#level-controls{position:absolute;left:12px;bottom:85px;display:flex;flex-direction:column;gap:10px;z-index:3}#level-controls button{width:34px;height:34px;font-size:22px}.sorting{position:relative;width:min(100%,520px)}#boxes{gap:8px;padding-right:40px}.box{padding:14px 6px}.sockets{gap:4px}.socket{width:clamp(16px,5vw,32px);height:clamp(16px,5vw,32px)}#extra{position:absolute;right:0;top:12px;width:32px;height:40px;font-size:28px}#buffer{gap:10px}#buffer .socket{width:27px;height:27px}#side{position:absolute;left:0;top:120px;background:#f3c266;border-radius:12px;padding:8px;display:flex;max-width:100px;flex-wrap:wrap;gap:5px}#side[hidden]{display:none}#side .socket{width:23px;height:23px}#level-keys{position:absolute;right:0;top:115px;color:#517587;font-weight:800}body:not([data-mode=play]) .sorting{visibility:hidden}body[data-mode=menu] #stage,body[data-mode=return] #stage{margin-bottom:170px}#path path{stroke-width:10;stroke-dasharray:none;stroke:#ffffffa0}@media(max-height:550px){#menu-actions{left:auto;right:18px;transform:none;width:190px}#play{width:170px}.shop{gap:10px}.shop button{width:70px}#wallet{left:auto;right:18px;top:14px;bottom:auto;transform:none}body[data-mode=menu] #stage,body[data-mode=return] #stage{margin-bottom:0;margin-right:190px}.tools{right:15px;bottom:15px;gap:8px}.tools button{width:45px;height:42px;font-size:24px}#level-controls{left:12px;bottom:15px}.sorting{width:390px;margin-left:auto;margin-right:auto}#side{top:90px}#level-keys{top:90px}}
@media(max-height:550px){body[data-mode=play] .tools{position:relative;right:auto;bottom:auto;flex-direction:row;gap:16px;justify-content:center}body[data-mode=play] .tools button{width:45px;height:40px}body[data-mode=play] #level-controls{bottom:65px}}
.sockets .socket{flex:1 1 0;min-width:0;max-width:32px;width:auto;height:auto;aspect-ratio:1}.sockets .filled:after{width:50%;height:50%}
/* Invisible semantic/layout anchors; all box surfaces and traveling screws are 3D. */
#collection-3d{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;cursor:default}
#boxes{justify-content:center;align-items:center;gap:8px;height:150px}
#boxes .box{flex:1;max-width:142px;height:auto;aspect-ratio:1;background:none;box-shadow:none;padding:0;border:0;opacity:1;animation:none;transition:none}
#boxes .lid{display:none}#boxes .sockets{position:absolute;inset:0;opacity:0;display:block}
#boxes .socket{position:absolute;width:24%;height:24%;max-width:none;left:38%;top:22%}
#boxes .socket:nth-child(2){left:23%;top:50%}#boxes .socket:nth-child(3){left:53%;top:50%}
#extra{top:48px}#side{top:195px}#level-keys{top:192px}
@media(max-height:550px){#boxes{height:92px}#boxes .box{max-width:88px}#extra{top:26px}#side,#level-keys{top:132px}}

.flying-key{position:fixed;left:0;top:0;font-size:30px;line-height:1;will-change:transform;filter:drop-shadow(0 3px 2px #80601c44)}

/* The previews float directly over the trail; the active model and bottom Play start a level. */
.model-stop,.model-stop.current{border:0;background:none;box-shadow:none}
#path{cursor:default;transition:opacity .25s}
body[data-mode=enter] #path{display:block;opacity:0!important}

/* A low, receding view with the next unplayed model at the front. */
body[data-mode=menu] #stage,body[data-mode=return] #stage{position:fixed;inset:max(72px,env(safe-area-inset-top)) 0 max(106px,env(safe-area-inset-bottom));margin:0}
#menu-actions{width:240px;left:50%;right:auto;transform:translateX(-50%)}
#menu-top{display:none;position:fixed;top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));align-items:center;gap:10px;z-index:4}
body[data-mode=menu] #menu-top{display:flex}
#menu-top #wallet{position:static;transform:none;padding:8px 17px;color:#68532b;background:#fff4d7;box-shadow:0 3px 0 #80592525}
#shop-open{background:#fff4d7}
#shop-dialog{padding:62px 25px 20px;min-width:260px;background:#fff4d7}
#shop-close{position:absolute;top:10px;right:12px;margin:0;width:34px;height:34px;font-size:26px;background:#efcb83;color:#68532b}
#shop-dialog .shop button{margin:0;color:#68532b;background:#ffe49b}
#rewards{margin-top:16px;text-align:center}
/* A decorative orbit around the active model; the model shares the Play action. */
.model-stop.current:before,.model-stop.current:after{content:none}
.active-marker{position:absolute;inset:-8%;border:6px solid #fff9b9;border-radius:50%;box-shadow:0 0 0 2px #b3813338,0 0 15px #fff7a577,inset 0 0 12px #fff7a533;animation:active-orbit 22s linear infinite;pointer-events:none}
.active-marker i{position:absolute;width:18px;height:17px;background:linear-gradient(#fffef0,#ffe567);filter:drop-shadow(0 2px 1px #95713288);clip-path:polygon(0 0,100% 0,50% 100%);left:calc(50% - 9px);top:-2px}
.active-marker i:nth-child(2){left:auto;right:-2px;top:calc(50% - 8px);transform:rotate(90deg)}
.active-marker i:nth-child(3){top:auto;bottom:-2px;transform:rotate(180deg)}
.active-marker i:nth-child(4){left:-2px;top:calc(50% - 8px);transform:rotate(270deg)}
@keyframes active-orbit{0%{transform:rotate(0) scale(1)}12.5%{transform:rotate(45deg) scale(1.045)}25%{transform:rotate(90deg) scale(1)}37.5%{transform:rotate(135deg) scale(1.045)}50%{transform:rotate(180deg) scale(1)}62.5%{transform:rotate(225deg) scale(1.045)}75%{transform:rotate(270deg) scale(1)}87.5%{transform:rotate(315deg) scale(1.045)}100%{transform:rotate(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.active-marker{animation:none}}
@media(max-height:550px){body[data-mode=menu] #stage,body[data-mode=return] #stage{inset:50px 18% 85px}#menu-top{top:10px}#play{height:48px;margin-top:0}}

/* Keep navigation and the full inventory count inside generous touch targets. */
body[data-mode=play] #level-controls{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));bottom:auto;z-index:9}
#level-controls #home{width:44px;height:44px;background:#edfaffdd}
#boxes{padding-right:64px}
#extra{width:56px;height:64px;border-radius:17px;font-size:34px;padding:0 0 19px}
#extra small{right:5px;bottom:5px;min-width:26px;max-width:46px;padding:1px 5px;font-size:14px}
@media(max-width:600px){#boxes{padding-left:40px}}

/* Persistent in-level zoom rail, with a generous draggable pin. */
#zoom-control{display:none;position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(90px,env(safe-area-inset-bottom));z-index:9;align-items:center;gap:5px;flex-direction:column;padding:8px 4px;background:#edfaffbb;border-radius:24px;color:#467896;font:bold 22px system-ui;box-shadow:0 3px 0 #79b4d044}
body[data-mode=play] #zoom-control{display:flex}
#zoom{writing-mode:vertical-lr;direction:ltr;appearance:none;width:10px;height:120px;margin:4px 15px;background:#8ab8cf;border-radius:8px;touch-action:none;cursor:ns-resize}
#zoom::-webkit-slider-thumb{appearance:none;width:30px;height:22px;border:3px solid white;border-radius:12px;background:#37c6f0;box-shadow:0 2px 4px #35647b66}
#zoom::-moz-range-thumb{width:26px;height:18px;border:3px solid white;border-radius:12px;background:#37c6f0}
.model-stop.current{pointer-events:auto;cursor:pointer}
@media(max-height:550px){#zoom-control{bottom:65px}#zoom{height:75px}}

html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tools button svg{width:39px;height:39px;vertical-align:middle}.powerup-flight{position:fixed;left:0;top:0;width:90px;height:90px;filter:drop-shadow(0 7px 4px #21435555)}.tool-art,.tool-art svg{width:100%;height:100%}.tool-art{transform-origin:50% 65%}.tool-waves{display:none;position:absolute;inset:-15px}.working.magnet .tool-waves,.working.drill .tool-waves{display:block}.tool-waves i{position:absolute;inset:0;border:3px solid #e3fcff;border-radius:50%;animation:magnetic-wave .65s infinite}.tool-waves i:nth-child(2){animation-delay:-.22s}.tool-waves i:nth-child(3){animation-delay:-.44s}@keyframes magnetic-wave{from{transform:scale(.35);opacity:.9}to{transform:scale(1.5);opacity:0}}#side{left:auto;right:5px;top:238px;width:92px;max-width:92px;min-height:48px;padding:10px 5px;gap:3px;background:transparent;pointer-events:none}#side .socket{width:18px;height:20px;opacity:0}#side::before{content:none}@media(max-height:550px){#side{top:169px}}body[data-hammer=true] #view{cursor:crosshair}
.struck.hammer .tool-waves{display:block}.struck.hammer .tool-waves i{border-width:5px;animation:magnetic-wave .4s both}.struck.hammer .tool-waves i:nth-child(n+2){display:none}
/* Attempt progress and optional reward: compact, left aligned under the trays. */
#attempt-hud{position:fixed;left:max(12px,env(safe-area-inset-left));top:224px;z-index:8;color:#315e74;font:bold 14px/1.65 system-ui;max-width:190px;pointer-events:none;text-shadow:0 1px #f4fcff}
#attempt-hud #level-keys{position:static;color:inherit}
#quest{pointer-events:auto;width:auto;max-width:185px;height:auto;padding:7px 9px;margin-top:5px;font:bold 12px/1.4 system-ui;text-align:left;border-radius:12px;background:#f4fcffdc;color:#376279;display:block;transition:opacity .35s;box-shadow:0 2px 0 #79b4d055}
#quest[data-status=failed]{color:#ce344c;animation:quest-miss .9s .65s forwards;pointer-events:none}
#quest[data-status=complete]{opacity:.5;color:#17823c}
@keyframes quest-miss{to{transform:translateX(-230px);opacity:0}}
body:not([data-mode=play]) #attempt-hud{display:none}
#coin-shop{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}#coin-shop button{font:bold 13px system-ui;width:auto;height:44px;margin:0;padding:6px;background:#ffe49b;color:#68532b}
#shop-dialog{max-height:90dvh;overflow:auto}
body[data-mode=play] .tools{position:fixed;left:50%;right:auto;bottom:-32px;transform:translateX(-50%);flex-direction:row;display:flex;gap:16px;height:72px}
body[data-mode=play] .tools button{width:64px;height:72px;padding:0 0 26px;border-radius:18px 18px 0 0}
.tools small,#extra small{right:-7px;top:-9px;bottom:auto;min-width:27px;padding:2px 6px;max-width:none;z-index:10}
#extra{width:56px;height:56px;aspect-ratio:1;padding:0;border-radius:15px;display:grid;place-items:center;line-height:1}
#hammer-prompt{display:none;position:fixed;bottom:65px;left:50%;transform:translateX(-50%);width:90%;text-align:center;z-index:8;color:#365c70;font:bold 18px system-ui;text-shadow:0 2px white;pointer-events:none;animation:hammer-pulse .8s ease-in-out infinite alternate}
body[data-hammer=true][data-mode=play] #hammer-prompt{display:block}
@keyframes hammer-pulse{to{opacity:.5;transform:translateX(-50%) scale(1.05)}}
.tool-model{display:block;width:40px;height:40px}.powerup-flight{width:0;height:0;filter:none}
@media(max-height:550px){#attempt-hud{top:149px;font-size:12px;max-width:170px}#quest{font-size:11px;max-width:166px}body[data-mode=play] .tools{bottom:-29px;height:64px;gap:12px}body[data-mode=play] .tools button{width:58px;height:64px}#hammer-prompt{bottom:52px;font-size:16px}}
@media(prefers-reduced-motion:reduce){#hammer-prompt{animation:none}#quest[data-status=failed]{animation-duration:.01s}}
@media(max-height:550px){#attempt-hud{left:max(78px,env(safe-area-inset-left))}}
/* Workshop shop: compact balances, physical chest silhouettes and proportional wheel. */
#menu-top #wallet{white-space:nowrap;font-size:18px;padding:10px 12px}
#shop-dialog{width:min(530px,calc(100vw - 24px));min-width:0;padding:20px;color:#493b2c;border-radius:24px;max-height:90dvh}
#shop-dialog h2{font-size:22px;margin:0 40px 12px 0}#shop-dialog h3{font-size:17px;margin:20px 0 10px}#shop-wallet{font-weight:800;background:#fffaf0;padding:10px 12px;border-radius:12px}
#shop-close:focus{outline:none}#shop-close:focus-visible{outline:2px solid #816037;outline-offset:2px}
#coin-shop{display:grid;grid-template-columns:1fr;gap:8px;margin:0}#coin-shop article{display:flex;gap:10px;align-items:center;background:#fffaf0;border-radius:12px;padding:10px}#coin-shop article>div{flex:1}#coin-shop b{font-size:14px}#coin-shop p{font-size:12px;line-height:1.4;margin:3px 0 0;color:#79654c}#coin-shop button{min-width:80px;flex-shrink:0;height:38px}#shop-dialog button:disabled{opacity:.4;cursor:default}
#shop-dialog .shop{gap:12px}#shop-dialog .shop button{width:50%;height:145px;display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:15px;border-radius:16px}#shop-dialog .shop small{font-size:13px}
.loot-chest{display:block;position:relative;width:76px;height:48px;margin:14px 0 8px;background:linear-gradient(90deg,#956235 0 13%,#dba355 13% 23%,#a56e37 23% 77%,#e5b463 77% 87%,#88572d 87%);border:3px solid #6e482d;border-radius:5px 5px 10px 10px;box-shadow:4px 5px 0 #704927,0 10px 10px #79512333;transform:rotate(-5deg)}
.loot-chest:before{content:'';position:absolute;left:-3px;right:-3px;top:-16px;height:20px;border:3px solid #6e482d;border-radius:13px 13px 3px 3px;background:linear-gradient(#f3c56e,#bc813d)}.loot-chest i{position:absolute;left:29px;top:4px;width:14px;height:19px;background:#ffdf7e;border:2px solid #77512d;border-radius:3px}.loot-chest i:after{content:'';display:block;width:4px;height:7px;background:#77512d;margin:4px auto}.loot-chest.large{filter:hue-rotate(145deg);transform:rotate(5deg) scale(1.1)}
#rewards{font-size:15px;height:auto;min-height:20px;margin-top:12px}
#wheel-panel{text-align:center}.wheel-wrap{position:relative;width:min(100%,360px);margin:20px auto}#prize-wheel{width:100%;height:auto;border-radius:50%;border:7px solid #765434;box-shadow:0 8px 0 #d0b589;cursor:default}.wheel-pointer{position:absolute;z-index:1;left:calc(50% - 13px);top:-8px;width:26px;height:30px;background:#493b2c;clip-path:polygon(0 0,100% 0,50% 100%)}#wheel-result{min-height:28px;font-weight:800}#spin{width:180px;font-size:20px}#shop-dialog [hidden]{display:none!important}
#shop-dialog button{box-shadow:0 3px 0 #ad85442e,inset 0 2px 0 #fff6}#shop-close{box-shadow:none!important}
@media(max-height:550px) and (min-width:600px){
 #shop-dialog:has(#wheel-panel:not([hidden])){padding:14px 20px}
 #shop-dialog:has(#wheel-panel:not([hidden])) h2{font-size:18px;margin-bottom:5px}
 #shop-dialog:has(#wheel-panel:not([hidden])) #shop-wallet{padding:5px 10px}
 #wheel-panel:not([hidden]){display:grid;grid-template-columns:min(210px,50dvh) 1fr;column-gap:18px;align-items:center}
 #wheel-panel .wheel-wrap{grid-column:1;grid-row:1/4;width:100%;margin:10px 0}
 #wheel-panel h3{grid-column:2;font-size:15px;margin:10px 0 0}
 #wheel-result,#spin{grid-column:2}#spin{margin:0 auto;font-size:17px;width:155px;height:42px}
 #shop-dialog:has(#wheel-panel:not([hidden])) #rewards{display:none}
}

.ui-icon{width:24px;height:24px;display:inline-block;vertical-align:middle;flex-shrink:0}
#shop-open .ui-icon{width:30px;height:30px}
#quest .ui-icon{width:18px;height:18px;margin-right:4px}
#quest-banner{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));top:310px;width:min(290px,calc(100vw - 24px));padding:13px 16px;border-radius:14px;background:#fff7e8;color:#4d514c;box-shadow:0 5px 22px #294b4933;font:14px/1.4 system-ui;animation:quest-banner-in .18s ease-out}
#quest-banner[hidden],body:not([data-mode=play]) #quest-banner{display:none}
#quest-banner p{margin:0 0 8px}#quest-reward{color:#8e641a}
.flying-key .ui-icon{width:100%;height:100%}
@keyframes quest-banner-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:550px){#quest-banner{top:225px}}

/* The menu action and purchases use one clear visual rhythm. */
#play{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}
#play .ui-icon{width:24px;height:24px}
#shop-dialog #shop-stock{padding-top:14px}
#shop-dialog #coin-shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#shop-dialog #coin-shop button{min-width:0;width:100%;height:132px;margin:0}
#shop-dialog .shop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
#shop-dialog .shop button{width:100%;height:132px;margin:0}
#shop-dialog .shop-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding:12px 6px 10px;border:2px solid #ddb976;border-radius:17px;background:linear-gradient(150deg,#fffaf0,#ffebb8);color:#594124;font:600 15px/1.15 system-ui;transition:background .18s,box-shadow .18s,transform .18s;box-shadow:0 4px 0 #bc8e50,inset 0 2px 0 #fff9}
#shop-dialog .shop-card b{font-size:14px;text-align:center}
#shop-dialog .shop-card-art{height:54px;width:72px;display:grid;place-items:center;transition:transform .22s cubic-bezier(.2,1.5,.4,1);transform-origin:center 70%}
#shop-dialog .shop-card-art .ui-icon{width:51px;height:51px;filter:drop-shadow(0 3px 1px #70503138)}
#shop-dialog .shop-card-price{display:flex;align-items:center;justify-content:center;gap:5px;font-weight:800;color:#775025}
#shop-dialog .shop-card-price .ui-icon{width:20px;height:20px}
#shop-dialog .shop-card:not(:disabled):hover,#shop-dialog .shop-card:not(:disabled):focus-visible{background:linear-gradient(150deg,#fffdf6,#ffe39e);box-shadow:0 6px 0 #bc8e50,0 8px 16px #a87d4b40,inset 0 2px 0 #fff9}
#shop-dialog .shop-card:not(:disabled):hover .shop-card-art,#shop-dialog .shop-card:not(:disabled):focus-visible .shop-card-art{transform:translateY(-5px) scale(1.11) rotate(-4deg)}
#shop-dialog .shop-card:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 #bc8e50}
#shop-dialog .loot-chest{margin:12px 0 0;transform:rotate(-5deg) scale(.8)}
#shop-dialog .loot-chest.large{transform:rotate(5deg) scale(.88)}
#shop-close,#shop-close:hover,#shop-close:focus,#shop-close:focus-visible{background:transparent;outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
#shop-close:hover,#shop-close:focus-visible{color:#a9652d;transform:scale(1.08)}
@media(max-width:520px){#shop-dialog #coin-shop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#shop-dialog .shop-card,#shop-dialog .shop-card-art{transition:none}}

/* Keep shop balances clear and give chest prices their own row below the art. */
#shop-dialog{background:#fff}
#menu-top #wallet,#shop-wallet{display:flex;align-items:center;justify-content:center;gap:22px;background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center}
#menu-top #wallet{font-size:26px;padding:0}
#shop-wallet{font-size:30px;padding:8px 0 12px;line-height:1}
#menu-top #wallet .balance,#shop-wallet .balance{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#menu-top #wallet .ui-icon{width:27px;height:27px}
#shop-wallet .ui-icon{width:32px;height:32px}
#shop-dialog .shop button.shop-card{height:176px;padding:14px 8px 12px;gap:8px}
#shop-dialog .shop button.shop-card .shop-card-art{height:82px;flex:0 0 82px}
#shop-dialog .shop button.shop-card .shop-card-price{position:relative;z-index:1;flex:0 0 24px;margin:0;line-height:24px}
#shop-dialog .shop button.shop-card .loot-chest{margin:18px 0 0}
@media(max-width:360px){#shop-wallet{font-size:26px;gap:14px}#menu-top #wallet{font-size:22px;gap:10px}}
#home-level{position:fixed;z-index:5;top:max(14px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-6px);padding:8px 18px;border:2px solid #d9b878;border-radius:18px;background:linear-gradient(#fffdf2,#ffedc7);box-shadow:0 4px 0 #9e713c3d,inset 0 2px #fff;color:#61482a;font:800 17px/1 system-ui,sans-serif;letter-spacing:.045em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
body[data-mode="menu"] #home-level,body[data-mode="return"] #home-level{transform:translate(-50%,0);opacity:1;visibility:visible;transition:opacity .28s ease,transform .28s ease,visibility 0s}
@media(max-height:550px){#home-level{top:max(7px,env(safe-area-inset-top));padding:6px 14px;font-size:15px}}
@media(prefers-reduced-motion:reduce){#home-level{transition:none}}