:root {
  --dogs-color: #40c9ff;
  --frogs-color: #7cf76b;
}
html, body {
    overflow-x: hidden !important;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, Inter, sans-serif;
  color: #f9fafb;
  background: radial-gradient(circle at top, #182848 0, #0f172a 40%, #020617 100%);
    
}

.glass {
  backdrop-filter: blur(18px);
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.battle-banner { animation: bannerGlow 3s infinite alternate ease-in-out; }
@keyframes bannerGlow {
  from { filter: brightness(1); transform: scale(1); }
  to   { filter: brightness(1.25); transform: scale(1.03); }
}

.battle-vs {
  animation: vsPulse 1s infinite alternate ease-in-out;
}
@keyframes vsPulse {
  from { text-shadow: 0 0 10px #ffd000; }
  to   { text-shadow: 0 0 25px #ff6a00; }
}

.trade-item { animation: slideIn .3s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#particles span {
  position: fixed;
  width: 6px; height: 6px;
  background: radial-gradient(circle,#44eaff,#0040ff);
  border-radius: 50%;
  animation: particleFloat 1.2s forwards ease-out;
}
@keyframes particleFloat {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-60px) scale(.2); opacity: 0; }
}