* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

.universe-container {
    width: 100vw; height: 100vh;
    background: radial-gradient(ellipse at center, #0a0e27 0%, #01030c 70%, #000 100%);
    position: relative;
}

.title {
    position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.85); font-size: 22px; font-weight: 300;
    letter-spacing: 8px; z-index: 5; pointer-events: none;
    text-shadow: 0 0 20px rgba(120,180,255,0.6);
}

/* 星空、轨道画布、行星层：铺满并作为绝对定位基准 */
.stars-background,
.orbit-canvas,
.celestial-bodies {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.orbit-canvas { pointer-events: none; z-index: 2; }
.celestial-bodies { z-index: 3; }
.stars-background { z-index: 1; }

.star {
    position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%;
    animation: twinkle 3s infinite;
}
@keyframes twinkle { 50% { opacity: 0.25; } }

/* ============ 天体（太阳 + 行星）通用 ============ */
.item {
    position: absolute; top: 0; left: 0; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: filter 0.3s;
    /* 定位改由 JS 通过 transform 统一设置（含居中位移），走合成层，避免 left/top 触发重排 */
    will-change: transform;
}

.item svg {
    width: 100%; height: 100%;
    overflow: visible;
    transition: transform 0.3s, filter 0.3s;
}
.item svg .stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.item svg .fill-soft { fill-opacity: 0.12; stroke: none; }

/* 自转 */
.item svg .rotor { transform-origin: center; }

.item:hover { z-index: 10; }
.item:hover svg { transform: scale(1.15); }

/* ============ 太阳 ============ */
.item.sun svg .stroke { stroke: #FFB300; }
.item.sun svg .fill-soft { fill: #FF9800; }
.item.sun svg { filter: drop-shadow(0 0 20px rgba(255,170,0,0.85)); }
.item.sun:hover svg { filter: drop-shadow(0 0 34px rgba(255,190,0,1)); }
.item.sun { cursor: pointer; }

/* ============ 行星各自主题色（加大区分度） ============ */
.item.mercury svg .stroke { stroke: #9AA6B2; }  .item.mercury svg .fill-soft { fill: #7C8896; }
.item.venus   svg .stroke { stroke: #FFC93C; }  .item.venus   svg .fill-soft { fill: #F0A500; }
.item.earth   svg .stroke { stroke: #29B6F6; }  .item.earth   svg .fill-soft { fill: #1565C0; }
.item.mars    svg .stroke { stroke: #FF3B2F; }  .item.mars    svg .fill-soft { fill: #C0231A; }
.item.jupiter svg .stroke { stroke: #FF8A3D; }  .item.jupiter svg .fill-soft { fill: #C96A22; }
.item.saturn  svg .stroke { stroke: #E9D48A; }  .item.saturn  svg .fill-soft { fill: #C9B450; }

/* 行星默认微光 + 悬停高亮，颜色与自身主题匹配 */
.item.planet svg { filter: drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
.item.mercury:hover svg { filter: drop-shadow(0 0 16px rgba(154,166,178,0.95)); }
.item.venus:hover   svg { filter: drop-shadow(0 0 16px rgba(255,201,60,0.95)); }
.item.earth:hover   svg { filter: drop-shadow(0 0 16px rgba(41,182,246,0.95)); }
.item.mars:hover    svg { filter: drop-shadow(0 0 16px rgba(255,59,47,0.95)); }
.item.jupiter:hover svg { filter: drop-shadow(0 0 16px rgba(255,138,61,0.95)); }
.item.saturn:hover  svg { filter: drop-shadow(0 0 16px rgba(233,212,138,0.95)); }

/* ============ 标签 ============ */
.label {
    position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
    color: #fff; background: rgba(0,0,0,0.7);
    padding: 4px 10px; border-radius: 4px; font-size: 12px;
    opacity: 0; transition: 0.3s; pointer-events: none;
    white-space: nowrap; border: 1px solid rgba(255,255,255,0.15);
}
.item:hover .label { opacity: 1; bottom: -34px; }

.footer { position: absolute; bottom: 10px; width: 100%; text-align: center; pointer-events: none; z-index: 6; }
.footer p { color: #666; font-size: 12px; }
.footer a { color: #8A2BE2; text-decoration: none; pointer-events: auto; }