/* 全局样式 */
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

/* 控制区域样式 */
.controls {
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.controls label {
    font-weight: bold;
}

.controls input[type="number"] {
    padding: 5px;
    width: 60px;
}

.controls button {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: #0056b3;
}

/* 可视化容器 */
.visualization-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 从顶部开始对齐 */
    gap: 10px; /* 增加三角形之间的间距 */
    margin-bottom: 30px;
    min-height: 850px; /* 保证容器有足够高度 */
    width: 100%;
    position: relative; /* 用于绝对定位矩形 */
    overflow: visible; /* 允许内容超出 */
    padding-top: 40px; /* 为顶部文字预留空间 */
}

/* 三角形和矩形容器的基础样式 */
.triangle-container, .rectangle-container {
    display: flex;
    justify-content: center;
    min-width: 200px; /* 确保容器有足够的宽度 */
    height: 100%;
    position: relative; /* 为内部柱子提供定位上下文 */
    transition: transform 1.5s ease-in-out, opacity 1s ease-in-out;
}

/* 第一个三角形容器特定样式 */
#triangle1 {
    align-items: flex-start; /* 绿色柱子顶部对齐 */
}

/* 第二个三角形容器特定样式 */
#triangle2 {
    align-items: flex-end; /* 恢复为橙色柱子底部对齐 */
    /* 初始时可以不加偏移，移动时再调整，或者预留空间 */
}

/* 矩形容器特定样式 */
#rectangle {
    align-items: flex-start; /* 矩形柱子顶部对齐，因为它们代表总和 */
}

/* 第一个三角形（绿色，逆序） */
#triangle1 {
    /* 初始位置在左侧 */
}

/* 第二个三角形（橙色，正序） */
#triangle2 {
    /* 初始位置在右侧 */
    /* transform: scaleX(-1); */ /* 不再需要翻转，JS已处理数据顺序 */
    /* 为了实现上下错开，需要调整其垂直位置 */
    /* 这个调整比较复杂，可能需要在JS中动态计算 */
    /* 暂时先在CSS中留空，看JS能否处理 */
}

/* 合并后的矩形容器 */
#rectangle {
    position: absolute; /* 绝对定位，覆盖在原位置 */
    bottom: 0;
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    opacity: 0; /* 初始隐藏 */
    visibility: hidden; /* 初始不可见 */
}

/* 柱子样式 */
.bar {
    width: 30px;
    margin: 0 2px;
    background-color: #4CAF50;
    position: absolute; /* 改为绝对定位 */
    bottom: 0; /* 默认底部对齐 */
    text-align: center;
    color: white;
    font-size: 12px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: transform 1.5s ease-in-out, height 0.5s ease;
}

/* 第一个三角形（绿色） */
#triangle1 .bar {
    background-color: #4CAF50;
    top: auto; /* 清除top值，使用bottom定位 */
    bottom: 0;
}

/* 第二个三角形（橙色） */
#triangle2 .bar {
    background-color: #FF9800;
    bottom: auto; /* 清除bottom值，使用top定位 */
    top: 0;
}

/* 矩形（蓝色） */
#rectangle .bar {
    background-color: #2196F3;
    top: 0; /* 从顶部开始 */
}

/* 解释区域样式 */
.explanation {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 600px;
    text-align: center;
}

.explanation h2 {
    margin-top: 0;
    color: #555;
}

.explanation p {
    line-height: 1.6;
    color: #333;
}

#sumResult {
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.1em;
    color: #007bff;
}

/* 动画第一阶段：移动到中间 */
.visualization-container.preparing-merge #triangle1 {
    /* 计算精确的移动距离，使其右边缘刚好接触中心线 */
    /* 这个值依赖于容器宽度和柱子总宽度，暂时用一个估计值，可能需要JS动态计算 */
    transform: translateX(calc(50% + 5px)); /* 稍微向右移动，留出间隙 */
}

.visualization-container.preparing-merge #triangle2 {
    /* 计算精确的移动距离，使其左边缘刚好接触中心线 */
    /* 这个值依赖于容器宽度和柱子总宽度，暂时用一个估计值，可能需要JS动态计算 */
    transform: translateX(calc(-50% - 5px)); /* 稍微向左移动，留出间隙 */
    /* 同时，可能需要向上移动以实现错位对齐 */
    /* transform: translate(calc(-50% + 2px), -100%); /* 向上移动自身高度，尝试对齐 */
    /* 精确的 translateY 需要基于最大柱子高度计算，暂时注释 */
}

/* 动画第二阶段：合并为矩形 */
.visualization-container.merging #triangle1,
.visualization-container.merging #triangle2 {
    opacity: 0; /* 隐藏原始三角形 */
    visibility: hidden;
}

.visualization-container.merging #rectangle {
    opacity: 1; /* 显示合并后的矩形 */
    visibility: visible;
    transition-delay: 0.5s; /* 稍微延迟矩形的出现，让三角形先消失 */
}