/* Iron Man HUD Overlay (hud.css) */
.hud {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:25;
}

.hud-ring {
  position:absolute;
  width:140%;
  height:140%;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border:2px solid rgba(0,255,255,0.95);
  border-radius:50%;
  animation:rotateRing 9s linear infinite;
  mix-blend-mode:screen;
  opacity:100;
}

.hud-ring.small {
  width:80%;
  height:80%;
  border-style:dashed;
  animation-duration:6s;
  opacity:0.95;
  border-color:rgba(0,234,255,0.95);
}

.scan-line {
  position:absolute;
  width:120%;
  height:2px;
  left:-10%;
  background:linear-gradient(90deg, transparent, rgba(0,255,255,0.90), transparent);
  animation:scan 3.5s linear infinite;
  mix-blend-mode:screen;
}

.grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:0.6;
  mix-blend-mode:screen;
}

@keyframes rotateRing {
  from { transform:translate(-50%, -50%) rotate(0deg); }
  to   { transform:translate(-50%, -50%) rotate(360deg); }
}

@keyframes scan {
  0%   { top:-2%; opacity:0; }
  10%  { opacity:50; }
  90%  { opacity:50; }
  100% { top:102%; opacity:0; }
}