/*!
 * BappaShow — one thing at a time, named.
 *
 * Deliberately quieter than the games. Nothing here is a target, nothing is
 * scored, nothing can be got wrong — so the picture gets the room and the
 * controls stay out of the way until they are wanted.
 */

.bw {
  display: flex;
  justify-content: center;
  min-height: min(62vh, 520px);
  margin: 0.4rem 0 0.6rem;
}

.bw__card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: clamp(0.6rem, 3vw, 1.1rem);
  border-radius: clamp(14px, 3vw, 24px);
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 6px 0 rgb(120 70 20 / 0.16);
  animation: bwIn 0.3s ease-out;
}

/* contain, never cover — a giraffe cropped to fill a square loses the neck,
   which is the whole of what makes it a giraffe. */
.bw__art {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(46vh, 380px);
  object-fit: contain;
  display: block;
  border-radius: clamp(10px, 2vw, 16px);
}

/* The name in the child's own language, as large as the room allows. This is
   the thing being taught; the picture is how it is being taught. */
.bw__name {
  margin: 0;
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: var(--ink, #2B2118);
}

/* And underneath, in English, smaller. A child in Maharashtra should end up
   with both words for a tiger; the order says which one is theirs. */
.bw__also {
  margin: 0;
  font-size: clamp(1rem, 4.4vw, 1.35rem);
  font-weight: 700;
  color: #6D5B4B;
  text-align: center;
}

@keyframes bwIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; }
}

/* ── the controls ─────────────────────────────────────────────────────────
   Under the card, thumb height, and all three the same size. Back and again
   matter as much as forward here: this is the part a parent replays. */
.bw-bar {
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 1rem);
  margin: 0.2rem 0 0.4rem;
}

.bw-bar button {
  width: clamp(52px, 14vw, 66px);
  height: clamp(52px, 14vw, 66px);
  border: 0;
  border-radius: 50%;
  background: #2FB35B;
  color: #fff;
  font-family: inherit;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 0 rgb(0 0 0 / 0.18);
  display: grid;
  place-items: center;
  padding: 0;
}
.bw-bar button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.18); }

/* The speaker is the one a child presses over and over, so it is the odd one
   out on purpose — white, and in the middle where a thumb lands. */
.bw-bar .bw-again { background: #fff; color: #158F41; }

@media (prefers-reduced-motion: reduce) {
  .bw__card { animation: none; }
}