.spell-art.drawn-spell{position:relative;display:block;container-type:inline-size;aspect-ratio:2/3;width:100%;padding:0;overflow:hidden;border-radius:4px;color:#fff3d8;background:#102b20;box-sizing:border-box}
.drawn-spell>img{display:block;width:100%;height:100%;object-fit:fill;border:0;border-radius:0}
.drawn-spell .spell-name,.drawn-spell .spell-effect{position:absolute;left:11%;width:78%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff3d8;font-family:Arial,sans-serif;font-weight:800;text-shadow:0 1px 2px #000;line-height:1.05;letter-spacing:0;box-sizing:border-box;margin:0;padding:0}
.drawn-spell .spell-name{top:1%;height:7%;font-size:5.4cqw;text-transform:uppercase;white-space:nowrap}
.drawn-spell .spell-effect{bottom:2%;height:8%;font-size:5.8cqw;white-space:nowrap}
.drawn-spell[data-family="malus"]{background:#481715}.drawn-spell[data-family="terrain"]{background:#171717}
.collection-grid button>.drawn-spell{margin:0;font:inherit}
@media(prefers-reduced-motion:no-preference){.animated-spell .drawn-spell{animation:spell-drawn-arrival .45s ease-out}@keyframes spell-drawn-arrival{from{transform:scale(.92) rotate(-3deg);opacity:.3}to{transform:none;opacity:1}}}
/* Invisible uses the same dedicated title/effect bands as the spell collection. */
.drawn-spell[data-spell="invisible"] .spell-name,
.drawn-spell[data-spell="invisible"] .spell-effect{left:15%;width:70%;background:#102b20;border:1px solid #d4b664;border-radius:3px;z-index:1}
.drawn-spell[data-spell="invisible"] .spell-name{top:1%;height:7%}
.drawn-spell[data-spell="invisible"] .spell-effect{bottom:2%;height:8%}