/* ===========================================================================
   garden-nightdeck.css  --  Community Garden "Night Deck" scene + bed styling
   (TASK-760 Phase A). Lifted/adapted from the design handoff garden.css; only
   the Night Deck direction ships. Tokens scoped under #gardenOverlay so they
   never leak into the rest of the app.
   =========================================================================== */
#gardenOverlay{
  --bg-0:#0a0410; --bg-1:#14041e; --bg-2:#1d0a2c; --line:#3a1748;
  --pink:#ff3da8; --lime:#00ffa0; --amber:#ffd400; --cyan:#5be7ff;
  --green:#3ef56b; --leaf:#2f9e57;
  --txt-1:#fff; --txt-2:#f4d6ec; --txt-3:#c4a7b8; --txt-4:#8a6a80;
  --pixel:'VT323','Press Start 2P','Courier New',monospace;
  --mono:'DM Mono','Courier New',monospace;
}
#gardenOverlay, #gardenOverlay *{ box-sizing:border-box; }

/* ---- the overlay shell (replaces the old single-canvas panel) ------------- */
#gardenOverlay{
  position:fixed; inset:0; z-index:650; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(120% 80% at 50% -10%, #0a201a, #03100c 70%);
  font-family:var(--mono); user-select:none; color:var(--txt-2);
}
/* the fixed 1280x820 stage; JS scales it to fit the viewport */
#gardenOverlay .scene{
  position:relative; width:1280px; height:820px; overflow:hidden;
  border:2px solid var(--line); color:var(--txt-2);
  font-family:var(--mono); transform-origin:center center; flex:none;
}
#gardenOverlay .scene *{ -webkit-font-smoothing:antialiased; }

#gardenOverlay .scene__sky{ position:absolute; inset:0; z-index:0; }
#gardenOverlay .scene__deckwrap{ position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center; }
#gardenOverlay .scene__fx{ position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
#gardenOverlay .scene__hud{ position:absolute; inset:0; z-index:9; pointer-events:none; }

/* ---- HUD chrome ---------------------------------------------------------- */
#gardenOverlay .sign{ position:absolute; left:28px; top:24px; max-width:60%; }
#gardenOverlay .sign .jp{ font-family:var(--pixel); font-size:15px; letter-spacing:6px; line-height:1; opacity:.9; }
#gardenOverlay .sign h1{ font-family:var(--pixel); font-size:34px; letter-spacing:2px; margin:3px 0 0; color:var(--txt-1); line-height:.95; }
#gardenOverlay .sign .sub{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--txt-2); margin-top:6px; max-width:540px; line-height:1.5; }
#gardenOverlay .seedbag{
  position:absolute; right:28px; top:24px; display:flex; align-items:center; gap:12px;
  padding:10px 14px; border:2px solid; background:rgba(8,5,16,.72); max-width:42%;
}
#gardenOverlay .seedbag .sb-ic{ width:22px; height:22px; display:grid; place-items:center; flex:none; }
#gardenOverlay .seedbag .sb-ic span{ width:8px; height:11px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; display:block; }
#gardenOverlay .seedbag .sb-txt{ min-width:0; }
#gardenOverlay .seedbag .sb-txt b{ font-family:var(--pixel); font-size:20px; letter-spacing:1px; color:var(--txt-1); display:block; }
#gardenOverlay .seedbag .sb-txt small{ display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--txt-2); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#gardenOverlay .legend{
  position:absolute; left:28px; bottom:22px; display:flex; gap:18px; align-items:center;
  padding:9px 15px; border:2px solid; background:rgba(8,5,16,.66); font-size:12px;
  letter-spacing:1px; text-transform:uppercase; color:var(--txt-2);
}
#gardenOverlay .legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
#gardenOverlay .legend .lg{ display:flex; align-items:center; }
#gardenOverlay .xbtn{
  position:absolute; right:24px; bottom:22px; width:34px; height:34px; display:grid; place-items:center;
  border:2px solid; background:rgba(8,5,16,.72); font-family:var(--pixel); font-size:22px; line-height:1;
  pointer-events:auto; cursor:pointer; color:#d7ffe6;
}

/* ---- hint line: a single compact band in its OWN strip ABOVE the deck, so it
   never overlaps the bed grid (the screenshot's worst bug).  Pinned to the band
   between the header and the deck top (deck starts at deckwrap padding-top). --- */
