/* Hexagram Minning — supplemental styles (beyond Tailwind utilities) */

:root {
  --hxg-navy-900: #05070d;
  --hxg-navy-800: #0b1220;
  --hxg-navy-700: #111b2e;
  --hxg-navy-600: #172238;
  --hxg-border: #1e293b;
  --hxg-emerald: #10b981;
  --hxg-emerald-soft: #34d399;
  --hxg-gold: #d4af37;
  --hxg-gold-soft: #f3d08a;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(16,185,129,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(212,175,55,0.06), transparent 55%),
    var(--hxg-navy-900);
  background-attachment: fixed;
}

/* Glassmorphism card */
.glass {
  background: linear-gradient(180deg, rgba(23,34,56,0.65), rgba(11,18,32,0.55));
  border: 1px solid rgba(148,163,184,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-strong {
  background: linear-gradient(180deg, rgba(23,34,56,0.85), rgba(11,18,32,0.80));
  border: 1px solid rgba(148,163,184,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hxg-card {
  border-radius: 1rem;
}

.hxg-gradient-emerald {
  background: linear-gradient(135deg, #34d399, #059669);
}
.hxg-gradient-gold {
  background: linear-gradient(135deg, #f3d08a, #c99a3c);
}
.text-gradient-emerald {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.02em; }
.badge-success { background: rgba(16,185,129,0.14); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.badge-pending { background: rgba(212,175,55,0.14); color:#f3d08a; border:1px solid rgba(212,175,55,0.3); }
.badge-danger  { background: rgba(239,68,68,0.14); color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.badge-info    { background: rgba(56,189,248,0.14); color:#7dd3fc; border:1px solid rgba(56,189,248,0.3); }
.badge-neutral { background: rgba(148,163,184,0.14); color:#cbd5e1; border:1px solid rgba(148,163,184,0.3); }

/* Progress bar */
.progress-track { background: rgba(148,163,184,0.12); border-radius: 999px; overflow:hidden; }
.progress-fill { background: linear-gradient(90deg,#059669,#34d399); height:100%; border-radius:999px; transition: width .6s ease; }

/* Pulse dot (live indicator) */
.pulse-dot { position:relative; width:8px; height:8px; border-radius:999px; background:#34d399; }
.pulse-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:999px; border:2px solid #34d399;
  animation: pulse-ring 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring { 0% { transform:scale(0.6); opacity:.8;} 100% { transform:scale(1.8); opacity:0;} }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, rgba(148,163,184,0.08) 25%, rgba(148,163,184,0.16) 37%, rgba(148,163,184,0.08) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: .5rem;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Fade/slide in */
.fade-in-up { animation: fadeInUp .5s ease both; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none; } }

/* Toast container */
#toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display:flex; flex-direction:column; gap:.6rem; }
.toast { min-width: 260px; max-width: 360px; padding: .85rem 1rem; border-radius:.75rem; font-size:.85rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity:0; transform: translateX(20px);} to { opacity:1; transform:none; } }

/* Bottom nav (mobile) */
.bottom-nav { position: fixed; bottom:0; left:0; right:0; z-index:50; }
.bottom-nav a.active { color: #34d399; }

/* Hide scrollbar for horizontal chip rows */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- Mining rig animations ---------- */
@keyframes hxg-spin { to { transform: rotate(360deg); } }
.fan-spin { transform-box: fill-box; transform-origin: center; animation: hxg-spin 1.1s linear infinite; }
.fan-spin-slow { transform-box: fill-box; transform-origin: center; animation: hxg-spin 2.2s linear infinite; }
.fan-spin-fast { transform-box: fill-box; transform-origin: center; animation: hxg-spin .7s linear infinite; }

@keyframes hxg-led { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.led-blink   { animation: hxg-led 1.4s ease-in-out infinite; }
.led-blink-2 { animation: hxg-led 1.4s ease-in-out .5s infinite; }
.led-blink-3 { animation: hxg-led 1.4s ease-in-out .9s infinite; }

@keyframes hxg-hash-rise { 0% { transform: translateY(0); opacity:0; } 15% { opacity:.9; } 100% { transform: translateY(-46px); opacity:0; } }
.hash-p { animation: hxg-hash-rise 2.6s linear infinite; }

@keyframes hxg-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(220%); } }
.rig-scan { animation: hxg-scan 3.4s ease-in-out infinite; }

@keyframes hxg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rig-float { animation: hxg-float 4s ease-in-out infinite; }

@keyframes hxg-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.hr-bar { transform-box: fill-box; transform-origin: bottom; animation: hxg-bar 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fan-spin,.fan-spin-slow,.fan-spin-fast,.led-blink,.led-blink-2,.led-blink-3,.hash-p,.rig-scan,.rig-float,.hr-bar { animation: none !important; }
}

/* Live ticker row */
.ticker-up { color:#34d399; }
.ticker-down { color:#f87171; }
.spark-line { transition: all .4s ease; }