/* 首页 3D 知识星图(viewer/star-map.js) */
.star-map {
  --sm-bg: #0d1020; --sm-panel: rgba(18, 22, 42, 0.86); --sm-line: rgba(255, 255, 255, 0.1);
  --sm-text: #eef1fa; --sm-muted: #9aa3bd;
  position: relative; height: 560px; margin-bottom: 28px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 60% 40%, #1a2040 0%, var(--sm-bg) 70%); color: var(--sm-text);
}
.star-map.collapsed { height: auto; background: none; overflow: visible; }
.star-map.collapsed > :not(.sm-expand) { display: none !important; }
.sm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.sm-intro { position: absolute; left: 32px; top: 28px; max-width: 360px; z-index: 2; pointer-events: none; text-shadow: 0 1px 6px rgba(8, 10, 22, 0.9), 0 0 2px rgba(8, 10, 22, 0.9); }
.sm-intro h2 { font-family: Georgia, "Songti SC", "STSong", serif; font-size: 40px; line-height: 1.15; font-weight: 600; margin: 0 0 14px; letter-spacing: 1px; }
.sm-intro p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--sm-text); }
.sm-intro .sm-sub { color: var(--sm-muted); font-size: 13px; }
.sm-tip { position: absolute; z-index: 4; pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: rgba(8, 10, 22, 0.92); border: 1px solid var(--sm-line); font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.sm-tip b { font-weight: 600; }
.sm-tip span { color: var(--sm-muted); }
/* 学科图例:左下角竖排两列(先排满左列再排右列),全部学科一次可见、不出滚动条 */
.sm-legend { position: absolute; left: 20px; bottom: 20px; z-index: 3; padding: 8px 8px 6px 10px; border-radius: 12px; background: var(--sm-panel); border: 1px solid var(--sm-line); backdrop-filter: blur(6px); }
.sm-legend-h { font-size: 10px; letter-spacing: 1px; color: var(--sm-muted); margin: 0 0 4px 3px; }
.sm-legend-list { columns: 2; column-gap: 10px; }
.sm-legend-item { display: flex; align-items: center; gap: 5px; width: 100%; padding: 1px 3px; border: 0; border-radius: 5px; background: none; color: var(--sm-text); font-size: 11px; line-height: 1.45; white-space: nowrap; cursor: pointer; text-align: left; break-inside: avoid; }
.sm-legend-item:hover { background: rgba(255, 255, 255, 0.06); }
.sm-legend-item.off { opacity: 0.35; }
.sm-legend-name { flex: 1; }
.sm-legend-n { margin-left: 6px; color: var(--sm-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.sm-legend-item.empty { opacity: 0.4; }
/* 已掌握:点亮 / 只看 */
.sm-mastery { margin: 0 0 7px; padding: 0 0 8px; border-bottom: 1px solid var(--sm-line); }
.sm-m-h { margin: 0 0 5px 3px; font-size: 11px; color: var(--sm-text); }
.sm-m-h b { color: #ffd678; }
.sm-m-modes { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); }
.sm-m-modes button { flex: 1; padding: 3px 6px; border: 0; border-radius: 5px; background: none; color: var(--sm-muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.sm-m-modes button:hover:not(:disabled) { color: var(--sm-text); }
.sm-m-modes button.on { background: rgba(255, 214, 120, 0.18); color: #ffd678; font-weight: 600; }
.sm-m-modes button:disabled { opacity: 0.4; cursor: default; }
.sm-m-tag { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(111, 220, 140, 0.16); color: #6fdc8c; font-size: 11px; }
.sm-link-name { flex: 1; }
.sm-link-m { color: #6fdc8c; font-size: 12px; }
.sm-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.sm-panel { position: absolute; right: 20px; top: 20px; bottom: 64px; z-index: 3; width: 290px; padding: 16px; border-radius: 12px; background: var(--sm-panel); border: 1px solid var(--sm-line); backdrop-filter: blur(6px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sm-panel[hidden] { display: none; }
.sm-close { position: absolute; right: 10px; top: 8px; border: 0; background: none; color: var(--sm-muted); font-size: 20px; cursor: pointer; }
.sm-p-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sm-muted); }
.sm-p-name { font-size: 18px; font-weight: 600; line-height: 1.35; padding-right: 16px; }
.sm-p-count { font-size: 13px; color: #ffd678; margin-bottom: 4px; }
.sm-p-h { font-size: 11px; letter-spacing: 1px; color: var(--sm-muted); margin-top: 8px; }
.sm-p-list { display: flex; flex-direction: column; gap: 2px; }
.sm-link { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--sm-text); font-size: 13px; text-align: left; cursor: pointer; }
.sm-link:hover { background: rgba(255, 255, 255, 0.08); }
.sm-empty { margin: 2px 6px; font-size: 12px; color: var(--sm-muted); }
.sm-open { margin-top: auto; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--primary, #c8553d); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.sm-open:hover { filter: brightness(1.08); }
.sm-controls { position: absolute; right: 20px; bottom: 18px; z-index: 3; display: flex; gap: 6px; }
.sm-btn { min-width: 32px; height: 30px; padding: 0 10px; border: 1px solid var(--sm-line); border-radius: 8px; background: var(--sm-panel); color: var(--sm-text); font-size: 14px; cursor: pointer; }
.sm-btn:hover { border-color: rgba(255, 255, 255, 0.3); }
.sm-collapse { font-size: 12px; }
.sm-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-10%); z-index: 2; font-size: 12px; color: var(--sm-muted); pointer-events: none; }
.sm-expand { padding: 8px 14px; border: 1px dashed var(--border, #ddd); border-radius: 10px; background: var(--card-bg, #fff); color: var(--text, #333); font-size: 13px; cursor: pointer; }
.sm-expand:hover { border-color: var(--primary, #c8553d); color: var(--primary, #c8553d); }
.sm-error { padding: 24px; color: var(--sm-muted); }

@media (max-width: 1100px) {
  .sm-hint { display: none; }
}
@media (max-width: 900px) {
  .star-map { height: 520px; }
  .sm-intro { left: 18px; top: 16px; max-width: calc(100% - 36px); }
  .sm-intro h2 { font-size: 28px; }
  .sm-intro .sm-sub { display: none; }
  .sm-legend { left: 12px; bottom: 12px; }
  .sm-panel { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 60%; }
}
@media (max-width: 767px) {
  .star-map { display: none; }
}

/* 嵌入模式(直播答题终场等):只留画布,说明文字由宿主页面绘制 */
.star-map.embed { display: block; height: 100%; margin: 0; border-radius: 0; background: transparent; }
.star-map.embed .sm-legend, .star-map.embed .sm-controls, .star-map.embed .sm-hint,
.star-map.embed .sm-panel, .star-map.embed .sm-expand, .star-map.embed .sm-tip { display: none !important; }
.star-map.embed .sm-intro:empty { display: none; }
.star-map.embed .sm-canvas { cursor: default; }