:root {
  --ink: #1d241a;
  --muted: #65705f;
  --paper: #f4f0e6;
  --paper-2: #fffdf7;
  --earth: #9b744f;
  --earth-dark: #5c402a;
  --leaf: #678f51;
  --leaf-dark: #355e38;
  --lime: #f3f0e3;
  --lime-shadow: #dfd7c7;
  --ceres: #15231d;
  --ceres-2: #21382d;
  --screen: #b8f2c2;
  --line: rgba(37, 50, 31, .16);
  --shadow: 0 20px 60px rgba(38, 44, 27, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(145, 175, 112, .16), transparent 26%),
    linear-gradient(180deg, #f6f2e8 0%, #eee8dc 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.game-header {
  min-height: 68px;
  padding: 14px clamp(18px, 4vw, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 247, 238, .86);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.game-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 850; letter-spacing: .08em; font-size: .82rem; }
.game-brand img { border-radius: 50%; }
.back-link { color: var(--leaf-dark); font-weight: 750; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.game-shell { width: min(1480px, calc(100% - 28px)); margin: 0 auto; padding: 38px 0 64px; }
.game-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-bottom: 26px; }
.eyebrow { margin: 0 0 9px; font-size: .72rem; letter-spacing: .14em; font-weight: 900; color: var(--leaf-dark); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(2.7rem, 6.5vw, 6rem); line-height: .92; letter-spacing: -.055em; max-width: 900px; }
h1 em { color: var(--leaf-dark); font-style: normal; }
.intro-copy { max-width: 760px; margin: 18px 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.6; color: #4e5948; }
.game-score { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 9px; }
.game-score > div { min-width: 105px; padding: 15px 16px; border: 1px solid var(--line); background: rgba(255,253,247,.82); box-shadow: 0 8px 28px rgba(37,50,31,.06); }
.game-score span { display: block; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .11em; }
.game-score strong { display: block; margin-top: 3px; font-size: 1.55rem; }
.game-score .money strong { color: var(--leaf-dark); }

.farm-game { border: 1px solid var(--line); background: rgba(255,253,247,.74); box-shadow: var(--shadow); overflow: hidden; }
.farm-toolbar { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #fffaf0; }
.toolbar-copy { display: grid; gap: 3px; }
.toolbar-copy span { color: var(--muted); font-size: .85rem; }
.toolbar-actions, .ceres-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.game-button { border: 1px solid #213a24; background: var(--leaf-dark); color: #fff; padding: 11px 15px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 #1f3824; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.game-button:hover { filter: brightness(1.07); }
.game-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #1f3824; }
.game-button.secondary { background: #efe7d6; color: var(--ink); border-color: #c9bca3; box-shadow: 0 5px 0 #c9bca3; }
.game-button.ghost { background: transparent; color: var(--leaf-dark); border-color: #8ca681; box-shadow: none; }
.game-button:disabled { cursor: not-allowed; filter: grayscale(.4); opacity: .45; transform: none; box-shadow: none; }

.farm-stage { position: relative; height: clamp(430px, 54vw, 710px); min-height: 430px; isolation: isolate; overflow: hidden; background: #d9cbb3; perspective: 1100px; }
.lime-wall { position: absolute; z-index: 1; background: linear-gradient(180deg, #f8f5e9 0%, #e9e2d3 100%); }
.lime-wall-back { left: 18%; right: 18%; top: 8%; bottom: 31%; border: 1px solid rgba(110,100,80,.15); box-shadow: inset 0 -25px 40px rgba(130,110,80,.08); }
.lime-wall-left { left: -4%; width: 28%; top: 4%; bottom: 23%; clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 88%); background: linear-gradient(95deg, #dfd6c3, #f5f1e5); }
.lime-wall-right { right: -4%; width: 28%; top: 4%; bottom: 23%; clip-path: polygon(0 8%, 100% 0, 100% 88%, 0 100%); background: linear-gradient(265deg, #dfd6c3, #f5f1e5); }
.ceiling { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 21%; background: linear-gradient(180deg, #c2a982, #dfcfb2); clip-path: polygon(0 0, 100% 0, 81% 100%, 19% 100%); }
.farm-floor { position: absolute; z-index: 0; left: -6%; right: -6%; bottom: -18%; height: 54%; background: repeating-linear-gradient(90deg, rgba(87,57,35,.11) 0 2px, transparent 2px 90px), linear-gradient(180deg, #c69b67, #8b623e); transform: rotateX(54deg); transform-origin: bottom; box-shadow: inset 0 30px 50px rgba(78,49,27,.16); }

.solar-tube { position: absolute; z-index: 7; top: 7%; width: 8.5%; aspect-ratio: 1; border-radius: 50%; border: clamp(5px, .8vw, 11px) solid #e8e3d7; background: radial-gradient(circle at 48% 52%, #fff 0 24%, #d9f4ff 38%, #8abacb 59%, #4e6570 63%, #d9d3c7 68%); box-shadow: 0 0 25px rgba(247,255,233,.8), inset 0 0 12px rgba(255,255,255,.8); }
.solar-tube span { position: absolute; inset: 24%; border-radius: 50%; background: #fff; filter: blur(4px); opacity: .8; }
.solar-tube-one { left: 25%; }
.solar-tube-two { left: 47%; }
.solar-tube-three { right: 25%; }
.light-beam { position: absolute; z-index: 2; top: 12%; width: 22%; height: 74%; opacity: .16; background: linear-gradient(180deg, rgba(255,255,220,.85), rgba(255,255,220,0)); filter: blur(2px); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); pointer-events: none; }
.beam-one { left: 18%; }
.beam-two { left: 39%; }
.beam-three { right: 18%; }

.zone { position: absolute; z-index: 8; bottom: 11%; height: 55%; }
.zone-east { left: 4%; width: 28%; transform: rotateY(7deg); transform-origin: left; }
.zone-south { left: 36%; width: 28%; bottom: 8%; }
.zone-west { right: 4%; width: 28%; transform: rotateY(-7deg); transform-origin: right; }
.zone-name { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); text-align: center; font-weight: 900; letter-spacing: .12em; font-size: .72rem; color: rgba(38,50,28,.7); }
.zone-name small { display: block; margin-top: 2px; letter-spacing: 0; font-weight: 700; color: rgba(38,50,28,.48); }
.zone-visual { position: absolute; inset: 0; display: grid; place-items: end center; }
.zone-visual.empty::after { content: "choose a setup"; margin-bottom: 12%; padding: 9px 12px; border: 1px dashed rgba(61,82,50,.35); color: rgba(61,82,50,.65); font-weight: 800; background: rgba(255,255,255,.35); }

.farm-door { position: absolute; z-index: 3; left: 50%; bottom: 28%; width: 9%; height: 34%; transform: translateX(-50%); border: 7px solid #cfc7b6; background: linear-gradient(90deg, #5d4d3c, #75614a 48%, #584838 50%); box-shadow: 0 9px 15px rgba(0,0,0,.14); opacity: .74; }
.farm-door span { position: absolute; right: 12%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #d4ae5d; }

.ceres-wall-terminal { position: absolute; z-index: 12; top: 23%; right: 28%; width: clamp(112px, 12vw, 180px); padding: 7px; border: 0; border-radius: 8px; background: linear-gradient(145deg, #1b2c24, #101b16); color: #eff8ef; box-shadow: 0 10px 20px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.05); transform: rotateY(-6deg); cursor: pointer; text-align: left; }
.terminal-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 3px 6px; font-size: clamp(.55rem, .8vw, .75rem); letter-spacing: .08em; }
.terminal-top i { width: 8px; height: 8px; border-radius: 50%; background: #7cdc79; box-shadow: 0 0 10px #7cdc79; }
.terminal-screen { display: block; min-height: 58px; padding: 10px; background: linear-gradient(180deg, #c8facf, #83c996); color: #17341e; border: 2px solid #0e1e15; box-shadow: inset 0 0 16px rgba(22,55,31,.16); }
.terminal-screen b, .terminal-screen small { display: block; }
.terminal-screen b { font-size: clamp(.62rem, 1vw, .82rem); margin-bottom: 4px; }
.terminal-screen small { font-size: clamp(.48rem, .72vw, .66rem); line-height: 1.25; }
.terminal-tap { display: block; margin-top: 4px; text-align: center; font-size: .52rem; color: #a8bdb1; }

/* Grow racks and crop illustrations */
.grow-unit { width: 88%; height: 90%; position: relative; transform-origin: bottom; animation: unitIn .32s ease both; }
@keyframes unitIn { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.rack-frame { position: absolute; inset: 6% 5% 5%; border: clamp(4px, .45vw, 7px) solid #5d6260; border-top-width: clamp(5px, .6vw, 9px); background: linear-gradient(90deg, transparent 7%, rgba(0,0,0,.05) 7% 9%, transparent 9% 91%, rgba(0,0,0,.05) 91% 93%, transparent 93%); }
.shelf { position: absolute; left: 9%; right: 9%; height: 5%; background: linear-gradient(180deg, #8b8e88, #565b58); box-shadow: 0 4px 4px rgba(0,0,0,.14); }
.shelf.s1 { top: 26%; } .shelf.s2 { top: 50%; } .shelf.s3 { top: 74%; }
.tray { position: absolute; left: 13%; right: 13%; height: 9%; background: linear-gradient(#6e4c2d, #4a321f); border-radius: 3px; box-shadow: inset 0 5px 0 #8d6b43; overflow: visible; }
.tray.t1 { top: 17%; } .tray.t2 { top: 41%; } .tray.t3 { top: 65%; }
.seed-dots { position: absolute; inset: -10px 6px 30%; display: flex; justify-content: space-around; align-items: end; }
.sprout { width: 7%; height: 20%; position: relative; transform-origin: bottom; transform: scaleY(.18); transition: transform .4s ease; }
.sprout::before { content: ""; position: absolute; left: 45%; bottom: 0; width: 12%; height: 100%; background: #4f7a3b; }
.sprout::after { content: ""; position: absolute; left: 13%; top: 8%; width: 72%; height: 42%; border-radius: 70% 10% 70% 10%; background: #73a95b; transform: rotate(-18deg); box-shadow: 13px 6px 0 -3px #5f9949; }
.growth-1 .sprout { transform: scaleY(.42); } .growth-2 .sprout { transform: scaleY(.75); } .growth-3 .sprout { transform: scaleY(1.1) scaleX(1.2); }

.hydro-wall { position: absolute; inset: 8% 4% 8%; }
.hydro-post { position: absolute; top: 0; bottom: 0; width: 4%; left: 12%; background: linear-gradient(90deg, #a3aaa8, #606a68); box-shadow: 60vw 0 0 transparent; }
.hydro-post.right { left: auto; right: 12%; }
.hydro-pipe { position: absolute; left: 7%; right: 7%; height: 8%; border-radius: 999px; background: linear-gradient(#f8faf7, #cbd3cf); border: 2px solid #aeb9b3; box-shadow: 0 5px 8px rgba(0,0,0,.11); }
.hydro-pipe.p1 { top: 16%; } .hydro-pipe.p2 { top: 38%; } .hydro-pipe.p3 { top: 60%; }
.plant-row { position: absolute; left: 12%; right: 12%; height: 16%; display: flex; justify-content: space-around; align-items: end; }
.plant-row.r1 { top: 2%; } .plant-row.r2 { top: 24%; } .plant-row.r3 { top: 46%; }
.plant { width: 12%; aspect-ratio: 1; border-radius: 50% 10% 50% 10%; background: #62a34f; transform: rotate(45deg) scale(.28); box-shadow: 9px -5px 0 -2px #7ab75f, -5px 8px 0 -2px #477f40; transition: transform .4s ease; }
.growth-1 .plant { transform: rotate(45deg) scale(.45); } .growth-2 .plant { transform: rotate(45deg) scale(.75); } .growth-3 .plant { transform: rotate(45deg) scale(1.05); }
.hydro-reservoir { position: absolute; bottom: 3%; left: 24%; right: 24%; height: 18%; border-radius: 7px; background: linear-gradient(180deg, #648a8c, #3e6163); border: 4px solid #374f4d; }

.mushroom-bag { position: absolute; width: 21%; height: 21%; background: linear-gradient(145deg, #ebe6d8, #b9ac91); border: 2px solid #9d8d73; border-radius: 9px 9px 15px 15px; box-shadow: inset 8px 0 8px rgba(255,255,255,.35); }
.mushroom-bag::before { content: ""; position: absolute; top: -9%; left: 30%; right: 30%; height: 13%; background: #8d7d68; border-radius: 4px; }
.mushroom-bag::after { content: ""; position: absolute; width: 30%; height: 26%; right: -15%; top: 38%; border-radius: 50%; background: #f0e8d8; box-shadow: 10px 5px 0 -2px #fff8e9, 4px 13px 0 -4px #d9cebb; transform: scale(.1); transform-origin: left; transition: transform .4s ease; }
.growth-1 .mushroom-bag::after { transform: scale(.35); } .growth-2 .mushroom-bag::after { transform: scale(.7); } .growth-3 .mushroom-bag::after { transform: scale(1.15); }
.mushroom-bag.b1 { left: 17%; top: 16%; } .mushroom-bag.b2 { right: 17%; top: 16%; } .mushroom-bag.b3 { left: 17%; top: 52%; } .mushroom-bag.b4 { right: 17%; top: 52%; }

.meal-tray { position: absolute; left: 12%; right: 12%; height: 15%; background: linear-gradient(#b68851 0 21%, #715033 22% 100%); border: 3px solid #3f4240; border-radius: 4px; overflow: hidden; }
.meal-tray.m1 { top: 14%; } .meal-tray.m2 { top: 38%; } .meal-tray.m3 { top: 62%; }
.worms { position: absolute; inset: 27% 6% 10%; opacity: .1; transition: opacity .4s ease; }
.worms i { position: absolute; width: 18%; height: 8%; border-radius: 999px; background: #d8a44a; border: 1px solid #8f692d; transform: rotate(var(--r)); left: var(--x); top: var(--y); box-shadow: inset 3px 0 rgba(255,255,255,.2); }
.growth-1 .worms { opacity: .35; } .growth-2 .worms { opacity: .72; } .growth-3 .worms { opacity: 1; }

.ready-glow .grow-unit { filter: drop-shadow(0 0 12px rgba(179,216,108,.7)); }
.ready-glow .zone-name span::after { content: " • READY"; color: #557c2a; }

.below-stage-grid { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr); border-top: 1px solid var(--line); }
.ceres-panel { padding: clamp(20px, 3vw, 34px); background: linear-gradient(145deg, var(--ceres), #0f1915); color: #f2f6f1; min-height: 100%; }
.ceres-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ceres-header .eyebrow { color: #a9d79f; }
.ceres-header h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.auto-pill { padding: 7px 10px; border: 1px solid rgba(154,220,150,.4); color: #c9f4c7; font-size: .64rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.ceres-lead { color: #b8c8bc; line-height: 1.55; }
.ceres-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 16px; }
.ceres-controls label { display: grid; gap: 6px; color: #b9c7bd; font-size: .75rem; font-weight: 800; }
.ceres-controls select { width: 100%; min-width: 0; padding: 11px 34px 11px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 0; background: #263a30; color: white; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.recipe-grid > div { padding: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); }
.recipe-grid span { display: block; color: #9eb0a2; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recipe-grid strong { display: block; margin-top: 5px; color: #dff5db; font-size: 1.05rem; }
.recipe-note { margin: 8px 0 18px; padding: 12px; border-left: 3px solid #8bc27f; background: rgba(139,194,127,.09); color: #d5dfd5; line-height: 1.5; }
.ceres-panel .game-button { box-shadow: none; border-color: rgba(255,255,255,.17); }
.ceres-panel .game-button.secondary { background: #2a4335; color: #eef5ef; }
.ceres-panel .game-button.ghost { color: #cbe8c8; }
.game-disclaimer { margin: 18px 0 0; color: #839287; font-size: .72rem; line-height: 1.45; }

.zone-dock { padding: clamp(18px, 2.5vw, 30px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; background: #f8f4e9; }
.zone-card { min-width: 0; border: 1px solid var(--line); background: #fffdf7; padding: 15px; box-shadow: 0 8px 22px rgba(37,50,31,.05); }
.zone-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.zone-card h3 span { color: var(--leaf-dark); font-size: .65rem; letter-spacing: .09em; }
.zone-card .crop-name { font-size: 1.15rem; font-weight: 850; line-height: 1.15; }
.zone-card .setup-name, .zone-card .stage-copy { margin-top: 5px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.progress-track { height: 8px; margin: 13px 0 8px; background: #e5dfd2; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #799b59, #a4c96b); transition: width .35s ease; }
.zone-card .value-line { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; font-size: .78rem; color: var(--muted); }
.zone-card .value-line strong { color: var(--leaf-dark); }
.zone-card .card-actions { display: grid; gap: 7px; }
.zone-card button { width: 100%; }

.game-footer-actions { min-height: 54px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #efe8da; border-top: 1px solid var(--line); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--leaf-dark); font-weight: 850; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#gameMessage { color: var(--muted); font-size: .84rem; text-align: right; }
.tiny-note { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); background: rgba(255,253,247,.65); }
.tiny-note strong { font-size: 1rem; }
.tiny-note p { margin: 0; color: var(--muted); line-height: 1.55; }

.harvest-pop { position: fixed; z-index: 100; pointer-events: none; font-weight: 950; color: #315f2c; font-size: 1.4rem; animation: harvestPop 1.2s ease forwards; }
@keyframes harvestPop { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { transform: translateY(-8px) scale(1.1); opacity: 1; } 100% { transform: translateY(-75px) scale(1); opacity: 0; } }

@media (max-width: 980px) {
  .game-intro { grid-template-columns: 1fr; }
  .game-score { width: 100%; }
  .below-stage-grid { grid-template-columns: 1fr; }
  .zone-dock { border-top: 1px solid rgba(255,255,255,.08); }
  .ceres-controls { grid-template-columns: 1fr; }
  .farm-stage { height: 560px; }
}
@media (max-width: 720px) {
  .game-shell { width: min(100% - 16px, 1480px); padding-top: 24px; }
  .game-header { padding-inline: 12px; }
  .game-brand span { display: none; }
  .back-link { font-size: .82rem; }
  .game-score { grid-template-columns: repeat(3, 1fr); }
  .game-score > div { min-width: 0; padding: 11px 10px; }
  .game-score strong { font-size: 1.2rem; }
  .farm-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-actions .secondary { grid-column: 1 / -1; }
  .farm-stage { height: 500px; min-height: 500px; }
  .solar-tube { width: 12%; top: 6%; }
  .solar-tube-one { left: 18%; } .solar-tube-two { left: 44%; } .solar-tube-three { right: 18%; }
  .zone { bottom: 10%; height: 46%; }
  .zone-east { left: 1%; width: 32%; } .zone-south { left: 34%; width: 32%; } .zone-west { right: 1%; width: 32%; }
  .zone-name { top: -35px; }
  .ceres-wall-terminal { top: 25%; right: 28%; width: 105px; }
  .zone-dock { grid-template-columns: 1fr; }
  .recipe-grid { grid-template-columns: 1fr 1fr; }
  .game-footer-actions { align-items: flex-start; flex-direction: column; }
  #gameMessage { text-align: left; }
  .tiny-note { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 460px) {
  h1 { font-size: 2.75rem; }
  .game-score span { font-size: .54rem; }
  .game-score strong { font-size: 1.05rem; }
  .farm-stage { height: 440px; min-height: 440px; }
  .zone { height: 43%; }
  .zone-name { font-size: .58rem; }
  .ceres-wall-terminal { width: 86px; top: 24%; right: 27%; padding: 5px; }
  .terminal-screen { min-height: 48px; padding: 6px; }
  .ceres-actions { display: grid; }
  .recipe-grid { grid-template-columns: 1fr; }
}

/* v1.30.1 Tiny Farm Lab refinements */
.zone { cursor: pointer; }
.zone:hover .zone-name span { color: #2f5d2f; }
.grow-unit.can-harvest { cursor: pointer; }
.grow-unit.can-harvest:hover { transform: scale(1.01); }
.zone-visual { overflow: visible; }

.tray-fill {
  position: absolute;
  inset: 12% 8% 20%;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 4px;
}
.microgreens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px 3px;
  width: 100%;
  height: 100%;
  align-items: end;
}
.grass {
  position: relative;
  display: block;
  width: 66%;
  height: 68%;
  margin: 0 auto;
  transform-origin: bottom center;
  transition: transform .35s ease, opacity .35s ease;
}
.grass::before,
.grass::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 34%;
  height: 100%;
  border-radius: 80% 10% 70% 10%;
  background: linear-gradient(180deg, #93cf70, #4e8d40);
}
.grass::before { left: 18%; transform: rotate(-12deg); }
.grass::after { right: 18%; transform: rotate(15deg); }
.growth-0 .grass { transform: scaleY(.16); opacity: .4; }
.growth-1 .grass { transform: scaleY(.45); opacity: .8; }
.growth-2 .grass { transform: scaleY(.82); }
.growth-3 .grass { transform: scaleY(1.12) scaleX(1.06); }

.seedling-grid {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: space-around;
}
.seedling {
  position: relative;
  display: block;
  width: 14%;
  height: 82%;
  transform-origin: bottom center;
  transition: transform .35s ease, opacity .35s ease;
}
.seedling::before {
  content: "";
  position: absolute;
  left: 47%;
  bottom: 0;
  width: 10%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #88bc63, #568945);
}
.seedling::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26%;
  width: 42%;
  height: 22%;
  transform: translateX(-80%) rotate(-28deg);
  border-radius: 70% 12% 72% 10%;
  background: #75ab59;
  box-shadow: 16px -2px 0 0 #84bf64;
}
.seedling.leafy::after {
  width: 48%;
  height: 24%;
  box-shadow: 16px -1px 0 0 #8bc36b, 7px -15px 0 -2px #7bb65e;
}
.seedling.basil::after {
  width: 38%;
  height: 20%;
  box-shadow: 14px -2px 0 0 #7fbd65, 6px -13px 0 -2px #8bcf72;
}
.seedling.tomato::after {
  width: 34%;
  height: 18%;
  box-shadow: 14px -2px 0 0 #79b65f, 4px -14px 0 -2px #6ea654, -4px -10px 0 -3px #6aa14e, 12px -18px 0 -5px #7fbc64;
}
.seedling.pepper::after {
  width: 30%;
  height: 18%;
  border-radius: 85% 10% 85% 10%;
  box-shadow: 14px -1px 0 0 #80bb63, 6px -12px 0 -3px #6ea753;
}
.seedling.kale::after {
  width: 46%;
  height: 26%;
  border-radius: 46% 54% 44% 56%;
  background: #6fa652;
  box-shadow: 16px -2px 0 0 #82b965, 4px -15px 0 -2px #7db95f, -4px -10px 0 -3px #739e5d;
}
.growth-0 .seedling { transform: scale(.26); opacity: .45; }
.growth-1 .seedling { transform: scale(.48); opacity: .82; }
.growth-2 .seedling { transform: scale(.76); }
.growth-3 .seedling { transform: scale(1.02); }

.hydro-wall { overflow: hidden; }
.hydro-item {
  position: relative;
  width: 15%;
  height: 92%;
  display: block;
  transform-origin: bottom center;
  transition: transform .35s ease, opacity .35s ease;
}
.hydro-item::before,
.hydro-item::after { content: ""; position: absolute; }
.growth-0 .hydro-item { transform: scale(.24); opacity: .4; }
.growth-1 .hydro-item { transform: scale(.46); opacity: .85; }
.growth-2 .hydro-item { transform: scale(.76); }
.growth-3 .hydro-item { transform: scale(1.04); }

.hydro-lettuce {
  border-radius: 50%;
  background: radial-gradient(circle at center, #8dcb6e 0 26%, #6ea84f 27% 56%, transparent 57%);
  box-shadow: inset 0 -12px 0 rgba(55,98,39,.12);
}
.hydro-lettuce::before {
  inset: 18% 14% 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 35%, #9ada77 0 22%, transparent 23%),
              radial-gradient(circle at 62% 35%, #8acc6c 0 22%, transparent 23%),
              radial-gradient(circle at 36% 68%, #7ebd5f 0 24%, transparent 25%),
              radial-gradient(circle at 68% 64%, #73b455 0 24%, transparent 25%);
}

.hydro-basil::before {
  left: 47%; bottom: 0; width: 10%; height: 65%; transform: translateX(-50%);
  border-radius: 999px; background: #6a9647;
}
.hydro-basil::after {
  left: 50%; bottom: 20%; width: 34%; height: 18%; transform: translateX(-82%) rotate(-30deg);
  border-radius: 72% 10% 72% 10%; background: #6fae55;
  box-shadow: 12px -2px 0 0 #81c265, -2px -12px 0 -3px #82bf65, 10px -15px 0 -4px #91ce75;
}

.hydro-strawberry::before {
  left: 47%; bottom: 0; width: 10%; height: 58%; transform: translateX(-50%);
  border-radius: 999px; background: #5e9144;
}
.hydro-strawberry::after {
  left: 50%; bottom: 18%; width: 40%; height: 22%; transform: translateX(-78%);
  border-radius: 60% 40% 60% 40%; background: #74b25a;
  box-shadow: 14px 0 0 0 #81c264, 6px -16px 0 -3px #6aa94d;
}

.hydro-tomato::before {
  left: 47%; bottom: 0; width: 9%; height: 74%; transform: translateX(-50%);
  border-radius: 999px; background: #618e48;
}
.hydro-tomato::after {
  left: 50%; bottom: 14%; width: 44%; height: 20%; transform: translateX(-78%) rotate(-12deg);
  border-radius: 72% 10% 72% 10%; background: #6ca852;
  box-shadow: 15px -5px 0 0 #7bbc60, -4px -16px 0 -4px #79b75d, 12px -18px 0 -5px #89ca6b, 0 -28px 0 -6px #77b85b;
}

.hydro-cucumber::before {
  left: 47%; bottom: 0; width: 9%; height: 72%; transform: translateX(-50%);
  border-radius: 999px; background: #5a8c40;
}
.hydro-cucumber::after {
  left: 50%; bottom: 20%; width: 48%; height: 18%; transform: translateX(-82%) rotate(-22deg);
  border-radius: 72% 10% 72% 10%; background: #6fa953;
  box-shadow: 12px -2px 0 0 #7bbb5f, -6px -14px 0 -4px #6aa14e, 10px -18px 0 -5px #82c467;
}

.hydro-pepper::before {
  left: 47%; bottom: 0; width: 10%; height: 66%; transform: translateX(-50%);
  border-radius: 999px; background: #5d8a41;
}
.hydro-pepper::after {
  left: 50%; bottom: 22%; width: 38%; height: 18%; transform: translateX(-80%);
  border-radius: 78% 10% 78% 10%; background: #71ad56;
  box-shadow: 14px 0 0 0 #81c163, 4px -15px 0 -4px #7abb5d;
}

.fruit-cluster {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.fruit {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.growth-2 .hydro-strawberry .fruit-cluster,
.growth-2 .hydro-pepper .fruit-cluster,
.growth-2 .hydro-tomato .fruit-cluster,
.growth-2 .hydro-cucumber .fruit-cluster { opacity: .58; }
.growth-3 .hydro-item .fruit-cluster { opacity: 1; }

.hydro-strawberry .fruit {
  width: 16%; height: 18%; background: #d9544b;
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0 35%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.hydro-strawberry .fruit::before,
.hydro-strawberry .fruit::after { content: ""; position: absolute; background: #6da54f; }
.hydro-strawberry .fruit::before { width: 55%; height: 18%; left: 22%; top: -8%; border-radius: 999px; }
.hydro-strawberry .fruit::after { width: 14%; height: 16%; left: 43%; top: -16%; border-radius: 999px; }
.hydro-strawberry .fruit-1 { left: 18%; top: 44%; }
.hydro-strawberry .fruit-2 { left: 44%; top: 55%; }
.hydro-strawberry .fruit-3 { left: 56%; top: 35%; }

.hydro-tomato .fruit { width: 18%; height: 18%; background: radial-gradient(circle at 35% 35%, #ff9386 0 28%, #d44b38 29% 100%); }
.hydro-tomato .fruit-1 { left: 18%; top: 50%; }
.hydro-tomato .fruit-2 { left: 42%; top: 40%; }
.hydro-tomato .fruit-3 { left: 56%; top: 56%; }

.hydro-cucumber .fruit {
  width: 14%; height: 30%;
  border-radius: 999px;
  background: linear-gradient(180deg, #80be57, #508734);
}
.hydro-cucumber .fruit-1 { left: 22%; top: 42%; }
.hydro-cucumber .fruit-2 { left: 58%; top: 30%; }

.hydro-pepper .fruit {
  width: 14%; height: 26%;
  border-radius: 45% 45% 55% 55%;
  background: linear-gradient(180deg, #f06d47, #c93e28);
}
.hydro-pepper .fruit-1 { left: 24%; top: 45%; }
.hydro-pepper .fruit-2 { left: 56%; top: 38%; }

.oyster-bag::after { background: #f1ead9; box-shadow: 10px 5px 0 -2px #fff7e8, 4px 13px 0 -4px #d9cebb; }
.shiitake-bag::after { background: #9a7151; box-shadow: 10px 5px 0 -2px #c29069, 4px 13px 0 -4px #7a533d; }
.chestnut-bag::after { background: #a7743b; box-shadow: 10px 5px 0 -2px #cf9347, 4px 13px 0 -4px #7d5526; }
.lionsmane-bag::after { background: #f7f1e6; box-shadow: 10px 5px 0 -2px #fffdf5, 4px 13px 0 -4px #ded4c7; }

.meal-tray {
  background: linear-gradient(#7b8482 0 14%, #b58750 15% 26%, #775333 27% 100%);
}
.meal-tray .bran {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72%;
  background: repeating-linear-gradient(0deg, rgba(173,124,64,.18) 0 3px, rgba(113,80,50,.18) 3px 5px), linear-gradient(180deg, #c59358, #7a5734);
}
.meal-life {
  position: absolute;
  inset: 22% 6% 10%;
}
.mealworm, .pupa, .beetle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s,1));
}
.mealworm {
  width: 18px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #99631f, #dfaf5e 32%, #efc778 55%, #c88d3e 75%, #935a18);
  box-shadow: inset 0 0 0 1px rgba(94,58,17,.4);
}
.mealworm::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(110,72,20,.28) 3px 4px);
}
.mealworm::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6f4514;
}
.pupa {
  width: 12px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2d8a7, #d9b174);
  box-shadow: inset 0 0 0 1px rgba(119,84,31,.28);
}
.pupa::before {
  content: "";
  position: absolute;
  inset: 1px 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(117,81,28,.18) 3px 4px);
}
.beetle {
  width: 12px;
  height: 9px;
  border-radius: 48% 48% 52% 52%;
  background: radial-gradient(circle at 40% 30%, #605549 0 30%, #221a15 55% 100%);
}
.beetle::before {
  content: "";
  position: absolute;
  left: 50%; top: 12%; bottom: 10%; width: 1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.18);
}
.beetle::after {
  content: "";
  position: absolute;
  top: 3px; left: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #1a130f;
  box-shadow: 10px 0 0 #1a130f;
}

@media (max-width: 720px) {
  .hydro-item { width: 18%; }
  .seedling { width: 16%; }
}

/* v1.30.2 realistic timing and missed-harvest states */
.spoiled-zone .zone-name span::after {
  content: " • PAST PRIME";
  color: #9a5438;
}
.spoiled-zone.ready-glow .zone-name span::after { content: " • PAST PRIME"; }
.grow-unit.spoiled { cursor: default; }
.grow-unit.spoiled:not(.setup-mealworm) {
  filter: saturate(.58) sepia(.18) brightness(.9);
}
.grow-unit.spoiled.setup-hydro .fruit { filter: saturate(.55) brightness(.78); }
.grow-unit.spoiled.setup-hydro .hydro-item::after,
.grow-unit.spoiled.setup-seed .seedling::after,
.grow-unit.spoiled.setup-seed .grass::before,
.grow-unit.spoiled.setup-seed .grass::after { opacity: .62; }
.grow-unit.spoiled.setup-mushroom .mushroom-bag::after { filter: saturate(.45) brightness(.84); }
.zone-card:has(.value-line strong) { transition: border-color .25s ease, background .25s ease; }
.zone-card.spoiled-card {
  border-color: rgba(154,84,56,.5);
  background: #fff7f0;
}
.zone-card.ready-card {
  border-color: rgba(85,124,42,.45);
}
@media (max-width: 720px) {
  .toolbar-actions { grid-template-columns: 1fr 1fr; }
  .toolbar-actions .secondary { grid-column: 1 / -1; }
  #monthButton { grid-column: 1 / -1; }
}