/* ============================================================
   GetLuck — Lucky loader (on-chain transaction wait)
   v=20260831-1 · research: the tx-wait is the single longest
   boring moment; mascot loader belongs here (pattern #2).
   Markup:
     <div class="lucky-loader" role="status" aria-live="polite">
       <div class="ll-ring" aria-hidden="true"></div>
       <img class="ll-bird" src="/assets/mascot/lucky-think.svg" alt="">
       <p class="ll-text">Waiting for BNB Chain…<small>usually under 10 seconds</small></p>
     </div>
   ============================================================ */

.lucky-loader {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 18px;
}

.lucky-loader .ll-ring {
  position: relative;
  width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center;
}
.lucky-loader .ll-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(146, 129, 247, .0) 40deg,
    rgba(146, 129, 247, .55) 140deg,
    #ffca16 200deg,
    transparent 210deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: ll-spin 1.6s linear infinite;
}
.lucky-loader .ll-ring::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 44%, rgba(146, 129, 247, .18), transparent 72%);
}

.lucky-loader .ll-bird {
  position: absolute; width: 72px; height: 72px;
  animation: ll-bob 2.4s ease-in-out infinite;
}

.lucky-loader .ll-text {
  font: 400 13.5px/1.5 var(--font-ui, Inter, system-ui, sans-serif);
  color: var(--ash, #a1a4a5); text-align: center;
}
.lucky-loader .ll-text small {
  display: block; margin-top: 3px;
  font: 400 11px/1.4 var(--font-mono, monospace);
  color: var(--charcoal, #464a4d);
}

@keyframes ll-spin { to { transform: rotate(360deg); } }
@keyframes ll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .lucky-loader .ll-ring::before,
  .lucky-loader .ll-bird { animation: none; }
}