/* 表单样式优化 */
.form-group label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.form-text {
    font-size: 0.8rem;
    color: #6c757d;
}

/* 筛选条件区域样式优化 */
.filter-summary {
    background-color: #1a73e8; /* 更深的蓝色背景 */
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.filter-summary strong {
    font-size: 1.1em;
    margin-right: 10px;
}

.filter-summary .badge {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1a73e8;
    font-size: 0.9em;
    padding: 6px 10px;
    margin-right: 8px;
    border-radius: 16px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-summary .badge:last-child {
    margin-right: 0;
}

/* 悬停效果 */
.filter-summary .badge:hover {
    background-color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .filter-summary {
        padding: 10px 12px;
    }
    
    .filter-summary .badge {
        display: block;
        margin-bottom: 8px;
        margin-right: 0;
    }
    
    .filter-summary .badge:last-child {
        margin-bottom: 0;
    }
}

/* 分页控件样式 */
.pagination {
    margin-top: 1rem;
}

/* 表格样式优化 */
.table th {
    background-color: #343a40;
    color: white;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* 动画效果 */
.filter-summary {
    transition: all 0.3s ease;
}

.filter-summary .badge {
    transition: all 0.2s ease;
    cursor: pointer;
}

/* 聚焦效果 */
.filter-summary .badge:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* 手牌容器 - 紧凑布局 */
.mahjong-hand-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* 非常小的间隙 */
    margin-bottom: 8px;
}

/* 麻将牌样式 - 紧凑尺寸 */
.mahjong-tile {
    width: 35px;
    height: 50px;
    object-fit: contain;
    transition: transform 0.2s;
}

/* 横置的牌 - 紧凑旋转 */
.mahjong-tile-rotate {
    transform: rotate(90deg);
    width: 50px; /* 旋转后宽度变大 */
    height: 35px; /* 旋转后高度变小 */
}

/* 番种样式 */
.fan-types {
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    padding: 4px 0;
}