.shixiu9gong-container {
    max-width: 600px;
    margin: auto;
}

.shixiu9gong-container td {
    width: 100px; /* 固定每个单元格的宽度 */
    height: 100px; /* 固定每个单元格的高度 */
    border: 1px solid black;
    vertical-align: top;
    padding: 5px;
    text-align: center; /* 居中文本 */
}


.shixiu9gong-container .combobox {
    margin-bottom: 10px;
}

.shixiu9gong-container label {
    display: inline-block;
    width: 80px;
}

.shixiu9gong-container select {
    padding: 5px;
}


.shixiu9gong-container #result {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    font-size: 15px;
}

.shixiu9gong-container .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 33vw);
    gap: 10px;
    margin-top: 20px;
}

.shixiu9gong-container .grid-item {
    border: 1px solid #333;
    font-size: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
}

/* 针对所有按钮的基础样式 */
.shixiu9gong-container button {
    padding: 8px;           /* 统一内边距 */
    font-size: 16px;         /* 按钮字体大小 */
    border-radius: 5px;      /* 按钮圆角 */
    border: 1px solid #ddac8d; /* 边框颜色 */
    background-color: #e5f0a9; /* 背景颜色 */
    color: rgba(48, 12, 12, 0.791);            /* 字体颜色 */
    cursor: pointer;         /* 鼠标指针 */
    text-align: center;      /* 文本居中 */
    box-sizing: border-box;  /* 包括内边距和边框 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
    width: 100%;             /* 按钮宽度占据容器全部 */
}

/* 按钮悬停时的样式 */
.shixiu9gong-container button:hover {
    background-color: #afe678; /* 悬停时的背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

/* 按钮按下时的样式 */
.shixiu9gong-container button:active {
    background-color: #84f38f; /* 点击时背景色 */
    transform: translateY(2px); /* 模拟按钮被按下的效果 */
}

/* 按钮布局样式 */
.shixiu9gong-container .buttons {
    display: flex;
    width: 100%;              /* 按钮容器占满宽度 */
    gap: 5px;                /* 按钮间距 */
    margin-top: 10px;
}

/* 为了确保按钮均匀分布，这里使用 flex 布局 */
.shixiu9gong-container .buttons button {
    flex: 1;                  /* 每个按钮平分容器宽度 */
}


/* 复选框区域布局 */
.checkboxes {
    display: flex;
    gap: 10px;
    justify-content: left;
    min-width: 300px;
}

.checkboxes label {
    white-space: nowrap; /* 阻止自动换行 */
}