/* Qamar — memory pairs. */
.qm-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--cw, 70px));
  gap: 8px;
  perspective: 900px;
}
.qm-card {
  width: var(--cw, 70px);
  height: calc(var(--cw, 70px) * 1.25);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.qm-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out);
}
.qm-card.is-up .qm-inner { transform: rotateY(180deg); }
.qm-back, .qm-front {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.qm-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 182, 90, 0.55) 0 10%, transparent 11%),
    conic-gradient(from 22.5deg, rgba(232, 182, 90, 0.18) 0 12.5%, transparent 0 25%, rgba(232, 182, 90, 0.18) 0 37.5%, transparent 0 50%, rgba(232, 182, 90, 0.18) 0 62.5%, transparent 0 75%, rgba(232, 182, 90, 0.18) 0 87.5%, transparent 0),
    linear-gradient(180deg, #1B2C80, #0E1A52);
  box-shadow: inset 0 0 0 2px rgba(232, 182, 90, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.qm-front {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #1A2565, #0A1440);
  box-shadow: inset 0 0 0 2px rgba(242, 234, 216, 0.25), 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotateY(180deg);
}
.qm-front canvas { width: 86%; height: auto; aspect-ratio: 1; }
.qm-card.is-done .qm-front { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(232, 182, 90, 0.35); }