/* 移动端特写场景布局 */

/* 桌面端和pad - 水平布局显示 */
@media (min-width: 769px) {
    #moonViewer,
    #sunViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,
    #solarSystemViewer {
        position: fixed !important;
        top: 70px !important; /* 避开顶部导航栏 */
        width: 90px !important;
        height: 90px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 999 !important;
    }
    
    #moonViewer {
        right: 10px !important;
    }
    
    #sunViewer {
        right: 110px !important;
    }
    
    #sunDirectPointViewer {
        right: 210px !important;
    }
    
    #dayNightViewer {
        right: 310px !important;
    }
    
    #dayNightViewer2 {
        right: 410px !important;
    }
    
    #solarSystemViewer {
        right: 510px !important;
    }
}

/* 桌面端和pad的激活样式 */
@media (min-width: 769px) {
    #moonViewer.active,
    #sunDirectPointViewer.active,
    #dayNightViewer.active,
    #dayNightViewer2.active,
    #solarSystemViewer.active {
        border-color: #0f82f2 !important;
        background: rgba(15, 130, 242, 0.2) !important;
        box-shadow: 0 0 15px rgba(15, 130, 242, 0.6) !important;
        transform: scale(1.1) !important;
    }
    
    #moonViewer.active::before,
    #sunDirectPointViewer.active::before,
    #dayNightViewer.active::before,
    #dayNightViewer2.active::before,
    #solarSystemViewer.active::before {
        background: #0f82f2 !important;
        color: white !important;
        font-weight: bold !important;
    }
}

/* 桌面端和pad的悬停效果 */
@media (min-width: 769px) {
    #moonViewer,
    #sunViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,
    #solarSystemViewer {
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    #moonViewer:hover,
    #sunDirectPointViewer:hover,
    #dayNightViewer:hover,
    #dayNightViewer2:hover,
    #solarSystemViewer:hover {
        transform: scale(1.05);
        border-color: #0f82f2;
        box-shadow: 0 0 10px rgba(15, 130, 242, 0.5);
    }
    
    #moonViewer:active,
    #sunDirectPointViewer:active,
    #dayNightViewer:active,
    #dayNightViewer2:active,
    #solarSystemViewer:active {
        transform: scale(0.95);
    }
}

/* 垂直屏幕 (portrait) - 从上到下排列在右侧 */
@media (max-width: 768px) and (orientation: portrait) {
    #moonViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,#solarSystemViewer {
        position: fixed !important;
        right: 10px !important;
        width: 90px !important;
        height: 90px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 999 !important;
    }
    
    #moonViewer {
        top: 80px !important;
    }
    
    #sunDirectPointViewer {
        top: 180px !important;
    }
    
    #dayNightViewer {
        top: 280px !important;
    }
    
    #dayNightViewer2 {
        top: 380px !important;
    }

    #solarSystemViewer {
        top: 480px !important;
    }
}

/* 水平屏幕 (landscape) - 从右到左排列在顶部，避开导航栏 */
@media (max-width: 1024px) and (orientation: landscape) {
    #moonViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,#solarSystemViewer {
        position: fixed !important;
        top: 70px !important; /* 避开顶部导航栏，假设导航栏高度约60px */
        width: 90px !important;
        height: 90px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 999 !important;
    }
    
    #moonViewer {
        right: 10px !important;
    }
    
    #sunDirectPointViewer {
        right: 110px !important;
    }
    
    #dayNightViewer {
        right: 210px !important;
    }
    
    #dayNightViewer2 {
        right: 310px !important;
    }
    #solarSystemViewer {
        right: 410px !important;
    }
}

/* 小屏幕水平布局优化 - 也避开导航栏 */
@media (max-width: 768px) and (orientation: landscape) {
    #moonViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,#solarSystemViewer {
        width: 90px !important;
        height: 90px !important;
        top: 70px !important; /* 避开顶部导航栏 */
    }
    
    #moonViewer {
        right: 5px !important;
    }
    
    #sunDirectPointViewer {
        right: 105px !important;
    }
    
    #dayNightViewer {
        right: 205px !important;
    }
    
    #dayNightViewer2 {
        right: 305px !important;
    }
    #solarSystemViewer {
        right: 405px !important;
    }
}

