/* 基础样式 - 兼容IE6和现代浏览器 */
body {
    font-family: Microsoft YaHei, SimSun, sans-serif;
    font-size: 11pt;
    margin: 0;
    padding: 0;
    background: url(/jhimg/bk_hc3w.gif);
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.5;
}

.container {
    width: 980px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #f7af01;
}

.header {
    color: red;
    padding: 2px 20px;
}

.header h1 {
    font-size: 24px;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 核心修改：添加margin:0 auto实现居中，补充display:block确保块级特性 */
.nav {
    width: 980px;
    border-top: 3px solid #ffcc00;
    padding: 8px 0;
    margin: 0 auto; /* 左右自动边距实现居中 */
    display: block; /* 确保为块级元素，兼容部分浏览器 */
}

.nav a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

.nav a:hover {
    color: #FF6600;
    text-decoration: none;
}

/* 核心新增：导航表格统一2px黑边样式 */
.nav-table {
    border-collapse: collapse; /* 合并边框，避免双线 */
    border: 2px solid #000; /* 表格外边框2px黑边 */
}
.nav-table td {
    border: 2px solid #000 !important; /* 强制单元格2px黑边，覆盖冲突样式 */
    padding: 4px 2px; /* 适配边框的内边距 */
}
.nav-table tr {
    background-color: #FFCC00; /* 保留原行背景色 */
}

.content {
    padding: 5px;
}

.stat-value {
    color: #da2b2b;
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
}

.stats {
    width: 100%;
    text-align: center;
}

.stats td {
    width: 33%;
    vertical-align: middle;
}

.section {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.section-header {
    background-color: #e0e0e0;
    color: #000000;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 14px;
}

.section-body {
    padding: 7px;
}

/* 核心修改：搜索表单样式更新 - 实现PC端左中右布局 */
/* 核心修改：搜索表单容器样式，仅保留基础样式 */
.search-form {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px dashed #ccc;
    /* 移除所有 flex 和 float 相关的属性 */
}

/* 新增：链接组容器，包含月杀人榜链接 */
.link-group {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    flex-shrink: 0; /* 防止缩小 */
}

.search-input {
    width: 80px;
    padding: 6px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
    font-size: 12px;
    vertical-align: middle; /* 确保和按钮垂直对齐 */
}

.search-btn {
    padding: 6px 10px;
    background-color: #d32f2f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle; /* 确保和输入框垂直对齐 */
}

/* 清理冗余：合并泛查找按钮样式，避免重复定义 */
.search-btn-fan {
    padding: 6px 10px;
    background-color: #336699; /* 被害人颜色 */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle; /* 确保和输入框垂直对齐 */
}

.search-btn-fan:hover {
    background-color: #4477aa;
}

.search-btn:hover {
    background-color: #f44336;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0;
    /* 强制表格按设定列宽布局，不被内容撑开 */
    table-layout: fixed;
}

.data-table th {
    background-color: #e0e0e0;
    padding: 8px 10px;
    text-align: left;
    border: 1px solid #ccc;
    font-weight: bold;
    /* 核心修复1：给表头同步设置列宽，与单元格匹配 */
    white-space: nowrap;
    overflow: hidden;
}

/* 核心修改2：统一单元格基础样式，确保溢出控制生效 */
.data-table td {
    padding: 6px 8px;
    border: 1px solid #ccc;
    height: 15px; /* 原25px，降低10px */
    vertical-align: middle;
    /* 基础溢出控制，为列样式铺垫 */
    white-space: nowrap;
    overflow: hidden;
}

.data-table tr.even {
    background-color: #f9f9f9;
}

.data-table tr:hover {
    background-color: #e6f2ff;
}

/* 优化表格列样式 - 同时给th和td设置列宽，解决fixed布局列宽均分问题 */
/* 第1列：杀人者/劫镖者列 15% */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
    width: 12%;
    text-overflow: ellipsis;
    padding-left: 6px;
}

/* 第2列：命案/劫镖时间列 25% */
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    width: 21%;
    text-overflow: ellipsis;
    text-align: left;
}

/* 第3列：被害人/被劫镖人列 15% */
.data-table th:nth-child(3),
.data-table td:nth-child(3) {
    width: 12%;
    text-overflow: ellipsis;
    padding-left: 6px;
}

/* 第4列：内容列（杀人方式/劫镖事件）45% */
.data-table th:nth-child(4),
.data-table td:nth-child(4) {
    width: 55%;
    text-overflow: ellipsis;
    /* 强化溢出省略 */
    white-space: nowrap;
    overflow: hidden;
}

