/* 首页雷达三维场景：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 #functionGrid {
    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 #functionGrid .grid-overlay,
.grid3d-scene #windAnimCanvas {
    display: none;
}

/* 立牌类元素反向旋转回屏幕平面，避免被地面投影压扁；
   标记容器也必须保留 3D 上下文，否则圆点会被拍扁贴在格子下沿 */
.grid3d-scene .person-markers-container,
.grid3d-scene .person-marker,
.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);
}