/* ===========================================================================
   garden-chest.css  --  Community Chest prop + shared-harvest panel chrome
   (TASK-760 Phase A, Night Deck). All rules scoped under #gardenOverlay so they
   inherit the scene tokens and never leak globally. Phase A renders the prop +
   an empty panel shell; Phase C wires the pooled-harvest data into .cgrid.
   =========================================================================== */

/* ===========================================================================
   THE CHEST  (foreground prop on the deck)
   =========================================================================== */
/* The chest sits in the reserved bottom band (deckwrap leaves ~162px below the
   deck) centered at the front of the deck -- clear of every bed (it used to
   overlap the bottom-right WHEAT bed in the screenshot). */
#gardenOverlay .chest{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:8; width:156px; height:108px; border:0; background:none; padding:0;
  cursor:pointer; font-family:var(--mono); pointer-events:auto;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));
  animation:edg-chestBob 4.5s ease-in-out infinite;
}
@keyframes edg-chestBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-5px); } }
#gardenOverlay .chest:focus-visible{ outline:2px solid #9affc4; outline-offset:3px; }

/* lime aura under/around the chest */
#gardenOverlay .chest__glow{
  position:absolute; left:50%; top:46%; width:196px; height:128px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(62,245,107,.42), rgba(0,255,160,.14) 55%, transparent 72%);
  filter:blur(3px); z-index:0; animation:edg-aura 3.2s ease-in-out infinite;
}
@keyframes edg-aura{ 0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.07); } }

/* chest body: metal-banded crate */
#gardenOverlay .chest__body{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:128px; height:72px; z-index:2;
  background:linear-gradient(180deg,#123a2c,#0c2a20 60%,#08201a);
  border:3px solid #2f7d63; border-radius:6px 6px 5px 5px;
  box-shadow:0 0 0 1px #061812 inset, 0 8px 0 #061812, 0 0 22px rgba(0,255,160,.18);
}
#gardenOverlay .chest__body::before{
  content:''; position:absolute; left:22px; right:22px; top:-3px; bottom:-3px;
  border-left:5px solid #2f7d63; border-right:5px solid #2f7d63; box-shadow:0 0 0 1px #061812;
}
#gardenOverlay .chest__lid{
  position:absolute; left:50%; top:-18px; transform:translateX(-50%);
  width:136px; height:30px; z-index:3;
  background:linear-gradient(180deg,#1a4f3c,#123a2c);
  border:3px solid #36936f; border-radius:8px 8px 3px 3px;
  box-shadow:0 0 0 1px #061812 inset, 0 0 18px rgba(0,255,160,.16);
  transform-origin:50% 100%; transition:transform .25s cubic-bezier(.5,-0.4,.5,1.4);
}
#gardenOverlay .chest__seam{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  width:128px; height:8px; z-index:4;
  background:linear-gradient(180deg, rgba(190,255,220,.9), rgba(62,245,107,.5));
  box-shadow:0 0 14px 3px rgba(62,245,107,.6); border-radius:2px;
  animation:edg-seam 2.4s ease-in-out infinite;
}
@keyframes edg-seam{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
#gardenOverlay .chest__light{
  position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  width:104px; height:52px; z-index:1;
  background:radial-gradient(60% 80% at 50% 0%, rgba(120,255,180,.55), transparent 72%);
  filter:blur(2px); animation:edg-seam 2.4s ease-in-out infinite;
}
#gardenOverlay .chest__lock{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:18px; height:20px; z-index:5; background:#ffd400; border:2px solid #8a7400; border-radius:3px;
  box-shadow:0 0 10px rgba(255,212,0,.6);
}
#gardenOverlay .chest__lock::after{ content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%); width:4px; height:6px; background:#8a7400; border-radius:2px; }

