/* A personal signature ball: physical finish, with cosmetic-only colour choices. */
.ff-ball-art{display:block;width:min(100%,330px);height:auto;max-width:100%;overflow:visible;margin-inline:auto;filter:drop-shadow(0 10px 15px #0002)}
.ff-ball-art-sphere{transform-origin:160px 134px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ff-ball-art-label{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#9db194;letter-spacing:.14em}
.ff-ball-art--compact{width:110px}
.ff-ball-art--compact .ff-ball-art-label{display:none}
.ball-skin-preview:hover .ff-ball-art-sphere,.ff-ball-art:hover .ff-ball-art-sphere{transform:translateY(-4px) rotate(-2deg)}
.ball-skin-preview{display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 44%,#36513d4d,transparent 64%)}
.ball-skin-preview .ff-ball-art{position:relative;z-index:1}
.ball-skin-preview:before{content:'';position:absolute;left:16%;right:16%;bottom:11%;height:1px;background:linear-gradient(90deg,transparent,#63876555,transparent)}
@media(max-width:600px){.ff-ball-art{width:min(100%,295px)}.ff-ball-art--compact{width:95px}}
@media(hover:none){.ball-skin-preview:hover .ff-ball-art-sphere,.ff-ball-art:hover .ff-ball-art-sphere{transform:none}}
@media(prefers-reduced-motion:reduce){.ff-ball-art-sphere{transition:none!important;animation:none!important;transform:none!important}}