/* ───────────────────────────────────────────────────────────────────
   The Garden · "Digital Botanical" theme overrides + animations
   Palette: deep moss · flower pink · sprout green · rose gold · lavender mist
   ─────────────────────────────────────────────────────────────────── */

html, body { background-color: #07170b; }
body {
  font-family: 'DM Sans', sans-serif;
  background-image: radial-gradient(circle at center, rgba(40,57,43,0.55) 2px, transparent 2px);
  background-size: 24px 24px;
}

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

/* ─── Tactile press surfaces ──────────────────────────────────────── */
.tactile-button,
.btn-tactile {
  position: relative;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,1);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, background-color 120ms ease;
}
.tactile-button:hover, .btn-tactile:hover { filter: brightness(1.05); }
.tactile-button:active, .btn-tactile:active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 0 rgba(0,0,0,1);
}
.tactile-button:disabled, .btn-tactile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.tactile-card {
  box-shadow: 4px 4px 0 0 rgba(0,0,0,1);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.tactile-card:hover {
  filter: drop-shadow(0 0 12px rgba(255,177,199,0.35));
}

/* "Lavender mist" hover glow — used on cards & buttons */
.lavender-glow:hover { filter: drop-shadow(0 0 12px rgba(255,177,199,0.4)); }

/* ─── Glow primitives ─────────────────────────────────────────────── */
.glow-primary { box-shadow: 0 0 24px rgba(255,177,199,0.30); }
.glow-secondary { box-shadow: 0 0 28px rgba(231,195,90,0.30); }
.glow-tertiary { box-shadow: 0 0 24px rgba(133,218,133,0.25); }
.glow-error   { box-shadow: 0 0 24px rgba(255,180,171,0.25); }
.glow-mythic  { box-shadow: 0 0 32px rgba(231,195,90,0.35); }

/* ─── 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(-10px) rotate(-2deg); }
}
.animate-coin-float { animation: coin-float 4s ease-in-out infinite; }

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

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(255,177,199,0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,177,199,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,177,199,0);   }
}
.animate-pulse-ring { animation: pulse-ring 2s 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; }

@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: 9999px;
  background: #ffb1c7;
  box-shadow: 0 0 8px 1px rgba(255,177,199,0.7);
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(231,195,90,0.18); }
  50%      { box-shadow: 0 0 28px rgba(231,195,90,0.35); }
}
.animate-glow-breathe { animation: glow-breathe 3s ease-in-out infinite; }

@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;
}

/* ─── Stagger helper (used by chrome.js) */
.stagger-children > * { opacity: 0; }
.stagger-children.run > * { opacity: 1; }

/* ─── Number ticker */
.ticker-number { font-variant-numeric: tabular-nums; }

/* ─── BNB-yellow price ticker badge */
.bnb-ticker {
  background: #e7c35a;
  color: #07170b;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0.25rem;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,1);
  display: inline-block;
}

/* ─── Coin preview helper */
.coin-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  object-fit: contain;
}

/* ─── Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07170b; }
::-webkit-scrollbar-thumb { background: #28392b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #65b868; }

/* ─── Selection */
::selection { background: #ffb1c7; color: #07170b; }

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

/* ─── Hero card double-frame */
.frame-double {
  position: relative;
}
.frame-double::after {
  content: '';
  position: absolute; inset: 16px;
  border: 1px solid rgba(255,177,199,0.3);
  pointer-events: none;
  border-radius: 0.125rem;
}

/* ─── Bond curve chart styling helpers */
.bond-grid line { stroke: #28392b; stroke-width: 1; opacity: 0.4; }
.bond-axis-text { fill: #dbc0c6; font-family: 'Space Mono', monospace; font-size: 11px; }

/* ─── Tier border helpers (per-tier accent colors) */
.border-tier-l0 { border-color: #554147; }
.border-tier-l1 { border-color: #65b868; }
.border-tier-l2 { border-color: #ff7aa8; }
.border-tier-l3 { border-color: #e7c35a; }

/* ─── Stage chip backgrounds */
.chip-l0 { background: #1e2e20; border: 1px solid #554147; color: #dbc0c6; }
.chip-l1 { background: #1e2e20; border: 1px solid #85da85; color: #85da85; }
.chip-l2 { background: #1e2e20; border: 1px solid #ffb1c7; color: #ffb1c7; }
.chip-l3 { background: #e7c35a; color: #3d2f00; }