.fg { max-width: 520px; margin: 1.5em auto; padding: 16px; border-radius: 16px;
	background: #e9f6df; border: 2px solid #8bc46a; font-family: system-ui, sans-serif; color: #2b3a1f; box-sizing: border-box; }
.fg *, .fg *::before, .fg *::after { box-sizing: border-box; }
.fg h2 { margin: 0 0 12px; text-align: center; }

/* Auth */
.fg-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.fg-tab { flex: 1; padding: 10px; border: 2px solid #8bc46a; background: #fff; border-radius: 10px; cursor: pointer; font-weight: 600; }
.fg-tab.is-active { background: #8bc46a; color: #fff; }
.fg-form[hidden] { display: none; }
.fg-form label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.fg-form input { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid #b7d9a1; border-radius: 8px; font-size: 16px; }
.fg-hp { position: absolute; left: -9999px; }
.fg-btn { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #4c9a2a; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.fg-btn:disabled { opacity: .6; cursor: wait; }

/* Game layout */
.fg.fg-game { max-width: 960px; padding: 0; background: none; border: 0; }
.fg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px; margin-bottom: 8px;
	background: #fff8e6; border: 2px solid #d9b877; border-radius: 12px; }
.fg-lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%;
	background: #f5b52e; color: #5a3b00; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fg-user { font-weight: 700; }
.fg-xpwrap { flex: 1; min-width: 110px; display: flex; flex-direction: column; gap: 2px; }
.fg-xp { display: block; height: 12px; background: #e3d3a8; border-radius: 99px; overflow: hidden; }
.fg-xp i { display: block; height: 100%; width: 0; background: linear-gradient(#8fe05a, #4c9a2a); transition: width .4s; }
.fg-xptext { font-size: 11px; opacity: .7; }
.fg-logout { font-size: 13px; }

/* Scene: a tilted 3D "ground" plane. --tilt is how far the ground leans back. */
.fg-scene { position: relative; container-type: inline-size; aspect-ratio: 16 / 12.46; overflow: hidden; border-radius: 16px;
	--tilt: 38deg; perspective: 220cqw; perspective-origin: 50% 30%;
	border: 3px solid #5e8f3a; box-shadow: 0 4px 14px rgba(0,0,0,.25); user-select: none;
	background: linear-gradient(#bfe6f7 0, #dff3e0 14%, #8fc765 30%, #6fb24a 100%); }
.fg-ground { position: absolute; left: 0; bottom: 6cqw; width: 100cqw; height: 110cqw; transform-style: preserve-3d;
	transform-origin: 50% 100%; transform: rotateX(var(--tilt)); pointer-events: none; }
.fg-ground::before { content: ''; position: absolute; left: -90cqw; right: -90cqw; top: -120cqw; bottom: 0;
	background:
		radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.13), transparent 40%),
		radial-gradient(ellipse at 75% 20%, rgba(255,255,255,.10), transparent 35%),
		repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 1.2cqw, transparent 1.2cqw 2.8cqw),
		#6fb24a; }
.fg-paths { position: absolute; left: 0; top: 0; width: 100cqw; height: 110cqw; transform: translateZ(.05cqw); }

/* Standing sprites (buildings, trees, farmer): anchored by their base, tilted back up to face the camera */
.fg-bb { position: absolute; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))); pointer-events: none; }
.fg-bb[data-building="barn"], .fg-bb[data-building="market"], .fg-bb[data-building="bank"], .fg-bb[data-building="well"], .fg-bb[data-building="playstore"] { pointer-events: auto; cursor: pointer; outline: none; transition: filter .15s; }
.fg-bb[data-building="barn"]:hover, .fg-bb[data-building="market"]:hover, .fg-bb[data-building="bank"]:hover, .fg-bb[data-building="well"]:hover, .fg-bb[data-building="playstore"]:hover, .fg-bb[data-building]:focus-visible { filter: brightness(1.1) drop-shadow(0 0 .7cqw rgba(255,244,170,.95)); }
.fg-animal-bb { line-height: 1; filter: drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.3)); }
.fg-wander { display: inline-block; animation: fg-wander 5s ease-in-out infinite alternate; }
@keyframes fg-wander { to { transform: translateX(1.6cqw); } }
.fg-deco { line-height: 1; filter: drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.3)); }

/* Fenced areas: floor + four 3D fence walls */
.fg-fbox { position: absolute; transform-style: preserve-3d; transform: translateZ(.1cqw); pointer-events: none; border-radius: .4cqw; }
.fg-fbox.is-cow     { --fc: #9b6a3a; --fp: #6b4423; background: #a9c46b; box-shadow: inset 0 0 2cqw rgba(0,0,0,.18); }
.fg-fbox.is-chicken { --fc: #f2b84b; --fp: #c9821f; background: #e6d08f; box-shadow: inset 0 0 2cqw rgba(0,0,0,.14); }
.fg-fbox.is-field   { --fc: #ffffff; --fp: #d9d6c8; background: #86c05e; box-shadow: inset 0 0 2cqw rgba(0,0,0,.12); }
.fw { display: block; position: absolute; height: var(--fh); pointer-events: none; border-inline: .9cqw solid var(--fp);
	background:
		linear-gradient(var(--fc), var(--fc)) 0 22% / 100% 17% no-repeat,
		linear-gradient(var(--fc), var(--fc)) 0 62% / 100% 17% no-repeat,
		repeating-linear-gradient(90deg, var(--fp) 0 .9cqw, transparent .9cqw 3cqw); }
.fw.fb, .fw.ff { left: 0; width: 100%; transform-origin: 50% 100%; transform: rotateX(-90deg); }
.fw.fb { top: calc(-1 * var(--fh)); }
.fw.ff { top: calc(100% - var(--fh)); }
.fw.fl, .fw.fr { top: 0; width: var(--d); transform-origin: 0 0; transform: rotateY(90deg) rotateZ(90deg); filter: brightness(.8); }
.fw.fl { left: 0; }
.fw.fr { left: var(--w); }

/* Coin counter */
.fg-coins { position: absolute; top: 3%; right: 2.5%; z-index: 40; display: flex; align-items: center; padding: .6cqw 2.2cqw .6cqw 5cqw;
	background: #26364b; border-radius: 99px; color: #fff; font-weight: 800; font-size: clamp(14px, 3.2cqw, 30px);
	box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.35); }
.fg-coins.pop { animation: fg-pop .35s ease-out; }
@keyframes fg-pop { 50% { transform: scale(1.12); } }
.fg-coin { position: absolute; left: -1.2cqw; top: 50%; transform: translateY(-50%); width: 5.6cqw; height: 5.6cqw; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3a8, #f5b52e 60%, #c98a0b); border: .4cqw solid #e8a317;
	display: flex; align-items: center; justify-content: center; font-size: 3cqw; color: #a86a00; }
.fg-coin::after { content: ''; width: 55%; height: 55%; border-radius: 50%; border: .3cqw solid #c98a0b; box-sizing: border-box; }

/* Plots: a 5x5 field of raised square tiles */
.fg-plots { position: absolute; left: 2.2cqw; top: 2.2cqw; width: 30.6cqw; aspect-ratio: 1; padding: .9cqw; transform-style: preserve-3d;
	display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: .5cqw;
	background: #5b3d1e; border: .4cqw solid #d9b877; border-radius: .6cqw; transform: translateZ(.1cqw); }
.fg-plot { --rise: .8cqw; position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; cursor: pointer;
	transform-style: preserve-3d; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent; }
.fg-plot:focus-visible .fg-soil { box-shadow: 0 0 0 .3cqw #fff; }
.fg-soil { position: absolute; inset: 0; border-radius: .3cqw; transform: translateZ(var(--rise));
	background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 .25cqw, transparent .25cqw .8cqw), #7a4b25;
	box-shadow: inset 0 0 .6cqw rgba(0,0,0,.4); }
.fg-soil-front { position: absolute; left: 0; width: 100%; top: calc(100% - var(--rise)); height: var(--rise); background: #4a2e14;
	transform-origin: 50% 100%; transform: rotateX(-90deg); }
.fg-plot:hover .fg-soil { background-color: #8d5a2e; }
.fg-plot.is-growing { cursor: default; }
.fg-plus { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, calc(var(--rise) + .05cqw)); color: rgba(255,255,255,.55);
	font-size: 2.6cqw; font-weight: 700; pointer-events: none; line-height: 1; }

.fg-crop, .fg-bubble, .fg-timer { position: absolute; pointer-events: none; transform-origin: 50% 100%; }
.fg-crop { font-size: 2.8cqw; line-height: 1;
	transform: translateZ(var(--rise)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))); }
.fg-crop.s1 { font-size: 1.8cqw; }
.fg-crop.s2 { font-size: 2.3cqw; }
.fg-crop.c1 { left: 30%; top: 50%; }
.fg-crop.c2 { left: 70%; top: 50%; }
.fg-crop.c3 { left: 30%; top: 90%; }
.fg-crop.c4 { left: 70%; top: 90%; }
.fg-crop.r { animation: fg-sway 1.2s ease-in-out infinite alternate; }
@keyframes fg-sway {
	from { transform: translateZ(var(--rise)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))) rotate(-5deg); }
	to   { transform: translateZ(var(--rise)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))) rotate(5deg); } }

