/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    outline: none; /* 移除焦点轮廓 */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    overflow: hidden;
    user-select: none;
    padding-bottom: 70px; /* 为底部按钮留出空间 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100vw;
    min-height: 0; /* 允许flex子元素缩小到内容高度 */
    height: calc(100vh - 70px); /* 减去底部按钮高度 */
}

/* 顶部工具栏样式 */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.tool-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tool-btn {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.tool-btn:hover {
    background-color: #e9e9e9;
}

.tool-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}

.color-picker {
    display: flex;
    gap: 5px;
    background: #fff;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.color-btn.active {
    border-color: #333;
    transform: scale(1.1);
}

/* 2D 绘图 Canvas */
#drawingCanvas2D {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* 默认不接收点击，画笔模式下开启 */
}

/* 主内容区 */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧面板 */
.left-panel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 右侧面板 */
.right-panel {
    width: 600px;
    border-left: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    position: relative; /* 为 Canvas 定位 */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* 控制面板样式已删除 */

.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 底部按钮样式 */
.bottom-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 三栏布局：左右自适应，中间自适应内容 */
    align-items: center;
    gap: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.left-group {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start; /* 左对齐 */
    padding-left: 20px; /* 左边留一点空隙 */
}

.center-group {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center; /* 居中对齐 */
}

.right-group {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end; /* 右对齐 */
    padding-right: 20px; /* 右边留一点空隙 */
}

/* 画笔工具组 */
.tool-group {
    position: relative; /* 为弹出选项定位 */
    display: flex;
    align-items: center;
}

.draw-options {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px; /* 与画笔按钮的间距 */
    background-color: #fff; /* 避免背景透明 */
    white-space: nowrap; /* 防止换行 */
}
/* 正方体个数显示样式 */
.cube-count-display {
    padding: 10px 15px;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
}

/* 操作说明文字样式 */
.instruction-text {
    padding: 10px 15px;
    background-color: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
}

/* 按钮样式 */
.btn {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #45a049;
}

.btn.active {
    background-color: #2196F3;
}

.btn.active:hover {
    background-color: #1976D2;
}

/* Toggle按钮样式：默认灰边白底黑字（未选中），active时绿底白字（选中） */
.btn-toggle {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    transition: all 0.2s;
}

.btn-toggle:hover {
    background-color: #e9e9e9;
}

.btn-toggle.active {
    background-color: #4CAF50;
    color: white;
    border-color: transparent;
}

.btn-toggle.active:hover {
    background-color: #45a049;
}

.info {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
}

.info p {
    margin-bottom: 5px;
    color: #666;
}

/* 操作说明区域已删除 */

/* 场景容器样式 */
.scene-container {
    flex: 1;
    position: relative;
    background-color: #ffffff;
    margin-right: 0; /* 确保没有右边距 */
}

#sceneCanvas {
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none; /* 禁止默认触摸行为（如缩放、滚动），解决iPad点击问题 */
}

#sceneCanvas:active {
    cursor: grabbing;
}

/* 网格容器样式 */
.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    height: 100%;
    flex-shrink: 0; /* 防止网格容器被压缩 */
    box-sizing: border-box;
}

.dashed-grid {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.grid-header {
    text-align: center;
}

.grid-header h3 {
    color: #333;
    font-size: 18px;
    margin: 0;
}

/* 虚线网格容器 */
.dashed-grid {
    width: 100%;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0;
    aspect-ratio: 1; /* 确保网格是正方形 */
    height: 0; /* 重置高度，让aspect-ratio生效 */
    padding-top: 100%; /* 配合aspect-ratio确保正方形 */
    position: relative;
}

/* 确保网格单元在定位容器中正确显示 */
.dashed-grid .grid-cell {
    position: absolute;
    width: 10%; /* 10列，每列10% */
    height: 10%; /* 10行，每行10% */
}

/* 根据行列位置定位每个网格单元 */
.dashed-grid .grid-cell[data-row="0"] { top: 0; }
.dashed-grid .grid-cell[data-row="1"] { top: 10%; }
.dashed-grid .grid-cell[data-row="2"] { top: 20%; }
.dashed-grid .grid-cell[data-row="3"] { top: 30%; }
.dashed-grid .grid-cell[data-row="4"] { top: 40%; }
.dashed-grid .grid-cell[data-row="5"] { top: 50%; }
.dashed-grid .grid-cell[data-row="6"] { top: 60%; }
.dashed-grid .grid-cell[data-row="7"] { top: 70%; }
.dashed-grid .grid-cell[data-row="8"] { top: 80%; }
.dashed-grid .grid-cell[data-row="9"] { top: 90%; }

.dashed-grid .grid-cell[data-col="0"] { left: 0; }
.dashed-grid .grid-cell[data-col="1"] { left: 10%; }
.dashed-grid .grid-cell[data-col="2"] { left: 20%; }
.dashed-grid .grid-cell[data-col="3"] { left: 30%; }
.dashed-grid .grid-cell[data-col="4"] { left: 40%; }
.dashed-grid .grid-cell[data-col="5"] { left: 50%; }
.dashed-grid .grid-cell[data-col="6"] { left: 60%; }
.dashed-grid .grid-cell[data-col="7"] { left: 70%; }
.dashed-grid .grid-cell[data-col="8"] { left: 80%; }
.dashed-grid .grid-cell[data-col="9"] { left: 90%; }

/* 网格单元样式 */
.grid-cell {
    /* 改为只显示右边框和下边框，避免相邻单元格双重边框 */
    border-right: 1px dashed #e0e0e0;
    border-bottom: 1px dashed #e0e0e0;
    border-left: none;
    border-top: none;
    cursor: pointer;
    box-sizing: border-box; /* 确保边框在内 */
    position: relative; /* 为伪元素定位 */
}

/* 移除最后一行和最后一列的边框，避免与容器边框重叠 */
.dashed-grid .grid-cell[data-col="9"] {
    border-right: none;
}
.dashed-grid .grid-cell[data-row="9"] {
    border-bottom: none;
}

/* 选中状态的网格单元 */
.grid-cell.selected {
    border: 1px solid transparent; /* 保持边框占位，但不可见 */
    z-index: 1; /* 提升层级，确保边框显示在上方 */
}

/* 使用伪元素实现边框重叠效果 */
.grid-cell.selected::after {
    content: '';
    position: absolute;
    /* 向外扩展2px，覆盖原来的虚线边框 */
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid #000;
    pointer-events: none; /* 防止遮挡点击 */
}