:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
[hidden]{display:none!important}
--ink:#3b2a1e;--cream:#fff8e8;--card:#fff6df;--gold:#ffc83d;--green:#5fbf4a;--font:"Trebuchet MS","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3f7f34;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#cv{position:fixed;inset:0;display:block;touch-action:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
img.ic{width:20px;height:20px;vertical-align:-5px}
img.ic.sm{width:15px;height:15px;vertical-align:-3px}
img.ic.big{width:44px;height:44px}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#8fd6ff,#d9f3ff 55%,#7ad35a 55%);z-index:50}
.ld-logo{font-size:44px;font-weight:900;color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:0 4px 0 var(--ink);letter-spacing:1px}
.ld-sub{margin-top:10px;font-weight:800;color:var(--ink)}
/* top hud */
#hud-top{position:fixed;left:0;right:0;top:0;padding:calc(var(--sat) + 8px) calc(var(--sar) + 8px) 0 calc(var(--sal) + 8px);pointer-events:none;z-index:10}
#hud-top>*{pointer-events:auto}
.row1{display:flex;align-items:center;gap:6px}
.spacer{flex:1}
.pill{display:flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 4px;background:var(--cream);border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 3px 0 rgba(59,42,30,.35);font-weight:900;font-size:16px}
.pill img{width:26px;height:26px}
.pill.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}
.lvl{padding:0 8px 0 0;gap:6px}
.lvl-badge{width:34px;height:34px;margin:-2.5px 0 -2.5px -2.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#ffbe1a);border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px}
.xpbar{width:46px;height:10px;border-radius:6px;background:#e8d9b8;border:2px solid var(--ink);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(#a4ec7d,#53b83a);transition:width .4s}
.rbtn{width:40px;height:40px;border-radius:50%;background:var(--cream);border:2.5px solid var(--ink);box-shadow:0 3px 0 rgba(59,42,30,.35);display:flex;align-items:center;justify-content:center}
.rbtn img,.rbtn svg{width:26px;height:26px}
.rbtn:active,.chip:active,.big:active,.btn:active:not(:disabled),.bcard:active{transform:translateY(2px)}
#btn-sound .mute{display:none}#btn-sound.off .mute{display:inline}#btn-sound.off .wave{display:none}
.res-strip{display:flex;gap:5px;margin-top:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
.res-strip::-webkit-scrollbar{display:none}
.rchip{flex:none;display:flex;align-items:center;gap:3px;height:28px;padding:0 8px 0 3px;border-radius:14px;background:rgba(255,248,232,.92);border:2px solid var(--ink);font-weight:900;font-size:14px}
.rchip img{width:22px;height:22px}
.rchip small{font-size:10px;opacity:.55;font-weight:800}
.rchip.full{background:#ffd9d2;border-color:#b5372a}
.quest{display:flex;align-items:center;gap:8px;margin-top:4px;max-width:440px;padding:6px 10px 6px 6px;border-radius:14px;background:rgba(59,42,30,.78);color:#fff;border:2px solid rgba(255,255,255,.25)}
.quest .q-ic img{width:30px;height:30px;vertical-align:middle}
.q-t{display:flex;flex-direction:column;min-width:0}
.q-t b{font-size:14px}
.q-t b em{font-style:normal;color:var(--gold);margin-left:4px}
.q-t span{font-size:12px;opacity:.85;line-height:1.25}
/* bottom hud */
#hud-bottom{position:fixed;left:0;right:0;bottom:0;padding:0 calc(var(--sar) + 10px) calc(var(--sab) + 12px) calc(var(--sal) + 10px);display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;z-index:10;transition:transform .25s,opacity .25s}
#hud-bottom>*{pointer-events:auto}
#hud-bottom.hide{transform:translateY(120%);opacity:0}
.chip{display:flex;align-items:center;gap:6px;height:48px;padding:0 12px 0 6px;border-radius:24px;background:var(--cream);border:2.5px solid var(--ink);box-shadow:0 4px 0 rgba(59,42,30,.35);text-align:left}
.chip img{width:34px;height:34px}
.chip span{display:flex;flex-direction:column;line-height:1.05}
.chip small{font-size:10px;font-weight:800;opacity:.6;text-transform:uppercase}
.chip b{font-size:15px}
.chip.round{width:48px;padding:0;justify-content:center}
.chip.round svg{width:28px;height:28px}
.big{display:flex;flex-direction:column;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe783,#ffb81c);border:3px solid var(--ink);box-shadow:0 5px 0 rgba(59,42,30,.45);font-weight:900;font-size:13px}
.big img{width:40px;height:40px;margin-bottom:-2px}
/* panels */
.panel{position:fixed;left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);bottom:calc(var(--sab) + 8px);background:var(--card);border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 rgba(59,42,30,.35),0 10px 30px rgba(0,0,0,.25);z-index:20;max-width:860px;margin:0 auto;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.bb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 0 16px;font-size:18px}
.x{width:34px;height:34px;border-radius:50%;background:#f0e2c2;border:2px solid var(--ink);font-weight:900;font-size:16px}
.bcards{display:flex;gap:8px;overflow-x:auto;padding:8px 12px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.bcard{flex:none;width:96px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 7px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 rgba(59,42,30,.3)}
.bcard .bimg{width:64px;height:58px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#e7f7d8,#c8ebb0);border-radius:10px}
.bcard img.bi{width:54px;height:54px;vertical-align:0}
.bcard b{font-size:12px;line-height:1.1;text-align:center;min-height:26px;display:flex;align-items:center}
.bcost{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 5px;font-size:12px;font-weight:900}
.cost{white-space:nowrap}
.cost img.ic{width:16px;height:16px;vertical-align:-3px;margin-right:1px}
.cost.short{color:#c0392b}
.bcard.locked{filter:grayscale(1);opacity:.6}
.bcard.poor{background:#fff1ee}
.lk{font-size:11px;color:#7a6a5a}
.pb-info{display:flex;align-items:center;gap:10px;padding:10px 14px 4px}
.pb-info>img{width:46px;height:46px;flex:none}
.pb-info b{font-size:16px}
.pb-info span{display:block;font-size:12px;opacity:.8}
.pcost{margin-top:3px;display:flex;gap:8px;font-weight:900;font-size:13px}
.pb-row{display:flex;align-items:center;gap:8px;padding:4px 10px 10px 14px}
#pb-why{flex:1;font-size:13px;font-weight:800;color:#2f7a2a}
#pb-why.bad{color:#c0392b}
.btn{min-height:40px;padding:0 16px;border-radius:20px;background:#7fd65a;border:2.5px solid var(--ink);box-shadow:0 3px 0 rgba(59,42,30,.35);font-weight:900;font-size:15px}
.btn.gold{background:var(--gold)}
.btn.ghost{background:#f0e2c2}
.btn.sm{min-height:32px;padding:0 10px;font-size:13px;border-radius:16px}
.btn.round{width:52px;height:52px;padding:0;border-radius:50%;font-size:22px}
.btn.ok{background:#7fd65a}
.btn:disabled{filter:grayscale(.8);opacity:.5}
/* sheet */
#sheet{position:fixed;inset:0;z-index:30;background:rgba(30,20,10,.35);display:flex;align-items:flex-end;justify-content:center;padding:calc(var(--sat) + 40px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px)}
.sheet-card{width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;background:var(--card);border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 rgba(59,42,30,.4);transform:translateY(30px);opacity:0;transition:transform .22s ease-out,opacity .22s}
#sheet.show .sheet-card{transform:none;opacity:1}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px 14px;border-bottom:2px dashed rgba(59,42,30,.2)}
#sh-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:900}
#sh-title img{width:40px;height:40px}
#sh-body{overflow-y:auto;padding:8px 16px 16px;-webkit-overflow-scrolling:touch}
#sh-body h4{margin:12px 0 6px;font-size:15px}
.muted{opacity:.75;font-size:14px}
.small{font-size:12px}
.bad{color:#c0392b;font-weight:800}
.recipe{display:flex;align-items:center;gap:6px;font-weight:900;font-size:18px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 12px}
.recipe img.ic{width:30px;height:30px;vertical-align:-8px}
.recipe small{font-size:12px;opacity:.6;margin-left:auto}
.arr{color:#53b83a}
.pbar{height:14px;margin-top:10px;border-radius:8px;background:#e8d9b8;border:2px solid var(--ink);overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(#a4ec7d,#53b83a);transition:width .2s linear}
.status{font-weight:800;font-size:14px;margin:8px 0}
.qrow{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.slist,.mlist,.orders{display:flex;flex-direction:column;gap:6px}
.srow,.mrow{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid rgba(59,42,30,.25);border-radius:12px;padding:5px 8px;font-weight:800}
.srow img,.mrow>img{width:28px;height:28px}
.srow span,.mrow span{flex:1}
.mrow small{opacity:.6}
.mrow em{font-style:normal;font-size:13px;opacity:.8;white-space:nowrap}
.order{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:7px 10px}
.order.wait{justify-content:center;opacity:.6;font-weight:800;border-style:dashed}
.o-who{font-weight:900;width:100%;font-size:13px;color:#8a5530}
.o-it{display:flex;gap:8px;flex:1;font-weight:900;flex-wrap:wrap}
.o-rw{font-weight:900;font-size:14px;white-space:nowrap}
.seeds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seed{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:#fff;border:2.5px solid var(--ink);border-radius:14px}
.seed span{font-size:11px;opacity:.75;text-align:center}
.seed.sel{background:#e3f7d4;box-shadow:0 0 0 3px #53b83a}
.seed.locked{filter:grayscale(1);opacity:.55}
.shop{display:flex;flex-direction:column;gap:8px}
.sitem{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:6px 10px}
.sitem>div{flex:1;display:flex;flex-direction:column}
.sitem span{font-size:12px;opacity:.75}
.demo{font-size:12px;text-align:center}
.menu .tog{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;font-weight:800;border-bottom:1px solid rgba(59,42,30,.12)}
.menu input[type=checkbox]{width:22px;height:22px;accent-color:#53b83a}
.help{padding-left:18px;margin:4px 0;font-size:14px;line-height:1.4}
.help li{margin-bottom:5px}
/* modal */
#modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(30,20,10,.45);padding:20px}
.m-card{width:100%;max-width:340px;text-align:center;background:var(--card);border:3px solid var(--ink);border-radius:24px;padding:18px 18px 16px;box-shadow:0 6px 0 rgba(59,42,30,.4);transform:scale(.7);opacity:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s}
#modal.show .m-card{transform:none;opacity:1}
.m-card h2{margin:6px 0 4px;font-size:24px}
.m-card p{margin:6px 0}
.m-ic img{width:72px;height:72px}
.m-lvl{width:76px;height:76px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#ffbe1a);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:900;animation:spin .8s ease-out}
@keyframes spin{from{transform:rotate(-180deg) scale(.3)}}
.m-rew{display:inline-block;margin:8px 0;padding:6px 12px;background:#fff;border:2px solid var(--ink);border-radius:14px;font-weight:900}
.next{font-size:14px}
.unls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.unl{display:flex;flex-direction:column;align-items:center;width:80px;font-size:12px;font-weight:800}
.unl img{width:46px;height:46px}
.wb{text-align:left;font-size:14px;margin:6px 0 4px;padding-left:22px}
.m-btn{margin-top:10px;min-width:140px;min-height:46px;font-size:17px}
/* toasts */
#toasts{position:fixed;left:0;right:0;top:calc(var(--sat) + 150px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:35}
.toast{max-width:88%;padding:8px 14px;border-radius:14px;background:rgba(59,42,30,.9);color:#fff;font-weight:800;font-size:14px;text-align:center;animation:up .2s;transition:opacity .4s,transform .4s}
.toast.warn{background:rgba(176,58,40,.94)}
.toast.out{opacity:0;transform:translateY(-10px)}
.flycoin{position:fixed;width:26px;height:26px;z-index:60;pointer-events:none;transition:left .6s cubic-bezier(.5,-0.3,.6,1),top .6s cubic-bezier(.4,0,.7,1),opacity .6s,transform .6s}
/* platform mock overlay */
.pf-overlay{position:fixed;inset:0;z-index:70;background:rgba(10,10,20,.7);display:flex;align-items:center;justify-content:center;padding:20px}
.pf-box{max-width:320px;width:100%;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:16px}
.pf-box h3{margin:4px 0}
.pf-count{display:inline-block;margin-top:8px;font-size:34px;font-weight:900}
.pf-btns{display:flex;gap:8px;justify-content:center;margin-top:10px}
/* small / landscape tweaks */
@media (max-width:380px){.pill{font-size:14px;height:32px}.pill img{width:22px;height:22px}.xpbar{width:34px}.rbtn{width:36px;height:36px}.quest{padding:4px 8px 4px 4px}.q-t span{font-size:11px}.big{width:70px;height:70px}}
@media (max-height:500px){.quest .q-t span{display:none}.res-strip{margin-top:5px}.big{width:64px;height:64px}.big img{width:32px;height:32px}.chip{height:42px}#sheet{padding-top:calc(var(--sat) + 10px)}}
@media (min-width:900px){.quest{max-width:420px}.res-strip{max-width:640px}}