#gardenOverlay .ghint{
  position:absolute; left:50%; top:96px; transform:translateX(-50%);
  z-index:9; pointer-events:none; max-width:840px; text-align:center;
  font-size:13px; letter-spacing:.4px; line-height:1.3; color:#cdeede;
  white-space:nowrap; text-shadow:0 1px 0 #000, 0 0 8px rgba(0,0,0,.85);
}
#gardenOverlay .ghint b{ color:#9affc4; font-weight:600; }

/* ===========================================================================
   BED GRID
   =========================================================================== */
#gardenOverlay .beds{
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr);
  gap:10px;
}
#gardenOverlay .bed{ position:relative; aspect-ratio:1/1; border:0; padding:0; cursor:pointer; font-family:var(--mono); }
#gardenOverlay .bed__cv{ display:block; width:100%; height:100%; }

/* chrome layered on each bed */
#gardenOverlay .bed__chrome{ position:absolute; inset:0; pointer-events:none; }
#gardenOverlay .pip{ position:absolute; top:8px; right:8px; width:11px; height:11px; border-radius:50%; }
#gardenOverlay .pip--harvest{ background:var(--amber); box-shadow:0 0 10px 2px rgba(255,212,0,.8); animation:edg-pulse 1.6s ease-in-out infinite; }
#gardenOverlay .pip--water{ background:var(--cyan); box-shadow:0 0 9px 2px rgba(91,231,255,.7); }
#gardenOverlay .pip--seed{ background:var(--lime); box-shadow:0 0 8px 1px rgba(0,255,160,.6); }
@keyframes edg-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.35); opacity:.7; } }

#gardenOverlay .bed__grow{ position:absolute; left:8px; right:8px; top:8px; height:5px; background:rgba(255,255,255,.18); }
#gardenOverlay .bed__grow i{ display:block; height:100%; background:var(--cyan); box-shadow:0 0 6px rgba(91,231,255,.8); }

#gardenOverlay .bed__name{
  position:absolute; left:0; right:0; bottom:6px; text-align:center;
  font-family:var(--pixel); font-size:14px; letter-spacing:1px; color:#eafff0;
  text-shadow:0 1px 0 #000, 0 0 8px rgba(0,0,0,.9); pointer-events:none;
  padding:0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#gardenOverlay .bed__plant{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--pixel); font-size:34px; color:rgba(255,255,255,.28);
}
#gardenOverlay .bed:hover .bed__plant{ color:rgba(255,255,255,.6); }

/* community water gauge */
#gardenOverlay .gauge{
  position:absolute; left:7px; bottom:7px; display:flex; align-items:center; gap:5px;
  padding:3px 7px 4px; background:rgba(2,12,20,.82); border-radius:3px;
  flex-wrap:wrap; max-width:78%;
}
#gardenOverlay .gauge__drop{ width:8px; height:11px; background:var(--cyan); border-radius:50% 50% 50% 50%/62% 62% 38% 38%; box-shadow:0 0 6px rgba(91,231,255,.7); flex:none; }
#gardenOverlay .gauge__n{ font-family:var(--pixel); font-size:15px; color:#d8fbff; line-height:1; }
/* GOLD when the viewing avatar is one of this crop's water contributors (TASK-760
   follow-up).  --amber (#ffd400) reads well above the 4.5:1 floor on the dark plot;
   a soft glow makes "you helped water this" obvious at a glance. */
#gardenOverlay .gauge__n--mine{ color:var(--amber); text-shadow:0 0 6px rgba(255,212,0,.85); }
#gardenOverlay .gauge__bar{ flex-basis:100%; height:3px; background:rgba(91,231,255,.2); margin-top:2px; }
#gardenOverlay .gauge__bar i{ display:block; height:100%; background:var(--cyan); }

/* community-boost badge: the live "+N%" yield boost the next harvest applies,
   from this cycle's contributor waterings.  Top-left corner -- its own pocket,
   clear of the pip (top-right), grow-bar (top edge), gauge + name (bottom). */
#gardenOverlay .boost{
  position:absolute; left:7px; top:18px; display:flex; align-items:center; gap:4px;
  padding:2px 7px 3px; background:rgba(4,28,14,.86); border:1px solid rgba(62,245,107,.55);
  border-radius:3px; box-shadow:0 0 10px rgba(62,245,107,.28);
}
#gardenOverlay .boost__leaf{
  width:9px; height:9px; flex:none; background:var(--green);
  border-radius:50% 0 50% 50%; transform:rotate(45deg); box-shadow:0 0 6px rgba(62,245,107,.7);
}
#gardenOverlay .boost__n{ font-family:var(--pixel); font-size:14px; color:#9affc4; line-height:1; }

