/* Lou Farm. Warm, chunky, friendly; big touch targets for small hands on a tablet. */
@font-face { font-family: 'Nunito'; src: url('assets/fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
:root {
  --ink: #3b2a1a; --muted: #8a7458; --cream: #fff8ea; --paper: #fdf1d8; --wood: #b77a45; --wood-d: #8a5530; --leaf: #6fb33f; --leaf-d: #4d8d2a;
  --sky: #5aa0e6; --berry: #e2405a; --sun: #ffc93c; --line: #ead7b4; --shadow: 0 6px 0 rgba(90, 55, 20, .25), 0 10px 22px rgba(60, 40, 10, .22);
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7fb24a; font-family: var(--font); color: var(--ink); overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* loading */
#loading { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #bfe4ff, #7fbf5a 75%); transition: opacity .6s; }
#loading.out { opacity: 0; pointer-events: none; }
.lcard { text-align: center; background: var(--cream); padding: 26px 34px 30px; border-radius: 28px; box-shadow: var(--shadow); min-width: min(360px, 86vw); }
.lcard h1 { margin: 0 0 6px; font-size: 46px; font-weight: 1000; color: var(--leaf-d); letter-spacing: .5px; text-shadow: 0 3px 0 #d8efc0; }
.lcard p { margin: 0 0 14px; color: var(--muted); font-weight: 700; }
.lbar { height: 16px; border-radius: 99px; background: #eadcc0; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.08); }
#loadFill { height: 100%; width: 3%; background: linear-gradient(90deg, #8fd14f, #5aa83a); border-radius: 99px; transition: width .25s; }

/* the top bar */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud .top { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); display: flex; gap: 8px; align-items: center; }
#hud .grow { flex: 1; }
.pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--cream); border: 3px solid #fff; border-radius: 999px; padding: 4px 14px 4px 6px; box-shadow: var(--shadow); font-weight: 900; font-size: 18px; min-height: 46px; }
.pill b { font-weight: 1000; }
.btnp { border: 3px solid #fff; }
.btnp:active { transform: translateY(2px); }
.lvl { padding-right: 10px; }
.badge { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.badge .star { position: absolute; inset: -3px; width: auto; height: auto; }
.badge b { position: relative; color: #fff; font-size: 16px; text-shadow: 0 2px 0 #1f5f9a; }
.xp { position: relative; width: 120px; height: 18px; border-radius: 99px; background: #eadcc0; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.08); }
#xpFill { height: 100%; background: linear-gradient(#7cc4ff, #3f8fd8); border-radius: 99px; transition: width .5s; }
#xpText { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 900; color: #2a3a4a; }
i.coin, i.star { display: inline-block; width: 30px; height: 30px; background: var(--coin-img) center/contain no-repeat; flex: none; vertical-align: middle; }
i.star { background-image: var(--star-img); }
.barnic, .ordic, .shopic { display: inline-block; width: 34px; height: 34px; background: var(--barn-img) center/contain no-repeat; }
.ordic { background-image: var(--board-img); width: 52px; height: 52px; }
.shopic { background-image: var(--shop-img); width: 56px; height: 56px; }
#btnBarn.full { background: #ffe1e1; animation: wiggle .6s 2; }
.who { font-size: 15px; padding: 4px 14px; }
.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.15); } }
@keyframes wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* round buttons */
.round { pointer-events: auto; border: 3px solid #fff; background: var(--cream); border-radius: 50%; box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.round:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(90,55,20,.25); }
.round.small { width: 50px; height: 50px; font-size: 24px; font-weight: 900; }
.round.big { width: 86px; height: 86px; flex-direction: column; gap: 0; }
.round.big .lbl { font-size: 13px; font-weight: 1000; margin-top: -4px; }
.round.shop { background: linear-gradient(#ffe27a, #ffc93c); }
#hud .left { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); display: flex; gap: 8px; }
#hud .right { position: absolute; right: calc(12px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: flex; gap: 12px; align-items: flex-end; }
.dot { position: absolute; top: -4px; right: -4px; background: var(--berry); color: #fff; min-width: 26px; height: 26px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 3px solid #fff; }
#hud.placing .right, #hud.placing .left { display: none; }
.placebar { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; pointer-events: auto; background: rgba(255,248,234,.92); padding: 8px 10px 8px 18px; border-radius: 99px; box-shadow: var(--shadow); }
.placebar .ptxt { font-weight: 900; margin-right: 4px; }
.round.yes { background: linear-gradient(#8fd14f, #5aa83a); color: #fff; }
.round.no { background: linear-gradient(#ff8f8f, #e2405a); color: #fff; }
.round:disabled { opacity: .45; }

/* bubbles over the farm */
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.bub { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; border: 3px solid #fff; background: var(--cream); border-radius: 18px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 4px 0 rgba(90,55,20,.22), 0 6px 14px rgba(0,0,0,.18); font-weight: 900; font-size: 14px; white-space: nowrap; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bub img { width: 38px; height: 38px; }
.bub.ready img { animation: float 1.6s ease-in-out infinite; }
.bub.ready img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.bub.timer { background: rgba(255,248,234,.92); font-size: 13px; padding: 3px 10px; }
.bub.hungry { background: #fff1d6; }
.bub.seeds { padding: 6px; gap: 6px; border-radius: 22px; animation: popin .2s; }
.bub.seeds button { border: 0; background: #fff; border-radius: 14px; padding: 2px 4px 0; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 900; min-width: 54px; }
.bub.seeds button.on { background: #dff3c8; box-shadow: inset 0 0 0 3px var(--leaf); }
.bub.seeds button img { width: 42px; height: 42px; }
.bub.seeds button .c { color: var(--muted); }
.bub.sign { background: #fff1d6; font-size: 13px; }
@keyframes float { 50% { transform: translateY(-5px); } }
@keyframes popin { from { opacity: 0; } }

/* panels */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(40, 30, 15, .35); padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
.sheetcard { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 4px solid #fff; border-radius: 28px; box-shadow: var(--shadow); animation: rise .22s cubic-bezier(.2,1.4,.5,1); overflow: hidden; }
.sheet.wide .sheetcard { width: min(860px, 100%); }
@keyframes rise { from { transform: translateY(26px) scale(.96); opacity: 0; } }
.sheethead { display: flex; align-items: center; padding: 12px 14px 6px 22px; background: linear-gradient(#ffe9b8, #fdf1d8); }
.sheethead h2 { margin: 0; flex: 1; font-size: 26px; font-weight: 1000; color: var(--wood-d); }
#sheetClose { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: #ffd5d5; font-size: 20px; font-weight: 900; box-shadow: 0 3px 0 rgba(90,55,20,.2); }
#sheetBody { padding: 8px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.hint, .empty { color: var(--muted); font-weight: 700; margin: 4px 2px 12px; }
.tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.tab { border: 3px solid #fff; background: #f3e2bf; border-radius: 99px; padding: 8px 18px; font-weight: 900; box-shadow: 0 3px 0 rgba(90,55,20,.15); }
.tab.on { background: var(--leaf); color: #fff; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { border: 3px solid #fff; background: var(--cream); border-radius: 20px; padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: 0 4px 0 rgba(90,55,20,.15); }
.card:active { transform: translateY(2px); }
.card .pic { width: 104px; height: 104px; }
.card b { font-size: 16px; font-weight: 1000; }
.card .desc { font-size: 12px; color: var(--muted); font-weight: 700; min-height: 30px; }
.card .price { margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; font-weight: 1000; font-size: 16px; background: #fff; border-radius: 99px; padding: 2px 12px 2px 4px; }
.card .price i.coin { width: 24px; height: 24px; }
.card.locked { opacity: .65; filter: grayscale(.6); }
.card.locked .price { padding: 3px 12px; font-size: 13px; }
.card.poor .price { color: #b0412a; }
.btn { border: 3px solid #fff; background: #f3e2bf; border-radius: 16px; padding: 10px 16px; font-weight: 1000; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 0 rgba(90,55,20,.18); text-decoration: none; color: inherit; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(90,55,20,.18); }
.btn.go { background: linear-gradient(#94d85a, #5aa83a); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn.go:disabled { background: #cfcfbf; color: #fff; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn.tiny { padding: 4px 8px; font-size: 12.5px; border-radius: 12px; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn.big { font-size: 22px; padding: 12px 36px; }
.btn img.ic { width: 28px; height: 28px; }
.btn i.coin { width: 22px; height: 22px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
img.ic { width: 40px; height: 40px; vertical-align: middle; }

/* barn */
.barnbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-weight: 800; }
.cap { flex: 1; min-width: 160px; height: 18px; border-radius: 99px; background: #eadcc0; overflow: hidden; }
.cap div { height: 100%; background: linear-gradient(90deg, #ffc93c, #f08a24); border-radius: 99px; }
.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.good { background: var(--cream); border: 3px solid #fff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; gap: 2px; position: relative; }
.good img.ic { width: 62px; height: 62px; }
.good b { position: absolute; top: 4px; right: 8px; font-size: 18px; font-weight: 1000; }
.good span { font-size: 12.5px; font-weight: 800; color: var(--muted); }

/* orders */
.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.order { background: var(--cream); border: 3px solid #fff; border-radius: 20px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 0 rgba(90,55,20,.12); }
.order.ready { background: #eaf7d8; box-shadow: 0 0 0 3px var(--leaf), 0 4px 0 rgba(90,55,20,.12); }
.order.wait { align-items: center; justify-content: center; color: var(--muted); font-weight: 800; min-height: 140px; }
.needs { display: flex; gap: 6px; flex-wrap: wrap; }
.need { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 14px; padding: 2px 6px; font-weight: 1000; font-size: 14px; color: #b0412a; }
.need.ok { color: var(--leaf-d); }
.need img.ic { width: 48px; height: 48px; }
.reward { display: flex; gap: 12px; font-weight: 1000; font-size: 18px; }
.reward span { display: inline-flex; align-items: center; gap: 3px; }
.obtns { display: flex; gap: 6px; }
.obtns .go { flex: 1; justify-content: center; }

/* workshops and animals */
.queue { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.slot { width: 92px; height: 104px; border-radius: 18px; background: var(--cream); border: 3px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 900; font-size: 13px; }
.slot.empty { background: rgba(255,255,255,.4); border-style: dashed; border-color: #e3cfa6; }
.slot.ready { background: #eaf7d8; animation: float 1.6s ease-in-out infinite; }
.slot img.ic { width: 54px; height: 54px; }
.bar { width: 76px; height: 9px; border-radius: 99px; background: #eadcc0; overflow: hidden; }
.bar div { height: 100%; background: linear-gradient(90deg, #7cc4ff, #3f8fd8); }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.recipe { display: flex; gap: 8px; align-items: center; text-align: left; border: 3px solid #fff; background: var(--cream); border-radius: 18px; padding: 8px 10px; box-shadow: 0 4px 0 rgba(90,55,20,.12); }
.recipe img.ic { width: 58px; height: 58px; }
.recipe b { display: block; font-size: 16px; font-weight: 1000; }
.recipe .ins { display: flex; gap: 6px; flex-wrap: wrap; }
.recipe .in { display: inline-flex; align-items: center; font-weight: 1000; font-size: 13px; color: #b0412a; }
.recipe .in.ok { color: var(--leaf-d); }
.recipe .in img.ic { width: 28px; height: 28px; }
.recipe .t { font-size: 12.5px; color: var(--muted); font-weight: 800; }
.recipe.no { opacity: .8; }
.recipe.locked { opacity: .55; filter: grayscale(.7); }
.pens { display: flex; gap: 10px; flex-wrap: wrap; }
.pen { width: 120px; border-radius: 18px; background: var(--cream); border: 3px solid #fff; display: flex; flex-direction: column; align-items: center; padding: 6px; font-weight: 900; font-size: 14px; gap: 2px; }
.pen .pic { width: 80px; height: 80px; }
.pen.hungry { background: #fff1d6; }
.pen.ready { background: #eaf7d8; }
.townp { text-align: center; font-weight: 700; font-size: 17px; }
.townp .pic.big { width: 170px; height: 170px; }
.townp .row { justify-content: center; }
.settings { display: flex; flex-direction: column; gap: 12px; font-weight: 800; font-size: 17px; }
.settings label { display: flex; align-items: center; gap: 10px; }
.settings input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--leaf); }
.settings select { font: inherit; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: #fff; }

/* level up */
.sheet.celebrate .sheethead { display: none; }
.levelup { text-align: center; padding: 10px 0 4px; }
.levelup h2 { font-size: 34px; margin: 6px 0; color: var(--leaf-d); font-weight: 1000; }
.burst { position: relative; width: 130px; height: 130px; margin: 6px auto 0; display: flex; align-items: center; justify-content: center; animation: spinpop .8s cubic-bezier(.2,1.5,.5,1); }
.burst i.star.big { position: absolute; inset: 0; width: 100%; height: 100%; }
.burst b { position: relative; font-size: 44px; color: #fff; text-shadow: 0 3px 0 #1f5f9a; }
@keyframes spinpop { from { transform: scale(.2) rotate(-90deg); } }
.unlocks { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 16px; }
.unlocks div { display: flex; flex-direction: column; align-items: center; width: 104px; font-weight: 900; font-size: 13.5px; background: var(--cream); border-radius: 16px; padding: 6px; border: 3px solid #fff; }
.unlocks img { width: 72px; height: 72px; }

/* toasts, floaters, flyers, confetti */
#toasts { position: fixed; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--cream); border: 3px solid #fff; border-radius: 99px; padding: 8px 18px; font-weight: 900; box-shadow: var(--shadow); animation: rise .25s; transition: opacity .4s, transform .4s; }
.toast.warn { background: #fff1d6; }
.toast.good { background: #eaf7d8; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.flyer { position: fixed; left: 0; top: 0; width: 48px; height: 48px; z-index: 70; pointer-events: none; }
.floater { position: fixed; z-index: 65; pointer-events: none; font-weight: 1000; font-size: 22px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.25); transform: translate(-50%, -50%); animation: floatup 1.3s ease-out forwards; }
.floater.xp { color: #bfe3ff; }
.floater.coin { color: #ffe27a; }
@keyframes floatup { to { transform: translate(-50%, -160%); opacity: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { top: 110%; transform: rotate(720deg) translateX(40px); } }

/* Biscuit */
#guide { position: fixed; z-index: 40; left: calc(10px + var(--safe-l)); bottom: calc(80px + var(--safe-b)); max-width: min(440px, calc(100vw - 20px)); display: flex; align-items: flex-end; gap: 6px; pointer-events: auto; }
#guide.pop { animation: rise .3s cubic-bezier(.2,1.4,.5,1); }
#guidePic { width: 96px; height: 96px; flex: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
#guide .gtext { background: var(--cream); border: 3px solid #fff; border-radius: 22px 22px 22px 6px; padding: 8px 14px 10px; box-shadow: var(--shadow); margin-bottom: 30px; }
#guide .gtext b { color: var(--wood-d); font-weight: 1000; font-size: 14px; }
#guide .gtext p { margin: 2px 0 0; font-weight: 800; font-size: 17px; line-height: 1.35; }
#guideOk { position: absolute; right: -6px; bottom: 6px; border: 3px solid #fff; background: var(--leaf); color: #fff; font-weight: 1000; border-radius: 99px; padding: 4px 14px; box-shadow: 0 3px 0 rgba(90,55,20,.2); }

/* small screens: phones held sideways or upright */
@media (max-height: 520px) {
  .round.big { width: 72px; height: 72px; }
  .shopic { width: 46px; height: 46px; } .ordic { width: 42px; height: 42px; }
  .pill { min-height: 40px; font-size: 16px; }
  .xp { width: 90px; }
  #guide { bottom: calc(10px + var(--safe-b)); left: calc(180px + var(--safe-l)); max-width: calc(100vw - 380px); }
  #guidePic { width: 70px; height: 70px; }
  #guide .gtext p { font-size: 15px; }
}
@media (max-width: 600px) {
  .xp { width: 70px; }
  .who { display: none; }
  .pill { padding-right: 10px; font-size: 16px; }
  #hud .top { gap: 6px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .card .pic { width: 84px; height: 84px; }
  #guide { bottom: calc(112px + var(--safe-b)); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }