/* ==========================================================================
   企庭国际商学院 · 九环图 —— 样式
   --------------------------------------------------------------------------
   配色 = 企庭品牌色（实测取样，config.js 的 QT.BRAND）
     primary #1A73E8  logo.png 主色（222,935 px）
     deep    #283894  站点首页出现 75 次的主用深蓝
     dark    #1557B0  --primary-dark
     light   #CFE2FF  浅蓝
     gold    #F0C86A  核心「道」与排行榜专用
   ⛔ 一环「水色双鱼」是老陈点名的水色，不在品牌色替换范围内
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #050B1E;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Segoe UI", "Noto Sans SC", sans-serif;
  color: #E8F0FF;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 舞台 ---------- */
.stage {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 780px at 50% 42%, #0B1D3A 0%, #071329 48%, #050B1E 100%);
  overflow: hidden;
}

/* 星点背景 */
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(207,226,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(207,226,255,.40) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(207,226,255,.45) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 62% 84%, rgba(207,226,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 26%, rgba(207,226,255,.50) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 62%, rgba(207,226,255,.38) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 6% 56%,  rgba(207,226,255,.32) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 54% 92%, rgba(207,226,255,.30) 50%, transparent 51%);
  background-size: 340px 340px;
  opacity: .9;
  pointer-events: none;
}

/* ---------- 四角标头 ---------- */
.corner {
  position: fixed;
  z-index: 30;
  font-size: 15px;
  letter-spacing: 4px;
  color: #CFE2FF;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
  line-height: 1.6;
  pointer-events: none;
}
.corner .en {
  display: block;
  font-size: 9px;
  letter-spacing: 2.4px;
  color: #7E9BC8;
  margin-top: 3px;
}
.corner.tl { left: 26px;  top: 22px; }
.corner.tr { right: 26px; top: 22px; text-align: right; }

/* 左上：企庭盾牌 LOGO + 商学院名 */
.brand { display: flex; align-items: center; gap: 11px; }
.brand img {
  width: 30px; height: 38px;      /* 盾牌原图 73×92，等比 */
  object-fit: contain;
  display: block;
  flex: none;
  filter: drop-shadow(0 2px 10px rgba(26,115,232,.55));
}
.brand .tt {
  display: inline-block;
  font-weight: 500;
  border-left: 3px solid #1A73E8;
  padding-left: 11px;
}

/* 右上：排行榜 */
.corner.tr .tt {
  display: inline-block;
  font-weight: 500;
  border-right: 3px solid #F0C86A;
  padding-right: 11px;
}
.rk-year {
  color: #F0C86A;
  font-size: 12px;
  letter-spacing: 1px;
}

/* ---------- 轨道画布 ---------- */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.orbit > * { pointer-events: auto; }

