/**
 * rank_mobile.css — 手机竖屏（≤767.98px）榜单：紧凑排版 + 横滑时冻结排名 / 题数 / 罚时和校名队名。
 *
 * 手机上 #rank-container 要横向滚动（overflow-x:auto），CSS 规定另一轴随之变成 auto，
 * 表头的 position:sticky 就只认这个容器、不再跟页面滚动。所以页面方向的吸顶由
 * rank_mobile_header.js 克隆一份表头放进 position:fixed 的条里；本文件只管排版和左侧冻结。
 *
 * 不作用于：全屏 / 投屏（.fullscreen）、滚榜（data-rank-mode="roll"）、plain 表格布局。
 * 尺寸全部走 --rank-* 变量，和 rank_contest_page_density.css 的松紧档同一套；手机上固定用这一档。
 */
@media (max-width: 767.98px) {
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-content-wrapper {
        --rank-col-width: 34px;
        --rank-solve-col-width: 26px;
        --rank-penalty-col-width: 40px;
        --rank-problem-col-width: 40px;
        --rank-header-height: 34px;
        --rank-stats-height: 30px;
        --rank-col-gap: 2px;
        --rank-row-gap: 2px;
        --rank-padding-xs: 1px;
        --rank-padding-sm: 3px;
        --rank-padding-md: 5px;
        --rank-padding-lg: 6px;
        --rank-padding-xl: 8px;
        --rank-font-size-xs: 8px;
        --rank-font-size-sm: 9px;
        --rank-font-size-md: 10px;
        --rank-font-size-lg: 11px;
        --rank-font-size-xl: 12px;
        --rank-font-size-2xl: 12px;
        --rank-font-size-3xl: 14px;
        --rank-font-size-4xl: 18px;
        --rank-font-size-5xl: 22px;
        /* 左侧冻结区：行左内边距 + 三列 */
        --rank-m-pad: 4px;
        --rank-m-left-solve: calc(var(--rank-col-width) + var(--rank-col-gap) + var(--rank-m-pad));
        --rank-m-left-penalty: calc(var(--rank-col-width) + var(--rank-solve-col-width) + 2 * var(--rank-col-gap) + var(--rank-m-pad));
        --rank-m-frozen-w: calc(var(--rank-col-width) + var(--rank-solve-col-width) + var(--rank-penalty-col-width) + 3 * var(--rank-col-gap) + var(--rank-m-pad));
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-container {
        font-size: 12px;
        line-height: 1.3;
    }

    /* ── 表头 ── */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row {
        padding: 3px 4px 0 0;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row .rank-col .header-cell {
        font-size: 11px;
        line-height: 1.1;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row .rank-col .header-cell en-text,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-header-stats {
        font-size: 8px;
        margin-top: 0;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-header-content {
        line-height: 1.1;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-header-color-bg {
        top: -12px;
    }

    /* ── 行 ── */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row:not(:last-child) {
        padding: 0 4px 0 0;
        margin-bottom: 2px;
        border-radius: var(--rank-radius-inner);
        box-shadow: none;
    }

    /* 教练 / 选手和校徽底图在窄屏上放不下，点队伍行的弹层里有完整信息 */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .coach-player-section,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .school-logo,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-team-id-tag,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-name-en,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-emoji {
        display: none !important;
    }

    /* 校名 + 队名一行，横滑时钉在左边 */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .top-section {
        height: 20px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-info-section {
        position: sticky;
        left: var(--rank-m-pad);
        flex: 0 0 auto;
        width: calc(100vw - 2 * var(--rank-m-pad) - 8px);
        max-width: calc(100vw - 2 * var(--rank-m-pad) - 8px);
        --rank-text-fade-width: 16px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-info {
        grid-template-rows: 20px;
        gap: 4px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-names,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-names.team-names-single {
        grid-row: auto;
        min-height: 0;
        padding-left: 4px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .school-name {
        font-size: 12px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-name-cn {
        font-size: 12px;
        min-height: 0;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .team-type-icon {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .flag-icon {
        width: 14px;
        height: 10px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section {
        margin-top: 20px;
        padding: 1px 0 2px;
        gap: 0;
    }

    /*
     * 左侧三列冻结。底色沿行（含斑马、悬停）一路 inherit 下来，题格从下面滑过时不透出来；
     * 列间距改成各列自带的右内边距，这样缝里也是行底色。
     */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-main-content,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section {
        background: inherit;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-rank,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-solve,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-penalty {
        position: sticky;
        z-index: 6;
        background: inherit;
        border-radius: 0;
        padding-right: var(--rank-col-gap);
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-rank {
        left: 0;
        flex-basis: calc(var(--rank-col-width) + var(--rank-col-gap) + var(--rank-m-pad));
        padding-left: var(--rank-m-pad);
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-solve {
        left: var(--rank-m-left-solve);
        flex-basis: calc(var(--rank-solve-col-width) + var(--rank-col-gap));
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .stats-section > .rank-col-penalty {
        left: var(--rank-m-left-penalty);
        flex-basis: calc(var(--rank-penalty-col-width) + var(--rank-col-gap));
        /* 冻结区右缘一道细阴影，提示右边还能滑 */
        box-shadow: 4px 0 4px -3px rgba(15, 23, 42, 0.18);
    }

    /*
     * 筛选匹配行（含筛选置顶）：行底是半透明 tint，固左列若仍 inherit 几乎透明，
     * 横滑时题格数字会叠上来。用不透明行底 + 同 tint 叠层，观感仍跟行一致。
     */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match .rank-main-content,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match .stats-section,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match .stats-section > .rank-col-rank,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match .stats-section > .rank-col-solve,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match .stats-section > .rank-col-penalty {
        background-color: var(--rank-bg-primary, #fff);
        background-image: linear-gradient(
            var(--rank-filter-bg, rgba(13, 202, 240, 0.12)),
            var(--rank-filter-bg, rgba(13, 202, 240, 0.12))
        );
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match:hover .rank-main-content,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match:hover .stats-section,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match:hover .stats-section > .rank-col-rank,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match:hover .stats-section > .rank-col-solve,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-row.rank-filter-match:hover .stats-section > .rank-col-penalty {
        background-color: var(--rank-bg-primary, #fff);
        background-image: linear-gradient(
            var(--rank-filter-bg-hover, rgba(13, 202, 240, 0.18)),
            var(--rank-filter-bg-hover, rgba(13, 202, 240, 0.18))
        );
    }


    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-group {
        gap: var(--rank-col-gap);
    }

    /* 表头同样冻结左三列；表头底色由 rank_mobile_header.js 写进 --rank-m-head-bg 盖住缝 */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-rank,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-solve,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-penalty {
        position: sticky;
        z-index: 6;
        box-shadow: calc(-1 * var(--rank-col-gap)) 0 0 0 var(--rank-m-head-bg, transparent);
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-rank {
        left: var(--rank-m-pad);
        margin-left: var(--rank-m-pad);
        box-shadow: calc(-1 * var(--rank-m-pad)) 0 0 0 var(--rank-m-head-bg, transparent);
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-solve {
        left: var(--rank-m-left-solve);
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-header-row > .rank-col-penalty {
        left: var(--rank-m-left-penalty);
        box-shadow: calc(-1 * var(--rank-col-gap)) 0 0 0 var(--rank-m-head-bg, transparent),
            var(--rank-col-gap) 0 0 0 var(--rank-m-head-bg, transparent);
    }

    /* ── 单元格 ── */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .rank-item,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .solve-item,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .penalty-item {
        font-size: 12px;
    }

    /* 题格两行：上提交次数，下时间（ICPC 紧凑榜惯例），省掉分隔线 */
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-item .problem-content {
        flex-direction: column;
        padding: 0;
        line-height: 1.05;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-item .problem-separator {
        display: none;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-item .pro-submit-cnt {
        font-size: 12px;
    }

    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-item .time-brief,
    .rank-system:not(.fullscreen):not([data-rank-mode="roll"]):not([data-rank-layout="plain"]) .problem-item .time-brief.time-brief-long {
        font-size: 9px;
        font-weight: 700;
    }

    /* 全场首答星随本档 --rank-stats-height 自动换算大小与偏移（rank.css），不再单写 px */
}

/* 页面方向的吸顶表头（rank_mobile_header.js 生成）。克隆在 .rank-content-wrapper 里，主题、松紧变量照常生效 */
.rank-m-sticky-head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1020;
    overflow: hidden;
    display: none;
    /* 吃掉落在表头上的点按，免得点穿到下面的队伍行弹出详情 */
    pointer-events: auto;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
}

.rank-m-sticky-head.is-on {
    display: block;
}

.rank-m-sticky-head > .rank-container {
    margin: 0;
}

.rank-m-sticky-head .rank-header-row {
    position: static;
}