/*!
 * BappaPick — the look of the board.
 *
 * Three big targets in a row, or stacked when there is no room. Deliberately
 * the same arrangement as the matching game: a child who has played that one
 * should recognise the board before anyone explains it.
 */

.bk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.5rem, 2.5vw, 1rem);
  margin: 0.4rem 0 0.8rem;
}

/* A whole card is the button. Nothing inside it is tappable on its own, so a
   small finger landing anywhere on the shape counts — the commonest way these
   games feel broken is a hit area smaller than it looks. */
.bk__choice {
  flex: 1 1 0;
  min-width: 90px;
  max-width: 190px;
  aspect-ratio: 3 / 4;
  padding: clamp(0.4rem, 2vw, 0.8rem);
  border: 0;
  border-radius: clamp(12px, 3vw, 20px);
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 5px 0 rgb(120 70 20 / 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.14s, box-shadow 0.14s;
}
.bk__choice:active { transform: translateY(3px); box-shadow: 0 2px 0 rgb(120 70 20 / 0.18); }

.bk__art { width: 100%; height: 100%; display: block; }

/* A drawing rather than a shape. contain, never cover — the same rule as
   everywhere else on this site: a giraffe cropped to fill a square loses the
   neck, which is the whole of what makes it a giraffe. */
.bk__art--photo {
  object-fit: contain;
  border-radius: clamp(8px, 2vw, 14px);
}

/* Right: a green ring and a small hop. Wrong: it dims and steps back rather
   than shaking or reddening. Getting it wrong here is a guess that did not land,
   not a mistake to be marked, and the game says so again a moment later in a
   voice — this only has to stop the finger going back to the same card. */
.bk__choice.is-right {
  background: #E4F7E9;
  box-shadow: 0 0 0 5px #2FB35B, 0 5px 0 rgb(120 70 20 / 0.18);
  animation: bkPop 0.34s ease-out;
}
.bk__choice.is-wrong {
  opacity: 0.42;
  box-shadow: none;
  transform: translateY(3px) scale(0.96);
  cursor: default;
}

@keyframes bkPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bk__choice, .bk__choice.is-right { transition: none; animation: none; }
}