/* =====================================================
  每日竞彩浏览页 - 列表页样式
  基于 home.css 视觉体系扩展，只新增竞彩专用样式
  基调：黑灰白
  ===================================================== */

/* 卡片看点区：上边线取消，看点整体上移 20px */
.card-bottom {
    border-top: none;
    padding-top: 0;
    margin-top: -4px;
}

/* 卡片预测行取消 */
.card-bottom .predict {
    display: none;
}

/* 看点：文字 #999、不加粗，最多两行，超出省略；点击可跳转详情（不加外框） */
.card-bottom .hot-point {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: calc(1.5em + 2px);   /* 原 1.5 行高基础上增加 2px */
    font-weight: 400;
    color: #999;
    cursor: pointer;
}
.card-bottom .hot-point:hover {
    color: #999;
}
/* 「看点」标签：0.8px 细边线（与上方编号/首发标签同色 #e5e7eb）+ 白底 + #999 文字，不加粗 */
.card-bottom .hot-point .hot-tag {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: #999;
    background: #fff;
    border: 0.8px solid #e5e7eb;
    vertical-align: 1px;
}

/* 筛选栏：横向滚动支持（手机端），标签间距 */
.jc-filter-bar {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

.jc-filter-bar::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}

.jc-filter-bar .filter-btn {
    flex-shrink: 0;
}

/* ============ 时间条：历史十天 + 未来三天 ============ */
/* 今日竞彩介绍 + 时间条的布局行 */
.jc-intro-row {
    display: block; /* 默认：文字在上、时间条在下（手机端） */
}

/* 白底时间条外框，圆角 10px、边框颜色与卡片一致；总宽度 95% 居中 */
.jc-time-bar {
    background-color: #fff;
    background: #fff;
    height: 55px; /* 手机端高度 55px */
    width: 95%;
    margin: 0 auto 15px; /* 总宽度 95% 居中；margin-bottom 15px 与下方卡片间距 */
    display: flex;
    align-items: center;
    overflow: visible; /* 下拉菜单可向下展开；按钮滚动由内部 .jc-time-scroll 处理 */
    border: 1px solid var(--gray-200); /* 边框颜色与卡片边框一致 */
    border-radius: 10px; /* 外框圆角 10px */
}

/* 时间条左侧固定"赛程/完场"标签，点击弹出下拉 */
.jc-time-label {
    flex-shrink: 0; /* 固定左侧，不随按钮组滑动 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    border-right: 1px solid #eef0f3; /* 与按钮区域分隔线 */
    background: #f7f8fa;
    border-radius: 10px 0 0 10px; /* 与时间条外框左圆角一致 */
    cursor: pointer;
    user-select: none;
}
.jc-time-label-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #222; /* 向下箭头（黑色） */
    transition: transform 0.2s;
}
.jc-time-label.open .jc-time-label-arrow {
    transform: rotate(180deg); /* 展开时箭头朝上 */
}

/* 下拉菜单：点击标签展开，选择赛程/完场 */
.jc-time-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 110px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 3px; /* 两个按钮间距 3px */
    z-index: 999;
}
.jc-time-label.open .jc-time-dropdown {
    display: flex;
}
.jc-time-drop-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    color: #333;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 400; /* 默认不加粗 */
}
.jc-time-drop-item:hover {
    background: #f5f5f5;
}
.jc-time-drop-item.active {
    background: #f5f5f5; /* 选中为浅灰 */
    color: #333;
    font-weight: 600; /* 选中项文字加粗 */
}

/* 手机端（≤768px）：卡片容器左右内边距为 16px，时间条随之对齐，与卡片间距再缩减 5px */
@media (max-width: 768px) {
    .jc-intro-row {
        padding: 0; /* 手机端：文字在上、时间条在下 */
    }
    .jc-time-bar {
        width: calc(100% - 32px); /* 与卡片左右对齐（卡片左右内边距 16px） */
        margin: 0 16px 15px; /* 左右各 16px 与卡片对齐；时间条与卡片间距 margin-bottom 15px */
    }
    .jc-time-spacer {
        display: none; /* 手机端隐藏右侧留白占位 */
    }
}

.jc-time-bar::-webkit-scrollbar {
    display: none;
}

