:root{font-family:system-ui,sans-serif;color:#492b25;background:#fff4df;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#ffe7ba,#fff8e9 72%);min-height:100svh}main{width:min(100% - 20px,440px,calc((100svh - 132px)*.667));min-width:min(100% - 20px,290px);margin:auto}.top{display:flex;justify-content:space-between;align-items:center;min-height:37px;font-size:10px;letter-spacing:.12em;padding:0 5px;color:#825143}.top b{color:#a14330}.game{overflow:hidden;border:1px solid #c0836760;border-radius:23px;background:#fff6de;box-shadow:0 10px 35px #98653b30}.scene{position:relative;isolation:isolate;aspect-ratio:2/3;background:#ffcd91 url('assets/toy-forest.webp') center/100% 100% no-repeat;overflow:hidden;--fox-x:46%;--fox-y:91%}.sky{pointer-events:none;position:absolute;top:0;left:0;right:0;background:linear-gradient(#fff3d9f7,#fff1d4bc 71%,transparent);padding:8px 8px 20px;z-index:5;text-align:center}.sky h1{margin:0;font:bold clamp(15px,4.7vw,25px)/1.15 Georgia,serif;color:#6e362d}.sky span{font-size:10px;font-weight:700;color:#845242}.object{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);touch-action:manipulation;border-radius:20px;min-width:44px;min-height:44px}.object span{position:absolute;white-space:nowrap;top:100%;left:50%;transform:translate(-50%,-3px);padding:3px 8px;border-radius:10px;background:#fff8e8eb;color:#683b29;font:bold clamp(10px,3vw,13px) system-ui;box-shadow:0 2px 5px #58371745;pointer-events:none;opacity:0}.object.is-ready span,.object:focus-visible span{opacity:1}.object.is-ready{outline:2px solid #fff1aa;outline-offset:2px;box-shadow:0 0 15px 4px #ffdc7790}.object.is-used{box-shadow:none;outline:0}.object:focus-visible,button:focus-visible{outline:3px solid #8f4833;outline-offset:3px}.object:not(.is-ready):not(.is-used){cursor:default}.fox{position:absolute;z-index:4;width:28%;height:auto;left:var(--fox-x);top:var(--fox-y);transform:translate(-50%,-91%) scaleX(var(--fox-dir,1));filter:drop-shadow(0 5px 3px #4e2e2968);transition:left .65s ease,top .65s ease;pointer-events:none}.firefly svg{width:100%;height:100%;display:block}.firefly:not(.is-ready):not(.is-used){opacity:.65}.instruction{padding:9px 12px 12px;display:grid;gap:3px;min-height:62px;font-size:clamp(12px,3.35vw,15px);line-height:1.24}.instruction b{color:#934836}.instruction button,.decorate{background:#ffce75;color:#623521;border:1px solid #d49b59;border-radius:12px;font:bold 12px system-ui;padding:7px 9px;cursor:pointer;justify-self:start}.decorate{z-index:6;left:67%;top:33%;width:auto;min-height:36px}.bridge-fill{display:none;position:absolute;z-index:2;pointer-events:none}.lantern{left:23%;top:66%;width:19%;height:15%}.plank1{left:71%;top:73%;width:16%;height:8%}.plank2{left:82%;top:62%;width:15%;height:8%}.bridge{left:52%;top:51%;width:24%;height:12%}.firefly{left:43%;top:36%;width:16%;height:12%}.den{left:64%;top:24%;width:19%;height:13%}.secret{left:24%;top:35%;width:12%;height:8%}.bridge-fill{left:44%;top:47%;width:16%;height:8%;border-radius:4px;background:repeating-linear-gradient(0deg,#b26837 0 3px,#edb273 3px 14px);box-shadow:0 2px 4px #51371b80}.scene:has(.bridge.is-used) .bridge-fill,.scene[data-state="crossed"] .bridge-fill{display:block}.scene:has(.lantern.is-used) .lantern:before{content:'';position:absolute;inset:15%;border-radius:50%;background:radial-gradient(#ffe278d9,transparent 68%);pointer-events:none}.scene:has(.den.is-used) .den:before{content:'';position:absolute;inset:15%;border-radius:50%;background:radial-gradient(#ffcb69d9,transparent 73%);pointer-events:none}footer{text-align:center;padding:8px 2px;font-size:10px;color:#875c48}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.fox{transition:none}}
.lantern{left:19%;top:55%;width:23%;height:19%}.plank1{left:72%;top:67.8%;width:26%;height:7%;rotate:-7deg}.plank2{left:83%;top:61.5%;width:21%;height:7%;rotate:15deg}.bridge{left:51%;top:48.6%;width:31%;height:16%}.firefly{left:43%;top:29%;width:16%;height:12%}.den{left:72%;top:19.5%;width:22%;height:13%}.secret{left:25%;top:30.7%;width:12%;height:8%}.bridge-fill{left:37.3%;top:45.9%;width:25.3%;height:5.3%;border-radius:2px;background:repeating-linear-gradient(0deg,#b26837 0 2px,#e0a66a 2px 4px,#edb273 4px 12px,#cc8c52 12px 14px);box-shadow:0 2px 4px #51371b80;transform:perspective(65px) rotateX(10deg)}.scene.has-bridge .bridge-fill{display:block}.scene.has-decorated:after{content:'';position:absolute;left:78%;top:23%;width:7%;aspect-ratio:1;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ffc844 0 13%,transparent 14%),radial-gradient(circle at 50% 25%,#ff93a9 0 21%,transparent 22%),radial-gradient(circle at 75% 50%,#ff93a9 0 21%,transparent 22%),radial-gradient(circle at 50% 75%,#ff93a9 0 21%,transparent 22%),radial-gradient(circle at 25% 50%,#ff93a9 0 21%,transparent 22%);z-index:5}.object:not(.is-ready) span{opacity:0}.firefly:not(.is-ready):not(.is-used){opacity:.82}

/* A warm clay diorama at blue hour. Only unlocked objects glow. */
.scene{background-color:#726b8e}.scene:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#26275250 0%,#49456d4d 52%,#3539684d 100%);mix-blend-mode:multiply;transition:opacity .6s}.scene.has-lit:before{opacity:.74}.sky{background:linear-gradient(#f6ebf9f2,#f9eee7cd 70%,transparent)}.sky h1{color:#49335d}.sky span{color:#685779}.top{color:#715674}.scene .object.is-ready{outline:0;box-shadow:none}.scene .object.is-ready:focus-visible{outline:3px solid #fff3be;outline-offset:3px}.scene .object span{background:#fff1d5f0;box-shadow:0 2px 4px #392e4666}.scene .object.is-ready:not(.firefly):before{content:'';position:absolute;inset:-9%;border-radius:38%;pointer-events:none;background:radial-gradient(ellipse,#ffdf7c6b,transparent 72%);filter:drop-shadow(0 0 5px #ffe49a)}.scene .lantern:after{content:'';position:absolute;inset:24% 25% 24%;border-radius:30%;background:radial-gradient(#fff7af,#ffbf579b 45%,transparent 75%);box-shadow:0 0 15px 3px #ffcb6e;opacity:0;transition:opacity .55s;pointer-events:none}.scene.has-lit .lantern:after{opacity:1}.scene .bridge-fill{display:none}.scene.has-bridge .bridge-fill{display:block;box-shadow:0 0 12px 4px #fbd27cd9,0 2px 4px #51371b80;animation:bridgeLight .8s ease-out}.scene .firefly{animation:fireflyFloat 2.6s ease-in-out infinite}.scene.has-guided:not(.has-home) .firefly{left:65%;top:24%;opacity:1}.scene.has-home .firefly{left:73%;top:19%;width:11%;opacity:.7}.scene.has-home .den:before{content:'';position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(ellipse,#fff6b6e6 0%,#ffd78894 27%,transparent 66%);animation:porchOn 1s ease-out}.scene.has-home .den:after{content:'';position:absolute;left:31%;top:39%;width:18%;height:26%;border:2px solid #c88344;border-radius:45% 45% 26% 26%;background:#fff0a0;box-shadow:0 0 9px 3px #ffd185;pointer-events:none;animation:porchOn 1s ease-out}.scene .fox{width:26%;filter:drop-shadow(0 5px 4px #3525369c);transition:left .52s ease,top .52s ease}.scene.is-walking .fox{animation:foxWalk .23s ease-in-out infinite alternate}
.scene.has-decorated:after{content:none}.bloom{position:absolute;left:78%;top:23%;width:12%;height:auto;z-index:5;overflow:visible;pointer-events:none;display:none}.scene.has-decorated .bloom{display:block}.bloom .stem{transform-box:fill-box;transform-origin:center bottom;animation:growStem .85s ease-out both}.bloom .petals{transform-box:fill-box;transform-origin:center;animation:growPetals .65s .53s cubic-bezier(.25,.75,.33,1.45) both}
@keyframes bridgeLight{from{filter:brightness(1.7);opacity:.3}to{filter:none;opacity:1}}@keyframes porchOn{from{opacity:0}to{opacity:1}}@keyframes fireflyFloat{50%{margin-top:-4px}}@keyframes foxWalk{from{margin-top:0}to{margin-top:-5px}}@keyframes growStem{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes growPetals{from{transform:scale(0)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.scene *{animation:none!important;transition:none!important}}
.scene:before{background:linear-gradient(180deg,#251d667d 0%,#4d427c5c 46%,#524a815e 100%)}.scene.has-lit:before{opacity:.87}.scene .bloom{left:82%;top:23%;width:11%;z-index:6}.scene .bridge-fill{top:44.5%;height:6.8%;left:38%;width:24%}.scene.has-lit:not(.has-bridge) .bridge:before{content:'';position:absolute;inset:6%;background:radial-gradient(ellipse,#ffdb714d,transparent 72%);pointer-events:none}.scene .plank1.is-ready:before,.scene .plank2.is-ready:before{inset:-16%;background:radial-gradient(ellipse,#ffdf8769,transparent 73%)}.scene.has-home .den:after{left:12%;top:67%;width:13%;height:21%;z-index:1}

@font-face{font-family:Nunito;src:url('assets/nunito.woff') format('woff');font-weight:200 1000;font-display:swap}
:root{font-family:Nunito,ui-rounded,sans-serif}button,.instruction button,.object span,.sky h1,.sky span{font-family:inherit}.sky h1{font-weight:1000;letter-spacing:-.035em}.top{font-weight:950}.object span{font-weight:950}.sky h1{font-size:clamp(16px,5vw,26px)}.scene .bloom{left:78%;top:21.5%;width:18%;z-index:7;filter:drop-shadow(0 0 5px #ffe2b8)}.bloom-magic{display:none;position:absolute;left:84%;top:26%;width:0;height:0;z-index:6;pointer-events:none}.has-decorated .bloom-magic{display:block}.bloom-magic:before{content:'';position:absolute;inset:-54px;width:108px;height:108px;border-radius:50%;background:radial-gradient(#fff3adbd,#ff8cbe6b 38%,transparent 72%);animation:bloomAura 2.2s ease-out both}.bloom-magic i{position:absolute;width:10px;height:10px;background:#fff0a7;clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%);animation:petalSpark 1.55s .47s ease-out both;filter:drop-shadow(0 0 4px #fff6c5);--x:-52px;--y:-22px}.bloom-magic i:nth-child(2){--x:45px;--y:-39px}.bloom-magic i:nth-child(3){--x:33px;--y:26px}.bloom-magic i:nth-child(4){--x:-34px;--y:35px}.bloom-magic i:nth-child(5){--x:5px;--y:-50px}.bloom-magic i:nth-child(6){--x:52px;--y:-4px}.bloom-magic i:nth-child(7){--x:-15px;--y:-43px}
@keyframes bloomAura{0%{scale:.25;opacity:0}35%{scale:1.35;opacity:1}100%{scale:1;opacity:.52}}@keyframes petalSpark{0%{opacity:0;transform:scale(.3)}28%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(95deg) scale(.65)}}
/* Identical scene framing; the broken deck and each loose board are independent layers. */
.scene{background-image:url('assets/toy-forest-complete.webp')}
.scene .bridge-fill,.terrain-patch{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:0;transform:none;box-shadow:none;pointer-events:none;z-index:0;background: url('assets/toy-forest.webp') center/100% 100% no-repeat}
.scene .bridge-fill{clip-path:polygon(38.4% 43.6%,62.6% 43.6%,64.2% 52.5%,36.9% 52.5%)}
.scene.has-bridge .bridge-fill{display:none}
.terrain-patch.erased-one{clip-path:polygon(58.8% 65.5%,79.8% 63.8%,85.7% 66.5%,85.8% 69.3%,60.7% 72%,58.8% 69.6%)}
.terrain-patch.erased-two{clip-path:polygon(71.5% 59.8%,77.3% 57.7%,92.8% 60.5%,94.8% 62.8%,92.8% 65.5%,86.9% 65.5%,72% 62.7%)}
.scene.has-plank1 .erased-one,.scene.has-plank2 .erased-two{display:none}
.scene.has-bridge .bridge:after{content:'';position:absolute;inset:12% 13%;border-radius:42%;background:radial-gradient(ellipse,#ffdf766b 0%,#ffdd8c36 37%,transparent 75%);animation:bridgeLight 1s ease-out;pointer-events:none}
.scene:not(.has-lit) .terrain-patch{filter:brightness(.72) saturate(.83)}.scene.has-lit .terrain-patch{filter:drop-shadow(0 0 7px #ffbf73)}
.scene.has-bridge .bridge-fill{display:none!important}.scene .bloom-magic i{transform-origin:center}.scene .instruction:before{content:"";position:absolute;left:22px;top:-7px;width:13px;height:13px;background:#fff6e7;transform:rotate(45deg);border-top:1px solid #fff0cb;border-left:1px solid #fff0cb}

/* Mouse clicks never leave the keyboard focus ring stuck on the loose planks. */
.scene .plank1:not(:focus-visible),.scene .plank2:not(:focus-visible){outline:none!important;box-shadow:none!important}
.scene .plank1.is-ready:before,.scene .plank2.is-ready:before{inset:-5%;opacity:.72}
.scene .terrain-patch{filter:none!important}
.top{min-height:47px}.brand-logo{display:block;width:auto;height:39px;max-width:112px;object-fit:contain}
.scene .instruction{inset:auto 6% 2.6%;padding:6px 9px;gap:2px 7px}.scene .instruction [data-hint]{font-size:clamp(11px,3.2vw,14px)}.scene .instruction .hint-kitsune{width:clamp(28px,8vw,36px);height:clamp(28px,8vw,36px)}
.garden-game{z-index:6;width:19%;height:13%}.garden-game svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px #56304780)}.game-memory{left:41%;top:25%}.game-route{left:71%;top:34%}.scene .garden-game.is-complete:after{content:'✓';position:absolute;right:1%;top:7%;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;background:#fff0c5;color:#645331;font-weight:950;font-size:13px}.scene.has-home .firefly{pointer-events:none}
.scene.has-started .instruction{inset:auto 6% 2.6%;padding:6px 9px;gap:2px 7px}.scene.has-started .instruction [data-hint]{font-size:clamp(11px,3.2vw,14px)}.scene.has-started .instruction .hint-kitsune{width:clamp(28px,8vw,36px);height:clamp(28px,8vw,36px)}

/* At home: one action cluster below the scene, no arcade icons on the landscape. */
.scene.has-home .firefly{display:none!important}
.scene.has-home .secret.is-ready:before{opacity:.7}
.scene .decorate{left:85%;top:33%;min-width:44px;min-height:44px;font-size:0;box-shadow:none;background:transparent;border:0}
.scene .decorate:after{content:'Посадить цветок';position:absolute;top:100%;left:50%;transform:translate(-50%,-5px);background:#fff4df;color:#663b3a;border-radius:999px;padding:4px 7px;font-size:clamp(10px,2.8vw,12px);font-weight:950;white-space:nowrap;pointer-events:none}
.scene .decorate.is-ready:before{content:'';position:absolute;inset:7%;background:radial-gradient(#ffdb6eac,transparent 70%);border-radius:50%;pointer-events:none}
.scene .home-actions{grid-column:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:none}
.scene .home-actions button{pointer-events:auto;min-height:35px;cursor:pointer;font-family:Nunito,ui-rounded,sans-serif;font-weight:900}
.scene .home-actions [data-action=garden]{background:linear-gradient(#ffe6a9,#ffbe83);border-color:#be7e66;color:#623633;padding-inline:13px;box-shadow:0 2px 0 #ae725d}
.scene .home-actions [data-action=restart]{background:#fff2e1;border-color:#d7a696;color:#765356}
.scene .home-actions [data-action=restart]{border-color:transparent;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px;color:#795052}
.scene .home-actions [data-action=garden]{min-height:44px}
.scene .home-actions [data-action=restart]{min-height:44px}
.scene .decorate:after{left:100%;transform:translate(-100%,-5px)}