/* ============================================================
   太阳系视图
   AI应用 = 太阳（碎片组成·自转）
   AI音乐 = 地球（碎片组成·绕太阳公转·自转）
   AI视频 = 月球（碎片组成·绕地球公转）
   其余作品 + 常用网站 = 流星
   ============================================================ */
:root {
  --so-sun-1: #fff2c4;
  --so-sun-2: #ffc14d;
  --so-sun-3: #ff7a2f;
  --so-sun-4: #d94a12;
  --so-earth-1: #a9e2ff;
  --so-earth-2: #3d92e0;
  --so-earth-3: #14406e;
  --so-moon-1: #f2f6fc;
  --so-moon-2: #a3b0c4;
  --so-moon-3: #46505f;
}

/* ---------- 舞台 ---------- */
html .so-stage {
  position: relative;
  width: 100%;
  height: 580px;
  margin: 0 0 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(24, 34, 58, .34) 0%, rgba(3, 5, 9, 0) 62%);
  contain: layout paint;
}
html .so-stage::before {
  /* 舞台内的深空压暗，突出天体 */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(255, 196, 90, .07) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* ---------- 轨道线 ---------- */
html .so-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px dashed rgba(140, 170, 210, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html .so-orbit.is-earth { border-color: rgba(90, 170, 255, .22); }
html .so-orbit.is-moon  { border-color: rgba(200, 210, 230, .18); }

/* ---------- 天体 ---------- */
html .so-body {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}
html .so-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

/* 太阳 */
html .so-sun .so-core {
  background:
    radial-gradient(circle at 34% 30%, var(--so-sun-1) 0%, var(--so-sun-2) 34%, var(--so-sun-3) 62%, var(--so-sun-4) 100%);
  box-shadow:
    0 0 34px rgba(255, 168, 60, .55),
    0 0 90px rgba(255, 130, 40, .34),
    0 0 170px rgba(255, 110, 30, .20),
    inset -8px -10px 26px rgba(120, 40, 0, .35);
}
html .so-sun .so-corona {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 74, .30) 0%, rgba(255, 140, 40, .12) 45%, rgba(255, 120, 30, 0) 72%);
  pointer-events: none;
  animation: soCorona 7s ease-in-out infinite;
}
@keyframes soCorona {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
}

/* 地球 */
/* 真实贴图（等距圆柱投影，左右无缝平铺），JS 每帧按自转角度横移 */
html .so-tex {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background-repeat: repeat-x;
  background-position: 0 0;
  pointer-events: none;
  will-change: background-position;
}
html .so-sun .so-tex   { background-image: url('img/tex-sun.jpg'); filter: saturate(1.06) brightness(1.04); }
html .so-earth .so-tex { background-image: url('img/tex-earth.jpg'); filter: saturate(1.18) brightness(1.42) contrast(1.04); }
html .so-moon .so-tex  { background-image: url('img/tex-moon.jpg'); filter: saturate(.72) brightness(1.18) contrast(1.06); }

/* 球面光照：光源在左上前方，右下自然入夜；边缘压暗出球体体积感 */
html .so-shade {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 50%;
  pointer-events: none;
}
html .so-sun .so-shade {
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 252, 232, .34) 0%, rgba(255, 200, 110, .06) 46%, rgba(140, 48, 0, .40) 100%);
  box-shadow: inset -8px -10px 26px rgba(120, 40, 0, .34);
}
html .so-earth .so-shade {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 12, 34, .44) 100%);
  box-shadow: inset -6px -7px 15px rgba(0, 18, 44, .34);
}
html .so-moon .so-shade {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 46%, rgba(8, 12, 20, .60) 100%);
  box-shadow: inset -4px -5px 12px rgba(12, 16, 26, .46);
}