/* 按钮滚动容器：不换行 */
.jc-time-scroll {
    flex: 1; /* 占满"赛程"标签右侧剩余空间 */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto; /* 按钮组超出时可左右滑动 */
    scrollbar-width: none; /* 隐藏滚动条 */
    -ms-overflow-style: none;
    justify-content: flex-start; /* 时间按钮靠左对齐 */
    gap: 4px;
    padding: 0 8px;
}
.jc-time-scroll::-webkit-scrollbar {
    display: none;
}

/* 时间按钮：两行文本（日期/星期），11px 字体 */
.jc-time-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 40px;
    min-width: 58px;
    padding: 0 11px;
    background: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.jc-time-btn .jc-time-date {
    font-size: 11px;
    line-height: 1;
    color: #999;
    font-weight: 400;
}
.jc-time-btn .jc-time-week {
    font-size: 11px;
    line-height: 1;
    color: #999;
}
.jc-time-btn:hover {
    background: #eef0f3;
}
/* 今天：黑色高亮 */
.jc-time-btn.active,
.jc-time-btn.active:hover {
    background: #222222;
    border-color: #222222;
}
.jc-time-btn.active .jc-time-date,
.jc-time-btn.active .jc-time-week {
    color: #fff;
}

/* 桌面端：文字左、时间条右，底部垂直对齐；时间按钮居中显示，时间条高 60px */
@media (min-width: 769px) {
    /* 【由 Agent 完成】2026-10-01 电脑端：页面内容左右留白各 +15px（30 → 45）
       时间条所在行与卡片容器同步加宽，两者左右边缘仍对齐 */
    /* 【由 Agent 完成】2026-10-01 电脑端：时间条移到「全部赛事 + 即时/赛程/完赛」工具行的下一行
       （原为与工具行并排占 80% 宽度；现 flex-wrap + 占满整行，宽度与卡片区左右一致 45px 留白） */
    .jc-intro-row {
        display: flex;
        flex-wrap: wrap; /* 允许时间条换到下一行 */
        align-items: flex-end; /* 工具行底部与文字底部垂直对齐 */
        padding: 0 45px; /* 原 30px，按用户要求 +15px；与卡片左右留白保持一致 */
        gap: 24px;
        margin-bottom: 15px; /* 与下方卡片间距：卡片 margin-top 为 0，间距即由本行 margin-bottom 15px 提供 */
    }
    /* 文字区域：去掉左右及底部内边距（由 jc-intro-row 提供左右），使底部对齐文字内容 */
    .jc-intro-row .worldcup-intro {
        padding: 30px 0 0;
    }
    /* 【由 Agent 完成】2026-10-01 电脑端时间条独占下一行：占满整行宽度（左右留白同卡片区 45px） */
    .jc-time-bar {
        flex: 0 0 100%; /* 独占一行，排在工具行下方 */
        width: 100%;
        height: 60px;
        /* 【由 Agent 完成】2026-10-01 时间条与下方内容间距缩减 6px
           （原：本行 margin-bottom 15px + 卡片区 padding-top 15px = 30px → 现 24px；
             负边距只在本元素参与布局时生效，即时视图收起时间条时间距不变） */
        margin-bottom: -6px;
    }
    /* 左侧留白占位：位于文字与时间条之间，占据可用空间 20%，使时间条宽度缩减 20% 且右边缘与卡片对齐 */
    .jc-time-spacer {
        flex: 1 1 0;
    }
    /* 桌面端/平板端：卡片区整体下移 15px（用 padding-top 实现，避免与上方 flex 容器 margin 折叠） */
    .match-card-box {
        padding-top: 15px;
    }

    /* 【由 Agent 完成】2026-10-01 电脑端：卡片区左右留白各 +15px（30 → 45） */
    .match-card-box {
        padding-left: 45px;
        padding-right: 45px;
    }
    .jc-time-btn .jc-time-date,
    .jc-time-btn .jc-time-week {
        font-size: 12px;
    }
    .jc-time-scroll {
        justify-content: flex-start; /* 时间按钮靠左对齐 */
        min-width: 0;
    }
}

