/* ==================== 全局重置 & 容器 ==================== */
* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, html, #pano-container { 
    width: 100%; height: 100%; overflow: hidden; background-color: #000; font-family: sans-serif; 
}

/* 右上角工具栏固定定位与布局 */
#toolbar {
    position: fixed;
    /* 适配手机刘海屏/异形屏安全区域 */
    top: max(16px, env(safe-area-inset-top, 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.tool-btn {
    width: 42px;
    height: 42px;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px); /* 模糊背景增加质感 */
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent; /* 消除移动端点击蓝框 */
}

/* 移动端触摸按压反馈 */
.tool-btn:active {
    transform: scale(0.92);
    background-color: rgba(24, 144, 255, 0.8);
}

/* 电脑端 Hover 效果（仅在支持悬停的设备上生效） */
@media (hover: hover) {
    .tool-btn:hover {
        background-color: rgba(24, 144, 255, 0.8);
        transform: scale(1.05);
    }
}

.tool-btn svg {
    width: 22px;
    height: 22px;
}

/* 热点开关关闭时的标 */
.badge.off {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #ff4d4f;
    border-radius: 50%;
}

/* ================================================================
   搜索面板（移动端 & 桌面端适配）
   ================================================================ */
.search-modal {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 16px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); /* 左右留边 */
    max-width: 480px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-modal.hidden {
    display: none;
}

.search-box-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 8px 6px 16px;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

#search-input {
    flex: 1;
    border: none;
    outline: none;
    /* 关键：必须>=16px，防止 iOS Safari 聚焦输入框时自动放大屏幕 */
    font-size: 16px; 
    color: #333;
    background: transparent;
    padding: 4px 0;
    line-height: normal;
}

#search-cancel-btn {
    border: none;
    background: #f0f0f0;
    color: #555;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s;
}

#search-cancel-btn:active {
    background: #e0e0e0;
}

/* 搜索结果列表 */
.search-results-list {
    max-height: 45vh; /* 设置为视口高度百分比，适应软键盘弹起 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 顺畅滚动 */
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.search-results-list:empty {
    display: none;
}

.search-item {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:active {
    background-color: #f5f5f5;
}

.search-item .campus-tag {
    font-size: 12px;
    color: #888;
    background: #f2f2f2;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 8px;
}

.search-item.no-result {
    color: #999;
    text-align: center;
    cursor: default;
    justify-content: center;
}


/* ================================================================
   小屏手机特殊微调 (屏幕宽度 <= 480px)
   ================================================================ */
@media (max-width: 480px) {
    #toolbar {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: max(12px, env(safe-area-inset-right, 12px));
        gap: 8px;
    }

    .tool-btn {
        width: 38px;
        height: 38px;
    }

    .tool-btn svg {
        width: 18px;
        height: 18px;
    }

    .search-modal {
        top: max(12px, env(safe-area-inset-top, 12px));
        width: calc(100% - 114px);
    }
}


/* ==================== 左上角校徽 ==================== */
.logo-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    width: 80px; 
    height: auto;
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.5));
    pointer-events: auto;
    cursor: pointer;         /* 让鼠标放上去变成小手 */
    transition: transform 0.1s ease; /* 点击反馈动画 */
}
/* 让校徽被点击时有一点按压缩放效果 */
.logo-icon:active {
    transform: scale(0.92);
}

