/* Plush page layout that matches the homepage aesthetic */

.plush-layout{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:14px;
  padding:14px;
}

/* Make the stage feel like it fills the page inside the window */
.stage{
  position:relative;
  height: calc(100vh - 290px);
  min-height: 560px;

  border-radius: 16px;
  border: 1px solid rgba(180,140,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  /* OPAQUE stage background (not translucent) */
  background: linear-gradient(180deg, rgba(12,6,18,1), rgba(8,4,12,1));
  overflow:hidden;
}

/* Shelves: opaque "boxes" instead of translucent zones */
.shelf{
  position:absolute;
  left:18px;
  right:18px;
  height: 28%;
  border-radius: 16px;

  /* OPAQUE shelf panels */
  background: linear-gradient(180deg, rgba(26,15,42,1), rgba(16,9,28,1));
  border: 1px solid rgba(180,140,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);

  /* optional: subtle inner bevel */
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -6px;
}

.shelf .label{
  position:absolute;
  top:10px; left:12px;
  font-size:12px;
  opacity:.85;
  color: var(--text);
}

/* positions */
.shelf[data-shelf="top"]{ top:18px; }
.shelf[data-shelf="mid"]{ top:36%; }
.shelf[data-shelf="bot"]{ top:68%; }

/* placed plushes */
.placed{
  position:absolute;
  width:110px;
  height:110px;
  object-fit:contain;
  cursor:grab;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;

  filter: drop-shadow(0 12px 16px rgba(0,0,0,.55));
}
.placed:active{ cursor:grabbing; }
.dragging{ opacity:.92; }

/* Right sidebar bin should look like your panels */
.binPanel .panel-inner{ padding:10px; }

.binScroll{
  max-height: calc(100vh - 280px);
  overflow:auto;
  padding-right:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}


.binPanel .binScroll{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

/* Plush card */
.binPanel .binItem{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:14px;

  padding:14px;
  border-radius:16px;
  border:1px solid rgba(180,140,255,.35);
  background: linear-gradient(
    180deg,
    rgba(32,18,54,.95),
    rgba(16,9,28,.95)
  );

  color: var(--text);
  cursor: grab;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* BIG plush image */
.binPanel .binItem img{
  width:96px !important;
  height:96px !important;
  min-width:96px;

  object-fit:contain;
  padding:8px;

  border-radius:14px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);

  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
}

/* Plush name */
.binPanel .binItem span{
  font-size:14px;
  opacity:.95;
  white-space:nowrap;
}

/* Hover */
.binPanel .binItem:hover{
  border-color: rgba(180,140,255,.6);
  background: linear-gradient(
    180deg,
    rgba(50,30,80,.95),
    rgba(26,15,42,.95)
  );
}

/* Hide when placed */
.binPanel .binItem.used{
  display:none !important;
}


/* footer link should match theme (your style.css probably already does, but just in case) */
.footer a{
  color: var(--muted);
  text-decoration:none;
}
.footer a:hover{ text-decoration:underline; }

/* Mobile */
@media (max-width: 860px){
  .plush-layout{ grid-template-columns: 1fr; }
  .binScroll{ max-height: 220px; }
  .stage{ height: 520px; }
}