/* --- 基础布局 --- */
        html, body { 
            width: 100%; height: 100%; margin: 0; padding: 0; 
            overflow: hidden; background-color: #020202; 
            font-family: 'Segoe UI', sans-serif; 
        }

        #canvas-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; /* 让鼠标事件穿透画布传给背景 */ }
        /* 重新开启画布的交互，但仅限必要时 */
        #canvas-container canvas { pointer-events: auto; }

        /* --- 摄像头组合容器 (新) --- */
        /* 这个容器负责定位和大小动画，但不建立层叠上下文(z-index: auto)，从而允许子元素分别与Canvas分层 */
        #camera-composite {
            position: absolute; bottom: 20px; left: 20px; 
            width: 240px; height: 180px; 
            z-index: auto; 
            transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            display: none; /* 默认隐藏，由 JS 控制显示 */
            pointer-events: none; /* 自身不阻挡鼠标，只让子元素响应 */
        }

        /* 摄像头视觉包装 (负责边框、圆角、视频背景) */
        #camera-wrapper {
            width: 100%; height: 100%; 
            position: relative;
            z-index: 2; /* 默认状态：在画布(z:1)上面 */
            border-radius: 12px; 
            border: 2px solid rgba(255,255,255,0.3); 
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            overflow: hidden;
            background: #000;
            pointer-events: auto; /* 恢复交互 */
        }

        /* 摄像头视频本体 */
        #video-input { 
            width: 100%; height: 100%; 
            object-fit: cover; 
            transform: scaleX(-1); 
            opacity: 0.8;
        }

        /* 摄像头放大/缩小按钮 */
        #cam-expand-btn {
            position: absolute; top: 30px; right: 10px;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white; cursor: pointer;
            display: flex; justify-content: center; align-items: center;
            font-size: 16px; 
            z-index: 10; /* 关键：按钮始终保持最高层级 */
            transition: all 0.2s;
            backdrop-filter: blur(4px);
            pointer-events: auto; /* 恢复交互 */
        }
        #cam-expand-btn:hover { background: #00d2ff; border-color: #00d2ff; color: #000; }

        /* --- 摄像头全屏模式 (应用于组合容器) --- */
        #camera-composite.video-fullscreen {
            width: 100vw !important;
            height: 100vh !important;
            bottom: 0 !important;
            left: 0 !important;
        }

        /* 全屏时，内部的 wrapper 变为背景 */
        #camera-composite.video-fullscreen #camera-wrapper {
            z-index: 0; /* 关键：背景放到画布(z:1)后面 */
            border: none;
            border-radius: 0;
        }

        /* 当全屏背景时，视频不透明度提高 */
        #camera-composite.video-fullscreen #video-input { opacity: 0.4; } 
        
        #loader {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #111; z-index: 999; display: flex; flex-direction: column;
            justify-content: center; align-items: center; color: white;
            transition: opacity 0.5s;
        }
        .spinner { width: 40px; height: 40px; border: 4px solid #333; border-top: 4px solid #00d2ff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* 页面级全屏按钮 */
        #fs-btn {
            position: absolute; bottom: 120px; right: 50px; z-index: 100;
            background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
            color: white; padding: 10px 15px; border-radius: 8px; cursor: pointer;
            backdrop-filter: blur(5px); transition: 0.3s; font-size: 14px;
        }
        #fs-btn:hover { background: rgba(255,255,255,0.3); transform: scale(1.05); }

        .status-badge {
            position: absolute; top: 20px; left: 20px; z-index: 10;
            background: rgba(0,0,0,0.6); color: #00d2ff; padding: 8px 15px;
            border-radius: 20px; font-size: 14px; pointer-events: none;
            border: 1px solid rgba(0, 210, 255, 0.3);
            box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: all 0.3s;
        }

        /* --- 底部美化控制栏 --- */
        #hud-controls {
            position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
            z-index: 100; display: flex; gap: 20px; pointer-events: auto;
        }

        .hud-btn {
            background: rgba(10, 10, 20, 0.6); backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7);
            padding: 12px 25px; border-radius: 30px; cursor: pointer;
            font-size: 15px; font-weight: 600; display: flex; align-items: center;
            gap: 10px; transition: all 0.4s; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            outline: none; user-select: none;
        }
        .hud-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
        .hud-btn .icon { font-size: 18px; }

        .hud-btn.magic-active {
            background: rgba(220, 0, 220, 0.2); border-color: #ff00ff; color: #fff;
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), inset 0 0 10px rgba(255, 0, 255, 0.2);
        }
        .hud-btn.magic-active .icon { animation: magicPulse 2s infinite; }

        .hud-btn.jump-active {
            background: rgba(0, 255, 136, 0.2); border-color: #00ff88; color: #fff;
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.4), inset 0 0 10px rgba(0, 255, 136, 0.2);
        }
        .hud-btn.jump-active .icon { animation: heartBeat 1s infinite; }

        @keyframes magicPulse { 0% { text-shadow: 0 0 5px #ff00ff; } 50% { text-shadow: 0 0 20px #ff00ff; } 100% { text-shadow: 0 0 5px #ff00ff; } }
        @keyframes heartBeat { 0% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }