/* Eli's World — mini-game สวนผักน้อง eli (w_farm.js). Sticker-game UI like the home HUD: white panels, thick white outlines, indigo / yellow / orange. */
.pg.w-farm{background:#9BCB6A;overflow:hidden}
.w-farm .wbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-field{position:absolute;inset:0}
/* plots: the button is the soil bed; the crop stands on it and may grow above it; a ripe crop bounces with a sparkle */
.fm-plot{position:absolute;width:var(--ps);height:calc(var(--ps) * .705);padding:0;border:0;background:none;transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.fm-plot .soil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(60,40,10,.22))}
.fm-plot .crop{position:absolute;left:50%;bottom:30%;width:58%;transform:translateX(-50%);transform-origin:50% 100%;animation:fmSway 3.2s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(40,60,10,.25))}
.fm-plot[data-st=sprout] .crop{width:30%;bottom:38%}
.fm-plot[data-st=ripe] .crop{width:78%;bottom:26%;animation:fmRipe 1.4s ease-in-out infinite}
@keyframes fmSway{50%{transform:translateX(-50%) rotate(2.5deg)}}
@keyframes fmRipe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05,.96) translateY(2px)}}
.fm-plot .tm{position:absolute;left:2%;bottom:0;z-index:2;padding:3px 8px;border-radius:11px;background:#fff;font:800 11.5px/1.2 var(--num);color:#1B2357;box-shadow:0 2px 6px rgba(0,0,0,.2);white-space:nowrap;pointer-events:none}
.fm-plot .tm:empty{display:none}
.fm-plot .tm::before{content:"⏱ ";font-size:10px}
.fm-plot.wet .tm{background:#E5F3FF;color:#1E5FA8}
.fm-plot.wet .tm::before{content:"💧 "}
.fm-plot .rp{position:absolute;right:2%;bottom:70%;z-index:2;width:28%;height:40%;background:url(assets/fi_star.png) center/contain no-repeat;opacity:0;pointer-events:none}
.fm-plot[data-st=ripe] .rp{opacity:1;animation:fmSpark 1.2s ease-in-out infinite}
@keyframes fmSpark{50%{transform:scale(1.25) rotate(12deg)}}
.fm-plot[data-st=empty]::after{content:"+";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);font:800 19px/1 var(--num);color:#5E8F2E;box-shadow:0 2px 6px rgba(0,0,0,.18);animation:fmPlus 1.8s ease-in-out infinite}
@keyframes fmPlus{50%{transform:scale(1.12)}}
.fm-plot:active .soil{transform:scale(.97)}
.w-farm .eli-m{z-index:4}
/* HUD */
.fm-top{position:absolute;left:0;right:0;top:0;padding:46px 12px 0;display:flex;align-items:flex-start;gap:8px;z-index:8;pointer-events:none}
.fm-top>*{pointer-events:auto}
.fm-back{flex:none;width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1E2A7E;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 4px 10px rgba(30,40,80,.25)}
.fm-back svg{width:24px;height:24px}
.fm-ttl{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.fm-ttl .tt{display:block;width:min(196px,100%);height:auto;margin:-6px 0 0 -4px;filter:drop-shadow(0 3px 4px rgba(30,40,80,.25))}
.fm-ttl .lv{position:relative;display:flex;align-items:center;width:min(180px,100%);height:24px;margin-top:2px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 3px 8px rgba(30,40,80,.2)}
.fm-ttl .lv em{flex:none;height:24px;padding:0 10px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#3A5BDA,#2341BC);font:800 12.5px var(--num);font-style:normal;color:#fff}
.fm-ttl .xp{flex:1;height:10px;margin:0 8px 0 6px;border-radius:5px;background:#E9E4DA;overflow:hidden}
.fm-ttl .xp i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#F6C343,#F2B21E);transition:width .6s var(--ease)}
.fm-chips{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fm-chip{display:flex;align-items:center;gap:5px;height:38px;padding:0 12px 0 4px;border:0;border-radius:19px;background:#fff;box-shadow:0 3px 8px rgba(30,40,80,.22);cursor:pointer}
.fm-chip img{width:34px;height:34px;object-fit:contain;margin:-4px 0}
.fm-chip b{font:800 17px var(--num);color:#1B2357}
.fm-chip small{font:700 9.5px/1.1 var(--f);color:#5C6F95;max-width:44px;white-space:normal}
/* toolbar */
.fm-tools{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(366px,calc(100% - 24px));display:flex;justify-content:space-around;padding:8px 6px 6px;border-radius:26px;background:rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 8px 20px rgba(30,40,80,.25);z-index:8}
.fm-tool{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer}
.fm-tool img{width:62px;height:62px;object-fit:contain;margin-top:-26px;filter:drop-shadow(0 4px 5px rgba(30,40,80,.25));transition:transform .15s}
.fm-tool span{font:800 13px var(--f);color:#1E2A7E;white-space:nowrap}
.fm-tool:active img{transform:scale(.9)}
.fm-tool .dot{position:absolute;right:22%;top:-24px;width:14px;height:14px;border-radius:50%;background:#E8453C;box-shadow:0 0 0 3px #fff;opacity:0;transform:scale(0);transition:.3s var(--spring)}
.fm-tool .dot.on{opacity:1;transform:none;animation:fmPlus 1.4s ease-in-out infinite}
/* sheets (seed packets 2×2, order board) */
.sheet .fm-h{text-align:center;font:800 20px var(--f);color:#1E2A7E}
.fm-sub{margin:-6px 0 12px;font:500 12.5px var(--f);color:#7A746E;text-align:center}
.fm-seeds{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fm-seed{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px 10px;border:0;border-radius:18px;background:#FBF8F3;box-shadow:0 0 0 1.5px #EFE7DA,0 3px 8px rgba(60,40,10,.06);cursor:pointer}
.fm-seed .pk{position:relative;width:84px;height:84px}
.fm-seed .pk .bag{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(60,40,10,.18))}
.fm-seed .pk .veg{position:absolute;left:24%;top:34%;width:52%;height:52%;object-fit:contain}
.fm-seed b{font:800 15px var(--f);color:#1E2A7E}
.fm-seed span{font:800 13px var(--f);color:#1E2A7E}
.fm-seed em{margin-top:3px;padding:1px 8px;border-radius:9px;background:#FFF1C9;font:800 11px var(--num);font-style:normal;color:#A26A00}
.fm-seed.lock{filter:grayscale(.85);opacity:.6}
.fm-seed.lock em{background:#ECE8E2;color:#6E6A66}
.fm-seed:active{transform:scale(.96)}
.fm-ords{display:flex;flex-direction:column;gap:8px}
.fm-ord{display:flex;align-items:center;gap:10px;width:100%;min-height:70px;padding:8px 10px;border:0;border-radius:18px;background:#fff;text-align:left;box-shadow:0 0 0 1.5px #EFE7DA,0 3px 8px rgba(60,40,10,.06);cursor:pointer;transition:box-shadow .2s,background .2s}
.fm-ord.on{background:#F4F7FF;box-shadow:0 0 0 2.5px #3A5BDA,0 4px 10px rgba(42,59,156,.15)}
.fm-ord .ic{flex:none;display:flex;width:84px;justify-content:center}
.fm-ord .ic img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.fm-ord .ic img+img{margin-left:-18px;margin-top:14px}
.fm-ord .tx{flex:1;min-width:0}
.fm-ord .tx b{display:block;font:800 14.5px var(--f);color:#1E2A7E}
.fm-ord .tx small{display:block;margin-top:2px;font:600 11.5px/1.45 var(--f);color:#6E6A66}
.fm-ord .tx small i{font-style:normal;color:#C0442F}
.fm-ord .tx small i.have{color:#2E7D1F}
.fm-ord em{flex:none;padding:6px 10px;border-radius:12px;background:#F6C343;font:800 14px var(--num);font-style:normal;color:#1E2A7E}
.fm-ord.ok:not(.on) em{box-shadow:0 0 0 2px #7BC86C}
.fm-inv{display:flex;align-items:center;gap:4px;margin:10px 0 0;padding:8px 10px;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px #EFE7DA}
.fm-inv .bk{width:46px;height:46px;object-fit:contain;margin-right:4px}
.fm-inv span{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;border-left:1px solid #EFE7DA}
.fm-inv span img{width:34px;height:34px;object-fit:contain}
.fm-inv b{font:800 12.5px var(--num);color:#1E2A7E}
.fm-send{display:block;width:100%;height:58px;margin-top:12px;border:0;border-radius:29px;background:#F6C343;font:800 20px var(--f);color:#1E2A7E;box-shadow:0 5px 0 #D9A322,0 10px 18px rgba(200,140,0,.25);cursor:pointer}
.fm-send:disabled{background:#ECE8E2;color:#8F8981;box-shadow:0 4px 0 #D8D2C8;font-size:15px;cursor:default}
/* the way in: a garden signpost on the Eli's World lawn */
.wh-farm{position:absolute;z-index:5;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;cursor:pointer}
.wh-farm img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(30,40,80,.3));animation:fmPlus 2.4s ease-in-out infinite}
.wh-farm span{margin-top:-6px;padding:2px 8px;border-radius:10px;background:#fff;font:800 11px var(--f);color:#2E6B1E;box-shadow:0 2px 5px rgba(0,0,0,.15);white-space:nowrap}