.scene-sprite { width: 64px; height: 64px; display: block; object-fit: contain; image-rendering: pixelated; user-select: none; pointer-events: none; }
.game-effects-paused .game-stage *, .game-effects-paused .game-stage *::before, .game-effects-paused .game-stage *::after { animation-play-state: paused !important; }
.race-board { --race-beast-size: 72px; --race-finish-inset: 16px; gap: 12px; }
.race-course-heading { display: flex; justify-content: space-between; gap: 12px; padding: 0 12px; color: #bcb098; font-size: 12px; }
.race-board button { position: relative; grid-template-columns: 26px 42px minmax(100px,1fr) 48px; gap: 10px; min-height: 105px; padding: 7px 12px; }
.race-board .beast-token { width: auto; height: auto; border: 0; background: none; color: #9b8860; font-variant-numeric: tabular-nums; font-size: 12px; }
.race-board [data-beast="azure-dragon"] { --beast-color: #70d8bc; }
.race-board [data-beast="white-tiger"] { --beast-color: #dee4ea; --race-front-width: calc(var(--race-beast-size) * .90625); }
.race-board [data-beast="vermillion-bird"] { --beast-color: #f38e5f; }
.race-board [data-beast="black-tortoise"] { --beast-color: #a6bc8a; }
.race-board .race-track { display: block; height: 88px; overflow: hidden; background: linear-gradient(transparent 84%, #54472d 85%, #252319 87%, transparent 89%); }
.race-track::after { display: none; }
/* 100% places the sprite's visible leading edge at the near edge of the
   chequered finish. The tiger has three transparent pixels in its 32px tile. */
.race-distance { position: absolute; inset: 0 calc(var(--race-front-width, var(--race-beast-size)) + var(--race-finish-inset)) 0 0; }
.race-runner { position: absolute; inset: 0; transform: translate3d(calc(min(var(--race-position,0%), 100%) + var(--race-overrun,0px)),0,0); }
.race-runner .race-beast { position: absolute; left: 0; bottom: 6px; width: var(--race-beast-size); height: var(--race-beast-size); filter: drop-shadow(0 5px 2px #0009); }
.race-track .race-trail { position: absolute; inset: auto 32px 8px 0; height: 3px; transform: scaleX(var(--race-fill,0)); transform-origin: left; background: var(--beast-color); opacity: .6; }
.race-finish { position: absolute; right: 4px; top: 18px; width: calc(var(--race-finish-inset) - 4px); height: 46px; opacity: .8; background: conic-gradient(#d2c29c 25%,#26261f 0 50%,#d2c29c 0 75%,#26261f 0) 0 0/8px 8px; }
.race-status { position: relative; color: #cbbd9f; font-size: 11px; white-space: pre-line; line-height: 1.7; text-align: center; font-variant-numeric: tabular-nums; }
.race-board button.is-winner .race-status { color: #ffe394; }
.race-dust { position: absolute; bottom: 9px; left: 0; width: 28px; height: 6px; border-radius: 50%; background: #aa93664a; opacity: 0; }
.race-board.is-running .race-beast { animation: beast-stride 260ms ease-in-out infinite alternate; }
.race-board.is-running .runner-vermillion-bird .race-beast { animation: bird-soar 600ms ease-in-out infinite alternate; }
.race-board.is-running .runner-black-tortoise .race-beast { animation-duration: 430ms; }
.race-board.is-running .race-dust { animation: race-dust 460ms linear infinite; }
.race-board.is-settled .race-runner { transition: none; }
.race-board.is-settled button.is-winner .race-beast { animation: beast-victory 650ms ease-out; }
@keyframes beast-stride { from { transform: translateY(1px); } to { transform: translateY(-5px); } }
@keyframes bird-soar { from { transform: translateY(-2px); } to { transform: translateY(-6px); } }
.race-board[data-motion-paused="true"] * { animation-play-state: paused !important; }
@keyframes race-dust { from { transform: translateX(4px) scale(.6); opacity: .7; } to { transform: translateX(-20px) scale(1.8); opacity: 0; } }
@keyframes beast-victory { 45% { transform: translateY(-10px); } }
.wallet-value { position: relative; }
.wallet-value .wallet-balance-number { min-height: 1.25em; display: flex; align-items: baseline; line-height: 1.25; }
.wallet-value .wallet-balance-number span { margin: 0; color: inherit; font: inherit; line-height: 1; }
.wallet-value .wallet-digit { display: inline-block; height: 1em; overflow: hidden; width: .64em; }
.wallet-value .wallet-digit-strip { display: block; }
.wallet-value .wallet-digit-strip > span { height: 1em; display: block; text-align: center; }
.wallet-value .wallet-digit-separator { display: inline-block; }
.wallet-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.wallet-value .wallet-caption > span { margin: 0; }
.wallet-effects-toggle { min-height: 28px; padding: 3px 7px; border: 1px solid #69562b; border-radius: 2px; background: #19160f; color: #e3c779; font-size: 11px; cursor: pointer; }
.wallet-effects-toggle:hover { background: #302612; border-color: #b58e35; }
.wallet-effects-toggle[aria-pressed="false"] { color: #b4ab9a; background: #141414; border-color: #494336; }
.wallet-value.is-receiving .wallet-balance-number { color: #fff0a8; }
.wallet-reward { position: absolute; right: 0; top: -19px; color: #ffdc72; font-size: 13px; white-space: nowrap; }
.mobile-wallet-value .wallet-reward { position: static; margin-block: 0; margin-inline-start: auto; color: #ffdc72; font-size: 12px; line-height: 16px; }
.wallet-flight-layer { position: fixed; z-index: 100; inset: 0; pointer-events: none; overflow: hidden; }
.flying-coin { position: absolute; top: -24px; left: -24px; display: block; width: 48px; height: 48px; }
.flying-coin .scene-sprite { width: 48px; height: 48px; filter: drop-shadow(0 4px 3px #000b); }
.coin-award { position: absolute; z-index: 1; transform: translate(-50%,-100%); padding: 10px 18px; background: #19130fed; color: #ffe59c; text-align: center; white-space: nowrap; }
.coin-award small { display: block; font-size: 12px; color: #efc86d; }
.coin-award strong { display: block; font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.4; }
@media (max-width: 640px) {
  .race-board { --race-beast-size: 58px; gap: 9px; }
  .race-board button { grid-template-columns: 20px 30px minmax(90px,1fr) 42px; gap: 6px; min-height: 89px; padding: 4px 6px; }
  .race-board b { font-size: 12px; }
  .race-board .race-track { height: 76px; }
  .race-course-heading { font-size: 11px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .race-board .race-dust, .race-board .race-beast { animation: none !important; }
  .race-board.is-settled .race-runner { transition: none; }
}