@font-face{font-family:LocalRounded;src:local('Avenir Next');font-display:swap}
:root{--paper:#f8f7f0;--ink:#293e32;--green:#436d50;--muted:#858b7e;--line:#e3e5d9;--yellow:#efc956;--soft:#f0f2e7;--sans:LocalRounded,'Trebuchet MS',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b98a1e;outline-offset:5px}button svg,svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.site-header{height:104px;max-width:1328px;padding:0 54px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-size:37px;font-weight:800;letter-spacing:-2px}.brand-mark{display:grid;place-items:center;width:39px;height:43px;color:var(--green);transform:rotate(-9deg)}.brand-mark svg{width:39px;height:39px;stroke-width:1.9}.brand-dot{color:#d1a43b}.brand-note{font-size:11px;letter-spacing:.15px;font-weight:400;color:#858b7e;padding-left:18px;margin-left:13px;border-left:1px solid #d6dacb}.header-actions{display:flex;gap:26px;align-items:center}.made-with{font-size:11px;color:#858b7e}.age-pill{font-size:10px;font-weight:700;padding:7px 12px;background:#ecedde;border:1px solid #e0e4cf;border-radius:6px;color:#647153;letter-spacing:.4px}
main{max-width:1216px;margin:0 auto;padding:46px 28px 0}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:700;display:flex;align-items:center;gap:9px;margin:0 0 16px;color:#6e7a60}.eyebrow>span:first-child{height:6px;width:6px;background:#82936b;border-radius:50%}.eyebrow-divider{color:#c6cbb9;margin:0 3px}h1{font-family:Georgia,'Times New Roman',serif;font-size:46px;font-weight:400;line-height:1.14;letter-spacing:-1.8px;margin:0;position:relative}h1 em{font-weight:400;color:var(--green)}.title-spark{position:absolute;top:-13px;margin-left:4px;width:35px;height:35px;stroke:#c7ab58;stroke-width:2}.intro-copy{font-size:12px;letter-spacing:.1px;color:#7a8376;margin:14px 0 0}.mission-card{width:244px;flex-shrink:0;padding:15px 17px 16px;border:1px solid #e0e4d4;background:#fffef7;box-shadow:0 4px 10px #263b2603;border-radius:14px}.mission-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;font-weight:700;color:#7a8370;margin-bottom:11px}.mission-label>span:last-child{font-size:9px;letter-spacing:0;color:#a4aa97;font-weight:400}.mission-items{display:flex;align-items:center;justify-content:space-between}.letter-slots{display:flex;gap:6px}.letter-slots>span,.win-name>span{display:grid;place-items:center;font-family:Georgia,serif;font-size:20px;color:#a4af9b;width:32px;height:37px;border:1.5px dashed #d1d9c1;border-radius:7px;background:#f7f9ee;transition:background .3s,transform .3s}.letter-slots>span.collected{color:#fff;background:var(--green);border:1.5px solid var(--green);transform:rotate(-5deg)}.letter-slots>span.collected:nth-child(even){transform:rotate(4deg)}.mission-dots{color:#c9ceb8;letter-spacing:1px}.key-slot{color:#b7bda6;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;background:#f1f3e7}.key-slot svg{width:18px;height:18px}.key-slot.collected{color:#af7a13;background:#fbebbb}.key-slot.available{animation:key-glow 1.4s ease-in-out infinite}
.game-card{border:1px solid #dfe4d5;border-radius:20px;overflow:hidden;background:#fffef8;box-shadow:0 5px 22px #3c503509}.scene{height:457px;position:relative;overflow:hidden;background:#fcfcf4}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.scene-top{position:absolute;top:18px;left:22px;right:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.scene-tag{font-size:10px;display:flex;gap:8px;align-items:center;color:#758269;background:#fffef6de;border:1px solid #e7ebdc;border-radius:30px;padding:8px 12px}.scene-tag>span:first-child{width:5px;height:5px;background:#93a776;border-radius:100%}.tag-separator{color:#d2d6c7;margin:0 1px}.scene-actions{display:flex;gap:7px;pointer-events:auto}.icon-button{border:1px solid #e2e6d6;background:#fffef6ef;color:#6e7e60;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;transition:background .15s}.icon-button:hover{background:#edf1df}.icon-button svg{width:15px;height:15px}.help-icon{font-family:Georgia,serif;font-size:17px;font-weight:bold}.direction-hint{position:absolute;bottom:30px;right:25px;display:flex;align-items:center;gap:9px;font-size:10px;color:#6c8461;background:#fafcf1db;border-radius:20px;padding:8px 12px;pointer-events:none}.direction-hint svg{width:18px;height:18px;animation:arrow-bob 1.5s ease-in-out infinite}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#f9faf023}.overlay.dimmed{background:#e6eddd80;backdrop-filter:blur(3px)}.dialog{position:relative;background:#fffef8f5;border:1px solid #dde4d1;box-shadow:0 12px 35px #526b3b13;border-radius:21px;padding:25px 37px 22px;width:370px;text-align:center;animation:appear .3s ease-out}.start-panel{margin-top:38px}.dialog-kicker{display:block;font-size:8px;font-weight:700;letter-spacing:1.75px;color:#8a9a71}.dialog h2{font:normal 37px/1.15 Georgia,serif;letter-spacing:-1.1px;margin:13px 0;color:#344d39}.dialog p{font-size:12px;line-height:1.8;color:#7d8972;margin:0 0 20px}.primary-button{display:flex;align-items:center;justify-content:center;gap:22px;min-height:49px;width:100%;border:1px solid #3c6447;border-radius:10px;background:var(--green);color:#fffdf0;font-size:13px;font-weight:700;box-shadow:0 3px 0 #2e5239;transition:background .15s,transform .15s}.primary-button:hover{background:#365e43;transform:translateY(-1px)}.primary-button:active{transform:translateY(2px);box-shadow:none}.primary-button svg{width:19px;height:19px}.start-footnote{display:block;font-size:9px;color:#9ba58e;margin-top:14px}.dialog-illustration{font-size:34px;color:#b2c4a1}.text-button{background:none;border:0;display:block;margin:16px auto 0;font-size:10px;color:#7f8c73;text-decoration:underline;text-underline-offset:3px}.help-steps{margin:19px 0;text-align:left}.help-steps p{display:flex;align-items:center;gap:14px;margin:10px 0;font-size:11px}.help-steps p>span{display:grid;place-items:center;width:36px;height:30px;background:#eef2e4;color:#436d50;border:1px solid #dce3cd;border-radius:6px;font-size:16px;font-weight:700;flex-shrink:0}.help-steps svg{width:18px;height:18px}.win-stars{display:block;color:#d4ad44;font-size:35px;letter-spacing:9px;margin:0 0 15px}.win-panel{width:410px}.win-name{display:flex;justify-content:center;gap:7px;margin:0 0 22px}.win-name>span{background:#f2e2a3;border:0;color:#8c6b20;transform:rotate(-6deg)}.win-name>span:nth-child(even){transform:rotate(6deg)}.loading{position:absolute;inset:0;background:#f7f8ef;display:grid;align-content:center;justify-content:center;gap:10px;text-align:center;font-family:Georgia,serif;font-size:24px;color:#6b805d}.loading span{animation:pulse 1s infinite}
.game-bottom{min-height:61px;padding:15px 23px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #e5e9db}.live-hint{display:flex;align-items:center;gap:10px}.hint-star{color:#c3a65a;font-size:22px}.live-hint p{font-size:10px;color:#7c8872;margin:0;line-height:1.5}.keyboard-guide{display:flex;gap:21px;flex-shrink:0;color:#8f9883;font-size:9px}.keyboard-guide>span{display:flex;align-items:center;gap:4px}kbd{display:inline-grid;place-items:center;min-width:23px;height:22px;background:#f6f7ef;border:1px solid #e0e5d5;border-bottom:2px solid #d9dfca;border-radius:4px;font-family:var(--sans);color:#88927a;font-size:11px}kbd:last-of-type{margin-right:3px}.space-key{font-size:8px;padding:0 9px}.touch-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:17px auto 0;max-width:410px}.walk-buttons{display:flex;gap:9px}.control-button{touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;border:1px solid #dfe4d2;border-bottom:3px solid #d5ddc6;border-radius:13px;width:56px;height:48px;background:#eef1e4;color:#667e54;transition:background .1s,transform .1s}.control-button:hover,.control-button.pressed{background:#e1e8d2}.control-button.pressed{transform:translateY(2px);border-bottom-width:1px}.control-button svg{width:22px;height:22px}.left-arrow{transform:rotate(180deg)}.jump-button{gap:8px;width:103px;background:#f3eccf;border-color:#e5dcb7;color:#947c35}.jump-button svg{transform:rotate(-90deg);width:20px;height:20px}.jump-button span{font-size:11px;font-weight:700}.jump-button:hover,.jump-button.pressed{background:#eee0ab}.touch-label{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#929d82}.notebook-note{display:flex;align-items:center;gap:14px;margin:31px 1px 29px;padding-top:25px;border-top:1px solid #e3e7d9}.note-icon{background:#edf0e2;color:#879971;width:39px;height:39px;display:grid;place-items:center;border-radius:10px;flex-shrink:0}.note-icon svg{width:22px;height:22px}.notebook-note p{margin:0;display:flex;flex-direction:column;gap:5px;font-size:10px}.notebook-note strong{font-weight:600;color:#6e7a62}.notebook-note p>span{font-size:9px;color:#9aa28c}.handwritten{margin-left:auto;display:flex;align-items:center;gap:12px;font:italic 15px Georgia,serif;color:#98a386;transform:rotate(-3deg)}.handwritten svg{width:46px;height:20px;stroke:#abb790;stroke-width:1.2}footer{max-width:1160px;border-top:1px solid var(--line);margin:auto;padding:20px 0 25px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#9aa38e}footer>span:nth-child(2){letter-spacing:.2px;font-size:9px;color:#a1a994}.footer-flower{display:inline-block;margin-left:10px;font-size:16px;color:#8e9e7b}
.controller-bar{display:flex;align-items:center;gap:9px;margin:13px 3px;color:#929d85;font-size:10px;line-height:1.5}.controller-bar>svg{width:19px;height:19px;flex-shrink:0}.controller-bar.connected{color:#527348}.controller-bar #controller-guide{margin-left:auto;color:#849173;font-size:9px}.controller-bar b{display:inline-block;padding:2px 6px;margin-left:8px;border-radius:4px;background:#edf1e1;color:#60784f;font-size:9px}.controller-focus{outline:3px solid #b98a1e!important;outline-offset:5px}.dialog p.controller-help{font-size:9px;line-height:1.8;padding:10px 3px;background:#f0f3e8;border-radius:7px;color:#6d805c;margin:0 0 16px}
@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes arrow-bob{50%{transform:translateX(5px)}}@keyframes pulse{50%{opacity:.3}}@keyframes key-glow{50%{background:#fae8a5;box-shadow:0 0 0 4px #efd27c30}}
@media(min-width:1450px){main{padding-top:54px}.scene{height:500px}.intro{margin-bottom:34px}}
@media(max-width:900px){.site-header{padding:0 28px;height:86px}.brand-note,.made-with{display:none}main{padding-top:32px}h1{font-size:37px}.mission-card{width:217px;padding:13px}.letter-slots{gap:4px}.letter-slots>span{width:29px;height:34px}.scene{height:430px}.keyboard-guide{display:none}.title-spark{width:27px;margin-left:0}footer{margin:0 28px}.handwritten{font-size:12px;gap:6px}}
@media(max-width:600px){.site-header{height:73px;padding:0 20px}.brand{font-size:32px;gap:6px}.brand-mark,.brand-mark svg{width:32px;height:32px}.age-pill{font-size:9px}main{padding:26px 16px 0}.intro{display:block;margin-bottom:20px}.eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:12px}h1{font-size:34px;letter-spacing:-1.3px;max-width:330px}.title-spark{top:-11px;width:24px;height:24px}.intro-copy{font-size:10px;margin-top:10px}.mission-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;padding:10px 12px;border-radius:11px}.mission-label{flex-direction:column;gap:5px;margin:0;font-size:7px;letter-spacing:1px}.mission-label>span:last-child{font-size:9px}.mission-items{gap:8px}.letter-slots{gap:5px}.letter-slots>span{width:28px;height:30px;font-size:17px}.key-slot{width:30px;height:30px}.scene{height:392px}.scene-top{top:13px;left:12px;right:12px}.scene-tag{font-size:8px;padding:7px 9px;gap:5px}.scene-actions{gap:5px}.icon-button{width:31px;height:31px}.dialog{width:min(100%,330px);padding:23px 23px 19px;border-radius:17px}.dialog h2{font-size:33px}.dialog p{font-size:11px}.dialog-kicker{font-size:7px}.start-panel{margin-top:38px}.game-card{border-radius:16px}.game-bottom{min-height:60px;padding:12px 13px}.live-hint{gap:8px}.live-hint p{font-size:10px}.hint-star{font-size:18px}.touch-controls{margin-top:15px;max-width:100%;gap:8px}.control-button{width:62px;height:56px;border-radius:13px}.jump-button{width:105px}.touch-label{font-size:11px}.notebook-note{margin:25px 0 22px;padding-top:21px;gap:10px}.notebook-note p{font-size:9px;gap:5px}.notebook-note p>span{font-size:8px;line-height:1.5}.handwritten{display:none}.note-icon{width:34px;height:34px}footer{margin:0 16px;padding:17px 0 22px;font-size:7px;letter-spacing:.8px}footer>span:nth-child(2){display:none}.direction-hint{font-size:9px;right:14px;bottom:15px}.help-steps p{font-size:11px;margin:7px 0}.help-steps{margin:15px 0}.win-stars{font-size:29px;margin-bottom:10px}}
@media(max-height:550px) and (orientation:landscape){.site-header,.intro,.notebook-note,footer{display:none}main{padding:8px 12px}.scene{height:calc(100dvh - 134px)}.game-bottom{min-height:38px;padding:6px 13px}.touch-controls{margin-top:7px;max-width:100%}.control-button{height:48px}.dialog{padding:14px 25px;max-width:370px}.dialog h2{font-size:27px;margin:7px 0}.dialog p{margin-bottom:10px}.dialog-kicker,.start-footnote{display:none}.start-panel{margin-top:20px}.primary-button{min-height:42px}.scene-top{top:8px}.help-steps{margin:8px 0}.help-steps p{margin:3px 0}.help-steps p>span{height:24px}.win-stars{display:none}.win-name{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:600px){.controller-bar{font-size:9px;flex-wrap:wrap;margin:12px 2px;gap:7px}.controller-bar #controller-guide{margin-left:26px;width:100%;font-size:8px}.controller-bar b:first-child{margin-left:4px}}
@media(max-height:550px) and (orientation:landscape){.controller-bar{position:absolute;bottom:11px;left:160px;right:160px;justify-content:center;margin:0;font-size:8px;pointer-events:none}.controller-bar>svg{width:16px;height:16px}.controller-bar #controller-guide{display:none}.touch-label{visibility:hidden}.dialog p.controller-help{font-size:8px;line-height:1.3;margin:6px 0;padding:5px}.help-steps p>span{height:20px}.help-steps p{font-size:10px}}

/* Keep the scene and both thumbs in view throughout a mobile game. */
.overlay{padding-top:58px}.dialog{max-height:100%;overflow-y:auto;overscroll-behavior:contain}.start-panel{margin-top:0}
.control-button{-webkit-touch-callout:none}.icon-button{touch-action:manipulation}
@media(max-width:600px),(max-width:1100px) and (any-pointer:coarse){
  body.game-active{overscroll-behavior-y:none}
  .game-active .site-header,.game-active .intro>div:first-child,.game-active .notebook-note,.game-active footer{display:none}
  .game-active main{height:100vh;height:100dvh;max-width:none;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}
  .game-active .intro{display:block;flex-shrink:0;margin:0 0 8px}
  .game-active .mission-card{width:100%;display:flex;align-items:center;justify-content:space-between;margin:0;padding:7px 12px}
  .game-active .mission-label{display:flex;flex-direction:column;gap:4px;margin:0}
  .game-active .mission-items{gap:8px}
  .game-active .game-card{display:flex;flex-direction:column;flex:1;min-height:0}
  .game-active .scene{height:auto;min-height:0;flex:1}
  .game-active .game-bottom{flex-shrink:0;min-height:40px;padding:7px 12px}
  .game-active .keyboard-guide{display:none}
  .game-active .controller-bar{position:static;flex-shrink:0;flex-wrap:nowrap;gap:6px;margin:6px 2px;font-size:9px;line-height:1.3}
  .game-active .controller-bar #controller-guide{display:none}
  .game-active .touch-controls{flex-shrink:0;width:100%;max-width:none;margin:0;gap:12px}
  .game-active .control-button{width:68px;height:60px}
  .game-active .walk-buttons{gap:12px}
  .game-active .jump-button{width:112px}
  .game-active .touch-label{display:none}
  .scene-actions .icon-button{width:44px;height:44px}
  .text-button{min-height:44px;margin-top:8px}
}
@media(max-height:550px) and (orientation:landscape){
  .game-active .intro{display:none}
  .game-active main{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .game-active .game-card{display:flex;flex-direction:column;flex:1;min-height:0}
  .game-active .scene{height:auto;flex:1;min-height:0}
  .game-active .game-bottom{min-height:32px;padding:4px 12px;flex-shrink:0}
  .game-active .touch-controls{position:relative;margin:6px 0 0;min-height:48px;flex-shrink:0}
  .game-active .control-button{height:48px}
  .game-active .controller-bar{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:180px;right:150px;margin:0;justify-content:center;font-size:8px;pointer-events:none}
  .scene-actions .icon-button{width:44px;height:44px}
  .dialog{max-height:100%;padding:12px 20px}.overlay{padding:56px 10px 8px}
}

/* Give the garden more room on larger screens; mobile play already fills the viewport. */
@media(min-width:901px) and (min-height:551px){main{max-width:1328px}.scene{height:530px}}
@media(min-width:1450px) and (min-height:551px){.scene{height:570px}}
@media(min-width:601px) and (max-width:900px) and (min-height:551px){.scene{height:480px}}
.text-button svg{display:none}
.scene-tag #level-title{width:auto;height:auto;background:none;border-radius:0}
@media(max-height:700px){
  .win-panel .win-stars,.win-panel .win-name{display:none}
  .win-panel{padding:14px 22px}.win-panel h2{font-size:27px;margin:6px 0}.win-panel p{margin-bottom:10px}
}
@media(max-height:550px) and (orientation:landscape){
  .win-panel{padding:8px 20px}.win-panel h2{font-size:24px;margin:4px 0}
  .win-panel p{font-size:10px;line-height:1.3;margin:0 0 5px}
  .win-panel .primary-button{margin-top:6px}
  .win-panel .text-button{min-height:30px;margin:4px auto 0}
}