.fg-bubble { left: 50%; top: 20%; width: 4cqw; height: 4cqw; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #dff1ff); border: .3cqw solid #9ccbe8; display: flex; align-items: center;
	justify-content: center; font-size: 2.3cqw; animation: fg-bob 1s ease-in-out infinite alternate;
	transform: translateZ(calc(var(--rise) + 2.6cqw)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))); }
.fg-bubble::after { content: ''; position: absolute; bottom: -.8cqw; left: 50%; width: 1.1cqw; height: 1.1cqw; background: #dff1ff;
	border-right: .3cqw solid #9ccbe8; border-bottom: .3cqw solid #9ccbe8; transform: translateX(-50%) rotate(45deg); }
@keyframes fg-bob {
	from { transform: translateZ(calc(var(--rise) + 2.6cqw)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))) translateY(0); }
	to   { transform: translateZ(calc(var(--rise) + 2.6cqw)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))) translateY(-.8cqw); } }

.fg-timer { left: 50%; top: 98%; padding: 0 .3cqw; background: none; color: #fff; text-shadow: 0 0 .25cqw #000, 0 .1cqw .3cqw #000, 0 0 .6cqw rgba(0,0,0,.8); border-radius: 0;
	font-size: clamp(6px, .85cqw, 9px); line-height: 1.1; white-space: nowrap; font-weight: 700;
	transform: translateZ(var(--rise)) translate(-50%, -100%) rotateX(calc(-1 * var(--tilt))); }

/* Farmer + floating text */
.fg-farmer { position: absolute; z-index: 15; font-size: 5cqw; line-height: 1; transform-origin: 50% 100%;
	transform: translate(-50%, -100%) rotateX(calc(-1 * var(--tilt)));
	transition: left .7s ease-in-out, top .7s ease-in-out; pointer-events: none; filter: drop-shadow(0 .4cqw .3cqw rgba(0,0,0,.4)); }
.fg-farmer span { display: inline-block; animation: fg-idle 1.4s ease-in-out infinite alternate; }
@keyframes fg-idle { to { transform: translateY(-.5cqw); } }
.fg-float { position: absolute; z-index: 30; pointer-events: none; transform-origin: 50% 100%;
	transform: translate3d(-50%, -100%, 4cqw) rotateX(calc(-1 * var(--tilt))); }
.fg-float span { display: block; white-space: nowrap; font-weight: 800; font-size: clamp(12px, 2.4cqw, 22px); color: #fff;
	text-shadow: 0 1px 2px #000, 0 0 4px #b8860b; animation: fg-rise 1.3s ease-out forwards; }
@keyframes fg-rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6cqw); } }

