#LoaderBoot {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%, #12251f 0%, #081310 38%, #04090a 74%);
  color: #d0ed8e; opacity: 1;
  font-family: system-ui, -apple-system, sans-serif;
  transition: opacity 180ms ease-out;
}
#LoaderBoot[hidden], #LoaderBoot [hidden] { display: none; }
#LoaderBoot.leaving { opacity: 0; }
#LoaderBootContent {
  position: absolute; left: 50%; top: 50%; transform-origin: center;
  width: 100%; height: 100%; transform: translate(-50%, -50%);
}
#LoaderBootStatus {
  position: absolute; top: 64%; left: 10%; width: 80%; text-align: center;
  font-size: 22px; line-height: 1.5; color: #a9b9ae;
}
#LoaderBootProgress {
  position: absolute; top: 71%; left: 41%; width: 18%; height: 3px;
  border-radius: 5px; background: #25332c; overflow: hidden;
}
#LoaderBootFill { height: 100%; border-radius: inherit; background: #d0ed8e; }
#LoaderBoot[data-progress="indeterminate"] #LoaderBootFill {
  width: 30%; animation: loader-progress 1.3s ease-in-out infinite;
}
#LoaderBootError { position: absolute; top: 61%; left: 12%; width: 76%; text-align: center; font-size: 23px; }
#LoaderBootErrorText { margin: 0 0 24px; line-height: 1.5; }
#LoaderBootError button {
  margin: 0 8px; padding: 12px 30px; min-height: 48px;
  border: 1px solid #d0ed8e; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
#LoaderBootError button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#LoaderBootRetry { background: #d0ed8e !important; color: #142019 !important; }
@keyframes loader-progress { from { transform: translateX(-110%); } to { transform: translateX(440%); } }

/* One 3.6s timeline: rally → club → seed drop → rebound.
   The loop seam is inside a constant-velocity flight, never a hidden reset. */
