:root{--cream:#f8f1e2;--cream-deep:#efe2c8;--honey:#f0b661;--honey-deep:#c88a35;--sage:#8fae7d;--sage-deep:#5f7f52;--turquoise:#4fc0b8;--brown:#4c3826;--shadow:0 6px 16px #4c38262e;--tap:56px}*{box-sizing:border-box}html,body{background:var(--cream);height:100%;color:var(--brown);-webkit-font-smoothing:antialiased;margin:0;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#scene{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}#stage{pointer-events:none;z-index:20;position:absolute;inset:0}#stage[hidden],#intro[hidden],#finale[hidden],#levelComplete[hidden],#loading[hidden],#loadError[hidden],#gapTarget[hidden],#tutorialHand[hidden]{display:none!important}#controls{top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));pointer-events:auto;flex-flow:row;gap:6px;display:flex;position:absolute}.wood{flex:0 0 var(--tap);width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 3px 2px #46301e40);background:0 0;border:0;border-radius:50%;padding:0}.wood img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.wood:active{transform:translateY(2px)scale(.96)}.wood:focus-visible{outline:3px solid var(--cream);outline-offset:2px}.wood[disabled]{opacity:.4;cursor:default}#soundButton img{transition:opacity .15s linear}#hud{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:absolute}.level-dots{gap:6px;display:flex}.level-dots span{border:2px solid var(--sage-deep);background:#ffffffb0;border-radius:50%;width:12px;height:12px}.level-dots span.is-now{background:var(--honey)}.level-dots span.is-done{background:var(--sage)}.stars{gap:4px;display:flex}.stars img{filter:drop-shadow(0 2px 1px #46301e33);width:26px;height:26px}.stars.big img{width:42px;height:42px}.bubble{left:50%;top:max(74px, calc(env(safe-area-inset-top) + 70px));border:2px solid var(--cream-deep);max-width:min(66vw,520px);box-shadow:var(--shadow);text-align:center;pointer-events:none;background:#fffaf0e8;border-radius:18px;margin:0;padding:8px 16px;font-size:17px;position:absolute;transform:translate(-50%)}#trayLayer{position:absolute;inset:0}.tray-slot{pointer-events:auto;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:16px;padding:0;position:absolute}.tray-slot.is-selected{box-shadow:0 0 0 3px var(--honey), 0 0 18px 6px #ffce7a66 inset;background:#ffd48a2e}.tray-slot:focus-visible{outline:3px solid var(--brown);outline-offset:2px}#stage.is-locked #trayLayer,#stage.is-locked #actionBar,#stage.is-locked .gap-target{pointer-events:none}.gap-target{border:3px dashed var(--turquoise);pointer-events:auto;cursor:pointer;touch-action:manipulation;background:#4fc0b81f;border-radius:12px;padding:0;animation:1.8s ease-in-out infinite gap-pulse;position:absolute}.gap-target:focus-visible{outline:3px solid var(--brown);outline-offset:2px}@keyframes gap-pulse{0%,to{box-shadow:0 0 #4fc0b800}50%{box-shadow:0 0 22px 6px #4fc0b866}}#actionBar{right:max(12px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;align-items:flex-end;gap:10px;display:flex;position:absolute}.mirror img{transform:scaleX(-1)}.check{width:calc(var(--tap) + 10px);height:calc(var(--tap) + 10px);cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 4px 3px #46301e45);background:0 0;border:0;padding:0}.check img{object-fit:contain;width:100%;height:100%;display:block}.check:focus-visible{outline:3px solid var(--cream);outline-offset:2px}.check[disabled]{opacity:.55;cursor:default}.check:not([disabled]){animation:2.4s ease-in-out infinite ready}@keyframes ready{0%,to{filter:drop-shadow(0 4px 3px #46301e45)drop-shadow(0 0 #7fd9a400)}50%{filter:drop-shadow(0 4px 3px #46301e45)drop-shadow(0 0 12px #7fd9a4cc)}}.tutorial-hand{pointer-events:none;z-index:30;filter:drop-shadow(0 4px 6px #46301e55);width:108px;height:auto;transition:left .45s,top .45s;position:fixed;transform:translate(-6px,-10px)}.rune{left:max(10px, env(safe-area-inset-left));bottom:max(10px, env(safe-area-inset-bottom));opacity:.55;pointer-events:none;width:54px;position:absolute}#stage.is-shaking{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}#stage.is-flashing:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 45%,#fff6dcc4 0%,#fff6dc00 55%);animation:.5s ease-out flash;position:absolute;inset:0}@keyframes flash{0%{opacity:1}to{opacity:0}}.card-screen{z-index:40;padding:max(16px, env(safe-area-inset-top)) 16px;background:#f8f1e2d9;place-items:center;display:grid;position:absolute;inset:0}.card{background:var(--cream);border:3px solid var(--cream-deep);width:min(560px,100%);max-height:100%;box-shadow:var(--shadow);text-align:center;border-radius:26px;padding:22px 24px 26px;overflow:auto}.card h1,.card h2{margin:0 0 10px;line-height:1.2}.card h1{font-size:clamp(22px,4.4vw,32px)}.card h2{font-size:clamp(20px,3.6vw,28px)}.card p{margin:0 0 12px;font-size:17px;line-height:1.45}.card .muted{color:#6d5a45}.eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);font-size:13px}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.play{margin:6px auto 0}.medal{width:96px}.status{z-index:45;box-shadow:var(--shadow);background:#fffaf0ee;border-radius:16px;margin:0;padding:10px 18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.text-button{width:auto;min-width:var(--tap);background:var(--honey);color:var(--brown);border-radius:16px;flex:none;padding:0 18px;font-size:17px;font-weight:700;box-shadow:inset 0 -3px #0000001a}.dialog{background:0 0;border:0;max-width:min(720px,96vw);padding:0}.dialog::backdrop{background:#4c382659}.dialog .card{text-align:left}.dialog h2{text-align:center}.help-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.close{background:var(--cream-deep);width:44px;height:44px;color:var(--brown);cursor:pointer;border:0;border-radius:50%;font-size:26px;line-height:1}.help-steps{justify-content:center;gap:10px;margin:6px 0 16px;display:flex}.help-step{text-align:center;flex-direction:column;align-items:center;gap:6px;width:33%;font-size:14px;display:flex}.help-step .num{background:var(--sage);color:#fff;border-radius:50%;width:24px;height:24px;font-weight:700;line-height:24px}.help-step .art{place-items:center;width:100%;height:68px;display:grid;position:relative}.help-step .art img{max-width:68px;max-height:68px}.help-step .art.gap{border:3px dashed var(--turquoise);border-radius:10px}.help-step .art.piece img{transform:scale(.8)}.unit-plank{background:repeating-linear-gradient(90deg,#00000014 0 2px,#0000 2px 11px),linear-gradient(#e6b877,#c88a35);border:2px solid #8a5a24;border-radius:6px;width:54px;height:20px;display:block;box-shadow:inset 0 3px #ffffff4d,inset 0 -3px #0000001f}.help-audio{gap:10px;display:flex}.dialog details{margin-top:14px}.dialog summary{cursor:pointer;font-weight:700}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=700px) and (orientation:landscape){:root{--tap:64px}#controls{gap:8px}}@media (orientation:portrait) and (width<=699px){#hud{top:calc(max(8px, env(safe-area-inset-top)) + var(--tap) + 8px);left:max(10px, env(safe-area-inset-left));flex-direction:row;align-items:center;gap:10px;right:auto}.bubble{top:calc(max(8px, env(safe-area-inset-top)) + var(--tap) + 42px);max-width:78vw;font-size:15px}.tutorial-hand{width:88px}.stars img{width:22px;height:22px}}#intro.card-screen{padding-bottom:max(18px, env(safe-area-inset-bottom));background:linear-gradient(#f8f1e200 32%,#f8f1e2c4 66%,#f8f1e2f2 100%);align-items:end}#intro .card{padding:18px 20px 20px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.tutorial-hand{display:none!important}}
