/*!
 * BappaMatch — the letter on the left, the pictures on the right.
 * https://bappatutions.in
 */

.mt-wrap {
  display: grid;
  grid-template-columns: minmax(84px, 26%) 1fr;
  gap: clamp(0.5rem, 3vw, 1.2rem);
  align-items: center;
}

/* The card sits in the middle of the stack it is aimed at, so the journey to
   the top choice and the journey to the bottom one are the same length. */
.mt-slot {
  display: grid; place-items: center;
  align-self: center;
  min-height: clamp(96px, 26vw, 150px);
}

.mt-letter {
  width: clamp(72px, 20vw, 118px);
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  border: 5px solid #5A3A22;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFD24A, #E09B12);
  box-shadow: 0 6px 0 #8A5600, 0 12px 16px rgb(0 0 0 / 0.24);
  font: inherit; font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  color: #4A2E00;
  cursor: grab;
  /* The finger carries the card; the page must not move underneath it. */
  touch-action: none;
}
.mt-letter.is-held {
  position: fixed; z-index: 60;
  cursor: grabbing;
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 16px 24px rgb(0 0 0 / 0.36);
}
.mt-letter.is-placed { opacity: 0; }

/* One choice per row.
   Side by side, the three pictures were narrow columns and the card had to be
   aimed at one of them. Stacked, each choice is a full-width band the width of
   the board — a much bigger thing for a small hand to let go over, and the eye
   reads three options down the page rather than scanning across. */
.mt-targets {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.4rem, 2vw, 0.8rem);
}

.mt-target {
  /* Picture beside the word rather than above it: in a full-width row, stacking
     them would make each band tall enough to push the third one off screen. */
  display: grid; grid-auto-flow: column; justify-content: center;
  align-items: center; gap: clamp(0.5rem, 3vw, 1rem);
  padding: clamp(0.5rem, 2.6vw, 0.9rem) 0.6rem;
  border: 4px dashed rgb(122 74 56 / 0.45);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.55);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mt-target.is-over {
  border-color: #158F41;
  background: rgb(21 143 65 / 0.16);
  transform: scale(1.07);
}
.mt-target.is-right {
  border: 4px solid #7FD03A;
  background: linear-gradient(180deg, #E8FFD8, #A8E063);
  animation: mt-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}

/* 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. */
.mt-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. */
.mt-emoji img { max-width: 100%; max-height: var(--well); object-fit: contain; }
.mt-word { font-size: clamp(0.75rem, 2.8vw, 1rem); font-weight: 700; color: #6D5B4B; }

@keyframes mt-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); }
}

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