/* Seed tray */
.fg-seeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; padding: 10px;
	background: linear-gradient(#c58b4f, #a8703a); border: 3px solid #7a4b25; border-radius: 14px; }
.fg-seed { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 3px solid #e4c88a; background: #fff6dc;
	border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: #2b3a1f; transition: transform .12s; }
.fg-seed-emoji { font-size: 26px; }
.fg-seed small { font-weight: 500; }
.fg-seed.is-selected { border-color: #4c9a2a; background: #e3f6cf; transform: translateY(-3px); }
.fg-seed.is-locked { opacity: .5; cursor: not-allowed; }
.fg-toast { min-height: 1.6em; margin: 8px 0 0; text-align: center; font-size: 14px; font-weight: 600; }

/* Market + Barn panels */
.fg-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 12px;
	background: rgba(20,30,10,.55); }
.fg-modal[hidden] { display: none; }
.fg-card { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: 16px; border-radius: 16px;
	background: #fff8e6; border: 4px solid #d9b877; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.fg-card.is-market { border-color: #3f7fb5; }
.fg-card.is-barn { border-color: #b5382e; }
.fg-card h3 { margin: 0 34px 2px 0; font-size: 22px; }
.fg-card h4 { margin: 14px 0 6px; font-size: 15px; }
.fg-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #e9d9ae; cursor: pointer; font-size: 16px; }
.fg-m-coins { font-weight: 700; font-size: 14px; opacity: .8; }
.fg-m-msg { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #2d5f8a; }
.fg-m-note { margin: 8px 0; font-size: 13px; opacity: .75; }
.fg-m-empty { padding: 22px 8px; text-align: center; font-size: 15px; opacity: .8; }
.fg-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px;
	background: #fff; border: 1px solid #ecd9a8; border-radius: 10px; }
.fg-row.is-locked { opacity: .55; }
.fg-r-emoji { font-size: 30px; text-align: center; line-height: 1; }
.fg-r-main { display: flex; flex-direction: column; min-width: 0; }
.fg-r-main small { font-size: 12px; opacity: .75; }
.fg-r-price { font-weight: 800; white-space: nowrap; }
.fg-r-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .95; }
.fg-r-btns { display: flex; gap: 6px; }
.fg-mini { padding: 6px 12px; border: 0; border-radius: 8px; background: #4c9a2a; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.fg-mini.is-sell { background: #d98a1f; }
.fg-mini:disabled { opacity: .4; cursor: not-allowed; }
.fg-m-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 10px; background: #fdecc2; border-radius: 10px; font-size: 15px; }

/* v0.6: sprites, gold coin icon, bank + barn selling */
.fg-farmer img { display: block; width: 7cqw; height: auto; }
.fg-animal-bb .fg-wander { display: block; }
.fg-animal-bb img { display: block; width: 100%; height: auto; }
.fg-ci { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.17em; box-sizing: border-box;
	background: radial-gradient(circle at 35% 30%, #fff3a8, #f5b52e 60%, #c98a0b); border: .13em solid #c98a0b; }
.fg-card.is-bank { border-color: #2e5e3a; }
.fg-bank-bal { margin: 10px 0 0; padding: 10px 12px; background: #fdecc2; border-radius: 10px; font-size: 18px; }
.fg-tx { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(0,0,0,.12); }
.fg-tx-main { display: flex; flex-direction: column; min-width: 0; }
.fg-tx-main small { font-size: 12px; opacity: .75; }
.fg-tx-amt { font-weight: 800; white-space: nowrap; }
.fg-tx-amt.in { color: #1a8a2e; }
.fg-tx-amt.out { color: #c0392b; }
.fg-row.is-pick { cursor: pointer; }
.fg-row.is-sel { outline: 3px solid #f5a000; background: #fff2c4; }
.fg-r-art img { display: block; width: 40px; height: auto; margin: 0 auto; }

/* v0.7: plain red X, success notification, barn worth */
.fg-x, .fg-x:hover, .fg-x:focus { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.fg-x:hover svg { transform: scale(1.2); }
.fg-bank-bal small { display: block; font-size: 12px; opacity: .75; margin-top: 2px; }
.fg-worth { margin-top: 8px; background: #e6f3dc; }
.fg-notify { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; align-items: center; gap: 10px;
	max-width: min(92vw, 420px); padding: 12px 18px; background: #1f7a3c; color: #fff; font: 700 15px/1.3 system-ui, sans-serif; border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: fg-notify-in .25s ease-out; }
.fg-ok { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #1f7a3c; display: flex; align-items: center; justify-content: center; font-size: 15px; }
@keyframes fg-notify-in { from { opacity: 0; transform: translate(-50%, -12px); } }

/* v0.9: quantity stepper, farm worth, market selling */
.fg-qty { display: inline-flex; align-items: center; gap: 4px; }
.fg-qb { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: #e9d9ae; color: #3b2a1a; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.fg-qin { width: 52px; height: 28px; padding: 0 4px; text-align: center; border: 2px solid #d9b877; border-radius: 8px; font-size: 14px; font-weight: 700; background: #fff; color: #3b2a1a; -moz-appearance: textfield; }
.fg-qin::-webkit-outer-spin-button, .fg-qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fg-sumtxt { font-weight: 700; white-space: nowrap; }
.fg-farmworth { background: #fde68a; font-size: 20px; border: 2px solid #e8a317; }
.fg-sellhead { margin: 18px 0 2px; padding-top: 10px; border-top: 2px dashed #d9b877; font-size: 18px; }
.fg-r-foot .fg-r-btns { align-items: center; flex-wrap: wrap; }

/* v0.10: soil, red-soil spots with fruit trees, cancel buttons */
.fg-mini.is-cancel { background: #e9d9ae; color: #3b2a1a; }
.fg-soilic { display: inline-block; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 -3px 5px rgba(0,0,0,.3); }
.fg-soilic.sm { width: 14px; height: 14px; box-shadow: none; }
.fg-soilic.ord { background: radial-gradient(circle at 35% 30%, #b98557, #6b4423); }
.fg-soilic.red { background: radial-gradient(circle at 35% 30%, #e0735a, #8f3220); }
.fg-soilbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 6px 8px; border-radius: 10px; background: #fff6dc; font-size: 13px; }
.fg-plot.is-nosoil { opacity: .6; }
.fg-seed.is-tree { border-color: #9bd08a; background: #effbe8; }
.fg-spot { position: absolute; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; cursor: pointer; pointer-events: auto; outline: none;
	background: radial-gradient(circle at 40% 35%, #c4563a, #8f3220 72%); border: .4cqw solid #6e2415; box-shadow: inset 0 0 1cqw rgba(0,0,0,.35); transform: translateZ(.05cqw); transition: filter .15s; }
.fg-spot:hover, .fg-spot:focus-visible { filter: brightness(1.15); }
.fg-spot.is-locked { border-style: dashed; border-color: #f1c6b8; filter: saturate(.8) brightness(.95); }
.fg-spot.is-used { box-shadow: inset 0 0 1.4cqw rgba(0,0,0,.5); }
.fg-tree-bb { pointer-events: auto; cursor: pointer; filter: drop-shadow(0 .3cqw .2cqw rgba(0,0,0,.3)); }
.fg-tree-bb svg { display: block; width: 100%; height: auto; }
.fg-ttimer { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font: 700 1.1cqw/1 system-ui, sans-serif; color: #fff; background: none; text-shadow: 0 0 .25cqw #000, 0 .1cqw .3cqw #000, 0 0 .6cqw rgba(0,0,0,.8); padding: 0 .3cqw; border-radius: 0; white-space: nowrap; pointer-events: none; }
.fg-tbub { position: absolute; left: 50%; top: -2cqw; transform: translateX(-50%); width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #fff; border: .3cqw solid #f5b52e; display: flex; align-items: center; justify-content: center; font-size: 2.4cqw; pointer-events: none; animation: fg-pop .9s ease-in-out infinite alternate; }

/* v0.11: header inside the farm (transparent), planting chooser, cooling timers */
.fg-scene > .fg-head { position: absolute; z-index: 45; top: 2%; left: 2.5%; right: 24%; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
	color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); font-size: clamp(12px, 2.3cqw, 20px); flex-wrap: nowrap; gap: 0 1.6cqw; }
.fg-scene > .fg-head .fg-lvl { min-width: 4.4cqw; height: 4.4cqw; font-size: clamp(11px, 2.2cqw, 20px); text-shadow: none; }
.fg-scene > .fg-head .fg-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-scene > .fg-head .fg-xp { background: rgba(255,255,255,.35); height: clamp(7px, 1.3cqw, 12px); }
.fg-scene > .fg-head .fg-xptext { color: #fff; opacity: .95; font-size: clamp(9px, 1.5cqw, 12px); }
.fg-scene > .fg-head .fg-logout { color: #fff; font-size: clamp(10px, 1.7cqw, 14px); }
.fg-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.fg-card.is-plant { border-color: #4c9a2a; }
.fg-seed:disabled { opacity: .5; cursor: not-allowed; }
.fg-cool { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #fde68a; color: #7a4a00; font-size: 12px; font-weight: 800; white-space: nowrap; }
.fg-cool.is-ready { background: #cdeec0; color: #1a6a2a; }
.fg-mini.is-return { background: #3f7fb5; }

/* v0.12: red X log out, fruit-tree pictures, milk & eggs, phone landscape */
.fg-scene > .fg-logout { position: absolute; z-index: 46; top: 1.2cqw; right: 1.5cqw; display: inline-flex; align-items: center; justify-content: center;
	width: clamp(26px, 4.4cqw, 40px); height: clamp(26px, 4.4cqw, 40px); padding: 0; text-decoration: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fg-logout svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition: transform .12s; }
.fg-logout:hover svg, .fg-logout:focus-visible svg { transform: scale(1.18); }

.fg-tree-img { display: block; width: 100%; height: auto; pointer-events: none; }
.fg-tree-img.is-young { filter: saturate(.7) brightness(1.04); }
.fg-r-art img.is-tree { width: auto; max-width: 40px; max-height: 44px; }

.fg-animal-bb[data-collect] { pointer-events: auto; cursor: pointer; }
.fg-pbub, .fg-ptimer { pointer-events: auto; cursor: pointer; white-space: nowrap; }
.fg-pbub { display: inline-flex; align-items: center; gap: .3cqw; min-width: 4.4cqw; height: 4.4cqw; padding: 0 1cqw; border-radius: 99px; background: #fff; border: .3cqw solid #f5b52e;
	box-shadow: 0 .3cqw .8cqw rgba(0,0,0,.3); font-size: 2.5cqw; line-height: 1; justify-content: center; animation: fg-pop .9s ease-in-out infinite alternate; }
.fg-pbub b { font: 800 1.8cqw/1 system-ui, sans-serif; color: #7a4a00; }
.fg-ptimer { font: 700 1.5cqw/1 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.55); padding: .4cqw .9cqw; border-radius: 99px; }

/* v0.12 tweaks: milk / egg bubbles are drawn flat on top of the scene; the ripe bubble sits on the tree top so it is never cut off */
.fg-tripe { position: absolute; transform: translateX(-50%); width: 4.2cqw; height: 4.2cqw; pointer-events: auto; cursor: pointer; }
.fg-tripe > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: .3cqw solid #f5b52e;
	box-shadow: 0 .3cqw .8cqw rgba(0,0,0,.3); font-size: 2.5cqw; line-height: 1; animation: fg-pop .9s ease-in-out infinite alternate; }
.fg-overlay { position: absolute; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.fg-prod { position: absolute; display: flex; justify-content: center; width: 16cqw; transform: translate(-50%, -100%); pointer-events: none; }
.fg-oflt { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.fg-oflt span { display: block; white-space: nowrap; font-weight: 800; font-size: clamp(12px, 2.4cqw, 22px); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #b8860b; animation: fg-rise 1.3s ease-out forwards; }

/* v0.13: X in the top right corner (coins move below it), bigger ordinary-soil field */
.fg-coins { top: calc(1.2cqw + clamp(26px, 4.4cqw, 40px) + .8cqw); }
.fg-scene > .fg-head { right: 10%; }
.fg-plots { width: 35.6cqw; }
.fg-crop { font-size: 3.3cqw; }
.fg-crop.s1 { font-size: 2.1cqw; }
.fg-crop.s2 { font-size: 2.7cqw; }
.fg-plus { font-size: 3.1cqw; }
.fg-bubble { width: 4.8cqw; height: 4.8cqw; font-size: 2.8cqw; }


/* v0.14: pen furniture (pond, grass, water dish, feeder) and animals that eat and drink */
.fg-pond, .fg-gpatch, .fg-grain { position: absolute; display: block; pointer-events: none; }
.fg-pond { border-radius: 50%; border: .5cqw solid #8a6a3c; box-sizing: border-box;
	background: radial-gradient(ellipse at 35% 35%, #bfeaff 0 12%, transparent 13%), radial-gradient(ellipse at 50% 50%, #5ab4e8, #2f86c4); box-shadow: 0 0 .8cqw rgba(0,0,0,.25), inset 0 0 1cqw rgba(0,40,90,.35); }
.fg-pond::after { content: ''; position: absolute; left: 22%; top: 30%; width: 46%; height: 34%; border: .2cqw solid rgba(255,255,255,.7); border-radius: 50%; animation: fg-ripple 3.4s ease-out infinite; }
@keyframes fg-ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
.fg-gpatch { border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #3f9433 0 60%, rgba(63,148,51,.6) 80%, transparent 100%); }
.fg-gpatch.is-small { opacity: .85; }
.fg-grain { border-radius: 50%; background:
	radial-gradient(circle, #f3d56a .22cqw, transparent .3cqw) 0 0 / 1.1cqw 1cqw,
	radial-gradient(circle, #e6bb45 .22cqw, transparent .3cqw) .5cqw .5cqw / 1.3cqw 1.2cqw; }

.fg-animal-bb { transition-property: left, top; transition-timing-function: linear; }
.fg-animal-bb .fg-wander img { transform-origin: 50% 100%; }
.fg-animal-bb.is-left .fg-wander img { transform: scaleX(-1); }
.fg-animal-bb { --dir: 1; }
.fg-animal-bb.is-left { --dir: -1; }
.fg-animal-bb.is-feeding .fg-wander { animation-play-state: paused; }
.fg-animal-bb[data-collect="cow"].is-feeding .fg-wander img { transform-origin: 65% 100%; animation: fg-graze 2.2s ease-in-out infinite; }
.fg-animal-bb[data-collect="chicken"].is-feeding .fg-wander img { animation: fg-peck .7s ease-in-out infinite; }
@keyframes fg-graze { 0%, 100% { rotate: 0deg; translate: 0 0; } 25%, 75% { rotate: calc(var(--dir) * 10deg); translate: 0 4%; } }
@keyframes fg-peck { 0%, 100% { rotate: 0deg; translate: 0 0; } 45% { rotate: calc(var(--dir) * 26deg); translate: 0 6%; } }
.fg-animal-bb[data-emo]::after { content: attr(data-emo); position: absolute; left: 50%; top: -22%; font-size: 1.9cqw; line-height: 1; transform: translateX(-50%); animation: fg-emo 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes fg-emo { 0%, 100% { transform: translate(-50%, 0); opacity: .95; } 50% { transform: translate(-50%, -.7cqw); opacity: .6; } }


/* v0.15: favorite-seed tray under the field (drag to plant), star buttons in the Barn, garden decor */
.fg-tuftbg { display: block; padding-top: 75%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M6,30 Q4,16 1,8 Q9,14 12,30Z M13,30 Q13,12 16,2 Q21,14 21,30Z M21,30 Q24,14 31,5 Q30,18 28,30Z M28,30 Q32,20 39,15 Q35,24 34,30Z' fill='%233f9a3a' stroke='%232c7a2a' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M16,30 Q16,16 18,8 Q20,18 20,30Z' fill='%236fcf5a'/%3E%3C/svg%3E") center / contain no-repeat; }
.fg-tray { position: absolute; z-index: 45; left: 50%; bottom: .9cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 2.6cqw; pointer-events: none; white-space: nowrap; }
.fg-favs { display: flex; gap: 1.2cqw; pointer-events: none; }
.fg-fav { position: relative; display: flex; align-items: center; justify-content: center; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
	background: rgba(255,255,255,.28); border: .25cqw dashed rgba(255,255,255,.75); opacity: .72; transition: opacity .15s, transform .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.fg-fav:hover { opacity: 1; background: rgba(255,255,255,.5); transform: translateY(-.3cqw); }
.fg-fav i { font-style: normal; font-size: 3.2cqw; line-height: 1; filter: drop-shadow(0 .2cqw .2cqw rgba(0,0,0,.3)); }
.fg-fav b { position: absolute; right: -.5cqw; bottom: -.4cqw; min-width: 2.3cqw; height: 2.3cqw; padding: 0 .5cqw; box-sizing: border-box; border-radius: 99px; background: rgba(38,54,75,.8); color: #fff; font: 800 1.5cqw/2.3cqw system-ui, sans-serif; text-align: center; }
.fg-fav.is-empty { opacity: .38; cursor: not-allowed; }
.fg-fav.is-empty b { background: rgba(160,40,40,.85); }
.fg-fav.is-dragging { opacity: .25; }
.fg-ghost { position: fixed; z-index: 99999; transform: translate(-50%, -60%); font-size: 44px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); opacity: .9; }
.fg-plot.is-drop .fg-soil { box-shadow: 0 0 0 .35cqw #fff, 0 0 1.6cqw .4cqw rgba(255,255,255,.9); background-color: #9a6634; }


/* v0.16: harvest-all button, walking farmer, bigger Market labels, Sell all / Put all buttons */
.fg-harvest { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: .6cqw; padding: .8cqw 1.8cqw; border: .3cqw solid #fff; border-radius: 99px;
	background: linear-gradient(#f7c24b, #e08f12); color: #4a2b00; font: 800 2.3cqw/1 system-ui, sans-serif; box-shadow: 0 .4cqw .9cqw rgba(0,0,0,.35); opacity: .75; transition: transform .12s, opacity .12s; -webkit-tap-highlight-color: transparent; }
.fg-harvest:hover { transform: translateY(-.3cqw); opacity: 1; }
.fg-harvest b { min-width: 3cqw; height: 3cqw; padding: 0 .7cqw; box-sizing: border-box; border-radius: 99px; background: #26364b; color: #fff; font: 800 2cqw/3cqw system-ui, sans-serif; text-align: center; }
.fg-harvest.is-ready { opacity: 1; animation: fg-hpulse 1.4s ease-in-out infinite alternate; }
@keyframes fg-hpulse { to { transform: scale(1.05); } }
.fg-harvest.is-ready b { background: #d11f1f; }
.fg-farmer.is-right img { transform: scaleX(-1); }
.fg-farmer.is-walking span { animation: fg-walk .38s ease-in-out infinite alternate; }
@keyframes fg-walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-.9cqw) rotate(3deg); } }

.fg-card.is-market .fg-m-title, .fg-card.is-market h4, .fg-card.is-market .fg-sellhead, .fg-card.is-barn .fg-m-title, .fg-card.is-barn h4 { text-align: center; color: #d11f1f; }
.fg-card.is-market .fg-m-title, .fg-card.is-barn .fg-m-title { font-size: 30px; letter-spacing: .02em; }
.fg-card.is-market h4, .fg-card.is-barn h4 { font-size: 22px; font-weight: 800; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px solid rgba(209,31,31,.25); }
.fg-card.is-market .fg-sellhead { font-size: 24px; font-weight: 800; margin: 24px 0 8px; }
.fg-bigbtn { display: block; width: 100%; margin: 6px 0 10px; padding: 11px 12px; border: 0; border-radius: 12px; font: 800 16px/1.2 system-ui, sans-serif; color: #fff; cursor: pointer; background: #d98a1f; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.fg-bigbtn:hover:not(:disabled) { filter: brightness(1.08); }
.fg-bigbtn:disabled { opacity: .45; cursor: not-allowed; }
.fg-allnote { margin-top: -4px; text-align: center; }

/* v0.17: click-to-plant seed selection, pond with fishes and birds under the coins indicator */
.fg-fav.is-selected { opacity: 1; background: rgba(255,255,255,.62); box-shadow: 0 0 0 .35cqw #ffd54a, 0 0 1.4cqw rgba(255,213,74,.9); transform: translateY(-.5cqw); }
.has-seed .fg-plot.is-empty:not(.is-nosoil) { cursor: copy; box-shadow: 0 0 0 .25cqw rgba(255,213,74,.85); }
.fg-lake { position: absolute; border-radius: 50%; border: .6cqw solid #8a6a3c; box-sizing: border-box; overflow: hidden; pointer-events: none; transform: translateZ(.06cqw);
	background: radial-gradient(ellipse at 30% 30%, #c9efff 0 10%, transparent 11%), radial-gradient(ellipse at 50% 50%, #62bdea, #2c82c0); box-shadow: 0 0 .8cqw rgba(0,0,0,.28), inset 0 0 1.3cqw rgba(0,40,90,.4); }
.fg-lake::after { content: ''; position: absolute; left: 50%; top: 55%; width: 34%; height: 26%; border: .2cqw solid rgba(255,255,255,.7); border-radius: 50%; animation: fg-ripple 3.6s ease-out infinite; }
.fg-lily { position: absolute; width: 2.6cqw; height: 1.7cqw; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #f7a8c8 0 14%, transparent 16%), #4da73f; border: .15cqw solid #2f7d2a; }
.fg-lily.is-small { width: 1.9cqw; height: 1.2cqw; }
.fg-fish { position: absolute; font-size: 2cqw; line-height: 1; animation: fg-swim 10s ease-in-out infinite alternate; filter: drop-shadow(0 .15cqw .1cqw rgba(0,0,0,.25)); }
@keyframes fg-swim { 0% { transform: translate(0, 0) scaleX(-1); } 45% { transform: translate(3.6cqw, .5cqw) scaleX(-1); } 50% { transform: translate(3.6cqw, .5cqw) scaleX(1); } 95% { transform: translate(-2.4cqw, -.6cqw) scaleX(1); } 100% { transform: translate(-2.4cqw, -.6cqw) scaleX(-1); } }
.fg-bird { display: block; animation: fg-hop 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.fg-bird.is-b { animation-duration: 3.4s; animation-delay: -1.1s; }
.fg-bird.is-flip { transform: scaleX(-1); animation: fg-hop 3s ease-in-out infinite -.6s; }
@keyframes fg-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-.9cqw); } 80% { transform: translateY(0); } 88% { transform: translateY(-.5cqw); } }

/* v0.18: pond z-fight fix, sound button, fruit only on ripe trees, lighter rendering */
.fg-pond, .fg-gpatch, .fg-grain { transform: translateZ(.08cqw); }
.fg-snd { position: absolute; z-index: 46; top: 1.2cqw; right: calc(1.5cqw + clamp(26px, 4.4cqw, 40px) + .8cqw); width: clamp(26px, 4.4cqw, 40px); height: clamp(26px, 4.4cqw, 40px);
	padding: 0; border: 0; border-radius: 50%; background: rgba(20,35,55,.5); color: #fff; font-size: clamp(13px, 2.3cqw, 20px); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.fg-snd:hover, .fg-snd:focus-visible { background: rgba(20,35,55,.75); }
.fg-snd.is-off { opacity: .75; }
.fg-scene > .fg-head { right: 18%; }
.fg-sails { transform-box: view-box; transform-origin: 50px 40px; animation: fg-spin 14s linear infinite; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
/* Cheaper rendering: no per-sprite drop-shadow filters on the tilted ground (they force extra layers); trees get a simple shadow instead. */
.fg-animal-bb, .fg-deco, .fg-farmer, .fg-tree-bb, .fg-fish { filter: none; }
.fg-tree-bb::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.3), transparent 70%); z-index: -1; pointer-events: none; }
.fg-tree-bb { cursor: pointer; }
/* Off screen or tab hidden: freeze every animation */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* v0.20: animals no longer slide sideways without turning (they only bob in place and walk to eat / drink facing the way they go); pivot follows the flipped head; they stay inside the fence */
.fg-animal-bb .fg-wander { animation: fg-bob 2.6s ease-in-out infinite alternate; }
@keyframes fg-bob { to { transform: translateY(-.3cqw); } }
.fg-animal-bb[data-collect="cow"].is-left.is-feeding .fg-wander img { transform-origin: 35% 100%; }

/* v0.21: Bank - time deposits and a scrollable transactions table */
.fg-bk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.fg-bk-amt { width: 130px; height: 36px; padding: 0 8px; border: 2px solid #d9b877; border-radius: 8px; font-size: 16px; font-weight: 700; background: #fff; color: #3b2a1a; }
.fg-dep-term, .fg-dep { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; background: #fff8e6; border: 2px solid #ead9a8; border-radius: 12px; }
.fg-dep-term .fg-r-main, .fg-dep .fg-r-main { flex: 1; min-width: 0; }
.fg-dep-term .fg-r-main small, .fg-dep .fg-r-main small { display: block; }
.fg-bk-prev { color: #1a6a2a; font-weight: 700; }
.fg-dep .fg-cool { margin-left: 0; }
.fg-txwrap { max-height: 232px; overflow: auto; border: 2px solid #ead9a8; border-radius: 10px; background: #fffdf6; -webkit-overflow-scrolling: touch; }
.fg-txtable { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fg-txtable th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 10px; text-align: left; background: #f3dfa8; color: #3b2a1a; font-weight: 800; white-space: nowrap; }
.fg-txtable td { height: 39px; padding: 0 10px; white-space: nowrap; border-top: 1px solid rgba(0,0,0,.08); }
.fg-txtable td.fg-tx-amt { text-align: right; }
.fg-txtable th:last-child { text-align: right; }

/* v0.23: bigger pond with fish bought at the Market, a little bridge, and fruit trees that die of old age */
.fg-lake.is-big { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; border-width: .8cqw; }
.fg-lake.is-big::after { left: 38%; top: 48%; width: 30%; height: 20%; }
.fg-lake-fish { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; }
.fg-lake.is-big .fg-fish { font-size: 2.6cqw; }
.fg-lake.is-big .fg-lily { width: 3.4cqw; height: 2.2cqw; }
.fg-lake.is-big .fg-lily.is-small { width: 2.5cqw; height: 1.6cqw; }
.fg-bridge { position: absolute; left: 8%; right: 8%; top: 8%; height: 6%; border-radius: .4cqw; z-index: 1;
	background: repeating-linear-gradient(90deg, #b9824a 0 .9cqw, #8a5a2c .9cqw 1cqw); box-shadow: 0 .2cqw .3cqw rgba(0,0,0,.3); transform: rotate(-4deg); }
.fg-fish-ico { display: block; font-size: 38px; line-height: 1; text-align: center; }
.fg-r-art .fg-fish-ico { font-size: 34px; }
.fg-tdie { position: absolute; left: 50%; top: -1.6cqw; transform: translateX(-50%); padding: .1cqw .8cqw; border-radius: 99px; font-size: 1.5cqw; font-weight: 700; white-space: nowrap;
	color: #5a3b00; background: rgba(255, 244, 214, .92); border: .15cqw solid #c98a0b; pointer-events: none; }

/* v0.24: big irregular pond over the back of the chicken pen. Below the red-soil spots (.05) so trees stand in the water. */
.fg-lake.is-blob { border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; transform: translateZ(.03cqw); }
.fg-lake.is-blob::after { display: none; }
.fg-blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .3cqw .5cqw rgba(0,40,90,.35)); }
.fg-lake.is-blob .fg-fish { font-size: 2.6cqw; }
.fg-lake.is-blob .fg-lily { width: 3.4cqw; height: 2.2cqw; }
.fg-lake.is-blob .fg-lily.is-small { width: 2.5cqw; height: 1.6cqw; }

/* v0.25: tidy aligned header (level, name + XP | sound, full screen, X, then coins), phone zoom, full screen */
.fg-scene { perspective: none; touch-action: pan-x pan-y;
	--fg-top: clamp(6px, 1.6cqw, 14px); --fg-gap: clamp(6px, 1.2cqw, 12px);
	--fg-hb: clamp(34px, 6.4cqw, 50px); --fg-ha: clamp(30px, 5.4cqw, 44px); --fg-hc: clamp(26px, 4.6cqw, 42px); }
.fg-scene.is-zoomed { touch-action: none; }
/* The zoomable world: the ground and the produce bubbles. It carries the perspective the scene used to have. */
.fg-world { position: absolute; inset: 0; z-index: 44; pointer-events: none; transform-origin: 0 0;
	perspective: 220cqw; perspective-origin: 50% 30%; }
.fg-overlay { z-index: 1; }

.fg-topbar { position: absolute; z-index: 46; top: var(--fg-top); left: 2.2cqw; right: 2.2cqw; height: var(--fg-hb);
	display: flex; align-items: center; gap: calc(var(--fg-gap) * 1.4); pointer-events: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.fg-topbar > * { pointer-events: auto; }
.fg-topbar .fg-head { position: static; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
	display: flex; flex-wrap: nowrap; align-items: center; gap: var(--fg-gap); font-size: inherit; pointer-events: none; }
.fg-topbar .fg-lvl { flex: none; width: var(--fg-hb); height: var(--fg-hb); min-width: 0; padding: 0; border-width: clamp(2px, .5cqw, 3px);
	font-size: calc(var(--fg-hb) * .4); line-height: 1; letter-spacing: -.02em; text-shadow: none; }
.fg-topbar .fg-lvl.is-long { font-size: calc(var(--fg-hb) * .3); }
.fg-idwrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(3px, .6cqw, 6px); }
.fg-idrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fg-gap); min-width: 0; }
.fg-topbar .fg-user { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: clamp(12px, calc(var(--fg-hb) * .38), 20px); line-height: 1.1;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-topbar .fg-xptext { flex: none; margin: 0; color: #fff; opacity: .95; font-size: clamp(9px, calc(var(--fg-hb) * .24), 12px); line-height: 1.1; white-space: nowrap; }
.fg-topbar .fg-xp { display: block; width: 100%; height: clamp(7px, calc(var(--fg-hb) * .17), 10px); background: rgba(255,255,255,.35); }

.fg-actions { flex: none; display: flex; align-items: center; gap: var(--fg-gap); }
.fg-actions .fg-snd, .fg-actions .fg-fs, .fg-actions .fg-logout { position: static; flex: none; width: var(--fg-ha); height: var(--fg-ha); margin: 0; }
.fg-fs { padding: 0; border: 0; border-radius: 50%; background: rgba(20,35,55,.5); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.fg-fs:hover, .fg-fs:focus-visible { background: rgba(20,35,55,.75); }
.fg-fs svg { width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: none; }
.fg-fs .fg-fs-out, .fg-fs.is-on .fg-fs-in { display: none; }
.fg-fs.is-on .fg-fs-out { display: block; }
.fg-actions .fg-snd { font-size: calc(var(--fg-ha) * .5); }
.fg-actions .fg-logout { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; text-decoration: none; cursor: pointer; }

/* Coins sit right under the X, sharing its right edge */
.fg-coins { z-index: 46; top: calc(var(--fg-top) + var(--fg-hb) + var(--fg-gap) + var(--fg-hc) * .2); right: 2.2cqw;
	height: var(--fg-hc); padding: 0 clamp(10px, 2.2cqw, 20px) 0 calc(var(--fg-hc) * 1.15); font-size: calc(var(--fg-hc) * .6); line-height: 1; }
.fg-coins b { min-width: 1.2ch; text-align: right; }
.fg-coin { width: calc(var(--fg-hc) * 1.4); height: calc(var(--fg-hc) * 1.4); left: calc(var(--fg-hc) * -.3); border-width: clamp(2px, .4cqw, 3px); }

/* Zoom buttons: phones and tablets only */
.fg-zoom { display: none; position: absolute; z-index: 46; right: 2.2cqw; flex-direction: column; gap: var(--fg-gap);
	top: calc(var(--fg-top) + var(--fg-hb) + var(--fg-gap) * 2 + var(--fg-hc) * 1.4 + 2px); }
@media (pointer: coarse), (max-width: 700px) { .fg-zoom { display: flex; } }
.fg-zbtn { width: var(--fg-ha); height: var(--fg-ha); padding: 0; border: 0; border-radius: 50%; background: rgba(20,35,55,.55); color: #fff;
	font: 700 calc(var(--fg-ha) * .6)/1 system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fg-zbtn:disabled { opacity: .35; cursor: default; }

/* Full screen (real full screen, or a full-window fallback where the browser has none, e.g. iPhone) */
.fg.is-fs { display: flex; align-items: center; justify-content: center; max-width: none; margin: 0; padding: 0; background: #2e5a1c; }
.fg.is-pseudo-fs { position: fixed; inset: 0; z-index: 99990; width: auto; height: auto; }
.fg.is-fs .fg-scene { flex: none; width: var(--fg-fs-w, 100%); max-width: none; border-radius: 0; }
.fg.is-fs .fg-toast:not(:empty) { position: absolute; left: 50%; bottom: 10px; z-index: 5; transform: translateX(-50%); margin: 0; padding: 6px 14px;
	border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; max-width: 90%; }
html.fg-fs-lock, html.fg-fs-lock body { overflow: hidden; }

/* v0.25.1: snappier touch, one starting soil tile, lighter animation on phones */
.fg, .fg button, .fg [role=button], .fg a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fg-scene { touch-action: pan-x pan-y; }
.fg-scene.is-zoomed { touch-action: none; }
.fg-plot.is-locked { opacity: .3; cursor: not-allowed; filter: grayscale(.6); }
.fg-plot.is-locked .fg-plus { font-size: 2.2cqw; opacity: .8; }
.fg-plot:active .fg-soil { filter: brightness(1.2); }
.fg-bb:active, .fg-animal-bb:active, .fg-tree-bb:active, .fg-spot:active { filter: brightness(1.12); }
@media (pointer: coarse) {
	.fg-crop.r, .fg-bird, .fg-bird.is-flip { animation: none; }
	.fg-pond::after, .fg-lake::after { animation: none; opacity: 0; }
}

/* Barn tabs (My items / Buy) and Market listing rows */
.fg-subtabs { display: flex; gap: 8px; margin: 4px 0 10px; }
.fg-subtab { flex: 1; padding: 10px 8px; border: 2px solid #d9b877; background: #fff; border-radius: 10px; cursor: pointer; font: 800 15px/1.2 system-ui, sans-serif; color: #5a3a1a; }
.fg-subtab.is-active { background: #b5382e; border-color: #b5382e; color: #fff; }
.fg-packnote { align-self: center; font-size: 12px; opacity: .8; white-space: nowrap; }
.fg-mini.is-buy { background: #2e8b3a; }
.fg-row.fg-mkt .fg-r-foot { justify-content: flex-start; flex-wrap: wrap; }
.fg-row.fg-mkt .fg-r-btns { align-items: center; flex-wrap: wrap; }

/* v0.27: tree timers on two lines; the X stays at the top right while a panel scrolls */
.fg-ttimer { white-space: pre; text-align: center; }
.fg-card .fg-x { position: sticky; top: 0; float: right; z-index: 10; margin: -4px -4px 0 6px; }
.fg-card .fg-x svg { filter: drop-shadow(0 0 3px #fff8e6) drop-shadow(0 0 2px #fff8e6); }


/* v0.28: Donate button (right of Harvest) and the donation dialog */
.fg-donate { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: .6cqw; padding: .8cqw 1.8cqw; border: .3cqw solid #fff; border-radius: 99px;
	background: linear-gradient(#5fb0e8, #2f7fc0); color: #fff; font: 800 2.3cqw/1 system-ui, sans-serif; box-shadow: 0 .4cqw .9cqw rgba(0,0,0,.35); opacity: .85; transition: transform .12s, opacity .12s; -webkit-tap-highlight-color: transparent; }
.fg-donate:hover, .fg-donate:focus-visible { transform: translateY(-.3cqw); opacity: 1; }
.fg-card.is-donate { border-color: #2f7fc0; width: min(420px, 100%); }
.fg-card.is-donate h3 { color: #1f5f96; }
.fg-dn-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.fg-dn-row b { flex: 0 0 74px; font-size: 15px; }
.fg-dn-row input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 10px; border: 2px solid #d9b877; border-radius: 8px; font-size: 16px; font-weight: 700; background: #fff; color: #3b2a1a; }
.fg-dn-row select { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 8px; border: 2px solid #d9b877; border-radius: 8px; font-size: 16px; font-weight: 700; background: #fff; color: #3b2a1a; }
.fg-dn-row select:focus { outline: none; border-color: #2f7fc0; }
.fg-dn-row input:focus { outline: none; border-color: #2f7fc0; }
.fg-dn-hint { min-height: 18px; margin: 2px 0 0 84px; font-size: 13px; font-weight: 600; color: #6b5a3a; }
.fg-dn-hint.is-ok { color: #2e8b3a; }
.fg-dn-hint.is-bad { color: #c0261e; }
.fg-dn-have { margin-top: 4px; }
.fg-dn-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.fg-dn-btns .fg-mini { min-width: 84px; padding: 9px 16px; font-size: 15px; }
.fg-dn-ok:disabled { opacity: .4; cursor: not-allowed; }


/* v0.29: seller price box, donation notification badge and details */
.fg-dn-wrap { position: relative; display: inline-flex; pointer-events: none; }
.fg-dn-badge { pointer-events: auto; position: absolute; top: -1.4cqw; right: -1.2cqw; min-width: 3.4cqw; height: 3.4cqw; padding: 0 .8cqw; box-sizing: border-box; border: .3cqw solid #fff; border-radius: 99px; cursor: pointer;
	background: #d11f1f; color: #fff; font: 800 2cqw/2.8cqw system-ui, sans-serif; text-align: center; box-shadow: 0 .3cqw .7cqw rgba(0,0,0,.4); animation: fg-dnpulse 1.2s ease-in-out infinite alternate; -webkit-tap-highlight-color: transparent; }
.fg-dn-badge[hidden] { display: none; }
@keyframes fg-dnpulse { to { transform: scale(1.15); } }
.fg-dn-btns .fg-dn-histbtn { margin-right: auto; }
.fg-price { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.fg-pin { width: 64px; height: 28px; padding: 0 4px; text-align: center; border: 2px solid #d98a1f; border-radius: 8px; font-size: 14px; font-weight: 700; background: #fff; color: #3b2a1a; -moz-appearance: textfield; }
.fg-pin::-webkit-outer-spin-button, .fg-pin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fg-price small { font-size: 11px; font-weight: 600; opacity: .8; }
.fg-price small.is-bad { color: #c0261e; opacity: 1; }
.fg-dnl-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1px solid #ecd9a8; border-radius: 10px; }
.fg-dnl-row.is-new { background: #fff2c4; border-color: #f5a000; }
.fg-dnl-ic { font-size: 24px; text-align: center; }
.fg-dnl-main { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.fg-dnl-main small { font-size: 12px; opacity: .7; }
.fg-dnl-amt { font-weight: 800; white-space: nowrap; text-align: right; }
.fg-dnl-row.is-in .fg-dnl-amt { color: #1f7a3c; }
.fg-dnl-row.is-out .fg-dnl-amt { color: #b5382e; }
.fg-dnl-amt em { display: block; font-style: normal; font-size: 10px; color: #d11f1f; letter-spacing: .06em; }

/* v0.30.0: feed bubble above a pen that needs feeding */
.fg-prod { gap: 1cqw; }
.fg-feedbub { border-color: #5aa02c; animation: fg-feed-pulse 1.4s ease-in-out infinite; }
.fg-feedbub b { color: #2f6b12; }
@keyframes fg-feed-pulse { 50% { transform: scale(1.1); } }

/* v0.31.0: well label, thirsty trees, watering mode */
.fg-well-lbl { position: absolute; transform: translate(-50%, 0); z-index: 5; font: 800 1.6cqw/1 system-ui, sans-serif; color: #fff; background: rgba(30,100,170,.95); border: .25cqw solid #fff; padding: .45cqw 1cqw; border-radius: 99px; white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.4); }
.fg-card.is-well { border-color: #2f7fc0; }
.fg-card.is-well .fg-m-title, .fg-card.is-well h4 { text-align: center; color: #1f5f96; }
.fg-tthirst { position: absolute; left: 50%; top: -2.4cqw; transform: translateX(-50%); font-size: 2cqw; line-height: 1; pointer-events: none; filter: drop-shadow(0 0 .3cqw #fff); animation: fg-feed-pulse 1.4s ease-in-out infinite; }

/* v0.31.1: tree timers (overlay, readable) and theme-proof Donate / Harvest buttons */
.fg-overlay .fg-ttimer { position: absolute; transform: translate(-50%, 0); z-index: 4; font: 800 1.3cqw/1.25 system-ui, sans-serif; color: #fff; background: rgba(20,30,20,.8); padding: .3cqw .8cqw; border-radius: 1cqw; white-space: pre; text-align: center; pointer-events: none; text-shadow: none; box-shadow: 0 .15cqw .5cqw rgba(0,0,0,.35); }
.fg-donate, .fg-donate:hover, .fg-donate:focus, .fg-donate:focus-visible, .fg-donate:active, .fg-donate:visited {
	background: linear-gradient(#5fb0e8, #2f7fc0) !important; color: #fff !important; border: .3cqw solid #fff !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; text-decoration: none !important; text-indent: 0 !important; font-family: system-ui, sans-serif !important; font-weight: 800 !important; font-size: 2.3cqw !important; line-height: 1 !important; min-height: 0 !important; height: auto !important; width: auto !important; margin: 0 !important; }
.fg-donate span, .fg-donate:hover span, .fg-donate:focus span { color: #fff !important; font: inherit !important; text-transform: none !important; letter-spacing: normal !important; }
.fg-harvest, .fg-harvest:hover, .fg-harvest:focus, .fg-harvest:active { color: #4a2b00 !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; font-family: system-ui, sans-serif !important; font-weight: 800 !important; font-size: 2.3cqw !important; line-height: 1 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
.fg-harvest, .fg-harvest:hover, .fg-harvest:focus, .fg-harvest:active { background: linear-gradient(#f7c24b, #e08f12) !important; border: .3cqw solid #fff !important; }
.fg-harvest span, .fg-harvest:hover span { color: #4a2b00 !important; font: inherit !important; text-transform: none !important; }

/* v0.31.2: coin counter sits in the top bar, before the speaker button */
.fg-actions .fg-coins { position: relative; top: auto; right: auto; flex: none; margin: 0 0 0 calc(var(--fg-hc) * .4); padding-left: calc(var(--fg-hc) * 1.3); }
.fg-actions { gap: clamp(6px, 1cqw, 12px); }

/* Centered pop-up shown when a tree is tapped */
.fg-midnote { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100001; max-width: min(88vw, 360px); padding: 16px 22px;
	background: rgba(20,30,15,.92); color: #fff; font: 700 17px/1.4 system-ui, sans-serif; text-align: center; border-radius: 16px; border: 3px solid #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.5); pointer-events: none; animation: fg-mid-in .2s ease-out; }
@keyframes fg-mid-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }

/* Market refresh button: embossed, presses down when clicked */
.fg-mini.is-return[data-mrefresh] { background: linear-gradient(#5b9bd0, #3f7fb5); border: 1px solid #2c5f8c; padding: 8px 16px;
	box-shadow: 0 4px 0 #2a5a85, 0 6px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45); text-shadow: 0 1px 1px rgba(0,0,0,.35);
	transition: transform .08s, box-shadow .08s; }
.fg-mini.is-return[data-mrefresh]:hover { filter: brightness(1.08); }
.fg-mini.is-return[data-mrefresh]:active { transform: translateY(4px); box-shadow: 0 0 0 #2a5a85, inset 0 3px 6px rgba(0,0,0,.4); }

/* Lock on red-soil spots that are not bought yet */
.fg-spot.is-locked::after { content: "🔒"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2.6cqw; line-height: 1; opacity: .9; }

/* v0.33: Play Store (buy everything; sell animals and feed with approval) */
.fg-card.is-playstore { border-color: #6c3fb0; }
.fg-card.is-playstore .fg-m-title, .fg-card.is-playstore h4 { text-align: center; color: #4a2a85; }
.fg-card.is-playstore .fg-m-title { font-size: 30px; letter-spacing: .02em; }
.fg-card.is-playstore h4 { font-size: 22px; font-weight: 800; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #d9c8f0; }
.fg-card.is-playstore .fg-subtabs { flex-wrap: wrap; }
.fg-card.is-playstore .fg-subtab { flex: 1 1 22%; min-width: 0; padding: 9px 4px; font-size: 14px; }
.fg-card.is-playstore .fg-subtab.is-active { background: #6c3fb0; border-color: #6c3fb0; }

/* v0.34: seller-set prices and bidding in the Market */
.fg-bidbox { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; width: 100%; }
.fg-bin { width: 76px; height: 30px; padding: 0 4px; text-align: center; border: 2px solid #3f7fb5; border-radius: 8px; font-size: 15px; font-weight: 700; background: #fff; color: #3b2a1a; -moz-appearance: textfield; }
.fg-bin::-webkit-outer-spin-button, .fg-bin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fg-mybid { display: block; margin-top: 6px; width: 100%; font-size: 13px; font-weight: 700; color: #1f5f96; }
.fg-bids { display: block; width: 100%; margin-top: 8px; padding: 8px; border-radius: 10px; background: #eef6fd; border: 2px solid #b9d7f0; font-size: 13px; }
.fg-bidline { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed #b9d7f0; }
.fg-bidline small { display: block; font-size: 11px; font-weight: 600; opacity: .75; }
.fg-bidline.is-top { background: rgba(255, 213, 74, .25); border-radius: 8px; padding: 6px; }
.fg-bidnone { display: block; width: 100%; margin-top: 6px; font-size: 12px; opacity: .7; }

/* v0.35: refresh button (before the speaker), centered "not enough feed" question */
.fg-refresh, .fg-lite { padding: 0; border: 0; border-radius: 50%; background: rgba(20,35,55,.5); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; -webkit-tap-highlight-color: transparent; }
.fg-refresh:hover, .fg-refresh:focus-visible, .fg-lite:hover, .fg-lite:focus-visible { background: rgba(20,35,55,.75); }
.fg-actions .fg-refresh, .fg-actions .fg-lite { position: static; flex: none; width: var(--fg-ha); height: var(--fg-ha); margin: 0; font-size: calc(var(--fg-ha) * .5); }
.fg-refresh span, .fg-lite span { display: block; line-height: 1; }
.fg-lite { opacity: .75; }
.fg-lite.is-on { opacity: 1; background: rgba(46,139,58,.85); }
.fg-refresh.is-spin span { animation: fg-spin .7s linear; }

.fg-confirm { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(15,25,10,.55); }
.fg-confirm-card { width: min(92vw, 380px); padding: 20px 20px 18px; border-radius: 18px; border: 3px solid #fff; background: #fff8e6; color: #3b2a1a; text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.55); animation: fg-mid-in .2s ease-out; font-family: system-ui, sans-serif; }
.fg-confirm-card h3 { margin: 0 0 8px; font-size: 20px; color: #b5382e; }
.fg-confirm-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.fg-confirm-card .fg-confirm-q { font-weight: 800; }
.fg-confirm-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.fg-confirm-btns .fg-mini { min-width: 120px; padding: 11px 16px; font-size: 15px; }

/* v0.35: every button is embossed (raised, with a lit top edge and a shaded bottom edge) and sinks when pressed */
.fg .fg-btn, .fg .fg-tab, .fg .fg-mini, .fg .fg-subtab, .fg .fg-qb, .fg .fg-bigbtn, .fg .fg-seed {
	box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.22), 0 3px 0 rgba(0,0,0,.35), 0 5px 7px rgba(0,0,0,.22);
	text-shadow: 0 1px 1px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .12s; }
.fg .fg-subtab:not(.is-active), .fg .fg-tab:not(.is-active), .fg .fg-qb, .fg .fg-seed, .fg .fg-mini.is-cancel { text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.fg .fg-snd, .fg .fg-fs, .fg .fg-logout, .fg .fg-zbtn, .fg .fg-refresh, .fg .fg-lite {
	box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.45), 0 4px 6px rgba(0,0,0,.3);
	transition: transform .08s, box-shadow .08s, background .12s; }
.fg .fg-harvest, .fg .fg-donate { box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.55), inset 0 -.45cqw 0 rgba(0,0,0,.22), 0 .4cqw 0 rgba(0,0,0,.4), 0 .8cqw 1cqw rgba(0,0,0,.3) !important; transition: transform .08s, box-shadow .08s, opacity .12s; }
.fg .fg-dn-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.4); transition: transform .08s, box-shadow .08s; }

.fg .fg-btn:hover:not(:disabled), .fg .fg-tab:hover, .fg .fg-mini:hover:not(:disabled), .fg .fg-subtab:hover, .fg .fg-bigbtn:hover:not(:disabled), .fg .fg-seed:hover:not(:disabled) { filter: brightness(1.07); }

/* Pressed: the button sinks into the page */
.fg .fg-btn:active:not(:disabled), .fg .fg-tab:active, .fg .fg-mini:active:not(:disabled), .fg .fg-subtab:active, .fg .fg-qb:active, .fg .fg-bigbtn:active:not(:disabled), .fg .fg-seed:active:not(:disabled) {
	transform: translateY(3px); filter: brightness(.94); box-shadow: inset 0 3px 6px rgba(0,0,0,.4), 0 0 0 rgba(0,0,0,0); }
.fg .fg-snd:active, .fg .fg-fs:active, .fg .fg-logout:active, .fg .fg-zbtn:active:not(:disabled), .fg .fg-refresh:active, .fg .fg-lite:active, .fg .fg-dn-badge:active {
	transform: translateY(2px); box-shadow: inset 0 3px 5px rgba(0,0,0,.5), 0 0 0 rgba(0,0,0,0); }
.fg .fg-harvest:active, .fg .fg-donate:active { transform: translateY(.4cqw) !important; box-shadow: inset 0 .5cqw .8cqw rgba(0,0,0,.4), 0 0 0 rgba(0,0,0,0) !important; }
.fg .fg-x:active { transform: scale(.88); }
.fg .fg-mini:disabled, .fg .fg-btn:disabled, .fg .fg-bigbtn:disabled, .fg .fg-seed:disabled { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) { .fg-refresh.is-spin span { animation: none; } }

/* v0.36: low-detail mode (button next to the speaker; also on by itself for weak phones). Stops every endless animation and the heavy shadows. One-off animations (coins rising, pop-ups) stay. */
.fg.is-lite .fg-crop.r, .fg.is-lite .fg-wander, .fg.is-lite .fg-animal-bb .fg-wander, .fg.is-lite .fg-farmer span, .fg.is-lite .fg-farmer.is-walking span,
.fg.is-lite .fg-bubble, .fg.is-lite .fg-pbub, .fg.is-lite .fg-tripe > span, .fg.is-lite .fg-tbub, .fg.is-lite .fg-fish, .fg.is-lite .fg-bird, .fg.is-lite .fg-bird.is-flip,
.fg.is-lite .fg-sails, .fg.is-lite .fg-harvest.is-ready, .fg.is-lite .fg-dn-badge, .fg.is-lite .fg-feedbub, .fg.is-lite .fg-tthirst,
.fg.is-lite .fg-animal-bb.is-feeding .fg-wander img, .fg.is-lite .fg-animal-bb[data-emo]::after,
.fg.is-lite .fg-pond::after, .fg.is-lite .fg-lake::after { animation: none !important; }
.fg.is-lite .fg-pond::after, .fg.is-lite .fg-lake::after { opacity: 0; }
.fg.is-lite .fg-bird.is-flip { transform: scaleX(-1); }
.fg.is-lite .fg-blob, .fg.is-lite .fg-fav i, .fg.is-lite .fg-tthirst, .fg.is-lite .fg-animal-bb, .fg.is-lite .fg-deco, .fg.is-lite .fg-tree-bb, .fg.is-lite .fg-farmer, .fg.is-lite .fg-fish { filter: none; }
.fg.is-lite .fg-pbub, .fg.is-lite .fg-tripe > span, .fg.is-lite .fg-coins { box-shadow: none; }

/* v0.37: every message shows in the middle of the screen, stacked in one holder */
.fg-notes { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100001; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: min(90vw, 380px); pointer-events: none; }
.fg-notes > .fg-notify, .fg-notes > .fg-midnote { position: static; transform: none; top: auto; left: auto; max-width: 100%; box-sizing: border-box; animation: fg-note-in .2s ease-out; }
.fg-notes > .fg-notify { padding: 14px 20px; font-size: 16px; border: 3px solid #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.fg-midnote.is-err { background: rgba(150,28,20,.95); }
@keyframes fg-note-in { from { opacity: 0; transform: scale(.94); } }

/* v0.38: warehouse worth label, total row and the "closed" notice */
.fg-whworth, .fg-whtotal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font: 800 16px/1.2 system-ui, sans-serif; }
.fg-whworth { margin: 4px 0 10px; background: #fff3cf; border: 2px solid #f5b52e; color: #6a4300; }
.fg-whtotal { margin-top: 8px; background: #e6f3dc; border: 2px solid #5aa02c; color: #1f5a0f; }
.fg-m-note.is-closed { background: #fde3df; border: 2px solid #b5382e; color: #7a1d14; font-weight: 700; border-radius: 10px; padding: 8px 10px; }

/* v0.41: warehouse fund (may be negative) and worth + fund */
.fg-whfund { background: #e6f3dc; border-color: #5aa02c; color: #1f5a0f; }
.fg-whfund.is-neg { background: #fde8e8; border-color: #d63638; color: #8a1f1f; }
.fg-whnet { background: #eef2ff; border-color: #6b7fd7; color: #27337a; }

/* v0.43: administrator-only Players button (purple, next to Donate) */
.fg .fg-donate.fg-players, .fg .fg-donate.fg-players:hover, .fg .fg-donate.fg-players:focus, .fg .fg-donate.fg-players:focus-visible, .fg .fg-donate.fg-players:active { background: linear-gradient(#b27be8, #6b3fb8) !important; }
.fg .fg-donate.fg-players[hidden] { display: none !important; }
.fg-card.is-players .fg-bank-bal small { display: block; }


/* v0.44: Chat button (above the bottom tray, left side) and the chat window */
.fg-chat-wrap { position: absolute; z-index: 45; left: 1.6cqw; bottom: 8.4cqw; display: inline-flex; pointer-events: none; }
.fg .fg-donate.fg-chat, .fg .fg-donate.fg-chat:hover, .fg .fg-donate.fg-chat:focus, .fg .fg-donate.fg-chat:focus-visible, .fg .fg-donate.fg-chat:active { background: linear-gradient(#5fd08a, #2a9a55) !important; }
.fg-card.is-chat { border-color: #2a9a55; width: min(440px, 100%); height: min(580px, 88vh); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.fg-card.is-chat h3 { flex: none; color: #1d6e3c; }
.fg-card.is-chat .fg-x { position: absolute; top: 10px; right: 10px; float: none; margin: 0; }
.fg-chat-top { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.fg-chat-top .fg-mini:last-child { margin-left: auto; }
.fg-chat-top[hidden], .fg-chat-new[hidden], .fg-chat-compose[hidden] { display: none; }
.fg-chat-new { flex: none; }
.fg-chat-askrow, .fg-chat-compose { display: flex; gap: 8px; align-items: center; }
.fg-chat-askrow input, .fg-chat-compose input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 10px; border: 2px solid #d9b877; border-radius: 8px; font-size: 16px; font-weight: 600; background: #fff; color: #3b2a1a; }
.fg-chat-askrow input:focus, .fg-chat-compose input:focus { outline: none; border-color: #2a9a55; }
.fg-chat-askrow .fg-mini, .fg-chat-compose .fg-mini { height: 38px; padding: 0 14px; }
.fg-chat-hint { flex: none; min-height: 18px; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #6b5a3a; }
.fg-chat-hint.is-ok { color: #1f7a3c; }
.fg-chat-hint.is-bad { color: #b5382e; }
.fg-chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 4px; -webkit-overflow-scrolling: touch; }
.fg-chat-compose { flex: none; margin-top: 8px; }
.fg-chat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1px solid #ecd9a8; border-radius: 10px; }
.fg-chat-ic { font-size: 22px; width: 28px; text-align: center; }
.fg-chat-main { flex: 1 1 120px; display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.fg-chat-main small { font-size: 12px; opacity: .75; }
.fg-chat-row .fg-r-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fg-chat-new-tag { font-style: normal; font-weight: 800; color: #d11f1f; }
.fg-cm { display: flex; flex-direction: column; max-width: 82%; margin: 0 0 6px; }
.fg-cm span { padding: 8px 11px; border-radius: 14px; font-size: 15px; line-height: 1.3; word-break: break-word; white-space: pre-wrap; }
.fg-cm small { font-size: 11px; opacity: .6; margin: 2px 6px 0; }
.fg-cm.is-me { margin-left: auto; align-items: flex-end; }
.fg-cm.is-me span { background: #2e8b3a; color: #fff; border-bottom-right-radius: 4px; }
.fg-cm.is-them span { background: #fff; border: 1px solid #ecd9a8; color: #3b2a1a; border-bottom-left-radius: 4px; }


/* v0.48.0: buying with a 2-digit quantity no longer reshuffles the row.
   The row's bottom line wraps instead of squeezing, the quantity box has a fixed width that fits 3 digits,
   and the total stays on its own right-aligned line, so a longer number never pushes the buttons around. */
.fg-row { min-width: 0; box-sizing: border-box; }
.fg-r-foot { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.fg-r-foot .fg-r-btns { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: center; }
.fg-r-foot .fg-r-btns .fg-mini { white-space: nowrap; }
.fg-r-foot .fg-sumtxt { flex: 1 1 100%; text-align: right; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fg-qty { flex: none; }
.fg-qin { box-sizing: border-box; width: 60px; min-width: 60px; font-size: 16px; font-variant-numeric: tabular-nums; }
.fg-card { overflow-x: hidden; overscroll-behavior: contain; }
.fg-card .fg-m-body { min-width: 0; }

/* v0.48.0: Players record tables and the earnings blocks */
.fg-pltbl { max-height: 260px; margin: 6px 0 10px; }
.fg-pltbl .fg-txtable { min-width: 0; }
.fg-pltbl .fg-txtable td { height: 34px; }
.fg-pltbl .fg-txtable td:last-child, .fg-pltbl .fg-txtable th:last-child { text-align: right; }
.fg-pltbl tr.fg-pl-grp td { background: #fdecc2; }