/* THE SEASON GARDEN (PRD 5 Oct 2026): shared by /season and /garden. The game's real plant portraits on a night bed,
   in planting order, never by size. Names for signed-in players only (the API never sends them to a signed-out visitor). */
.garden{position:relative;border-radius:30px;overflow:hidden;isolation:isolate;padding:30px 30px 0;
  background:radial-gradient(70% 60% at 50% 110%,rgba(227,200,120,.22),transparent 70%),radial-gradient(60% 50% at 15% 0%,rgba(46,200,110,.16),transparent 70%),linear-gradient(180deg,#071043 0%,#06103A 55%,#0A1A2C 100%);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 50px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(227,200,120,.08)}
.garden::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgb(46,200,110),#E3C878,transparent);box-shadow:0 0 22px rgba(46,200,110,.7)}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:4}
.gstat{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.gstat b{display:block;font:700 34px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gstat span{font:700 11px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(199,206,221,.62)}
.gstat.cg b{color:#7BE3A0}.gstat.cy b{color:#F1D77A}.gstat.cb b{color:#8EB4FF}
.bed{position:relative;height:var(--bh,400px);margin:18px -30px 0;overflow:hidden}
.bed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:2;background:linear-gradient(180deg,rgba(40,30,18,0),rgba(30,24,16,.85) 60%,#120E0A);box-shadow:0 -1px 0 rgba(227,200,120,.18);pointer-events:none}
.grow{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;padding:0 18px}
.pl{position:relative;z-index:2;flex:0 0 auto;margin:0 -10px;display:flex;flex-direction:column;align-items:center;cursor:pointer;outline:none;animation:pl-sprout .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i) * 45ms)}
.pl .in{transform-origin:50% 100%;animation:pl-sway var(--sw,7s) ease-in-out infinite;animation-delay:calc(var(--i) * -.6s);transition:filter .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.pl img{display:block;height:calc(var(--h) * var(--k,1));width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.grow.back .pl img{filter:brightness(var(--dim,.7)) saturate(.85) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
/* growing plants: the garden's own stage drawings, square, standing on the same soil line (5 Oct 2026) */
.pl.young svg{display:block;height:calc(var(--h) * var(--k,1));width:calc(var(--h) * var(--k,1));margin:0 6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(123,227,160,.18))}
.grow.back .pl.young svg{filter:brightness(var(--dim,.7)) saturate(.85)}
.pl .tag,.g3d-tag{position:absolute;bottom:calc(var(--h) * var(--k,1) + 8px);left:50%;transform:translate(-50%,6px);white-space:nowrap;padding:8px 12px;border-radius:12px;font:700 13px/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#F4F1EA;background:rgba(10,12,40,.94);box-shadow:0 0 0 1px rgba(227,200,120,.45),0 14px 30px -10px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1);z-index:9}
.pl .tag small,.g3d-tag small{display:block;font:700 10px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E3C878;margin-top:4px}
.pl.mine .in::after{content:"";position:absolute;left:50%;bottom:-6px;width:70%;height:12px;margin-left:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,200,120,.8),transparent);filter:blur(2px)}
.pl.mine .in{position:relative}
.bed.focus .pl .in{filter:brightness(.38) saturate(.6) blur(1.2px)}
.bed.focus .pl.on .in{filter:drop-shadow(0 0 22px rgba(227,200,120,.55));transform:scale(1.06)}
.pl.on .tag{opacity:1;transform:translate(-50%,0)}
/* the empty bed, before the first plant is grown in full: silhouettes at night against a low dawn, seeds glowing in the soil */
.bed.preview::before{content:"";position:absolute;left:-10%;right:-10%;bottom:30px;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(55% 70% at 50% 100%,rgba(245,206,52,.26),rgba(227,200,120,.08) 45%,transparent 72%),radial-gradient(35% 45% at 22% 100%,rgba(46,200,110,.16),transparent 70%),radial-gradient(35% 45% at 80% 100%,rgba(47,120,255,.16),transparent 70%)}
.bed.preview .grow{z-index:1}
.bed.preview::after{box-shadow:none}
.bed.preview .pl{cursor:default}
.bed.preview .pl img{filter:brightness(0) drop-shadow(0 0 1px rgba(227,200,120,.55)) drop-shadow(0 -2px 10px rgba(245,206,52,.14));opacity:.92}
.bed .seeds{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;justify-content:space-evenly;padding:0 6%;pointer-events:none}
.bed .seeds i{width:7px;height:7px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 6px 2px rgba(245,206,52,.7),0 0 18px 4px rgba(227,200,120,.25);opacity:.35;animation:seed-glow 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .32s)}
.bed .soon{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;justify-content:center;text-align:center;padding:30px 24px 0;pointer-events:none}
.bed .soon p{max-width:620px;animation:soon-in 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
.bed .soon span{display:inline-block;font:500 10.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;color:#7BE3A0;padding:6px 11px;border-radius:999px;background:rgba(46,200,110,.12);box-shadow:inset 0 0 0 1px rgba(46,200,110,.38)}
.bed .soon b{display:block;margin-top:14px;font:700 clamp(24px,3.1vw,38px)/1.08 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.025em;color:#FFE7A3;text-shadow:0 2px 24px rgba(5,6,31,.9),0 0 40px rgba(245,206,52,.25)}
.bed .soon em{display:block;margin:10px auto 0;max-width:46ch;font:400 15px/1.5 "IBM Plex Sans",-apple-system,system-ui,sans-serif;font-style:normal;color:#C7CEDD;text-shadow:0 1px 14px rgba(5,6,31,.95)}
/* builds by size (Phase 2 fills them): five sizes in the five innovator colours, quiet at zero */
.gsizes{position:relative;z-index:4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0 0}
.gsizes > em{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:rgba(199,206,221,.62);margin-right:4px}
.gsz{--c:245,206,52;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(var(--c),.07);box-shadow:inset 0 0 0 1px rgba(var(--c),.28);font:500 13px/1 "Jost",Futura,sans-serif;color:#E8E4DA}
.gsz i{font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:rgb(var(--c));background:rgba(var(--c),.14)}
.gsz b{font:700 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;color:rgb(var(--c));margin-left:2px}
.gsz:nth-of-type(2){--c:255,92,34}.gsz:nth-of-type(3){--c:47,120,255}.gsz:nth-of-type(4){--c:46,200,110}.gsz:nth-of-type(5){--c:150,80,225}
.gsizes > small{flex-basis:100%;font:400 13px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:rgba(199,206,221,.62)}
.gcap{position:relative;z-index:4;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 22px;font-size:14px;color:#C7CEDD}
.gcap b{color:#F4F1EA}
.gcap em{font-style:normal;font:700 10.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(199,206,221,.62);align-self:center}
@keyframes pl-sprout{from{opacity:0;transform:translateY(30px) scale(.85)}}
@keyframes seed-glow{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes soon-in{from{opacity:0;transform:translateY(14px)}}
@keyframes pl-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@media (max-width:640px){
  .garden{padding:20px 16px 0}.bed{margin:14px -16px 0}
  .gstats{grid-template-columns:1fr;gap:8px}.gstat{display:flex;align-items:baseline;gap:12px;padding:11px 14px}.gstat b{font-size:24px}.gstat span{letter-spacing:.1em;font-size:10px}
}
@media (max-width:640px){.bed .soon{padding:22px 16px 0}.bed .soon em{font-size:14px}.bed .seeds{padding:0 4%}.bed .seeds i:nth-child(n+10){display:none}.gsizes{gap:8px}.gsizes > em{flex-basis:100%;margin-bottom:2px}.gsz{font-size:12.5px;padding:6px 10px 6px 8px}}
@media (prefers-reduced-motion:reduce){.pl,.pl .in,.bed .seeds i,.bed .soon p{animation:none!important;transition:none!important}.bed .seeds i{opacity:.75}}
.gcap [data-k="latest"]:not([hidden]){display:block;margin-top:4px}
/* THE 3D ISLAND (6 Oct 2026): a WebGL canvas fills the bed; the DOM plants stay, visually hidden, for screen readers and keys */
.bed.g3d{height:clamp(360px,44vw,560px)!important;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bed.g3d.dragging{cursor:grabbing}
.bed.g3d::before,.bed.g3d::after{display:none}
.bed.g3d .grow,.bed.g3d .seeds{position:absolute!important;left:0!important;right:auto!important;bottom:0!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.g3d-cv{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;animation:g3d-in 1.2s ease-out both}
.g3d-tag{bottom:auto;transform:translate(-50%,calc(-100% + 6px))}
.g3d-tag.on{opacity:1;transform:translate(-50%,-100%)}
.g3d-hint{position:absolute;left:50%;bottom:16px;z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:500 10.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,228,218,.82);background:rgba(6,10,40,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:g3d-hint 1s ease-out 1.6s both;transition:opacity .5s}
.g3d-hint::before{content:"";width:14px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C878' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12a8 4 0 0 0 16 0'/%3E%3Cpath d='M17 15l3-3 1 4'/%3E%3C/svg%3E")}
.g3d-hint.gone{opacity:0}
.bed.g3d .soon{z-index:6;pointer-events:none}
@keyframes g3d-in{from{opacity:0}}
@keyframes g3d-hint{from{opacity:0;transform:translate(-50%,8px)}}
@media (max-width:640px){.bed.g3d{height:300px!important}}
@media (prefers-reduced-motion:reduce){.g3d-cv,.g3d-hint{animation:none}}