/* 首页雷达三维场景：Three.js 负责画面，DOM 地面只做透明交互层 */

.grid3d-scene {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

/* 透视容器：铺满场景，地面绕X轴倾斜后即呈现三维透视效果 */
.grid3d-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 三维画面画布 */
#scene3dCanvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* 旧版墙面与网格背景全部交给 Three.js 绘制 */
.grid3d-wall {
    display: none;
}

/* 地面交互层：透明、无边框，仅承载人员标记、送风控件与场景区域 */
.grid3d-scene .grid-container {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateX(60deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
}

.grid3d-scene .grid-overlay,
.grid3d-scene #windAnimCanvas {
    display: none;
}

/* 人员由 Three.js 原生渲染：DOM 标记只保留定位信息用于信息提示，视觉上隐藏 */
.grid3d-scene .person-markers-container {
    transform-style: preserve-3d;
}

.grid3d-scene .person-marker {
    visibility: hidden;
    pointer-events: none;
}

/* 立牌类元素反向旋转回屏幕平面，避免被地面投影压扁 */
.grid3d-scene .wind-target,
.grid3d-scene .wind-zone {
    transform-style: preserve-3d;
}

.grid3d-scene .wind-target {
    border-color: #ffb300;
    background: none;
    box-shadow: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 圆点以格子中心为轴立起来，视觉中心正好压在格子中心 */
.grid3d-scene .marker-dot-container {
    transform: rotateX(-60deg);
    transform-origin: 50% 50%;
}

.grid3d-scene .wind-target-icon {
    transform: rotateX(-60deg);
    transform-origin: 50% 100%;
}

.grid3d-scene .wind-target-stabilizing,
.grid3d-scene .wind-zone-stabilizing {
    transform: translateX(-50%) rotateX(-60deg);
    transform-origin: 50% 0;
}

/* 送风区域：只保留一圈金色描边，与青白色网格线明显区分 */
.grid3d-scene .wind-zone {
    border: 2px solid #ffb300;
    border-radius: 3px;
    background: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.grid3d-scene .wind-zone.active {
    box-shadow: none;
}

/* 初始/保存后隐藏，点击/拖动时由 JS 加 show-controls 类显示；
   hover 时也显示，方便用户悬停发现角标 */
.grid3d-scene .wind-zone.active .wind-zone-controls,
.grid3d-scene .wind-zone .wind-zone-controls {
    display: none;
}

.grid3d-scene .wind-zone.active.show-controls .wind-zone-controls {
    display: block;
}

/* hover 显示角标仅在支持悬停的设备（鼠标）上生效；
   触摸屏没有真正的 hover，点击后 :hover 会残留，导致保存后图标不消失 */
@media (hover: hover) and (pointer: fine) {
    .grid3d-scene .wind-zone.active:hover .wind-zone-controls {
        display: block;
    }
}

/* 控制层只负责定位，不拦截区域主体的拖动 */
.grid3d-scene .wind-zone-controls {
    transform-style: preserve-3d;
    pointer-events: none;
}

.grid3d-scene .zone-area-display {
    top: auto !important;
    bottom: 3px !important;
    left: 6px !important;
    transform: rotateX(-60deg) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #ecfffd !important;
    text-shadow: 0 1px 3px rgba(0, 58, 60, 0.85) !important;
}

/* 角标：抬离地面再反向旋转，避免被地板平面拍扁或挡住点击 */
.grid3d-scene .wind-zone-save,
.grid3d-scene .wind-zone-move,
.grid3d-scene .wind-zone-resize,
.grid3d-scene .wind-zone-resize-h,
.grid3d-scene .wind-zone-resize-v {
    width: 24px;
    height: 24px;
    transform: translateZ(18px) rotateX(-60deg);
    transform-origin: 50% 50%;
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 透明外扩热区，手指不必精准点在小圆点上 */
.grid3d-scene .wind-zone-save::after,
.grid3d-scene .wind-zone-move::after,
.grid3d-scene .wind-zone-resize::after,
.grid3d-scene .wind-zone-resize-h::after,
.grid3d-scene .wind-zone-resize-v::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

/* 区域普遍偏扁，角标沿外沿错开摆放，避免在手势热区上互相覆盖 */
.grid3d-scene .wind-zone-save {
    top: -18px;
    right: -8px;
}

.grid3d-scene .wind-zone-move {
    bottom: -56px;
    left: -8px;
}

.grid3d-scene .wind-zone-resize {
    bottom: -56px;
    right: -8px;
}

.grid3d-scene .wind-zone-resize-h {
    top: calc(50% - 12px);
    right: -32px;
}

.grid3d-scene .wind-zone-resize-v {
    bottom: -56px;
    left: calc(50% - 12px);
}

.grid3d-scene .wind-zone-resize-h:hover,
.grid3d-scene .wind-zone-resize-v:hover,
.grid3d-scene .wind-zone-save:hover,
.grid3d-scene .wind-zone-move:hover,
.grid3d-scene .wind-zone-resize:hover {
    transform: translateZ(18px) rotateX(-60deg) scale(1.16);
}

/* ==================== 场景区域 / 干扰源区域 ==================== */

/* 区域本身平铺在地面（保持透视），内部文字与手柄立起来面向用户 */
.grid3d-scene .scene-zones-container,
.grid3d-scene .interference-zones-container,
.grid3d-scene .scene-zone,
.grid3d-scene .interference-zone {
    transform-style: preserve-3d;
}

.grid3d-scene .scene-zone .zone-center-content,
.grid3d-scene .interference-zone .zone-center-content {
    transform: translate(-50%, -50%) rotateX(-60deg);
    transform-origin: 50% 50%;
}

.grid3d-scene .zone-stabilizing {
    transform: translateX(-50%) rotateX(-60deg);
    transform-origin: 50% 100%;
}

/* 手柄包装层必须延续 preserve-3d 链条，否则角标的 translateZ/rotateX 被压扁，
   屏幕上的命中区域与视觉位置错位，导致鼠标和触屏都点不中 */
.grid3d-scene .scene-zone .zone-control-handles,
.grid3d-scene .interference-zone .zone-control-handles {
    transform-style: preserve-3d;
}

/* 3D 投影会把地面上的垂直间距压缩一半，小区域上边中/角部手柄在屏幕上互相重叠，
   将边中手柄沿平面外移，保证每个图标都有独立命中区域 */
.grid3d-scene .scene-zone .ctrl-r,
.grid3d-scene .interference-zone .ctrl-r {
    right: -36px;
}

.grid3d-scene .scene-zone .ctrl-b,
.grid3d-scene .interference-zone .ctrl-b {
    bottom: -36px;
}

/* 触屏热区外扩，手指不必精准点在小圆点上 */
.grid3d-scene .scene-zone .ctrl-icon::after,
.grid3d-scene .interference-zone .ctrl-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

/* 角标：抬离地面再反向旋转，避免被地板拍扁或影响点击 */
.grid3d-scene .scene-zone .ctrl-icon,
.grid3d-scene .interference-zone .ctrl-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    transform: translateZ(18px) rotateX(-60deg);
    transform-origin: 50% 50%;
}

/* 居中定位的边线手柄需要保留原有的位移 */
.grid3d-scene .scene-zone .ctrl-b,
.grid3d-scene .interference-zone .ctrl-b {
    transform: translateX(-50%) translateZ(18px) rotateX(-60deg);
}

.grid3d-scene .scene-zone .ctrl-r,
.grid3d-scene .interference-zone .ctrl-r {
    transform: translateY(-50%) translateZ(18px) rotateX(-60deg);
}

.grid3d-scene .scene-zone .ctrl-icon:hover,
.grid3d-scene .interference-zone .ctrl-icon:hover {
    transform: translateZ(18px) rotateX(-60deg) scale(1.12);
}

.grid3d-scene .scene-zone .ctrl-b:hover,
.grid3d-scene .interference-zone .ctrl-b:hover {
    transform: translateX(-50%) translateZ(18px) rotateX(-60deg) scale(1.12);
}

.grid3d-scene .scene-zone .ctrl-r:hover,
.grid3d-scene .interference-zone .ctrl-r:hover {
    transform: translateY(-50%) translateZ(18px) rotateX(-60deg) scale(1.12);
}