/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: linear-gradient(135deg, #0c0c1e 0%, #1a1a3a 50%, #2d1b69 100%);
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* 星空背景动画 */
#stars-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #ddd, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
}

@keyframes sparkle {
    from { transform: translateY(0px); }
    to { transform: translateY(-100px); }
}

/* 主容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* 顶部导航 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo i {
    font-size: 2rem;
    color: #ffd700;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logo h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.nav {
    display: flex;
    gap: 10px;
}

.nav-btn {
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.nav-btn:hover,
.nav-btn.active {
    background: linear-gradient(45deg, #ffd700, #ff6b6b);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* 星座选择器 */
.constellation-selector {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
    padding-bottom: 40px;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    background: linear-gradient(45deg, #ffd700, #ff6b6b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 星座轮盘 - 扩大尺寸以容纳外环星座 */
.zodiac-wheel {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    border-radius: 50%;
    background: 
        /* 内圈太阳区域 */
        radial-gradient(circle at center, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 25%, transparent 40%),
        /* 中圈过渡区域 */
        radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 40%, transparent 65%),
        /* 外圈星座区域 */
        radial-gradient(circle at center, transparent 65%, rgba(255, 215, 0, 0.03) 80%, transparent 100%);
    border: 3px solid rgba(255, 215, 0, 0.3);
    animation: wheelRotate 60s linear infinite, wheelGlow 4s ease-in-out infinite alternate;
    z-index: 15;
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 0 60px rgba(255, 215, 0, 0.1);
}

@keyframes wheelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes wheelGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.2),
            inset 0 0 50px rgba(255, 215, 0, 0.1),
            0 0 60px rgba(255, 215, 0, 0.15);
    }
    to { 
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 0.4),
            inset 0 0 80px rgba(255, 215, 0, 0.2),
            0 0 100px rgba(255, 215, 0, 0.25);
    }
}

/* 太阳中心 */
.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 30%, #fff9e6, #ffd700, #ff8c00, #ff6b47);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.8),
        0 0 80px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    animation: sunPulse 4s ease-in-out infinite, sunRotate 20s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.wheel-center::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.6) 0deg,
        rgba(255, 140, 0, 0.4) 60deg,
        rgba(255, 107, 71, 0.6) 120deg,
        rgba(255, 215, 0, 0.8) 180deg,
        rgba(255, 140, 0, 0.4) 240deg,
        rgba(255, 107, 71, 0.6) 300deg,
        rgba(255, 215, 0, 0.6) 360deg
    );
    animation: sunRays 8s linear infinite;
    z-index: -1;
}

@keyframes sunRays {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sunPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 40px rgba(255, 215, 0, 0.8),
            0 0 80px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 
            0 0 60px rgba(255, 215, 0, 1),
            0 0 120px rgba(255, 215, 0, 0.6),
            inset 0 0 30px rgba(255, 255, 255, 0.4);
    }
}

@keyframes sunRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wheel-center i {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: #ff8c00;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
    animation: iconGlow 3s ease-in-out infinite alternate;
}

@keyframes iconGlow {
    from { 
        color: #ff8c00;
        text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
    }
    to { 
        color: #ffd700;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

.wheel-center span {
    color: #333;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

/* 星座轨道容器 */
.zodiac-signs {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 外环轨道线 - 显示12星座的运行轨道 */
.zodiac-signs::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 30px rgba(255, 215, 0, 0.08);
    animation: orbitGlow 6s ease-in-out infinite alternate;
}

@keyframes orbitGlow {
    from { 
        border-color: rgba(255, 215, 0, 0.3);
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.15),
            inset 0 0 30px rgba(255, 215, 0, 0.08);
    }
    to { 
        border-color: rgba(255, 215, 0, 0.5);
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 0.25),
            inset 0 0 50px rgba(255, 215, 0, 0.15);
    }
}

/* 外环轨道刻度线 - 12个星座的位置标记 */
.zodiac-signs::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    transform: translate(-50%, -50%);
    background: 
        conic-gradient(
            from 0deg,
            transparent 0deg, transparent 1deg,
            rgba(255, 215, 0, 0.4) 1deg, rgba(255, 215, 0, 0.4) 5deg,
            transparent 5deg, transparent 25deg,
            rgba(255, 215, 0, 0.4) 25deg, rgba(255, 215, 0, 0.4) 35deg,
            transparent 35deg, transparent 55deg,
            rgba(255, 215, 0, 0.4) 55deg, rgba(255, 215, 0, 0.4) 65deg,
            transparent 65deg, transparent 85deg,
            rgba(255, 215, 0, 0.4) 85deg, rgba(255, 215, 0, 0.4) 95deg,
            transparent 95deg, transparent 115deg,
            rgba(255, 215, 0, 0.4) 115deg, rgba(255, 215, 0, 0.4) 125deg,
            transparent 125deg, transparent 145deg,
            rgba(255, 215, 0, 0.4) 145deg, rgba(255, 215, 0, 0.4) 155deg,
            transparent 155deg, transparent 175deg,
            rgba(255, 215, 0, 0.4) 175deg, rgba(255, 215, 0, 0.4) 185deg,
            transparent 185deg, transparent 205deg,
            rgba(255, 215, 0, 0.4) 205deg, rgba(255, 215, 0, 0.4) 215deg,
            transparent 215deg, transparent 235deg,
            rgba(255, 215, 0, 0.4) 235deg, rgba(255, 215, 0, 0.4) 245deg,
            transparent 245deg, transparent 265deg,
            rgba(255, 215, 0, 0.4) 265deg, rgba(255, 215, 0, 0.4) 275deg,
            transparent 275deg, transparent 295deg,
            rgba(255, 215, 0, 0.4) 295deg, rgba(255, 215, 0, 0.4) 305deg,
            transparent 305deg, transparent 325deg,
            rgba(255, 215, 0, 0.4) 325deg, rgba(255, 215, 0, 0.4) 335deg,
            transparent 335deg, transparent 355deg,
            rgba(255, 215, 0, 0.4) 355deg, rgba(255, 215, 0, 0.4) 360deg
        );
    border-radius: 50%;
    mask: radial-gradient(circle, transparent 250px, black 260px, black 270px, transparent 280px);
    -webkit-mask: radial-gradient(circle, transparent 250px, black 260px, black 270px, transparent 280px);
}

