.dialogue-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid #00ffff;
  padding: 20px;
  max-width: 700px;
  margin: 50px auto 20px;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #00ffff;
  box-shadow: 0 0 15px #00ffff;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.2s ease;
  z-index: 10;
}

/* HEADER LABEL */
.dialogue-header {
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  color: #ff00ff;
  margin-bottom: 10px;
  text-shadow: 0 0 4px #ff00ff, 0 0 8px #00ffff;
}

/* FLEX content: avatar + text */
.dialogue-content {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* Avatar styling */
.avatar-gif {
  width: 140px;
  height: auto;
  flex-shrink: 0;
  image-rendering: pixelated;
  filter: contrast(1.2) saturate(1.3);
  animation: avatar-flicker 1.2s infinite alternate;
}

/* Text block */
.dialogue-text {
  flex: 1;
  text-align: left;
  text-shadow: 0 0 5px #00ffff;
}

/* Scanline overlay inside box */
.dialogue-scanlines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    rgba(0,255,255,0.03) 0px,
    rgba(0,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: scanline-shift 2s linear infinite;
}

/* Avatar flicker */
@keyframes avatar-flicker {
  0% { filter: brightness(1) contrast(1.1); }
  50% { filter: brightness(1.3) contrast(1.3) hue-rotate(5deg); }
  100% { filter: brightness(1) contrast(1.1); }
}

/* Moving scanline animation */
@keyframes scanline-shift {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

.glitch-word {
  display: inline-block;
  position: relative;
  color: #00ffff;
  text-shadow:
    0 0 4px #00ffff,
    0 0 8px #ff00ff,
    0 0 12px #00ffff;
    
  /* Stack two animations together */
  animation:
    glitchShift 1.2s infinite steps(2, end),
    glitchColor 2s infinite linear;
}

/* Existing position jitter */
@keyframes glitchShift {
  0%   { transform: translate(0, 0); opacity: 1; }
  20%  { transform: translate(-1px, 1px); opacity: 0.9; }
  40%  { transform: translate(2px, -1px); opacity: 0.8; }
  60%  { transform: translate(-1px, -2px); opacity: 1; }
  80%  { transform: translate(1px, 1px); opacity: 0.9; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* 🎨 NEW: Color cycling */
@keyframes glitchColor {
  0%   { color: #00ffff; text-shadow: 0 0 4px #00ffff, 0 0 8px #ff00ff, 0 0 12px #00ffff; }
  25%  { color: #ff00cc; text-shadow: 0 0 4px #ff00cc, 0 0 8px #00ffff, 0 0 12px #ff00cc; }
  50%  { color: #00ff99; text-shadow: 0 0 4px #00ff99, 0 0 8px #ffff00, 0 0 12px #00ff99; }
  75%  { color: #ff6600; text-shadow: 0 0 4px #ff6600, 0 0 8px #00ffff, 0 0 12px #ff6600; }
  100% { color: #00ffff; text-shadow: 0 0 4px #00ffff, 0 0 8px #ff00ff, 0 0 12px #00ffff; }
}

.dialogue-text .glitch-word {
  animation:
    glitchShift 1.2s infinite steps(2, end),
    glitchColor 2s infinite linear !important;
  color: #00ffff !important;
}

@keyframes tweakedColor {
  0%   { color: #00ffff; text-shadow: 2px 0 #ff00ff; }
  25%  { color: #ff00ff; text-shadow: -2px 0 #00ffff; }
  50%  { color: #ffff00; text-shadow: 2px 2px #ff6600; }
  75%  { color: #ff6600; text-shadow: -2px -2px #00ff99; }
  100% { color: #00ffff; text-shadow: 2px 0 #ff00ff; }
}

@keyframes tweakedShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-2px, 2px); }
  80%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

.tweaked-word {
  display: inline-block;
  animation: tweakedShift 0.8s infinite steps(2, end),
             tweakedColor 2s infinite linear;
  will-change: transform, color, text-shadow;
}