body {
  background: #111;
  min-height: 100vh;
  margin: 0;
}

.coming-soon-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 480px;
}

.coming-soon-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.splash-text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(-8deg);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8em;
  color: #ffe900;
  text-shadow: 2px 2px 0 #222, 4px 4px 8px #000a;
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
  white-space: normal;
  text-align: center;
  max-width: 400px;
  padding: 0.2em 0.7em;
  background: rgba(34,34,34,0.45);
  border-radius: 10px;
  box-shadow: 0 2px 8px #0006;
  z-index: 3;
  filter: drop-shadow(1px 1px 0 #222);
  transition: opacity 0.2s;
}

@media (max-width: 500px) {
  .coming-soon-wrapper {
    width: 99vw;
  }
  .splash-text {
    font-size: 0.7em;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    max-width: 88vw;
    padding: 0.1em 0.4em;
    border-radius: 6px;
    box-shadow: 0 2px 6px #0007;
  }
}

/* Glitch Effect for Logo */
.glitch-img {
  position: relative;
  display: inline-block;
}
.glitch-img::before,
.glitch-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/header_logo.png');
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.glitch-img:hover::before {
  animation: glitchTop 0.3s infinite linear alternate;
  opacity: 0.6;
  filter: drop-shadow(2px 0 #3fb3af);
}
.glitch-img:hover::after {
  animation: glitchBottom 0.3s infinite linear alternate;
  opacity: 0.6;
  filter: drop-shadow(-2px 0 #d7ae37);
}
@keyframes glitchTop {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}
@keyframes glitchBottom {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px); }
}