/* Bounded motion lives above the scene, takes no layout space and never captures input. */
.mg-lantern,.mg-echo,.mg-route-map,.mg-result{position:relative;isolation:isolate}
.mg-motion-layer{position:absolute;inset:0;z-index:9;pointer-events:none!important;overflow:hidden;border-radius:inherit;contain:paint}
.mg-motion-layer *{pointer-events:none!important;box-sizing:border-box}
.mg-motion-ring,.mg-motion-spark,.mg-motion-link,.mg-motion-label,.mg-motion-sprite,.mg-motion-orb,.mg-motion-cell{position:absolute;display:block}
.mg-motion-ring{border:2px solid var(--motion-color);border-radius:50%;box-shadow:0 0 14px color-mix(in srgb,var(--motion-color) 25%,transparent),inset 0 0 10px color-mix(in srgb,var(--motion-color) 15%,transparent)}
.mg-motion-spark{width:7px;height:7px;background:var(--motion-color);border-radius:2px;box-shadow:0 0 8px var(--motion-color)}
.mg-motion-link{height:3px;background:linear-gradient(90deg,transparent,var(--motion-color),#fff9);box-shadow:0 0 10px var(--motion-color);transform-origin:left center;border-radius:99px}
.mg-motion-label{font:600 clamp(10px,1.2vw,14px)/1.3 var(--gothic);white-space:nowrap;color:var(--motion-color);text-shadow:0 2px 3px #04101d,0 0 8px #04101d;background:#0b2036db;padding:3px 8px;border:1px solid color-mix(in srgb,var(--motion-color) 45%,transparent);border-radius:99px;z-index:4}
.mg-motion-sprite{object-fit:contain;filter:drop-shadow(0 2px 6px #03162766);z-index:3}
.mg-motion-orb{width:9px;height:9px;border-radius:50%;background:#fff4cf;box-shadow:0 0 12px var(--motion-color)}
.mg-motion-shield{position:absolute;width:68px;height:78px;display:block;border:2px solid #b7efdc;border-radius:28% 28% 48% 48%;background:linear-gradient(140deg,#a7f8e426,#79bceb0a);box-shadow:inset 0 0 18px #a6efd433,0 0 16px #98eacf44}
.mg-motion-playing .mg-gem>.mg-prop,.mg-motion-playing .mg-gem>small,.mg-motion-playing .mg-swap-arrow{opacity:0}
.mg-motion-playing .mg-gem:disabled{opacity:1;cursor:wait}
.mg-motion-voyage .mg-ship-row .current>.mg-prop{opacity:0}
.mg-motion-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(145deg,color-mix(in srgb,var(--motion-color) 14%,#15283b),#112237);border:1px solid color-mix(in srgb,var(--motion-color) 40%,transparent);border-radius:4px 15px 4px 15px;color:var(--motion-color)}
.mg-motion-cell img{width:68%;height:68%;object-fit:contain;min-height:0}
.mg-motion-cell small{font:9px/1 var(--gothic)}
.mg-motion-cell.nova{border-color:#eddaa2;background:radial-gradient(ellipse,#6a603f,#1c3044)}
/* A trace moves the actual falling cells; buttons keep their hitboxes steady. */
.cascade .mg-gem{animation:none}
.mg-echo-turn{display:flex;align-items:center;justify-content:center;gap:8px}
.mg-verse-stars{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;color:#7a8fae}
.mg-verse-stars i{font-style:normal;font-size:13px;line-height:1;display:block}
.mg-verse-stars .lit{color:#ffe6a1;text-shadow:0 0 9px #e9c57655}
.mg-action-feedback[data-effect=light]{outline:1px solid #e8d8ab44;outline-offset:3px}
.mg-action-feedback[data-effect=wrong],.mg-action-feedback[data-effect=miss]{outline:1px solid #e4a5b766;outline-offset:2px}
.mg-action-feedback:is([data-effect=verse],[data-effect=fever]){outline:1px solid #e4cc8877;outline-offset:2px}
@media(max-width:600px){.mg-motion-cell small{font-size:8px}.mg-motion-label{font-size:10px;padding:2px 6px}.mg-verse-stars i{font-size:10px}.mg-echo-turn{gap:5px}}
@media(max-height:500px){.mg-motion-cell small{font-size:8px}.mg-motion-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){#panel:has(.mg-shell),#panel:has(.mg-shell) *{animation:none!important;transition:none!important}.mg-motion-layer{display:none}.mg-verse-stars .lit{text-shadow:none}}
[data-motion=reduced] .mg-motion-layer{display:none}