* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #03060d;
  color: #00f3ff;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* 2D 해킹 매트릭스 배경 (가장 뒤에 배치) */
#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15; /* 3D 화면을 가리지 않도록 은은하게 처리 */
  pointer-events: none;
}

/* 3D 웹글 공간 (중간에 배치) */
#canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 메인 HUD UI (가장 앞 배치) */
.hud-container {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 10;
  pointer-events: none; /* 클릭 관통 허용 */
  border-left: 4px solid #00f3ff;
  padding: 20px;
  background: rgba(3, 6, 13, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
  max-width: 420px;
}

.hud-header {
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.hud-sub {
  font-size: 0.75rem;
  color: #ff2a00;
  letter-spacing: 3px;
  margin-bottom: 15px;
  font-weight: bold;
}

.status-blink {
  width: 10px;
  height: 10px;
  background-color: #00f3ff;
  border-radius: 50%;
  animation: blink 0.8s infinite alternate;
}

.hud-info {
  font-size: 0.85rem;
  color: #a5c3cf;
  line-height: 1.6;
}

.system-tag { color: #00f3ff; font-weight: bold; }
.mission-title { color: #ff2a00; font-size: 1.1rem; font-weight: bold; display: block; margin-bottom: 8px; }
.ally-title { color: #00ff66; font-size: 1.1rem; font-weight: bold; display: block; margin-bottom: 8px; }

/* 우측 하단 통신 상태창 */
.hud-status-panel {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 10;
  width: 320px;
  background: rgba(3, 6, 13, 0.85);
  border: 1px solid rgba(0, 243, 255, 0.3);
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.05);
  pointer-events: none;
}

.panel-title {
  font-size: 0.8rem;
  font-weight: bold;
  color: #00f3ff;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.status-item {
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  color: #8faab5;
}

.status-value { font-weight: bold; color: #fff; }
.status-value.positive { color: #00ff66; text-shadow: 0 0 8px rgba(0, 255, 102, 0.4); }

/* 프로그레스 바 애니메이션 */
.progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}

.progress-bar-fill {
  width: 45%;
  height: 100%;
  background: #00f3ff;
  box-shadow: 0 0 8px #00f3ff;
  animation: progressMove 4s infinite linear;
}

@keyframes progressMove {
  0% { width: 10%; }
  50% { width: 85%; }
  100% { width: 10%; }
}

@keyframes blink {
  from { opacity: 0.2; }
  to { opacity: 1; }
}