:root{--bg: #f6efe6;--surface: #fffaf3;--ink: #5b5149;--muted: #a3968a;--slot: #ece1d3;--slot-edge: #dccfbe;--slot-hot: #cfe5d6;--accent: #9cc5b0;--shadow: rgba(91, 81, 73, .18);--radius: 18px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#app{height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:12px}.title{margin:0;font-size:1.25rem;font-weight:700;text-align:center}.hint{margin:0;text-align:center;color:var(--muted);font-size:.9rem}.board{position:relative;flex:1;background:var(--surface);border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--slot-edge);touch-action:none;overflow:hidden}.area{position:absolute;border-radius:var(--radius);background:#f1e6d8;box-shadow:inset 0 0 0 2px var(--slot-edge)}.area.shelf{background:#efe3d2;border-radius:10px}.area.shelf:after{content:"";position:absolute;left:-6px;right:-6px;bottom:-8px;height:14px;border-radius:7px;background:#d8c3a8}.area.compartment{background:#eadfce}.area.fridge{background:#eef3f6;box-shadow:inset 0 0 0 2px #d6e0e6}.area.runner{background:#e9e0d2;border-radius:12px}.area.pan{background:transparent;box-shadow:none}.area.pan:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:12px;border-radius:0 0 40px 40px;background:#d8c3a8}.area.dial{border-radius:64px 64px 14px 14px;background:#f4ebde}.area.dial:after{content:"";position:absolute;left:calc(50% - 2px);bottom:8px;width:4px;height:44px;border-radius:2px;background:#c98b7a;transform-origin:50% 100%;transform:rotate(var(--tilt, 0deg));transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.slot{position:absolute;transform:translate(-50%,-50%);background:var(--slot);border-radius:14px;box-shadow:inset 0 2px 4px var(--shadow);transition:background-color .12s ease}.slot.is-hot{background:var(--slot-hot)}.piece{position:absolute;left:0;top:0;min-width:44px;min-height:44px;display:grid;place-items:center;transform:translate(var(--x),var(--y)) translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(var(--lift, 1));transition:transform .18s cubic-bezier(.2,.8,.3,1.2),filter .18s ease;filter:drop-shadow(0 2px 2px var(--shadow));cursor:grab;touch-action:none}.piece svg{display:block;pointer-events:none}.piece.is-dragging{--lift: 1.08;transition:filter .18s ease;filter:drop-shadow(0 10px 8px var(--shadow));cursor:grabbing;z-index:9999!important}.board:not(.is-ready) .piece{transition:none}.piece.is-blown{transition:transform .8s cubic-bezier(.2,.6,.3,1)}.gust{position:absolute;left:0;width:180px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#9fbfd2,transparent);pointer-events:none;z-index:10000}.btn.is-shown{animation:rise .32s ease-out both}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.piece,.piece.is-blown{transition:none}.btn.is-shown{animation:none}}.piece.is-fixed{cursor:default}.piece.is-fixed:after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;background:#c98b7a;box-shadow:0 1px 2px var(--shadow)}.slot .ghost{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:.22;filter:grayscale(1);pointer-events:none}.area-label{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:.8rem;font-weight:700;color:var(--muted)}.board.is-locked .piece{pointer-events:none;cursor:default}.footer{height:56px;display:flex;justify-content:center;align-items:center}.btn{min-height:48px;min-width:140px;padding:0 28px;border:0;border-radius:999px;background:var(--accent);color:#2f4a3d;font:inherit;font-weight:700;font-size:1.05rem;box-shadow:0 4px 10px var(--shadow);cursor:pointer}.btn:active{transform:translateY(1px)}.btn[hidden]{display:none}.header{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:4px;min-height:44px}.header .title{font-size:1.1rem}.btn-back{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--slot);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}.title-big{font-size:2rem;margin-top:6vh}.level-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(5,1fr);align-content:start;gap:10px;margin-top:16px;padding:4px 4px 12px}.level-tile{aspect-ratio:1;min-height:48px;border:0;border-radius:14px;background:var(--surface);box-shadow:0 2px 8px var(--shadow);color:var(--ink);font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer}.level-tile.is-solved{background:#e6f2ea;color:#3f6b55}.level-tile.is-current{box-shadow:0 0 0 3px var(--accent),0 2px 8px var(--shadow)}.area.mat{background:#efe4f2}.area.cupboard{background:#f1e6d8;border-radius:12px}.area.bowl{border-radius:40px 40px 60px 60px}.area.carton{background:#eadfce;border-radius:12px}.area.line{background:transparent;box-shadow:none}.area.line:before{content:"";position:absolute;left:-8px;right:-8px;top:2px;height:2px;background:#cdbfae}.area.pegboard{background-color:#efe3d2;background-image:radial-gradient(#d8c3a8 1.5px,transparent 1.6px);background-size:14px 14px}.area.felt{background:#d9eadf}.area.envelope{background:#fbf6ee;box-shadow:inset 0 0 0 2px #e6d9c6}.area.table{border-radius:50%;background:#eadfce}.area.stream{background:#dcecf3;border-radius:30px;box-shadow:none}.area.frame{background:#fffdf8;box-shadow:inset 0 0 0 3px #d8c3a8;border-radius:6px}.area.box{background:transparent;box-shadow:inset 0 0 0 2px #d8c3a8;border-radius:10px}.area.tag{background:transparent;box-shadow:none}.area.tag .area-label{bottom:auto;top:50%;transform:translateY(-50%);font-size:.95rem;color:var(--ink)}.tray{position:absolute;left:0;right:0;bottom:0;background:#f4ebde;border-top:2px solid var(--slot-edge);touch-action:none}.tray.can-scroll-left{box-shadow:inset 18px 0 14px -14px var(--shadow)}.tray.can-scroll-right{box-shadow:inset -18px 0 14px -14px var(--shadow)}.tray.can-scroll-left.can-scroll-right{box-shadow:inset 18px 0 14px -14px var(--shadow),inset -18px 0 14px -14px var(--shadow)}.tray-badge{position:absolute;z-index:500;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;line-height:20px;text-align:center;pointer-events:none}.tray-badge[hidden]{display:none}.board.is-scrolling .piece.in-tray{transition:none}.grime{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:40%;pointer-events:none;background:radial-gradient(circle at 30% 35%,rgba(120,96,70,.75) 0 18%,transparent 30%),radial-gradient(circle at 70% 60%,rgba(120,96,70,.7) 0 16%,transparent 28%),radial-gradient(circle at 45% 75%,rgba(120,96,70,.6) 0 12%,transparent 24%),#96806459;mix-blend-mode:multiply;transition:opacity .2s ease}.piece.is-spinning{transition:none;z-index:9999!important}.piece.is-handle{cursor:pointer}.piece.is-handle:after{display:none}.btn-hint{justify-self:end}.level-tile{position:relative}.tile-dots{position:absolute;left:0;right:0;bottom:3px;font-size:.5rem;letter-spacing:1px;color:var(--muted)}.hint-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20000;display:grid;place-items:center;padding:16px;background:#5b514959}.hint-card{width:min(100%,360px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px var(--shadow)}.hint-text{margin:0;text-align:center;color:var(--ink);transition:filter .2s ease}.hint-text.is-hidden{filter:blur(6px);cursor:pointer;-webkit-user-select:none;user-select:none}.hint-note{margin:0;font-size:.85rem;color:var(--muted)}.hint-sketch{position:relative;overflow:hidden;border-radius:12px;background:#fffaf3;box-shadow:inset 0 0 0 2px var(--slot-edge)}.hint-sketch canvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.sketch-board{position:absolute;left:0;top:0;transform-origin:0 0}.sketch-slot{position:absolute;border-radius:10px;background:var(--slot)}.sketch-piece{position:absolute}.sketch-piece svg{display:block}.area.wall{background:#f3ece2;box-shadow:none;border-radius:12px}.area.clock{border-radius:50%;background:radial-gradient(circle,#fffaf3 0 72%,transparent 73%),repeating-conic-gradient(from -1deg,#cdbfae 0 2deg,transparent 2deg 30deg),#fffaf3;box-shadow:inset 0 0 0 6px #e6d9c6,inset 0 0 0 16px #fffaf3}.area.wire{background:#b8ada0;box-shadow:none;border-radius:4px}