.cell-environment {
  --m: 40px; /* Unit scale */
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
  perspective: 1000px;
}

.scene-root {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.scene-camera {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  transform: translateZ(500px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(calc(var(--tx) * -1 * var(--m)), 0, calc(var(--tz) * var(--m)));
  transition: transform 0.1s linear;
}

.voxel {
  position: absolute;
  width: var(--m); height: var(--m);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--vx) * var(--m)), calc(var(--vy) * -1 * var(--m)), calc(var(--vz) * -1 * var(--m)));
}

.voxel .face {
  position: absolute; width: 100%; height: 100%;
  border: 1px solid rgba(0, 186, 196, 0.2);
  background: rgba(0, 186, 196, 0.05);
}

.face.front  { transform: rotateY(0deg) translateZ(calc(var(--m) / 2)); }
.face.back   { transform: rotateY(180deg) translateZ(calc(var(--m) / 2)); }
.face.left   { transform: rotateY(-90deg) translateZ(calc(var(--m) / 2)); }
.face.right  { transform: rotateY(90deg) translateZ(calc(var(--m) / 2)); }
.face.top    { transform: rotateX(90deg) translateZ(calc(var(--m) / 2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--m) / 2)); }

.voxel.floor .face.top { background: rgba(0, 186, 196, 0.15); border-color: rgba(0, 186, 196, 0.4); }
.voxel.wall .face { background: rgba(20, 20, 20, 0.8); border-color: rgba(0, 186, 196, 0.1); }

/* Person Particles */
.person-unit {
  width: 0; height: 0;
}

.person-particles {
  transform-style: preserve-3d;
}

.person-particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--accent-cyan);
  pointer-events: none;
  transform: translate3d(calc(var(--px) * var(--m)), calc(var(--py) * -1 * var(--m)), calc(var(--pz) * -1 * var(--m)));
  animation: particle-flicker 2s infinite ease-in-out;
}

@keyframes particle-flicker {
  0%, 100% { opacity: 0.3; transform: translate3d(calc(var(--px) * var(--m)), calc(var(--py) * -1 * var(--m)), calc(var(--pz) * -1 * var(--m))) scale(0.8); }
  50% { opacity: 1; transform: translate3d(calc(var(--px) * var(--m)), calc(var(--py) * -1 * var(--m) + 2px), calc(var(--pz) * -1 * var(--m))) scale(1.2); }
}

.voxel-label {
  position: absolute; top: -20px; left: 50%;
  transform: translateX(-50%) translateZ(20px);
  color: var(--accent-cyan); font-size: 8px; font-family: monospace;
  white-space: nowrap; pointer-events: none;
  opacity: 0.6; letter-spacing: 1px;
}

.target-reticle {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px;
  border: 1px solid rgba(0, 186, 196, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.target-reticle::before, .target-reticle::after {
  content: ''; position: absolute; background: var(--accent-cyan);
}
.target-reticle::before { left: 50%; top: -5px; width: 1px; height: 10px; transform: translateX(-50%); }
.target-reticle::after { top: 50%; left: -5px; height: 1px; width: 10px; transform: translateY(-50%); }