/* 轨道圈线 —— 品牌蓝（2026-10-21 老陈要求加深） */
.track {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(26,115,232,.38);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- 核心：道 ---------- */
.core {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 42% 36%, #16294C 0%, #0A1B36 60%, #060E1E 100%);
  border: 1px solid rgba(240,200,106,.42);
  font-size: 44px;
  letter-spacing: 0;
  font-weight: 400;
  color: #F0C86A;
  text-shadow: 0 0 26px rgba(240,200,106,.75);
  box-shadow: 0 0 42px rgba(240,200,106,.28), inset 0 0 26px rgba(240,200,106,.10);
  cursor: default;
  z-index: 20;
}

/* ---------- 核心：太极（kind:'taiji'） ---------- */
.core.core-taiji {
  background: none;
  border: none;
}

/* ---------- 环上节点（通用外壳） ---------- */
/* 🔴 left/top 50% = 让节点从圆心出发，transform 才能绕圆心公转 */
.nd {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
}

/* 单字 / 词组节点 */
.nd-node {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(11,29,58,.88);
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  width: 42px;
  height: 42px;
  backdrop-filter: blur(2px);
}
.nd-node.wide { width: 52px; height: 52px; font-size: 12px; }

/* 七色七音 */
.nd-seven { width: 44px; transform: translate(-50%, -50%); text-align: center; }
.nd-seven .dot {
  width: 22px; height: 22px; border-radius: 50%; margin: 0 auto;
}
.nd-seven .cn { font-size: 11px; margin-top: 4px; letter-spacing: 1px; }
.nd-seven .yy { font-size: 9px; color: #89A6CC; letter-spacing: .5px; margin-top: 1px; }

/* 八方八卦 */
.nd-eight { width: 46px; transform: translate(-50%, -50%); text-align: center; }
.nd-eight .gua {
  font-size: 15px; font-weight: 500; letter-spacing: 1px;
}
.nd-eight .dir { font-size: 9px; color: #89A6CC; margin-top: 1px; letter-spacing: .5px; }

/* ---------- 一环：水色双鱼图（老陈点名的水色，不套品牌色） ---------- */
.yy-wrap { transform: translate(-50%, -50%); }
.taiji {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(79,209,224,.42);
  border: 1px solid rgba(79,209,224,.35);
}
.taiji::before, .taiji::after {
  content: '';
  position: absolute;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}
.taiji::before { top: 0; }
.taiji::after  { bottom: 0; }

/* ---------- 核心：太极双鱼图（SVG 真鱼形，覆盖上面的半圆拼法） ---------- */
.taiji.is-fish {
  background: none;
  border: none;
  overflow: visible;
}
.taiji.is-fish::before,
.taiji.is-fish::after { display: none; }
.taiji.is-fish svg { display: block; }

/* ---------- 地支图：十二面（拟盘古开天图，地道右旋） ---------- */
/* 盘中心 = 画布圆心（left/top 50% + 负半宽半高）；十二面绝对定位于盘心，JS 每帧推进 */
.zhi-box {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.zhi {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #9FC4E8;
  text-shadow: 0 0 10px rgba(79, 209, 224, .45);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- 外环：全球百校 ---------- *//* 🔴 left/top 50% = 从圆心出发（同 .nd） */
.sc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform;
  text-decoration: none;
  color: inherit;
}
.sc-in {
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sc-badge {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  border: 1px solid rgba(207,226,255,.34);
  background: #1A73E8;
  box-shadow: 0 1px 6px rgba(0,0,0,.55);
  flex: none;
}
.sc-badge img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sc-name {
  margin-top: 4px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 9px;
  letter-spacing: 1px;
  color: #CFE2FF;
  line-height: 1.25;
  max-height: 66px;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  white-space: nowrap;
}
.sc:hover .sc-badge { transform: scale(1.28); box-shadow: 0 0 16px rgba(240,200,106,.85); }
.sc:hover .sc-name  { color: #F0C86A; }
.sc-badge { transition: transform .18s ease, box-shadow .18s ease; }

/* ---------- 底部说明 ---------- */
.foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  text-align: center;
  font-size: 11px;
  color: #6C86AE;
  letter-spacing: 1.4px;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(5,11,30,.92), rgba(5,11,30,0));
  pointer-events: none;
}
.foot a { color: #8FB3E8; text-decoration: none; pointer-events: auto; }
.foot a:hover { color: #F0C86A; }

.tip {
  position: fixed;
  left: 26px; bottom: 52px;
  z-index: 30;
  font-size: 11px;
  color: #6C86AE;
  letter-spacing: 1.2px;
  pointer-events: none;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 820px) {
  .corner { font-size: 12.5px; letter-spacing: 2.4px; }
  .corner .en { display: none; }
  .corner.tl { left: 14px; top: 14px; }
  .corner.tr { right: 14px; top: 14px; }
  .brand { gap: 8px; }
  .brand img { width: 24px; height: 30px; }
  .rk-year { font-size: 10px; }
  .sc-name { font-size: 7.5px; max-height: 52px; }
  .foot { font-size: 10px; padding: 8px 10px 10px; }
  .tip { display: none; }
}