/* freshly-watered surface shimmer */
#gardenOverlay .bed__shimmer{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(120,220,255,.28) 50%,transparent 65%);
  background-size:280% 280%;
  animation:edg-shimmer 5.5s ease-in-out infinite;
}
@keyframes edg-shimmer{ 0%,100%{ background-position:120% 0; opacity:0; } 45%{ opacity:.55; } 50%{ background-position:-40% 0; } 55%{ opacity:.2; } }

/* click press-flash (snappy tap confirm, no layout shift) */
#gardenOverlay .bed.is-press::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(180,255,210,.34); box-shadow:0 0 0 2px rgba(220,255,235,.9) inset;
  animation:edg-press .26s ease-out forwards;
}
@keyframes edg-press{ from{ opacity:1; } to{ opacity:0; } }

/* ===========================================================================
   ATMOSPHERE PARTICLES
   =========================================================================== */
#gardenOverlay .fly{
  position:absolute; border-radius:50%; pointer-events:none;
  width:5px; height:5px; background:radial-gradient(circle,#eaffa0 0%,rgba(180,255,120,.5) 45%,transparent 70%);
  box-shadow:0 0 8px 2px rgba(190,255,120,.55);
  animation:edg-drift var(--dur) ease-in-out var(--delay) infinite alternate, edg-glow calc(var(--dur)*.32) ease-in-out infinite;
}
@keyframes edg-drift{ from{ transform:translate(0,0) scale(var(--sc)); } to{ transform:translate(var(--dx),var(--dy)) scale(var(--sc)); } }
@keyframes edg-glow{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* drifting smog band */
#gardenOverlay .smog{
  position:absolute; left:-20%; width:140%; height:200px; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%, rgba(120,150,180,.16), transparent 70%);
  filter:blur(8px); animation:edg-smog 26s linear infinite;
}
@keyframes edg-smog{ from{ transform:translateX(-6%); } to{ transform:translateX(6%); } }

/* ===========================================================================
   NIGHT DECK  (calm nocturnal rooftop)
   =========================================================================== */
#gardenOverlay .scene--night{ background:#040a10; border-color:#16413a; box-shadow:0 0 0 1px #0a1f1c inset; }
#gardenOverlay .scene--night .scene__sky{
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(0,255,160,.10), transparent 55%),
    linear-gradient(#03131a 0%, #051a18 40%, #06231c 70%, #04140f 100%);
}
/* dome arc */
#gardenOverlay .scene--night .dome{
  position:absolute; left:-10%; top:-46%; width:120%; height:120%;
  border:2px solid rgba(91,231,255,.18); border-radius:50%;
  box-shadow:0 0 60px rgba(91,231,255,.12) inset;
}
#gardenOverlay .scene--night .dome::after{
  content:''; position:absolute; left:-10%; top:6%; width:120%; height:120%;
  border-top:1px solid rgba(91,231,255,.10); border-radius:50%;
}
/* distant neon skyline silhouette */
#gardenOverlay .skyline{ position:absolute; left:0; right:0; bottom:0; height:46%; }
#gardenOverlay .skyline .tower{ position:absolute; bottom:0; background:#04100e; box-shadow:0 0 0 1px rgba(0,255,160,.06); }
#gardenOverlay .skyline .tower::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--win,#00ffa0) 35%, transparent 38%);
  background-size:9px 13px; opacity:.5; mix-blend-mode:screen;
}
#gardenOverlay .scene--night .skyline{ filter:saturate(.85) brightness(.92); opacity:.9; }

/* the deck -- anchored in the band BETWEEN the help strip (~top 96px) and the
   reserved chest band at the bottom (~160px tall), so the full 6x4 grid + the
   chest both fit the 820px stage with margin and nothing overlaps. */
