/* RHYTHM MATCH — card grid + flip (self-contained). Screens/panels/buttons/HUD/nav/logo
   come from ../play/style.css. */

.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; }

.sym-face { width: 100%; height: 100%; padding: 6px; box-sizing: border-box; display: flex; }
.sym-face svg { display: block; margin: auto; }
.name-face {
  font-size: clamp(12px, 3vw, 16px); font-weight: bold; color: var(--neon2);
  text-shadow: 0 0 8px var(--neon2); text-align: center; padding: 8px; line-height: 1.3; letter-spacing: 1px;
}

/* 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;
  }
}