.stage { max-width: 540px; min-height: 360px; }
.info { display: flex; justify-content: space-between; color: var(--muted); font-size: .86rem; margin: 2px 6px 12px; }
.info b { font-family: var(--mono); font-weight: 400; color: var(--gold-l); }
.cards { display: grid; gap: 8px; perspective: 900px; margin-inline: auto;
  /* كل الصفوف لازم تبان في الشاشة من غير تمرير */
  max-width: calc(var(--cols, 4) * ((max(420px, 100svh - 245px) / var(--rows, 3) - 8px) * 3 / 4 + 8px)); }
.mc { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.mc .in { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.mc.up .in, .mc.done .in { transform: rotateY(180deg); }
.mc .f, .mc .b {
  position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mc .b { background: linear-gradient(160deg, #1c1813, #110f0c); border: 1px solid var(--line2); }
.mc .b svg { width: 46%; height: auto; }
.mc .f { background: var(--text); transform: rotateY(180deg); font-size: clamp(1.6rem, 7vw, 2.5rem); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.mc.done .f { background: var(--gold-l); box-shadow: 0 0 0 2px var(--gold), inset 0 -4px 0 rgba(0,0,0,.12); }
.mc.done { animation: yay .45s; }
@keyframes yay { 50% { transform: scale(1.07); } }