/* Spell Monsters screen styles and animations */
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0}
.card{font-family:inherit;aspect-ratio:3/4;min-height:62px;border:none;border-radius:12px;background:var(--yellow);color:var(--deep);font-size:26px;font-weight:600;cursor:pointer;padding:0}
.card:active{transform:scale(.94)}
.card.ok{background:var(--mint)}
.card.miss{background:rgba(255,255,255,.3);color:#fff}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.mcell{background:rgba(255,255,255,.16);border-radius:14px;padding:8px 4px;text-align:center;font-size:13px}
.mcell.owned{background:rgba(255,255,255,.28)}
.mcell .btn{min-height:44px;font-size:14px;padding:0 10px;margin-top:4px;background:var(--yellow)}
.bar{height:14px;border-radius:7px;background:rgba(255,255,255,.28);overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:var(--mint)}
.hero{margin:6px 0;min-height:120px}
.dance{animation:bob .7s infinite}
.wob{animation:wob 1.2s infinite}
.pop{animation:pop .45s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(5deg)}}
@keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dance,.wob,.pop{animation:none}}