/* Layout: one-screen game. Isometric farm canvas fills the screen; wooden HUD floats on top,
   a three-tile dock sits at the bottom, paper sheets slide up for barn, orders, buildings and helpers.
   Single daylight look by design (a farm at noon), so every color is set explicitly. */
:root{
  --meadow:#6aa83f;
  --paper:#fff8e7; --paper-2:#f6e8c4; --paper-3:#e3cb93;
  --wood:#b5713a; --wood-dk:#7a431f;
  --ink:#45301b; --ink-soft:#7d6448;
  --leaf:#4fa83d; --leaf-dk:#2f7426;
  --sky:#3fa3e6; --sky-dk:#1f6aa0;
  --gold:#f7c531; --gold-dk:#c48612;
  --berry:#d9483a; --berry-dk:#9b2a20;
  --glass:rgba(42,26,10,.58);
  --font-display:"Titan One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --font-body:"Baloo 2",ui-rounded,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--meadow);color:var(--ink);font-family:var(--font-body)}
#app{position:fixed;inset:0;overflow:hidden;background:var(--meadow);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#farm{position:absolute;inset:0;display:block;touch-action:none;cursor:grab}
#farm:active{cursor:grabbing}
button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

/* HUD */
.hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:4px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.hud>*{pointer-events:auto}
.lvl{display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:230px}
.star{position:relative;width:46px;height:46px;flex:none;z-index:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.star svg{position:absolute;inset:0;width:100%;height:100%}
.star span{position:absolute;inset:0;display:grid;place-items:center;padding-top:4px;font:400 16px/1 var(--font-display);color:#fff;text-shadow:0 2px 0 var(--sky-dk)}
.xpbar{position:relative;flex:1;min-width:60px;height:22px;margin-left:-14px;background:var(--glass);border-radius:0 12px 12px 0;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.xpbar i{position:absolute;left:0;top:3px;bottom:3px;width:0;background:linear-gradient(#8fd8ff,var(--sky));border-radius:0 9px 9px 0;transition:width .45s ease}
.xpbar span{position:absolute;inset:0;display:grid;place-items:center;padding-left:12px;font:700 12px/1 var(--font-body);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.coins{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 0;background:var(--glass);border-radius:16px;color:#fff;font:400 16px/1 var(--font-display);letter-spacing:.02em;box-shadow:inset 0 2px 4px rgba(0,0,0,.3);font-variant-numeric:tabular-nums}
.coins img{width:34px;height:34px;margin:-4px 0 -4px -6px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.coins.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.12)}}
.round{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--wood);box-shadow:inset 0 -4px 0 var(--wood-dk),0 2px 0 rgba(0,0,0,.25);display:grid;place-items:center;color:#fff;cursor:pointer}
.round svg{width:22px;height:22px}
.round:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--wood-dk)}
.hint{position:absolute;z-index:4;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:7px 14px;border-radius:14px;background:var(--paper);color:var(--ink);font:700 14px/1.25 var(--font-body);text-align:center;box-shadow:0 3px 0 var(--paper-3),0 6px 16px rgba(0,0,0,.18);pointer-events:none;text-wrap:balance}
.toast{position:absolute;z-index:40;left:50%;top:calc(env(safe-area-inset-top,0px) + 106px);transform:translate(-50%,-8px);width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:9px 16px;border-radius:14px;background:rgba(45,28,12,.9);color:#fff;font:600 14px/1.3 var(--font-body);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.warn{background:var(--berry-dk)}
.toast.good{background:var(--leaf-dk)}
.tip{position:absolute;z-index:6;left:0;top:0;transform:translate(-50%,-100%);padding:6px 10px 8px;border-radius:12px;background:var(--paper);box-shadow:0 3px 0 var(--paper-3),0 6px 14px rgba(0,0,0,.2);display:flex;align-items:center;gap:8px;pointer-events:none;white-space:nowrap}
.tip img{width:28px;height:28px}
.tip b{display:block;font:700 13px/1.1 var(--font-body)}
.tip small{display:block;font:600 12px/1.2 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tip .bar{display:block;width:84px;height:6px;margin-top:3px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.tip .bar i{display:block;height:100%;background:var(--leaf)}
.fab{position:absolute;z-index:5;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}

/* Dock */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:12px;
  padding-top:8px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.dock button{pointer-events:auto;position:relative;width:80px;height:78px;border:0;border-radius:18px;cursor:pointer;
  background:linear-gradient(#fffaf0,#f3e3bd);box-shadow:inset 0 -5px 0 #d8bd83,0 3px 0 rgba(70,40,10,.35),0 8px 16px rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5px 4px 0;color:var(--ink)}
.dock button:active{transform:translateY(2px)}
.dock img{width:42px;height:42px}
.dock span{font:800 13px/1.1 var(--font-body)}
.dock small{font:700 11px/1.1 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dock button.full small{color:var(--berry)}
.dock button.bump{animation:bump .3s ease}
@keyframes bump{50%{transform:scale(1.08)}}
.badge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--berry);color:#fff;font:400 13px/24px var(--font-display);box-shadow:0 2px 0 var(--berry-dk)}
.badge.ok{background:var(--leaf);box-shadow:0 2px 0 var(--leaf-dk)}

/* Seed tray */
.tray{position:absolute;left:0;right:0;z-index:6;bottom:calc(env(safe-area-inset-bottom,0px) + 102px);display:flex;justify-content:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tray-in{width:100%;max-width:560px;min-width:0;background:var(--paper);border-radius:18px;padding:10px;box-shadow:0 4px 0 var(--paper-3),0 10px 24px rgba(0,0,0,.22)}
.tray-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tray-head p{flex:1;min-width:0;margin:0;font:700 13px/1.2 var(--font-body);color:var(--ink-soft)}
.seeds{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;touch-action:pan-x}
.seeds::-webkit-scrollbar{display:none}
.seed{flex:none;width:74px;border:2px solid transparent;border-radius:14px;background:var(--paper-2);padding:6px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink)}
.seed img{width:34px;height:34px}
.seed b{font:800 12px/1.1 var(--font-body)}
.seed small{display:flex;align-items:center;gap:2px;font:600 11px/1.1 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.seed small img{width:13px;height:13px}
.seed.sel{border-color:var(--leaf);background:#e8f5d4}
.seed:disabled{opacity:.45;cursor:not-allowed}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;
  font:800 15px/1 var(--font-body);color:#fff;background:var(--leaf);box-shadow:inset 0 -4px 0 var(--leaf-dk),0 2px 0 rgba(0,0,0,.12);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--leaf-dk)}
.btn:disabled{background:#cfc4ab;box-shadow:inset 0 -4px 0 #ad9f82;color:#f9f4e8;text-shadow:none;cursor:not-allowed}
.btn.gold{background:var(--gold);box-shadow:inset 0 -4px 0 var(--gold-dk),0 2px 0 rgba(0,0,0,.12);color:var(--ink);text-shadow:none}
.btn.gold:disabled{background:#e6dcc0;box-shadow:inset 0 -4px 0 #c4b794;color:#9b8c6c}
.btn.ghost{background:var(--paper-2);box-shadow:inset 0 -3px 0 var(--paper-3);color:var(--ink-soft);text-shadow:none}
.btn.sm{padding:8px 11px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}
.btn img{width:20px;height:20px}
.ct{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.ct img{width:18px;height:18px}
.x{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:var(--berry);box-shadow:inset 0 -3px 0 var(--berry-dk);color:#fff;display:grid;place-items:center;cursor:pointer;font:400 20px/1 var(--font-display);padding-bottom:2px}
.x.sm{width:32px;height:32px;font-size:17px}

/* Sheets */
.scrim{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(36,22,8,0);transition:background .22s}
.scrim.on{background:rgba(36,22,8,.38)}
.sheet{width:100%;max-width:520px;max-height:min(80%,660px);display:flex;flex-direction:column;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.25);transform:translateY(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.scrim.on .sheet{transform:none}
.sheet-head{flex:none;display:flex;align-items:center;gap:10px;border-radius:22px 22px 0 0;border-bottom:3px solid var(--wood-dk);
  padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:repeating-linear-gradient(176deg,rgba(255,255,255,.06) 0 3px,rgba(0,0,0,.04) 3px 9px),var(--wood)}
.sheet-head h2{flex:1;min-width:0;margin:0;font:400 22px/1.1 var(--font-display);color:#fff;text-shadow:0 2px 0 var(--wood-dk);letter-spacing:.01em;text-wrap:balance}
.sheet-body{overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;
  padding-top:14px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet-body h3{margin:4px 0 -4px;font:400 15px/1.2 var(--font-display);color:var(--wood-dk);letter-spacing:.02em}
.lede{margin:0;font:600 15px/1.4 var(--font-body);color:var(--ink-soft);max-width:60ch}
.note{margin:0;font:600 13px/1.35 var(--font-body);color:var(--ink-soft)}
.empty{margin:8px 0;padding:18px;border:2px dashed var(--paper-3);border-radius:16px;text-align:center;font:700 14px/1.4 var(--font-body);color:var(--ink-soft)}

/* orders */
.orders{display:grid;gap:10px}
.order{background:var(--paper-2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 -3px 0 var(--paper-3)}
.order.ready{background:#e9f5d6;box-shadow:inset 0 -3px 0 #bfdc95}
.o-items{display:flex;flex-wrap:wrap;gap:8px}
.o-it{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:4px;background:var(--paper);border-radius:12px;padding:5px 9px 5px 5px}
.o-it img{grid-row:span 2;width:36px;height:36px}
.o-it span{font:400 15px/1 var(--font-display);color:var(--berry);font-variant-numeric:tabular-nums}
.o-it.ok span{color:var(--leaf-dk)}
.o-it small{font:600 11px/1.1 var(--font-body);color:var(--ink-soft)}
.o-foot{display:flex;align-items:center;gap:8px}
.rew{flex:1;display:flex;gap:10px;font:400 15px/1 var(--font-display);color:var(--ink)}
.rew .ct img{width:22px;height:22px}
.order.wait{flex-direction:row;align-items:center;gap:12px;opacity:.85}
.order.wait img{width:44px;height:44px;opacity:.6}
.order.wait p{margin:0;font:700 14px/1.3 var(--font-body);color:var(--ink-soft)}
.order.wait b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* barn */
.capline{display:flex;align-items:center;gap:10px}
.capbar{flex:1;height:14px;border-radius:7px;background:var(--paper-2);overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.12)}
.capbar i{display:block;height:100%;background:linear-gradient(#f5d36a,var(--gold));border-radius:7px}
.capline.full .capbar i{background:linear-gradient(#f08a7e,var(--berry))}
.capline b{font:400 15px/1 var(--font-display);font-variant-numeric:tabular-nums}
.inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.inv-it{position:relative;border:2px solid transparent;border-radius:14px;background:var(--paper-2);padding:6px 4px 6px;display:flex;flex-direction:column;align-items:center;cursor:pointer;color:var(--ink)}
.inv-it img{width:40px;height:40px}
.inv-it b{position:absolute;top:4px;right:6px;font:400 14px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.inv-it small{font:700 11px/1.1 var(--font-body);color:var(--ink-soft);text-align:center}
.inv-it.sel{border-color:var(--leaf);background:#e8f5d4}
.sell{position:sticky;bottom:-18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--paper);border-top:2px solid var(--paper-2);padding:10px 0 4px}
.sell>img{width:40px;height:40px}
.sell-t{flex:1;min-width:90px}
.sell-t b{display:block;font:800 15px/1.1 var(--font-body)}
.sell-t small{font:600 12px/1.2 var(--font-body);color:var(--ink-soft)}

/* buildings */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.slot{position:relative;min-height:84px;border:0;border-radius:14px;background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;overflow:hidden;color:var(--ink)}
.slot img{width:38px;height:38px}
.slot small{font:700 12px/1.1 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.slot.empty{background:transparent;border:2px dashed var(--paper-3)}
.slot.done{background:#e8f5d4;cursor:pointer;box-shadow:inset 0 -3px 0 #bfdc95}
.slot.done small{color:var(--leaf-dk)}
.slot.add{cursor:pointer;background:var(--paper);border:2px solid var(--paper-3)}
.slot.add b{font:400 24px/1 var(--font-display);color:var(--gold-dk)}
.slot.add:disabled{opacity:.55;cursor:not-allowed}
.prog{position:absolute;left:8px;right:8px;bottom:6px;height:5px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.prog::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--leaf);border-radius:3px}
.recs{display:grid;gap:8px}
.rec{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-radius:14px;padding:8px 10px 8px 8px}
.rec>img{width:44px;height:44px;flex:none}
.rec-m{flex:1;min-width:0}
.rec-m b{display:block;font:800 15px/1.1 var(--font-body)}
.rec-m small{font:600 12px/1.2 var(--font-body);color:var(--ink-soft)}
.ins{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.in{display:inline-flex;align-items:center;gap:2px;font:400 13px/1 var(--font-display);color:var(--berry);font-variant-numeric:tabular-nums}
.in.ok{color:var(--leaf-dk)}
.in img{width:20px;height:20px}
.rec.locked{opacity:.6}
.lk{font:700 12px/1.2 var(--font-body);color:var(--ink-soft)}
.pens{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.pen{position:relative;min-height:80px;border-radius:14px;background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;overflow:hidden}
.pen img{width:36px;height:36px}
.pen small{font:700 12px/1.1 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pen.hungry img{opacity:.55;filter:grayscale(.5)}
.pen.ready{background:#e8f5d4}
.pen.ready small{color:var(--leaf-dk)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lot-hero{display:flex;align-items:center;gap:12px}
.lot-hero img{width:64px;height:64px;flex:none}
.lot-hero p{margin:0;font:600 15px/1.4 var(--font-body);color:var(--ink-soft)}
.makes{display:flex;flex-wrap:wrap;gap:8px}
.makes span{display:inline-flex;align-items:center;gap:4px;background:var(--paper-2);border-radius:12px;padding:4px 10px 4px 4px;font:700 13px/1 var(--font-body)}
.makes img{width:28px;height:28px}
.makes em{font-style:normal;color:var(--ink-soft);font-weight:600}
.locknote{margin:0;padding:12px;border-radius:14px;background:var(--paper-2);text-align:center;font:700 14px/1.3 var(--font-body);color:var(--ink-soft)}

/* helpers */
.helpers{display:grid;gap:10px}
.hlp{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-radius:16px;padding:10px}
.hlp.hired{background:#e8f5d4}
.hlp.locked{opacity:.65}
.ava{width:46px;height:46px;flex:none;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;font:400 20px/1 var(--font-display);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);position:relative}
.ava::before{content:"";position:absolute;left:4px;right:4px;top:-5px;height:12px;border-radius:50% 50% 40% 40%;background:#efcb68;box-shadow:inset 0 -3px 0 #d9a944}
.hlp-m{flex:1;min-width:0}
.hlp-m b{display:block;font:800 15px/1.2 var(--font-body)}
.hlp-m b span{font-weight:600;color:var(--ink-soft)}
.hlp-m small{display:block;font:600 13px/1.3 var(--font-body);color:var(--ink-soft)}
.how{margin:0;padding-left:20px;display:grid;gap:6px;font:600 14px/1.4 var(--font-body);color:var(--ink)}
.row{display:flex;align-items:center;gap:10px}
.row p{flex:1;margin:0;font:700 15px/1.2 var(--font-body)}

/* modal */
.modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(36,22,8,.45);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.modal-card{width:100%;max-width:340px;background:var(--paper);border-radius:24px;padding:22px 18px 18px;text-align:center;box-shadow:0 6px 0 var(--paper-3),0 20px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:10px;animation:rise .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes rise{from{transform:scale(.8);opacity:0}}
.modal-card h2{margin:0;font:400 28px/1.1 var(--font-display);color:var(--wood-dk);text-wrap:balance}
.modal-card p{margin:0;font:600 15px/1.4 var(--font-body);color:var(--ink-soft)}
.lv-badge{position:relative;width:86px;height:86px;margin-top:-58px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.lv-badge svg{width:100%;height:100%}
.lv-badge span{position:absolute;inset:0;display:grid;place-items:center;padding-top:6px;font:400 28px/1 var(--font-display);color:#fff;text-shadow:0 2px 0 var(--sky-dk)}
.bonus{font:400 18px/1 var(--font-display)!important;color:var(--ink)!important}
.bonus .ct img{width:24px;height:24px}
.unl{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:6px;text-align:left}
.unl li{display:flex;align-items:center;gap:10px;background:var(--paper-2);border-radius:12px;padding:5px 10px 5px 5px;font:700 14px/1.2 var(--font-body)}
.unl img{width:32px;height:32px;flex:none}

/* flying icons */
.fx{position:absolute;inset:0;z-index:35;pointer-events:none}
.flyer{position:absolute;width:30px;height:30px;will-change:transform}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}