:root{color-scheme:light;--ink:#263e43;--leaf:#386f57;--cream:#f8f3de;--mint:#c8dcc4;--orange:#eeb66c}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#d5dfc2;font-family:'Nunito',system-ui,sans-serif;font-weight:600}button,select{font:inherit;color:inherit;border:1.5px solid #607668;border-radius:12px;background:var(--cream);min-height:44px;padding:8px 12px;cursor:pointer;line-height:1.15}button:disabled{opacity:.46;cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #b94965;outline-offset:2px}button[aria-pressed=true],.primary{background:var(--leaf);color:#fff9e5;border-color:var(--leaf)}[hidden]{display:none!important}#app{max-width:1140px;height:100dvh;min-height:360px;margin:auto;display:flex;flex-direction:column;padding:6px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:5px}header{display:flex;align-items:center;gap:9px;flex:none}header a{color:var(--leaf);font-size:28px;text-decoration:none;min-width:28px}h1{font-size:22px;margin:0;flex:1;letter-spacing:-.5px}header button{min-height:36px}.hud{display:flex;gap:7px;align-items:center;font-size:13px}.hud b{flex:1}.hud button{font-size:12px;min-height:34px;padding:5px 8px}#health{font-weight:800;white-space:nowrap;color:#923b51}#quest{margin:0;font-size:12px;min-height:28px;line-height:1.3}.stage{position:relative;flex:1;min-height:110px;overflow:hidden;border:2px solid #567860;border-radius:19px;background:#bdd495;box-shadow:0 4px 0 #8ca985}#field{display:block;width:100%;height:100%;touch-action:none}#map{position:absolute;right:8px;top:8px;width:100px;height:76px;pointer-events:none;border:2px solid #7a8961;border-radius:8px;background:#f8f3ded9}#notice{position:absolute;left:8px;top:9px;max-width:calc(100% - 126px);padding:5px 9px;background:#f8f3deed;border-radius:8px;font-size:12px;pointer-events:none}#notice:empty{display:none}.actionline{display:flex;align-items:center;gap:8px;min-height:44px}.actionline span{flex:1;font-size:12px;line-height:1.25}.actionline button{max-width:50%;font-size:13px}.controls{display:grid;grid-template-columns:104px .8fr 1fr 1fr;gap:6px;align-items:center;flex:none;height:105px}#joystick{position:relative;width:100px;height:100px;border:2px dashed #728b69;background:#e3e9cb;border-radius:50%;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center}#joystick b{font-size:34px;color:#647c62;pointer-events:none}#stick{position:absolute;width:34px;height:34px;border:2px solid #426a52;background:#7aa481cc;border-radius:50%;pointer-events:none}#basic,.skill{height:92px;font-size:11px;padding:4px;touch-action:none;user-select:none;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.skill img{width:38px;height:38px;object-fit:contain}.skill b{font-size:10px}.skill small{font-size:10px}.skill[data-cooling=true]{background:#d9decd}#basic{background:#efcf95;font-weight:800}footer{display:flex;justify-content:space-between;font-size:10px;color:#47624c;min-height:14px}dialog{width:min(540px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:18px;border:2px solid #486b53;border-radius:22px;background:var(--cream);color:var(--ink);overflow:auto;box-shadow:0 12px 70px #23382666}dialog::backdrop{background:#21362ac9}dialog h2{margin:0 0 12px;font-size:26px}dialog p{font-size:14px;line-height:1.5}dialog>button{margin:4px 0;width:100%}.cover{height:205px;background:linear-gradient(90deg,#f8f3ded9 0%,transparent 65%),url(cover.webp) center/cover;border-radius:14px;padding:15px}.cover h2{font-size:34px;color:#24443e;margin:0;padding-bottom:4px;text-shadow:0 1px #fff4d3}.cover span{font-size:10px;letter-spacing:2px;font-weight:900}.menu-actions,.settings{display:flex;flex-wrap:wrap;gap:6px}.menu-actions button{flex:1}.settings button{flex:1;font-size:12px}.settings select{max-width:100%;flex:1 0 100%}.recipe{display:grid;grid-template-columns:52px 1fr;gap:6px;padding:12px 0;border-bottom:1px solid #c8d4bb}.recipe>img{width:52px;height:52px;object-fit:contain}.recipe h3{font-size:15px;margin:0}.recipe p{font-size:12px;margin:3px 0}.recipe .choices{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}.recipe button{font-size:12px;flex:1}.cropchoices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cropchoices button{font-size:12px;display:flex;flex-direction:column;align-items:center}.cropchoices img{width:45px;height:45px}.stock{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:12px}.stock>div{display:flex;align-items:center;gap:6px}.stock img{width:36px;height:36px}#resultactor{width:128px;height:128px;display:block;margin:auto}#loading{font-size:12px}#menu>p{margin:10px 0}
@media(max-width:350px){h1{font-size:19px}.hud{gap:4px;font-size:11px}.hud button{font-size:11px;padding:4px 6px}.controls{grid-template-columns:86px .8fr 1fr 1fr;height:88px;gap:4px}#joystick{width:84px;height:84px}#basic,.skill{height:84px}.skill img{width:30px;height:30px}.skill span{font-size:10px}.cover{height:155px}.cover h2{font-size:29px}dialog{padding:13px}#map{width:80px;height:60px}#notice{max-width:calc(100% - 105px)}}
@media(max-height:480px) and (min-width:600px){#app{display:grid;grid-template-columns:1fr 225px;grid-template-rows:34px 28px 28px 1fr 44px 14px;gap:4px;padding:4px 8px}header{grid-column:1/-1}header button{min-height:30px}h1{font-size:20px}.hud{grid-column:1/-1}.hud button{min-height:27px}#quest{grid-column:1/-1;min-height:0}.stage{grid-row:4/6;grid-column:1;min-height:110px}.controls{grid-row:4;grid-column:2;grid-template-columns:90px 1fr;grid-template-rows:90px 70px;height:auto;align-self:start}#joystick{width:88px;height:88px}#basic{height:88px}.skill{height:70px}.skill img{height:26px;width:26px}.actionline{grid-column:2;grid-row:5;min-height:0;gap:3px}.actionline button{min-height:40px;font-size:11px;padding:4px}.actionline span{font-size:10px}footer{grid-column:1/-1;grid-row:6}.cover{height:135px}dialog{max-height:calc(100dvh - 12px)}#map{width:90px;height:68px}}