/* Look & feel layer (src/run/hud/fx.js, characters.js, themes.js): celebrations, the speed gauge and goal-ball motion.
   Loaded after game.css; only adds classes or refines existing ones. */

/* Your dot on the race bar matches your runner (blue, like the HUD's --you) */
.progress .dots i.me::before{background:var(--you)}

/* Goal ball: a new goal rolls in from the right with one turn */
.goal.pop{animation:wr-roll .38s cubic-bezier(.3,1.6,.5,1)}
.goal.pop span{animation:none}
@keyframes wr-roll{0%{transform:translateX(56px) rotate(360deg) scale(.75); opacity:.2}100%{transform:none; opacity:1}}
/* (while the bar's tiles fly in, the new goal shows faint and fades up as they land: never an empty pill, play test
   2026-11-12, confirm pass B wall/k4.jpg: the pill stood empty about 0.4 s at every goal change) */
.goal > span{transition:opacity .4s ease}
.goal.wr-wait > span{opacity:.3}
.goal.wr-gold{box-shadow:0 0 0 4px var(--gold), 0 0 0 7px color-mix(in srgb, var(--gold) 35%, transparent), 0 6px 14px rgba(0,0,0,.28)}

/* Tiles flying from the bar into the ball */
.wr-tile{position:fixed; box-sizing:border-box; display:grid; place-items:center; border-radius:12px; border:2px solid var(--card-edge); border-bottom-width:4px;
  background:var(--card); color:var(--ball-ink); font:600 23px/1 var(--font-display); white-space:nowrap; pointer-events:none; will-change:transform}
.wr-tile.op{border-radius:50%; background:var(--op); border-color:var(--op-edge); color:var(--on-op)}

/* Wrong formula: a short shake (240 ms, ±4 px) and a chip with what it made */
.exprbar.bad{animation:wr-shake .24s ease-out}
@keyframes wr-shake{17%{transform:translateX(-4px)}33%{transform:translateX(4px)}50%{transform:translateX(-3px)}67%{transform:translateX(2px)}83%{transform:translateX(-1px)}}
.wr-chip{position:fixed; transform:translate(-50%,-100%); padding:4px 11px; border-radius:999px; background:var(--panel); border:2px solid var(--bad);
  color:var(--bad); font:700 18px/1.1 var(--font-display); white-space:nowrap; pointer-events:none; animation:wr-chip 1.4s ease forwards; box-shadow:0 4px 12px rgba(0,0,0,.15)}
@keyframes wr-chip{0%{opacity:0; transform:translate(-50%,-80%) scale(.8)}12%{opacity:1; transform:translate(-50%,-100%) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%,-115%)}}

/* Speed gauge: an arc with a ×-multiplier, in the #speedo slot under the ball */
.speedo{width:72px; height:auto; background:none; overflow:visible; border-radius:0; margin-top:0}
.speedo > i{display:none}
.wr-gauge{display:block; width:72px; height:50px; overflow:visible; transform-origin:50% 60%}
.wr-gauge .trk,.wr-gauge .val{fill:none; stroke-width:6; stroke-linecap:round}
.wr-gauge .plate{fill:var(--panel); stroke:var(--panel-line); stroke-width:1}
.wr-gauge .trk{stroke:color-mix(in srgb, var(--ink) 16%, transparent)}
.wr-gauge .val{stroke:url(#wrg); transition:stroke-dasharray .12s linear}
.wr-gauge text{font:700 15px/1 var(--font-display); fill:var(--ink); paint-order:stroke; stroke:var(--panel); stroke-width:3px}
.wr-gauge.wr-pulse{animation:wr-pulse .2s ease-out}
@keyframes wr-pulse{50%{transform:scale(1.08)}}
@media (min-aspect-ratio: 5/4){ .goalwrap .speedo{display:block} }
@media (max-height:700px){ .wr-gauge{width:60px; height:42px} .speedo{width:60px} }

@media (prefers-reduced-motion: reduce){ .goal.pop,.wr-gauge.wr-pulse,.wr-chip,.exprbar.bad{animation:none!important} }