body {
  margin: 0;
  background: #111;
  font-family: 'Open Sans', sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100vmin;
  height: 100vmin;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #888;
  background: #222;
}


.cell {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border: 1px solid #333;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cell.glitch::after {
  background: repeating-linear-gradient(0deg, #aaa 0px, #aaa 1px, transparent 1px, transparent 2px);
  opacity: 0.2;
  animation: glitch 0.3s steps(2, end) infinite;
}

.cell.fade {
  background: #333;
}

.cell.halo {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

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

.cell.glitch-loop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #aaa 0px, #aaa 1px, transparent 1px, transparent 2px);
  opacity: 0.2;
  animation: glitch-loop 0.3s steps(2, end);
}

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