/* 布局编辑器样式（自原 style.css 拆分，加载顺序：editor → lobby → game → dialogs） */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   旧版「蓝紫夜色」大厅 / 对局 / 弹窗样式已移除。
   在线客户端由下方《在线客户端重制版》区块接管；
   被覆盖但仍在生效的基础属性（.btn 光标、.room-item 弹性布局、
   .slot 居中、.toast 定位等）已合并进重制版对应规则。
   布局编辑器样式保持不变。
   ============================================================ */


/* ============================================================
   布局编辑器
   ============================================================ */

#editor {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* 工具栏 */
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #16213e;
    border-bottom: 1px solid #0f3460;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-title {
    font-size: 18px;
    font-weight: bold;
    color: #53d8fb;
}

.toolbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 模式按钮 */
.mode-buttons {
    display: flex;
    gap: 4px;
}

.btn-mode {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    background: #0f3460;
    color: #aaa;
    border: 1px solid #1a4a7a;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-mode:hover {
    background: #1a4a7a;
    color: #ddd;
}

.btn-mode.active {
    background: #53d8fb;
    color: #0d1b2a;
    border-color: #53d8fb;
}

.btn-mode.btn-danger {
    background: #5c1a1a;
    color: #e74c3c;
    border-color: #7a2a2a;
}

.btn-mode.btn-danger:hover {
    background: #7a2a2a;
    color: #ff6b5a;
}

.btn-mode.btn-danger.active {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* 棋子选择按钮 */
.piece-selector {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.btn-piece {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    background: #0f3460;
    color: #aaa;
    border: 1px solid #1a4a7a;
    cursor: pointer;
    transition: all 0.15s;
    font-family: "PingFang SC", sans-serif;
}

.btn-piece:hover {
    background: #1a4a7a;
    color: #ddd;
}

.btn-piece.active {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* 主体区域 */
.editor-body {
    display: flex;
    flex: 1;
    gap: 0;
    overflow: hidden;
}

.editor-board-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d1b2a;
    border-radius: 0;
    padding: 10px;
}

#editor-canvas {
    display: block;
    cursor: crosshair;
    max-width: 100%;
    height: auto;
}

/* 侧面板 */
.editor-sidebar {
    width: 260px;
    background: #16213e;
    border-left: 1px solid #0f3460;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-section h3 {
    font-size: 13px;
    color: #53d8fb;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mode-info {
    background: #0f3460;
    border-radius: 8px;
    padding: 10px 12px;
}

.mode-label {
    font-weight: bold;
    color: #e94560;
    font-size: 14px;
}

.mode-hint {
    font-size: 12px;
    color: #aaa;
    margin-top: 6px;
    line-height: 1.5;
}

/* 元素列表 */
.element-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.element-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.el-type {
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 36px;
    text-align: center;
    font-size: 11px;
}

.el-type.den   { background: #8b4513; color: #fff; }
.el-type.trap  { background: #b7950b; color: #fff; }
.el-type.river { background: #1b4f72; color: #85c1e9; }
.el-type.piece { background: #e74c3c; color: #fff; }

.el-value {
    color: #ccc;
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
}

/* 校验状态 */
.validation-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.val-item {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

.val-ok      { color: #2ecc71; background: rgba(46,204,113,0.1); }
.val-err     { color: #e74c3c; background: rgba(231,76,60,0.1); }
.val-pending { color: #f39c12; background: rgba(243,156,18,0.1); }

/* 预览说明 */
.preview-hint {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

/* 底部状态栏 */
.editor-statusbar {
    padding: 6px 20px;
    background: #0f3460;
    color: #aaa;
    font-size: 12px;
    border-top: 1px solid #1a4a7a;
}

/* 编辑器响应式 */
@media (max-width: 900px) {
    .editor-body {
        flex-direction: column;
    }
    .editor-sidebar {
        width: 100%;
        max-height: 200px;
        border-left: none;
        border-top: 1px solid #0f3460;
    }
    .editor-toolbar {
        padding: 8px 12px;
    }
    .mode-buttons {
        flex-wrap: wrap;
    }
}