* { margin: 0; padding: 0; box-sizing: border-box; }/* 禁止页面整体滚动 */
html, body {
    overflow: hidden;  /* 隐藏溢出内容，禁止滚动条 */
    position: fixed;   /* 固定定位，避免页面跟随触摸滑动 */
    width: 100%;       /* 占满屏幕宽度 */
    height: 100%;      /* 占满屏幕高度 */
    margin: 0;         /* 清除默认边距，避免异常偏移 */
}
        
        /* 新增：加载中遮罩 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }
        .loading-text {
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
        }
        .loading-progress {
            width: 80%;
            height: 8px;
            background: #333;
            border-radius: 4px;
            overflow: hidden;
        }
        .loading-bar {
            width: 0%;
            height: 100%;
            background: #00ffff;
            transition: width 0.3s ease;
        }
        
        /* 地图容器：优化滚动性能 */
        .map-container {
            width: 100vw;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: auto;
            position: relative;
            will-change: scroll-position;
        }
        
        /* 竖版地图：确保尺寸稳定 */
        .map-image {
            width: 100vw;
            height: auto;
            object-fit: cover;
            display: block;
            vertical-align: top;
        }

        /* 通用角色样式 */
        .character {
            position: absolute;
            width: 50px;
            height: 50px;
            transform: translate(-50%, -100%);
            pointer-events: auto;
            z-index: 10;
        }
        
        /* 角色弹窗 */
        .character-popup {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
            display: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 11;width:80px;
        }
        .character:hover .character-popup { display: block; }
        
        /* 触碰提示 */
        .touch-tip {
            position: fixed;width:100%;height:100px;
z-index:99;color:#ff69b4;
        }
        
        /* 摇杆容器 */
        .joystick-container {
            position: fixed;
            bottom: 100px;
            right: 50px;
            width: 120px;
            height: 120px;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            touch-action: none;
            cursor: pointer;
            user-select: none;
        }
        
        /* 摇杆按钮 */
        .joystick-btn {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
            position: absolute;
            transition: transform 0.1s ease, background 0.2s ease;
            will-change: transform;
        }
        .joystick-container:active .joystick-btn {
            background-color: rgba(255,255,255,1);
        }