/* ==================== 🔥 样式1: 动态向前流动箭头 (原有样式) ==================== */
.hotspot-arrow {
    width: 60px;
    height: 60px;
    cursor: pointer;
    /*position: relative;*/
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    display: flex;
    justify-content: center;
    align-items: center;
}
.arrow-container {
    width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.arrow-container svg {
    position: absolute; width: 38px; height: 16px; fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: arrowFlow 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.arrow-container svg:nth-child(1) { animation-delay: 0s; }
.arrow-container svg:nth-child(2) { animation-delay: 0.5s; }
@keyframes arrowFlow {
    0% { transform: translateY(12px) scale(1.05); opacity: 0; }
    20% { opacity: 0.95; }
    80% { opacity: 0.4; transform: translateY(-8px) scale(0.8); }
    100% { transform: translateY(-16px) scale(0.55); opacity: 0; }
}
.hotspot-arrow:hover .arrow-container svg { stroke: #1890ff; }

/* ==================== 🖼️ 样式2: 本地图片图标 (新增) ==================== */
.hotspot-image {
    width: 60px;
    height: 60px;
    cursor: pointer;
    /*position: relative;*/
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    display: flex;
    justify-content: center;
    align-items: center;
    /* transition: transform 0.3s ease;  /* 会随着全景图像的转动而转动*/
}
.hotspot-image:hover {
    transform: scale(1.2);
}

/* 本地图标样式 */
.hotspot-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    pointer-events: none;
    animation: float 2s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* 悬停光晕效果 (仅图片样式) */
.hotspot-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 144, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.hotspot-image:hover::before {
    opacity: 1;
}


/* ==================== ↩️ 样式3: 动态直走右拐箭头 (新增) ==================== */
.hotspot-turn-right {
    width: 60px;
    height: 60px;
    cursor: pointer;
    /*position: relative;*/
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    display: flex;
    justify-content: center;
    align-items: center;
}
.turn-right-container {
    width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;
}
.turn-right-container svg {
    position: absolute; 
    width: 42px;   /* 根据拐弯拉长后的比例适配 */
    height: 32px; 
    fill: none; 
    stroke: #ffffff; 
    stroke-width: 5.5; /* 略微加粗，更符合图片中硬朗饱满的视觉 */
    stroke-linecap: round; 
    stroke-linejoin: round; 
    opacity: 0; 
    /* 绑定全新定制的向右前方流动的动画 */
    animation: arrowFlowRight 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* 双层交错发射，形成完美的周而复始流动感 */
.turn-right-container svg:nth-child(1) { animation-delay: 0s; }
.turn-right-container svg:nth-child(2) { animation-delay: 0.5s; }

/* 仿照图片透视感打造的“向右前流动”专属动效 */
@keyframes arrowFlowRight {
    0% { 
        /* 诞生点：略靠左下方，体积微大 */
        transform: translate(-6px, 6px) scale(1.05); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.95; 
    }
    80% { 
        /* 运动中：向右上方冲刺滑行，并等比例缩小，模拟空间远去感 */
        opacity: 0.4; 
        transform: translate(8px, -4px) scale(0.8); 
    }
    100% { 
        /* 终点：滑行至右前远端，淡出消失 */
        transform: translate(16px, -8px) scale(0.6); 
        opacity: 0; 
    }
}

/* ==================== ↩️ 样式4: 动态直走左拐箭头 (新增) ==================== */
.turn-left-container {
    width: 100%; 
    height: 100%; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    /* ★ 核心魔法：水平翻转整个容器！直接实现镜像，且流动动画也会自动向左反转 */
    transform: scaleX(-1);
}

.turn-left-container svg {
    position: absolute; 
    width: 42px;   
    height: 32px; 
    fill: none; 
    stroke: #ffffff; 
    stroke-width: 5.5; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    opacity: 0; 
    /* 直接复用向右流动的动画，在镜像容器中它看起来就是向左流动 */
    animation: arrowFlowRight 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.turn-left-container svg:nth-child(1) { animation-delay: 0s; }
.turn-left-container svg:nth-child(2) { animation-delay: 0.5s; }

/* 统一处理两种拐弯箭头的悬停变色 */
.hotspot-container:hover .turn-left-container svg,
.hotspot-container:hover .turn-right-container svg { 
    stroke: #1890ff; 
}

/* 热点容器：确保图标和文字垂直排列且水平居中 */
.hotspot-container {
    position: relative;     /* 确保 tooltip 能以它为基准进行绝对定位 */
    display: flex;
    flex-direction: column; /* 图标在上，文字在下 */
    align-items: center;    /* ★ 核心：水平方向居中对齐 */
    justify-content: center;
    pointer-events: auto;   /* 确保鼠标能穿透到图标进行点击 */
    cursor: pointer;        /* 鼠标悬停时显示小手图标 */
}

/* 悬停时变蓝 */
.hotspot-turn-right:hover .turn-right-container svg { stroke: #1890ff; }

/* ==================== ℹ️ 样式5: 信息展示图标 (新增) ==================== */
.hotspot-info {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.info-icon {
    width: 45px; /* 你可以根据你的图标大小调整 */
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    transition: transform 0.2s ease;
    animation: float 2s ease-in-out infinite; /* 复用你之前写的悬浮动画 */
}

.hotspot-info:hover .info-icon {
    transform: scale(1.15);
}

/* ==================== 移动端适配：信息热点 ==================== */
@media (max-width: 768px) {
    /* 1. 缩小图标尺寸 */
    .info-icon {
        width: 32px;   /* 或者 36px，视设计偏好 */
        height: 32px;
    }
}

.info-panel {
    position: absolute;
    left: 100%; /* 固定显示在图标的右侧 */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 15px; /* 距离图标的间距 */
    background: rgba(30, 30, 30, 0.75); /* 半透明暗色背景 */
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.6;
    width: max-content;
    max-width: 400px; /* 限制最大宽度，文字过多会自动换行 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); /* 毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 默认隐藏，使用 opacity 和 visibility 配合实现淡入淡出 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* 防止面板本身遮挡鼠标事件 */
}

/* 激活状态：显示文字面板并带一点滑出动效 */
.hotspot-info.show-text .info-panel {
    opacity: 1;
    visibility: visible;
    margin-left: 20px; 
}

/* ==================== 通用工具提示 ==================== */
.hotspot-tooltip {
    /* --- 新增/修改的核心定位 --- */
    position: absolute;
    bottom: 100%;             /* 将文字顶到图标的正上方 */
    left: 50%;                /* 水平居中起点 */
    transform: translateX(-50%); /* 修正自身一半的宽度实现完美居中 */
    margin-bottom: 14px;        /* 图标和文字之间的间距 */
    background: rgba(50, 50, 50, 0.7); 
    color: #fff; 
    padding: 6px 14px; 
    border-radius: 6px; 
    font-size: 15px; 
    white-space: nowrap; 
    pointer-events: none; 
    display: block;  /* 一直显示标签文字 */
    /*display: none;*/  /* 鼠标悬停显示标签文字 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    /*border: 1px solid rgba(255,255,255,0.1);*/
}
.hotspot-arrow:hover .hotspot-tooltip,
.hotspot-image:hover .hotspot-tooltip { 
    display: block; 
}

/* ================================================================
   📱 移动端适配：所有热点样式（屏幕宽度 ≤ 768px）
   ================================================================ */
@media (max-width: 768px) {

    /* ---------- 样式1: 动态向前流动箭头 ---------- */
    .hotspot-arrow {
        width: 44px;
        height: 44px;
    }
    .arrow-container svg {
        width: 28px;
        height: 12px;
        stroke-width: 4;
    }
    @keyframes arrowFlow {
        0% { transform: translateY(8px) scale(1.05); opacity: 0; }
        20% { opacity: 0.95; }
        80% { opacity: 0.4; transform: translateY(-6px) scale(0.8); }
        100% { transform: translateY(-12px) scale(0.55); opacity: 0; }
    }

    /* ---------- 样式2: 本地图片图标 ---------- */
    .hotspot-image {
        width: 44px;
        height: 44px;
    }
    .hotspot-image:hover {
        transform: scale(1.1);
    }
    .hotspot-icon {
        width: 32px;
        height: 32px;
    }
    .hotspot-image::before {
        width: 52px;
        height: 52px;
    }

    /* ---------- 样式3: 直走右拐箭头 ---------- */
    .hotspot-turn-right {
        width: 44px;
        height: 44px;
    }
    .turn-right-container svg {
        width: 30px;
        height: 22px;
        stroke-width: 4;
    }
    @keyframes arrowFlowRight {
        0% { transform: translate(-4px, 4px) scale(1.05); opacity: 0; }
        20% { opacity: 0.95; }
        80% { opacity: 0.4; transform: translate(6px, -3px) scale(0.8); }
        100% { transform: translate(12px, -6px) scale(0.6); opacity: 0; }
    }

    /* ---------- 样式4: 直走左拐箭头 ---------- */
    .turn-left-container svg {
        width: 30px;
        height: 22px;
        stroke-width: 4;
    }

    /* ---------- 样式5: 信息展示图标（保持右侧显示） ---------- */
    .hotspot-info {
        padding: 3px;
    }
    .info-icon {
        width: 34px;
        height: 34px;
    }
    .hotspot-info:hover .info-icon {
        transform: scale(1.1);
    }
    .info-panel {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 7px;
        font-size: 10px;
        padding: 10px 14px;
        max-width: 220px;
        border-radius: 6px;
    }
    .hotspot-info.show-text .info-panel {
        margin-left: 7px;
    }

    /* ---------- 通用 tooltip ---------- */
    .hotspot-tooltip {
        font-size: 12px;
        padding: 4px 10px;
        margin-bottom: 10px;
    }

    /* ---------- 浮动动画 ---------- */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }
}

/* ==================== 加载器：完全隐藏 ==================== */
#loader {
    display: none !important;
}

/* ==================== 底部控制面板 ==================== */
#control-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px; 
    z-index: 5;
    pointer-events: none; 
    /* 面板显示/隐藏的丝滑过渡动画 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
/* 面板被隐藏时的状态（往下掉出屏幕并变透明） */
#control-panel.hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none !important;
}

/* ----- 场景卡片预览栏 ----- */
#scenes-preview-bar {
    align-self: center;
    display: none; 
    gap: 16px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    margin-bottom: 16px; 
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;

    /* 👇 核心修改：开启横向滑动 👇 */
    max-width: 95vw;          /* 限制最大宽度，给屏幕两边留一点空隙 */
    overflow-x: auto;         /* 开启横向滚动 */
    overflow-y: hidden;       /* 禁止纵向滚动 */
    -webkit-overflow-scrolling: touch; /* iOS 开启物理惯性丝滑滚动 */
    scrollbar-width: none;     /*Firefox 隐藏滚动条 */
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 极简自定义滚动条 ==================== */

/* 针对 Firefox 浏览器 */
#scenes-preview-bar, 
#buildings-nav-bar {
    scrollbar-width: thin; /* 设置为细滚动条 */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* 滑块半透明白，轨道透明 */
}

/* 针对 Chrome / Safari / Edge / iOS 浏览器 */
#scenes-preview-bar::-webkit-scrollbar,
#buildings-nav-bar::-webkit-scrollbar {
    height: 4px; /* 设置横向滚动条的高度，4px非常细致优雅 */
}

#scenes-preview-bar::-webkit-scrollbar-track,
#buildings-nav-bar::-webkit-scrollbar-track {
    background: transparent; /* 让滚动条的轨道完全透明 */
}

#scenes-preview-bar::-webkit-scrollbar-thumb,
#buildings-nav-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* 滑块颜色：半透明的白色 */
    border-radius: 4px; /* 滑块两端变圆润 */
}

/* 当用户手指按下或鼠标悬停在滚动条上时，稍微变亮一点 */
#scenes-preview-bar::-webkit-scrollbar-thumb:hover,
#buildings-nav-bar::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.6); 
}

/* ==================== 场景缩略图控制 ==================== */
.scene-card {
    width: 140px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.5); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* 👇 核心修改：防止卡片在空间不够时被挤压变窄 👇 */
    flex-shrink: 0; 
}

.scene-card {
    width: 140px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 3px solid rgb(255, 255, 255); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.scene-card:hover {
    border-width: 3px;
    transform: scale(1.12); 
    border-color: #52c41a; 
    box-shadow: 0 0 12px rgba(82, 196, 26, 0.6);
    /* border-color: #1890ff;
    box-shadow: 0 0 15px rgba(24, 144, 255, 0.8); */
}
.scene-card.active {
    border-width: 2px;
    border-color: #52c41a; 
    box-shadow: 0 0 12px rgba(82, 196, 26, 0.6);
}
.scene-card img {
    width: 100%; height: 100%; object-fit: cover;
}
.scene-card .scene-tag {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff; font-size: 11px; text-align: center; padding: 4px 0;
}

/* ----- 底部通栏 ----- */
.dock-container {
    width: 100%;
    background: rgba(10, 10, 10, 0.88); 
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
}

.panel-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 90%
    );
}

/* ----- 建筑分类导航 ----- */
#buildings-nav-bar {
    display: none; 
    width: 100%;
    padding: 10px 0;

    /* 👇 核心修改：开启横向滑动 👇 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-inner-track {
    display: flex;
    gap: 28px; 
    /* justify-content: center;  ❌ 注意：务必删掉这行居中对齐，否则在手机上左侧溢出的内容会滑不到 */
    
    /* 👇 核心修改：保证内容能完全撑开，并留出左右边距 👇 */
    min-width: max-content; 
    padding: 0 20px;
}

.nav-inner-track {
    display: flex;
    gap: 28px; 
    justify-content: center; 
}
.build-btn {
    text-align: center;
    padding: 6px 4px; 
    color: rgba(255, 255, 255, 0.6); 
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: none; 
    border: none;     
    border-bottom: 2px solid transparent; 
    transition: all 0.25s ease;
    white-space: nowrap;
}
.build-btn:hover { color: #ffffff; }
.build-btn.active {
    color: #ffffff; 
    font-weight: 600;
    border-bottom: 2px solid #1890ff; 
}

/* ----- 校区切换 ----- */
#campus-zone-bar {
    width: 100%;
    display: flex;
    gap: 40px;
    padding: 14px 0;
    justify-content: center; 
}
.campus-btn {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
.campus-btn:hover { color: #fff; }
.campus-btn.active {
    color: #ffffff;
    border-bottom: 2px solid #1890ff; 
}

/* ==================== 小地图功能样式 ==================== */
#map-toggle-icon {
    /* position: absolute;
    top: 20px;
    right: 20px; */
    z-index: 10;
    /* width: 44px; */
    /* height: 44px; */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    color: white;
}
#map-toggle-icon:hover {
    background: rgba(24, 144, 255, 0.8);
    transform: scale(1.05);
}
#map-toggle-icon svg {
    width: 24px;
    height: 24px;
}

#map-panel {
    position: absolute;
    top: 75px;
    right: 20px;
    z-index: 9;

    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);

    /* ★ 新增：隐藏内部溢出的地图 */
    overflow: hidden;

    /* 过渡动画 */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#map-panel.hidden {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    pointer-events: none;
}

/* ★ 新增：专门包裹地图和箭头的容器，用于整体缩放和位移 */
.map-img-wrapper {
    position: relative;
    /* width: 100%;
    height: 100%; */
    transform-origin: 0 0; /* 以左上角为缩放基准点 */
    cursor: grab; /* 抓取手型 */
    user-select: none;
    /* 👇 就是加上下面这两行 👇 */
            display: inline-block; 
            vertical-align: top;
}
.map-img-wrapper:active {
    cursor: grabbing; /* 正在拖拽的手型 */
}



/* ★ 新增：隐藏非当前激活的地图容器 */
.hidden-map {
    display: none !important;
}

/*不同校区使用不同的尺寸 */
#map-wrapper-yaohu {
    width: 530px !important; 
    height: auto !important; 
    aspect-ratio: 640 / 570 !important;
}

#map-wrapper-qingshanhu {
    width: 530px !important; 
    height: auto !important; 
    aspect-ratio: 1024 / 1280 !important;
}

/* 强制图片铺满并保持原有的留白计算模式 */
.campus-map-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    display: block;
    pointer-events: none;
    border-radius: 8px;
}

/* 统一的箭头容器 */
.map-arrows-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none; 
}

/* ==================== 小地图导航箭头 ==================== */
.map-arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #FF4500;
    border: 1px solid #ffffff;
    display: none;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8));
    will-change: transform, opacity;
    /* transform 由 JavaScript 统一控制，实现反向缩放 */
}

