/* ===========================================
   路线视图组件样式
   =========================================== */

.route-view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 空闲状态 */
.route-view__idle {
  text-align: center;
  padding: var(--spacing-xl);
}

.route-view__welcome h2 {
  margin-bottom: var(--spacing-md);
  color: var(--ink-color);
}

.route-view__welcome p {
  color: var(--ink-faded);
}

/* 活动状态 */
.route-view__active {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

/* 路线主体 */
.route-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}

/* 端点（出发地/目的地）*/
.route-line__endpoint {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.route-line__endpoint--dest {
  flex-direction: column;
}

.route-line__endpoint--origin {
  flex-direction: column;
}

.route-line__endpoint-circle {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color-dark);
  border-radius: 50%;
  background: var(--parchment-light);
}

.route-line__endpoint-label {
  font-family: var(--font-title);
  font-size: var(--font-size-sm);
  color: var(--ink-light);
  white-space: nowrap;
}

/* 路线轨道 */
.route-line__track {
  flex: 1;
  width: 6px;
  background: linear-gradient(
    to bottom,
    var(--border-color-dark) 0%,
    var(--border-color) 50%,
    var(--border-color-dark) 100%
  );
  border-radius: 3px;
  position: relative;
  min-height: 300px;
  margin: var(--spacing-sm) 0;
}

/* 队伍节点 */
.route-line__node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: bottom var(--transition-normal);
  z-index: 10;
}

.route-line__node--player {
  flex-direction: row;
  margin-left: 10px;
}

.route-line__node--drow {
  flex-direction: row-reverse;
  margin-left: -10px;
}

.route-line__node-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--parchment-light);
  box-shadow: var(--shadow-medium);
  transition: transform var(--transition-fast);
}

.route-line__node--player .route-line__node-dot {
  background: var(--player-color);
}

.route-line__node--drow .route-line__node-dot {
  background: var(--drow-color);
}

.route-line__node:hover .route-line__node-dot {
  transform: scale(1.2);
}

.route-line__node-label {
  font-size: var(--font-size-xs);
  font-weight: bold;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
  margin: 0 var(--spacing-xs);
}

.route-line__node--player .route-line__node-label {
  background: var(--player-light);
  color: white;
}

.route-line__node--drow .route-line__node-label {
  background: var(--drow-light);
  color: white;
}

/* 锚点 */
.route-line__anchor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  cursor: pointer;
  transition: bottom var(--transition-normal);
}

.route-line__anchor-icon {
  font-size: 14px;
  display: block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.route-line__anchor--trap .route-line__anchor-icon {
  color: var(--accent-red);
}

.route-line__anchor--debuff .route-line__anchor-icon {
  color: var(--warning-color);
}

/* 状态样式 */
.route-view--caught .route-line__track {
  background: linear-gradient(
    to bottom,
    var(--error-color) 0%,
    var(--accent-red) 50%,
    var(--error-color) 100%
  );
}

.route-view--arrived .route-line__endpoint--dest .route-line__endpoint-circle {
  background: var(--success-color);
  border-color: var(--success-color);
}

.route-view--paused {
  opacity: 0.7;
}