/* One coherent illustration per line/tier, kept separate from the live game sprite. */
.class-grid[data-roster-class] .card-world{background-image:none;background:radial-gradient(ellipse at 50% 20%,#ffffff 0%,var(--cat-soft) 70%)}
.card-world>.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;opacity:1;transition:opacity .3s}
.card-world:after{pointer-events:none}
.class-card:is(.is-popped,:hover,:focus-visible) .card-world>.card-art{opacity:0}
.class-grid[data-roster-class] .card-pop{inset:-72px -22px 83px}
.class-grid[data-roster-class] .card-pop>img.card-duo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;margin:0}
.class-card .card-pop>img.card-duo{animation:card-breathe 4.5s ease-in-out infinite;animation-play-state:paused}
.class-card:is(.is-popped,:hover,:focus-visible) .card-pop>img.card-duo{animation-play-state:running}
.motion-toggle{display:block;margin:17px auto 0;border:1px solid #dacbe4;border-radius:30px;padding:6px 15px;background:#fffaf9;color:#776087;font-size:11px}
.motion-toggle:hover{background:#f4eaf7}
.hero-mascot{animation:mascot-float 4.5s ease-in-out infinite}
.motion-paused .card-duo,.motion-paused .hero-mascot,.motion-offscreen .card-duo{animation-play-state:paused!important}
.motion-paused .card-back,.motion-paused .card-pop,.motion-paused .card-label{transition:none!important}
@keyframes card-breathe{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:700px){.class-grid[data-roster-class] .card-pop{inset:-45px -8px 78px}.card-world>.card-art{object-position:center top}.motion-toggle{font-size:10px}.class-grid[data-roster-class] .card-label>span:not(.card-emblem){min-height:25px}}
@media(prefers-reduced-motion:reduce){.card-duo,.hero-mascot{animation:none!important}}