@import url('assets/fonts.css');
:root{--ink:#213b2e;--muted:#69796b;--paper:#f5f3e9;--line:#d9dfcf;--lime:#ddeb9e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}main{max-width:1160px;margin:auto;padding:30px 46px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px}.brand{text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:3px;font-size:20px}.tag,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}.tag{color:var(--muted)}.intro{display:grid;grid-template-columns:1fr 300px;gap:70px;align-items:center;padding:42px 0 35px}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:70px;line-height:.98;font-weight:400;margin:18px 0}h1 i{color:#6f8750;font-weight:400}.lead{font-size:14px;line-height:1.7;max-width:460px;color:var(--muted)}.objective{border-left:1px solid var(--line);padding-left:35px}.target{font-size:48px;margin-top:15px}h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:30px;margin:12px 0}.objective p{font-size:12px;line-height:1.7;color:var(--muted)}#progress{display:flex;gap:7px;margin-top:18px}#progress span{height:5px;flex:1;background:#dce1d1;border-radius:5px}#progress .done{background:#6f8750}.play{display:grid;grid-template-columns:minmax(0,620px) 1fr;gap:55px;align-items:start}.garden{background:#fffef7;border:1px solid var(--line);padding:24px;border-radius:18px;box-shadow:0 10px 40px #243d2b06}.toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center}.modes{display:flex;padding:4px;background:#edf0e5;border-radius:9px}button{font-family:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:10px 13px;font-weight:600;font-size:11px}button:hover{background:#e6edce}button:focus-visible{outline:3px solid #8ca950;outline-offset:2px}.modes button{border:0;padding:8px 12px}.modes .active{background:var(--ink);color:white}.textbtn{border:0;padding-right:0}.stats{display:flex;justify-content:space-between;margin:24px 0 18px}.stats span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--muted)}.stats strong{display:block;font-size:28px;font-weight:500;margin-top:4px}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;background:#e7ebdd;padding:10px;border-radius:12px;touch-action:none}.cell{aspect-ratio:1;border:1px solid #d6ddc8;border-radius:10px;background:#f3f5e9;display:flex;align-items:center;justify-content:center;position:relative;font-size:clamp(24px,4vw,40px);padding:0;user-select:none;touch-action:none;transition:background .15s,transform .15s}.cell.filled{background:#fffef8;box-shadow:0 2px 1px #253b2510}.cell.empty{border-color:transparent;background:#dde4d0}.cell.selected{background:#e2edae;border:2px solid #5f7b31;transform:scale(.94)}.cell.reachable{outline:2px solid #8ba556;background:#edf3d7}.cell.path{background:#bad477;transform:scale(.88)}.cell.next:after{content:'+';font-size:16px;color:#8c9d77;border:1px dashed #a7b794;border-radius:6px;position:absolute;inset:7px;display:grid;place-items:center}.cell small{position:absolute;right:5px;bottom:3px;font-size:9px;color:#889376}.actions{display:flex;gap:8px;justify-content:space-between}#message{font-size:12px;line-height:1.6;min-height:38px;margin:16px 0 8px;color:var(--muted)}.guide{padding-top:12px}.guide h2{font-size:37px;line-height:1.1;margin:18px 0 25px}.guide ol{padding:0;list-style:none;counter-reset:steps}.guide li{counter-increment:steps;position:relative;padding:0 0 20px 33px;font-size:12px;line-height:1.6}.guide li:before{content:counter(steps);position:absolute;left:0;top:0;border:1px solid #bbc7ac;width:22px;height:22px;border-radius:50%;text-align:center;font-size:10px;line-height:21px}.guide li span{display:block;color:var(--muted);margin-top:3px}.evolution{border-top:1px solid var(--line);padding-top:20px}.evolution span{font-size:9px;letter-spacing:1.5px}.evolution p{font-size:24px;white-space:nowrap}.note{font-size:11px;line-height:1.7;color:var(--muted)}footer{border-top:1px solid var(--line);margin-top:35px;padding:20px 0;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:18px;padding:35px;background:var(--paper);max-width:420px;color:var(--ink)}dialog::backdrop{background:#172e24aa;backdrop-filter:blur(5px)}dialog button{margin:8px 5px 8px 0}#continue{background:var(--ink);color:white}button:disabled{opacity:.4;cursor:default}@media(max-width:760px){main{padding:22px 18px}.tag{display:none}.intro{grid-template-columns:1fr;gap:15px;padding:25px 0}.intro h1{font-size:58px}.objective{border-left:0;padding:15px;background:#eaf0d9;border-radius:12px}.objective .target{float:right;font-size:42px;margin:0}.objective h2{font-size:25px;margin:8px 0}.objective p{margin:0}#progress{max-width:200px;margin-top:12px}.play{grid-template-columns:1fr;gap:28px}.garden{padding:15px}.board{gap:5px;padding:7px}.cell{font-size:clamp(25px,7vw,40px)}.guide h2 br{display:none}.guide h2{font-size:30px}.guide h2 br:after{content:' '}.guide ol{margin-bottom:0}.evolution p{font-size:24px}footer{gap:15px;line-height:1.6}.stats strong{font-size:25px}}
@media(min-width:761px){.intro{padding:24px 0;gap:55px}h1{font-size:56px;margin:12px 0}.intro .lead{margin-bottom:0}.target{font-size:38px;margin-top:9px}.objective h2{font-size:26px}.garden{max-width:560px}.play{grid-template-columns:minmax(0,560px) 1fr}.cell{font-size:34px}}
.cell.grown{background:#ddeb9e;border:2px solid #6f8750;box-shadow:0 0 0 5px #ddeb9e66;animation:tree-grow 650ms ease-out both;z-index:1}@keyframes tree-grow{0%{transform:scale(.6);opacity:.3}60%{transform:scale(1.18)}100%{transform:scale(1.05);opacity:1}}@media(prefers-reduced-motion:reduce){.cell.grown{animation:none}}
.cell img{width:75%;height:75%;object-fit:contain;pointer-events:none}.cell .tile-name{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:9px;font-weight:600;line-height:1}.cell:has(.tile-name){padding-bottom:10px}.cell:has(.tile-name) small{bottom:auto;top:4px}.target img{width:65px;height:65px}.evolution p{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:20px;white-space:normal}.evolution img{width:30px;height:34px;object-fit:contain}

.difficulty-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:17px}.difficulty-row label{font-size:9px;letter-spacing:1.3px;color:var(--muted)}.difficulty-row select{font:600 12px "DM Sans",sans-serif;border:1px solid var(--line);border-radius:7px;padding:9px;color:var(--ink);background:#f5f7ec}.difficulty-row span{font-size:10px;color:var(--muted);flex-basis:100%}.difficulty-row select:focus-visible{outline:3px solid #8ca950;outline-offset:2px}
.top-actions{display:flex;gap:7px;flex-wrap:wrap}.top-actions button{font-size:11px;padding:8px 10px}.personal-best{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);margin:0 0 12px}.setting{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);gap:20px;font-size:14px}.setting input{width:20px;height:20px;accent-color:#547138}.demo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0;padding:15px;background:#e4ebd5;border-radius:12px}.demo[hidden]{display:none}.demo>*{font-size:42px;text-align:center;border-radius:9px;min-height:70px;display:grid;place-items:center}.demo button{background:#fffef7}.demo .picked{outline:3px solid #789348}dialog{max-height:90dvh;overflow:auto;width:calc(100% - 32px)}dialog p:not(.eyebrow){line-height:1.6}#recordsDialog{max-width:560px}#recordsTable{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;margin:18px 0}caption{text-align:left;color:var(--muted);padding-bottom:10px}th,td{text-align:left;padding:11px 7px;border-bottom:1px solid var(--line)}tbody th{font-weight:500}html[data-motion=reduced] *,html[data-motion=reduced] *:before,html[data-motion=reduced] *:after{animation:none!important;transition:none!important}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}@media(max-width:760px){header{gap:14px;align-items:flex-start;flex-wrap:wrap}.top-actions button{font-size:10px}.personal-best{font-size:9px}dialog{padding:25px}.top-actions{gap:5px}}
html[data-native=true] .intro>div{display:none}html[data-native=true] .intro{display:block;padding:14px 0}html[data-native=true] .objective{border:0;border-radius:12px;padding:12px 16px;background:#eaf0d9}html[data-native=true] .objective .target{float:right;margin:0}html[data-native=true] .target img{width:50px;height:50px}html[data-native=true] .objective h2{font-size:24px;margin:7px 0}html[data-native=true] .objective p{margin:0;max-width:80%;font-size:11px}html[data-native=true] #progress{max-width:220px;margin-top:10px}html[data-native=true] main{padding-top:15px}html[data-native=true] header{padding-bottom:15px}html[data-native=true] .guide{padding-top:0}