/* label + count badge above the chest */
#gardenOverlay .chest__label{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  z-index:6; white-space:nowrap; font-family:var(--pixel); font-size:14px; letter-spacing:2px;
  color:#d7ffe6; text-shadow:0 1px 0 #000, 0 0 10px rgba(0,255,160,.5);
}
#gardenOverlay .chest__label b{
  display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 5px; margin-left:6px;
  background:#ffd400; color:#1a1400; border-radius:9px; font-size:12px; vertical-align:middle;
  box-shadow:0 0 10px rgba(255,212,0,.5);
}
#gardenOverlay .chest:hover .chest__lid{ transform:translateX(-50%) rotateX(-26deg); }
#gardenOverlay .chest:hover .chest__glow{ opacity:1; }
#gardenOverlay .chest__hint{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  z-index:6; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#7fe9b3;
  opacity:0; transition:opacity .2s;
}
#gardenOverlay .chest:hover .chest__hint,
#gardenOverlay .chest:focus-visible .chest__hint{ opacity:.95; }

/* ===========================================================================
   CHEST PANEL  (shared-harvest inventory shell)
   =========================================================================== */
#gardenOverlay .cpanel{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; }
#gardenOverlay .cpanel[hidden]{ display:none; }
#gardenOverlay .cpanel__scrim{
  position:absolute; inset:0; background:rgba(2,10,7,.74); cursor:pointer; animation:edg-fade .25s ease;
}
@keyframes edg-fade{ from{ opacity:0; } to{ opacity:1; } }
#gardenOverlay .cpanel__card{
  position:relative; width:792px; max-width:92%; height:560px; max-height:88%; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0b2018,#071712);
  border:2px solid #2f7d63; box-shadow:0 0 0 1px #061812 inset, 0 30px 70px rgba(0,0,0,.7), 0 0 60px rgba(0,255,160,.08);
  animation:edg-rise .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes edg-rise{ from{ transform:translateY(22px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
#gardenOverlay .cpanel__card::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:rgba(62,245,107,.5); box-shadow:0 0 14px rgba(62,245,107,.6); }

#gardenOverlay .chead{ display:flex; align-items:flex-start; gap:16px; padding:22px 24px 16px; border-bottom:1px solid #14392c; }
#gardenOverlay .chead .ic{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border:2px solid #2f7d63; border-radius:6px;
  background:#0c2a20; box-shadow:0 0 18px rgba(0,255,160,.18);
}
#gardenOverlay .chead .ic span{ width:18px; height:14px; background:linear-gradient(180deg,#1a4f3c,#123a2c); border:2px solid #36936f; border-radius:3px 3px 1px 1px; position:relative; }
#gardenOverlay .chead .ic span::after{ content:''; position:absolute; left:-2px; right:-2px; top:3px; height:3px; background:rgba(62,245,107,.8); box-shadow:0 0 8px rgba(62,245,107,.7); }
#gardenOverlay .chead .jp{ font-family:var(--pixel); font-size:13px; letter-spacing:5px; color:var(--green); opacity:.9; }
#gardenOverlay .chead h2{ font-family:var(--pixel); font-size:26px; letter-spacing:2px; margin:2px 0 0; color:#fff; }
#gardenOverlay .chead .desc{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--txt-2); margin-top:5px; }
#gardenOverlay .chead .desc b{ color:#9affc4; }
#gardenOverlay .chead .close{
  margin-left:auto; width:34px; height:34px; flex:none; border:2px solid #2f7d63; background:#0c2a20; color:#9affc4;
  font-family:var(--pixel); font-size:20px; cursor:pointer; box-shadow:3px 3px 0 #061812;
}
#gardenOverlay .chead .close:hover{ background:#123a2c; color:#fff; }

/* body scroll region (fixed height; scroll on overflow -- no data-driven resize) */
#gardenOverlay .cbody{ flex:1; min-height:0; overflow-y:auto; padding:18px 24px; }

/* Phase A empty / placeholder state */
#gardenOverlay .cempty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; color:var(--txt-2);
}
#gardenOverlay .cempty .cempty__ic{
  width:54px; height:42px; border:2px solid #2f7d63; border-radius:5px; background:#0c2a20;
  box-shadow:0 0 18px rgba(0,255,160,.16); position:relative;
}
#gardenOverlay .cempty .cempty__ic::after{ content:''; position:absolute; left:8px; right:8px; top:14px; height:3px; background:rgba(62,245,107,.7); box-shadow:0 0 8px rgba(62,245,107,.6); }
#gardenOverlay .cempty b{ font-family:var(--pixel); font-size:18px; letter-spacing:1px; color:#d7ffe6; }
#gardenOverlay .cempty small{ font-size:13px; letter-spacing:.5px; color:#9ec8cf; max-width:420px; line-height:1.5; }