/* 全开/全关按钮：默认胶囊灰，hover 灰色加深（覆盖全局黑色 hover） */
.jc-toggle-all {
    background: #f5f7fa;
    border: 0.8px solid #e5e7eb;
    color: #666;
    border-radius: 25px;
    padding: 8px 16px;
}
.jc-toggle-all:hover {
    background: #e5e7eb;
    color: #333;
    border-color: #d1d5db;
}
.jc-toggle-check {
    margin-right: 4px;
    font-size: 12px;
}

/* 全开状态：按钮黑色高亮（覆盖默认灰色与 hover 灰色） */
.jc-toggle-all.active,
.jc-toggle-all.active:hover {
    background: #222222;
    color: #fff;
    border-color: #222222;
}

/* 筛选按钮：黑色高亮（与 home.css 风格一致） */
.jc-filter-bar .filter-btn.active {
    background-color: #222222;
    color: #fff;
}

.jc-filter-bar .filter-btn:hover {
    background-color: #222222;
    color: #fff;
}

/* ============ 全部赛事下拉菜单（沿用经验分享页头部按钮样式） ============ */
.filter-dropdown {
    position: relative;
    flex-shrink: 0;
}

/* 下拉菜单：fixed 定位，避免被横向滚动容器裁剪 */
.filter-dropdown-menu {
    position: fixed;
    top: 60px;
    left: 0;
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 6px;
    z-index: 1002;
    display: none;
}

.filter-dropdown-menu.show {
    display: block;
}

.filter-dropdown-item {
    padding: 9px 16px;
    font-size: 13px;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    margin-bottom: 4px;
}

.filter-dropdown-item:last-child {
    margin-bottom: 0;
}

.filter-dropdown-item:hover {
    background: #f5f5f5;
}

.filter-dropdown-item.active {
    background: #f5f5f5;
    color: #333;
    font-weight: 600;
}

/* 【由 Agent 完成】2026-10-01 手机端「全部赛事」下拉：宽度不超出容器，超出后可滚动 / 长联赛名省略
   （下拉为 fixed 定位，left 由 JS 设为按钮左边缘 = 16px，故 max-width 取「视口 - 左右各 16px」，
     保证右边缘与卡片区对齐不溢出；选项过多时菜单内部上下滚动） */
@media (max-width: 768px) {
    .jc-intro-tools .filter-dropdown-menu {
        max-width: calc(100vw - 32px);
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .jc-intro-tools .filter-dropdown-item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* 【由 Agent 完成】2026-10-01 「全部赛事」按钮：0.8px 灰色边框 + 白色背景 + 灰色文字
   （按钮已移出顶部筛选栏，此处覆盖 home.css .filter-btn.active 的黑色高亮） */
.jc-intro-tools #jcAllBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px; /* 与右侧「即时 / 赛程 / 完赛」胶囊同高 */
    padding: 0 15px;
    max-width: 100%; /* 联赛名再长也不超出右侧胶囊让出的空间 */
    min-width: 92px;  /* 小屏被压缩时至少还能显示几个字 + 省略号 */
    box-sizing: border-box;
    background: #fff;
    border: 0.8px solid #dcdfe4;
    color: #666666;
    font-weight: 400;
}

/* 【由 Agent 完成】2026-10-01 手机端修复：选中超长联赛名后按钮会把右侧「即时 / 赛程 / 完赛」顶出屏幕
   做法：按钮外的下拉容器允许收缩 → 按钮占满剩余宽度 → 文字用省略号截断，箭头保持可见；
   右侧胶囊组 flex-shrink: 0，永远完整显示在工具行内 */
.jc-intro-tools > .filter-dropdown {
    min-width: 0;               /* flex 项默认 min-width:auto 会撑破容器，改为可收缩 */
    flex: 0 1 auto;
}

.jc-intro-tools #jcAllBtn .jc-all-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;    /* 超出部分用「…」代替 */
    white-space: nowrap;
}

.jc-intro-tools #jcAllBtn .layui-icon {
    flex-shrink: 0;             /* 下拉箭头不被压缩 */
}

.jc-view-caps {
    flex-shrink: 0;             /* 即时 / 赛程 / 完赛 三个胶囊不被挤压换行 */
}

/* 小屏（≤360px）：胶囊左右内边距 18 → 12px，给左侧「全部赛事」按钮留出足够的文字空间 */
@media (max-width: 360px) {
    .jc-view-cap {
        padding: 0 12px;
    }
}

