.bp-loading { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; pointer-events: none; }
.bp-app-startup { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; background: #07152c; color: #f4fbff; font: 16px/1.5 system-ui, sans-serif; text-align: center; }
.bp-app-startup a { color: #73e8de; margin-left: 1rem; }
.bp-app-startup button { padding: .5rem 1rem; font: inherit; cursor: pointer; }
.bp-loading--dots { margin-inline: .5rem; }
.bp-loading-host > .bp-loading--dots { position: absolute; inset: .5rem .5rem auto auto; margin: 0; color: var(--bp-loading-ink); }
.bp-loading-button { color: transparent !important; }
.bp-loading-button > :not(.bp-loading) { visibility: hidden; }
.bp-loading-button > .bp-loading--dots { inset: 0; }
.detail-leaderboard-loading > .bp-loading--dots { inset: 0; }
.bp-loading-react-button, [data-bp-loading-button] { position: relative; }
.bp-loading-react-button[aria-busy="true"] > :not(.bp-loading), [data-bp-loading-button][aria-busy="true"] > :not(.bp-loading) { visibility: hidden; }
.bp-loading-react-button > .bp-loading, [data-bp-loading-button] > .bp-loading { position: absolute; inset: 0; margin: 0; }
.bp-loading--puzzle { display: flex; flex-direction: column; margin: 1rem auto; opacity: 0; animation: bp-loading-appear 200ms ease-out 150ms forwards; }
.bp-loading .bp-loading-puzzle { display: block; width: 80px; height: 80px; object-fit: contain; transform-origin: center; animation: bp-loading-spin 1700ms linear 350ms infinite; }
.bp-loading-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bp-loading-dots { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; height: 1em; }
.bp-loading-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: bp-loading-bounce 900ms ease-in-out infinite; }
.bp-loading-dots i:nth-child(2) { animation-delay: 300ms; }
.bp-loading-dots i:nth-child(3) { animation-delay: 600ms; }
/* 200ms acceleration, 1000ms at speed, 200ms deceleration, 300ms rest.
   The middle segment covers 900 degrees at 900 degrees/second. */
@keyframes bp-loading-spin {
  0% { transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  11.7647% { transform: rotate(90deg) scale(1.12); animation-timing-function: linear; }
  70.5882% { transform: rotate(990deg) scale(1.12); animation-timing-function: cubic-bezier(0, 0, .5, 1); }
  82.3529%, 100% { transform: rotate(1080deg) scale(1); }
}
@keyframes bp-loading-appear { to { opacity: 1; } }
@keyframes bp-loading-bounce { 0%, 33.3333%, 100% { transform: translateY(0); } 16.6667% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .bp-loading--puzzle { opacity: 1; animation: none; }
  .bp-loading .bp-loading-puzzle { animation: none; transform: none; }
}