/* styles-v55.css — v0.5.5 Tasteful animation polish
 * Purely additive: keyframes, transitions, glow states. No layout/grid/position
 * changes from v0.5.4 (all transforms/opacity only). Loaded LAST.
 * Respects prefers-reduced-motion via the block at the bottom. */

/* ── particle canvases (confetti / dust / fireworks) ─────────────────────── */
.v55-fx-canvas { position: fixed; pointer-events: none; z-index: 900; }

/* ── 1. lucky number settle bounce ───────────────────────────────────────── */
@keyframes v55-settle-bounce {
  0%   { transform: scale(1.0); }
  45%  { transform: scale(1.15); }
  100% { transform: scale(1.0); }
}
.lucky-number.v55-settle-bounce { animation: v55-settle-bounce 0.22s ease-out; }

/* ── 2. range bar sweep + needle ─────────────────────────────────────────── */
.threshold-bar-fill.v55-bar-animate { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.threshold-bar-needle.v55-needle-animate { transition: left 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.threshold-bar-fill.v55-bar-win  { background: linear-gradient(90deg, rgba(94,255,215,0.85), rgba(0,180,216,0.55)); box-shadow: 0 0 12px rgba(73,234,203,0.6); border-right-color: var(--teal); }
.threshold-bar-fill.v55-bar-loss { background: linear-gradient(90deg, rgba(255,77,109,0.8), rgba(217,70,239,0.5)); box-shadow: 0 0 12px rgba(255,77,109,0.5); border-right-color: var(--red); }

/* ── 3. win celebration — result card green pulse ────────────────────────── */
@keyframes v55-win-pulse {
  0%   { box-shadow: 0 0 0 rgba(73,234,203,0.0); border-color: rgba(73,234,203,0.3); }
  15%  { box-shadow: 0 0 28px rgba(73,234,203,0.55); border-color: rgba(73,234,203,0.95); }
  40%  { box-shadow: 0 0 0 rgba(73,234,203,0.0); border-color: rgba(73,234,203,0.3); }
  55%  { box-shadow: 0 0 28px rgba(73,234,203,0.55); border-color: rgba(73,234,203,0.95); }
  100% { box-shadow: 0 0 0 rgba(73,234,203,0.0); border-color: rgba(73,234,203,0.3); }
}
.result-flash.v55-win-pulse { animation: v55-win-pulse 1.2s ease-in-out; }

/* ── 4. loss reaction — subtle shake + red flash ─────────────────────────── */
@keyframes v55-loss-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes v55-loss-flash {
  0%   { box-shadow: 0 0 0 rgba(255,77,109,0.0); border-color: rgba(255,77,109,0.3); }
  33%  { box-shadow: 0 0 22px rgba(255,77,109,0.5); border-color: rgba(255,77,109,0.9); }
  100% { box-shadow: 0 0 0 rgba(255,77,109,0.0); border-color: rgba(255,77,109,0.3); }
}
.result-flash.v55-loss-shake { animation: v55-loss-shake 0.3s ease-in-out; }
.result-flash.v55-loss-flash { animation: v55-loss-flash 0.6s ease-out, v55-loss-shake 0.3s ease-in-out; }

/* ── 5. jackpot ticker glow pulse ────────────────────────────────────────── */
@keyframes v55-ticker-glow {
  0%   { box-shadow: 0 0 0 rgba(73,234,203,0.0); }
  25%  { box-shadow: 0 0 24px rgba(73,234,203,0.45); }
  100% { box-shadow: 0 0 0 rgba(73,234,203,0.0); }
}
.v55-ticker-glow { animation: v55-ticker-glow 0.8s ease-out; border-radius: 12px; }

/* ── 6. state pills — domino activation pop + inner glow ─────────────────── */
@keyframes v55-pill-pop {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1.0); }
}
.status-track li.v55-pill-pop { animation: v55-pill-pop 0.25s ease-out; }
.status-track li.v55-pill-pop { text-shadow: 0 0 8px rgba(73,234,203,0.7); }
.status-track li.v55-pill-pop .dot { box-shadow: 0 0 12px var(--teal), 0 0 4px var(--teal) inset; }
.status-track li.active .dot { transition: box-shadow 0.25s ease; }

/* ── 7. roll again button — pulse-glow + in-flight spinner ───────────────── */
@keyframes v55-ready-pulse {
  0%   { box-shadow: 0 0 4px rgba(73,234,203,0.25); border-color: rgba(73,234,203,0.4); }
  50%  { box-shadow: 0 0 16px rgba(73,234,203,0.7); border-color: rgba(73,234,203,0.95); }
  100% { box-shadow: 0 0 4px rgba(73,234,203,0.25); border-color: rgba(73,234,203,0.4); }
}
.again-btn.v55-ready-pulse:not(:disabled) { animation: v55-ready-pulse 2s ease-in-out infinite; }
@keyframes v55-spin { to { transform: rotate(360deg); } }
.again-btn.v55-rolling { position: relative; }
.again-btn.v55-rolling::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 8px;
  border: 2px solid rgba(73,234,203,0.35); border-top-color: var(--teal);
  border-radius: 50%; vertical-align: middle; animation: v55-spin 0.7s linear infinite;
}

/* ── 8. your bets — slide-in new row + cyan highlight fade ───────────────── */
@keyframes v55-row-slidein {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes v55-row-highlight {
  0%   { background-color: rgba(94,255,215,0.15); }
  100% { background-color: rgba(94,255,215,0.0); }
}
.feed-row.v55-row-slidein { animation: v55-row-slidein 0.3s cubic-bezier(0.22,1,0.36,1), v55-row-highlight 1.5s ease-out; }

/* ── 9. big-tier spectacle — very subtle screen shake ────────────────────── */
@keyframes v55-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
}
.v55-shake { animation: v55-screen-shake 0.25s ease-in-out; }

/* ── reduced motion: kill all v0.5.5 motion, keep instant final states ───── */
@media (prefers-reduced-motion: reduce) {
  .lucky-number.v55-settle-bounce,
  .result-flash.v55-win-pulse,
  .result-flash.v55-loss-shake,
  .result-flash.v55-loss-flash,
  .v55-ticker-glow,
  .status-track li.v55-pill-pop,
  .again-btn.v55-ready-pulse,
  .feed-row.v55-row-slidein,
  .v55-shake { animation: none !important; }
  .again-btn.v55-rolling::after { animation: none !important; }
  .threshold-bar-fill.v55-bar-animate { transition: none !important; }
  .threshold-bar-needle.v55-needle-animate { transition: none !important; }
}