@font-face{font-family:Pixel;src:url('./fonts/pixelify.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{font-family:Arial,Helvetica,sans-serif;color:#e8eef3;background:#10151c;font-synthesis:none;color-scheme:dark;--ink:#e8eef3;--muted:#acbdc9;--line:#35434f;--accent:#b8d99d;--paper:#18222d;--toolbar-height:96px;--pad:64px;--ab:80px}
*{box-sizing:border-box}body{margin:0;height:100svh;min-height:0;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.topbar{height:96px;flex-shrink:0;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:11px;font-family:Pixel,monospace;font-size:25px;font-weight:500;letter-spacing:-.6px;line-height:.83}.brand-second{display:block;font-size:29px;line-height:1.02}.brand-dot{color:var(--accent)}.brand-icon{display:flex;align-items:center;justify-content:center;width:40px;height:46px}.brand-icon img{width:32px;max-width:40px;max-height:42px;image-rendering:pixelated}.edition{display:flex;align-items:center;gap:17px;font-size:11px;font-weight:600;letter-spacing:2.2px;color:var(--muted);margin-right:70px}.edition-line{width:25px;height:1px;background:#526571}.icon-button{border:1px solid #455561;background:#1b2630;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:28px}.icon-button:hover,.tool-button:hover{background:#304139;color:#d5edc5}.help-button{color:#c1d0d9}
.stage{position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden}.stage-glow{position:absolute;inset:-15% 0 0;background:radial-gradient(ellipse at 50% 46%,#30473d66 0%,#25323d55 28%,transparent 66%);pointer-events:none}.stage-glow:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#9db8ad .6px,transparent .6px);background-size:24px 24px;opacity:.12;mask-image:radial-gradient(ellipse at center,#0006 0%,transparent 60%)}#console{position:absolute;inset:-22px 0 80px;outline:0;cursor:grab}#console canvas{display:block;width:100%;height:100%}#console.dragging{cursor:grabbing}.margin-note{position:absolute;top:43%;z-index:1;color:var(--muted);font-size:15px;line-height:1.7;pointer-events:none}.left-note{left:8%}.right-note{right:7.5%}.tiny-label{font-size:11px;font-weight:600;letter-spacing:2px;display:block;color:#b9c7cd}.note-rule{display:block;height:1px;width:24px;margin:13px 0;background:#52616b}
.stage-caption{position:absolute;bottom:17px;left:18px;right:18px;display:grid;grid-template-columns:8px auto;justify-content:center;align-items:center;gap:9px 10px;font-size:16px;line-height:1.35;text-align:center;pointer-events:none;color:#d3dfe5}.green-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #b8d99d44}.caption-divider{display:none}.save-caption{grid-column:1/-1;font-size:12px;letter-spacing:1.15px;color:var(--muted)}#garden-caption{max-width:min(78vw,760px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.save-warning .save-caption{color:#f3b09a}#console:focus-visible~.stage-caption .green-dot{box-shadow:0 0 0 3px #10151c,0 0 0 5px var(--accent)}
.loading{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:15px 22px;background:#202d2deb;backdrop-filter:blur(10px);border:1px solid #45594d;border-radius:30px;font-size:15px;white-space:nowrap;transition:opacity .4s;pointer-events:none}.loading.done{opacity:0}.loading-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:breathe 1s infinite}@keyframes breathe{50%{opacity:.25}}
.toolbar{height:var(--toolbar-height);margin:0 4.5%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;position:relative;z-index:4}.keyboard-hints{display:flex;align-items:center;gap:20px}.hint-button{display:flex;align-items:center;gap:8px;padding:10px 0;background:none;font-size:14px;color:var(--muted);min-height:48px}.keycap{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border:1px solid #51616c;border-bottom-width:2px;border-radius:6px;font-size:13px;color:#d6e3e9;background:#1b2630}.hint-button:hover{color:var(--accent)}.hint-button:active .keycap,.hint-button.pressed .keycap{background:#354838;transform:translateY(1px)}.tools{display:flex;gap:12px}.tool-button{display:flex;align-items:center;justify-content:center;gap:9px;background:#1d2934;border:1px solid #41525e;box-shadow:0 3px 0 #080d13;border-radius:12px;min-height:54px;min-width:124px;padding:12px 18px;color:#dce7ee;font-size:15px;font-weight:500}.tool-button svg{width:23px;height:23px}.tool-button:active{transform:translateY(2px);box-shadow:0 1px 0 #080d13}.mute-slash{display:none}.tool-button[aria-pressed=false] .mute-slash{display:block}.mobile-hint{display:none}
.screen-view{position:fixed;inset:0;z-index:7;background:#10151c;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px 24px calc(var(--toolbar-height) + 16px)}.screen-heading{width:min(850px,100%);display:flex;align-items:center;justify-content:space-between;min-height:44px;flex-shrink:0;font-size:12px;letter-spacing:1.6px;color:#bfced7;gap:12px}.text-button{background:none;font-size:15px;letter-spacing:0;padding:10px 0;min-height:44px}.text-button span{font-size:23px;margin-left:6px}#large-screen{width:min(850px,100%,calc((100svh - var(--toolbar-height) - var(--pad)*2 - 208px)*1.5));aspect-ratio:3/2;height:auto;flex-shrink:0;image-rendering:pixelated;box-shadow:0 12px 55px #0008,0 0 0 7px #35443d,0 0 0 9px #718b71;border-radius:1px;cursor:pointer}.screen-open .toolbar{z-index:8;border-color:transparent}.screen-open .mobile-hint{display:none}
.touch-controls{width:min(650px,100%);display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'dpad actions' 'middle middle';gap:16px 20px;align-items:center;flex-shrink:0}.touch-controls button{background:#293946;box-shadow:0 5px 0 #080d13,inset 0 1px 0 #53677366;color:#e0eaf0;border:1px solid #526674;border-radius:10px;min-width:48px;min-height:48px}.touch-controls button:active,.touch-controls button.pressed{transform:translateY(3px);box-shadow:0 2px 0 #080d13;background:#3c5044}.touch-dpad{grid-area:dpad;display:grid;grid-template-columns:repeat(3,var(--pad));grid-template-rows:repeat(2,var(--pad));gap:4px;justify-self:start}.touch-dpad button{display:grid;place-items:center;width:var(--pad);height:var(--pad);min-width:0;min-height:0}.touch-dpad button:first-child{grid-column:2}.touch-dpad button:nth-child(2){grid-column:1;grid-row:2}.touch-dpad button:nth-child(3){grid-column:2;grid-row:2}.touch-dpad button:nth-child(4){grid-column:3;grid-row:2}.dpad-arrow{width:24px;height:24px;fill:currentColor;stroke:none;pointer-events:none}.dpad-left{transform:rotate(-90deg)}.dpad-down{transform:rotate(180deg)}.dpad-right{transform:rotate(90deg)}.touch-actions{grid-area:actions;display:flex;gap:18px;justify-self:end}.touch-actions button{border-radius:50%;width:var(--ab);height:var(--ab);font-family:Pixel,monospace;font-size:34px}.touch-actions button:last-child{transform:translateY(-12px);background:#a9c991;color:#1c3020;border-color:#cee1b9;box-shadow:0 5px 0 #4e6748,inset 0 1px 0 #e2f5cb80}.touch-actions button:last-child:active,.touch-actions button:last-child.pressed{transform:translateY(-9px);box-shadow:0 2px 0 #4e6748;background:#91b87a}.touch-middle{grid-area:middle;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;justify-self:center;width:min(480px,100%)}.touch-middle .touch-menu{font-size:14px;letter-spacing:.3px;border-radius:24px;padding:10px 12px;min-height:52px}
.fallback #console,.fallback .margin-note,.fallback .loading,.fallback #close-screen{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{width:min(500px,calc(100vw - 32px));max-height:calc(100svh - 36px);overflow-y:auto;border:1px solid #455763;border-radius:20px;padding:28px;background:#18222d;color:#e1eaf0;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#04080dbd;backdrop-filter:blur(9px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:12px;letter-spacing:2px;color:#b5cca8}h1,h2{font-family:Pixel,monospace;font-weight:500;letter-spacing:-1px;font-size:39px;line-height:1;margin:25px 0 16px}h2{font-size:33px}dialog p{font-size:16px;line-height:1.6;color:#bbcad3}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;margin:26px 0;padding:23px 0;border-block:1px solid var(--line)}.help-grid div{display:flex;flex-direction:column;gap:7px;font-size:15px}.help-grid span{color:#b0c1cd;font-size:14px}dialog .fine-print{font-size:14px;color:#acbdc9}.primary-button{width:100%;padding:16px 18px;min-height:50px;margin-top:16px;border-radius:10px;background:var(--accent);display:flex;justify-content:space-between;color:#20351e;font-size:16px}.primary-button:hover{background:#cbe6b4}.credits{font-size:13px;line-height:1.6;color:#a5b8c5;margin-top:23px}.credits a{text-decoration:underline;text-underline-offset:2px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}.setting-row span{display:flex;flex-direction:column;gap:7px}.setting-row small{font-size:14px;color:#adbeca}.setting-row input{accent-color:var(--accent);width:24px;height:24px;flex-shrink:0}.small-button{border:1px solid #617365;background:#23332b;border-radius:8px;padding:10px 14px;min-height:44px;font-size:14px}.small-button:hover{background:#344a3b}.reset-button{background:none;color:#f0ae98;font-size:15px;min-height:44px;padding:12px 0}.reset-confirm{border:1px solid #7d5549;padding:15px;border-radius:10px;background:#302824}.reset-confirm p{margin:0 0 14px;font-size:14px}.reset-confirm>div{display:flex;gap:12px}.danger{background:#714939}.settings-message{min-height:20px;font-size:14px!important}noscript{position:fixed;inset:40% 20px auto;text-align:center}
/* Gameplay touches remain physical controls. Document and dialog zoom stay available. */
#console,#console canvas,#large-screen,.touch-controls,[data-input]{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
@media(min-width:1600px){.left-note{left:17%}.right-note{right:15%}.topbar,.toolbar{margin-inline:6%}}
@media(max-width:1100px){.margin-note{display:none}.edition{margin-right:30px}.keyboard-hints{gap:12px}.toolbar{margin-inline:24px;gap:12px}.tool-button{min-width:110px;padding-inline:14px}.hint-button{font-size:13px}}
@media(max-width:800px){.keyboard-hints{display:none}.toolbar{justify-content:center}.edition{font-size:10px;letter-spacing:1.2px;margin-right:12px}}
@media(max-width:650px){:root{--toolbar-height:calc(112px + env(safe-area-inset-bottom,0px));--pad:clamp(48px,13.5vw,60px);--ab:clamp(60px,17.5vw,76px)}.topbar{height:84px;margin-inline:20px}.brand{font-size:23px;gap:9px}.brand-second{font-size:27px}.brand-icon{width:32px;height:38px}.brand-icon img{max-width:32px;max-height:38px}.edition{display:none}#console{inset:-10px -3px 82px}.stage-caption{bottom:15px;font-size:14px;gap:8px 9px}.save-caption{font-size:12px;letter-spacing:.9px}.toolbar{flex-direction:column;justify-content:center;gap:12px;margin:0 18px;padding-bottom:env(safe-area-inset-bottom,0px)}.mobile-hint{display:block;font-size:14px;color:#b4c4cf;text-align:center}.mobile-hint span{margin:0 5px;color:#7d9584}.tools{width:100%;gap:8px}.tool-button{flex:1;min-width:0;min-height:54px;padding:12px 8px;font-size:14px;gap:7px}.tool-button svg{height:21px;width:21px}.screen-view{gap:18px;padding:20px 18px calc(var(--toolbar-height) + 14px)}.screen-heading{font-size:11px;letter-spacing:1px;min-height:40px}.text-button{font-size:14px}.screen-open .toolbar{height:calc(78px + env(safe-area-inset-bottom,0px))}.screen-open{--toolbar-height:calc(78px + env(safe-area-inset-bottom,0px))}.touch-controls{gap:16px 12px}.touch-actions{gap:12px}.touch-middle{gap:8px}.touch-middle .touch-menu{font-size:13px;padding:10px 4px;min-height:50px}#large-screen{box-shadow:0 12px 35px #0008,0 0 0 5px #35443d,0 0 0 7px #718b71}dialog{padding:22px}.help-grid{gap:18px 10px}h1{font-size:35px}}
@media(max-width:380px){.topbar{margin-inline:16px}.toolbar{margin-inline:14px}.screen-view{padding-inline:14px}.touch-controls{column-gap:8px}.touch-middle .touch-menu{font-size:12px;min-height:48px}.screen-heading{font-size:10px;letter-spacing:.5px}.text-button{font-size:13px}.tool-button{gap:5px;padding-inline:5px}}
@media(max-height:680px) and (max-width:650px){:root{--toolbar-height:calc(100px + env(safe-area-inset-bottom,0px))}.topbar{height:64px}.brand{font-size:20px}.brand-second{font-size:23px}.brand-icon{height:32px}.brand-icon img{max-height:32px}.stage-caption{bottom:12px}#console{inset:-8px -2px 78px}.toolbar{gap:8px}.screen-view{padding-top:14px;gap:14px}.screen-heading{min-height:36px}.touch-controls{row-gap:12px}.touch-middle .touch-menu{min-height:48px}.tool-button{min-height:50px}}
@media(max-height:540px) and (orientation:landscape){:root{--toolbar-height:64px;--pad:clamp(48px,6.7vw,56px);--ab:clamp(56px,7.6vw,64px)}.topbar{height:60px}.brand{font-size:20px}.brand-second{font-size:23px}.brand-icon{height:32px}.brand-icon img{max-height:32px}.edition,.margin-note,.keyboard-hints,.mobile-hint{display:none}.toolbar,.screen-open .toolbar{height:64px;flex-direction:row;justify-content:center;padding-bottom:0;margin-inline:18px}.screen-open{--toolbar-height:64px}.tools{width:auto;gap:10px}.tool-button{min-width:112px;min-height:48px;font-size:14px}.screen-view{padding:12px 18px 76px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px minmax(0,1fr);align-items:center;justify-items:center;gap:8px 24px}.screen-heading{grid-column:1/-1;min-height:36px;margin:0;width:min(900px,100%);font-size:11px}.text-button{font-size:14px}#large-screen{width:min(100%,calc((100svh - 136px)*1.5))}.touch-controls{grid-template-columns:calc(var(--pad)*3 + 8px) var(--ab);grid-template-areas:'dpad actions' 'middle middle';width:auto;gap:10px 12px}.touch-actions{flex-direction:column-reverse;gap:8px}.touch-actions button:last-child{transform:none}.touch-actions button:last-child:active,.touch-actions button:last-child.pressed{transform:translateY(3px)}.touch-middle{gap:6px}.touch-middle .touch-menu{min-height:48px;font-size:12px;padding-inline:4px}.stage-caption{font-size:14px;bottom:8px;gap:5px 8px}.save-caption{font-size:12px}#console{inset:-10px 0 64px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}