/*! Xwin Icons — generated by UI/icons/build.js from UI/icons/src. Edit the source, not this file.
   Every class is prefixed xi- so nothing here can collide with the site's own class names. */

.xi{display:inline-block;width:var(--xi-size,24px);height:var(--xi-size,24px);line-height:0;vertical-align:middle;flex:none;color:var(--xi-main,currentColor)}
.xi-svg{display:block;width:100%;height:100%;overflow:visible}
.xi-svg *{transform-box:fill-box;transform-origin:center}

/* ---------- colour: glyph parts ---------- */
.xi-gf,.xi-gp{fill:var(--xi-on,#fff)}
.xi-gs{fill:none;stroke:var(--xi-on,#fff)}
.xi-gh{fill:#000;fill-opacity:.2}
.xi-gg{fill:none;stroke:#000;stroke-opacity:.24}
.xi-gk{fill:#000;fill-opacity:.4}
.xi-dark .xi-gh{fill-opacity:.3}
.xi-dark .xi-gg{stroke-opacity:.34}
.xi-dark .xi-gk{fill-opacity:.55}
.xi-gw{fill:#fff}
.xi-gws{fill:none;stroke:#fff}
.xi-ring{stroke:none}
.xi-glint{fill:none;stroke:#fff;stroke-opacity:.9}
.xi-lens{fill-opacity:.24}
.xi-dark .xi-lens{fill-opacity:.14}
.xi-tint{fill-opacity:.4}
.xi-dark .xi-tint{fill-opacity:.22}
/* semantic badges keep their meaning in every theme */
.xi-danger{color:#f0443a}
.xi-success{color:#1db35b}
.xi-warning{color:#f5a524}
.xi-lo{color:var(--xi-lo)}
/* overlapping parts: the one behind, or the container, is darker so the two never merge */
.xi-mid{color:var(--xi-mid)}
.xi-back{color:var(--xi-lo)}
/* a lighter step of the theme colour, for celebration sparkles */
.xi-hi{color:var(--xi-hi)}
/* football: the dark patches are what make it a football */
.xi-svg[data-i="sport-1"] .xi-gk{fill-opacity:.62}
.xi-dark .xi-svg[data-i="sport-1"] .xi-gk{fill-opacity:.7}

/* ---------- mode: on accent (the icon sits on --mainColor) ----------
   the site writes dark text on --mainColor, so the icon body is #222 and details take the theme colour */
.xi-accent .xi,.xi.xi-accent{color:#222}
.xi-accent .xi-gf,.xi-accent .xi-gp,.xi.xi-accent .xi-gf,.xi.xi-accent .xi-gp{fill:var(--xi-inv-detail)}
.xi-accent .xi-gs,.xi.xi-accent .xi-gs{stroke:var(--xi-inv-detail)}
.xi-accent .xi-gh,.xi.xi-accent .xi-gh{fill:var(--xi-inv-detail);fill-opacity:.9}
.xi-accent .xi-gg,.xi.xi-accent .xi-gg{stroke:var(--xi-inv-detail);stroke-opacity:.8}
.xi-accent .xi-gk,.xi.xi-accent .xi-gk{fill:var(--xi-inv-detail);fill-opacity:.9}
.xi-accent .xi-lo,.xi.xi-accent .xi-lo{color:color-mix(in srgb,#222 38%,var(--xi-main))}
.xi-accent .xi-rim,.xi.xi-accent .xi-rim{display:none}
/* on the accent the body is #222, so the parts behind step lighter instead */
.xi-accent .xi-mid{color:#3d3d3d}
.xi-accent .xi-back{color:#565656}
.xi-accent .xi-hi{color:#707070}
.xi-accent :is(.xi-danger,.xi-success,.xi-warning),.xi.xi-accent :is(.xi-danger,.xi-success,.xi-warning){stroke:#222;stroke-width:1.3;paint-order:stroke}
.xi-accent .xi-svg[data-i="sport-1"],.xi.xi-accent .xi-svg[data-i="sport-1"]{color:color-mix(in srgb,var(--xi-main) 55%,#fff)}
html .xi-accent .xi-svg[data-i="sport-1"] .xi-gk,html .xi.xi-accent .xi-svg[data-i="sport-1"] .xi-gk{fill:#222;fill-opacity:1}
html .xi-accent .xi-svg[data-i="sport-1"] .xi-gg,html .xi.xi-accent .xi-svg[data-i="sport-1"] .xi-gg{stroke:#222;stroke-opacity:.9}
html .xi-accent .xi-svg[data-i="sport-1"] .xi-ring,html .xi.xi-accent .xi-svg[data-i="sport-1"] .xi-ring{stroke:#222;stroke-width:1.6}

/* ---------- mode: neutral (grey on black / grey on white) ---------- */
.xi-neutral .xi,.xi.xi-neutral{--xi-n-body:#a3a3a8;--xi-n-detail:#fff;color:var(--xi-n-body)}
.xi-dark .xi-neutral .xi,.xi-dark .xi.xi-neutral{--xi-n-body:#8e8e93;--xi-n-detail:#1a1a1c}
.xi-neutral .xi-gf,.xi-neutral .xi-gp,.xi.xi-neutral .xi-gf,.xi.xi-neutral .xi-gp{fill:var(--xi-n-detail)}
.xi-neutral .xi-gs,.xi.xi-neutral .xi-gs{stroke:var(--xi-n-detail)}
.xi-neutral .xi-gh,.xi.xi-neutral .xi-gh{fill:var(--xi-n-detail);fill-opacity:.85}
.xi-neutral .xi-gg,.xi.xi-neutral .xi-gg{stroke:var(--xi-n-detail);stroke-opacity:.75}
.xi-neutral .xi-gk,.xi.xi-neutral .xi-gk{fill:var(--xi-n-detail);fill-opacity:.85}
.xi-neutral .xi-lo,.xi.xi-neutral .xi-lo{color:color-mix(in srgb,var(--xi-n-body) 70%,var(--xi-n-detail))}
.xi-neutral :is(.xi-danger,.xi-success,.xi-warning),.xi.xi-neutral :is(.xi-danger,.xi-success,.xi-warning){color:var(--xi-n-body);stroke:var(--xi-n-detail);stroke-width:1.1;paint-order:stroke}
.xi-neutral .xi-rim,.xi.xi-neutral .xi-rim{display:none}
.xi-neutral .xi-mid{color:color-mix(in srgb,var(--xi-n-body) 76%,#000)}
.xi-neutral .xi-back{color:color-mix(in srgb,var(--xi-n-body) 56%,#000)}
/* the light step in grey: without it a tone-hi part took the theme colour inside a grey icon.
   On a light theme a lighter grey vanishes into the white, so there the step goes darker instead. */
.xi-neutral .xi-hi{color:color-mix(in srgb,var(--xi-n-body) 40%,#fff)}
html:not(.xi-dark) .xi-neutral .xi-hi{color:color-mix(in srgb,var(--xi-n-body) 58%,#000)}
/* keep the sense of each detail in grey: dark details stay dark, light details stay light
   (one detail colour for all turned a ball's dark patches white on light themes) */
html:not(.xi-dark) .xi-neutral :is(.xi-gk,.xi-gh){fill:#55555a;fill-opacity:1}
html:not(.xi-dark) .xi-neutral .xi-gg{stroke:#55555a;stroke-opacity:.9}
html.xi-dark .xi-neutral :is(.xi-gf,.xi-gp){fill:#ececee}
html.xi-dark .xi-neutral .xi-gs{stroke:#ececee}
html:not(.xi-dark) .xi-neutral .xi-svg[data-i="sport-1"],html:not(.xi-dark) .xi.xi-neutral .xi-svg[data-i="sport-1"]{color:#d4d4d8}
html:not(.xi-dark) .xi-neutral .xi-svg[data-i="sport-1"] .xi-gk,html:not(.xi-dark) .xi.xi-neutral .xi-svg[data-i="sport-1"] .xi-gk{fill:#6a6a70;fill-opacity:1}
html:not(.xi-dark) .xi-neutral .xi-svg[data-i="sport-1"] .xi-gg,html:not(.xi-dark) .xi.xi-neutral .xi-svg[data-i="sport-1"] .xi-gg{stroke:#6a6a70;stroke-opacity:1}
html:not(.xi-dark) .xi-neutral .xi-svg[data-i="sport-1"] .xi-ring,html:not(.xi-dark) .xi.xi-neutral .xi-svg[data-i="sport-1"] .xi-ring{stroke:#6a6a70;stroke-width:1.4}

/* ---------- spot: the large icon at the top of a dialog ----------
   xi-spot is the icon on its own, large and with the detailed drawing (chosen for the dialogs).
   xi-plate puts a plate in the theme's tint behind it; xi-halo a smaller plate with two fading
   rings around it. Both square on sharp themes, and nothing ever leaves the 128px box. */
.xi.xi-spot{--xi-size:112px;display:block}
.xi.xi-spot.xi-plate{--xi-size:128px;position:relative;isolation:isolate}
.xi.xi-spot.xi-plate::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:linear-gradient(135deg,rgb(255 255 255/.14),rgb(255 255 255/0) 50%,rgb(0 0 0/.1)),color-mix(in srgb,var(--xi-main) 15%,#fff)}
.xi-dark .xi.xi-spot.xi-plate::before{background:linear-gradient(135deg,rgb(255 255 255/.06),rgb(255 255 255/0) 50%,rgb(0 0 0/.25)),color-mix(in srgb,var(--xi-main) 17%,#1d1d20)}
.xi-sharp .xi.xi-spot.xi-plate::before{border-radius:0}
.xi.xi-spot.xi-plate .xi-svg{position:absolute;left:19%;top:19%;width:62%;height:62%}
.xi.xi-spot.xi-halo{--xi-size:128px;position:relative;isolation:isolate}
/* the rings are spread shadows of the plate, so they follow its shape: round, or square on Flat */
.xi.xi-spot.xi-halo{--xi-ring:calc(var(--xi-size) * .07)}
.xi.xi-spot.xi-halo::before{content:"";position:absolute;inset:14%;z-index:-1;border-radius:50%;
  background:color-mix(in srgb,var(--xi-main) 16%,#fff);
  box-shadow:0 0 0 var(--xi-ring) color-mix(in srgb,var(--xi-main) 11%,transparent),0 0 0 calc(var(--xi-ring) * 2) color-mix(in srgb,var(--xi-main) 5%,transparent)}
.xi-dark .xi.xi-spot.xi-halo::before{background:color-mix(in srgb,var(--xi-main) 24%,#1d1d20);
  box-shadow:0 0 0 var(--xi-ring) color-mix(in srgb,var(--xi-main) 20%,transparent),0 0 0 calc(var(--xi-ring) * 2) color-mix(in srgb,var(--xi-main) 9%,transparent)}
.xi-sharp .xi.xi-spot.xi-halo::before{border-radius:0}
.xi.xi-spot.xi-halo .xi-svg{position:absolute;left:21%;top:21%;width:58%;height:58%}

/* ---------- tap to play ---------- */
.xi[data-xi-play~="tap"],.xi[data-xi-play~="hover"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.xi[data-xi-play~="tap"] .xi-svg{transition:transform .18s cubic-bezier(.3,.7,.4,1)}
.xi[data-xi-play~="tap"]:active .xi-svg{transform:scale(.9)}

/* spots are drawn on a 48 grid: the badge ring used in the accent and neutral modes doubles to look the same */
.xi-accent .xi-svg[data-vb="48"] :is(.xi-danger,.xi-success,.xi-warning){stroke-width:2.6}
.xi-neutral .xi-svg[data-vb="48"] :is(.xi-danger,.xi-success,.xi-warning){stroke-width:2.2}

/* ---------- no shadow ---------- */
.xi-noshadow .xi-body,.xi.xi-noshadow .xi-body{filter:none}

/* ---------- watermark: the icon printed a few steps off the surface it sits on ----------
   no theme colour, no transparency, no shadow, no sheen: the site's own grey steps. Drawn for a --color-2
   surface (the match cards): body two steps off, the parts behind and the dark details one step (never the
   surface itself, or a football's edge patches would break its outline), light details three steps. On black that is grey on black, on white a light grey.
   For another surface set the four variables on the icon or an ancestor. */
.xi-watermark .xi-svg{color:var(--xi-wm-body,var(--color-4))}
.xi-watermark .xi-svg :is(.xi-mid,.xi-back,.xi-lo){color:var(--xi-wm-back,var(--color-3))}
.xi-watermark .xi-svg :is(.xi-hi,.xi-danger,.xi-success,.xi-warning){color:var(--xi-wm-body,var(--color-4));stroke:none}
.xi-watermark .xi-svg[data-i] :is(.xi-gg){stroke:var(--xi-wm-cut,var(--color-3));stroke-opacity:1}
.xi-watermark .xi-svg[data-i] :is(.xi-gk,.xi-gh){fill:var(--xi-wm-cut,var(--color-3));fill-opacity:1}
.xi-watermark .xi-svg[data-i] :is(.xi-gf,.xi-gp,.xi-gw,.xi-ge){fill:var(--xi-wm-line,var(--color-5))}
.xi-watermark .xi-svg[data-i] :is(.xi-gs,.xi-gws,.xi-glint){stroke:var(--xi-wm-line,var(--color-5))}
.xi-watermark .xi-body{filter:none}
.xi-watermark [fill^="url(#xi-tonal"],.xi-watermark :is(.xi-tint,.xi-lens){display:none}

/* ---------- big-event badge (data-xi-event) ---------- */
.xi-ge{fill:#3d2700}
.xi-play[data-ev] .xi-event{transform-box:fill-box;transform-origin:center;animation:xi-event-pop .8s cubic-bezier(.2,1.5,.4,1) .15s both}
@keyframes xi-event-pop{0%{transform:scale(.35)}55%{transform:scale(1.2)}100%{transform:none}}

/* ---------- motion: runs only when XI.play() adds xi-play ---------- */
.xi-intro .xi-pop{animation:xi-pop .6s cubic-bezier(.2,1.5,.4,1) both}
.xi-play[data-i^="sport-"] .xi-all{transform-origin:50% 100%;animation:xi-bounce .85s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="sport-8"] .xi-all{animation:xi-wobble .9s ease-out}
.xi-play[data-i="sport-29"] .xi-all{transform-origin:70% 75%;animation:xi-swing .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="sport-15"] .xi-all{animation:xi-jitter .6s linear}

/* ---- sports, v2: each main sport moves the way it is played, with more than one part moving ----
   distances are in 24-grid units; a floor shadow (xi-shade) exists only while a ball is in the air */
.xi-shade{opacity:0;transform-box:view-box;transform-origin:12px 22.7px}
.xi-svg[data-i^="sport-"] .xi-spin{transform-box:view-box;transform-origin:12px 12px}
/* football: a little wind-up, a kicked hop and a second smaller one; the patches roll a full turn */
.xi-play[data-i="sport-1"] .xi-all{transform-origin:50% 100%;animation:xi-kick 1.15s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-1"] .xi-spin{animation:xi-roll 1.15s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-1"] .xi-shade{animation:xi-shade-kick 1.15s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-kick{0%{transform:none}16%{transform:translate(-1.2px,0) scale(1.04,.96)}42%{transform:translate(1.4px,-4.6px)}62%{transform:translate(1.8px,0) scale(1.07,.93)}78%{transform:translate(1px,-1.4px)}90%{transform:translate(.3px,0) scale(1.02,.98)}100%{transform:none}}
@keyframes xi-roll{0%{transform:none}16%{transform:rotate(-25deg)}78%{transform:rotate(320deg)}100%{transform:rotate(360deg)}}
@keyframes xi-shade-kick{0%{opacity:.3;transform:none}42%{opacity:.1;transform:scale(.5)}62%{opacity:.34;transform:scale(1.08)}78%{opacity:.2;transform:scale(.8)}100%{opacity:0;transform:none}}
/* basketball: a dribble — three bounces, lower each time, squashing on the floor; the ball turns a little */
.xi-play[data-i="sport-4"] .xi-all{transform-origin:50% 100%;animation:xi-dribble 1.3s cubic-bezier(.4,.1,.4,1)}
.xi-play[data-i="sport-4"] .xi-spin{animation:xi-dribble-spin 1.3s ease-in-out}
.xi-play[data-i="sport-4"] .xi-shade{animation:xi-shade-dribble 1.3s cubic-bezier(.4,.1,.4,1)}
@keyframes xi-dribble{0%{transform:none}14%{transform:translateY(-4.5px)}28%{transform:translateY(0) scale(1.1,.88)}44%{transform:translateY(-3px)}58%{transform:translateY(0) scale(1.07,.92)}72%{transform:translateY(-1.6px)}84%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}
@keyframes xi-dribble-spin{0%,100%{transform:none}28%{transform:rotate(-18deg)}58%{transform:rotate(12deg)}84%{transform:rotate(-5deg)}}
@keyframes xi-shade-dribble{0%{opacity:.32;transform:none}14%{opacity:.1;transform:scale(.5)}28%{opacity:.36;transform:scale(1.1)}44%{opacity:.16;transform:scale(.65)}58%{opacity:.34;transform:scale(1.05)}72%{opacity:.22;transform:scale(.8)}100%{opacity:0;transform:none}}
/* tennis: one high toss and a fast spin, like a serve */
.xi-play[data-i="sport-2"] .xi-all{transform-origin:50% 100%;animation:xi-toss 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-2"] .xi-spin{animation:xi-spin540 1.1s cubic-bezier(.2,.6,.3,1)}
.xi-play[data-i="sport-2"] .xi-shade{animation:xi-shade-toss 1.1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-toss{0%{transform:none}40%{transform:translateY(-6px)}64%{transform:translateY(0) scale(1.1,.9)}80%{transform:translateY(-1.6px)}100%{transform:none}}
@keyframes xi-spin540{to{transform:rotate(540deg)}}
@keyframes xi-shade-toss{0%{opacity:.3;transform:none}40%{opacity:.08;transform:scale(.4)}64%{opacity:.34;transform:scale(1.1)}80%{opacity:.2;transform:scale(.8)}100%{opacity:0;transform:none}}
/* volleyball: a set — up, a slow full turn, down */
.xi-play[data-i="sport-6"] .xi-all{transform-origin:50% 100%;animation:xi-toss 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-6"] .xi-spin{animation:xi-turn-set 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-6"] .xi-shade{animation:xi-shade-toss 1.1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-turn-set{to{transform:rotate(-360deg)}}
/* baseball: a pitch — pulled back, thrown forward with fast backspin */
.xi-play[data-i="sport-7"] .xi-all{animation:xi-pitch 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-7"] .xi-spin{animation:xi-spin720 1s cubic-bezier(.2,.5,.3,1)}
@keyframes xi-pitch{0%{transform:none}22%{transform:translate(-1.6px,.4px) scale(.92)}52%{transform:translate(2.6px,-1.2px) scale(1.04)}76%{transform:translate(-.4px,0)}100%{transform:none}}
@keyframes xi-spin720{to{transform:rotate(-720deg)}}
/* handball: the ball is thrown into the goal and the net gives */
.xi-play[data-i="sport-5"] .xi-all{animation:none}
.xi-play[data-i="sport-5"] .xi-ball{transform-box:view-box;transform-origin:16.6px 17.2px;animation:xi-throw-in 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-5"] .xi-net{transform-box:view-box;transform-origin:11px 5.8px;animation:xi-net 1.1s ease-out}
@keyframes xi-throw-in{0%{transform:none}38%{transform:translate(-6.4px,-4.8px) scale(.7)}56%{transform:translate(-6.8px,-4.4px) scale(.7)}100%{transform:none}}
@keyframes xi-net{0%,38%{transform:none}50%{transform:scale(1.03,1.06)}64%{transform:scale(.99,.98)}78%,100%{transform:none}}
/* table tennis: the paddle swings and the ball flies off it and comes back */
.xi-play[data-i="sport-29"] .xi-all{animation:none}
.xi-play[data-i="sport-29"] .xi-paddle{transform-box:view-box;transform-origin:5px 19px;animation:xi-pp-swing .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-pp-swing{0%{transform:none}22%{transform:rotate(12deg)}50%{transform:rotate(-8deg)}78%{transform:rotate(2deg)}100%{transform:none}}
.xi-play[data-i="sport-29"] .xi-ball{transform-box:view-box;transform-origin:4.3px 4.6px;animation:xi-ppball .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-ppball{0%{transform:none}28%{transform:translate(2.2px,2.2px)}58%{transform:translate(-2.4px,-1.6px)}82%{transform:translate(.4px,.4px)}100%{transform:none}}
/* esports: the pad shakes while its buttons are pressed */
.xi-play[data-i="sport-15"] .xi-btn{transform-box:view-box;transform-origin:17.6px 12.6px;animation:xi-press .6s linear}
@keyframes xi-press{0%,100%{transform:none}20%,60%{transform:scale(.7)}40%,80%{transform:scale(1.15)}}
/* american football: a spiral pass — lifted, turned along its length, landing */
.xi-play[data-i="sport-8"] .xi-all{animation:xi-spiral 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-spiral{0%{transform:none}20%{transform:translate(-1px,1px) rotate(8deg)}50%{transform:translate(2px,-3px) rotate(-18deg) scaleY(.86)}75%{transform:translate(.4px,0) rotate(5deg)}100%{transform:none}}
/* ---- round 2 ---- */
/* ice hockey: wind-up, strike, the puck slides away and back */
.xi-play[data-i="sport-3"] .xi-all{animation:none}
.xi-play[data-i="sport-3"] .xi-stick{transform-box:view-box;transform-origin:5px 2.5px;animation:xi-slap 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-3"] .xi-ball{transform-box:view-box;transform-origin:6.8px 17.8px;animation:xi-puck-slide 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-slap{0%{transform:none}28%{transform:rotate(-16deg)}46%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes xi-puck-slide{0%,42%{transform:none}62%{transform:translateX(-4.5px)}82%{transform:translateX(.6px)}100%{transform:none}}
/* cricket: the bat swings from the top of the handle, the ball flies off it */
.xi-play[data-i="sport-13"] .xi-all{animation:none}
.xi-play[data-i="sport-13"] .xi-bat{transform-box:view-box;transform-origin:19.2px 1.8px;animation:xi-bat-swing 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-13"] .xi-ball{transform-box:view-box;transform-origin:4.6px 5px;animation:xi-ball-off 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-bat-swing{0%{transform:none}28%{transform:rotate(-18deg)}48%{transform:rotate(14deg)}72%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes xi-ball-off{0%,44%{transform:none}64%{transform:translate(-2.6px,-2.8px) scale(.75)}84%{transform:translate(.3px,.3px)}100%{transform:none}}
/* boxing: a jab toward you; the spark flashes on the hit */
.xi-svg[data-i="sport-12"] .xi-hit{opacity:0;transform-box:fill-box;transform-origin:center}
.xi-play[data-i="sport-12"] .xi-all{transform-origin:50% 60%;animation:xi-jab .9s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-12"] .xi-hit{animation:xi-spark-hit .9s ease-out}
@keyframes xi-jab{0%{transform:none}24%{transform:translate(-1px,1px) scale(.9)}46%{transform:translate(.8px,-.8px) scale(1.18) rotate(-6deg)}70%{transform:scale(.98)}100%{transform:none}}
@keyframes xi-spark-hit{0%,40%{opacity:0;transform:scale(.2)}52%{opacity:1;transform:scale(1.3) rotate(20deg)}80%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(.6)}}
/* futsal: the ball rolls across the court and back */
.xi-play[data-i="sport-16"] .xi-all{animation:none}
.xi-play[data-i="sport-16"] .xi-ball{transform-box:view-box;transform-origin:12px 12px;animation:xi-futsal-roll 1.2s cubic-bezier(.35,.1,.35,1)}
@keyframes xi-futsal-roll{0%{transform:none}40%{transform:translateX(-5px) rotate(-260deg)}70%{transform:translateX(1.4px) rotate(40deg)}100%{transform:none}}
/* MMA: the fist punches out of the cage, the cage shakes on the hit */
.xi-play[data-i="sport-17"] .xi-all{animation:none}
.xi-play[data-i="sport-17"] .xi-fist{transform-box:view-box;transform-origin:12px 12px;animation:xi-fist-punch .9s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-17"] .xi-cage{transform-box:view-box;transform-origin:12px 12px;animation:xi-cage-shake .9s ease-out}
@keyframes xi-fist-punch{0%{transform:none}24%{transform:scale(.86)}46%{transform:scale(1.28)}70%{transform:scale(.97)}100%{transform:none}}
@keyframes xi-cage-shake{0%,44%{transform:none}54%{transform:rotate(-4deg)}66%{transform:rotate(3deg)}80%{transform:rotate(-1deg)}100%{transform:none}}
/* rugby league: kicked, the ball tumbles end over end */
.xi-play[data-i="sport-19"] .xi-all{animation:none}
.xi-play[data-i="sport-19"] .xi-ball{transform-box:view-box;transform-origin:12px 12px;animation:xi-tumble 1.15s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-19"] .xi-shade{animation:xi-shade-toss 1.15s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-tumble{0%{transform:none}40%{transform:translateY(-4.5px) rotate(200deg)}64%{transform:translateY(0) rotate(340deg) scale(1.04,.96)}82%{transform:translateY(-1px) rotate(355deg)}100%{transform:rotate(360deg)}}
/* snooker: the cue pulls back and strikes, the cue ball rolls on, the object ball clicks */
.xi-play[data-i="sport-21"] .xi-all{animation:none}
.xi-play[data-i="sport-21"] .xi-cue{animation:xi-cue-strike 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-21"] .xi-ball{transform-box:view-box;transform-origin:14.6px 16.4px;animation:xi-cueball 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-21"] .xi-obj{transform-box:view-box;transform-origin:17.6px 10.4px;animation:xi-obj-click 1s ease-out}
@keyframes xi-cue-strike{0%{transform:none}30%{transform:translate(-2px,-2.2px)}44%{transform:translate(1.1px,1.2px)}62%{transform:translate(.4px,.4px)}100%{transform:none}}
@keyframes xi-cueball{0%,42%{transform:none}62%{transform:translate(1.4px,-1.6px)}80%{transform:translate(.2px,-.2px)}100%{transform:none}}
@keyframes xi-obj-click{0%,58%{transform:none}66%{transform:translate(.8px,-1.2px)}80%{transform:translate(-.2px,.3px)}100%{transform:none}}
/* cycling: the wheels turn twice while the bike surges forward */
.xi-play[data-i="sport-33"] .xi-all{animation:xi-surge 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-33"] .xi-wheel1{transform-box:view-box;transform-origin:5.8px 15.4px;animation:xi-wheel 1.2s cubic-bezier(.3,.5,.3,1)}
.xi-play[data-i="sport-33"] .xi-wheel2{transform-box:view-box;transform-origin:18.2px 15.4px;animation:xi-wheel 1.2s cubic-bezier(.3,.5,.3,1)}
@keyframes xi-surge{0%{transform:none}25%{transform:translateX(-1px)}55%{transform:translateX(2px)}80%{transform:translateX(-.4px)}100%{transform:none}}
@keyframes xi-wheel{to{transform:rotate(720deg)}}
/* formula 1: launch — the car lurches forward (to the left, where the nose is), wheels spin, speed lines stream */
.xi-svg[data-i="sport-34"] .xi-speed{opacity:0}
.xi-play[data-i="sport-34"] .xi-all{animation:xi-launch 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-34"] .xi-wheel1{transform-box:view-box;transform-origin:6px 17.2px;animation:xi-wheel-back 1.1s cubic-bezier(.3,.5,.3,1)}
.xi-play[data-i="sport-34"] .xi-wheel2{transform-box:view-box;transform-origin:17.8px 17.2px;animation:xi-wheel-back 1.1s cubic-bezier(.3,.5,.3,1)}
.xi-play[data-i="sport-34"] .xi-speed{animation:xi-speed-lines 1.1s ease-out}
@keyframes xi-launch{0%{transform:none}18%{transform:translateX(.8px) rotate(1.5deg)}50%{transform:translateX(-2.4px) rotate(-.8deg)}78%{transform:translateX(.3px)}100%{transform:none}}
@keyframes xi-wheel-back{to{transform:rotate(-900deg)}}
@keyframes xi-speed-lines{0%,15%{opacity:0;transform:none}40%{opacity:.8;transform:translateX(1.5px)}75%{opacity:.3;transform:translateX(3px)}100%{opacity:0;transform:translateX(3px)}}
/* golf: the ball rolls up to the hole and back, the flag flutters */
.xi-play[data-i="sport-37"] .xi-all{animation:none}
.xi-play[data-i="sport-37"] .xi-ball{transform-box:view-box;transform-origin:17.6px 17.6px;animation:xi-putt 1.3s cubic-bezier(.35,.1,.35,1)}
.xi-play[data-i="sport-37"] .xi-flag{transform-box:view-box;transform-origin:9.4px 6.4px;animation:xi-flutter 1.3s ease-in-out}
@keyframes xi-putt{0%{transform:none}45%{transform:translate(-4.6px,1.8px) rotate(-220deg)}58%{transform:translate(-4.9px,2px) rotate(-240deg) scale(.9)}100%{transform:none}}
@keyframes xi-flutter{0%,100%{transform:none}20%{transform:scaleX(.82) skewY(6deg)}45%{transform:scaleX(1.05) skewY(-5deg)}70%{transform:scaleX(.9) skewY(4deg)}}
/* ---- round 3 ---- */
/* aussie rules: a drop punt — the ball rises through the posts, turning end over end and getting smaller;
   the posts drop a little, as if the camera follows the ball */
.xi-play[data-i="sport-9"] .xi-all{animation:none}
.xi-play[data-i="sport-9"] .xi-ball{transform-box:view-box;transform-origin:12px 13.2px;animation:xi-punt 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-9"] .xi-posts{transform-box:view-box;transform-origin:12px 21.4px;animation:xi-posts-follow 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-punt{0%{transform:none}16%{transform:translateY(1px) rotate(-10deg) scale(1.03,.97)}48%{transform:translateY(-6px) rotate(-190deg) scale(.66)}62%{transform:translateY(-6.4px) rotate(-230deg) scale(.62)}100%{transform:translateY(0) rotate(-360deg) scale(1)}}
@keyframes xi-posts-follow{0%{transform:none}48%,62%{transform:translateY(1.2px) scale(.97)}100%{transform:none}}
/* rugby union: a conversion — the ball leaves the tee and tumbles over the crossbar */
.xi-play[data-i="sport-20"] .xi-all{animation:none}
.xi-play[data-i="sport-20"] .xi-ball{transform-box:view-box;transform-origin:12px 15.6px;animation:xi-conversion 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-20"] .xi-posts{transform-box:view-box;transform-origin:12px 21.4px;animation:xi-posts-follow 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-conversion{0%{transform:none}14%{transform:translateY(.8px) rotate(12deg) scale(1.04,.96)}50%{transform:translateY(-10.4px) rotate(-200deg) scale(.55)}64%{transform:translateY(-10.6px) rotate(-250deg) scale(.54)}100%{transform:translateY(0) rotate(-360deg) scale(1)}}
/* gaelic football: a goal — the ball dips under the bar into the net, and the net gives */
.xi-play[data-i="sport-35"] .xi-all{animation:none}
.xi-play[data-i="sport-35"] .xi-ball{transform-box:view-box;transform-origin:12px 7.4px;animation:xi-goal-drop 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-35"] .xi-net{transform-box:view-box;transform-origin:12px 13.4px;animation:xi-net 1.2s ease-out}
@keyframes xi-goal-drop{0%{transform:none}14%{transform:translateY(-1.2px) rotate(-20deg) scale(1)}42%{transform:translateY(9.6px) rotate(160deg) scale(.66)}58%{transform:translateY(10.2px) rotate(185deg) scale(.64)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
/* badminton: the shuttle drops cork first, is hit, flips and flies; the feathers flare in the air */
.xi-play[data-i="sport-10"] .xi-all{transform-box:view-box;transform-origin:12px 12px;animation:xi-shuttle 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-10"] .xi-skirt{transform-box:view-box;transform-origin:12px 15px;animation:xi-feathers 1.2s ease-in-out}
@keyframes xi-shuttle{0%{transform:none}18%{transform:translateY(1.6px) rotate(0deg) scale(1)}40%{transform:translateY(-2.6px) rotate(180deg) scale(.78)}66%{transform:translateY(-1px) rotate(340deg) scale(.86)}84%{transform:translateY(.5px) rotate(365deg) scale(1)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
@keyframes xi-feathers{0%,100%{transform:none}18%{transform:scaleX(1.1)}40%{transform:scaleX(.86)}66%{transform:scaleX(1.06)}84%{transform:scaleX(.97)}}
/* beach volleyball / beach soccer: the ball is sent high (it gets smaller), lands in the sand and settles;
   the sun turns one ray-step while the ball is away from it (the gap around the sun stays where it was) */
.xi-play:is([data-i="sport-11"],[data-i="sport-24"]) .xi-all{animation:none}
.xi-play[data-i="sport-11"] .xi-ball{transform-box:view-box;transform-origin:10.4px 13.6px;animation:xi-sand-bump 1.4s cubic-bezier(.35,.1,.35,1)}
.xi-play[data-i="sport-24"] .xi-ball{transform-box:view-box;transform-origin:10.4px 13.6px;animation:xi-sand-kick 1.4s cubic-bezier(.35,.1,.35,1)}
.xi-play[data-i="sport-11"] .xi-badge{transform-box:view-box;transform-origin:18.6px 5.4px;animation:xi-sun-turn 1.4s ease-in-out}
.xi-play[data-i="sport-24"] .xi-badge{transform-box:view-box;transform-origin:18.6px 5.4px;animation:xi-sun-turn 1.4s ease-in-out}
@keyframes xi-sand-bump{0%{transform:none}12%{transform:translate(0,.6px) rotate(0deg) scale(1.05,.95)}38%{transform:translate(-3px,-4.4px) rotate(-200deg) scale(.5)}56%{transform:translate(-3.2px,-4.6px) rotate(-250deg) scale(.48)}80%{transform:translate(0,.4px) rotate(-350deg) scale(1.06,.94)}90%{transform:translate(0,-.8px) rotate(-358deg) scale(1)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
@keyframes xi-sand-kick{0%{transform:none}14%{transform:translate(.4px,.5px) rotate(20deg) scale(1.04,.96)}40%{transform:translate(-2.8px,-4.6px) rotate(250deg) scale(.5)}56%{transform:translate(-3px,-4.4px) rotate(290deg) scale(.5)}76%{transform:translate(0,.3px) rotate(350deg) scale(1.05,.95)}86%{transform:translate(0,-1.2px) rotate(356deg) scale(1)}94%{transform:translate(0,.1px) rotate(360deg) scale(1.02,.98)}100%{transform:translate(0,0) rotate(360deg) scale(1)}}
@keyframes xi-sun-turn{0%,39%{transform:none}56%,100%{transform:rotate(45deg)}}
/* pesäpallo: the pitcher tosses the ball straight up, the bat winds back and hits it away */
.xi-play[data-i="sport-18"] .xi-all{animation:none}
.xi-play[data-i="sport-18"] .xi-bat{transform-box:view-box;transform-origin:4.6px 19.8px;animation:xi-pesa-swing 1.3s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-18"] .xi-ball{transform-box:view-box;transform-origin:16.8px 16.6px;animation:xi-pesa-ball 1.3s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-pesa-swing{0%,10%{transform:none}34%{transform:rotate(-5deg)}50%{transform:rotate(-6deg)}60%{transform:rotate(14deg)}76%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes xi-pesa-ball{0%{transform:none}28%{transform:translate(0,-6px) rotate(-120deg) scale(1)}50%{transform:translate(0,-1px) rotate(-200deg) scale(1)}60%{transform:translate(0,-1.4px) rotate(-220deg) scale(1)}78%{transform:translate(3px,-6.6px) rotate(-340deg) scale(.6)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
/* water polo: the ball is lifted out of the water, splashes back behind the wave, bobs; the waves swell and roll */
.xi-play[data-i="sport-22"] .xi-all{animation:none}
.xi-play[data-i="sport-22"] .xi-ball{transform-box:view-box;transform-origin:12px 10.2px;animation:xi-polo-ball 1.3s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-22"] .xi-wave1{transform-box:view-box;transform-origin:12px 19px;animation:xi-wave-a 1.3s ease-in-out}
.xi-play[data-i="sport-22"] .xi-wave2{transform-box:view-box;transform-origin:12px 22.6px;animation:xi-wave-b 1.3s ease-in-out}
@keyframes xi-polo-ball{0%{transform:none}32%{transform:translateY(-2.2px) rotate(-200deg) scale(.92)}52%{transform:translateY(2.6px) rotate(-310deg) scale(1)}70%{transform:translateY(-.6px) rotate(-350deg) scale(1)}86%{transform:translateY(.7px) rotate(-365deg) scale(1)}100%{transform:translateY(0) rotate(-360deg) scale(1)}}
@keyframes xi-wave-a{0%,40%{transform:none}54%{transform:translateY(-.8px) scaleY(1.2)}70%{transform:translateX(-1.1px)}86%{transform:translateX(.6px)}100%{transform:none}}
@keyframes xi-wave-b{0%,44%{transform:none}58%{transform:translateY(-.5px) scaleY(1.12)}74%{transform:translateX(1.1px)}90%{transform:translateX(-.5px)}100%{transform:none}}
/* bandy: the skate pushes off and glides; the ball hops off the ice */
.xi-play[data-i="sport-23"] .xi-all{animation:none}
.xi-play[data-i="sport-23"] .xi-skate{transform-box:view-box;transform-origin:12px 20px;animation:xi-stride 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-23"] .xi-ball{transform-box:view-box;transform-origin:19.2px 5.6px;animation:xi-bandy-ball 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-stride{0%{transform:none}22%{transform:translateX(-1.2px) rotate(-5deg)}50%{transform:translateX(1.6px) rotate(1deg)}72%{transform:translateX(.6px) rotate(0deg)}100%{transform:none}}
@keyframes xi-bandy-ball{0%,40%{transform:none}58%{transform:translate(1.4px,-2.4px)}74%{transform:translate(.6px,0) scale(1.08,.92)}86%{transform:translate(0,-.6px)}100%{transform:none}}
/* floorball: wind-up, the blade sweeps into the ball, the ball rolls away and back */
.xi-play[data-i="sport-25"] .xi-all{animation:none}
.xi-play[data-i="sport-25"] .xi-stick{transform-box:view-box;transform-origin:15.2px 2.4px;animation:xi-floor-shot 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-25"] .xi-ball{transform-box:view-box;transform-origin:16.4px 16.4px;animation:xi-floor-ball 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-floor-shot{0%{transform:none}28%{transform:rotate(8deg)}46%{transform:rotate(-9deg)}68%{transform:rotate(2deg)}100%{transform:none}}
@keyframes xi-floor-ball{0%,40%{transform:none}62%{transform:translateX(2.6px) rotate(90deg)}82%{transform:translateX(-.3px) rotate(-8deg)}100%{transform:translateX(0) rotate(0deg)}}
/* field hockey: the hooked stick swings back and hits, the ball shoots off */
.xi-play[data-i="sport-26"] .xi-all{animation:none}
.xi-play[data-i="sport-26"] .xi-stick{transform-box:view-box;transform-origin:15.5px 2.5px;animation:xi-hockey-hit 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-26"] .xi-ball{transform-box:view-box;transform-origin:18.6px 18.6px;animation:xi-hockey-ball 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-hockey-hit{0%{transform:none}28%{transform:rotate(10deg)}46%{transform:rotate(-8deg)}68%{transform:rotate(2deg)}100%{transform:none}}
@keyframes xi-hockey-ball{0%,42%{transform:none}60%{transform:translateX(2.4px)}80%{transform:translateX(-.3px)}100%{transform:none}}
/* hurling: the sliotar is tossed up, the hurley draws back and strikes it high */
.xi-play[data-i="sport-36"] .xi-all{animation:none}
.xi-play[data-i="sport-36"] .xi-bat{transform-box:view-box;transform-origin:17px 2.6px;animation:xi-hurl-swing 1.3s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-36"] .xi-ball{transform-box:view-box;transform-origin:19.4px 17.6px;animation:xi-hurl-ball 1.3s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-hurl-swing{0%,10%{transform:none}36%{transform:rotate(10deg)}50%{transform:rotate(11deg)}60%{transform:rotate(-12deg)}78%{transform:rotate(2deg)}100%{transform:none}}
@keyframes xi-hurl-ball{0%{transform:none}30%{transform:translate(-1.4px,-5px) rotate(-120deg) scale(1)}52%{transform:translate(-.6px,-1px) rotate(-200deg) scale(1)}60%{transform:translate(-.6px,-1px) rotate(-210deg) scale(1)}80%{transform:translate(1.2px,-9px) rotate(-330deg) scale(.6)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
/* lacrosse: the ball is caught in the pocket, the stick gives, then whips and throws it back out */
.xi-play[data-i="sport-40"] .xi-all{animation:none}
.xi-play[data-i="sport-40"] .xi-stick{transform-box:view-box;transform-origin:5px 21px;animation:xi-lax-stick 1.4s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-40"] .xi-ball{transform-box:view-box;transform-origin:4.2px 6.2px;animation:xi-lax-ball 1.4s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-lax-stick{0%,32%{transform:none}42%{transform:rotate(5deg)}56%{transform:rotate(1deg)}64%{transform:rotate(-10deg)}80%{transform:rotate(2deg)}100%{transform:none}}
@keyframes xi-lax-ball{0%{transform:none}34%{transform:translate(11.7px,.8px) scale(.9)}42%{transform:translate(12.9px,1.8px) scale(.9)}56%{transform:translate(11.9px,1px) scale(.9)}64%{transform:translate(9.1px,-.9px) scale(.94)}82%{transform:translate(-.6px,-.4px) scale(1)}100%{transform:none}}
/* squash: the racket draws back and swings, the ball flies off to the front wall (smaller) and comes back */
.xi-play[data-i="sport-50"] .xi-all{animation:none}
.xi-play[data-i="sport-50"] .xi-racket{transform-box:view-box;transform-origin:4.4px 20.6px;animation:xi-squash-swing 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-50"] .xi-ball{transform-box:view-box;transform-origin:19.2px 19.4px;animation:xi-squash-ball 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-squash-swing{0%{transform:none}30%{transform:rotate(-10deg)}46%{transform:rotate(12deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes xi-squash-ball{0%,40%{transform:none}62%{transform:translate(-4px,-11px) scale(.5)}72%{transform:translate(-4.4px,-11.6px) scale(.48)}100%{transform:none}}
/* esoccer: the ball rolls to one side of the screen, bounces off the edge, rolls to the other; the screen knocks */
.xi-play[data-i="sport-51"] .xi-all{animation:none}
.xi-play[data-i="sport-51"] .xi-ball{transform-box:view-box;transform-origin:12px 10px;animation:xi-e-pass 1.3s cubic-bezier(.4,.1,.4,1)}
.xi-play[data-i="sport-51"] .xi-screen{transform-box:view-box;transform-origin:12px 17px;animation:xi-screen-knock 1.3s ease-out}
@keyframes xi-e-pass{0%{transform:none}28%{transform:translateX(-4.4px) scale(1) rotate(-180deg)}34%{transform:translateX(-4.5px) scale(.92,1.05) rotate(-185deg)}62%{transform:translateX(4.4px) scale(1) rotate(180deg)}68%{transform:translateX(4.5px) scale(.92,1.05) rotate(185deg)}100%{transform:translateX(0) scale(1) rotate(0deg)}}
@keyframes xi-screen-knock{0%,28%{transform:none}34%{transform:rotate(-1.6deg)}46%,62%{transform:none}68%{transform:rotate(1.6deg)}80%,100%{transform:none}}
/* ebasketball: the ball pops out toward you, drops and dribbles on the screen; the screen gives on each bounce */
.xi-play[data-i="sport-52"] .xi-all{animation:none}
.xi-play[data-i="sport-52"] .xi-ball{transform-box:view-box;transform-origin:12px 10px;animation:xi-e-shot 1.3s cubic-bezier(.4,.1,.4,1)}
.xi-play[data-i="sport-52"] .xi-screen{transform-box:view-box;transform-origin:12px 17px;animation:xi-screen-bump 1.3s ease-out}
@keyframes xi-e-shot{0%{transform:none}26%{transform:translateY(-1.8px) scale(1.22) rotate(-120deg)}48%{transform:translateY(1.4px) scale(1.08,.9) rotate(-200deg)}62%{transform:translateY(-1.4px) scale(1) rotate(-240deg)}76%{transform:translateY(1.2px) scale(1.05,.94) rotate(-300deg)}86%{transform:translateY(-.5px) scale(1) rotate(-340deg)}100%{transform:translateY(0) scale(1) rotate(-360deg)}}
@keyframes xi-screen-bump{0%,44%{transform:none}50%{transform:scale(1.02,.97)}62%,72%{transform:none}78%{transform:scale(1.01,.985)}88%,100%{transform:none}}
/* ---- round 4: the last sixteen ---- */
/* kabaddi: the raider lunges in, the near arm reaches for the tag while the far arm swings back */
.xi-play[data-i="sport-27"] .xi-all{transform-box:view-box;transform-origin:10px 21px;animation:xi-raid 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-27"] .xi-armN{transform-box:view-box;transform-origin:14.4px 8.6px;animation:xi-reach 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-27"] .xi-armF{transform-box:view-box;transform-origin:13.6px 8.6px;animation:xi-arm-back 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-raid{0%{transform:none}22%{transform:translateX(-.8px) rotate(-3deg)}50%{transform:translateX(.8px) rotate(6deg)}66%{transform:translateX(.8px) rotate(5deg)}100%{transform:none}}
@keyframes xi-reach{0%{transform:none}22%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}60%{transform:rotate(-4deg)}66%{transform:rotate(12deg)}100%{transform:none}}
@keyframes xi-arm-back{0%{transform:none}22%{transform:rotate(10deg)}50%{transform:rotate(-16deg)}100%{transform:none}}
/* netball: the ball is shot up, drops behind the ring and through the net; the net stretches, the ring shivers */
.xi-play[data-i="sport-28"] .xi-all{animation:none}
.xi-play[data-i="sport-28"] .xi-ball{transform-box:view-box;transform-origin:16.4px 17.4px;animation:xi-netball-shot 1.3s cubic-bezier(.35,.1,.35,1)}
.xi-play[data-i="sport-28"] .xi-net{transform-box:view-box;transform-origin:16px 6.6px;animation:xi-net-stretch 1.3s ease-out}
.xi-play[data-i="sport-28"] .xi-ring{transform-box:view-box;transform-origin:11.6px 5.4px;animation:xi-ring-shake 1.3s ease-out}
@keyframes xi-netball-shot{0%{transform:none}14%{transform:translate(0,.8px) rotate(0deg) scale(1.04,.96)}40%{transform:translate(-.4px,-14px) rotate(-150deg) scale(.62)}56%{transform:translate(-.4px,-8.4px) rotate(-200deg) scale(.6)}76%{transform:translate(-.2px,-1.6px) rotate(-320deg) scale(.9)}88%{transform:translate(0,.5px) rotate(-355deg) scale(1.04,.96)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
@keyframes xi-net-stretch{0%,46%{transform:none}58%{transform:scale(.94,1.16)}72%{transform:scale(1.02,.96)}84%,100%{transform:none}}
@keyframes xi-ring-shake{0%,44%{transform:none}52%{transform:rotate(3deg)}62%{transform:rotate(-1.5deg)}74%,100%{transform:none}}
/* athletics: the shoe pushes off heel-up, strides through the air and strikes the track; speed lines trail */
.xi-svg[data-i="sport-30"] .xi-speed{opacity:0}
.xi-play[data-i="sport-30"] .xi-all{animation:none}
.xi-play[data-i="sport-30"] .xi-shoe{transform-box:view-box;transform-origin:20px 19.4px;animation:xi-sprint 1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-30"] .xi-speed{transform-box:view-box;animation:xi-speed-trail 1s ease-out}
@keyframes xi-sprint{0%{transform:none}20%{transform:translate(-.6px,0) rotate(8deg)}46%{transform:translate(0,-1.6px) rotate(-5deg)}70%{transform:translate(0,0) rotate(1deg)}84%{transform:translate(0,0) rotate(-.5deg)}100%{transform:none}}
@keyframes xi-speed-trail{0%,20%{opacity:0;transform:none}40%{opacity:.9;transform:translateX(-.6px)}70%{opacity:.4;transform:translateX(-1.6px)}100%{opacity:0;transform:translateX(-1.6px)}}
/* bowling: the ball draws back, rolls into the pin, the pin tips and rocks back */
.xi-play[data-i="sport-31"] .xi-all{animation:none}
.xi-play[data-i="sport-31"] .xi-ball{transform-box:view-box;transform-origin:15.6px 15.4px;animation:xi-bowl-roll 1.2s cubic-bezier(.35,.1,.35,1)}
.xi-play[data-i="sport-31"] .xi-pin{transform-box:view-box;transform-origin:8.8px 21.8px;animation:xi-pin-tip 1.2s ease-out}
@keyframes xi-bowl-roll{0%{transform:none}30%{transform:translateX(1.8px) rotate(60deg)}50%{transform:translateX(-2.4px) rotate(-50deg)}62%{transform:translateX(-2.2px) rotate(-46deg)}100%{transform:translateX(0) rotate(0deg)}}
@keyframes xi-pin-tip{0%,46%{transform:none}58%{transform:rotate(-14deg)}72%{transform:rotate(7deg)}84%{transform:rotate(-3deg)}94%{transform:rotate(1deg)}100%{transform:none}}
/* chess: the knight's jump — lifted off the board, over to the side, set down, and back; its shadow stays on the board */
.xi-play[data-i="sport-32"] .xi-all{animation:none}
.xi-play[data-i="sport-32"] .xi-piece{transform-box:view-box;transform-origin:12.6px 21.8px;animation:xi-knight 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-32"] .xi-shade{animation:xi-shade-knight 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-knight{0%{transform:none}16%{transform:translate(0,.5px) rotate(0deg) scale(1.03,.97)}38%{transform:translate(-.4px,-2.4px) rotate(-6deg) scale(1)}58%{transform:translate(2.2px,-2.2px) rotate(5deg) scale(1)}72%{transform:translate(2.2px,0) rotate(0deg) scale(1.03,.97)}86%{transform:translate(.6px,-1px) rotate(-2deg) scale(1)}100%{transform:translate(0,0) rotate(0deg) scale(1)}}
@keyframes xi-shade-knight{0%{opacity:.3;transform:none}38%{opacity:.12;transform:translateX(-.4px) scale(.55)}58%{opacity:.12;transform:translateX(2.2px) scale(.6)}72%{opacity:.34;transform:translateX(2.2px) scale(1)}86%{opacity:.2;transform:translateX(.6px) scale(.8)}100%{opacity:0;transform:none}}
/* greyhounds: two gallop strides — legs gather under the body and stretch out, the body bobs, the tail streams */
.xi-play[data-i="sport-38"] .xi-all{transform-box:view-box;transform-origin:12px 14px;animation:xi-gallop 1s ease-in-out}
.xi-play[data-i="sport-38"] .xi-legB{transform-box:view-box;transform-origin:6.4px 12.6px;animation:xi-leg-back 1s ease-in-out}
.xi-play[data-i="sport-38"] .xi-legBf{transform-box:view-box;transform-origin:7.6px 12.8px;animation:xi-leg-back 1s ease-in-out .06s}
.xi-play[data-i="sport-38"] .xi-legF{transform-box:view-box;transform-origin:15.6px 13.8px;animation:xi-leg-front 1s ease-in-out}
.xi-play[data-i="sport-38"] .xi-legFf{transform-box:view-box;transform-origin:14.6px 14px;animation:xi-leg-front 1s ease-in-out .06s}
.xi-play[data-i="sport-38"] .xi-tail{transform-box:view-box;transform-origin:4px 10.4px;animation:xi-tail-stream 1s ease-in-out}
@keyframes xi-gallop{0%,50%,100%{transform:none}25%,75%{transform:translate(.5px,-1.2px) rotate(-3deg)}}
@keyframes xi-leg-back{0%,50%,100%{transform:none}25%,75%{transform:rotate(-95deg)}}
@keyframes xi-leg-front{0%,50%,100%{transform:none}25%,75%{transform:rotate(95deg)}}
@keyframes xi-tail-stream{0%,50%,100%{transform:none}25%,75%{transform:rotate(18deg)}}
/* horse racing: the lucky horseshoe is tossed, turns over in the air and lands; its shadow shrinks and returns */
.xi-play[data-i="sport-39"] .xi-all{animation:none}
.xi-play[data-i="sport-39"] .xi-shoe{transform-box:view-box;transform-origin:12px 12px;animation:xi-shoe-toss 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-39"] .xi-shade{animation:xi-shade-toss 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-shoe-toss{0%{transform:none}14%{transform:translateY(.6px) scale(1.04,.96)}30%{transform:translateY(-2px) scale(.2,.9)}46%{transform:translateY(-2.6px) scale(-1,.86)}62%{transform:translateY(-2px) scale(-.2,.9)}78%{transform:translateY(0) scale(1.05,.95)}90%{transform:translateY(-.6px) scale(1,1)}100%{transform:none}}
/* motor racing: the marshal waves the chequered flag; the cloth ripples */
.xi-play[data-i="sport-41"] .xi-all{transform-box:view-box;transform-origin:4.6px 21.6px;animation:xi-flag-wave 1.2s ease-in-out}
.xi-play[data-i="sport-41"] .xi-flag{transform-box:view-box;transform-origin:6.2px 8.4px;animation:xi-flutter 1.2s ease-in-out}
@keyframes xi-flag-wave{0%,100%{transform:none}25%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-4deg)}}
/* olympics: the torch sways as it is carried; the flame and its bright core flicker against each other */
.xi-play[data-i="sport-42"] .xi-all{transform-box:view-box;transform-origin:12px 22px;animation:xi-torch-sway 1.2s ease-in-out}
.xi-play[data-i="sport-42"] .xi-flame{transform-box:view-box;transform-origin:12px 14px;animation:xi-flicker 1.2s ease-in-out}
.xi-play[data-i="sport-42"] .xi-core{transform-box:view-box;transform-origin:12px 13px;animation:xi-flicker-core 1.2s ease-in-out}
@keyframes xi-torch-sway{0%,100%{transform:none}30%{transform:rotate(-5deg)}62%{transform:rotate(4deg)}86%{transform:rotate(-1deg)}}
@keyframes xi-flicker{0%,100%{transform:none}20%{transform:scale(.94,1.08) skewX(-5deg)}40%{transform:scale(1.05,.92) skewX(4deg)}60%{transform:scale(.96,1.09) skewX(3deg)}80%{transform:scale(1.03,.95) skewX(-3deg)}}
@keyframes xi-flicker-core{0%,100%{transform:none}20%{transform:scale(1.12,.9) skewX(0deg)}40%{transform:scale(.9,1.18) skewX(-6deg)}60%{transform:scale(1.1,.92) skewX(0deg)}80%{transform:scale(.95,1.1) skewX(4deg)}}
/* politics: the ticked ballot drops into the box, the box takes it, and a fresh ballot pops up */
.xi-play[data-i="sport-43"] .xi-all{animation:none}
.xi-play[data-i="sport-43"] .xi-card{transform-box:view-box;transform-origin:12px 8px;animation:xi-ballot 1.3s cubic-bezier(.4,.1,.4,1)}
.xi-play[data-i="sport-43"] .xi-box{transform-box:view-box;transform-origin:12px 21.8px;animation:xi-box-take 1.3s ease-out}
@keyframes xi-ballot{0%{transform:none}14%{transform:translateY(-1.2px) rotate(3deg) scale(1)}44%{transform:translateY(8.4px) rotate(0deg) scale(.92,.72)}56%{transform:translateY(8.4px) rotate(0deg) scale(.92,.72)}57%{transform:translateY(0) rotate(0deg) scale(0)}80%{transform:translateY(0) rotate(0deg) scale(1.08)}100%{transform:translateY(0) rotate(0deg) scale(1)}}
@keyframes xi-box-take{0%,42%{transform:none}48%{transform:scale(1.03,.95)}58%{transform:scale(.99,1.02)}66%,100%{transform:none}}
/* price boosts: the rocket shudders on ignition and lifts, the flame lengthens, smoke puffs roll out */
.xi-svg[data-i="sport-44"] :is(.xi-puffL,.xi-puffR){transform:scale(0);transform-box:fill-box;transform-origin:center}
.xi-play[data-i="sport-44"] .xi-all{transform-box:view-box;transform-origin:12px 12px;animation:xi-ignite 1.2s linear}
.xi-play[data-i="sport-44"] .xi-badge{transform-box:view-box;transform-origin:12px 16.4px;animation:xi-thrust 1.2s ease-in-out}
.xi-play[data-i="sport-44"] .xi-puffL{animation:xi-puff-l 1.2s ease-out}
.xi-play[data-i="sport-44"] .xi-puffR{animation:xi-puff-r 1.2s ease-out}
@keyframes xi-ignite{0%{transform:none}8%{transform:translate(-.4px,0)}16%{transform:translate(.4px,0)}24%{transform:translate(-.4px,0)}32%{transform:translate(.3px,0)}40%{transform:translate(0,-1.2px)}70%{transform:translate(0,-1.6px)}100%{transform:none}}
@keyframes xi-thrust{0%,100%{transform:none}20%{transform:scale(.9,1.12)}40%{transform:scale(1.1,1.3)}55%{transform:scale(.95,1.18)}70%{transform:scale(1.08,1.3)}}
@keyframes xi-puff-l{0%,30%{transform:scale(0)}55%{transform:translate(-1px,0) scale(1.1)}80%{transform:translate(-1.8px,-.3px) scale(.85)}100%{transform:translate(-2.2px,-.4px) scale(0)}}
@keyframes xi-puff-r{0%,30%{transform:scale(0)}55%{transform:translate(1px,0) scale(1.1)}80%{transform:translate(1.8px,-.3px) scale(.85)}100%{transform:translate(2.2px,-.4px) scale(0)}}
/* softball: the bat draws back and swings through, the ball is hit away high (smaller) and comes back */
.xi-play[data-i="sport-45"] .xi-all{animation:none}
.xi-play[data-i="sport-45"] .xi-bat{transform-box:view-box;transform-origin:21px 3px;animation:xi-soft-swing 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-45"] .xi-ball{transform-box:view-box;transform-origin:10.2px 13.8px;animation:xi-soft-hit 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-soft-swing{0%{transform:none}28%{transform:rotate(14deg)}44%{transform:rotate(-16deg)}66%{transform:rotate(3deg)}100%{transform:none}}
@keyframes xi-soft-hit{0%,40%{transform:none}46%{transform:translate(.4px,.2px) rotate(0deg) scale(.95,1.04)}70%{transform:translate(-3.4px,-5px) rotate(-200deg) scale(.5)}80%{transform:translate(-3.6px,-5.2px) rotate(-230deg) scale(.48)}100%{transform:translate(0,0) rotate(-360deg) scale(1)}}
/* specials: the star turns one point and swells; the two sparkles twinkle one after the other */
.xi-play[data-i="sport-46"] .xi-all{animation:none}
.xi-play[data-i="sport-46"] .xi-star{transform-box:view-box;transform-origin:10.8px 13px;animation:xi-star-turn 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-46"] .xi-spark1{transform-box:view-box;transform-origin:19.4px 4.6px;animation:xi-glint-pop 1.1s ease-in-out}
.xi-play[data-i="sport-46"] .xi-spark2{transform-box:view-box;transform-origin:4.4px 4.2px;animation:xi-glint-pop 1.1s ease-in-out .15s}
@keyframes xi-star-turn{0%{transform:none}20%{transform:rotate(-10deg) scale(.9)}60%{transform:rotate(80deg) scale(1.12)}80%{transform:rotate(70deg) scale(.98)}100%{transform:rotate(72deg) scale(1)}}
@keyframes xi-glint-pop{0%{transform:none}30%{transform:rotate(45deg) scale(.4)}60%{transform:rotate(90deg) scale(1.35)}100%{transform:rotate(90deg) scale(1)}}
/* surfing: the board drops down the face and carves back up to the lip; the wave swells under it */
.xi-play[data-i="sport-47"] .xi-all{animation:none}
.xi-play[data-i="sport-47"] .xi-board{transform-box:view-box;transform-origin:15.8px 7.6px;animation:xi-carve 1.3s ease-in-out}
.xi-play[data-i="sport-47"] .xi-wave{transform-box:view-box;transform-origin:1.8px 22px;animation:xi-swell 1.3s ease-in-out}
@keyframes xi-carve{0%{transform:none}25%{transform:translate(-1px,1.4px) rotate(-6deg)}50%{transform:translate(.4px,-.8px) rotate(4deg)}66%{transform:translate(.2px,-1.2px) rotate(2deg)}84%{transform:translate(-.3px,.3px) rotate(-1deg)}100%{transform:none}}
@keyframes xi-swell{0%,100%{transform:none}30%{transform:scale(.97,.95)}55%{transform:scale(1.04,1.07)}80%{transform:scale(.99,.98)}}
/* winter sports: the snowflake drifts and turns one arm-step; its side crystals draw in and grow, the centre pulses */
.xi-play[data-i="sport-48"] .xi-all{transform-box:view-box;transform-origin:12px 12px;animation:xi-flake 1.4s cubic-bezier(.4,.1,.4,1)}
.xi-play[data-i="sport-48"] .xi-twig{transform-box:view-box;transform-origin:12px 12px;animation:xi-twig-grow 1.4s ease-in-out}
.xi-play[data-i="sport-48"] .xi-core{transform-box:view-box;transform-origin:12px 12px;animation:xi-core-pulse 1.4s ease-in-out}
@keyframes xi-flake{0%{transform:none}50%{transform:translate(.8px,.6px) rotate(40deg)}100%{transform:translate(0,0) rotate(60deg)}}
@keyframes xi-twig-grow{0%,100%{transform:none}30%{transform:scale(.82)}60%{transform:scale(1.1)}}
@keyframes xi-core-pulse{0%,100%{transform:none}30%{transform:scale(1.25)}60%{transform:scale(.85)}}
/* wrestling: the champion lifts the belt and shakes it overhead; the centre plate spins and swells */
.xi-play[data-i="sport-49"] .xi-all{transform-box:view-box;transform-origin:12px 12px;animation:xi-belt-raise 1.2s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="sport-49"] .xi-badge{transform-box:view-box;transform-origin:12px 12px;animation:xi-plate-spin 1.2s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-belt-raise{0%{transform:none}24%{transform:translate(0,-2.4px) rotate(-5deg)}40%{transform:translate(0,-2.6px) rotate(5deg)}56%{transform:translate(0,-2.6px) rotate(-4deg)}72%{transform:translate(0,-2.2px) rotate(3deg)}100%{transform:none}}
@keyframes xi-plate-spin{0%,20%{transform:none}50%{transform:rotate(200deg) scale(1.1)}70%{transform:rotate(340deg) scale(1)}100%{transform:rotate(360deg) scale(1)}}
/* darts: the dart flies in from the top right and sticks; the board shakes as it lands */
.xi-play[data-i="sport-14"] .xi-all{animation:none}
.xi-play[data-i="sport-14"] .xi-dart{animation:xi-dart-in .75s cubic-bezier(.5,.05,.7,.6)}
.xi-play[data-i="sport-14"] .xi-board{transform-box:view-box;transform-origin:10.6px 13.4px;animation:xi-board-hit .75s ease-out}
@keyframes xi-dart-in{0%{transform:translate(8px,-8px)}55%{transform:translate(-.5px,.5px)}68%{transform:translate(.2px,-.2px)}100%{transform:none}}
@keyframes xi-board-hit{0%,52%{transform:none}62%{transform:translate(-.5px,.4px) rotate(-2deg)}74%{transform:translate(.4px,-.3px) rotate(1.4deg)}86%{transform:rotate(-.6deg)}100%{transform:none}}
.xi-play:is([data-i="ticket-remove"],[data-i="tickets-remove-all"]) .xi-all{animation:xi-tilt .8s cubic-bezier(.3,.7,.4,1)}
.xi-play:is([data-i="ticket-remove"],[data-i="tickets-remove-all"],[data-i="ticket-success"]) .xi-badge{animation:xi-badge .7s cubic-bezier(.2,1.5,.4,1)}
.xi-play:is([data-i="ticket-archive"],[data-i="tickets-archive-all"]) .xi-card{animation:xi-drop .9s cubic-bezier(.4,.1,.3,1)}
.xi-play:is([data-i="ticket-unarchive"],[data-i="tickets-unarchive-all"]) .xi-card{animation:xi-rise .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="cashout"] .xi-badge{animation:xi-coin .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="ticket-lock"] .xi-lid{animation:xi-shackle .7s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="ticket-share"] .xi-badge{animation:xi-fly .8s cubic-bezier(.3,.7,.4,1)}
.xi-play:is([data-i="reward"],[data-i="gem"]) .xi-all{animation:xi-tilt .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="success"] .xi-all{animation:xi-tilt .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="warning"] .xi-all{animation:xi-jitter .6s linear}
.xi-play[data-i="info"] .xi-all{transform-origin:50% 100%;animation:xi-bounce .85s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="notification"] .xi-all{transform-origin:50% 0;animation:xi-swing .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="notification"] .xi-clap{animation:xi-puck .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="wallet"] .xi-card{animation:xi-rise .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="funds-in"] .xi-badge{animation:xi-drop .9s cubic-bezier(.4,.1,.3,1)}
.xi-play[data-i="funds-out"] .xi-badge{animation:xi-rise .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="deposit"] .xi-card{animation:xi-drop .9s cubic-bezier(.4,.1,.3,1)}
.xi-play[data-i="withdraw"] .xi-card{animation:xi-rise .9s cubic-bezier(.3,.7,.4,1)}
.xi-svg[data-i="live"] .xi-ring1{animation:xi-live 1.8s ease-in-out infinite}
.xi-svg[data-i="live"] .xi-ring2{animation:xi-live 1.8s ease-in-out .3s infinite}
/* spots: distances in user units, so the 48 grid gets its own, doubled, keyframes */
.xi-play[data-i^="spot-"]:not([data-i*="archive"]) .xi-all{animation:xi-tilt .8s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i^="spot-"] .xi-badge{animation:xi-badge .7s cubic-bezier(.2,1.5,.4,1) .12s both}
.xi-play:is([data-i="spot-archive"],[data-i="spot-archive-all"]) .xi-card{animation:xi-drop48 .9s cubic-bezier(.4,.1,.3,1)}
.xi-play:is([data-i="spot-unarchive"],[data-i="spot-unarchive-all"],[data-i="spot-no-credit"]) .xi-card{animation:xi-rise48 .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="spot-match-unavailable"] .xi-ball{animation:xi-bounce48 .85s cubic-bezier(.3,.7,.4,1)}
/* success sparkles. On their own, from the moment the picture appears: each dips and comes back, a beat apart,
   three times over (about 6 s), then they rest. When the picture plays (enter / tap) they spring in instead. */
.xi-svg[data-i^="spot-"] :is(.xi-spark1,.xi-spark2,.xi-spark3){animation:xi-shimmer 2s ease-in-out .9s 3}
.xi-svg[data-i^="spot-"] .xi-spark2{animation-delay:1.55s}
.xi-svg[data-i^="spot-"] .xi-spark3{animation-delay:2.2s}
.xi-play[data-i^="spot-"] :is(.xi-spark1,.xi-spark2,.xi-spark3){animation:xi-twinkle .75s cubic-bezier(.2,1.4,.4,1) both}
.xi-play[data-i^="spot-"] .xi-spark2{animation-delay:.14s}
.xi-play[data-i^="spot-"] .xi-spark3{animation-delay:.28s}
@keyframes xi-twinkle{0%{transform:scale(.1) rotate(-45deg);opacity:0}55%{transform:scale(1.35) rotate(10deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes xi-shimmer{0%,100%{transform:none;opacity:1}45%{transform:scale(.45) rotate(25deg);opacity:.35}70%{transform:scale(1.15);opacity:1}}
/* identity: the passport slides up behind the card and settles */
.xi-play:is([data-i="spot-verify-id"],[data-i="spot-verified"]) .xi-pass{transform-box:view-box;transform-origin:27px 18px;animation:xi-pass48 1s cubic-bezier(.3,.7,.4,1)}
@keyframes xi-pass48{0%{transform:none}40%{transform:translate(2px,-6px) rotate(6deg)}70%{transform:translate(0,1px) rotate(-1deg)}100%{transform:none}}
/* promo code: the scissors snip twice, both blades turning about the pivot (no fading) */
.xi-play[data-i="spot-promo-code"] :is(.xi-snipA,.xi-snipB){transform-box:view-box;transform-origin:14px 33.3px}
.xi-play[data-i="spot-promo-code"] .xi-snipA{animation:xi-snipA 1s ease-in-out}
.xi-play[data-i="spot-promo-code"] .xi-snipB{animation:xi-snipB 1s ease-in-out}
@keyframes xi-snipA{0%,50%,100%{transform:none}25%,75%{transform:rotate(-14deg)}}
@keyframes xi-snipB{0%,50%,100%{transform:none}25%,75%{transform:rotate(14deg)}}
/* account limits: the needle sweeps up to the limit and back once the page is up; a tap sweeps it again */
.xi-svg[data-i="spot-limits"] .xi-hand{transform-box:view-box;transform-origin:22px 34px;animation:xi-needle 1.6s cubic-bezier(.45,.05,.3,1) .9s}
.xi-play[data-i="spot-limits"] .xi-hand{animation:xi-needle-tap 1.2s cubic-bezier(.45,.05,.3,1)}
@keyframes xi-needle{0%{transform:rotate(-90deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes xi-needle-tap{0%{transform:none}35%{transform:rotate(-70deg)}75%{transform:rotate(8deg)}100%{transform:none}}
/* password pictures: the shackle lifts and drops back into the lock */
.xi-play:is([data-i^="spot-password"]) .xi-lid{animation:xi-unlock48 .9s cubic-bezier(.3,.7,.4,1)}
/* email pictures: the letter slides up out of the envelope and back */
.xi-play:is([data-i^="spot-email"]) .xi-card{animation:xi-letter48 .95s cubic-bezier(.3,.7,.4,1)}
@keyframes xi-letter48{0%{transform:none}40%{transform:translateY(-6px)}70%{transform:translateY(1px)}100%{transform:none}}
@keyframes xi-unlock48{0%{transform:none}35%{transform:translateY(-5px)}60%{transform:translateY(1px)}100%{transform:none}}
/* try again later: once the dialog is up the minute hand makes three slow turns while the hour hand moves on a
   quarter, and the badge arrows turn with it; then everything rests where it started. A tap gives one quick turn. */
.xi-svg[data-i="spot-retry"] .xi-minute{animation:xi-turn 2.4s cubic-bezier(.45,.05,.55,.95) .9s 3}
.xi-svg[data-i="spot-retry"] .xi-hour{animation:xi-quarter 7.2s linear .9s}
.xi-svg[data-i="spot-retry"] .xi-spin{animation:xi-turn 2.4s cubic-bezier(.45,.05,.55,.95) .9s 3}
/* the tap uses its OWN keyframe names: a browser does not restart an animation whose name did not change, so
   sharing xi-turn with the idle turn left the minute hand still on every tap after the first */
.xi-play[data-i="spot-retry"] .xi-minute{animation:xi-turn-tap 1.25s cubic-bezier(.3,.6,.3,1)}
.xi-play[data-i="spot-retry"] .xi-hour{animation:xi-tick-tap 1.25s cubic-bezier(.3,.6,.3,1)}
.xi-play[data-i="spot-retry"] .xi-spin{animation:xi-spin-tap 1.25s cubic-bezier(.3,.6,.3,1)}
@keyframes xi-turn{to{transform:rotate(360deg)}}
@keyframes xi-quarter{0%{transform:none}92%{transform:rotate(90deg)}100%{transform:rotate(360deg)}}
@keyframes xi-turn-tap{to{transform:rotate(720deg)}}
@keyframes xi-tick-tap{0%{transform:none}70%{transform:rotate(60deg)}100%{transform:rotate(360deg)}}
@keyframes xi-spin-tap{to{transform:rotate(360deg)}}
/* delete all: the two tickets behind fan out, a beat apart, and settle back under the front one */
.xi-play[data-i="spot-tickets-remove-all"] .xi-fan1{transform-origin:20% 90%;animation:xi-fan1 .9s cubic-bezier(.3,.7,.4,1)}
.xi-play[data-i="spot-tickets-remove-all"] .xi-fan2{transform-origin:20% 90%;animation:xi-fan2 .9s cubic-bezier(.3,.7,.4,1) .06s}
@keyframes xi-fan1{0%{transform:none}35%{transform:rotate(-9deg) translate(-2px,-3px)}70%{transform:rotate(2deg)}100%{transform:none}}
@keyframes xi-fan2{0%{transform:none}35%{transform:rotate(-5deg) translate(-1px,-2px)}70%{transform:rotate(1.5deg)}100%{transform:none}}
/* ---- batch 3: the site-wide dialog pictures ---- */
/* success: the seal turns in and settles while the sparkles twinkle */
.xi-play[data-i="spot-success"] .xi-seal{transform-box:view-box;transform-origin:22px 23px;animation:xi-seal-in .9s cubic-bezier(.2,1.3,.4,1)}
@keyframes xi-seal-in{0%{transform:rotate(-40deg) scale(.7)}60%{transform:rotate(6deg) scale(1.06)}100%{transform:none}}
/* error: the page shakes "no"; the page behind follows a beat later */
.xi-play.xi-svg[data-i="spot-error"] .xi-all{animation:none}
.xi-play[data-i="spot-error"] .xi-page{animation:xi-page-no .7s ease-out}
.xi-play[data-i="spot-error"] .xi-back{animation:xi-page-no .7s ease-out .08s}
@keyframes xi-page-no{0%,100%{transform:none}15%{transform:translateX(-2.4px)}32%{transform:translateX(2.2px)}50%{transform:translateX(-1.4px)}68%{transform:translateX(.8px)}84%{transform:translateX(-.3px)}}
/* warning: the sign rocks on its bottom edge */
.xi-play.xi-svg[data-i="spot-warning"] .xi-all{transform-box:view-box;transform-origin:24px 42.6px;animation:xi-sign-rock 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-sign-rock{0%{transform:none}20%{transform:rotate(-7deg)}45%{transform:rotate(5deg)}68%{transform:rotate(-2.4deg)}86%{transform:rotate(1deg)}100%{transform:none}}
/* info: the back bubble pops up first, then the front one hops as it "speaks" */
.xi-play.xi-svg[data-i="spot-info"] .xi-all{animation:none}
.xi-play[data-i="spot-info"] .xi-bubbleB{transform-box:view-box;transform-origin:40px 26px;animation:xi-bubble-pop .8s cubic-bezier(.2,1.4,.4,1)}
.xi-play[data-i="spot-info"] .xi-bubbleF{transform-box:view-box;transform-origin:10px 44px;animation:xi-bubble-hop .9s cubic-bezier(.3,.6,.35,1) .12s}
@keyframes xi-bubble-pop{0%{transform:scale(.55)}60%{transform:scale(1.06)}100%{transform:none}}
@keyframes xi-bubble-hop{0%{transform:none}35%{transform:translateY(-2.6px) rotate(-3deg)}65%{transform:translateY(.4px) rotate(1deg)}100%{transform:none}}
/* confirm: the answer button is pressed */
.xi-play[data-i="spot-confirm"] .xi-yes{animation:xi-yes-press .9s cubic-bezier(.3,.6,.35,1) .2s}
@keyframes xi-yes-press{0%,100%{transform:none}30%{transform:scale(.84)}55%{transform:scale(1.06)}75%{transform:none}}
/* notification: the bell swings from its knob, the clapper lags behind it, the ring waves out on each side */
.xi-play.xi-svg[data-i="spot-notification"] .xi-all{animation:none}
.xi-play[data-i="spot-notification"] .xi-bell{transform-box:view-box;transform-origin:22px 5px;animation:xi-bell-swing 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="spot-notification"] .xi-clap{transform-box:view-box;transform-origin:22px 5px;animation:xi-clap-swing 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="spot-notification"] :is(.xi-waveL,.xi-waveR){transform-box:view-box;transform-origin:22px 21px;animation:xi-ring-out 1.1s ease-out}
.xi-play[data-i="spot-notification"] .xi-waveL{animation-delay:.18s}
@keyframes xi-bell-swing{0%{transform:none}16%{transform:rotate(16deg)}36%{transform:rotate(-13deg)}56%{transform:rotate(8deg)}76%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes xi-clap-swing{0%{transform:none}22%{transform:rotate(22deg)}42%{transform:rotate(-18deg)}62%{transform:rotate(11deg)}82%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes xi-ring-out{0%,100%{transform:none}30%{transform:scale(1.12)}60%{transform:scale(.97)}}
/* ---- batch 3, money ---- */
/* withdrawal: the note lifts out of the wallet and settles back */
.xi-play:is([data-i="spot-withdraw-confirm"],[data-i="spot-withdraw-requested"]) .xi-note{transform-box:view-box;transform-origin:21px 14px;animation:xi-note-lift 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-note-lift{0%{transform:none}40%{transform:translateY(-3.6px) rotate(-4deg)}70%{transform:translateY(.6px) rotate(1deg)}100%{transform:none}}
/* wait: the hourglass is turned over, and back */
.xi-play.xi-svg[data-i="spot-wait"] .xi-all{transform-box:view-box;transform-origin:22px 24px;animation:xi-hourglass-turn 1.3s cubic-bezier(.5,.05,.3,1)}
@keyframes xi-hourglass-turn{0%{transform:none}38%,55%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
/* bonus: the lid pops up off the box and lands */
.xi-play[data-i="spot-bonus"] .xi-lid{transform-box:view-box;transform-origin:21px 21px;animation:xi-lid-pop .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-lid-pop{0%{transform:none}35%{transform:translateY(-5px) rotate(-7deg)}62%{transform:translateY(.5px) rotate(2deg)}80%{transform:translateY(-.8px)}100%{transform:none}}
/* a field is not valid: that field shakes "no" */
.xi-play.xi-svg[data-i="spot-field-invalid"] .xi-all{animation:none}
.xi-play[data-i="spot-field-invalid"] .xi-field{animation:xi-page-no .7s ease-out .1s}
/* delete: the lid lifts on its left end */
.xi-play[data-i="spot-delete"] .xi-lid{transform-box:view-box;transform-origin:7px 13.6px;animation:xi-bin-lid .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-bin-lid{0%{transform:none}35%{transform:rotate(-18deg) translateY(-1px)}65%{transform:rotate(3deg)}100%{transform:none}}
/* coins to gems: the arrow pushes on, the gem pops */
.xi-play[data-i="spot-gem-converted"] .xi-arrow{animation:xi-arrow-push .8s ease-in-out}
.xi-play[data-i="spot-gem-converted"] .xi-gem{transform-box:view-box;transform-origin:32.6px 31px;animation:xi-gem-pop .9s cubic-bezier(.2,1.5,.4,1) .25s}
@keyframes xi-arrow-push{0%,100%{transform:none}45%{transform:translateX(3px)}}
@keyframes xi-gem-pop{0%{transform:none}40%{transform:scale(1.16) rotate(-6deg)}70%{transform:scale(.97)}100%{transform:none}}
/* ---- collection 05: interface icons, a short answer to a tap ---- */
.xi-play[data-i="nav-sports"] .xi-shoe{transform-box:view-box;transform-origin:21px 20px;animation:xi-step .6s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-step{0%,100%{transform:none}35%{transform:rotate(-12deg)}70%{transform:rotate(3deg)}}
.xi-play[data-i="nav-tickets"] .xi-front{transform-box:view-box;transform-origin:6px 20px;animation:xi-fan-front .6s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="nav-tickets"] .xi-back{transform-box:view-box;transform-origin:6px 20px;animation:xi-fan-back .6s cubic-bezier(.3,.6,.35,1)}
/* v4: the front ticket lifts off the one behind; the single ticket (choice B) hops */
@keyframes xi-fan-front{0%,100%{transform:none}40%{transform:translateY(-1.8px) rotate(-4deg)}}
@keyframes xi-fan-back{0%,100%{transform:none}40%{transform:translate(.8px,.6px) rotate(3deg)}}
.xi-play[data-i="nav-tickets-check"] .xi-front{transform-box:view-box;transform-origin:12px 18px;animation:xi-fan-front .6s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="match-markets"] .xi-plus{transform-box:view-box;transform-origin:12px 12px;animation:xi-quarter-turn .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="match-stats"] :is(.xi-bar1,.xi-bar2,.xi-bar3){transform-box:view-box;transform-origin:12px 21px;animation:xi-bars-grow .6s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="match-stats"] .xi-bar2{animation-delay:.06s}
.xi-play[data-i="match-stats"] .xi-bar3{animation-delay:.12s}
@keyframes xi-bars-grow{0%{transform:scaleY(.4)}60%{transform:scaleY(1.08)}100%{transform:none}}
.xi-play[data-i="match-open"] .xi-open{animation:xi-nudge-right .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="nav-sports-ball"] .xi-shoe{transform-box:view-box;transform-origin:12px 12px;animation:xi-ball-roll .7s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-ball-roll{0%{transform:none}100%{transform:rotate(360deg)}}
.xi-play[data-i="nav-games"] .xi-all{transform-box:view-box;transform-origin:12px 21px;animation:xi-die-hop .65s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-die-hop{0%,100%{transform:none}35%{transform:translateY(-3px) rotate(-14deg)}65%{transform:translateY(0) rotate(4deg) scale(1.04,.96)}}
.xi-play[data-i="nav-profile"] .xi-head{animation:xi-nod .55s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-nod{0%,100%{transform:none}40%{transform:translateY(-1.6px)}}
/* menu → cross: data-xi-state="open" on the icon turns the three bars into a cross, and back when removed.
   The top bar swings down, the middle one draws in, the short bottom one grows and swings up. */
.xi-svg[data-i="menu"] :is(.xi-bar1,.xi-bar2,.xi-bar3){transform-box:view-box;transition:transform .38s cubic-bezier(.3,.7,.35,1)}
.xi-svg[data-i="menu"] .xi-bar1{transform-origin:12px 6.2px}
.xi-svg[data-i="menu"] .xi-bar2{transform-origin:12px 12px}
.xi-svg[data-i="menu"] .xi-bar3{transform-origin:9px 17.8px}
.xi[data-xi-state="open"] .xi-svg[data-i="menu"] .xi-bar1{transform:translateY(5.8px) rotate(45deg)}
.xi[data-xi-state="open"] .xi-svg[data-i="menu"] .xi-bar2{transform:scaleX(0)}
.xi[data-xi-state="open"] .xi-svg[data-i="menu"] .xi-bar3{transform:translate(3px,-5.8px) rotate(-45deg) scaleX(1.5)}
.xi-play[data-i="menu"] .xi-bar1{animation:xi-bar-a .55s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="menu"] .xi-bar2{animation:xi-bar-b .55s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="menu"] .xi-bar3{animation:xi-bar-c .55s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-bar-a{0%,100%{transform:none}40%{transform:translateX(2px)}}
@keyframes xi-bar-b{0%,100%{transform:none}40%{transform:translateX(-2px)}}
@keyframes xi-bar-c{0%,100%{transform:none}40%{transform:translateX(5px)}}
.xi-play:is([data-i="balance-show"],[data-i="balance-hide"]) .xi-eye{transform-box:view-box;transform-origin:12px 12px;animation:xi-blink .45s ease-in-out}
@keyframes xi-blink{0%,100%{transform:none}45%{transform:scaleY(.12)}}
.xi-play:is([data-i="add-funds"],[data-i="close"]) .xi-all{transform-box:view-box;transform-origin:12px 12px;animation:xi-quarter-turn .5s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-quarter-turn{0%{transform:none}100%{transform:rotate(90deg)}}
.xi-play[data-i="back"] .xi-arrow{animation:xi-nudge-left .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="chevron-left"] .xi-chev{animation:xi-nudge-left .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="chevron-right"] .xi-chev{animation:xi-nudge-right .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="chevron-down"] .xi-chev{animation:xi-nudge-down .5s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="chevron-up"] .xi-chev{animation:xi-nudge-up .5s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-nudge-left{0%,100%{transform:none}40%{transform:translateX(-2.4px)}}
@keyframes xi-nudge-right{0%,100%{transform:none}40%{transform:translateX(2.4px)}}
@keyframes xi-nudge-down{0%,100%{transform:none}40%{transform:translateY(2.4px)}}
@keyframes xi-nudge-up{0%,100%{transform:none}40%{transform:translateY(-2.4px)}}
.xi-play[data-i="filter"] .xi-knob1{animation:xi-knob-l .7s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="filter"] .xi-knob2{animation:xi-knob-r .7s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="filter"] .xi-knob3{animation:xi-knob-l .7s cubic-bezier(.3,.6,.35,1) .08s}
@keyframes xi-knob-l{0%,100%{transform:none}45%{transform:translateX(-4.4px)}}
@keyframes xi-knob-r{0%,100%{transform:none}45%{transform:translateX(5px)}}
.xi-play[data-i="search"] .xi-all{transform-box:view-box;transform-origin:10.5px 10.5px;animation:xi-look .6s ease-in-out}
@keyframes xi-look{0%,100%{transform:none}30%{transform:translate(-1px,-1px) rotate(-10deg)}65%{transform:translate(1px,0) rotate(8deg)}}
.xi-play:is([data-i="favourite"],[data-i="favourite-on"]) .xi-star{transform-box:view-box;transform-origin:12px 12.8px;animation:xi-star-pop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes xi-star-pop{0%{transform:scale(.7) rotate(-36deg)}60%{transform:scale(1.18) rotate(8deg)}100%{transform:none}}
.xi-play[data-i="locked"] .xi-lid{animation:xi-shackle-lift .6s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-shackle-lift{0%,100%{transform:none}40%{transform:translateY(-2.2px)}}
.xi-play[data-i="match-more"] .xi-up{animation:xi-nudge-up .55s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="match-more"] .xi-down{animation:xi-nudge-down .55s cubic-bezier(.3,.6,.35,1) .06s}
.xi-play[data-i="rate-up"] .xi-tri{animation:xi-tri-up .6s cubic-bezier(.3,.6,.35,1) 2}
.xi-play[data-i="rate-down"] .xi-tri{animation:xi-tri-down .6s cubic-bezier(.3,.6,.35,1) 2}
@keyframes xi-tri-up{0%,100%{transform:none}45%{transform:translateY(-3px)}}
@keyframes xi-tri-down{0%,100%{transform:none}45%{transform:translateY(3px)}}
/* ---- batch 4: games and the remaining pages ---- */
/* win: the cup jumps and lands */
.xi-play.xi-svg[data-i="spot-game-win"] .xi-all{transform-box:view-box;transform-origin:22px 43px;animation:xi-cup-jump 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-cup-jump{0%{transform:none}30%{transform:translateY(-6px) rotate(-5deg)}55%{transform:translateY(0) scale(1.06,.92)}72%{transform:translateY(-1.6px) rotate(2deg)}100%{transform:none}}
/* better luck: the clover sways on its stem */
.xi-play.xi-svg[data-i="spot-game-lose"] .xi-all{transform-box:view-box;transform-origin:28.4px 44px;animation:xi-clover-sway 1.2s ease-in-out}
@keyframes xi-clover-sway{0%,100%{transform:none}25%{transform:rotate(-9deg)}55%{transform:rotate(6deg)}80%{transform:rotate(-2deg)}}
/* round closed: the hand runs a full turn */
.xi-play[data-i="spot-round-closed"] .xi-hand{animation:xi-hand-lap .9s cubic-bezier(.4,.1,.3,1)}
@keyframes xi-hand-lap{to{transform:rotate(360deg)}}
/* chips: the standing chip spins on the spot */
.xi-play:is([data-i="spot-chips-placed"],[data-i="spot-chips-limit"]) .xi-chip{transform-box:view-box;transform-origin:28px 19px;animation:xi-chip-spin .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-chip-spin{0%{transform:none}45%{transform:scaleX(-1)}100%{transform:none}}
/* invalid selection: the picked places shake "no" */
.xi-play.xi-svg[data-i="spot-selection-invalid"] .xi-all{animation:none}
.xi-play[data-i="spot-selection-invalid"] .xi-pick{animation:xi-page-no .7s ease-out}
/* play for real: the pad buzzes */
.xi-play.xi-svg[data-i="spot-play-real"] .xi-all{transform-box:view-box;transform-origin:22px 28px;animation:xi-pad-buzz .7s linear}
@keyframes xi-pad-buzz{0%,100%{transform:none}10%{transform:translate(-.8px,.4px) rotate(-3deg)}20%{transform:translate(.8px,-.4px) rotate(3deg)}30%{transform:translate(-.6px,.3px) rotate(-2deg)}40%{transform:translate(.6px,-.3px) rotate(2deg)}55%{transform:none}}
/* log in: the arrow pushes in through the door */
.xi-play[data-i="spot-login"] .xi-arrow{animation:xi-arrow-in .9s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-arrow-in{0%,100%{transform:none}40%{transform:translateX(4px)}65%{transform:translateX(-.8px)}}
/* cookie: the crumbs drop from the bite */
.xi-play[data-i="spot-cookie"] .xi-crumb{animation:xi-crumb-drop 1s cubic-bezier(.5,0,.6,1)}
@keyframes xi-crumb-drop{0%,100%{transform:none}55%{transform:translate(1px,5px)}}
/* message sent: the plane takes off and glides back */
.xi-play.xi-svg[data-i="spot-message-sent"] .xi-all{animation:none}
.xi-play[data-i="spot-message-sent"] .xi-plane{animation:xi-plane-off 1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-plane-off{0%,100%{transform:none}40%{transform:translate(3.4px,-3.4px)}70%{transform:translate(-.6px,.6px)}}
/* offline: the waves try one after another */
.xi-play.xi-svg[data-i="spot-offline"] .xi-all{animation:none}
.xi-play[data-i="spot-offline"] :is(.xi-wave1,.xi-wave2,.xi-wave3){transform-box:view-box;transform-origin:22px 40px;animation:xi-wave-try .8s ease-out}
.xi-play[data-i="spot-offline"] .xi-wave2{animation-delay:.12s}
.xi-play[data-i="spot-offline"] .xi-wave3{animation-delay:.24s}
@keyframes xi-wave-try{0%,100%{transform:none}40%{transform:scale(1.07)}}
/* maintenance: the gear turns one tooth further */
.xi-play[data-i="spot-maintenance"] .xi-gear{transform-box:view-box;transform-origin:29px 19px;animation:xi-gear-step 1.1s cubic-bezier(.4,.1,.3,1)}
@keyframes xi-gear-step{0%{transform:none}70%{transform:rotate(50deg)}100%{transform:rotate(45deg)}}
/* notifications, all caught up: the bell rings once, softly */
.xi-play[data-i="spot-all-caught-up"] .xi-bell{transform-box:view-box;transform-origin:22px 5px;animation:xi-bell-swing 1.1s cubic-bezier(.3,.6,.35,1)}
.xi-play[data-i="spot-all-caught-up"] .xi-clap{transform-box:view-box;transform-origin:22px 5px;animation:xi-clap-swing 1.1s cubic-bezier(.3,.6,.35,1)}
@keyframes xi-drop48{0%{transform:none;opacity:1}40%{transform:translateY(10px);opacity:1}55%{transform:translateY(12px);opacity:0}56%{transform:translateY(-8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes xi-rise48{0%{transform:translateY(12px);opacity:0}45%{transform:translateY(-3px);opacity:1}100%{transform:none}}
@keyframes xi-bounce48{0%{transform:none}30%{transform:translateY(-7px)}55%{transform:translateY(0) scale(1.08,.9)}72%{transform:translateY(-2px) scale(.97,1.03)}100%{transform:none}}
@keyframes xi-pop{0%{transform:scale(.45);opacity:.15}100%{transform:none;opacity:1}}
@keyframes xi-bounce{0%{transform:none}30%{transform:translateY(-3.5px)}55%{transform:translateY(0) scale(1.08,.9)}72%{transform:translateY(-1px) scale(.97,1.03)}100%{transform:none}}
@keyframes xi-swing{0%{transform:none}30%{transform:rotate(-14deg)}60%{transform:rotate(5deg)}100%{transform:none}}
@keyframes xi-puck{0%,30%{transform:none}65%{transform:translateX(-3px)}100%{transform:none}}
@keyframes xi-wobble{0%{transform:none}20%{transform:rotate(-12deg) translateY(-2px)}45%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes xi-jitter{0%,100%{transform:none}10%{transform:translate(-.8px,.4px) rotate(-3deg)}20%{transform:translate(.8px,-.4px) rotate(3deg)}30%{transform:translate(-.6px,.3px) rotate(-2deg)}40%{transform:translate(.6px,-.3px) rotate(2deg)}50%{transform:none}}
@keyframes xi-tilt{0%{transform:none}25%{transform:rotate(-11deg) scale(1.06)}55%{transform:rotate(7deg)}80%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes xi-badge{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:none}}
@keyframes xi-drop{0%{transform:none;opacity:1}40%{transform:translateY(5px);opacity:1}55%{transform:translateY(6px);opacity:0}56%{transform:translateY(-4px);opacity:0}100%{transform:none;opacity:1}}
@keyframes xi-rise{0%{transform:translateY(6px);opacity:0}45%{transform:translateY(-1.6px);opacity:1}100%{transform:none}}
@keyframes xi-coin{0%{transform:none}35%{transform:translate(1.6px,-2.2px)}65%{transform:translate(-.4px,.4px)}100%{transform:none}}
@keyframes xi-shackle{0%{transform:translateY(-2px)}55%{transform:translateY(.4px)}100%{transform:none}}
@keyframes xi-fly{0%{transform:none}35%{transform:translate(2px,-2px)}65%{transform:translate(-.4px,.4px)}100%{transform:none}}
@keyframes xi-live{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.xi-svg,.xi-svg *{animation:none!important}}