:root{--px:4px;--color-ink:#3b2a26;--color-cream:#f6ecd4;--color-cream-dark:#dfcfab;--color-white:#fffaf0;--color-wood-light:#d6a06b;--color-wood:#ab7249;--color-wood-dark:#7c4e32;--color-leaf-light:#4f8f44;--color-leaf:#45813b;--color-leaf-dark:#33622c;--color-grass:#8fc76d;--color-page:#e9dfc4;--font-pixel:ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--color-page);color:var(--color-ink);font-family:var(--font-pixel)}#app{display:flex;position:fixed;inset:0;overflow:auto}.game-layout{gap:calc(var(--px) * 6);padding:calc(var(--px) * 6);margin:auto;display:flex}.game-frame{padding:calc(var(--px) * 2);flex:none}.game-screen{position:relative;overflow:hidden}.side-panel{contain:size;flex:none;width:15rem;overflow-y:auto}#game,#ui{position:absolute;inset:0}#game{background:var(--color-grass)}#game canvas{width:100%;height:100%;image-rendering:pixelated;display:block}#ui{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#ui>*{pointer-events:auto}#ui>.planting-layer{pointer-events:none;position:absolute;inset:0}.plant-prompt,.plant-menu{position:absolute;top:0;left:0}.plant-prompt[hidden],.plant-menu[hidden]{display:none}.plant-prompt{align-items:center;gap:calc(var(--px) * 2);padding:calc(var(--px) * 2) calc(var(--px) * 3) calc(var(--px) * 2) calc(var(--px) * 2);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;font-size:.875rem;font-weight:700;display:flex}.plant-menu{gap:calc(var(--px) * 4);width:17rem;padding:calc(var(--px) * 5);pointer-events:auto;flex-direction:column;display:flex}.plant-menu:focus{outline:none}.plant-menu__heading{font-size:1.25rem}.plant-menu__body{padding:calc(var(--px) * 3);background:var(--color-cream-dark);box-shadow:inset 0 0 0 var(--px) var(--color-wood-light)}:root{--pixel-outline:0 calc(-1 * var(--px)) 0 0 var(--color-ink), 0 var(--px) 0 0 var(--color-ink), calc(-1 * var(--px)) 0 0 0 var(--color-ink), var(--px) 0 0 0 var(--color-ink)}.pixel-panel{background:var(--color-cream);color:var(--color-ink);box-shadow:inset 0 0 0 var(--px) var(--color-cream-dark), var(--pixel-outline)}.pixel-heading{color:var(--color-wood-dark);letter-spacing:.1em;text-align:center;text-transform:uppercase;text-shadow:calc(var(--px) / 2) calc(var(--px) / 2) 0 var(--color-cream-dark);margin:0;font-size:1.5rem;font-weight:700}.pixel-button{appearance:none;padding:calc(var(--px) * 3) calc(var(--px) * 6) calc(var(--px) * 4);background:var(--color-leaf);color:var(--color-white);font:inherit;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 calc(-1 * var(--px)) 0 0 var(--color-leaf-dark), var(--pixel-outline);border:0;border-radius:0;font-size:1.125rem;font-weight:700}@media (hover:hover){.pixel-button:hover{background:var(--color-leaf-light)}}.pixel-button:active{padding-top:calc(var(--px) * 4);padding-bottom:calc(var(--px) * 3);box-shadow:inset 0 var(--px) 0 0 var(--color-leaf-dark), var(--pixel-outline)}.pixel-button:focus-visible{outline:var(--px) solid var(--color-wood-dark);outline-offset:calc(var(--px) * 2)}.pixel-key{min-width:calc(var(--px) * 6);padding:0 var(--px) var(--px);background:var(--color-white);color:var(--color-ink);font:inherit;letter-spacing:0;text-align:center;box-shadow:inset 0 calc(-1 * var(--px)) 0 0 var(--color-cream-dark), 0 0 0 calc(var(--px) / 2) var(--color-ink);font-weight:700;line-height:1.5;display:inline-block}.seed-game{--art:calc(var(--px) / 2);--marker-width:var(--px);align-items:center;gap:calc(var(--px) * 2);flex-direction:column;display:flex}.seed-game__stage{width:calc(var(--art) * 30);height:calc(var(--art) * 22);position:relative}.seed-game__stage img{image-rendering:pixelated;pointer-events:none;display:block;position:absolute}.seed-game__dirt{width:calc(var(--art) * 30);height:calc(var(--art) * 9);bottom:0;left:0}.seed-game__drop{top:0;left:calc(var(--art) * 12);width:calc(var(--art) * 6);height:calc(var(--art) * 16);position:absolute;overflow:hidden}.seed-game__seed{top:var(--art);width:calc(var(--art) * 6);height:calc(var(--art) * 8);left:0}.seed-game[data-phase=aiming] .seed-game__seed{animation:.8s step-end infinite seed-bob}.seed-game[data-phase=hit] .seed-game__seed,.seed-game[data-phase=done] .seed-game__seed{animation:.4s cubic-bezier(.5,0,1,1) forwards seed-drop}.seed-game[data-phase=missed] .seed-game__seed{animation:.3s step-end 2 seed-wobble}@keyframes seed-bob{50%{transform:translateY(var(--art))}}@keyframes seed-drop{to{transform:translateY(calc(var(--art) * 15))}}@keyframes seed-wobble{25%{transform:translateX(calc(var(--art) * -1))}75%{transform:translateX(var(--art))}}.seed-game__bar{height:calc(var(--px) * 4);background:var(--color-cream);box-shadow:0 0 0 calc(var(--px) / 2) var(--color-ink);align-self:stretch;position:relative}.seed-game__zone{top:0;bottom:0;left:calc(var(--marker-width) / 2 + (100% - var(--marker-width)) * var(--zone-start,.4));width:calc((100% - var(--marker-width)) * var(--zone-width,.2));background:var(--color-leaf);position:absolute}.seed-game[data-phase=hit] .seed-game__zone{background:var(--color-leaf-light)}.seed-game[data-phase=missed] .seed-game__zone{background:var(--color-wood-light)}.seed-game__marker{top:calc(var(--px) * -1);bottom:calc(var(--px) * -1);left:calc((100% - var(--marker-width)) * var(--marker,1));width:var(--marker-width);background:var(--color-ink);position:absolute}.seed-game__hint{align-items:center;gap:var(--px);height:calc(var(--px) * 6);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;margin:0;font-size:.75rem;font-weight:700;display:flex}@media (prefers-reduced-motion:reduce){.seed-game[data-phase=aiming] .seed-game__seed,.seed-game[data-phase=missed] .seed-game__seed{animation:none}}.controls-panel{gap:calc(var(--px) * 6);padding:calc(var(--px) * 6) calc(var(--px) * 5);flex-direction:column;display:flex}.controls-panel .pixel-heading{font-size:1.25rem}.controls-panel__list{align-items:center;gap:calc(var(--px) * 5) calc(var(--px) * 4);grid-template-columns:auto 1fr;margin:0;font-size:.875rem;display:grid}.controls-panel__keys{min-width:calc(var(--px) * 22);justify-content:center;display:flex}.controls-panel__action{letter-spacing:.05em;text-transform:uppercase;margin:0;font-weight:700}.controls-panel__move{gap:var(--px);grid-template-columns:repeat(3,auto);grid-template-areas:".up.""left down right";display:grid}.controls-panel__move-up{grid-area:up}.controls-panel__move-left{grid-area:left}.controls-panel__move-down{grid-area:down}.controls-panel__move-right{grid-area:right}.main-menu{padding:calc(var(--px) * 4);place-items:center;display:grid;position:absolute;inset:0}.main-menu__panel{gap:calc(var(--px) * 5);width:min(100%,18rem);padding:calc(var(--px) * 8) calc(var(--px) * 7);flex-direction:column;display:flex}