#gardenOverlay .scene--night .scene__deckwrap{ padding:118px 64px 162px; align-items:center; }
#gardenOverlay .scene--night .deck{
  position:relative; width:100%; max-width:780px; padding:22px 24px 26px;
  background:
    linear-gradient(180deg, rgba(8,28,22,.5), rgba(4,16,12,.86)),
    repeating-linear-gradient(90deg, #0a221a 0 38px, #0c2a20 38px 76px);
  border:2px solid #18463c;
  box-shadow:0 -2px 0 #1f5a4b, 0 30px 60px rgba(0,0,0,.6), 0 0 60px rgba(0,255,160,.06) inset;
}
#gardenOverlay .scene--night .deck::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; background:rgba(62,245,107,.4);
  box-shadow:0 0 14px rgba(62,245,107,.5);
}
/* raised planter beds */
#gardenOverlay .scene--night .bed{
  background:#0a1d14; border:1px solid #16382b;
  box-shadow:0 6px 0 #06120c, 0 9px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset;
  transition:transform .08s ease;
}
#gardenOverlay .scene--night .bed:active{ transform:translateY(2px); }
#gardenOverlay .scene--night .bed.is-harvest{ box-shadow:0 6px 0 #06120c, 0 9px 16px rgba(0,0,0,.55), 0 0 16px rgba(255,212,0,.28); border-color:rgba(255,212,0,.45); }
#gardenOverlay .scene--night .bed.is-growing{ border-color:rgba(91,231,255,.32); }
#gardenOverlay .scene--night .bed.is-empty,#gardenOverlay .scene--night .bed.is-seed{ box-shadow:0 4px 0 #06120c, 0 6px 10px rgba(0,0,0,.5); }
#gardenOverlay .scene--night .bed:hover{ box-shadow:0 6px 0 #06120c, 0 9px 16px rgba(0,0,0,.55), 0 0 14px rgba(120,255,180,.35); }

/* string lights */
#gardenOverlay .scene--night .strings{ position:absolute; left:0; right:0; top:0; height:160px; z-index:6; pointer-events:none; }
#gardenOverlay .bulb{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--bc,#ffd98a);
  box-shadow:0 0 12px 3px var(--bg2,rgba(255,200,100,.7)); animation:edg-flicker var(--fd,3s) ease-in-out infinite; }
@keyframes edg-flicker{ 0%,100%{ opacity:.95; } 45%{ opacity:.55; } 70%{ opacity:1; } }
#gardenOverlay .wire{ position:absolute; left:0; right:0; top:0; height:120px; border-bottom:2px solid rgba(120,150,140,.25);
  border-radius:0 0 50% 50%/0 0 100% 100%; }

/* paper lanterns */
#gardenOverlay .lantern{ position:absolute; width:46px; height:58px; border-radius:50%/46%; z-index:6;
  background:radial-gradient(circle at 50% 40%, rgba(255,220,150,.95), var(--lc,#ff7a4d) 75%);
  box-shadow:0 0 30px 6px var(--lg,rgba(255,140,80,.45)); animation:edg-sway 6s ease-in-out infinite; }
#gardenOverlay .lantern::before{ content:''; position:absolute; left:50%; top:-14px; width:1px; height:14px; background:rgba(200,200,200,.4); transform:translateX(-50%); }
#gardenOverlay .lantern::after{ content:''; position:absolute; left:18%; right:18%; top:34%; height:1px; background:rgba(0,0,0,.18); box-shadow:0 8px 0 rgba(0,0,0,.14), 0 -8px 0 rgba(0,0,0,.14); }
@keyframes edg-sway{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }

/* props: watering can (CSS) */
#gardenOverlay .prop{ position:absolute; z-index:7; }
#gardenOverlay .prop--can{ right:62px; bottom:96px; width:64px; height:46px; }
#gardenOverlay .can-body{ position:absolute; left:8px; bottom:0; width:44px; height:34px; background:#2c5247; border:2px solid #4f8a78; border-radius:3px 3px 4px 4px; box-shadow:0 0 10px rgba(0,255,160,.15); }
#gardenOverlay .can-spout{ position:absolute; left:42px; bottom:18px; width:26px; height:6px; background:#4f8a78; transform:rotate(-22deg); transform-origin:left center; border-radius:3px; }
#gardenOverlay .can-handle{ position:absolute; left:18px; bottom:30px; width:24px; height:18px; border:3px solid #4f8a78; border-bottom:none; border-radius:8px 8px 0 0; }

/* HUD recolour (Night Deck) */
#gardenOverlay .scene--night .sign .jp{ color:var(--green); }
#gardenOverlay .scene--night .sign h1{ text-shadow:2px 2px 0 #0c3a2c; }
#gardenOverlay .scene--night .seedbag,
#gardenOverlay .scene--night .legend,
#gardenOverlay .scene--night .xbtn{ border-color:#1f5a4b; color:#bfe7d4; box-shadow:3px 3px 0 #0c2a20; }
#gardenOverlay .scene--night .xbtn{ color:var(--green); }