/* CLEF MATCH — card grid + flip. Shared screens/panels/buttons/HUD/nav/logo come from
   ../play/style.css (incl. .instrument-grid + .inst, reused for the clef chooser). */

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: min(540px, 94vw);
  margin: 18px auto 8px;
}

.card { aspect-ratio: 3 / 4; perspective: 800px; cursor: pointer; }
.card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.4s;
}
.card.flipped .card-inner,
.card.matched .card-inner { transform: rotateY(180deg); }
.card.matched { cursor: default; }

.face {
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face-front {
  background: rgba(0, 240, 255, 0.05); border-color: var(--neon);
  color: var(--neon); font-size: 32px; text-shadow: 0 0 8px var(--neon);
}
.face-back { transform: rotateY(180deg); background: #0a0d16; border-color: var(--dim); }
.card.matched .face-back { border-color: var(--green); box-shadow: 0 0 14px rgba(57, 255, 136, 0.35) inset; }

.letter-face { font-size: clamp(34px, 9vw, 52px); font-weight: 900; color: var(--neon2); text-shadow: 0 0 10px var(--neon2); }
.staff-face { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; display: flex; }
.staff-face svg { display: block; margin: auto; }

/* Phones & short screens: fit all 16 cards on screen (no scroll). Keep the 4×4
   grid and size the whole board to the smaller of the available WIDTH (its
   container) and the WIDTH implied by the available HEIGHT (cards are 3:4, so
   4 rows are 16/3 card-widths tall). ~112px is reserved for the HUD + spacing. */
@media (max-width: 600px) {
  .board {
    --gap: 7px;
    width: min(96%, calc((100svh - 112px - 3 * var(--gap)) * 3 / 4 + 3 * var(--gap)));
    gap: var(--gap);
    margin: 8px auto;
  }
}