/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止滚动条 */
    font-family: sans-serif;
}

#map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 地图在底层 */
}

#three-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Three.js 画布在顶层 */
    /* pointer-events: none;  移除这行，我们需要捕捉鼠标事件 */
}

/* Three.js canvas 本身 */
#three-canvas-container canvas {
    display: block; /* 移除 canvas 下方的空隙 */
    background-color: transparent !important; /* 确保背景透明 */
}

/* 简单的暂停提示 */
#pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    font-weight: bold;
    z-index: 10; /* 在最顶层 */
    pointer-events: none; /* 不阻挡下层事件 */
    visibility: hidden; /* 初始隐藏 */
}