/* ─────────────────────────────────────────────────────────────
   JUNKYARD JAR — THE ACTIONS BOARD
   Sits to the right of the jar on a wide screen and drops
   underneath it on anything narrower.

   The sign is hidden until the egg is hatched. Clicking it
   opens the board, clicking it again closes it.
   ───────────────────────────────────────────────────────────── */

.ja-actions {
  --board-drop: 199px;   /* the whole block, down the page */
  --sign-size: 50%;      /* how wide the sign is           */

  position: absolute;
  top: var(--board-drop);
  left: calc(50% + (var(--jar-h) * 0.375) + 46px);
  width: min(520px, calc(var(--jar-h) * 0.80));
  z-index: 4;
  text-align: center;
}

.ja-actions[hidden] { display: none; }

/* ---------- the sign you click ---------- */

.ja-actions-cta {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;          /* floats over the board */
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.12s ease;
}

.ja-actions-cta img {
  width: var(--sign-size);
  max-width: none;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.4));
}

.ja-actions-cta:hover  { transform: translateX(-50%) translateY(-2px) rotate(-1deg); }
.ja-actions-cta:active { transform: translateX(-50%) translateY(2px); }

/* ---------- the board itself ---------- */

.ja-actions-board {
  position: relative;
  line-height: 0;
}

.ja-actions-board[hidden] { display: none; }

.ja-actions-board-bg {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.4));
}

/* the six slots sit over the green, inside the metal frame */
.ja-actions-grid {
  position: absolute;
  top: 12%;
  left: 11%;
  right: 11%;
  bottom: 12%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4%;
}

/* ---------- the items sitting on the board ---------- */

.ja-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.12s ease;
}

.ja-item img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.45));
}

.ja-item:hover  { transform: translateY(-4px) scale(1.06); }
.ja-item:active { transform: translateY(1px) scale(0.98); }

/* used up for now (both yoga mats are down): dark, and it
   stops lifting until one goes */
.ja-item.is-used-up {
  cursor: default;
}

.ja-item.is-used-up img {
  filter: grayscale(1) brightness(0.45) drop-shadow(0 4px 3px rgba(0,0,0,0.45));
  transition: filter 0.3s ease;
}

.ja-item.is-used-up:hover,
.ja-item.is-used-up:active { transform: none; }

/* ---------- narrower screens: it drops below the jar ---------- */

@media (max-width: 1180px) {
  .ja-actions {
    position: static;
    width: min(520px, 92%);
    margin: 26px auto 0;
  }
}