/* ═══════════════════════════════════════════════════════
   militree 小树成长可视化
   ═══════════════════════════════════════════════════════ */

.tree-container {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
  user-select: none;
}
.tree-canvas {
  position: relative;
  width: 180px; height: 240px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
}
/* 树体 — 根据 stage 显示不同内容 */
.tree-body {
  font-size: 120px; line-height: 1;
  transition: all 0.5s ease;
}
/* 花盆/地面 */
.tree-pot {
  font-size: 40px; margin-top: -20px;
  position: relative; z-index: 1;
}
/* 树名标签 */
.tree-label {
  font-size: 14px; font-weight: 700;
  color: var(--primary);
  margin-top: 8px;
}
.tree-detail {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 2px;
}

/* 摇晃动画 */
.tree-body.sway {
  animation: treeSway 2s ease-in-out infinite;
}
@keyframes treeSway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(1.5deg); }
  75%      { transform: rotate(-1.5deg); }
}

/* 升级闪光 */
.tree-body.level-up {
  animation: treeLevelUp 0.8s ease;
}
@keyframes treeLevelUp {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 报告页大尺寸 */
.report-tree .tree-canvas {
  width: 200px; height: 260px;
}
.report-tree .tree-body {
  font-size: 140px;
}
.report-tree .tree-pot {
  font-size: 48px;
  margin-top: -24px;
}

/* 学科卡片缩略树 */
.domain-tree-mini {
  font-size: 36px;
  margin-bottom: 4px;
  transition: transform 0.3s;
}
.domain-card:hover .domain-tree-mini {
  transform: scale(1.1);
}

/* 树名标签 — 阶段对应 */
.tree-stage-0 .tree-label { color: #a8a29e; }
.tree-stage-1 .tree-label { color: #84cc16; }
.tree-stage-2 .tree-label { color: #65a30d; }
.tree-stage-3 .tree-label { color: #4d7c0f; }
.tree-stage-4 .tree-label { color: #3f6212; }
.tree-stage-5 .tree-label { color: #d97706; }
.tree-stage-6 .tree-label { color: #dc2626; }

/* 响应式 — 手机端缩小 */
@media (max-width: 768px) {
  .tree-canvas { width: 140px; height: 190px; }
  .tree-body { font-size: 90px; }
  .tree-pot { font-size: 30px; margin-top: -16px; }
  .report-tree .tree-canvas { width: 150px; height: 200px; }
  .report-tree .tree-body { font-size: 100px; }
  .report-tree .tree-pot { font-size: 36px; margin-top: -20px; }
}