:root{--bg: #1b1d23;--grid-line: #2a2d36;--floor: #262932;--wall: #3a3f4c;--box: #f2c14e;--face: #1b1d23;--goal: #4ecdc4;--ice: #6c8ae4;--ice-line: #8fa8ee;--pit: #101116;--accent: #f5f5f0;--red: #e05252;--stud: #c8952f;--cell: 64px}html{--xr-background-material: transparent}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--accent);font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none}.app{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.viewport{position:relative;width:100%;height:100%;overflow:hidden}.grid-root{position:absolute;left:50%;top:50%;width:0;height:0;margin-left:calc(var(--cell) / -2);margin-top:calc(var(--cell) / -2);transition:transform .16s cubic-bezier(.22,.61,.36,1),opacity .28s ease;will-change:transform}.tile{position:absolute;border-radius:6px}.tile-floor{background:var(--floor);box-shadow:inset 0 0 0 1px var(--grid-line)}.tile-wall{background:var(--wall);border-radius:8px;box-shadow:inset 0 0 0 2px var(--stud)}.stud{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--stud)}.stud-tl{left:6px;top:6px}.stud-tr{right:6px;top:6px}.stud-bl{left:6px;bottom:6px}.stud-br{right:6px;bottom:6px}.tile-pit{background:var(--pit);border-radius:50%;box-shadow:inset 0 0 12px #000}.tile-goal{background:var(--floor);display:grid;place-items:center}.goal-ring{width:34px;height:34px;border-radius:50%;border:4px solid var(--goal);animation:goal-pulse 1.6s ease-in-out infinite}@keyframes goal-pulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}.tile-ice{background:var(--ice);overflow:hidden}.ice-line{position:absolute;height:2px;background:var(--ice-line);border-radius:2px;opacity:.8}.ice-line-a{width:26px;left:10px;top:20px;transform:rotate(-18deg)}.ice-line-b{width:18px;right:8px;bottom:18px;transform:rotate(-18deg)}.box{position:absolute;width:var(--cell);height:var(--cell);background:var(--box);border-radius:12px;box-shadow:inset 0 0 0 3px var(--stud);transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .4s ease}.box-eye{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--face);top:24px;transition:height .12s ease,top .12s ease,border-radius .12s ease}.box-eye-l{left:18px}.box-eye-r{right:18px}.box-mouth{position:absolute;left:24px;width:16px;height:4px;border-radius:2px;background:var(--face);top:40px;transition:all .14s ease}.box-satisfied .box-eye{height:3px;border-radius:2px;top:26px}.box-satisfied .box-mouth{width:22px;left:21px;height:6px;border-radius:0 0 8px 8px}.box-frown .box-mouth{border-radius:8px 8px 0 0;height:6px}.box-confused .box-eye-l{height:3px;border-radius:2px;top:26px}.box-confused .box-mouth{width:8px;left:28px;border-radius:50%;height:8px}.box-blink .box-eye,.box-sleep .box-eye{height:3px;border-radius:2px;top:26px}.box-sleep .box-mouth{width:10px;left:27px}.box-sleep{animation:breathe 2.4s ease-in-out infinite}@keyframes breathe{0%,to{filter:brightness(1)}50%{filter:brightness(.86)}}.box-win{animation:win-hop .5s ease-out 2}@keyframes win-hop{0%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-16px) scale(1.06,.94)}}.box-fallen{opacity:.2;transform:scale(.55)}.box-fall .box-mouth{width:10px;left:27px;height:10px;border-radius:50%}.hand{position:absolute;width:var(--cell);height:var(--cell);display:grid;place-items:center;transition:transform .14s cubic-bezier(.22,.61,.36,1);pointer-events:none}.palm{width:26px;height:32px;position:relative;z-index:2}.leg{position:absolute;width:3px;height:12px;border-radius:2px;background:var(--face);bottom:12px;box-shadow:0 0 0 1.5px var(--accent);transform-origin:top center}.leg-l{left:28px;animation:step .9s ease-in-out infinite}.leg-r{right:28px;animation:step .9s ease-in-out infinite reverse}@keyframes step{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.progress{position:absolute;top:28px;left:50%;transform:translate(-50%);display:flex;gap:10px}.dot{width:8px;height:8px;border-radius:50%;background:var(--grid-line);transition:background .3s ease}.dot-on{background:var(--accent)}.pad{position:absolute;right:36px;bottom:36px;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:8px;--xr-background-material: translucent;padding:12px;border-radius:20px}.pad-btn{border:none;border-radius:14px;background:#f5f5f01a;color:var(--accent);font-size:18px;font-family:inherit;cursor:pointer;transition:background .12s ease,transform .12s ease}.pad-btn:hover{background:#f5f5f033}.pad-btn:active{transform:scale(.92);background:#f5f5f04d}.pad-n{grid-area:1 / 2}.pad-w{grid-area:2 / 1}.pad-e{grid-area:2 / 3}.pad-s{grid-area:3 / 2}.pad-u{grid-area:1 / 1;font-size:13px}.pad-r{grid-area:1 / 3;font-size:13px}.pad-m{grid-area:3 / 3;font-size:13px}.pad-muted{color:var(--red)}.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 40px;border-radius:18px;font-size:28px;letter-spacing:6px;--xr-background-material: translucent;background:#1b1d23b3}