/* ───────────────────────────────────────────────────────────────────
   bitcoins · arcade-collectible theme · custom animations + Stitch overrides
   ─────────────────────────────────────────────────────────────────── */

html, body { background: #17130d; }
body { font-family: 'DM Sans', sans-serif; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.filled,
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ─── Glow primitives */
.glow-primary { box-shadow: 0 0 24px rgba(255,184,116,0.25); }
.glow-mythic  { box-shadow: 0 0 32px rgba(255,219,60,0.35); }
.glow-tertiary{ box-shadow: 0 0 24px rgba(112,220,151,0.25); }
.glow-error   { box-shadow: 0 0 24px rgba(255,180,171,0.22); }

/* ─── Card retro (used in claim page) */
.card-retro {
  background: #241f19;
  border-color: #554335;
  border-radius: 0.5rem;
  box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
}

/* ─── Tactile press buttons */
.tactile-button,
.btn-tactile {
  position: relative;
  box-shadow: 0 4px 0 0 #8c4f00;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.tactile-button:hover, .btn-tactile:hover { transform: translateY(2px); box-shadow: 0 2px 0 0 #8c4f00; filter: brightness(1.05); }
.tactile-button:active, .btn-tactile:active { transform: translateY(4px); box-shadow: none; }

.tactile-card {
  box-shadow: 6px 6px 0px 0px #39342d;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tactile-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px 0px #39342d;
}

/* ─── Animations */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.animate-shimmer { animation: shimmer 2.4s linear infinite; }

@keyframes coin-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-2deg); }
}
.animate-coin-float { animation: coin-float 4s ease-in-out infinite; }

@keyframes coin-spin {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}
.animate-coin-spin:hover { animation: coin-spin 1.2s ease-in-out; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(255,184,116,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,184,116,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,184,116,0);   }
}
.animate-pulse-ring { animation: pulse-ring 2s infinite; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.animate-pulse-soft { animation: pulse-soft 2.2s ease-in-out infinite; }

@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-fade-up.delay-1 { animation-delay: 100ms; }
.animate-fade-up.delay-2 { animation-delay: 200ms; }
.animate-fade-up.delay-3 { animation-delay: 300ms; }
.animate-fade-up.delay-4 { animation-delay: 400ms; }
.animate-fade-up.delay-5 { animation-delay: 500ms; }
.animate-fade-up.delay-6 { animation-delay: 600ms; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1);   }
}
.sparkle {
  position: absolute;
  pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px 1px rgba(255,215,0,0.7);
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(2deg); }
  75%      { transform: rotate(-2deg); }
}
.animate-wobble:hover { animation: wobble 0.6s ease-in-out; }

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.scanline-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(transparent 50%, rgba(0,0,0,0.20) 50%);
  background-size: 100% 4px;
  pointer-events: none;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-20vh) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}
.confetti-bit {
  position: fixed;
  top: 0; left: 50%;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* ─── Number ticker (just a visual class; JS does the work) */
.ticker-number { font-variant-numeric: tabular-nums; }

/* ─── Coin preview (use real SVGs from preview/) */
.coin-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  object-fit: contain;
}

/* ─── Empty state subtle pulse */
@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(255,184,116,0.15); }
  50%      { box-shadow: 0 0 28px rgba(255,184,116,0.30); }
}
.animate-glow-breathe { animation: glow-breathe 3s ease-in-out infinite; }

/* ─── Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #17130d; }
::-webkit-scrollbar-thumb { background: #554335; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a38d7b; }

/* ─── Selection */
::selection { background: #ffb874; color: #4b2800; }

/* ─── Active nav link */
.nav-active { color: #ffb874; font-weight: 700; border-bottom: 2px solid #ffb874; }

/* ─── Hero floating coin halo */
.hero-coin-halo::before {
  content: '';
  position: absolute; inset: -24px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255,184,116,0.20), transparent 60%);
  z-index: -1;
  filter: blur(20px);
}

/* ─── Subtle background grid */
.bg-grid {
  background-image:
    linear-gradient(rgba(85,67,53,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,67,53,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}