/**
 * 外榜手机端。只在窄屏生效，选择器都挂在 body.csg-layout-outrank 上。
 * 不改榜单、列表原有样式文件。避开 :has()，并给 flex 补上旧 WebKit 前缀。
 */
@media (max-width: 767.98px) {
    body.csg-layout-outrank {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.csg-layout-outrank #outrank_toolbar input,
    body.csg-layout-outrank #outrank_toolbar select,
    body.csg-layout-outrank #outrank_search_input {
        font-size: 16px;
    }

    body.csg-layout-outrank main {
        padding: 8px 10px 20px;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.csg-layout-outrank .outrank-standalone-page-header {
        margin-bottom: 8px;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__grid {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-align: start;
        align-items: flex-start;
        padding: 0 0 8px;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__identity {
        -webkit-box-flex: 1;
        flex: 1 1 12rem;
        min-width: 0;
        margin-right: 8px;
        -webkit-box-align: start;
        align-items: flex-start;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__actions {
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        margin: 2px 0 0 auto;
        align-self: flex-start;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__wording {
        min-width: 0;
        padding-bottom: 0.35rem;
    }

    body.csg-layout-outrank .outrank-standalone-page-header .csg-page-header .csg-page-header__heading {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    body.csg-layout-outrank .csg-page-header__title,
    body.csg-layout-outrank .csg-page-header__heading {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    body.csg-layout-outrank .csg-page-header__en {
        letter-spacing: 0.06em;
    }

    /* 列表工具条：图标和搜索同一行 */
    body.csg-layout-outrank #outrank_toolbar .d-flex {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
    }

    body.csg-layout-outrank #outrank_toolbar .toolbar-btn {
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        padding: 0;
        margin: 0 6px 0 0;
        display: -webkit-inline-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }

    body.csg-layout-outrank #outrank_toolbar .toolbar-btn:not(#outrank_refresh):not(#outrank_clear) {
        width: auto;
        padding: 0 10px;
    }

    body.csg-layout-outrank #outrank_toolbar .toolbar-label-inline {
        display: none !important;
    }

    body.csg-layout-outrank #outrank_toolbar .toolbar-group {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1 1 9rem;
        min-width: 0;
        margin: 0;
    }

    body.csg-layout-outrank #outrank_toolbar .toolbar-input,
    body.csg-layout-outrank #outrank_search_input {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    body.csg-layout-outrank .bootstrap-table .fixed-table-toolbar .bs-bars,
    body.csg-layout-outrank .bootstrap-table .fixed-table-toolbar .bs-bars.float-start,
    body.csg-layout-outrank .bootstrap-table .fixed-table-toolbar .bs-bars.float-left,
    body.csg-layout-outrank .bootstrap-table .fixed-table-toolbar .bs-bars.pull-left {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    /* 列表：一行一张卡片，标题在上，时间跟在下面 */
    body.csg-layout-outrank #outrank_list_table thead,
    body.csg-layout-outrank .bootstrap-table .fixed-table-header {
        display: none !important;
    }

    body.csg-layout-outrank #outrank_list_table,
    body.csg-layout-outrank #outrank_list_table tbody {
        display: block;
        width: 100%;
    }

    body.csg-layout-outrank #outrank_list_table tbody tr {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        margin: 0 0 8px;
        padding: 10px 12px;
        border: 1px solid #e6e8ec;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.csg-layout-outrank #outrank_list_table tbody td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border: 0;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal;
    }

    body.csg-layout-outrank #outrank_list_table td.outrank-col-title {
        -webkit-box-ordinal-group: 1;
        order: 0;
        margin-bottom: 4px;
    }

    body.csg-layout-outrank #outrank_list_table td.outrank-col-id {
        -webkit-box-ordinal-group: 2;
        order: 1;
        margin-bottom: 6px;
    }

    body.csg-layout-outrank #outrank_list_table td.outrank-col-times {
        -webkit-box-ordinal-group: 3;
        order: 2;
        margin-top: 2px;
        padding-top: 6px !important;
        border-top: 1px solid #eef0f3;
    }

    body.csg-layout-outrank #outrank_list_table td.outrank-col-ops,
    body.csg-layout-outrank #outrank_list_table td.outrank-col-token {
        -webkit-box-ordinal-group: 4;
        order: 3;
        margin-top: 8px;
    }

    body.csg-layout-outrank .outrank-list-scope .bootstrap-table .fixed-table-container {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    body.csg-layout-outrank .outrank-list-scope .bootstrap-table .fixed-table-body {
        overflow: visible;
    }

    body.csg-layout-outrank .outrank-id-cell {
        -webkit-box-pack: start;
        justify-content: flex-start;
        gap: 8px;
    }

    body.csg-layout-outrank .outrank-type-logo {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 6px;
    }

    body.csg-layout-outrank .outrank-id-cell__text {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: baseline;
        align-items: baseline;
        gap: 8px;
    }

    body.csg-layout-outrank .outrank-id-cell__id {
        font-size: 0.95rem;
    }

    body.csg-layout-outrank .outrank-title-link {
        display: block;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        line-height: 1.35;
        font-size: 0.95rem;
        font-weight: 600;
    }

    body.csg-layout-outrank .outrank-list-scope .fixed-table-pagination {
        margin: 2px 2px 0;
    }

    body.csg-layout-outrank .outrank-list-scope .fixed-table-pagination .pagination-detail {
        float: none;
        width: 100%;
        margin: 0;
        text-align: right;
        font-size: 0.75rem;
        color: #64748b;
    }

    body.csg-layout-outrank .outrank-time-stack {
        --outrank-time-icon-rail: 1.25rem;
        min-width: 0;
        max-width: 100%;
        gap: 1px;
    }

    body.csg-layout-outrank .outrank-time-flow-row__icon {
        font-size: 0.75rem;
        border-radius: 4px;
    }

    body.csg-layout-outrank .outrank-id-cell__uuid {
        max-width: none;
        font-size: 0.72rem;
    }

    /* 榜单页：壳不把整页撑宽，榜在框内横滑 */
    body.csg-layout-outrank .contest-rank-page-shell,
    body.csg-layout-outrank .contest-rank-page-shell__body,
    body.csg-layout-outrank .outrank-standalone-page-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.csg-layout-outrank #rank-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.csg-layout-outrank .rank-header .controls-time-section {
        padding: 0;
    }

    body.csg-layout-outrank .rank-header .controls-time-container {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        padding: 8px 10px;
    }

    body.csg-layout-outrank .rank-header .rank-mode-indicator {
        -webkit-box-ordinal-group: 1;
        order: 0;
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        margin: 0 8px 6px 0;
    }

    body.csg-layout-outrank .rank-header .controls-time-container > .toolbar-item {
        -webkit-box-ordinal-group: 2;
        order: 1;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        margin: 0 0 6px 6px;
    }

    /* 「…」与平铺时的图标按钮同尺寸（32×28）：放不下时它和剩下的模式按钮同排，原来 36×36 比旁边的按钮大一圈 */
    body.csg-layout-outrank .rank-header #controls-toggle-btn {
        -webkit-box-ordinal-group: 3;
        order: 2;
        width: 32px;
        height: 28px;
        margin: 0 0 6px 6px;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
    }

    body.csg-layout-outrank .rank-header .time-progress-wrapper {
        -webkit-box-ordinal-group: 4;
        order: 3;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-flex: 1;
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.csg-layout-outrank .rank-header .time-display-group {
        width: auto;
        min-width: 4.5rem;
        padding: 0 6px 0 0;
        -webkit-box-align: start;
        align-items: flex-start;
    }

    body.csg-layout-outrank .rank-header .time-progress-bar-container {
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    body.csg-layout-outrank .rank-header #header-controls {
        display: none;
    }

    /* 放得下：图标平铺在模式名右边，不显示三点 */
    body.csg-layout-outrank .rank-header.outrank-icons-fit .controls-time-container {
        gap: 0;
    }

    /* 模式名吃掉剩余宽度，图标组整体靠右：右缘与下一排的「跳到末尾」按钮对齐，不再在行尾留一截参差的空白。
       flex-grow 只在换行判定之后分配余量，不影响 _outrankIconRowFits 的“放得下”测量。 */
    body.csg-layout-outrank .rank-header.outrank-icons-fit .rank-mode-indicator {
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        margin: 0 4px 0 0;
        /* 放不放得下与排名方式无关：模式名固定按 4 个字宽参与测量（=「队伍排名」，原有 360–390 的余量不变），
           「学校/组织 排名」放不全时省略号收尾。否则学校榜因字更宽被判成三点菜单，切换按钮跳到右侧。 */
        flex-basis: 4em;
        width: 4em;
        overflow: hidden;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .rank-mode-indicator .rank-mode-cn {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .rank-mode-indicator .rank-mode-ghost {
        display: none;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .controls-time-container > .toolbar-item,
    body.csg-layout-outrank .rank-header.outrank-icons-fit .toolbar-group-filter {
        -webkit-box-ordinal-group: 2;
        order: 1;
        margin: 0 0 0 4px;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit #header-controls {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-ordinal-group: 3;
        order: 2;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        width: auto;
        gap: 4px;
        margin: 0 0 0 4px;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit #header-controls .toolbar-group {
        -webkit-box-orient: horizontal;
        flex-direction: row;
        gap: 4px;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .filter-btn .button-text,
    body.csg-layout-outrank .rank-header.outrank-icons-fit .filter-quick-info {
        display: none;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .toolbar-group-filter,
    body.csg-layout-outrank .rank-header.outrank-icons-fit .toolbar-group-filter .toolbar-item,
    body.csg-layout-outrank .rank-header.outrank-icons-fit .toolbar-group-filter .filter-btn {
        width: auto;
        min-width: 0;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit #controls-toggle-btn {
        display: none;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .time-progress-wrapper {
        margin-top: 6px;
    }

    /* 放不下：菜单贴在三点按钮旁，不沉到屏幕底部 */
    body.csg-layout-outrank .rank-header .controls-dropdown {
        position: fixed;
        left: auto;
        right: 8px;
        bottom: auto;
        top: 48px;
        width: 17.5rem;
        max-width: calc(100vw - 16px);
        min-width: 0;
        max-height: 70vh;
        z-index: calc(var(--rank-z-index-base, 500) + 30);
    }

    body.csg-layout-outrank footer {
        margin-top: 12px !important;
        padding-top: 4px !important;
        padding-bottom: 12px !important;
    }

    body.csg-layout-outrank footer small,
    body.csg-layout-outrank footer a {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/*
 * 360–374px（常见安卓窄屏）：「队伍排名」+ 7 个 32px 图标在 375px 上刚好放下（余量 0），到 360 就差 14px，
 * 整排退回「…」菜单，只剩一个图标和一个三点，像没排好。这里把图标间距 4→2px、模式名字号 12.5→12px，
 * 省出约 18px，360 上照样平铺。仍放不下（系统放大字号等）时 _outrankIconRowFits 量出来照旧收进菜单。
 */
@media (max-width: 374.98px) {
    body.csg-layout-outrank .rank-header.outrank-icons-fit .rank-mode-indicator {
        margin-right: 2px;
        font-size: 12px;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit .controls-time-container > .toolbar-item,
    body.csg-layout-outrank .rank-header.outrank-icons-fit .toolbar-group-filter,
    body.csg-layout-outrank .rank-header.outrank-icons-fit #header-controls {
        margin-left: 2px;
    }

    body.csg-layout-outrank .rank-header.outrank-icons-fit #header-controls,
    body.csg-layout-outrank .rank-header.outrank-icons-fit #header-controls .toolbar-group {
        gap: 2px;
    }
}