/* Ingat Kad */
.ik-q { margin: 0; font: 700 1.2rem/1.35 var(--round); }
.ik-moves { margin: -6px 0 0; font: 700 1rem var(--round); color: var(--muted); }
.ik-moves.over { color: var(--red); }

.ik-grid { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.ik-grid.n6 { grid-template-columns: repeat(3, 1fr); max-width: 300px; }
.ik-grid.n12 { grid-template-columns: repeat(3, 1fr); max-width: 300px; }
.ik-grid.n20 { grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 330px; }

.ik-card {
  aspect-ratio: 1; border: 0; border-radius: 16px; padding: 0; position: relative;
  background: var(--blue); box-shadow: 0 4px 0 #1C63B8; color: #fff;
}
.ik-grid.n12 .ik-card { aspect-ratio: 4 / 3; }
.ik-back, .ik-face { position: absolute; inset: 0; display: grid; place-items: center; }
.ik-back { font: 800 1.8rem var(--round); opacity: .8; }
.ik-face { font-size: 2.6rem; visibility: hidden; }
.ik-grid.n20 .ik-face { font-size: 2.1rem; }
.ik-card.up { background: var(--card); box-shadow: 0 4px 0 var(--line); animation: ik-flip .25s; }
.ik-card.up .ik-back { visibility: hidden; }
.ik-card.up .ik-face { visibility: visible; }
.ik-card.done { background: #E3F4E6; box-shadow: 0 4px 0 #BFE3C6; }
.ik-card:disabled { cursor: default; }
@keyframes ik-flip { from { transform: scaleX(0.1); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ik-card.up { animation: none; } }