/* ===========================================================================
   PENDING-SHARE LIST  (Phase C: the viewer's chest items, one row per crop)
   =========================================================================== */
/* fixed columns, gap-flowed rows -- the parent .cbody scrolls on overflow so the
   panel never resizes with the number of shares. */
#gardenOverlay .cgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
#gardenOverlay .citem{ position:relative; background:#0a1d14; border:1px solid #1c4a3a; padding:8px 8px 34px; text-align:center; }
#gardenOverlay .citem canvas{ width:74px; height:74px; display:block; margin:0 auto; image-rendering:pixelated; }
#gardenOverlay .citem__name{ display:block; font-family:var(--pixel); font-size:13px; letter-spacing:.5px; color:#eafff0; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* qty badge (bottom-right of the row tile) */
#gardenOverlay .citem__qty{
  position:absolute; right:6px; bottom:6px; min-width:22px; padding:1px 6px;
  background:#ffd400; color:#1a1400; border-radius:9px;
  font-family:var(--pixel); font-size:13px; letter-spacing:.5px; line-height:1.3;
  box-shadow:0 0 8px rgba(255,212,0,.5);
}

/* footer */
#gardenOverlay .cfoot{ display:flex; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid #14392c; background:rgba(0,0,0,.2); }
#gardenOverlay .cfoot__basket{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--txt-2); }
#gardenOverlay .cfoot__basket b{ font-family:var(--pixel); font-size:18px; color:#d7ffe6; letter-spacing:1px; }
#gardenOverlay .cfoot__spacer{ flex:1; }
#gardenOverlay .btn-ghost{ font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#9ec8cf; background:none; border:1px solid #1c4a3a; padding:11px 16px; cursor:pointer; }
#gardenOverlay .btn-ghost:hover{ color:#cfead9; border-color:#2f7d63; }

/* CLAIM ALL -- the primary action.  Reserve the active border in the base state
   (transparent inset shadow) so hover/disabled never shifts layout. */
#gardenOverlay .btn-claim{
  font-family:var(--pixel); font-size:15px; letter-spacing:2px; text-transform:uppercase;
  color:#08210f; background:linear-gradient(180deg,#5bff8f,#1fdc6a); border:2px solid #2f7d63;
  padding:10px 22px; cursor:pointer; box-shadow:3px 3px 0 #061812, 0 0 18px rgba(62,245,107,.35);
}
#gardenOverlay .btn-claim:hover:not(:disabled){ background:linear-gradient(180deg,#7bffa6,#33ef7d); }
#gardenOverlay .btn-claim:focus-visible{ outline:2px solid #d7ffe6; outline-offset:2px; }
#gardenOverlay .btn-claim:disabled{ opacity:.45; cursor:default; box-shadow:3px 3px 0 #061812; }
#gardenOverlay .btn-claim.is-spark{ animation:edg-claimspark .5s ease; }
@keyframes edg-claimspark{
  0%{ transform:scale(1); box-shadow:3px 3px 0 #061812, 0 0 0 rgba(62,245,107,0); }
  40%{ transform:scale(1.06); box-shadow:3px 3px 0 #061812, 0 0 30px rgba(62,245,107,.8); }
  100%{ transform:scale(1); box-shadow:3px 3px 0 #061812, 0 0 18px rgba(62,245,107,.35); }
}