/* --- 裁判扣分按钮 UI 优化 --- */

/* 容器样式：确保按钮垂直排列并居中 */
.deduct-button-group {
    display: flex; 
    flex-direction: column; /* 垂直堆叠 */
    gap: 10px; /* 按钮之间的垂直间距 */
    align-items: stretch; /* 确保按钮拉伸到父容器宽度 */
    width: 100%; 
    padding: 10px 0;
    margin-top: 10px; /* 保持与上面元素的距离 */
}

/* 针对裁判扣分按钮的基础样式 */
.deduct-button-group button.small {
    width: 100%; /* 按钮宽度占满父容器 */
    height: 65px; /* 增加高度，更容易点击 */
    font-size: 1.3em; /* 增大字体 */
    font-weight: bold;
    color: white; /* 白色文字 */
    
    /* 强烈的红色背景 */
    background-color: #dc3545; /* Bootstrap danger red */
    border: 2px solid #a71d2a;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影，更有立体感 */
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    line-height: 1.2; /* 确保文本垂直居中 */
}

/* 鼠标悬停时的效果 */
.deduct-button-group button.small:hover {
    background-color: #c9302c; /* 颜色稍稍变深 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* 激活或按下时的效果 */
.deduct-button-group button.small:active {
    background-color: #a71d2a; /* 更深的红色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px); /* 模拟按下去的效果 */
}