/* 激活状态的箭头：呼吸动画仅修改透明度与光晕，不干扰 transform */
.map-arrow.active {
    display: block;
    animation: arrowPulse 1.5s infinite ease-in-out;
}

@keyframes arrowPulse {
    0% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.5); }
    50% { opacity: 1; box-shadow: 0 0 0 8px rgba(255, 69, 0, 0.2); }
    100% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.5); }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
    .logo-icon {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        width: 40px; 
        height: auto;
    }
    /* ---------- 样式1: 动态向前流动箭头 ---------- */
    .hotspot-arrow {
        width: 44px;
        height: 44px;
    }
    .arrow-container svg {
        width: 28px;
        height: 12px;
        stroke-width: 4;
    }
    @keyframes arrowFlow {
        0% { transform: translateY(8px) scale(1.05); opacity: 0; }
        20% { opacity: 0.95; }
        80% { opacity: 0.4; transform: translateY(-6px) scale(0.8); }
        100% { transform: translateY(-12px) scale(0.55); opacity: 0; }
    }

    /* ---------- 样式2: 本地图片图标 ---------- */
    .hotspot-image {
        width: 44px;
        height: 44px;
    }
    .hotspot-image:hover {
        transform: scale(1.1);
    }
    .hotspot-icon {
        width: 32px;
        height: 32px;
    }
    .hotspot-image::before {
        width: 52px;
        height: 52px;
    }

    /* ---------- 样式3: 直走右拐箭头 ---------- */
    .hotspot-turn-right {
        width: 44px;
        height: 44px;
    }
    .turn-right-container svg {
        width: 30px;
        height: 22px;
        stroke-width: 4;
    }
    @keyframes arrowFlowRight {
        0% { transform: translate(-4px, 4px) scale(1.05); opacity: 0; }
        20% { opacity: 0.95; }
        80% { opacity: 0.4; transform: translate(6px, -3px) scale(0.8); }
        100% { transform: translate(12px, -6px) scale(0.6); opacity: 0; }
    }

    /* ---------- 样式4: 直走左拐箭头 ---------- */
    .turn-left-container svg {
        width: 30px;
        height: 22px;
        stroke-width: 4;
    }

    /* ---------- 样式5: 信息展示图标（保持右侧显示） ---------- */
    .hotspot-info {
        padding: 3px;
    }
    .info-icon {
        width: 34px;
        height: 34px;
    }
    .hotspot-info:hover .info-icon {
        transform: scale(1.1);
    }
    .info-panel {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 7px;
        font-size: 10px;
        padding: 10px 14px;
        max-width: 220px;
        border-radius: 6px;
    }
    .hotspot-info.show-text .info-panel {
        margin-left: 7px;
    }

    /* ---------- 通用 tooltip ---------- */
    .hotspot-tooltip {
        font-size: 12px;
        padding: 4px 10px;
        margin-bottom: 10px;
    }

    /* ---------- 浮动动画 ---------- */
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }
}