/* 外环星座布局 - 12个星座分布在外环轨道上 */
.zodiac-item {
    position: absolute;
    width: 100px;
    height: 130px;
    /* 以轮盘中心为原点，半径为260px的外环轨道 */
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    transform: 
        translate(-50%, -50%) 
        rotate(var(--angle)) 
        translateY(-260px) 
        rotate(calc(-1 * var(--angle))); /* 反向旋转保持星座直立 */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: outerOrbitFloat 10s ease-in-out infinite;
    animation-delay: calc(var(--position) * 0.4s); /* 基于位置的延迟 */
    z-index: 10;
}

/* 外环轨道浮动动画 - 模拟天体运动 */
@keyframes outerOrbitFloat {
    0%, 100% { 
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-260px) 
            rotate(calc(-1 * var(--angle)))
            scale(1);
    }
    25% { 
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-270px) 
            rotate(calc(-1 * var(--angle)))
            scale(1.03);
    }
    75% { 
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-250px) 
            rotate(calc(-1 * var(--angle)))
            scale(0.97);
    }
}

/* 外环星座悬停效果 - 星座高亮并放大 */
.zodiac-item:hover {
    transform: 
        translate(-50%, -50%) 
        rotate(var(--angle)) 
        translateY(-240px) 
        rotate(calc(-1 * var(--angle)))
        scale(1.25);
    animation-play-state: paused;
    z-index: 25;
}

/* 外环星座图标 */
.sign-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.15)),
        linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 107, 107, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 12px;
    border: 3px solid rgba(255, 215, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(255, 215, 0, 0.3),
        inset 0 2px 5px rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}

.sign-icon::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.3) 0deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.3) 180deg,
        transparent 270deg,
        rgba(255, 215, 0, 0.3) 360deg
    );
    animation: iconRing 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes iconRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.zodiac-item:hover .sign-icon {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 215, 0, 0.2)),
        linear-gradient(135deg, #ffd700, #ff8c00);
    border-color: #ffd700;
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(255, 215, 0, 0.6),
        inset 0 1px 5px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.zodiac-item:hover .sign-icon::before {
    opacity: 1;
}

.sign-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    transform: rotate(calc(-1 * var(--angle)));
}

.sign-date {
    display: block;
    font-size: 0.6rem;
    opacity: 0.8;
    transform: rotate(calc(-1 * var(--angle)));
}

/* 加载动画 */
.loading {
    display: none;
    text-align: center;
    padding: 50px;
}

.loading.show {
    display: block;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 运势结果 */
.fortune-result {
    display: none;
    animation: slideUp 0.6s ease-out;
    margin-top: 120px;
    position: relative;
    z-index: 1;
    clear: both;
}

.fortune-result.show {
    display: block;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.result-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #ffd700, #ff6b6b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.result-header p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 5px;
}

/* 运势指数圆环 */
.fortune-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.index-item {
    text-align: center;
}

.index-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #333 0deg, #333 var(--progress, 0deg), transparent var(--progress, 0deg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-circle::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c0c1e 0%, #1a1a3a 100%);
}

.index-value {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffd700;
}