.jc-intro-tools #jcAllBtn:hover {
    background: #f7f8fa;
    border-color: #c9ced6;
    color: #333333;
}

/* 全部赛事按钮下箭头：展开菜单时旋转朝上，带动画 */
#jcAllBtn .layui-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

#jcAllBtn.open .layui-icon {
    transform: rotate(180deg);     /* 箭头朝上 */
}

/* ============ 比赛列表卡片滚动进入视口时逐个淡入上浮（类名由 JS 按需添加） ============ */
.match-card.ma-anim {
    opacity: 0;
    will-change: opacity, transform;
}
.match-card.ma-anim.ma-anim-in {
    animation: maCardIn .46s cubic-bezier(.22, .61, .36, 1) both;
}

/* 动画结束后 JS 会移除 ma-anim 类，恢复原样式（保证 hover 交互正常） */
@keyframes maCardIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .match-card.ma-anim {
        opacity: 1;
    }
    .match-card.ma-anim.ma-anim-in {
        animation: none;
    }
}

/* ============ 主客队 logo 往中间靠拢 ============ */
.jc-card .card-top {
    justify-content: center;
    gap: 16px;
}

/* 左右球队区域宽度撑满剩余空间，中间对阵区固定 100px */
.jc-card .team {
    flex: 1;
    width: 100%;
    position: relative;
}

/* 固定中间对阵区域宽度：窗口/内容区变窄时，左右球队收缩，中间比分时间不变形 */
.jc-card .vs {
    flex: 0 0 90px;
    width: 90px;
}

