@font-face {
  font-family: 'Rubik Glitch';
  src: url('/assets/fonts/RubikGlitch-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tilt Neon';
  src: url('/assets/fonts/TiltNeon-Regular-VariableFont_XROT,YROT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --neon-green: #8eff5c;
  --neon-pink: #ff3399;
  --neon-cyan: #39fff0;
  --onion-bg: #0a0a14;
  --glass-border: rgba(136, 136, 255, 0.2);
}

body {
  margin: 0;
  background-color: var(--onion-bg);
  font-family: 'Tilt Neon', monospace;
  color: #c6fcff;
  overflow-x: hidden;
  line-height: 1.4;
}

.container {
  text-align: center;
  position: relative;
  padding: 6vh 1.5em;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}

/* Onioncore Headers */
h1 {
  font-size: 2.8rem;
  color: var(--neon-green);
  text-shadow: 0 0 5px var(--neon-green);
  margin-bottom: 0.7em;
  letter-spacing: 0.05em;
}

h2 {
  font-size: 2.4rem;
  color: var(--neon-pink);
  text-shadow: 0 0 6px var(--neon-pink);
  margin-bottom: 0.7em;
}

/* Glitch & Chant Styles */
.chant1 { color: #ffb3d9; font-size: 1.5rem; text-shadow: 0 0 2px #ff66a3; }
.chant2 { color: #ff80cc; font-size: 1.5rem; text-shadow: 0 0 4px #fb3283; }
.chant3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem;
  color: var(--neon-pink);
  text-shadow: 0 0 8px var(--neon-pink);
  animation: chantGlitch 4s infinite;
}

@keyframes chantGlitch {
  0%, 100% { transform: translateX(0); }
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(1px); }
}

/* Scanned Line Background */
.glitch-bg {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px);
  pointer-events: none;
  z-index: 1;
}

/* Damage Section - Cleaned Logic */
.damage-section {
  position: relative;
  margin: 2rem auto;
  max-width: 800px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  z-index: 3;
}

.damage-section ul {
  list-style: none;
  padding: 0;
  text-align: left;
  display: inline-block;
}

.damage-section li {
  margin: 0.8em 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(142, 255, 92, 0.1);
}

.onion-glow {
  color: #ff66cc;
  text-shadow: 0 0 5px #ff3399;
  font-weight: bold;
}

/* Link Logic Fix */
.damage-section .link {
  display: inline-block;
  margin-top: 2rem;
  padding: 10px 20px;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.3s;
}

.damage-section .link:hover {
  background: var(--neon-cyan);
  color: var(--onion-bg);
  box-shadow: 0 0 15px var(--neon-cyan);
}

.onion-footer {
  text-align: center;
  padding: 4rem 2rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  color: #8888ff;
}