/* NIAO Airdrop Custom Styles */

/* Animated background particles */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(57,255,20,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,245,255,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
}

/* Smooth page transitions */
.page {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar for webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: rgba(57,255,20,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(57,255,20,0.7); }

/* Timer circle animation */
#timerCircle {
  transition: stroke-dashoffset 0.9s linear;
}

/* Card hover effect */
.card:hover {
  border-color: rgba(57,255,20,0.5);
  transition: border-color 0.3s;
}

/* Table rows */
tbody tr:hover {
  background: rgba(57,255,20,0.03);
}

/* Input autofill fix */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a2e inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Mobile responsive fixes */
@media (max-width: 640px) {
  .font-orbitron { font-size: 90%; }
  .card { padding: 16px; }
}

/* Winner card shimmer */
.winner-card {
  position: relative;
  overflow: hidden;
}

.winner-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,215,0,0.05) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* Neon button glow on hover */
.btn-primary:not(:disabled):hover {
  box-shadow: 0 0 25px rgba(0,200,83,0.6), 0 4px 15px rgba(0,200,83,0.3);
}

/* Status indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-dot.active { background: #39ff14; box-shadow: 0 0 6px #39ff14; }
.status-dot.pending { background: gold; box-shadow: 0 0 6px gold; }
.status-dot.failed { background: #ff1744; box-shadow: 0 0 6px #ff1744; }