/* 联赛名称（vs 第一行）：限制在 90px 内，单行显示，过长省略号截断，不横向溢出 */
.jc-card .vs div:first-child {
    max-width: 90px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 队名放 logo 下方，水平居中 */
.jc-card .team {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* 固定 logo 图片容器 40×40 正方形，图片等比缩放居中 */
.jc-card .team-logo {
    width: 40px;
    height: 40px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jc-card .team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.jc-card .team-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

/* 队伍排名行（队名下方，无则不显示）：排名 + 身价两段并排居中
   主队 = [身价][排名] / 客队 = [排名][身价]，中间对阵区两侧镜像 */
.jc-card .team-rank {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 6px;   /* 横向 gap 6px：身价与排名之间留一个空格 */
    font-size: 10px;
    color: #9ca3af;
    text-align: center;
    max-width: 100px;
    line-height: 1.4;
    margin-top: -5px;
}
.jc-card .team-rank .tr-item {
    white-space: nowrap;
}
/* 身价与排名同色同款：直接继承 .team-rank 的灰字小号样式 */

/* 天气/球场：同一行并排展示；内容超宽时在卡片内横向滑动，不撑破总宽 */
.jc-card .match-detail {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 1px 2px;
    margin-bottom: 17px;   /* 与下方"预估真实概率"区域间距：12px 再增 5px */
}
.jc-card .match-detail::-webkit-scrollbar {
    display: none;
}
.jc-card .match-detail span {
    display: inline-flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
    margin-bottom: 0;
}

/* ============ 卡片头部：竞彩编号 + 单关标识 ============ */
.jc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.8px solid var(--gray-200, #e5e7eb);
}

/* 仅中间对阵区、两个 logo 可点击跳转详情页 */
.jc-card .vs,
.jc-card .team-logo {
    cursor: pointer;
}

.jc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
}

.jc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.jc-card-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-match-no {
    font-size: 11px;
    color: #666;
    background: #f5f7fa;
    border: 0.8px solid #e5e7eb;
    padding: 3px 10px;
    border-radius: 999px;
}

/* 首发标签：versus_info[6] 为 False（已首发）时显示，样式与编号一致 */
.jc-start-tag {
    font-size: 11px;
    color: #666;
    background: #f5f7fa;
    border: 0.8px solid #e5e7eb;
    padding: 3px 10px;
    border-radius: 999px;
}

.jc-single-pass {
    font-size: 11px;
    font-weight: normal;
    color: #fff;
    background: #222222;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 盘路结果标签：赢=浅绿、走=浅灰、输=淡红（与已完赛一致） */
.jc-panlu-tag {
    font-size: 11px;
    padding: 3px 14px;
    border-radius: 999px;
    border: 0.8px solid transparent;
}

/* 每日竞彩：胜平负区域上移 20px（原 card-middle margin-top 16px） */
.jc-card .card-middle {
    margin-top: -9px;
}

/* 胜平负赔率按钮下方的边线上移 10px（原 margin-bottom 12px） */
.jc-card .guess-btns {
    margin-bottom: 2px;
}

/* 胜平负标题：标签组靠最右对齐 */
.jc-card .guess-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jc-card .jc-hd-tags {
    display: flex;
    align-items: center;
    gap: 5px;   /* 标签间距：4px 再增 1px */
}

.jc-panlu-win {
    color: #356d58;
    background: #e7f1ec;
    border-color: #72b493;
}

.jc-panlu-plate {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.jc-panlu-lose {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

/* ============ 卡片展开/合拢 ============ */
/* 展开按钮：绝对定位悬浮，始终对齐天气上边线右端、垂直居中于线 */
.jc-collapse-head {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 22px;
    top: 100%;
    margin: 0;
    padding-right: 5px; /* 与折叠内容右缩 5px 对齐 */
    transform: translateY(4px);
}
.jc-collapse-line {
    display: none;
}
.jc-collapse-btn {
    position: relative;
    z-index: 1;
    margin-left: 12px;
    width: auto;
    height: 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-200, #e5e7eb);
    font-size: 12px;
    transition: transform .25s ease, color .25s ease;
}
.jc-collapse-btn:hover {
    color: #000;
}
.jc-card.open .jc-collapse-btn { transform: rotate(180deg); }
/* 展开/收拢：grid 行高过渡实现平滑动画 */
.jc-collapse {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1);
}
.jc-collapse-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 5px; /* 左右各收缩 5px */
}
.jc-card.open .jc-collapse { grid-template-rows: 1fr; }

/* ============ 比分/时间强化 ============ */
.jc-score {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    margin: -1px 0;
}

/* 比赛状态按钮（时间下方）：未开赛=灰色，进行中=浅蓝，已结束=浅红 */
.jc-match-status {
    display: block;
    margin: 8px auto 0;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: normal;
    color: #6b7280;
    background: #f3f4f6;
    border: 0.8px solid #d1d5db;
    border-radius: 10px;
    line-height: 1.4;
    width: fit-content;
}

.jc-match-status.live {
    color: #0369a1;
    background: #f0f7ff;
    border-color: #bae6fd;
}

.jc-match-status.end {
    color: #6b7280;
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* 进行中：状态框左侧红色闪缩圆点 */
.jc-match-status.live {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.jc-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    flex: none;
    animation: jc-live-blink 1.1s ease-in-out infinite;
}
@keyframes jc-live-blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.6);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0);
    }
}

/* 队名行 */
.jc-team-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.jc-team-names .jc-vs-text {
    font-size: 11px;
    color: #95a5a6;
    font-weight: 400;
}

/* ============ 玩法标题 + 让球描述 ============ */
.jc-hd-cn {
    font-size: 11px;
    font-weight: 400;
    color: #666666;
    background: #f5f7fa;
    border: 0.8px solid #e5e7eb;
    padding: 2px 8px;
    border-radius: 25px;
}

/* ============ 赔率按钮：数字黑色强调 ============ */
.jc-odds-btn {
    padding: 8px 4px;
    cursor: pointer;   /* 点击跳转详情「数据选项」 */
}

.jc-odds-btn span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.jc-odds-btn b {
    font-size: 15px;
    font-weight: 700;
    color: #222222;
}

.jc-odds-btn:hover {
    background: #f7f7f7;
    border-color: #999999;
}

/* ============ 详情链接 ============ */
.jc-detail-link {
    text-align: right;
}

.jc-detail-link a {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    background: #222222;
    padding: 6px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.jc-detail-link a:hover {
    background: #444444;
}

/* ============ 空状态 ============ */
.jc-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #95a5a6;
    font-size: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px dashed #dddddd;
}

/* 页面末尾：共 N 场，没有更多了 */
.jc-load-end {
    grid-column: 1 / -1;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
    padding: 8px 0 20px;
}

/* 页面最底部：合规声明 */
.jc-declare {
    grid-column: 1 / -1;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 0 20px;
    margin-top: -20px;
}