#LoaderBootMotion {
  --boot-cycle: 3.6s;
  --boot-ease: cubic-bezier(.4, 0, .2, 1);
  position: absolute; left: 50%; top: 46%; width: 280px; height: 186.667px;
  overflow: visible; transform: translate(-50%, -50%);
  fill: #d0ed8e; pointer-events: none;
}
#LoaderBootMotion * { transform-origin: 0 0; }
#LoaderBoot[data-orientation="portrait"] #LoaderBootMotion { width: 320px; height: 213.333px; }
#LoaderBoot[data-orientation="portrait"] #LoaderBootStatus { font-size: 28px; }
#LoaderBoot[data-orientation="portrait"] #LoaderBootProgress { left: 32%; width: 36%; }
.boot-tile rect { animation: boot-round var(--boot-cycle) var(--boot-ease) infinite; rx: 18px; ry: 4px; }
.boot-tile-left { animation: boot-left var(--boot-cycle) var(--boot-ease) infinite; }
.boot-tile-center { animation: boot-center var(--boot-cycle) var(--boot-ease) infinite; }
.boot-tile-right { animation: boot-right var(--boot-cycle) var(--boot-ease) infinite; }
.boot-stem { animation: boot-stem var(--boot-cycle) var(--boot-ease) infinite; }
.boot-chip { animation: boot-ring var(--boot-cycle) var(--boot-ease) infinite; }
.boot-ring { fill: none; stroke: #d0ed8e; stroke-width: 2.5; stroke-dasharray: 5.5 17.015; }
.boot-rim { fill: none; stroke: #d0ed8e; stroke-width: .75; opacity: .48; }
.boot-rim-inner { opacity: .24; }
.boot-ripple { fill: none; stroke: #d0ed8e; stroke-width: .75; opacity: 0; animation: boot-ripple var(--boot-cycle) infinite; }
.boot-hit { fill: none; stroke: #e8f9c5; stroke-width: 1; opacity: 0; }
.boot-hit-left { animation: boot-hit-left var(--boot-cycle) ease-out infinite; }
.boot-hit-right { animation: boot-hit-right var(--boot-cycle) ease-out infinite; }
.boot-hit-center { animation: boot-hit-center var(--boot-cycle) ease-out infinite; }
.boot-ball { animation: boot-ball var(--boot-cycle) linear infinite; }
.boot-ball-shape { fill: #f5ffe4; animation: boot-squash var(--boot-cycle) linear infinite; }
.boot-paddle { animation: boot-paddle var(--boot-cycle) var(--boot-ease) infinite; }
.boot-paddle rect { animation: boot-recoil var(--boot-cycle) linear infinite; }
.boot-wordmark {
  font: 650 18px system-ui, -apple-system, sans-serif; letter-spacing: 3.6px;
  fill: #e2efc6; animation: boot-wordmark var(--boot-cycle) var(--boot-ease) infinite;
}
@keyframes boot-left {
  0%, 7% { transform: translate(68px, 40px) rotate(0deg) scale(1); fill: #e1ead5; }
  8% { transform: translate(68px, 39px) rotate(0deg) scale(1.12, .78); fill: #f5ffe4; }
  10% { transform: translate(67px, 36px) rotate(-3deg) scale(.86, 1.12); fill: #d0ed8e; }
  14%, 44% { transform: translate(68px, 40px) rotate(0deg) scale(.3, 1.3); }
  60%, 79% { transform: translate(110px, 80px) rotate(0deg) scale(.64, 2.875); fill: #d0ed8e; }
  94%, 100% { transform: translate(68px, 40px) rotate(0deg) scale(1); fill: #e1ead5; }
}
@keyframes boot-round {
  0%, 44%, 94%, 100% { rx: 4px; }
  60%, 79% { rx: 18px; }
}
@keyframes boot-right {
  0%, 23% { transform: translate(172px, 40px) rotate(0deg) scale(1); fill: #e1ead5; }
  24% { transform: translate(172px, 39px) rotate(0deg) scale(1.12, .78); fill: #f5ffe4; }
  26% { transform: translate(173px, 36px) rotate(3deg) scale(.86, 1.12); fill: #d0ed8e; }
  30%, 46% { transform: translate(172px, 40px) rotate(0deg) scale(.3, 1.3); }
  62%, 81% { transform: translate(130px, 80px) rotate(0deg) scale(.64, 2.875); fill: #d0ed8e; }
  96%, 100% { transform: translate(172px, 40px) rotate(0deg) scale(1); fill: #e1ead5; }
}
@keyframes boot-center {
  0%, 39% { transform: translate(120px, 40px) scale(1); fill: #e1ead5; }
  40% { transform: translate(120px, 39px) scale(1.12, .78); fill: #f5ffe4; }
  42% { transform: translate(120px, 36px) scale(.86, 1.12); fill: #d0ed8e; }
  46%, 48% { transform: translate(120px, 40px) scale(.3, 1.3); }
  58%, 77% { transform: translate(120px, 66px) scale(.64, 2.875); fill: #d0ed8e; }
  92%, 100% { transform: translate(120px, 40px) scale(1); fill: #e1ead5; }
}
@keyframes boot-ball {
  /* Same line from 96.6% to next 8%: position AND velocity match at 100/0. */
  0%, 100% { transform: translate(104.491228px, 98.228070px); opacity: 1; }
  8%, 8.4% { transform: translate(68px, 47px); }
  16%, 16.4% { transform: translate(96px, 120px); }
  24%, 24.4% { transform: translate(172px, 47px); }
  32%, 32.4% { transform: translate(144px, 120px); }
  40%, 40.4% { transform: translate(120px, 47px); animation-timing-function: cubic-bezier(.2, 0, .2, 1); }
  52% { transform: translate(120px, 82px); opacity: 1; }
  58%, 80% { transform: translate(120px, 82px); opacity: 0; }
  84% { transform: translate(120px, 82px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .65); }
  96%, 96.6% { transform: translate(120px, 120px); opacity: 1; }
}
@keyframes boot-squash {
  0%, 6.5%, 98.2%, 100% { transform: rotate(-35.46deg) scale(.88, 1.16); }
  8%, 8.4%, 24%, 24.4%, 40%, 40.4% { transform: rotate(0deg) scale(1.28, .72); }
  10%, 14.5%, 26%, 30.5% { transform: rotate(-21deg) scale(.88, 1.16); }
  16%, 16.4%, 32%, 32.4%, 96%, 96.6% { transform: rotate(0deg) scale(1.3, .72); }
  18%, 22.5% { transform: rotate(46deg) scale(.88, 1.16); }
  34%, 38.5% { transform: rotate(-18deg) scale(.88, 1.16); }
  48%, 84% { transform: rotate(0deg) scale(1); }
  92%, 94.5% { transform: rotate(0deg) scale(.88, 1.16); }
}
@keyframes boot-recoil {
  0%, 14%, 20%, 30%, 36%, 94%, 99%, 100% { transform: translateY(0) scale(1); }
  16%, 16.4%, 32%, 32.4%, 96%, 96.6% { transform: translateY(1.5px) scale(1.07, .82); }
  18%, 34%, 98% { transform: translateY(-.6px) scale(.98, 1.06); }
}
@keyframes boot-wordmark {
  0%, 56%, 88%, 100% { opacity: 0; transform: translateY(5px); }
  66%, 78% { opacity: 1; transform: translateY(0); }
}
@keyframes boot-paddle {
  0%, 2%, 90%, 100% { transform: translate(120px, 126px) scaleX(1); opacity: 1; }
  10%, 16% { transform: translate(96px, 126px) scaleX(1); opacity: 1; }
  26%, 32% { transform: translate(144px, 126px) scaleX(1); opacity: 1; }
  44% { transform: translate(120px, 126px) scaleX(1); opacity: 1; }
  56%, 80% { transform: translate(120px, 126px) scaleX(.24); opacity: 0; }
}
@keyframes boot-stem {
  0%, 50%, 88%, 100% { opacity: 0; transform: translateY(3px); }
  62%, 78% { opacity: 1; transform: translateY(0); }
}
@keyframes boot-ring {
  0%, 50% { opacity: 0; transform: rotate(-15deg) scale(.84); }
  62% { opacity: 1; transform: rotate(1deg) scale(1.025); }
  68%, 78% { opacity: 1; transform: rotate(0deg) scale(1); }
  90%, 100% { opacity: 0; transform: rotate(12deg) scale(1.08); }
}
@keyframes boot-ripple {
  0%, 56% { opacity: 0; transform: scale(1); }
  62% { opacity: .18; transform: scale(1.08); }
  78%, 100% { opacity: 0; transform: scale(1.32); }
}
@keyframes boot-hit-left {
  0%, 7% { opacity: 0; transform: scale(.4); }
  8% { opacity: .55; transform: scale(.5); }
  14%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes boot-hit-right {
  0%, 23% { opacity: 0; transform: scale(.4); }
  24% { opacity: .55; transform: scale(.5); }
  30%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes boot-hit-center {
  0%, 39% { opacity: 0; transform: scale(.4); }
  40% { opacity: .55; transform: scale(.5); }
  46%, 100% { opacity: 0; transform: scale(1.6); }
}
#LoaderBoot[data-state="failed"] #LoaderBootMotion { visibility: hidden; }
#LoaderBoot[data-state="failed"] #LoaderBootMotion *,
#LoaderBoot[hidden] #LoaderBootMotion *,
#LoaderBoot.leaving #LoaderBootMotion * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #LoaderBoot { transition: none; }
  /* Keep the requested loading loop visible; only the cover fade and secondary
     progress sweep follow this preference. Do not freeze the whole SVG. */
  #LoaderBoot[data-progress="indeterminate"] #LoaderBootFill { animation: none; width: 30%; transform: translateX(116%); opacity: .65; }
}