/* The extended O becomes a flipper. One shared clock keeps impact and lift in sync. */
.roles-pinball{--pinball-cycle:2.15s;position:relative;display:block;inline-size:110px;max-inline-size:100%;block-size:132px;justify-self:end;align-self:start;pointer-events:none;color:var(--paper);isolation:isolate}
.roles-pinball__paddle{position:absolute;left:calc(50% - 45px);bottom:9px;display:block;width:90px;height:34px;border:7px solid currentColor;border-radius:999px;transform-origin:18px 17px;animation:roles-pinball-flip var(--pinball-cycle) linear infinite paused}
.roles-pinball__ball{position:absolute;left:calc(50% + 20px);bottom:43px;display:block;width:12px;height:12px;transform-origin:center;animation:roles-pinball-flight var(--pinball-cycle) linear infinite paused}
.roles-pinball__ball::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);transform-origin:center bottom;animation:roles-pinball-contact var(--pinball-cycle) linear infinite paused}
.roles-pinball.is-playing .roles-pinball__paddle,.roles-pinball.is-playing .roles-pinball__ball,.roles-pinball.is-playing .roles-pinball__ball::after{animation-play-state:running}
/* These Bézier segments are the two halves of a gravitational parabola: fast
   immediately after the strike, weightless at the apex, accelerating on return. */
@keyframes roles-pinball-flight{
  0%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.333333,.666667,.666667,1)}
  50%{transform:translate3d(0,-68px,0);animation-timing-function:cubic-bezier(.333333,0,.666667,.333333)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes roles-pinball-flip{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.333333,.666667,.666667,1)}
  8%{transform:rotate(-10deg);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  25%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  42%{transform:rotate(8deg)}
  78%{transform:rotate(8deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:rotate(0deg)}
}
@keyframes roles-pinball-contact{
  0%,100%{transform:scale(1.12,.88)}
  4%,96%{transform:scale(1,1)}
}
@media(prefers-reduced-motion:reduce){
  .roles-pinball__paddle,.roles-pinball__ball,.roles-pinball__ball::after{animation:none!important;transform:none!important}
}