/* 右下角：向上/向下滚动按钮（位置与经验分享页一致） */
.jc-scroll-btns {
    position: fixed;
    right: 24px;
    bottom: 40px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jc-scroll-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.jc-scroll-btn:hover {
    background: #222222;
    color: #ffffff;
}

/* 手机端浮动按钮缩小并贴近边缘（与经验分享一致） */
@media (max-width: 768px) {
    /* 层级降到左侧导航(999)与侧栏遮罩(998)之下：展开左侧抽屉时按钮不浮在导航上 */
    .jc-scroll-btns {
        right: 16px;
        bottom: 24px;
        gap: 10px;
        z-index: 997;
    }

    .jc-scroll-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* 桌面端隐藏，仅手机端显示 */
@media (min-width: 769px) {
    .jc-scroll-btns {
        display: none;
    }
}

/* ============ 响应式微调 ============ */
/* 手机端：卡片内距收紧 */
@media (max-width: 768px) {
    .jc-card {
        padding: 16px;
    }

    .jc-card .card-top {
        gap: 10px;
    }

    /* 手机端：中间对阵区域与桌面端一致，固定 90px 避免被挤压变形 */
    .jc-card .vs {
        flex: 0 0 90px;
        width: 90px;
    }

    .jc-filter-bar {
        gap: 8px;
    }

    .jc-detail-link a {
        padding: 5px 12px;
        font-size: 12px;
    }

    /* 手机端：顶部介绍描述文字居中 */
    .worldcup-intro {
        text-align: center;
    }

    .worldcup-intro p {
        text-align: center;
        margin: 0 auto;
    }
}

/* ============ 设置按钮（顶端，三条杠左边，各种状态均显示） ============ */
.jc-settings-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0; /* 不随栏目横向滚动区域压缩 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
}

.jc-settings-btn .layui-icon {
    font-size: 20px;
}

.jc-settings-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #222;
}

/* 【由 Agent 完成】2026-10-01 顶端「数据模型」按钮：图标 + 文字胶囊
   （其余 .jc-settings-btn 仍是 36×36 纯图标按钮）
   2026-10-01 内部左右留白 +5px（12 → 17；窄屏 9 → 14） */
.jc-model-pill {
    width: auto;
    height: 36px;
    padding: 0 17px;
    gap: 6px;
    border-radius: 999px;
    background: #f2f3f5;
}

.jc-model-pill-text {
    font-size: 14px;
    white-space: nowrap;
}

.jc-model-pill .layui-icon {
    font-size: 16px;
}

.jc-model-pill:hover {
    background: #222222;
    color: #fff;
}

/* 窄屏：文字与间距收紧，保证图标 + 文字都可见且不挤压右侧按钮 */
@media (max-width: 768px) {
    .jc-model-pill {
        padding: 0 14px;
        gap: 4px;
    }

    .jc-model-pill .layui-icon {
        font-size: 15px;
    }
}

/* ============ 设置弹层 ============ */
.jc-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 20px;
}

.jc-settings-modal.show {
    display: flex;
}

.jc-settings-panel {
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.jc-settings-title {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 标题左、关闭按钮右 */
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

/* 右上角关闭图标按钮 */
.jc-settings-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #9ca3af;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.jc-settings-close:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.jc-settings-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.jc-settings-row:last-child {
    margin-bottom: 0;
}

/* 弹层中的操作按钮：默认灰色胶囊，选中黑色高亮 */
.jc-settings-item {
    flex: 1;
    padding: 9px 0;
    font-size: 13px;
    color: #666;
    background: #f5f7fa;
    border: 0.8px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.jc-settings-item:hover {
    background: #e5e7eb;
    color: #333;
}

.jc-settings-item.active,
.jc-settings-item.active:hover {
    background: #222222;
    color: #fff;
    border-color: #222222;
}

/* 卡片展开/关闭：禁用态（所有卡片已处于该状态时） */
.jc-settings-toggle.disabled,
.jc-settings-toggle.disabled:hover {
    background: #f5f7fa;
    color: #c0c4cc;
    border-color: #e5e7eb;
    cursor: default;
}

/* ============ 帮助弹层（圆角白卡片 + 标题 + 正文 + 双按钮） ============ */
/* 弹层外框：去掉 layui 默认方形白底与阴影，改为与内容一致的圆角
   注意：layui 会把 skin 值直接作为 class 加在外框上（jc-help-layer） */
.jc-help-layer {
    background: transparent !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    border: none !important;
}

/* 去掉 layui 默认内容 padding，由内容卡片自身控制 */
.jc-help-layer .layui-layer-content {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* 帮助弹层打开时锁定页面滚动 */
body.jc-no-scroll {
    overflow: hidden !important;
}

/* 手机端：帮助弹层宽度 320px（不超过屏幕 95%）并保持水平居中 */
@media (max-width: 768px) {
    .jc-help-layer {
        width: 320px !important;
        max-width: 95% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.jc-help-box {
    width: 100%;
    padding: 28px 24px 24px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
}

.jc-help-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.4;
}

.jc-help-body {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 24px;
}

.jc-help-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.jc-help-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 22px;
    font-size: 15px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.jc-help-btn:active {
    transform: scale(0.98);
}

.jc-help-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.jc-help-cancel:hover {
    background: #e5e7eb;
}

.jc-help-ok {
    background: #ef4444;
    color: #fff;
}

.jc-help-ok:hover {
    background: #dc2626;
}

/* ============ 即时状态：时间条位置的 3 个胶囊标签按钮（即时 / 赛程 / 完赛） ============ */
/* 即时状态下时间条会收起，此处在其原位置展示胶囊按钮，点击即可切换视图 */
.jc-view-caps {
    display: none; /* 由 JS 按状态切换为 flex */
    align-items: center;
    gap: 8px;
    height: auto; /* 容器高度与按钮高度一致 */
    width: calc(100% - 32px); /* 与卡片左右对齐（卡片左右内边距 16px） */
    margin: 0 16px 15px; /* 时间条与卡片间距 15px */
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

/* 胶囊按钮：白底浅边，选中为黑色高亮 */
.jc-view-cap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    background: #fff;
    border: 0.8px solid #e5e7eb; /* 【由 Agent 完成】2026-10-01 改为 0.8px 灰色边框 */
    border-radius: 999px; /* 胶囊圆角 */
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.jc-view-cap:hover {
    background: #f7f8fa;
    border-color: #dcdfe4;
    color: #222;
}

.jc-view-cap.active,
.jc-view-cap.active:hover {
    background: #222222;
    border-color: #222222;
    color: #fff;
    font-weight: 600;
}

/* 【由 Agent 完成】2026-10-01 工具行：左「全部赛事」下拉 + 右「即时 / 赛程 / 完赛」胶囊
   原 .jc-view-caps 的宽 / 外边距 / 桌面端 flex 占位改由本容器承担，胶囊自身只负责内部排布 */
.jc-intro-tools {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 全部赛事在最左，胶囊组靠右 */
    gap: 10px;
    width: calc(100% - 32px); /* 与卡片左右对齐（卡片左右内边距 16px） */
    margin: 0 16px 15px; /* 与下方卡片间距 15px */
    padding: 0;
    box-sizing: border-box;
}

.jc-view-caps {
    width: auto;
    margin: 0;
    padding: 0;
}

/* 桌面端：工具行位置与时间条一致（右侧 80% 宽度、底部与介绍文字对齐） */
@media (min-width: 769px) {
    .jc-intro-tools {
        flex: 4 1 0; /* 与 .jc-time-bar 相同的占位比例 */
        width: auto;
        height: auto;
        margin-bottom: 0; /* 底部对齐由 .jc-intro-row 控制 */
        /* 电脑端：「全部赛事」紧挨「即时」胶囊左侧，整排右侧对齐
           （不再 flex-start：4 个按钮连排后靠右，右边缘与卡片区一致） */
        justify-content: flex-end;
    }

    .jc-view-caps {
        flex: none;
        width: auto;
        height: auto;
        margin-bottom: 0;
    }
}

/* ============ 统一普通提示层皮肤（member_ui.js 的 mcToast 使用）============
   圆角 + 柔和阴影；是否带遮罩由 mcToast 的 shade 参数控制（默认 0.5 带遮罩） */
.mc-msg-layer {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}
.mc-msg-layer .layui-layer-content {
    border-radius: 12px !important;
}