/*!
 * BappaAbc — the letter, and the pictures to choose between.
 * https://bappatutions.in
 */

.ab-letter {
  margin: 0 0 0.5rem;
  font-size: clamp(3rem, 15vw, 5.5rem);
  font-weight: 800; line-height: 1; letter-spacing: 0.06em;
  color: #2B2118;
  text-shadow: 0 4px 0 rgb(255 255 255 / 0.8), 0 8px 14px rgb(0 0 0 / 0.14);
}

.ab-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 2.4vw, 1rem);
}
@media (min-width: 620px) { .ab-board { grid-template-columns: repeat(4, 1fr); } }

.ab-card {
  display: grid; place-items: center; gap: 0.2rem;
  padding: clamp(0.6rem, 3vw, 1.1rem) 0.4rem;
  border: 5px solid #fff;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFDF6, #FFEFCE);
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.14), 0 12px 18px rgb(0 0 0 / 0.14);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ab-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.14); }

/* A square well for the picture.
   Every emoji was the same square, so the cards matched without anyone
   arranging it. A drawing has its own shape — a tall ice cream, a wide
   van — and letting each card take the shape of its picture left the
   words sitting at four different heights. The well is square and the
   picture fits inside it, so the row lines up whatever is in it. */
.ab-emoji {
  display: grid;
  place-items: center;
  width: 100%;
  /* A definite height, not an aspect ratio.
     `aspect-ratio` gives the box a height derived from its content, and a
     `max-height: 100%` inside it then has nothing firm to measure against —
     so it resolved to nothing and the tall queen stood 343px high in a
     227px card. A real length gives the picture something to be bounded by. */
  --well: clamp(84px, 22vw, 150px);
  height: var(--well);
  font-size: clamp(2rem, 9vw, 3.2rem);   /* only the emoji fallback uses this */
  line-height: 1;
}
/* Bounded by the same length the well is, not by a percentage of it.
   A percentage max-height on a grid item is measured against a block size
   the layout treats as indefinite, so it quietly resolves to none — the
   well said 150px, the picture stood 208px, and nothing complained. One
   custom property keeps the two from drifting apart. */
.ab-emoji img { max-width: 100%; max-height: var(--well); object-fit: contain; }
.ab-word {
  font-size: clamp(0.85rem, 3.2vw, 1.1rem);
  font-weight: 700; color: #6D5B4B;
}

.ab-card.is-right {
  background: linear-gradient(180deg, #E8FFD8, #A8E063);
  border-color: #7FD03A;
  animation: ab-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.ab-card.is-wrong { animation: ab-wobble 0.4s; filter: saturate(0.5); }

@keyframes ab-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.14); }
  70% { transform: scale(0.97); } 100% { transform: scale(1); }
}
@keyframes ab-wobble {
  20% { transform: translateX(-8px); } 60% { transform: translateX(8px); }
  100% { transform: none; }
}

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