.index-circle[data-type="all"] {
    background: conic-gradient(from 0deg, #333 0deg, #ffd700 var(--progress, 0deg), #333 var(--progress, 0deg));
}

.index-circle[data-type="love"] {
    background: conic-gradient(from 0deg, #333 0deg, #ff6b6b var(--progress, 0deg), #333 var(--progress, 0deg));
}

.index-circle[data-type="money"] {
    background: conic-gradient(from 0deg, #333 0deg, #4ecdc4 var(--progress, 0deg), #333 var(--progress, 0deg));
}

.index-circle[data-type="work"] {
    background: conic-gradient(from 0deg, #333 0deg, #45b7d1 var(--progress, 0deg), #333 var(--progress, 0deg));
}

.index-circle[data-type="health"] {
    background: conic-gradient(from 0deg, #333 0deg, #96ceb4 var(--progress, 0deg), #333 var(--progress, 0deg));
}

.index-item h4 {
    font-size: 1rem;
    opacity: 0.9;
}

/* 详细运势卡片 */
.fortune-details {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
}

.detail-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.card-header i {
    font-size: 1.2rem;
    color: #ffd700;
}

.card-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.detail-card p {
    line-height: 1.6;
    opacity: 0.9;
}

/* 幸运信息 */
.lucky-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.lucky-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.lucky-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
}

.lucky-item i {
    font-size: 2rem;
    color: #ffd700;
    margin-bottom: 10px;
    display: block;
}

.lucky-item h4 {
    font-size: 1rem;
    margin-bottom: 10px;
    opacity: 0.9;
}

.lucky-item span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
}

/* 今日宜忌 */
.todo-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.todo-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.todo-item.yi {
    border-left: 4px solid #4ecdc4;
}

.todo-item.ji {
    border-left: 4px solid #ff6b6b;
}

.todo-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
}

.todo-item i {
    font-size: 2rem;
    margin-bottom: 15px;
    display: block;
}

.todo-item.yi i {
    color: #4ecdc4;
}

.todo-item.ji i {
    color: #ff6b6b;
}

.todo-item h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.todo-item span {
    font-size: 1rem;
    opacity: 0.9;
}

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #ffd700, #ff6b6b);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
    flex-direction: column;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.back-to-top.show {
    display: flex;
    animation: bounceIn 0.5s ease-out;
}

.back-to-top i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .header {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .constellation-selector {
        margin-bottom: 60px;
        padding-bottom: 30px;
    }
    
    .fortune-result {
        margin-top: 80px;
    }
    
    .zodiac-wheel {
        width: 420px;
        height: 420px;
    }
    
    .wheel-center {
        width: 100px;
        height: 100px;
        font-size: 0.8rem;
    }
    
    .wheel-center i {
        font-size: 1.4rem;
    }
    
    .zodiac-signs::before {
        width: 360px;
        height: 360px;
    }
    
    .zodiac-signs::after {
        width: 360px;
        height: 360px;
        mask: radial-gradient(circle, transparent 170px, black 180px, black 190px, transparent 200px);
        -webkit-mask: radial-gradient(circle, transparent 170px, black 180px, black 190px, transparent 200px);
    }
    
    .zodiac-item {
        width: 70px;
        height: 90px;
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-180px) 
            rotate(calc(-1 * var(--angle)));
    }
    
    .zodiac-item:hover {
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-165px) 
            rotate(calc(-1 * var(--angle)))
            scale(1.15);
    }
    
    .sign-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }
    
    .sign-name {
        font-size: 0.7rem;
    }
    
    .sign-date {
        font-size: 0.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .result-header h2 {
        font-size: 2rem;
    }
    
    .fortune-index {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .index-circle {
        width: 100px;
        height: 100px;
    }
    
    .todo-info {
        grid-template-columns: 1fr;
    }
    
    .back-to-top {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 0.6rem;
    }
    
    .back-to-top i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .constellation-selector {
        margin-bottom: 40px;
        padding-bottom: 20px;
    }
    
    .fortune-result {
        margin-top: 60px;
    }
    
    .zodiac-wheel {
        width: 340px;
        height: 340px;
    }
    
    .wheel-center {
        width: 80px;
        height: 80px;
        font-size: 0.7rem;
    }
    
    .wheel-center i {
        font-size: 1.2rem;
    }
    
    .zodiac-signs::before {
        width: 280px;
        height: 280px;
    }
    
    .zodiac-signs::after {
        width: 280px;
        height: 280px;
        mask: radial-gradient(circle, transparent 130px, black 140px, black 150px, transparent 160px);
        -webkit-mask: radial-gradient(circle, transparent 130px, black 140px, black 150px, transparent 160px);
    }
    
    .zodiac-item {
        width: 55px;
        height: 75px;
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-140px) 
            rotate(calc(-1 * var(--angle)));
    }
    
    .zodiac-item:hover {
        transform: 
            translate(-50%, -50%) 
            rotate(var(--angle)) 
            translateY(-125px) 
            rotate(calc(-1 * var(--angle)))
            scale(1.1);
    }
    
    .sign-icon {
        width: 45px;
        height: 45px;
        font-size: 1.4rem;
    }
    
    .fortune-index {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}