/* ----------底部的场景栏移动端适配(≤768px) ---------- */
@media (max-width: 768px) {
    /* ----- 场景卡片预览栏 ----- */
    #scenes-preview-bar {
        gap: 10px;                 /* 卡片间距缩小 */
        padding: 10px;             /* 内边距缩小 */
        max-width: 98vw;           /* 增加宽度利用率 */
        margin-bottom: 10px;       /* 底部间距缩小 */
        border-radius: 10px;
    }

    /* ----- 场景缩略图卡片 ----- */
    .scene-card {
        width: 110px;              /* 从 140px 缩小 */
        height: 72px;              /* 从 90px 缩小 */
        border-radius: 6px;
        border-width: 2px;         /* 边框略微变细 */
    }
    .scene-card:hover {
        transform: scale(1.08);    /* 悬停缩放略微减小 */
    }
    .scene-card .scene-tag {
        font-size: 10px;           /* 标签字体缩小 */
        padding: 3px 0;
    }

    /* 激活状态边框 */
    .scene-card.active {
        border-width: 2px;
    }

    /* ----- 底部通栏 ----- */
    .dock-container {
        background: rgba(10, 10, 10, 0.92); /* 略微加深背景，提高对比度 */
    }

    /* ----- 建筑分类导航 ----- */
    #buildings-nav-bar {
        padding: 8px 0;
    }
    .nav-inner-track {
        gap: 18px;                 /* 按钮间距缩小 */
        padding: 0 14px;
    }
    .build-btn {
        font-size: 12px;           /* 字体缩小 */
        padding: 5px 2px;
        border-bottom-width: 2px;
    }
    .build-btn.active {
        border-bottom-width: 2px;
    }

    /* ----- 校区切换 ----- */
    #campus-zone-bar {
        gap: 24px;                 /* 间距缩小 */
        padding: 10px 0;
    }
    .campus-btn {
        font-size: 13px;           /* 字体缩小 */
        padding: 3px 2px;
        border-bottom-width: 2px;
    }

    /* ----- 分割线 ----- */
    .panel-divider {
        height: 1px;
    }
}

/* ---------- 滚动条在移动端完全隐藏（手势滑动代替） ---------- */
@media (max-width: 768px) {
    #scenes-preview-bar::-webkit-scrollbar,
    #buildings-nav-bar::-webkit-scrollbar {
        height: 2px;              /* 滚动条更细，几乎不可见 */
    }
    #scenes-preview-bar::-webkit-scrollbar-thumb,
    #buildings-nav-bar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15); /* 更淡 */
        border-radius: 2px;
    }
    /* Firefox */
    #scenes-preview-bar,
    #buildings-nav-bar {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    }
}


/* ================================================================
   右上角小地图 · 移动端适配
   ================================================================ */
@media (max-width: 768px) {
    /* ----- 地图切换按钮 ----- */
    #map-toggle-icon {
        /* width: 38px;
        height: 38px;
        top: 16px;
        right: 16px; */
        border-width: 1px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    }
    #map-toggle-icon svg {
        width: 20px;
        height: 20px;
    }
    #map-toggle-icon:hover {
        transform: scale(1.08);
    }

    /* ----- 地图面板 ----- */
    #map-panel {
        top: 66px;
        right: 12px;
        padding: 8px;
        border-radius: 10px;
        /* 宽度由内部 wrapper 决定，无需固定 */
        max-width: calc(100vw - 24px); /* 保证不超出屏幕 */
        box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    }

    /* ----- 地图 Wrapper（覆盖固定的宽高） ----- */
    #map-wrapper-yaohu,
    #map-wrapper-qingshanhu {
        width: min(70vw, 400px) !important;  /* 优先使用 85vw，但不超过 500px */
        /* height: auto 由 aspect-ratio 自动控制 */
        /* aspect-ratio 已在原样式中定义，无需覆盖 */
    }

    /* 确保图片正常显示 */
    .campus-map-img {
        border-radius: 6px;
    }
}

/* 当隐藏热点时，全局强制隐藏全景场景转场箭头与鸟瞰图/小地图中的定位图标 */
/* body.hotspots-hidden .hotspot-container,
body.hotspots-hidden .map-arrow {
    display: none !important;
} */
 /* 修改后的代码：隐藏全景箭头和其他未激活的定位点，但保留当前所在位置的激活红点 */
body.hotspots-hidden .hotspot-container,
body.hotspots-hidden .map-arrow:not(.active) {
    display: none !important;
}
/* ================================================================
   平板设备横屏 (Landscape) 适配：仅横屏时缩小地图尺寸
   ================================================================ */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    
    /* 1. 瑶湖校区地图（比例偏方正，可以稍微宽一点） */
    #map-wrapper-yaohu {
        width: 300px !important; 
        height: auto !important; /* height设为auto可以保持图片原始比例不变 */
    }

    /* 2. 青山湖校区地图（比例偏瘦长，横屏时高度容易超限，建议宽度调得更小） */
    #map-wrapper-qingshanhu {
        width: 210px !important; 
        height: auto !important; 
    }
}