:root{color-scheme:light;--ink:#30482e;--muted:#68765e;--green:#547047;--paper:#f7f6e9;--yellow:#e9be67}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 8% 25%,#dce7cf 0,transparent 40%),radial-gradient(ellipse at 95% 85%,#e2e8c9 0,transparent 40%),#f1f2e5;color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif}button{font:inherit;cursor:pointer}button:disabled{cursor:default}.game-shell{max-width:1050px;margin:auto;padding:32px 26px 22px}.garden-heading{text-align:center;margin-bottom:34px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.6px;color:#7c876a;margin:0 0 13px}.eyebrow>span:first-child{color:#be9b55;font-size:22px;vertical-align:middle;margin-right:7px}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,5.3vw,60px);font-weight:400;letter-spacing:-2px;margin:0}.intro{font-size:14px;color:var(--muted);margin:13px 0 0}.garden-layout{display:grid;grid-template-columns:230px minmax(0,550px);justify-content:center;gap:46px;align-items:start}.garden-notes{padding-top:30px}.note-number{font-family:Georgia,serif;font-size:33px;color:#99a384;letter-spacing:-1px}.garden-notes h2{font-size:13px;font-weight:600;margin:16px 0}.level-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 24px}.level-dot{height:43px;border:1px solid #ccd2ba;border-radius:11px;background:#f7f7ed;color:var(--ink);font-size:13px;position:relative;transition:background .18s,transform .18s}.level-dot:hover:not(:disabled){transform:translateY(-2px);background:#e1e9d4}.level-dot:disabled{opacity:.36}.level-dot.current{background:#56724a;color:white;border-color:#56724a;box-shadow:0 4px 8px #45633321}.level-dot.finished:after{content:'';position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;background:#7b9256;border-radius:50%}.level-dot.current:after{background:#d8e6b7}.instruction{font-size:14px;line-height:1.8;color:#65715d;margin-top:28px}.legend{display:flex;align-items:center;gap:18px;margin:24px 0}.legend-crate{width:40px;height:40px;display:grid;place-items:center;background:#ca9b65;color:#775836;border:3px solid #dfb582;box-shadow:0 3px 0 #a7784b;border-radius:7px;font-size:24px}.legend-arrow{color:#9ca78b}.legend-flower{color:#c89752;font-size:38px}.save-note{font-size:11px;line-height:1.7;color:#939b84;max-width:190px}.play-area{position:relative;min-width:0}.garden-stats{display:flex;margin-bottom:14px;gap:12px;padding:0 7px}.stat{flex:1;text-align:center}.stat span{font-size:10px;color:#7b876f;display:block;margin-bottom:6px}.stat strong{font:22px Georgia,serif;font-variant-numeric:tabular-nums}.stat.current-level{text-align:left;flex:1.6}.board-frame{background:#d2dabd;border:1px solid #bcc8a7;padding:18px;border-radius:24px;box-shadow:0 7px 0 #bdc9a7,0 18px 40px #42533315;position:relative}.board{display:grid;grid-template-columns:repeat(var(--cols),1fr);aspect-ratio:var(--cols)/var(--rows);gap:3px;touch-action:none;user-select:none}.tile{position:relative;min-width:0;display:grid;place-items:center;border-radius:7px}.path{background:#ece6c9;box-shadow:inset 0 2px 1px #f8f3db;border-bottom:3px solid #d7ccaa}.path:nth-child(3n){background:#e8e1c1}.path:after{content:'';position:absolute;width:3px;height:3px;background:#c9bb9666;left:15%;top:18%;border-radius:50%;box-shadow:18px 23px #c9bb9644;pointer-events:none}.hedge{background:#7e9b61;border-bottom:5px solid #5f7d49;border-top:3px solid #92ac72;box-shadow:inset 3px 0 #89a46b,inset -3px 0 #78935b}.hedge:nth-child(3n){background:#759458;border-top-color:#87a269}.leaf-dot{width:14%;height:10%;border-radius:0 70% 0 70%;position:absolute;background:#b0c584;transform:rotate(-28deg);top:23%;left:23%;box-shadow:15px 13px #9bb774}.target{background:#ede5bd}.flower{font-size:clamp(23px,3vw,36px);color:#cb994b;opacity:.8}.crate{position:absolute;width:78%;height:76%;border-radius:7px;background:#c1935d;border:4px solid #dfb17d;box-shadow:0 4px 0 #9f7548,0 6px 5px #846a4930;z-index:2;display:grid;place-items:center;overflow:hidden}.crate:before,.crate:after{content:'';position:absolute;left:-10%;width:120%;height:2px;background:#a67e4d;top:30%}.crate:after{top:67%}.crate i{position:absolute;inset:0;background:linear-gradient(45deg,transparent 42%,#dfb17d 43%,#dfb17d 54%,transparent 55%)}.crate b{font-size:27px;line-height:1;color:#7d6742;z-index:1;font-weight:400;text-shadow:0 1px #e6bf8d}.crate.placed{background:#92a666;border-color:#bbca8d;box-shadow:0 4px 0 #778c51,0 6px 5px #61734930}.crate.placed:before,.crate.placed:after{background:#7c9257}.crate.placed i{background:linear-gradient(45deg,transparent 42%,#bbca8d 43%,#bbca8d 54%,transparent 55%)}.crate.placed b{color:#506e36;text-shadow:0 1px #d7dda2}.gardener{position:absolute;inset:4%;z-index:3;filter:drop-shadow(0 3px 1px #4f50323a)}.gardener .body{position:absolute;left:25%;top:48%;width:50%;height:40%;border-radius:40% 40% 25% 25%;background:#798cad;border-bottom:6px solid #506d91}.gardener .head{position:absolute;left:28%;top:26%;width:44%;height:43%;border-radius:45%;background:#efc294;border-bottom:4px solid #d69e73}.gardener .head:after{content:'';position:absolute;width:5%;height:8%;background:#725a40;top:52%;left:26%;box-shadow:12px 0 #725a40}.gardener .hat{position:absolute;width:82%;height:25%;border-radius:50%;background:#e2b858;left:9%;top:17%;box-shadow:0 3px #bd9642}.gardener .hat:before{content:'';position:absolute;width:58%;height:110%;background:#efcd74;left:21%;top:-50%;border-radius:50% 50% 20% 20%;border-bottom:4px solid #b99054}.corner-flower{position:absolute;z-index:4;color:#eed8a3;font-size:26px;pointer-events:none;text-shadow:0 2px #9ea972}.flower-one{top:-10px;right:25px;transform:rotate(12deg)}.flower-two{left:-10px;bottom:26px;transform:rotate(-20deg);font-size:34px}.action-row{display:flex;justify-content:center;gap:10px;margin:24px 0 0}.secondary{border:1px solid #cbd3bc;background:#f9f8ee;border-radius:10px;color:#506547;padding:10px 19px;font-size:12px;min-height:42px}.secondary span:first-child{font-size:20px;vertical-align:-1px;margin-right:4px}.secondary:hover:not(:disabled){background:#e7eddc}.secondary:disabled{opacity:.42}.status{min-height:22px;text-align:center;font-size:11px;color:#7f8b6d;margin-top:12px}.direction-pad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(3,36px);gap:4px;justify-content:center;margin:4px auto 0}.direction-pad button{border:1px solid #c4ceb1;background:#e6ebd9;border-radius:9px;color:#506547;font-size:20px;touch-action:manipulation}.direction-pad button:active{background:#cbd8b7;transform:translateY(1px)}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.pad-flower{grid-area:2/2;display:grid;place-items:center;color:#b5be9e;font-size:23px}.controls-help{text-align:center;line-height:1.7;color:#87917b;font-size:10px;margin:13px 0 0}.controls-help span{display:block}.garden-footer{border-top:1px solid #d8dec9;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#8a947c;margin-top:30px;padding-top:17px}.garden-footer b{font-weight:500;color:#667752}.completion{position:absolute;left:24px;right:24px;top:108px;background:#f8f8eefa;border:1px solid #d6dec0;box-shadow:0 16px 55px #3e522d35;border-radius:19px;padding:22px;text-align:center;z-index:10;backdrop-filter:blur(6px)}.completion[hidden]{display:none}.completion h2{font:25px Georgia,serif;margin:9px 0;color:#425d36}.completion p{font-size:12px;color:#7b876b;line-height:1.7}.win-flower{font-size:40px;color:#c9a259}.primary{background:#547348;border:0;color:#fff;border-radius:10px;padding:13px 20px;font-size:12px;margin-top:6px;min-height:44px}.primary:hover{background:#425e36}.bump{animation:bump .16s ease-in-out}@keyframes bump{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@media(max-width:760px){.game-shell{padding:25px 16px 20px}.garden-layout{grid-template-columns:minmax(0,520px);gap:20px}.garden-heading{margin-bottom:24px}.garden-notes{padding-top:0;display:grid;grid-template-columns:1fr;gap:0}.note-number,.legend,.save-note,.garden-notes h2{display:none}.level-list{display:flex;gap:7px;margin:0}.level-dot{flex:1;height:37px;border-radius:8px}.instruction{font-size:12px;margin:13px 0 0;line-height:1.6;text-align:center}.board-frame{padding:12px;border-radius:18px}.garden-stats{margin-bottom:12px}.garden-footer{font-size:9px;margin-top:20px}.completion{left:18px;right:18px;top:94px;padding:20px}.crate{border-width:3px}.crate b{font-size:23px}.gardener .head:after{box-shadow:9px 0 #725a40}.direction-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,39px)}.controls-help span:first-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Clear actions, progress and guidance for every screen size. */
:root { --focus-color: #315f48; }
button:focus-visible, .board:focus-visible { outline: 3px solid #315f48; outline-offset: 4px; }
.level-dot.current:hover:not(:disabled) { background: #3d5b34; color: #fff; }
.secondary:hover:not(:disabled), .direction-pad button:hover:not(:disabled) { background: #dce8cf; color: #294322; border-color: #74905e; }
.primary:hover:not(:disabled) { color: #fff; background: #36572e; }
.direction-pad button:disabled { opacity: .45; }
.plot-heading { margin-bottom: 20px; display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.plot-heading h2 { font: 28px/1.2 Georgia,serif; margin: 0; }
.plot-heading p { margin: 0; font-size: 10px; line-height: 1.7; text-align: right; color: #5a6b50; }
.plot-heading strong { display: block; max-width: 170px; font-weight: 600; color: #3a5331; }
.journey { padding: 16px; border: 1px solid #c2ceb0; border-radius: 13px; background: #e7eddb; }
.journey > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.journey strong { white-space: nowrap; }
.journey progress { width: 100%; height: 7px; display: block; border: 0; margin-top: 12px; border-radius: 8px; overflow: hidden; background: #c9d4b9; }
.journey progress::-webkit-progress-bar { background: #c9d4b9; }
.journey progress::-webkit-progress-value { background: #64834b; border-radius: 8px; }
.journey progress::-moz-progress-bar { background: #64834b; }
.garden-tip { margin-top: 22px; padding: 18px; background: #f6edce; border: 1px solid #ddcca0; border-radius: 15px; }
.garden-tip > span { color: #94732b; font-size: 25px; }
.garden-tip p { font-size: 12px; line-height: 1.75; color: #695b36; margin: 8px 0 0; }
.save-note { color: #5d6e50; max-width: none; }
.action-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.action-row .secondary { padding: 10px 6px; min-height: 46px; }
.hint-button { border-color: #b39852; background: #fff4ce; color: #63501e; }
.status { color: #536746; font-size: 12px; line-height: 1.6; min-height: 25px; }
.status.is-warning { padding: 10px 14px; border-radius: 10px; background: #ffedda; color: #78451f; border: 1px solid #d5ab7c; }
.tile.hint-cell { outline: 4px solid #3c6fb3; outline-offset: -3px; z-index: 4; }
.tile.hint-cell:before { content: attr(data-hint-arrow); position: absolute; z-index: 6; bottom: 0; right: 0; background: #214f8b; color: #fff; font: bold 16px/1 Arial; border-radius: 4px; padding: 3px; }
.board { grid-template-rows: repeat(var(--rows),minmax(0,1fr)); }
.direction-pad .hint-direction { color: #fff; background: #315e9b; border-color: #25487a; outline: 2px solid #315e9b; outline-offset: 2px; }
.direction-pad .hint-direction:hover:not(:disabled) { color: #fff; background: #244877; }
.crate.stuck { outline: 3px solid #a34b29; outline-offset: 0; }
.crate.stuck b { color: #66391d; }
.completion { position: static; margin-top: 22px; padding: 22px; }
.completion .secondary { display: block; margin: 10px auto 0; }
.result-detail strong { display: block; color: #375b2b; font-size: 17px; margin: 4px 0 15px; }
.controls-help { color: #5d6e50; font-size: 11px; }
.direction-pad { grid-template-rows: repeat(3,44px); grid-template-columns: repeat(3,48px); }
@media (max-width:760px) {
  .level-list { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; }
  .level-dot { height: 44px; }
  .journey { margin-top: 14px; padding: 12px; }
  .journey progress { margin-top: 8px; }
  .garden-tip { display: none; }
  .save-note { display: block; margin-bottom: 0; text-align: center; }
  .plot-heading h2 { font-size: 24px; }
  .plot-heading { margin-bottom: 15px; gap: 10px; }
  .plot-heading strong { max-width: 145px; }
  .completion { padding: 18px; }
}
@media (max-width:420px) {
  .game-shell { padding-inline: 12px; }
  .action-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plot-heading { display: block; }
  .plot-heading p { margin-top: 8px; text-align: left; }
  .plot-heading strong { display: inline; margin-left: 6px; }
}