botfights/frontend/src/style.css

@import "tailwindcss";

@theme {
  --font-arcade: "Press Start 2P", monospace;
  --font-display: "Orbitron", sans-serif;
  --font-neon: "Bungee Shade", sans-serif;
  --font-retro: "Monoton", sans-serif;
  --font-marker: "Permanent Marker", cursive;
  --font-glitch: "Rubik Glitch", sans-serif;
  --font-funky: "Honk", sans-serif;
  --font-pixel: "Silkscreen", monospace;
  --font-mono: "JetBrains Mono", monospace;
  --font-sans: "Inter", sans-serif;

  --color-neon-pink: #ff2d7b;
  --color-neon-cyan: #00f0ff;
  --color-neon-purple: #b83dff;
  --color-neon-yellow: #ffe14d;
  --color-neon-orange: #ff6b2b;
  --color-neon-green: #39ff14;
  --color-ring: #00ff41;
  --color-ring-dim: #00aa2a;
  --color-ring-glow: #00ff4140;
  --color-ko: #ff2d2d;
  --color-ko-glow: #ff2d2d40;
  --color-gold: #ffd700;
  --color-gold-dim: #b8960f;
  --color-amber: #ffb000;
  --color-surface: #07050a;
  --color-surface-raised: #110e18;
  --color-surface-overlay: #1a1525;
  --color-border: #2a2040;
  --color-border-bright: #3d3060;
  --color-text-primary: #e8e0f0;
  --color-text-secondary: #9088a0;
  --color-text-muted: #605070;
}

/* Synthwave grid background */
.synthwave-grid {
  background-image:
    linear-gradient(rgba(184, 61, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 61, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* CRT scanline overlay */
.crt-overlay {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04) 0px,
    rgba(0, 0, 0, 0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Neon glow effects -- EXTRA BOLD */
.glow-pink {
  text-shadow:
    0 0 7px var(--color-neon-pink),
    0 0 20px rgba(255, 45, 123, 0.5),
    0 0 40px rgba(255, 45, 123, 0.25),
    0 0 80px rgba(255, 45, 123, 0.1);
}
.glow-cyan {
  text-shadow:
    0 0 7px var(--color-neon-cyan),
    0 0 20px rgba(0, 240, 255, 0.5),
    0 0 40px rgba(0, 240, 255, 0.25),
    0 0 80px rgba(0, 240, 255, 0.1);
}
.glow-purple {
  text-shadow:
    0 0 7px var(--color-neon-purple),
    0 0 20px rgba(184, 61, 255, 0.5),
    0 0 40px rgba(184, 61, 255, 0.25);
}
.glow-green {
  text-shadow:
    0 0 7px var(--color-ring),
    0 0 20px var(--color-ring-glow),
    0 0 40px rgba(0, 255, 65, 0.15);
}
.glow-yellow {
  text-shadow:
    0 0 7px var(--color-neon-yellow),
    0 0 20px rgba(255, 225, 77, 0.5),
    0 0 40px rgba(255, 225, 77, 0.2);
}
.glow-orange {
  text-shadow:
    0 0 7px var(--color-neon-orange),
    0 0 20px rgba(255, 107, 43, 0.5);
}

/* Neon box glow */
.neon-border-pink {
  box-shadow: 0 0 8px rgba(255, 45, 123, 0.4), 0 0 20px rgba(255, 45, 123, 0.15), inset 0 0 8px rgba(255, 45, 123, 0.05);
}
.neon-border-cyan {
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.15), inset 0 0 8px rgba(0, 240, 255, 0.05);
}
.neon-border-purple {
  box-shadow: 0 0 8px rgba(184, 61, 255, 0.4), 0 0 20px rgba(184, 61, 255, 0.15), inset 0 0 8px rgba(184, 61, 255, 0.05);
}
.neon-border-yellow {
  box-shadow: 0 0 8px rgba(255, 225, 77, 0.4), 0 0 20px rgba(255, 225, 77, 0.15), inset 0 0 8px rgba(255, 225, 77, 0.05);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-pink), var(--color-neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-hot {
  background: linear-gradient(135deg, var(--color-neon-orange), var(--color-neon-pink), var(--color-neon-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-ice {
  background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-purple), var(--color-neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Health bar */
.health-bar {
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Screen shake */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, -2px); }
  20% { transform: translate(4px, 3px); }
  30% { transform: translate(-2px, 4px); }
  40% { transform: translate(3px, -3px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(2px, -4px); }
  70% { transform: translate(4px, 3px); }
  80% { transform: translate(-3px, -2px); }
  90% { transform: translate(2px, 3px); }
}
.shake { animation: screen-shake 0.3s ease-in-out; }

/* Flicker */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.3; }
}
.flicker { animation: flicker 1.5s infinite; }

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; filter: brightness(0.8); }
  50% { opacity: 1; filter: brightness(1.2); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Neon flicker -- like a real neon sign */
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.6; }
  21%, 54% { opacity: 0.8; }
}
.neon-flicker { animation: neon-flicker 3s ease-in-out infinite; }

/* Slide up */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slide-up 0.6s ease-out; }

/* Tier colors */
.tier-0 { color: var(--color-text-muted); }
.tier-1 { color: #cd7f32; }
.tier-2 { color: #c0c0c0; }
.tier-3 { color: #ffd700; }
.tier-4 { color: var(--color-neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }
.tier-5 { color: var(--color-neon-purple); text-shadow: 0 0 10px rgba(184, 61, 255, 0.5); }
.tier-6 { color: var(--color-neon-pink); text-shadow: 0 0 12px rgba(255, 45, 123, 0.6); }

/* Safe area for bottom nav (iPhone notch/home indicator) */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Reduced motion: skip animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}