/* 
  style.css - 样式定制
  打造现代深空科幻与华夏传统天文美学融合的界面，专为中小学大屏、平板触控优化
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

body {
    font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* 玻璃拟态面板 */
.glass-panel {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.08);
}

.glass-panel-warning {
    background: rgba(24, 18, 10, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(245, 158, 11, 0.15);
}

/* 双视口布局模式样式 */
#viewport-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
}

/* 分屏模式 (50:50) */
.layout-split #space-viewport {
    width: 50% !important;
    height: 100% !important;
    border-right: 2px solid #334155;
}
.layout-split #ground-viewport {
    width: 50% !important;
    height: 100% !important;
}

/* 太空为主，地面为画中画 (PIP) */
.layout-space-pip #space-viewport {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}
.layout-space-pip #ground-viewport {
    position: absolute !important;
    bottom: 24px;
    right: 24px;
    width: 440px !important;
    height: 300px !important;
    z-index: 30;
    border-radius: 18px;
    border: 2px solid #38bdf8;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.25);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.layout-space-pip #ground-viewport:hover {
    transform: scale(1.02);
    border-color: #7dd3fc;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.4);
}

/* 地面为主，太空为画中画 (PIP) */
.layout-ground-pip #ground-viewport {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}
.layout-ground-pip #space-viewport {
    position: absolute !important;
    bottom: 24px;
    right: 24px;
    width: 440px !important;
    height: 300px !important;
    z-index: 30;
    border-radius: 18px;
    border: 2px solid #38bdf8;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.25);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.layout-ground-pip #space-viewport:hover {
    transform: scale(1.02);
    border-color: #7dd3fc;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.4);
}

/* 全屏单视口模式 */
.layout-single-space #space-viewport {
    width: 100% !important;
    height: 100% !important;
}
.layout-single-space #ground-viewport {
    display: none !important;
}

.layout-single-ground #ground-viewport {
    width: 100% !important;
    height: 100% !important;
}
.layout-single-ground #space-viewport {
    display: none !important;
}

/* 视口角标标题标签：主视口模式下强制向右偏移避开左侧 320px 控制台面板 */
.viewport-tag {
    position: absolute !important;
    top: 16px !important;
    left: 356px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    pointer-events: auto !important;
    z-index: 25 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
}

/* 当视口处于右下角画中画 (PIP) 模式时，标题标签收敛至画中画卡片左上角，绝不溢出 */
.layout-space-pip #ground-viewport .viewport-tag,
.layout-ground-pip #space-viewport .viewport-tag {
    left: 12px !important;
    top: 12px !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
}

/* 分屏模式下左右各半，左半边避开控制台，右半边居左 */
.layout-split #space-viewport .viewport-tag {
    left: 356px !important;
}
.layout-split #ground-viewport .viewport-tag {
    left: 16px !important;
}

/* 彻底解决右下角重叠：右侧数据面板高度严格锁死在上半屏，与右下角画中画留出宽裕间隔 */
#rightDataPanel {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 320px !important;
    max-height: calc(100vh - 430px) !important;
    min-height: 48px !important;
    overflow-y: auto !important;
    z-index: 20 !important;
}

/* 温度计可视化 */
.thermometer-tube {
    position: relative;
    width: 16px;
    height: 100px;
    background: #1e293b;
    border-radius: 8px;
    border: 1px solid #475569;
    overflow: hidden;
}

.thermometer-mercury {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 8px;
    transition: height 0.3s ease, background-color 0.3s ease;
}

/* 自定义滑块 */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #334155;
    border-radius: 8px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#orbitSlider::-webkit-slider-thumb {
    background: #38bdf8;
    border: 2px solid #ffffff;
}

#hourSlider::-webkit-slider-thumb {
    background: #f59e0b;
    border: 2px solid #ffffff;
}

/* 脉冲光环 */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.7);
    }
}

.pulse-active {
    animation: pulse-glow 2s infinite ease-in-out;
}

/* 大气层穿梭遮罩层 */
#transition-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.8) 40%, rgba(14, 165, 233, 0.4) 100%);
    pointer-events: none;
    z-index: 100;
    display: none;
    transition: opacity 0.3s ease;
}