.killer {
    color: red;
}

.player {
    color: blue;
}

.victim {
    color: #336699;
}

/* 优化后的分页样式 - 参照参考代码 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    gap: 5px; /* 原5px，增加5px */
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #d32f2f;
    transition: all 0.3s;
}

.pagination a:hover {
    background-color: #d32f2f;
    color: white;
}

.pagination .current {
    background-color: #d32f2f;
    color: white;
    border-color: #d32f2f;
}

.pagination .ellipsis {
    background: none;
    border: none;
    color: #666;
    cursor: default;
    padding: 8px 6px;
}

.page-jump {
    display: flex;
    align-items: center;
    margin-left: 10px;
    white-space: nowrap;
    gap: 5px;
}

.page-jump span {
    margin-right: 5px;
    color: #333;
    border: none;
    padding: 0;
    font-size: 12px;
}

.page-input {
    width: 40px;
    padding: 6px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
}

.jump-btn {
    padding: 6px 10px;
    background-color: #d32f2f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    font-size: 12px;
    white-space: nowrap;
}

.jump-btn:hover {
    background-color: #f44336;
}

.scroll {
    width: 40px;
    height: 40px;
    background: #d32f2f;
    color: #fff;
    line-height: 40px;
    text-align: center;
    position: fixed;
    right: 30px;
    bottom: 50px;
    cursor: pointer;
    font-size: 16pt;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.scroll:hover {
    opacity: 0.9;
}

/* 修复的快速链接部分 - 兼容IE6的布局 */
.quick-links {
    margin: 5px 0;
    overflow: hidden; /* 清除浮动 */
    zoom: 1; /* 触发IE6 hasLayout */
}

.quick-links .columns-container {
    width: 100%;
    overflow: hidden; /* 清除浮动 */
    zoom: 1; /* 触发IE6 hasLayout */
}

.quick-links .column {
    float: left; /* 使用浮动代替table-cell */
    width: 48%; /* 预留间距避免溢出 */
    margin: 0 1%; /* 替代padding，避免宽度问题 */
    display: inline; /* 修复IE6浮动双倍margin bug */
}

.quick-links .section {
    width: 100%;
    overflow: hidden;
    zoom: 1; /* 触发hasLayout */
}

.quick-links .section-header {
    zoom: 1; /* 触发hasLayout，修复宽度问题 */
    overflow: hidden;
}

.quick-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-links li {
    padding: 5px 0;
    border-bottom: 1px dashed #ddd;
}

.quick-links a {
    color: #999999;
    text-decoration: none;
}

.quick-links a:hover {
    color: #990000;
    text-decoration: underline;
}

.footer {
    text-align: center;
    padding: 5px;
    color: #666;
    font-size: 12px;
}

.footer a {
    color: #336699;
    text-decoration: none;
}

/* 移动端优化样式 */
@media only screen and (max-width: 768px) {
    .container {
        width: 100%;
        border: none;
    }

    .header h1 {
        font-size: 18px;
        padding: 5px 0;
    }

    .nav {
        width: 100%;
        margin: 0;
    }

    .nav .nav-table {
        width: 100%;
        border: 1px solid #000;
    }
    .nav .nav-table tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav .nav-table td {
        width: 20%;
        text-align: center;
        padding: 3px 2px;
        border: 1px solid #000 !important;
        box-sizing: border-box;
    }
    .nav .nav-table td a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10pt;
        padding: 2px 2px;
    }

    .content {
        padding: 5px;
    }

    .search-form {
        flex-direction: row;
        justify-content: space-between;
        gap: 5px;
        padding: 8px;
    }

    .link-group {
        flex-shrink: 0;
    }

    .search-input {
        width: 70px;
        padding: 5px 3px;
        font-size: 11px;
    }

    .search-btn, .search-btn-fan {
        padding: 5px 8px;
        font-size: 11px;
    }

    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
        table-layout: auto;
    }

    .data-table th,
    .data-table td {
        padding: 6px 5px;
        font-size: 11px;
        height: 15px;
    }

    .data-table th:nth-child(1),
    .data-table td:nth-child(1) {
        width: 22%;
        padding-left: 4px;
    }

    .data-table th:nth-child(2),
    .data-table td:nth-child(2) {
        width: 25%;
    }

    .data-table th:nth-child(3),
    .data-table td:nth-child(3) {
        width: 22%;
        padding-left: 4px;
    }

    .data-table th:nth-child(4),
    .data-table td:nth-child(4) {
        width: 31%;
    }

    .quick-links .column {
        float: none;
        width: 100% !important;
        margin: 0 0 15px 0;
    }

    .pagination {
        flex-direction: column;
        gap: 5px;
    }

    .page-jump {
        margin-left: 0;
        margin-top: 5px;
    }

    .pagination a, .pagination span {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* 针对小屏幕手机的额外优化 */
@media only screen and (max-width: 480px) {
    .content {
        padding: 5px;
    }

    .section-body {
        padding: 3px;
    }

    .search-form {
        padding: 5px;
        gap: 3px;
    }

    .search-input {
        width: 60px;
        padding: 4px 2px;
        font-size: 10px;
    }

    .search-btn, .search-btn-fan {
        padding: 4px 6px;
        font-size: 10px;
    }

    .data-table {
        min-width: 400px;
        table-layout: auto;
    }

    .data-table th,
    .data-table td {
        padding: 5px 4px;
        font-size: 10px;
        height: 15px;
    }

    .data-table th:nth-child(1),
    .data-table td:nth-child(1) {
        width: 24%;
        padding-left: 3px;
    }

    .data-table th:nth-child(2),
    .data-table td:nth-child(2) {
        width: 24%;
    }

    .data-table th:nth-child(3),
    .data-table td:nth-child(3) {
        width: 24%;
        padding-left: 3px;
    }

    .data-table th:nth-child(4),
    .data-table td:nth-child(4) {
        width: 28%;
    }

    .pagination a, .pagination span {
        padding: 5px 8px;
        font-size: 10px;
    }

    .page-input {
        width: 35px;
        padding: 5px 3px;
    }

    .jump-btn {
        padding: 5px 8px;
        font-size: 10px;
    }

    .page-jump span {
        font-size: 11px;
    }

    .nav .nav-table td {
        padding: 3px 1px;
        border: 1px solid #000 !important;
    }
    .nav .nav-table td a {
        font-size: 10pt;
        padding: 2px 1px;
    }
}

/* 打印样式 */
@media print {
    .nav, .search-form, .pagination {
        display: none;
    }

    .container {
        width: 100%;
        border: none;
    }
}

/* IE6兼容性样式 */
/*[if IE 6]>*/
    /* IE6导航居中兼容 */
    .nav {
        margin: 0 auto;
        zoom: 1; /* 触发hasLayout，确保margin生效 */
    }

    /* IE6导航表格专属修复 */
    .nav-table {
        border-collapse: collapse;
        zoom: 1; /* 触发hasLayout，避免边框错乱 */
    }
    .nav-table td {
        border: 2px solid #000;
        *border-collapse: collapse; /* IE6专属边框合并修复 */
    }
    
    /* IE6专属修复 */
    .btn {
        overflow: visible; /* 修复按钮padding异常 */
    }
    
    .search-input {
        vertical-align: middle; /* 对齐搜索框和按钮 */
    }
    
    /* 微调列宽以适应IE6的计算方式 */
    .quick-links .column {
        width: 47%;
    }
    
    /* IE6分页修复 */
    .pagination {
        display: block;
        text-align: center;
    }
    .pagination a, .pagination span {
        display: inline-block;
        *display: inline;
        zoom: 1;
        margin: 0 5px;
    }
    .page-jump {
        display: inline-block;
        *display: inline;
        zoom: 1;
        margin-left: 10px;
    }
    
    /* IE6表格修复 - 解决nth-child不支持+列宽均分问题 */
    .data-table {
        *width: 950px; /* 适配IE6盒模型，作为列宽计算基准 */
    }
    .data-table td, .data-table th {
        height: 20px;
        zoom: 1; /* 触发hasLayout，确保溢出和宽度生效 */
		white-space: nowrap !important; /* 强制不换行，优先级拉满 */
        overflow: hidden !important; /* 强制隐藏溢出 */
        text-overflow: ellipsis !important; /* 强制显示省略号 */
    }
    /* IE6专属列宽，用像素替代nth-child，对应15%+25%+15%+45% */
    .data-table th {
        *width: expression(this.cellIndex==0?'105px':this.cellIndex==1?'180px':this.cellIndex==2?'105px':'480px');
    }
    .data-table td {
        *width: expression(this.cellIndex==0?'105px':this.cellIndex==1?'180px':this.cellIndex==2?'105px':'480px');
    }
/*<![endif]*/