/* 任务竞赛玩家页 - 增量样式
   公共类(cr-*/cdkey-*)来自 challenge_reward.css, 此处只写 qr-* 增量 */

/* 面板显隐完全复用 challenge_reward.css 的线上验证规则, 本文件不重复定义:
   玩家页/GM页面板挂 .cr-char-card / .cr-admin-panel, JS 切换 .cr-char-shown / .cr-admin-shown */

.qr-empty {
    padding: 24px 16px;
    text-align: center;
    color: #95a5a6;
    font-size: 14px;
}

.qr-empty-td {
    padding: 18px 8px !important;
    color: #95a5a6;
    font-size: 13px;
}

.qr-season-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 10px 0 4px;
    color: #555;
    font-size: 14px;
}

.qr-race-quests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.qr-qid-chip {
    background: #eef2f7;
    border: 1px solid #d5dde7;
    border-radius: 12px;
    padding: 2px 12px;
    font-size: 13px;
    color: #2c3e50;
}

.qr-rule {
    background: #f8f9fa;
    border-left: 3px solid #b8c4d0;
    padding: 8px 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    border-radius: 0 6px 6px 0;
}

.qr-week-live {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff8e6;
    border: 1px solid #f0dfae;
    border-radius: 6px;
    font-size: 13px;
    color: #8a6d1a;
}

.qr-board-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 4px;
    font-size: 14px;
}

.qr-board-table th,
.qr-board-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e8ecf1;
    text-align: left;
}

.qr-board-table th {
    color: #8a97a5;
    font-weight: 600;
    font-size: 13px;
}

.qr-board-table th:first-child,
.qr-board-table td:first-child {
    width: 64px;
    text-align: center;
}

.qr-board-table .qr-pts {
    font-weight: 700;
    color: #27ae60;
}

.qr-board-sm { font-size: 13px; }

.qr-top3 td:first-child { font-weight: 700; }
.qr-top1 td:first-child::before { content: '🥇 '; }
.qr-top2 td:first-child::before { content: '🥈 '; }
.qr-top3 td:first-child::before { content: '🥉 '; }

.qr-sub-title { margin-top: 18px; font-size: 14px; }

.qr-reward-block {
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0;
    background: #fbfcfe;
}

.qr-reward-head {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

.qr-reward-block .cr-action { margin-top: 8px; }

/* 积分兑换商城 */
.qr-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.qr-shop-item {
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfe;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-shop-name {
    font-weight: 700;
    color: #2c3e50;
    font-size: 14px;
}

.qr-shop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.qr-shop-cost {
    color: #27ae60;
    font-weight: 700;
    font-size: 14px;
}

/* GM 后台: 任务池弹窗选择列表(SweetAlert2 内) */
.qr-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #eef2f7;
    cursor: pointer;
    font-size: 13px;
}
.qr-pick-row:hover { background: #f4f8fc; }
.qr-pick-row .qr-pick-id { color: #27ae60; font-weight: 700; min-width: 58px; }
.qr-pick-row .qr-pick-meta { color: #8a97a5; min-width: 150px; }
.qr-pick-row .qr-pick-name { color: #2c3e50; }

/* GM 后台: 名次积分网格 —— 按容器宽度自动决定列数(auto-fill),
   桌面宽屏自动多列, 移动端窄屏自动收成 1~2 列 */
.qr-rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    width: 100%;
}
.qr-rank-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe6ee;
    border-radius: 6px;
    padding: 4px 8px;
    background: #fbfcfe;
}
.qr-rank-no { color: #27ae60; font-weight: 700; font-size: 13px; min-width: 30px; }
.qr-rank-cell .qr-rank-pts {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 6px 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.qr-rank-del {
    border: none;
    background: transparent;
    color: #b0b8c1;
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.qr-rank-del:hover { color: #e74c3c; }

/* GM 后台: flag 映射区(明显卡片框) */
.qr-flag-box {
    border: 1px dashed #c5cfda;
    border-radius: 6px;
    padding: 10px 12px;
    background: #f8fafc;
    min-height: 44px;
}
.qr-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.qr-flag-bit { width: 110px; }
.qr-flag-label { min-width: 220px; color: #2c3e50; }
.qr-flag-hint { color: #8a97a5; font-size: 12px; }

/* 移动端适配(<=640px): 名次格子单列, 删除按钮加大 */
@media (max-width: 640px) {
    .qr-rank-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 6px;
    }
    .qr-rank-cell .qr-rank-pts { padding: 8px 8px; }
    .qr-rank-del { font-size: 18px; padding: 0 8px; }
}

/* ===== 页面排版优化(2026-09-03) ===== */

/* 赛季信息卡: 标题行 */
.qr-season-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.qr-season-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qr-season-name { font-size: 20px; font-weight: 800; color: #2c3e50; }
.qr-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.qr-badge-live { background: #e8f8ef; color: #1e8e4e; border: 1px solid #b7e4c7; }
.qr-badge-time { background: #eef2f7; color: #56657a; border: 1px solid #d5dde7; }
.qr-season-dates { color: #8a97a5; font-size: 13px; }

/* 参数徽章行 */
.qr-season-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.qr-pill {
    background: #fff;
    border: 1px solid #d5dde7;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: #2c3e50;
}

/* 积分规则表 */
.qr-points-table-wrap { margin-top: 10px; }
.qr-points-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
}
.qr-points-table th {
    color: #8a97a5;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 4px;
    border-bottom: 1px solid #e8ecf1;
    text-align: center;
    white-space: nowrap;
}
.qr-points-table td {
    text-align: center;
    padding: 8px 4px;
    font-weight: 700;
    border-bottom: 1px solid #f0f3f6;
    color: #2c3e50;
}
/* 列数多时保证可读, 窄屏由 qr-table-wrap 横向滚动 */
.qr-points-table th, .qr-points-table td { min-width: 44px; }
.qr-points-table td.qr-pt-gold { color: #d4a017; font-size: 16px; }
.qr-points-table td.qr-pt-silver { color: #7f8c8d; font-size: 15px; }
.qr-points-table td.qr-pt-bronze { color: #b0703c; font-size: 15px; }
.qr-rule-note { color: #8a97a5; font-size: 12px; margin-top: 6px; }

/* 表格横向滚动容器(移动端) */
.qr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qr-table-wrap .qr-board-table { min-width: 420px; }

/* 榜单行增强 */
.qr-board-table tbody tr:hover { background: #f6f9fc; }

/* 移动端整体 */
@media (max-width: 640px) {
    .qr-season-name { font-size: 17px; }
    .qr-pill { font-size: 12px; padding: 3px 10px; }
    .qr-shop-grid { grid-template-columns: 1fr; }
    .cr-tab { padding: 7px 12px; font-size: 13px; }
    .qr-rank-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* 常驻积分余额徽章(Tab 行尾, 点击跳兑换) */
.qr-wallet-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #fff8e6, #ffedd5);
    border: 1px solid #f0dfae;
    color: #8a6d1a;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}
.qr-wallet-badge b { font-size: 17px; color: #d48806; }
.qr-wallet-badge:hover { border-color: #d48806; }
@media (max-width: 640px) {
    .qr-wallet-badge { padding: 5px 12px; font-size: 12px; }
    .qr-wallet-badge b { font-size: 14px; }
}