*{box-sizing:border-box}.learn-page{max-width:1280px;margin:20px auto;padding:0 16px}.learn-page>h1{color:#315d54;margin:0;font-size:26px}.learn-page>p{color:#425c50;margin:8px 0 16px}.garden{--ink:#294f47;position:relative;container-type:inline-size;width:100%;aspect-ratio:16/9;background:#f4f0df url('./assets/garden.webp') center/cover;border:6px solid #b5c9ad;border-radius:24px;overflow:hidden;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif;isolation:isolate}.garden button{font:700 clamp(12px,1.4cqw,20px)/1.3 'Zen Maru Gothic',sans-serif;color:var(--ink);border:2px solid #a1bba9;border-radius:15px;background:#fffdf0;padding:10px 15px;cursor:pointer;box-shadow:0 3px 0 #8fa69440}.garden button:hover{filter:brightness(.97)}.garden button:focus-visible{outline:4px solid #284fc3;outline-offset:2px}.garden button:disabled{opacity:.5;cursor:default}.garden button.primary{background:#efb298;border-color:#ba795e}.garden button[aria-pressed=true]{border-color:#3d7160;background:#d4e6c8}.game-tools{position:absolute;right:2%;top:2%;height:7%;display:flex;gap:6px;z-index:5}.game-tools button{font-size:clamp(11px,1.13cqw,16px);padding:5px 11px;border-radius:12px}.game-tools button[aria-pressed=false]{background:#ece8db;color:#59645b}#scene{position:absolute;inset:11% 3% 4%;display:grid;grid-template-columns:minmax(0,1fr) 29%;gap:3%;align-items:center}.board-wrap{height:100%;min-height:0;display:grid;place-items:center}.board{position:relative;aspect-ratio:1;height:100%;max-width:100%;max-height:100%;border:clamp(6px,1.2cqw,18px) solid #9fbaa0;border-radius:22px;box-shadow:0 4px 0 #789779,inset 0 0 0 3px #dce8ce;background:#9fbaa0;overflow:hidden;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr)}.garden .cell{position:relative;min-width:0;min-height:0;border:0;border-radius:0;padding:0;background:#f5f1dc url('./assets/tile.webp') center/100% 100%;box-shadow:none;display:grid;place-items:center;touch-action:manipulation}.cell img{position:relative;z-index:2;width:92%;height:92%;object-fit:contain;pointer-events:none}.cell .step{position:absolute;z-index:2;width:28%;aspect-ratio:1;border-radius:50%;border:3px solid #fffdf4;background:var(--path);box-shadow:0 0 0 2px var(--ink);pointer-events:none}.cell.active img{outline:3px solid #346f43;outline-offset:-8px;border-radius:50%}.cell:focus-visible{outline-offset:-5px!important;z-index:4}.paths{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.plaque{align-self:stretch;background:#fffbeded;border:3px solid #cfceb3;border-radius:22px;padding:7%;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1cqw,15px);box-shadow:0 5px 0 #b9bfa54d}.plaque h2,.plaque h3,.plaque p{margin:0}.plaque h2{font-size:clamp(18px,2.6cqw,38px);line-height:1.3}.plaque h3{font-size:clamp(16px,2cqw,28px)}.stage-label{font-size:clamp(16px,2cqw,28px);font-weight:900}.count{font-size:clamp(14px,1.6cqw,22px)}.pairs{display:flex;gap:4px}.pair{flex:1;position:relative;border-radius:12px;border:2px solid transparent;opacity:.55}.pair.done{opacity:1;border-color:#71966b;background:#e0edcf}.pair img{display:block;width:100%;height:auto}.pair span{position:absolute;right:0;bottom:0;background:#fff;border-radius:50%;font-size:15px;color:#246738}.status{font-size:clamp(12px,1.45cqw,21px);min-height:2.8em;line-height:1.4}.actions{display:grid;gap:clamp(5px,.7cqw,10px)}.clears{font-size:clamp(11px,1.15cqw,16px)}.garden[data-scene=menu] #scene{grid-template-columns:36% minmax(0,1fr);grid-template-rows:minmax(0,1fr) 15%;gap:4%}.intro{grid-column:1;grid-row:1;padding:8%}.intro p{font-size:clamp(13px,1.7cqw,24px);line-height:1.6}.preview-wrap{grid-column:2;grid-row:1;min-height:0;height:100%;display:grid;place-items:center}.preview-wrap .board{width:auto}.stage-picker{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:1%;background:#fffbedd9;padding:1% 2%;border-radius:18px}.stage-picker p{font-weight:700;font-size:clamp(12px,1.5cqw,20px);margin:0;white-space:nowrap}.stage-picker button{padding:5px;flex:1;height:100%;min-width:0;position:relative}.stage-picker small{font-size:10px;position:absolute;top:-5px;right:0;color:#2a703d;background:#f6ffe9;border-radius:5px}.sheet{position:absolute;inset:0;z-index:10;background:#335b4bbb;display:grid;place-items:center;padding:3%;backdrop-filter:blur(4px)}.sheet[hidden]{display:none}.sheet>div{background:#fffcef;border:4px solid #b5c9ad;border-radius:24px;padding:22px;width:min(92%,570px);max-height:100%;overflow:auto;display:grid;gap:12px}.sheet h2,.sheet p{margin:0}.sheet p{font-size:clamp(12px,1.4cqw,19px);line-height:1.55}.garden:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}.parent-note{font-size:13px!important}.garden[data-scene=result] .plaque{background:#fff7ddec}.garden[data-scene=result] .plaque h2{color:#586c33;font-size:clamp(18px,2.2cqw,32px)}@media(max-width:600px) and (orientation:portrait){.learn-page{padding:0 8px}.garden{aspect-ratio:auto;height:auto;min-height:735px;border-width:4px;border-radius:18px}.game-tools{position:relative;top:auto;right:auto;height:42px;margin:8px 6px;gap:4px;justify-content:flex-end}.game-tools button{font-size:11px;padding:5px 7px}#scene{position:relative;inset:auto;margin:10px;display:flex;flex-direction:column;gap:16px}.board-wrap{width:100%;height:auto}.board{width:100%;height:auto;border-width:7px;border-radius:16px}.plaque{width:100%;padding:14px;gap:10px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.stage-label,.plaque h2{font-size:21px}.count{font-size:16px}.pairs{grid-column:1;grid-row:2}.pair{max-width:52px}.status{grid-column:2;grid-row:2;font-size:14px;min-height:0}.actions{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}.actions button{font-size:14px;padding:10px 8px;min-height:43px}.clears{grid-column:1/-1;font-size:12px}.garden[data-scene=menu] #scene{display:flex;gap:16px}.intro{display:flex;padding:18px;align-items:stretch;gap:12px}.intro h2{font-size:28px}.intro p{font-size:16px}.intro button{font-size:19px;min-height:47px}.preview-wrap{width:78%;height:auto;align-self:center}.preview-wrap .board{width:100%;height:auto}.stage-picker{flex-wrap:wrap;width:100%;gap:8px;padding:12px}.stage-picker p{width:100%;font-size:15px}.stage-picker button{flex:0 0 calc(20% - 7px);font-size:17px;height:40px}.garden[data-scene=result] .plaque h2{grid-column:1/-1;font-size:24px}.sheet>div{padding:18px}.sheet p{font-size:14px}.sheet button{font-size:16px}.garden:fullscreen{overflow:auto;min-height:100dvh}.garden:fullscreen .game-tools{position:sticky;top:0;background:#f7f3e6}.garden:fullscreen .board-wrap{max-width:420px}.garden:fullscreen #scene{padding-bottom:12px}}@media(max-height:500px) and (orientation:landscape){.garden:fullscreen .game-tools{top:1%;height:9%}.garden:fullscreen #scene{inset:12% 3% 3%;grid-template-columns:minmax(0,1fr) 36%}.garden:fullscreen .plaque{padding:4%;gap:5px}.garden:fullscreen .plaque button{padding:5px;min-height:29px}.garden:fullscreen .pairs{max-height:46px}.garden:fullscreen .pair img{height:42px;object-fit:contain}.garden:fullscreen .status{font-size:12px;min-height:2.4em}.garden:fullscreen[data-scene=menu] #scene{grid-template-columns:36% 1fr;grid-template-rows:minmax(0,1fr) 16%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep endpoint artwork above the continuous paths in every state. */
.garden .cell:disabled{opacity:1;cursor:default}.garden .cell:hover{filter:none}

@media(max-width:600px) and (orientation:portrait){.garden[data-scene=result] .plaque .stage-label{grid-column:1/-1;grid-row:2;font-size:20px}.garden[data-scene=result] .plaque .count{grid-column:1/-1;grid-row:3}.garden[data-scene=result] .plaque .pairs{grid-column:1/-1;grid-row:4}.garden[data-scene=result] .plaque .actions{grid-row:5}.garden[data-scene=result] .plaque .clears{grid-row:6}}

#scene{grid-template-rows:minmax(0,1fr)}.plaque{min-height:0}
@media(max-width:900px) and (orientation:landscape){#scene{grid-template-columns:minmax(0,1fr) 36%}.plaque{padding:10px;gap:6px}.plaque .actions{grid-template-columns:1fr 1fr;gap:6px}.plaque button{padding:7px 5px;font-size:12px;min-height:33px}.plaque .pairs{height:43px}.plaque .pair{max-width:45px}.plaque .pair img{height:40px;object-fit:contain}.plaque .status{font-size:12px;min-height:2.5em}.plaque .stage-label{font-size:20px}.plaque .count{font-size:14px}.plaque .clears{font-size:11px}.garden[data-scene=result] .plaque h2{font-size:20px}.garden[data-scene=menu] #scene{grid-template-columns:36% minmax(0,1fr)}}
@media(max-width:600px) and (orientation:portrait){.garden{min-height:0}.garden:fullscreen{min-height:100dvh}}