html .so-earth .so-core {
  background:
    radial-gradient(circle at 32% 26%, #dff3ff 0%, var(--so-earth-1) 22%, var(--so-earth-2) 58%, var(--so-earth-3) 100%);
  box-shadow:
    0 0 22px rgba(70, 150, 235, .45),
    0 0 54px rgba(50, 120, 210, .22),
    inset -6px -7px 16px rgba(0, 20, 45, .45);
}
/* 陆地：几块不规则亮斑 */
html .so-earth .so-land {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: .85;
}
html .so-earth .so-land i {
  position: absolute;
  left: 50%; top: 50%;
  will-change: transform, opacity;
  display: block;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  background: linear-gradient(150deg, #4fbf7a 0%, #2f8f5c 60%, #1d6b48 100%);
  opacity: .82;
}
/* 大气辉光 */
html .so-earth .so-atmo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(130, 200, 255, .38);
  box-shadow: 0 0 20px rgba(90, 180, 255, .28), inset 0 0 22px rgba(120, 200, 255, .18);
  pointer-events: none;
}

/* 月球 */
html .so-moon .so-core {
  background:
    radial-gradient(circle at 34% 28%, var(--so-moon-1) 0%, var(--so-moon-2) 56%, var(--so-moon-3) 100%);
  box-shadow:
    0 0 14px rgba(200, 214, 236, .28),
    inset -4px -5px 12px rgba(20, 26, 38, .45);
}
html .so-moon .so-crater {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
html .so-moon .so-crater i {
  position: absolute;
  left: 50%; top: 50%;
  will-change: transform, opacity;
  display: block;
  border-radius: 50%;
  background: rgba(60, 70, 88, .38);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .14);
}

/* ---------- 碎片 ---------- */
html .so-frag {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  overflow: visible;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 28, .72);
  border: 1px solid rgba(150, 180, 215, .34);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  transition: border-color .18s, box-shadow .18s, background .18s;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
html .so-frag img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
html .so-frag .so-fi {
  font-size: 13px;
  line-height: 1;
  color: var(--text-2);
  font-family: var(--mono);
  font-weight: 600;
  pointer-events: none;
}
html .so-sun .so-frag .so-fi { font-size: 15px; color: #fff6e0; text-shadow: 0 1px 4px rgba(120, 50, 0, .55); }
html .so-earth .so-frag .so-fi { font-size: 10px; color: #eaf6ff; }
html .so-moon .so-frag .so-fi { font-size: 8px; color: #f4f8ff; }

/* 碎片形状：统一正圆，排列更整齐、也更好点 */
html .so-frag { border-radius: 50%; }
html .so-frag img { border-radius: 50%; }

/* 按天体配色：碎片是星球的一部分，不是外挂的卡片 */
html .so-sun .so-frag {
  background: rgba(255, 186, 84, .16);
  border-color: rgba(255, 214, 140, .62);
  box-shadow:
    0 0 13px rgba(255, 172, 66, .38),
    inset 2px 3px 8px rgba(255, 220, 150, .26),
    inset -3px -4px 9px rgba(120, 40, 0, .42);
}
html .so-earth .so-frag {
  background: rgba(58, 138, 218, .24);
  border-color: rgba(160, 212, 255, .62);
  box-shadow:
    0 0 11px rgba(74, 152, 235, .38),
    inset 2px 2px 6px rgba(200, 235, 255, .24),
    inset -3px -3px 7px rgba(10, 40, 80, .45);
}
html .so-moon .so-frag {
  background: rgba(178, 194, 214, .26);
  border-color: rgba(222, 233, 248, .60);
  box-shadow: 0 0 9px rgba(200, 216, 238, .30);
}
/* 会员标识沿用后台 tags 判定（vip/free 类由 JS 打），但视觉上从「整圈青边」
   改成右上角小角标 —— 20/23 都是会员，整圈青边会把金色太阳染成青色。 */
html .so-frag.vip::after,
html .so-frag.free::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
html .so-frag.vip::after {
  background: #22d3ee;
  box-shadow: 0 0 7px rgba(34, 211, 238, .95), 0 0 2px #fff;
}
html .so-frag.free::after {
  background: #39ff88;
  box-shadow: 0 0 7px rgba(57, 255, 136, .95), 0 0 2px #fff;
}

@media (hover: hover) {
  html .so-frag:hover {
    border-color: var(--accent);
    box-shadow: 0 0 9px rgba(34, 211, 238, .55);
    background: rgba(12, 22, 36, .92);
    z-index: 600 !important;
  }
  html .so-frag:hover .so-tip { opacity: 1; transform: translate(-50%, -6px); }
}
html .so-frag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 碎片名提示 */
html .so-tip {
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translate(-50%, 2px);
  padding: 4px 9px;
  border-radius: 2px;
  background: rgba(6, 10, 18, .96);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, transform .16s;
}
html .so-tip .so-tip-c { color: var(--text-3); margin-right: 6px; }

/* ---------- 天体铭牌 ---------- */
html .so-plate {
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: rgba(6, 10, 18, .86);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html .so-plate b { color: var(--text); font-weight: 600; }
html .so-plate .n { color: var(--accent); }
@media (hover: hover) {
  html .so-plate:hover { border-color: var(--accent); color: var(--accent); }
}
html .so-plate .dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

/* 地球铭牌放上方：月球在下方绕行，两者铭牌不再打架 */
html .so-earth .so-plate {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, -12px);
}

/* 月球铭牌甩到右侧：三个铭牌各占一个方向，永不叠在一起 */
html .so-moon .so-plate {
  top: 50%;
  left: 100%;
  bottom: auto;
  transform: translate(10px, -50%);
}

/* ---------- 流星 ---------- */
html .so-meteor {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
  pointer-events: none;
}
html .so-meteor .mt-head {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 28px rgba(140, 210, 255, .85), 0 0 46px rgba(90, 170, 255, .45);
  flex: 0 0 auto;
}
html .so-meteor .mt-tail {
  position: absolute;
  right: 4px; top: 50%;
  height: 1px;
  width: 170px;
  transform: translateY(-50%);
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(160, 210, 255, .45) 45%, rgba(220, 240, 255, .85) 82%, #fff 100%);
  box-shadow: 0 0 6px rgba(190, 225, 255, .55);
}
html .so-meteor .mt-name {
  position: absolute;
  left: 14px; top: 50%;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(140, 180, 220, .34);
  background: rgba(6, 10, 18, .84);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (hover: hover) {
  html .so-meteor .mt-name:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px rgba(34, 211, 238, .35);
  }
}

/* ---------- 图例 ---------- */
html .so-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
html .so-lg,
html .so-legend .so-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  min-height: 30px;
}
html .so-lg { cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
html .so-lg b { color: var(--text); font-weight: 600; }
@media (hover: hover) {
  html .so-lg:hover { border-color: var(--accent); color: var(--accent); background: rgba(34, 211, 238, .08); }
}
html .so-legend .so-hint { border-style: dashed; opacity: .8; cursor: default; }
html .so-legend i {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}

/* ---------- 降级：降低动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html .so-sun .so-corona { animation: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  html .so-stage { height: 530px; }
}
@media (max-width: 768px) {
  html .so-stage { height: 620px; border-radius: 4px; }
  html .so-sun .so-frag .so-fi { font-size: 11px; }
  html .so-earth .so-frag .so-fi { font-size: 8px; }
  html .so-moon .so-frag .so-fi { font-size: 7px; }
  html .so-frag.vip::after,
  html .so-frag.free::after { width: 5px; height: 5px; }
  html .so-tip { display: none; }
  html .so-plate { display: none; }
  html .so-lg { min-height: 36px; }
  html .so-meteor .mt-name { font-size: 10px; max-width: 140px; padding: 3px 6px; }
  html .so-meteor .mt-tail { width: 76px; }
  html .so-plate { font-size: 10px; padding: 3px 8px; }
}
@media (max-width: 480px) {
  html .so-stage { height: 600px; }
  html .so-legend { font-size: 10px; }
}

/* ---------- 视图切换条 ---------- */
html .viewbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
html .view-switch {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
}
html .vs-btn {
  padding: 7px 14px;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: color .16s, background .16s;
}
html .vs-btn + .vs-btn { border-left: 1px solid var(--line); }
@media (hover: hover) { html .vs-btn:hover { color: var(--text); background: rgba(34, 211, 238, .07); } }
html .vs-btn.active {
  background: rgba(34, 211, 238, .14);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
html .vs-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  opacity: .85;
}
@media (max-width: 768px) {
  html .viewbar { gap: 8px; }
  html .vs-note { width: 100%; }
}