/* frontend/css/knowledge-map.css — 知识地图样式 */
/* 移动端优先 (375px 基准) */

/* ═══ CSS 自定义变量 ═══ */
:root {
  --km-gold: #FFD700;
  --km-gold-glow: rgba(255, 215, 0, 0.35);
  --km-locked: #9CA3AF;
  --km-locked-bg: #E5E7EB;
  --km-node-bg: #FFFFFF;
  --km-node-stroke: #D1D5DB;
  --km-node-radius: 36px;
  --km-progress-ring-size: 44px;
  --km-progress-ring-stroke: 4px;
  --km-bezier-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══ 页面容器 ═══ */
.km-page {
  padding: var(--spacing-md) var(--spacing-sm);
  padding-bottom: 80px;
  max-width: 100%;
  overflow-x: hidden;
}

.km-page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.km-page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

/* ═══ 城堡容器 — 横向滚动 / 竖向堆叠 ═══ */
.km-castles {
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--spacing-xs);
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.km-castles::-webkit-scrollbar {
  display: none;
}

/* >600px 横排自动换行，≤600px 竖排堆叠 */
@media (max-width: 600px) {
  .km-castles {
    flex-direction: column;
    overflow-x: hidden;
    scroll-snap-type: none;
    gap: var(--spacing-xl);
  }
}

/* ═══ 单个城堡 ═══ */
.km-castle {
  flex: 0 0 90%;
  scroll-snap-align: start;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-md);
  position: relative;
  overflow: hidden;
}

@media (min-width: 601px) {
  .km-castle {
    flex: 0 0 340px;
    min-width: 340px;
  }
}

.km-castle-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-border);
}

.km-castle-icon {
  font-size: 28px;
  line-height: 1;
}

.km-castle-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.km-castle-stats {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: right;
}

/* ═══ SVG 地图区域 ═══ */
.km-svg-wrap {
  width: 100%;
  position: relative;
  aspect-ratio: 560 / 420;
  overflow: visible;
}

.km-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══ 连线 (path) ═══ */
.km-path {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition-normal);
}

.km-path--active {
  stroke: var(--km-gold);
  stroke-width: 3;
  filter: drop-shadow(0 0 3px var(--km-gold-glow));
}

/* ═══ 塔楼节点 (circle) ═══ */
.km-node {
  cursor: pointer;
  transition: transform var(--transition-normal) var(--km-bezier-bounce),
              fill var(--transition-normal);
  transform-origin: center;
}

.km-node:active {
  transform: scale(1.12);
}

/* 已掌握 — 金色发光 */
.km-node--mastered {
  fill: var(--km-gold);
  stroke: #E6BE00;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--km-gold-glow));
  animation: km-glow-pulse 2s ease-in-out infinite;
}

/* 学习中 — 白色 + 进度环颜色 */
.km-node--learning {
  fill: var(--km-node-bg);
  stroke: var(--color-primary);
  stroke-width: 2.5;
}

/* 锁定 — 灰色 */
.km-node--locked {
  fill: var(--km-locked-bg);
  stroke: var(--km-locked);
  stroke-width: 2;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ═══ 节点内部文字 ═══ */
.km-node-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-text-primary);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.km-node-label--mastered {
  fill: #FFFFFF;
}

.km-node-label--locked {
  fill: var(--km-locked);
}

/* ═══ 锁定图标 ═══ */
.km-lock-icon {
  font-size: 16px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* ═══ 进度环 (SVG circle overlay) ═══ */
.km-progress-ring-bg {
  fill: none;
  stroke: var(--color-border-light);
  stroke-width: var(--km-progress-ring-stroke);
}

.km-progress-ring-fg {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: var(--km-progress-ring-stroke);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* ═══ 解锁过渡动画 ═══ */
@keyframes km-unlock {
  0% {
    filter: grayscale(1);
    fill: var(--km-locked-bg);
    stroke: var(--km-locked);
  }
  100% {
    filter: grayscale(0);
    fill: var(--km-node-bg);
    stroke: var(--color-primary);
  }
}

.km-node--unlocking {
  animation: km-unlock 0.6s ease forwards;
}

/* ═══ 掌握金色光晕 ═══ */
@keyframes km-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--km-gold-glow));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.55));
  }
}

/* ═══ 学习中闪烁 ═══ */
@keyframes km-learning-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

.km-node--blinking {
  animation: km-learning-blink 2s ease-in-out infinite;
}

/* ═══ 塔楼出现动画 ═══ */
@keyframes km-node-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.km-node {
  animation: km-node-appear 0.45s var(--km-bezier-bounce) both;
}

/* ═══ 详情浮层 ═══ */
.km-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: km-fade-in 0.2s ease;
}

@keyframes km-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.km-detail-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--spacing-lg) var(--spacing-md);
  padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  animation: km-slide-up 0.3s var(--km-bezier-bounce);
  position: relative;
}

@keyframes km-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.km-detail-handle {
  width: 36px;
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  margin: 0 auto var(--spacing-md);
}

.km-detail-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 44px;
  height: 44px;
  border: none;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: 20px;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.km-detail-close:active {
  background: var(--color-border-light);
}

.km-detail-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  padding-right: 52px;
}

.km-detail-subject {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

/* ═══ 浮层进度条 ═══ */
.km-detail-progress-wrap {
  margin-bottom: var(--spacing-md);
}

.km-detail-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.km-detail-progress-bar {
  height: 10px;
  background: var(--color-bg);
  border-radius: 5px;
  overflow: hidden;
}

.km-detail-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  transition: width 0.6s ease;
}

.km-detail-progress-fill--mastered {
  background: linear-gradient(90deg, var(--km-gold), #FFA500);
}

/* ═══ 浮层按钮组 ═══ */
.km-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.km-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 48px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              opacity var(--transition-fast);
  padding: 0 var(--spacing-md);
}

.km-btn:active {
  transform: scale(0.97);
}

.km-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.km-btn--primary:active {
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

.km-btn--secondary {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.km-btn--gold {
  background: linear-gradient(135deg, var(--km-gold), #FFA500);
  color: #5C3D00;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.km-btn--locked {
  background: var(--km-locked-bg);
  color: var(--km-locked);
  cursor: not-allowed;
  opacity: 0.6;
}

.km-btn--locked:active {
  transform: none;
}

/* ═══ 响应式微调 ═══ */
@media (min-width: 601px) {
  .km-page {
    padding: var(--spacing-lg) var(--spacing-lg);
    max-width: 1100px;
    margin: 0 auto;
  }

  .km-castles {
    justify-content: center;
  }

  .km-detail-panel {
    border-radius: var(--radius-lg);
    margin: 0 var(--spacing-md) var(--spacing-md);
    max-height: 60vh;
  }
}

/* ═══ 图例 ═══ */
.km-legend {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.km-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.km-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.km-legend-dot--mastered {
  background: var(--km-gold);
  box-shadow: 0 0 6px var(--km-gold-glow);
}

.km-legend-dot--learning {
  background: var(--color-white);
  border: 2px solid var(--color-primary);
}

.km-legend-dot--locked {
  background: var(--km-locked-bg);
  border: 2px solid var(--km-locked);
}