/* Rune stones and spell jars drawn by craft-art.js. */
.ca-rune, .ca-jar { display: block; overflow: visible; }
.ca-stone { flex: none; display: grid; place-items: center; }
.rune-card .ca-stone { width: 72px; }
.ca-mini { flex: none; display: block; margin: -6px 0; }
.ca-mini .ca-rune { width: 38px; height: auto; }
.fc-title .ca-rune { width: 120px; height: auto; margin: 0 auto; }
.quiz-q .ca-rune { width: 84px; height: auto; margin: 0 auto 6px; }

/* Stones settle into place one after another: a short fall with a soft fade, no bounce. */
.ca-place { animation: ca-place .7s cubic-bezier(.2, .7, .3, 1) var(--d, 0s) both; }
.ca-place + div { animation: ca-fade .6s ease-out calc(var(--d, 0s) + .2s) both; }
@keyframes ca-place { from { opacity: 0; transform: translateY(-14px) scale(1.06); filter: blur(1px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ca-fade { from { opacity: 0; } to { opacity: 1; } }

.ca-thumb { flex: none; width: 40px; display: grid; place-items: center; margin: -6px 0; }
.ca-thumb .ca-jar { width: 40px; height: auto; }
.ca-hero { margin: 4px auto 14px; padding: 18px 0 10px; display: flex; justify-content: center; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%), var(--surface); border: 1px solid var(--border); }
.ca-hero .ca-jar { width: min(170px, 48vw); height: auto; }

@media (prefers-reduced-motion: reduce) { .ca-place, .ca-place + div { animation: none; } }