/* Football stage geometry inside the 390×446 stage host. Art comes from the theme. */
.football-stage{position:absolute;inset:0}
.fs-pitch{position:absolute;left:0;right:0;top:6px;height:400px}
.fs-track{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;opacity:.85;pointer-events:none}
.football-stage.running .fs-track{animation:fs-pulse 1.2s ease-in-out infinite alternate}
@keyframes fs-pulse{to{opacity:1;filter:brightness(1.35)}}
.fs-hub{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;display:grid;place-items:center;z-index:2}

.fs-crest{--sr-pos:translate(-50%,-50%) rotate(var(--a)) translateY(-150px) rotate(calc(-1*var(--a)));left:50%;top:50%;width:76px;height:76px;transform:var(--sr-pos);z-index:3;transition:filter .15s,transform .12s}
.fs-crest .sr-market-art{filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
.fs-crest.chase{filter:brightness(1.35) drop-shadow(0 0 10px var(--sr-glow,#fff2a8)) drop-shadow(0 0 4px #fff);transform:var(--sr-pos) scale(1.1)}
.fs-crest.mine .sr-market-art{filter:drop-shadow(0 0 6px var(--sr-accent,#ffd447))}
.football-stage.celebrate .fs-crest:not(.lit){filter:brightness(.55) saturate(.6)}
.fs-crest.lit{transform:var(--sr-pos) scale(1.16);z-index:4;animation:fs-lit .7s ease-in-out infinite alternate}
@keyframes fs-lit{from{filter:brightness(1.1) drop-shadow(0 0 6px var(--sr-glow,#fff2a8))}to{filter:brightness(1.45) drop-shadow(0 0 16px var(--sr-accent,#ffd447))}}

/* the arm turns the ball round the centre spot; the ball rolls out on it and is shot at the winner */
.fs-ball-arm{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a,0deg));transition:transform var(--step,0ms) ease-out;z-index:5;pointer-events:none}
.fs-ball{position:absolute;left:-27px;top:-27px;width:54px;height:54px;transform:translateY(0);transition:transform .35s ease-out,opacity .2s;opacity:0;filter:drop-shadow(0 5px 4px rgba(0,0,0,.5))}
/* the centre spot belongs to the countdown; the ball only shows while it runs and shoots */
.football-stage.running .fs-ball{opacity:1;transform:translateY(-94px);animation:fs-roll .5s linear infinite}
/* the shot flies onto the winning crest, then sinks into it so the emblem stays visible */
.football-stage.shot .fs-ball{opacity:0;transform:translateY(-150px) scale(.4);animation:fs-shot .9s cubic-bezier(.25,1,.5,1) both}
@keyframes fs-shot{0%{opacity:1;transform:translateY(-94px)}40%{opacity:1;transform:translateY(-150px) scale(.95)}100%{opacity:0;transform:translateY(-150px) scale(.4)}}
@keyframes fs-roll{to{rotate:360deg}}

.fs-glow{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;opacity:0;transform:rotate(var(--a,0deg)) translateY(-150px) rotate(calc(-1*var(--a,0deg)));z-index:2;pointer-events:none}
.fs-glow.on{opacity:1;animation:fs-glow 1.4s linear infinite}
@keyframes fs-glow{to{transform:rotate(var(--a,0deg)) translateY(-150px) rotate(calc(-1*var(--a,0deg) + 360deg))}}

.fs-fx{position:absolute;inset:-20px;pointer-events:none;z-index:6}
.fs-firework{position:absolute;width:150px;height:150px;opacity:0;animation:fs-burst 1.1s ease-out calc(var(--i)*.28s) 2 both}
.fs-firework:nth-child(1){left:4%;top:6%}.fs-firework:nth-child(2){right:4%;top:14%}.fs-firework:nth-child(3){left:32%;top:-4%}
@keyframes fs-burst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.fs-spark{position:absolute;left:50%;top:50%;width:24px;height:24px;opacity:0;animation:fs-spark 1s ease-out calc(var(--i)*.06s) both}
@keyframes fs-spark{0%{transform:rotate(calc(var(--i)*36deg)) translateY(0) scale(.4);opacity:1}100%{transform:rotate(calc(var(--i)*36deg)) translateY(-180px) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fs-ball-arm,.fs-ball{transition:none}
  .football-stage.running .fs-ball,.football-stage.shot .fs-ball,.fs-crest.lit,.fs-glow.on,.football-stage.running .fs-track{animation:none}
}