*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#2b1d12;color:#fdf6c8;overflow:hidden}
h2,h3,.brand,.btn{font-family:'Press Start 2P',monospace}
h2{font-size:13px;line-height:1.5}h3{font-size:11px;line-height:1.5}
/* Top overlay bar: mockup dark green pixel header */
#topbar{position:fixed;top:0;left:0;right:0;z-index:20;background:linear-gradient(180deg,#245c27,#1a421e 70%,#14351a);border-bottom:4px solid #0c2410;box-shadow:0 4px 0 rgba(0,0,0,.45);padding:10px 12px 10px}
#topbar::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(#3d7a3f 1px,transparent 1.5px);background-size:9px 9px}
.brandrow{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.pixelsprout{width:28px;height:28px;image-rendering:pixelated;flex:none}
.brand{font-size:17px;color:#fdf6c8;text-shadow:2px 2px 0 #000, -1px -1px 0 #000;letter-spacing:1px}
.sub{color:#c8e6a0;font-size:12px;margin:6px 0 8px;position:relative;z-index:1}
.stats{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.stats span{background:#2e1f12;border:2px solid #140c06;border-radius:0;padding:6px 8px;font-size:11px;color:#fdf6c8;box-shadow:inset 0 0 0 1px #6b4a2f}
/* Full-viewport soil canvas, not a boxed card */
#stage{position:fixed;inset:0;z-index:1;background:#6d4a2f}
/* Navigation iteration 2: no visible scrollbars anywhere. Canvas pan/zoom is
   transform-based; drawer/sheet content still scrolls by touch/drag, but with
   the scrollbar hidden. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
.canvaswrap{position:absolute;inset:0;overflow:hidden;padding:0;touch-action:none;cursor:grab}
.canvaswrap:active{cursor:grabbing}
.canvas{position:absolute;left:0;top:0;display:grid;gap:2px;background:#4a2e1a;padding:2px;margin:0;image-rendering:pixelated;box-shadow:0 0 0 4px #3a2415;will-change:transform}
.cell{aspect-ratio:1;background-color:#7a5433;background-image:radial-gradient(circle at 22% 28%,#8d6e4a 0 10%,transparent 11%),radial-gradient(circle at 72% 62%,#5d4037 0 9%,transparent 10%),radial-gradient(circle at 44% 82%,#9c7a52 0 7%,transparent 8%),radial-gradient(circle at 85% 18%,#6d4c41 0 8%,transparent 9%);border:0;border-radius:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;position:relative;overflow:hidden}
.cell.mine{outline:2px solid #1b5e20;outline-offset:-2px}
.cell.focus{outline:3px solid #2e7d32;outline-offset:-3px}
.cell.newest{outline:2px solid #1b5e20;outline-offset:-2px}
.cell.frontier{background-color:transparent;outline:1px solid rgba(27,94,32,.55);outline-offset:-1px}
.cell.soil{cursor:not-allowed;opacity:.75}
.hint{position:fixed;left:50%;transform:translateX(-50%);bottom:158px;z-index:15;background:rgba(30,20,10,.92);color:#fdf6c8;font-size:12px;padding:8px 12px;border:2px solid #140c06;max-width:92vw;text-align:center;pointer-events:none}
/* Bottom overlay controls: mockup green pixel button */
#bottombar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:linear-gradient(180deg,#3a2718,#241708);border-top:4px solid #0c2410;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.actions{display:flex;gap:8px;margin-top:6px}.actions:first-child{margin-top:0}
.btn{border:3px solid #0f2a12;border-radius:0;padding:11px 12px;font-size:11px;line-height:1.4;cursor:pointer;background:#2e7d4a;color:#fdf6c8;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25);text-shadow:1px 1px 0 #000}
.btn.secondary{background:#4a3a28;color:#fdf6c8;flex:1;border-color:#140c06}
.btn.pixelbtn.small{padding:8px 10px;font-size:10px}
.btn.primary{background:#2e7d4a;color:#fdf6c8;width:100%;margin-top:10px;font-size:13px;padding:14px}
.btn.ghost{background:transparent;color:#d7ccc8;border-color:transparent;box-shadow:none;text-shadow:none}
.btn:disabled{opacity:.5}
.notice{background:#3a2a1a;border:2px solid #140c06;padding:8px 10px;margin-top:8px;font-size:12px;color:#fdf6c8}
.notice:empty{display:none}
/* Drawer overlay, not a section below the canvas */
.boarddrawer{position:fixed;top:118px;right:10px;bottom:170px;width:min(360px,92vw);z-index:25;background:#2f2318;border:3px solid #140c06;box-shadow:0 6px 0 rgba(0,0,0,.5);overflow:auto;padding:14px}
.drawerhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.board{color:#fdf6c8}
.board h2,.board h3{margin:14px 0 6px;color:#ffe082}.board h2:first-child{margin-top:0}
.small{color:#d7ccc8;font-size:12px;margin:4px 0 10px;line-height:1.5}
.board ol{margin:6px 0 6px 20px;padding:0}.board li{margin:6px 0;font-size:13px;line-height:1.5}
.feedrow{display:flex;justify-content:space-between;gap:8px;margin:8px 0;font-size:12px;line-height:1.5}
.feedrow button{border:2px solid #140c06;background:#2e7d4a;color:#fff;padding:6px 10px;cursor:pointer;white-space:nowrap;font-size:11px}
/* Plants: stem bends, leaves flutter independently, gust sweeps by position */
.cell .plant{width:92%;transform-origin:50% 100%;position:relative;animation:bend var(--gust-dur,3.2s) ease-in-out infinite;animation-delay:var(--gust,0s)}
.px{display:grid;grid-template-columns:repeat(9,1fr);gap:0;image-rendering:pixelated}
.px i{display:block;aspect-ratio:1}
.px i.px-leaf{animation:flutter 1.3s ease-in-out infinite;animation-delay:var(--gust,0s);transform-origin:50% 100%}
.px i.px-petal{animation:petalshimmer 2.8s ease-in-out infinite;animation-delay:var(--gust,0s)}
@keyframes bend{0%,100%{transform:skewX(-1.2deg) rotate(-1deg)}50%{transform:skewX(1.4deg) rotate(1.2deg)}}
@keyframes flutter{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-.5px) scaleY(1.12)}}
@keyframes petalshimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) saturate(1.2)}}
.cell .plant.stage-seed{animation:seedshimmer 2.4s ease-in-out infinite;animation-delay:var(--gust,0s)}
@keyframes seedshimmer{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.4)}}
.cell .plant.stage-sprout{animation:sproutbounce 2.1s ease-in-out infinite;animation-delay:var(--gust,0s)}
@keyframes sproutbounce{0%,100%{transform:scaleY(1) translateY(0)}30%{transform:scaleY(1.12) translateY(-1px)}60%{transform:scaleY(.96) translateY(0)}}
.cell .plant.stage-leaves{animation:bend 3.2s ease-in-out infinite;animation-delay:var(--gust,0s)}
.cell .plant.stage-tall-stem{animation:bend 4.6s ease-in-out infinite;animation-delay:var(--gust,0s)}
.cell .plant.stage-bud{animation:budbreathe 3s ease-in-out infinite;animation-delay:var(--gust,0s)}
@keyframes budbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09);filter:brightness(1.15)}}
.cell .plant.stage-bloom{animation:bend 3.4s ease-in-out infinite;animation-delay:var(--gust,0s)}
.cell .plant.droopy{animation:droopsway 3.6s ease-in-out infinite}
.cell .plant.wilted{filter:sepia(.9) saturate(.35) brightness(.72);animation:droopslow 4.2s ease-in-out infinite}
@keyframes droopsway{0%,100%{transform:rotate(9deg) scaleY(.97)}50%{transform:rotate(13deg) scaleY(.94)}}
@keyframes droopslow{0%,100%{transform:rotate(11deg) scaleY(.92)}50%{transform:rotate(17deg) scaleY(.88)}}
.cell .plant .pollen{position:absolute;width:4px;height:4px;background:#ffeb3b;border-radius:0;animation:pollendrift 4s ease-in-out infinite;animation-delay:var(--gust,0s)}
.cell .plant .pollen.p1{top:6%;left:64%}
.cell .plant .pollen.p2{left:28%;top:18%;animation-delay:calc(var(--gust,0s) + 1.3s)}
.cell .plant .pollen.p3{left:48%;top:2%;animation-delay:calc(var(--gust,0s) + 2.1s);background:#fff59d}
@keyframes pollendrift{0%{transform:translate(0,0);opacity:0}25%{opacity:1}100%{transform:translate(8px,-16px);opacity:0}}
.cell .plant .splashdrop{position:absolute;bottom:10%;width:4px;height:4px;background:#81d4fa;animation:splashdrop 1s ease-out forwards}
@keyframes splashdrop{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--sx,6px),-18px);opacity:0}}
.cell .plant .soilbit{position:absolute;bottom:4%;width:3px;height:3px;background:#5d4037;animation:soilpop .7s ease-out forwards}
@keyframes soilpop{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--sx,-6px),-12px);opacity:0}}
.cell .plant.newplant{animation:plantpop .65s cubic-bezier(.34,1.56,.64,1) both}
@keyframes plantpop{0%{transform:scale(.2) translateY(6px);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#2f2318;color:#fdf6c8;border-top:4px solid #0c2410;padding:18px;max-width:640px;margin:0 auto;box-shadow:0 -6px 30px rgba(0,0,0,.5);z-index:40;max-height:85vh;overflow:auto}
.sheet h2{margin:0 0 8px;color:#ffe082}.sheet p{color:#d7ccc8;margin:0 0 12px;line-height:1.5;font-size:13px}
.sheet label{display:block;font-weight:600;font-size:13px}.sheet input{width:100%;padding:12px;margin-top:6px;border:2px solid #140c06;background:#fdf6e3;color:#2d2413;font-size:16px}
.seeds{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.seeds button{flex:1;min-width:90px;border:2px solid #140c06;background:#4a3a28;color:#fdf6c8;padding:10px;cursor:pointer;font-size:12px;line-height:1.5}
.seeds button.sel{border-color:#ffd54f;background:#2e7d4a}
.detailgrid{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin:12px 0;font-size:13px}
.detailgrid div:nth-child(odd){color:#bcaaa4}
#toast{position:fixed;left:50%;bottom:190px;transform:translateX(-50%);background:#1a120a;color:#fdf6c8;padding:12px 16px;border:2px solid #ffd54f;display:none;z-index:50;font-size:12px;max-width:92vw;text-align:center}
.hovertip{position:fixed;z-index:60;background:#1a120a;color:#fdf6c8;padding:8px 12px;border:2px solid #ffd54f;font-size:12px;pointer-events:none;max-width:270px;line-height:1.5}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (min-width:700px){.brand{font-size:20px}.canvaswrap{padding-top:132px}}

/* ===== CUTE COLORFUL OVERRIDE (Oct 26, 2026) — whole site, not dark/muddy =====
   Soil here is PROVISIONAL light sandy warm only: final soil is NOT chosen
   until Javier picks from Terraria dirt blocks / light sandy / rich dark topsoil. */
body{background:#fff3d6;color:#4a3220}
#topbar{background:linear-gradient(180deg,#6fce62,#43b04c 70%,#379e42);border-bottom:4px solid #1f7a2e;box-shadow:0 4px 0 rgba(31,122,46,.25)}
#topbar::after{opacity:.18}
.brand{color:#fffde7;text-shadow:2px 2px 0 #1f7a2e}
.sub{color:#eaffea}
.stats span{background:#fffbe8;border-color:#f0d9a0;color:#3d5a1e;box-shadow:0 2px 0 rgba(0,0,0,.08)}
#stage{background:#f2cd8f}
.canvaswrap{padding-top:142px}
.canvas{background:#c99a5e;box-shadow:0 0 0 4px #a67c44}
.cell{background-color:#f0d3a0;background-image:radial-gradient(circle at 22% 28%,#ffe9bd 0 10%,transparent 11%),radial-gradient(circle at 72% 62%,#d9b57e 0 9%,transparent 10%),radial-gradient(circle at 44% 82%,#ffe9bd 0 7%,transparent 8%),radial-gradient(circle at 85% 18%,#e8c48a 0 8%,transparent 9%)}
.cell.frontier{background-color:#ffe9a8}
.cell.soil{opacity:.85}
.hint{background:rgba(255,251,232,.96);color:#4a3220;border-color:#f0d9a0}
#bottombar{background:linear-gradient(180deg,#fff8e1,#ffe9a8);border-top:4px solid #f0c060}
.btn{background:#43b04c;border-color:#1f7a2e}
.btn.secondary{background:#fffbe8;color:#4a3220;border-color:#e8c99a}
.btn.primary{background:#43b04c}
.btn.ghost{color:#7a5a3a}
.notice{background:#fffbe8;border-color:#f0d9a0;color:#4a3220}
.boarddrawer{background:#fffbe8;border-color:#f0d9a0;color:#4a3220;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.board{color:#4a3220}.board h2,.board h3{color:#2e7d32}
.small{color:#7a5a3a}
.feedrow button{background:#ff8fb3;border-color:#e85d8a;color:#fff}
.sheet{background:#fffbe8;color:#4a3220;border-top:4px solid #43b04c}
.sheet h2{color:#2e7d32}.sheet p{color:#7a5a3a}
.seeds button{background:#fff3d6;color:#4a3220;border-color:#e8c99a}
.seeds button.sel{background:#43b04c;color:#fff}
.detailgrid div:nth-child(odd){color:#7a5a3a}
#toast{background:#fffbe8;color:#4a3220;border-color:#43b04c}
.hovertip{background:#fffbe8;color:#4a3220;border-color:#43b04c}
/* Day/time-of-day overlays: smooth opacity, pointer-events none */
#daylight{position:absolute;inset:0;z-index:3;pointer-events:none}
#daylight .light{position:absolute;inset:0;opacity:0;transition:opacity 3s ease}
#daylight .light.dawn{background:linear-gradient(180deg,rgba(255,190,140,.45),rgba(255,220,150,.25))}
#daylight .light.day{background:rgba(255,250,200,.05)}
#daylight .light.dusk{background:linear-gradient(180deg,rgba(255,130,60,.4),rgba(150,80,200,.3))}
#daylight .light.night{background:linear-gradient(180deg,rgba(15,30,90,.55),rgba(10,20,60,.35))}
#nightfx{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 3s ease}
#nightfx .star{position:absolute;width:4px;height:4px;background:#fffde7;animation:twinkle 2.4s ease-in-out infinite}
#nightfx .firefly{position:absolute;width:6px;height:6px;background:#d4ff7a;border-radius:50%;box-shadow:0 0 10px #d4ff7a;animation:fireflyfloat 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes fireflyfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-10px)}}
body[data-phase="night"] .cell .plant:not(.wilted){filter:drop-shadow(0 0 6px rgba(180,255,180,.55))}
/* Cute bouncy animations: squash-and-stretch, happy wiggle, petal flutter, sparkle bursts */
.cell .plant.newplant{animation:plantsquash .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes plantsquash{0%{transform:scale(1.3,.6) translateY(8px);opacity:0}45%{transform:scale(.85,1.25) translateY(-2px);opacity:1}70%{transform:scale(1.1,.9)}100%{transform:scale(1,1)}}
.cell .plant.watered{animation:happywiggle 1.1s cubic-bezier(.34,1.56,.64,1)}
@keyframes happywiggle{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.08,.92)}50%{transform:rotate(9deg) scale(.94,1.1)}75%{transform:rotate(-5deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}
.px i.px-petal{animation:petalflutter 2.2s ease-in-out infinite;animation-delay:var(--gust,0s)}
@keyframes petalflutter{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1px) rotate(2deg);filter:brightness(1.4)}}
.cell .plant .sparkle{position:absolute;width:5px;height:5px;background:#fff59d;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sparkletwinkle 2s ease-in-out infinite}
.cell .plant .sparkle.s1{top:2%;left:55%}.cell .plant .sparkle.s2{top:14%;left:30%;animation-delay:1s}.cell .plant .sparkle.s3{top:0;left:42%;animation-delay:.5s}
@keyframes sparkletwinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.cell .plant .burst{position:absolute;bottom:20%;width:6px;height:6px;animation:burstpop 1.1s cubic-bezier(.34,1.56,.64,1) forwards}
.cell .plant .burst.b1{left:30%;background:#ff8fb3}.cell .plant .burst.b2{left:50%;background:#ffd54f}.cell .plant .burst.b3{left:65%;background:#81d4fa}.cell .plant .burst.b4{left:42%;background:#b39ddb}
@keyframes burstpop{0%{transform:translate(0,0) scale(.5);opacity:1}100%{transform:translate(var(--bx,0),-28px) scale(1.2);opacity:0}}
.cell .plant .burst.b1{--bx:-12px}.cell .plant .burst.b2{--bx:0}.cell .plant .burst.b3{--bx:12px}.cell .plant .burst.b4{--bx:-4px}

/* ===== FINAL SOIL (Oct 26, 2026, Javier locked): Terraria dirt blocks, NO roots, NO grass =====
   Warm brown dirt with dark/light speckles and small grey stones, edge to edge.
   No grass edge, no grass strip, no root lines anywhere on the canvas. */
#stage{background-color:#b07a45;background-image:
  radial-gradient(circle at 18% 22%, #8a5a2e 0 6%, transparent 7%),
  radial-gradient(circle at 68% 58%, #8a5a2e 0 5%, transparent 6%),
  radial-gradient(circle at 42% 82%, #e0b878 0 6%, transparent 7%),
  radial-gradient(circle at 84% 18%, #9aa0a6 0 4%, transparent 5%),
  radial-gradient(circle at 28% 72%, #9aa0a6 0 3%, transparent 4%),
  radial-gradient(circle at 55% 35%, #7a4a22 0 4%, transparent 5%)}
.canvas{background:#8a5a2e;box-shadow:0 0 0 4px #6d4420}
.cell{background-color:#b07a45;background-image:
  radial-gradient(circle at 22% 28%, #8a5a2e 0 10%, transparent 11%),
  radial-gradient(circle at 72% 62%, #e0b878 0 8%, transparent 9%),
  radial-gradient(circle at 44% 82%, #7a4a22 0 6%, transparent 7%),
  radial-gradient(circle at 85% 18%, #9aa0a6 0 5%, transparent 6%)}
.cell:nth-child(3n){background-image:
  radial-gradient(circle at 30% 40%, #9aa0a6 0 6%, transparent 7%),
  radial-gradient(circle at 70% 70%, #8a5a2e 0 9%, transparent 10%),
  radial-gradient(circle at 50% 20%, #e0b878 0 7%, transparent 8%)}
.cell.frontier{background-color:#d9b57e}

/* ===== GROUND PIVOT (Oct 26, 2026, Javier locked, supersedes brown soil canvas) =====
   Whole canvas ground is GREEN GRASS, pixel grass texture, cute colorful.
   No brown soil blocks, no dirt texture as the main ground, no roots.
   The ONLY dirt on the canvas is the small planting mound under each planted plant. */
#stage{background-color:#7cc24f;background-image:
  radial-gradient(circle at 18% 22%, #5aa83a 0 6%, transparent 7%),
  radial-gradient(circle at 68% 58%, #a8e07a 0 6%, transparent 7%),
  radial-gradient(circle at 42% 82%, #5aa83a 0 5%, transparent 6%),
  radial-gradient(circle at 84% 18%, #c8f090 0 5%, transparent 6%),
  radial-gradient(circle at 28% 72%, #6fbf4a 0 4%, transparent 5%)}
.canvas{background:#4a8a2e;box-shadow:0 0 0 4px #3a6e22}
.cell{background-color:#7cc24f;background-image:
  radial-gradient(circle at 22% 28%, #5aa83a 0 10%, transparent 11%),
  radial-gradient(circle at 72% 62%, #a8e07a 0 8%, transparent 9%),
  radial-gradient(circle at 44% 82%, #6fbf4a 0 6%, transparent 7%),
  radial-gradient(circle at 85% 18%, #c8f090 0 5%, transparent 6%)}
.cell:nth-child(3n){background-image:
  radial-gradient(circle at 30% 40%, #a8e07a 0 7%, transparent 8%),
  radial-gradient(circle at 70% 70%, #5aa83a 0 9%, transparent 10%),
  radial-gradient(circle at 50% 20%, #c8f090 0 6%, transparent 7%)}
.cell.frontier{background-color:#b8e07a}
.cell.soil{opacity:.9}
/* Planting mound: small cute pixel dirt mound under every planted plant.
   Most prominent at seed/sprout, smaller as a base under bloom. Pops in at planting. */
.cell .plant .mound{position:absolute;left:12%;right:12%;bottom:1px;height:20%;background-color:#b07a45;background-image:radial-gradient(circle at 30% 40%, #8a5a2e 0 12%, transparent 13%),radial-gradient(circle at 70% 60%, #e0b878 0 10%, transparent 11%),radial-gradient(circle at 50% 30%, #9aa0a6 0 6%, transparent 7%);border:2px solid #7a4a22;border-bottom:0;z-index:-1}
.cell .plant.stage-seed .mound{height:32%;left:8%;right:8%}
.cell .plant.stage-sprout .mound{height:28%;left:10%;right:10%}
.cell .plant.stage-leaves .mound{height:22%}
.cell .plant.stage-tall-stem .mound{height:18%}
.cell .plant.stage-bud .mound{height:16%}
.cell .plant.stage-bloom .mound{height:14%}
.cell .plant.newplant .mound{animation:moundpop .65s cubic-bezier(.34,1.56,.64,1) both}
@keyframes moundpop{0%{transform:scale(.4,.4);opacity:0}70%{transform:scale(1.15,1.1)}100%{transform:scale(1,1)}}

/* First-seed prompt: centered over the empty grass canvas, no grid shown. */
.firstseed{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:12;background:#fffbe8;color:#4a3220;border:3px solid #f0d9a0;padding:20px;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.firstseed h2{color:#2e7d32;margin:0 0 8px}
.firstseed p{color:#7a5a3a;font-size:13px;line-height:1.5;margin:0 0 12px}

/* ===== MOCKUP-EXACT OVERRIDE (Oct 26, 2026, Javier approved "exactly like this") =====
   Reference: garden-mockup-pixel image. Detailed pixel green grass full screen,
   pixel wildflowers with shading on dirt mounds, pixel-font header panel,
   pixel stats and tan/green pixel buttons. NO Shop/Journal/gold/level features:
   those mockup elements are style artifacts only. Controls kept are the game's
   own: plants, streak, waterings, See full garden, Newest, Feed, My plant. */
.px{grid-template-columns:repeat(16,1fr)}
/* Header: floating light-green pixel panel, not a full-width dark bar */
#topbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:transparent;border:0;box-shadow:none;padding:0;z-index:20}
#topbar::after{display:none}
.brandrow{background:#8bc34a;background-image:radial-gradient(#aed581 2px,transparent 2.5px),radial-gradient(#7cb342 2px,transparent 2.5px);background-size:14px 14px,18px 18px;background-position:0 0,4px 6px;border:3px solid #1b2a12;border-radius:16px;box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 -6px 0 rgba(0,0,0,.12);padding:12px 14px;justify-content:center}
.brand{font-size:22px;color:#fff8d0;text-shadow:3px 3px 0 #1b2a12,-1px -1px 0 #1b2a12;letter-spacing:0}
#topbar .sub{text-align:center;color:#fffde7;text-shadow:2px 2px 0 #1b2a12;font-size:11px;margin:10px 0 6px}
.stats{justify-content:center}
.stats span{background:transparent;border:0;box-shadow:none;color:#fffde7;text-shadow:2px 2px 0 #1b2a12;font-family:'Press Start 2P',monospace;font-size:10px;padding:4px 6px}
/* Full-screen detailed pixel grass: vivid green, varied blades and speckles */
#stage{background-color:#5cb531;background-image:
  radial-gradient(circle at 12% 18%, #7cc24f 0 3%, transparent 4%),
  radial-gradient(circle at 38% 42%, #4a9e2f 0 3%, transparent 4%),
  radial-gradient(circle at 62% 22%, #8fd65a 0 2%, transparent 3%),
  radial-gradient(circle at 82% 58%, #4a9e2f 0 3%, transparent 4%),
  radial-gradient(circle at 24% 74%, #8fd65a 0 2%, transparent 3%),
  radial-gradient(circle at 55% 82%, #3d8a24 0 3%, transparent 4%),
  radial-gradient(circle at 90% 12%, #a8e07a 0 2%, transparent 3%),
  radial-gradient(circle at 8% 52%, #3d8a24 0 2%, transparent 3%)}
.canvas{background:transparent;box-shadow:none;padding:0;gap:0}
.cell{background:transparent;background-image:none}
.cell:nth-child(3n){background-image:none}
.cell.frontier{background:transparent;outline:1px solid rgba(27,94,32,.55);outline-offset:-1px}
.cell.soil{opacity:1;background:transparent}
.cell.mine{outline:2px solid #1b5e20}
.cell .plant{width:100%}
.cell .plant .mound{left:4%;right:4%;bottom:0;height:34%;background-color:#6b4226;background-image:radial-gradient(circle at 30% 40%, #4a2c17 0 12%, transparent 13%),radial-gradient(circle at 70% 60%, #8a5a2e 0 10%, transparent 11%),radial-gradient(circle at 50% 30%, #9aa0a6 0 5%, transparent 6%);border:3px solid #2b1a0e;border-bottom:0;border-radius:50% 50% 8% 8% / 90% 90% 8% 8%;z-index:0}
.cell .plant.stage-seed .mound{height:40%}
.cell .plant.stage-bloom .mound{height:30%}
.cell .plant .px{position:relative;z-index:1}
/* Bottom: transparent over grass, tan pixel buttons + large green Water button */
#bottombar{background:transparent;border:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.btn.secondary{background:#e8c48a;color:#4a3220;border:3px solid #1b2a12;box-shadow:0 3px 0 rgba(0,0,0,.4);text-shadow:none}
.btn.pixelbtn.small{background:#e8c48a;color:#4a3220;border:3px solid #1b2a12;box-shadow:0 3px 0 rgba(0,0,0,.4);text-shadow:none}
.waterbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#66bb6a,#2e7d32);border:3px solid #1b2a12;border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35);color:#ffffff;text-shadow:2px 2px 0 #1b2a12;font-size:15px;padding:16px;width:100%;margin-top:10px}
.waterbtn svg{width:20px;height:20px;image-rendering:pixelated;flex:none}
.hint{background:#fffbe8;color:#4a3220;border:3px solid #e8c99a;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.boarddrawer{background:#fff8dc;border:3px solid #1b2a12;color:#4a3220}
.board{color:#4a3220}.board h2,.board h3{color:#2e7d32}
.sheet{background:#fff8dc;color:#4a3220;border-top:4px solid #2e7d32}
.sheet h2{color:#2e7d32}
.firstseed{background:#fff8dc;color:#4a3220;border:3px solid #1b2a12}
.firstseed h2{color:#2e7d32}
#daylight{z-index:5}
#nightfx{z-index:6}
.canvaswrap{z-index:1}

/* ===== GENERATED-ART OVERRIDE (Oct 26, 2026, Javier: CSS approximation is trash) =====
   Real PNG art: generated grass tile + generated flower sprites, pixelated.
   No div-matrix art for generated species, no CSS rotate/scale sway of art.
   Sway is frame swapping in app.js (plant base<->sway, grass bands 0/1/2). */
#stage{background-color:#3f9e2f;background-image:url("assets/grass-gen.png");background-repeat:repeat;background-size:256px 256px;image-rendering:pixelated}
#grassSway{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:hidden}
#canvas{z-index:1}
.brandrow{background-image:url("assets/header-panel.png");background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;border:0;border-radius:0;box-shadow:none;padding:30px 28px}
.plant{width:100%;height:100%}
.plantimg{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;position:relative;z-index:1}
.cell .plant .mound{display:none}
.cell{padding-bottom:0}
/* Generated plants sway by frame swap only: kill CSS bend/sway on image plants. */
.cell .plant:has(.plantimg){animation:none !important}
.cell .plant:has(.plantimg).stage-seed,.cell .plant:has(.plantimg).stage-sprout,.cell .plant:has(.plantimg).stage-bud,.cell .plant:has(.plantimg).stage-bloom,.cell .plant:has(.plantimg).stage-leaves,.cell .plant:has(.plantimg).stage-tall-stem{animation:none !important}

/* ===== FIX Oct 26 11:36-11:38: wider fit, no flashing grid, smooth grass, pixelated, minimal ===== */
/* Static subtle dark-green grid only: 1px inset, never white/yellow, never animated. */
.canvas .cell{box-shadow:inset 0 0 0 1px rgba(20,60,20,.18)}
.canvas .cell.frontier{box-shadow:inset 0 0 0 1px rgba(27,94,32,.55)}
/* Smooth uniform grass sway across the whole canvas: one layer, CSS animation only.
   background-position travels one tile (linear, seamless loop) for a breeze that
   moves all the way across; a slow lean (skew/translate) runs on the same layer.
   No JS tick, no bands, no seams. */
#grassSway{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:hidden}
#grassSwayInner{position:absolute;left:-64px;right:-64px;top:-64px;bottom:-64px;
  background-image:url("assets/grass-blades-pixel.png");background-repeat:repeat;background-size:256px 256px;
  image-rendering:pixelated;opacity:.85;
  animation:grassTravel 16s linear infinite, grassLean 5.5s ease-in-out infinite alternate}
@keyframes grassTravel{from{background-position:0 0}to{background-position:256px 0}}
@keyframes grassLean{from{transform:translateX(-10px) skewX(-1.2deg)}to{transform:translateX(10px) skewX(1.2deg)}}
/* More pixelated: chunky pixels everywhere, no smooth gradients/blur on art or buttons. */
img,svg,.plantimg,.brandrow{image-rendering:pixelated}
.brandrow{border-radius:0 !important}
.btn,.waterbtn{border-radius:0 !important;background-image:none !important}
.waterbtn{background:#2e7d32 !important}
.boarddrawer,.sheet,.firstseed{box-shadow:4px 4px 0 rgba(0,0,0,.35) !important}
/* Minimal header/bottombar: compact, quiet, grass is the focus. */
#topbar{top:8px}
.brandrow{padding:14px 18px}
#topbar .sub{display:none}
.stats span{font-size:9px;padding:3px 5px}
#bottombar{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.menudrawer{position:fixed;right:10px;bottom:148px;width:min(280px,88vw);z-index:30;background:#fff8dc;border:3px solid #1b2a12;box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:12px}
.menudrawer .btn{width:100%;margin:4px 0}
.hint{bottom:142px;font-size:11px;padding:6px 10px}

#toast,.hovertip{border-color:#1b5e20 !important}
.seeds button.sel{border-color:#1b5e20 !important}