@font-face {
  font-family: 'Winky Rough';
  src: url('Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

body {
  margin: 0;
  background-color: #0a0a14;
  font-family: 'Winky Rough', 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;
}

h1 {
  font-size: 2.8rem;
  color: #8eff5c;
  text-shadow: 
    0 0 2px #c5f89e, 
    0 0 4px #8eff5c;
  position: relative;
  margin-bottom: 0.7em;
  letter-spacing: 0.05em;
}

h2 {
  font-size: 2.4rem;
  color: #ff3399;
  text-shadow:
    0 0 3px #ff1a8c,
    0 0 6px #ff0080;
  position: relative;
  margin-bottom: 0.7em;
  letter-spacing: 0.05em;
}

.subline {
  font-size: 1.8rem;
  margin-top: 1rem;
  color: #39fff0;
  text-shadow:
    0 0 2px #39fff0,
    0 0 4px #2adad1;
}

p {
  font-size: 1.2rem;
  margin: 1rem auto;
  max-width: 860px;
  text-shadow: 0 0 2px rgba(255,255,255,0.2);
}

.chant1 {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.6em;
  color: #ffb3d9;
  text-shadow:
    0 0 1px #ff99cc,
    0 0 2px #ff66a3;
}

.chant2 {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.6em;
  color: #ff80cc;
  text-shadow:
    0 0 2px #ff66b2,
    0 0 4px #fb3283;
}

.chant3 {
  font-family: 'Press Start 2P', monospace;
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.6em;
  color: #ff3399;
  text-shadow:
    0 0 3px #ff1a8c,
    0 0 6px #ff0080;
    animation: chantGlitch 4s infinite;
}


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

.glitch-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.02),
    rgba(255,0,255,0.04) 2px,
    rgba(0,0,0,0.02) 4px
  );
  mix-blend-mode: screen;
  animation: bgScroll 30s linear infinite;
  z-index: 1;
}

@keyframes bgScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

.damage-section {
  margin-top: 2rem;
  font-family: 'Winky Rough', monospace;
  color: #8eff5c;
  text-shadow: 
    0 0 2px #c5f89e, 
    0 0 4px #8eff5c;
  text-align: center;
}

.damage-section ul {
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
}

.damage-section li {
  margin: 0.5em 0;
}


.onion-footer {
  font-size: 1rem;
  text-align: center;
  color: #8888ff;
  text-shadow:
    0 0 2px #8888ff,
    0 0 4px #6666ff;
  margin-top: 4rem;
  padding: 2rem;
  border-top: 1px solid rgba(136, 136, 255, 0.2);
  z-index: 3;
  position: relative;
}

.onion-footer .robot {
  color: #ffffff;
  text-shadow:
    0 0 2px #ff00ff,
    0 0 4px #ff66ff;
  letter-spacing: 1px;
  display: block;
  margin-top: 1rem;
}

.footer-home-link a {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #ff99ff;
  text-shadow:
    0 0 2px #ff66cc,
    0 0 4px #ff33cc;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-home-link a:hover {
  color: #00ffee;
  text-shadow:
    0 0 3px #00ffee,
    0 0 6px #00ccff;
}

.onion-glow {
  color: #ff66cc;
  text-shadow:
    0 0 2px #ff3399,
    0 0 4px #ff66cc,
    0 0 8px #ff33cc;
  font-weight: bold;
}