/* 添加标签显示 */
@media (max-width: 768px) {
    #moonViewer::before,
    #sunDirectPointViewer::before,
    #dayNightViewer::before,
    #dayNightViewer2::before,#solarSystemViewer::before {
        content: attr(data-label);
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        color: white;
        background: rgba(0, 0, 0, 0.8);
        padding: 2px 6px;
        border-radius: 4px;
        white-space: nowrap;
        z-index: 1000;
    }
}

/* 确保特写场景在移动端可见 */
@media (max-width: 768px) {
    #moonViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,#solarSystemViewer {
        display: block !important;
        visibility: visible !important;
    }
}

/* 添加触摸交互和激活样式 */
@media (max-width: 768px) {
    #moonViewer,
    #sunDirectPointViewer,
    #dayNightViewer,
    #dayNightViewer2,#solarSystemViewer {
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    #moonViewer:hover,
    #sunDirectPointViewer:hover,
    #dayNightViewer:hover,
    #dayNightViewer2:hover,#solarSystemViewer:hover {
        transform: scale(1.05);
        border-color: #0f82f2;
        box-shadow: 0 0 10px rgba(15, 130, 242, 0.5);
    }
    
    #moonViewer:active,
    #sunDirectPointViewer:active,
    #dayNightViewer:active,
    #dayNightViewer2:active,#solarSystemViewer:active {
        transform: scale(0.95);
    }
}

/* 新增：水平屏幕的激活样式 - 提高优先级 */
@media (max-width: 1024px) and (orientation: landscape) {
    #moonViewer.active,
    #sunDirectPointViewer.active,
    #dayNightViewer.active,
    #dayNightViewer2.active,
    #solarSystemViewer.active {
        border-color: #0f82f2 !important;
        background: rgba(15, 130, 242, 0.2) !important;
        box-shadow: 0 0 15px rgba(15, 130, 242, 0.6) !important;
        transform: scale(1.1) !important;
    }
    
    #moonViewer.active::before,
    #sunDirectPointViewer.active::before,
    #dayNightViewer.active::before,
    #dayNightViewer2.active::before,
    #solarSystemViewer.active::before {
        background: #0f82f2 !important;
        color: white !important;
        font-weight: bold !important;
    }
}

/* 新增：小屏幕水平布局的激活样式 - 提高优先级 */
@media (max-width: 768px) and (orientation: landscape) {
    #moonViewer.active,
    #sunDirectPointViewer.active,
    #dayNightViewer.active,
    #dayNightViewer2.active,
    #solarSystemViewer.active {
        border-color: #0f82f2 !important;
        background: rgba(15, 130, 242, 0.2) !important;
        box-shadow: 0 0 15px rgba(15, 130, 242, 0.6) !important;
        transform: scale(1.1) !important;
    }
    
    #moonViewer.active::before,
    #sunDirectPointViewer.active::before,
    #dayNightViewer.active::before,
    #dayNightViewer2.active::before,
    #solarSystemViewer.active::before {
        background: #0f82f2 !important;
        color: white !important;
        font-weight: bold !important;
    }
}

/* 新增：垂直屏幕的激活样式 - 提高优先级 */
@media (max-width: 768px) and (orientation: portrait) {
    #moonViewer.active,
    #sunDirectPointViewer.active,
    #dayNightViewer.active,
    #dayNightViewer2.active,
    #solarSystemViewer.active {
        border-color: #0f82f2 !important;
        background: rgba(15, 130, 242, 0.2) !important;
        box-shadow: 0 0 15px rgba(15, 130, 242, 0.6) !important;
        transform: scale(1.1) !important;
    }
    
    #moonViewer.active::before,
    #sunDirectPointViewer.active::before,
    #dayNightViewer.active::before,
    #dayNightViewer2.active::before,
    #solarSystemViewer.active::before {
        background: #0f82f2 !important;
        color: white !important;
        font-weight: bold !important;
    }
}