@font-face{font-family:Poppins;src:url(./Poppins-Medium-Cxde2ZoM.ttf)format("truetype");font-weight:500 700;font-display:swap}:root{--inset-top:env(safe-area-inset-top,0px);--inset-right:env(safe-area-inset-right,0px);--inset-bottom:env(safe-area-inset-bottom,0px);--inset-left:env(safe-area-inset-left,0px);--ui-w:min(100vw, 100dvh);--ui-left:calc((100vw - var(--ui-w)) / 2);--bg-top:#2f6f69;--bg-bottom:#173a3a;--yellow:#fffc00;--yellow-press:#e8e400;--green:#4ade3a;--ink:#111;--pill-bg:#141418d1;--pill-ink:#fff;--disabled-bg:#ffffffd1;--disabled-ink:#11111159;--night:#0b1530;--font:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg-bottom);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;font-family:var(--font);color:#fff;margin:0;overflow:hidden}#bg{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-top) 55%, var(--bg-bottom) 100%);transition:background .6s;position:fixed;top:0;bottom:0;left:0;right:0}#app{width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}.hud{width:var(--ui-w);pointer-events:none;margin:0 auto;position:fixed;top:0;bottom:0;left:0;right:0}.hud button{pointer-events:auto}.room-title{font-size:clamp(20px, calc(var(--ui-w) * .062), 30px);white-space:nowrap;transform-origin:0 100%;text-shadow:0 2px 8px #00000040;opacity:0;font-style:italic;font-weight:600;transition:opacity .3s;position:absolute;top:0;left:0}.room-title.show{opacity:1}.progress{top:calc(var(--inset-top) + 12px);right:calc(var(--inset-right) + 16px);background:#00000038;border-radius:999px;align-items:center;gap:8px;padding:10px 12px;font-size:14px;font-weight:600;display:flex;position:absolute}.progress-track{width:clamp(32px, calc(var(--ui-w) * .12), 120px);background:#ffffff40;border-radius:999px;height:8px;overflow:hidden}.progress-fill{border-radius:inherit;background:var(--yellow);width:5%;height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.progress-label{text-align:right;font-variant-numeric:tabular-nums;min-width:2.6em}.hints{left:0;right:0;bottom:calc(var(--inset-bottom) + 150px);justify-items:center;display:grid;position:absolute}.hint{background:var(--pill-bg);color:var(--pill-ink);opacity:0;border-radius:999px;grid-area:1/1;padding:7px 14px;font-size:13px;transition:transform .35s,opacity .35s;transform:translateY(8px)}.hint.show{opacity:1;transform:none}.toast{left:50%;bottom:calc(var(--inset-bottom) + 150px);background:var(--pill-bg);width:max-content;max-width:calc(100% - 32px);color:var(--pill-ink);text-align:center;opacity:0;border-radius:16px;padding:9px 16px;font-size:14px;transition:opacity .3s,transform .3s;position:absolute;transform:translate(-50%,8px)}.toast.show{opacity:1;transform:translate(-50%)}.avatar{left:calc(var(--inset-left) + 4px);width:min(calc(var(--ui-w) * .42), 200px);aspect-ratio:1/1.05;pointer-events:none;position:absolute;bottom:0}.avatar img{z-index:1;left:17%;bottom:calc(var(--inset-bottom) + 22%);filter:drop-shadow(0 4px 10px #00000040);width:66%;display:none;position:absolute}.avatar.has-bitmoji img{display:block}.avatar .box{left:0;bottom:calc(var(--inset-bottom) + 6px);filter:drop-shadow(0 6px 10px #0000004d);width:100%;animation:2.4s ease-in-out infinite bob;position:absolute}@keyframes bob{50%{transform:translateY(-4px)rotate(-1deg)}}.controls{right:calc(var(--inset-right) + 16px);bottom:calc(var(--inset-bottom) + 20px);flex-direction:column;align-items:flex-end;gap:12px;display:flex;position:absolute}.controls .row{align-items:center;gap:12px;display:flex}.sheet-open .controls{bottom:calc(var(--sheet-h) + 12px)}.sheet-open .toast{bottom:calc(var(--sheet-h) + 136px)}.btn{font:inherit;color:var(--ink);background:var(--yellow);cursor:pointer;border:0;margin:0;font-weight:600;transition:transform .12s,background .2s,opacity .2s;box-shadow:0 4px #0000002e,0 6px 16px #0003}.btn:active:not(:disabled){background:var(--yellow-press);transform:translateY(2px)scale(.96)}.btn:disabled{background:var(--disabled-bg);color:var(--disabled-ink);box-shadow:none;cursor:default}.btn.pill{border-radius:999px;min-width:132px;height:48px;padding:0 22px;font-size:17px}.btn.round{border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.btn[hidden]{display:none}.btn.round svg{width:26px;height:26px;fill:var(--ink)}.btn.flash{background:var(--green)}.btn.pop{animation:.35s pop}@keyframes pop{40%{transform:scale(1.12)}}.topbar{top:calc(var(--inset-top) + 12px);left:calc(var(--inset-left) + 16px);gap:8px;display:flex;position:absolute}.mode-switch{background:#00000038;border-radius:999px;padding:4px;display:flex}.mode-switch button{color:#fff;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:999px;margin:0;padding:7px 8px;font-size:12px;font-weight:600;transition:background .2s,color .2s}.mode-switch button[aria-selected=true]{background:var(--yellow);color:var(--ink)}.night-toggle{cursor:pointer;background:#00000038;border:0;border-radius:50%;flex:none;width:38px;margin:0;padding:0;font-size:17px;line-height:1;transition:background .2s}.night-toggle[aria-pressed=true]{background:#fffc0047}#bg:after{content:"";background:var(--night);opacity:0;transition:opacity 1.2s;position:absolute;top:0;bottom:0;left:0;right:0}.night #bg:after{opacity:.72}.btn.add{left:calc(var(--inset-left) + 16px);bottom:calc(var(--inset-bottom) + 20px);justify-content:center;align-items:center;gap:6px;min-width:0;padding:0 20px 0 14px;display:none;position:absolute}.btn.add svg{width:22px;height:22px;fill:var(--ink)}.can-pick .btn.add{display:flex}.unpack-done .avatar,body:not(.wide-layout).unpack-done .progress{display:none}.design-mode .progress,.design-mode .avatar,.design-mode .hints,.btn.round.danger{background:#ffd9d4}.btn.round.danger svg{fill:#b4232c}.catalog{--panel:#fbf7f0;--panel-ink:#3b302b;--panel-muted:#8a7a70;--tile:#fff;--tile-empty:#f1ebe3;left:var(--ui-left);width:var(--ui-w);padding-bottom:var(--inset-bottom);background:var(--panel);color:var(--panel-ink);visibility:hidden;border-radius:22px 22px 0 0;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;display:flex;position:fixed;bottom:0;transform:translateY(105%);box-shadow:0 -10px 40px #00000059}.catalog.open{visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1);transform:none}.catalog-header{padding:10px 12px 4px calc(var(--inset-left) + 16px);justify-content:space-between;align-items:center;display:flex}.catalog-header h2{margin:0;font-size:18px;font-weight:600}.catalog-close{background:var(--tile-empty);cursor:pointer;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.catalog-close svg{width:20px;height:20px;fill:var(--panel-ink)}.catalog-body{overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;padding:4px 16px 12px calc(var(--inset-left) + 12px);align-items:stretch;gap:10px;display:flex;overflow:auto hidden}.catalog-body::-webkit-scrollbar{display:none}.cat-head{writing-mode:vertical-rl;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--panel-muted);flex:none;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;display:flex;transform:rotate(180deg)}.cat-head:after{content:"";background:#3b302b24;flex:1;width:1px}.cat-grid{flex:none;grid-template-rows:repeat(2,auto);grid-auto-columns:80px;grid-auto-flow:column;gap:8px;display:grid}.cat-tile{background:var(--tile);color:var(--panel-ink);font:inherit;cursor:pointer;border:0;border-radius:14px;flex-direction:column;align-items:center;gap:4px;margin:0;padding:6px 6px 8px;transition:transform .12s;display:flex;box-shadow:0 1px 3px #00000014}.cat-tile:active{transform:scale(.95)}.cat-tile canvas{aspect-ratio:1;background:var(--tile-empty);border-radius:10px;width:100%;transition:background .3s}.cat-tile.ready canvas{background:0 0}.cat-tile span{text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11.5px;line-height:1.2;display:-webkit-box;overflow:hidden}.wide-layout .catalog{--dock-w:calc(var(--ui-left) - 32px);left:calc(var(--ui-left) - 16px - var(--dock-w));top:calc(var(--inset-top) + 12px);bottom:calc(var(--inset-bottom) + 12px);width:var(--dock-w);opacity:0;border-radius:22px;padding-bottom:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s .3s;transform:translate(-20px);box-shadow:0 10px 40px #00000059}.wide-layout.can-pick .catalog{opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;transform:none}.wide-layout .catalog-close,.wide-layout.can-pick .btn.add{display:none}.wide-layout .catalog-header{padding-top:14px}.wide-layout .catalog-body{touch-action:pan-y;flex:1;padding-bottom:16px;display:block;overflow:hidden auto}.wide-layout .cat-head{writing-mode:horizontal-tb;margin:14px 0 8px;font-size:12px;transform:none}.wide-layout .cat-head:after{width:auto;height:1px}.wide-layout .cat-grid{grid-template-rows:none;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));grid-auto-flow:row}body:not(.wide-layout) .topbar{right:calc(var(--inset-right) + 16px)}body:not(.wide-layout) .mode-switch,body:not(.wide-layout) .mode-switch button{flex:1}body:not(.wide-layout) .progress{top:auto;right:auto;left:calc(var(--inset-left) + 12px);bottom:calc(var(--inset-bottom) + 20px);width:calc(min(calc(var(--ui-w) * .42), 200px) - 16px);z-index:1}body:not(.wide-layout) .progress-track{flex:1;width:auto}.target{right:calc(var(--inset-right) + 16px);bottom:calc(var(--inset-bottom) + 20px);width:min(calc(var(--ui-w) * .4), 170px);background:var(--pill-bg);color:#fff;border-radius:18px;flex-direction:column;gap:4px;padding:6px;transition:width .25s cubic-bezier(.2,.8,.2,1);display:none;position:absolute;box-shadow:0 6px 16px #00000040}.target.zoomed{width:min(calc(var(--ui-w) - 32px), 440px)}.target-pic{cursor:zoom-in;background:0 0;border:0;margin:0;padding:0;display:block}.target.zoomed .target-pic{cursor:zoom-out}.target canvas{aspect-ratio:600/560;background:linear-gradient(180deg, var(--bg-top), var(--bg-bottom));border-radius:12px;width:100%;display:block}.target-bar{justify-content:space-between;align-items:center;gap:6px;padding:0 2px 0 6px;display:flex}.target-label{letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-size:11px}.target-reset{color:#fff;font:inherit;white-space:nowrap;cursor:pointer;background:#ffffff29;border:0;border-radius:999px;margin:0;padding:6px 10px;font-size:12.5px;font-weight:600}.target-reset:active{background:#ffffff47}.challenge-mode .target{display:flex}.challenge-mode .toast{bottom:calc(var(--inset-bottom) + 280px)}body:not(.wide-layout) .target-reset{background:var(--pill-bg);padding:8px 14px;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 4px 12px #00000040}body:not(.wide-layout) .target-reset:active{background:#2a2a30}.wide-layout .target,.wide-layout .target.zoomed{width:min(calc(var(--ui-left) - 32px), 440px);top:50%;bottom:auto;left:calc(100% + 16px);right:auto;transform:translateY(-50%)}.wide-layout .target-pic,.wide-layout .target.zoomed .target-pic{cursor:default}.wide-layout.challenge-mode .toast{bottom:calc(var(--inset-bottom) + 150px)}.challenge-mode .controls,.challenge-mode .hints,.challenge-mode .btn.add,.challenge-open .target,.challenge-open .avatar{display:none}.challenge{--panel:#fbf7f0;--panel-ink:#3b302b;--panel-muted:#8a7a70;left:var(--ui-left);width:var(--ui-w);top:calc(var(--inset-top) + 60px);bottom:calc(var(--inset-bottom) + 12px);padding:0 calc(var(--inset-right) + 16px) 0 calc(var(--inset-left) + 16px);pointer-events:none;opacity:0;place-items:center;transition:opacity .3s,transform .3s;display:grid;position:fixed;transform:translateY(12px)}.challenge.open{opacity:1;transform:none}.challenge.open .challenge-card{pointer-events:auto}.challenge-card{background:var(--panel);width:min(100%,380px);max-height:100%;color:var(--panel-ink);text-align:center;border-radius:22px;padding:16px 16px 14px;overflow-y:auto;box-shadow:0 10px 40px #00000059}.challenge-kicker{letter-spacing:.06em;text-transform:uppercase;color:var(--panel-muted);margin:0;font-size:12px;font-weight:600}.challenge-card h2{margin:2px 0 10px;font-size:22px;font-weight:600}.challenge-target{aspect-ratio:600/560;background:linear-gradient(180deg, var(--bg-top), var(--bg-bottom));border-radius:14px;width:100%;display:block}.challenge-target[hidden],.challenge-result[hidden],.challenge-text[hidden]{display:none}.challenge-text{color:var(--panel-muted);margin:10px 4px 0;font-size:13.5px;line-height:1.4}.challenge-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;display:flex}.challenge-actions .btn.pill{white-space:nowrap;flex:130px;min-width:0;padding:0 14px;font-size:16px}.btn.ghost{background:#efe7dc}.btn.ghost:active:not(:disabled){background:#e4d9ca}.challenge-foot{color:var(--panel-muted);margin:10px 0 0;font-size:12px}.challenge-result{justify-content:center;align-items:flex-end;gap:12px;margin-top:4px;display:flex}.mini-avatar{aspect-ratio:1/1.05;flex:none;width:112px;position:relative}.mini-avatar img{z-index:1;width:66%;display:none;position:absolute;bottom:20%;left:17%}.mini-avatar.has-bitmoji img{display:block}.mini-avatar .box{filter:drop-shadow(0 4px 8px #0003);width:100%;position:absolute;bottom:0;left:0}.time-box{background:#fff;border-radius:16px;flex-direction:column;gap:2px;margin-bottom:10px;padding:12px 18px;display:flex;box-shadow:0 1px 3px #00000014}.time-big{font-variant-numeric:tabular-nums;font-size:34px;font-weight:600;line-height:1.1}.time-sub{color:var(--panel-muted);font-size:12.5px}.challenge-result.best .time-sub{color:#2f9a26;font-weight:600}.result-moves{color:var(--panel-muted);margin:4px 0 0;font-size:13px}.challenge-result[hidden]+.result-moves{display:none}#night{background:var(--night);opacity:0;pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}#loading{background:var(--bg-bottom);place-items:center;transition:opacity .4s;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#loading.done{opacity:0;pointer-events:none}.fatal{text-align:center;max-width:280px;margin:0;padding:0 16px;font-size:15px;line-height:1.4}.spinner{border:4px solid #fff3;border-top-color:var(--yellow);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.avatar .box,.spinner{animation:none}}