/* Ticket #9（08）：飞船视图+蛀虫侵蚀+维修 —— D3 剪影装配图样式
 * 红线：仅一次性 CSS transition，无循环动画。 */

.t09-wrap {
  background: var(--ark-bg-panel);
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.t09-wrap.in {
  opacity: 1;
  transform: none;
}

.t09-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.t09-head h1 {
  font-size: 20px;
  margin: 0 8px 0 0;
}
.t09-summary {
  font-size: 13px;
  color: var(--ark-text-dim);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.t09-summary b { color: var(--ark-text); font-weight: 600; }
.t09-summary .warn { color: var(--ark-gold); }
.t09-summary .danger { color: var(--ark-danger); }

.t09-btn {
  padding: 6px 14px;
  border-radius: 0;
  border: 1px solid var(--ark-border);
  background: var(--ark-bg-card);
  color: var(--ark-text);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.t09-btn:hover {
  border-color: var(--ark-accent);
  background: #1b2450;
}
.t09-btn.primary {
  border-color: var(--ark-accent);
  color: var(--ark-accent);
}
.t09-btn.danger {
  border-color: rgba(255, 93, 93, 0.5);
  color: var(--ark-danger);
}
.t09-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- 布局：左 D3 剪影 + 右维修面板 ---- */
.t09-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.t09-svg-wrap { flex: 1 1 560px; min-width: 340px; }
.t09-svg-wrap svg { width: 100%; height: auto; display: block; }

/* ---- D3 剪影区域 ---- */
.t09-zone-deco {
  fill-opacity: 0.12;
  stroke-width: 1.5;
  transition: fill-opacity 0.4s ease;
}
.t09-zone-panel {
  fill: #0c1226;
  fill-opacity: 0.72;
  stroke-width: 1;
  stroke-opacity: 0.4;
}
.t09-zone-label {
  fill: var(--ark-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.t09-zone-sub {
  fill: var(--ark-text-dim);
  font-size: 10.5px;
}

/* ---- 组件槽位 ---- */
.t09-slot { cursor: default; }
.t09-slot.mounted, .t09-slot.damaged { cursor: pointer; }

.t09-slot .cell {
  transition: opacity 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
  opacity: 0.62;
}
.t09-slot .arc {
  transition: stroke 0.3s ease, opacity 0.3s ease;
  opacity: 0.75;
}
.t09-slot.mounted .cell,
.t09-slot.damaged .cell { opacity: 1; }
.t09-slot.mounted .cell {
  stroke-width: 1.4;
  filter: drop-shadow(0 0 3px var(--ark-accent));
}
.t09-slot.damaged .cell {
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(255, 93, 93, 0.5));
}
.t09-slot.empty .cell {
  stroke-dasharray: 3 3;
  stroke-opacity: 0.7;
}

/* 受损：腐蚀蒙版（暗丝纹理）+ 红色调 */
.t09-corr-overlay { pointer-events: none; }

/* 易损标记（额外腐蚀加速） */
.t09-fragile-badge { pointer-events: none; }

/* 巡检命中：一次性闪烁（transition 往返） */
.t09-slot .cell { }
.t09-slot.flash .cell {
  stroke: #ffffff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.9));
  transition: stroke 0.12s ease, filter 0.12s ease;
}

/* ---- 巡检雷达线（一次性 transition，无循环） ---- */
.t09-radar-ring {
  fill: none;
  stroke: var(--ark-glow);
  stroke-width: 1;
}
.t09-radar-line {
  stroke: var(--ark-accent);
  stroke-width: 1.6;
  transform-origin: 420px 280px;
  transform-box: view-box;
  transform: rotate(0deg);
}
.t09-radar-line.run {
  transform: rotate(360deg);
  transition: transform 1.5s cubic-bezier(0.2, 0.6, 0.4, 1);
}

/* ---- F7 跃迁准备度 chip ---- */
.t09-jump-readiness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ark-border, var(--ark-border));
}

.t09-jr-label {
  font-size: 12px;
  color: #8fa3c8;
}

.t09-jr-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid rgba(90, 120, 180, 0.4);
  color: #9fb2d8;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.t09-jr-chip.safe { border-color: rgba(53, 224, 208, 0.6); color: #35e0d0; }
.t09-jr-chip.near { border-color: rgba(255, 154, 61, 0.6); color: #ff9a3d; }
.t09-jr-chip.danger { border-color: rgba(224, 90, 78, 0.6); color: #e05a4e; }
.t09-jr-chip.ready {
  border-color: rgba(53, 224, 208, 0.9);
  color: #35e0d0;
  box-shadow: 0 0 8px rgba(53, 224, 208, 0.35);
}

/* ---- F7 跃迁灯效：三科过线全舰点亮（一次性 transition，无循环） ---- */
.t09-ship-svg.all-ready .t09-slot-mounted {
  filter: drop-shadow(0 0 6px rgba(53, 224, 208, 0.55));
  transition: filter 1.2s ease;
}

/* ---- 维修面板 ---- */
.t09-panel {
  flex: 0 0 330px;
  background: var(--ark-bg-card);
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 14px;
  min-height: 320px;
}
.t09-panel-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.t09-panel-dim { color: var(--ark-text-dim); font-size: 12.5px; margin: 0 0 10px; }

.t09-comp-card {
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(10, 14, 26, 0.5);
}
.t09-comp-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 3px 0;
}
.t09-comp-row .k { color: var(--ark-text-dim); }

.t09-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 0;
  border: 1px solid var(--ark-border);
  color: var(--ark-text-dim);
  white-space: nowrap;
}
.t09-badge.damaged {
  color: #ffb0b0;
  border-color: rgba(255, 93, 93, 0.5);
}
.t09-badge.fragile {
  color: var(--ark-gold);
  border-color: rgba(255, 209, 102, 0.55);
}

.t09-repair-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.t09-repair-btns .t09-btn { text-align: left; display: flex; justify-content: space-between; }
.t09-cost { color: var(--ark-text-dim); font-size: 11.5px; margin-left: 10px; }
.t09-btn .t09-cost.free { color: var(--ark-ok); }

/* ---- 答题区 ---- */
.t09-quiz {
  border: 1px solid var(--ark-accent);
  border-radius: 0;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(20, 32, 70, 0.5);
}
.t09-quiz-stem {
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 8px;
  color: var(--ark-text);
}
.t09-quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.t09-quiz-opt {
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 0;
  border: 1px solid var(--ark-border);
  background: var(--ark-bg-panel);
  color: var(--ark-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.t09-quiz-opt:hover {
  border-color: var(--ark-accent);
  background: #1b2450;
}

/* ---- 结果区 ---- */
.t09-result {
  border-radius: 0;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.55;
}
.t09-result.ok {
  border: 1px solid rgba(111, 227, 161, 0.5);
  background: rgba(20, 50, 36, 0.4);
  color: #b6f2cf;
}
.t09-result.err {
  border: 1px solid rgba(255, 93, 93, 0.5);
  background: rgba(50, 20, 26, 0.4);
  color: #ffc4c4;
}
.t09-result .hint { color: var(--ark-text-dim); font-size: 12px; }

.t09-eroded-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: #ffc4c4; }
.t09-eroded-none { color: var(--ark-ok); font-size: 13px; margin-top: 8px; }

/* 组件图例 */
.t09-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ark-text-dim);
  margin-top: 6px;
}
.t09-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 0;
  margin-right: 5px;
  vertical-align: -1px;
}