/* ============================================================
   移动端适配（≤900px）
   ------------------------------------------------------------
   本文件在 index.html 里最后一个加载，且所有规则都包在
   @media 里 —— 桌面端（>900px）一行都用不到，观感与原来
   完全一致。
   处理原则：横向塞不下的东西不压缩，改成可以左右拖动；
            卡片式内容改成单列，内距/字号收紧。
   ============================================================ */

@media (max-width: 900px) {
    /* ---------- 页面骨架 ---------- */
    .header-inner   { padding: 14px 16px; gap: 12px; }
    .title-block    { flex: 1 1 100%; }
    .title-block h1 { font-size: 1.4rem; letter-spacing: -.01em; }
    .notice-panel   { padding: 18px 16px 0; }
    .notice-inner   { padding: 18px 18px 22px; }
    .notice-text    { font-size: 1rem; line-height: 1.55; }
    .schedule       { padding: 22px 16px 40px; }
    .site-footer    { padding: 18px 16px 30px; }

    /* 视图切换：独占一行、两个按钮平分，手指点得准 */
    .view-switch    { width: 100%; }
    .view-btn       { flex: 1; min-height: 42px; padding: 10px 12px 9px; letter-spacing: .06em; }

    /* ---------- 轮次筛选：一行横滑，不再换行堆叠 ---------- */
    .round-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-bottom: 10px;
    }
    .round-filter::-webkit-scrollbar { display: none; }
    .filter-chip { flex: 0 0 auto; min-height: 38px; }

    /* ---------- 比赛卡片：单列 + 内距收紧 ---------- */
    .timeline   { grid-template-columns: 1fr; gap: 20px; }
    .match      { padding: 18px 16px; gap: 14px; }
    .match-top  { flex-wrap: wrap; }
    .match-body { gap: 10px; }
    .match-status { top: 12px; right: 12px; }
    .team-name  { font-size: .92rem; }
    .score      { font-size: 1.9rem; }

    /* 触屏没有真正的 hover，位移/阴影会粘住不还原 */
    .match:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   淘汰树：不压缩，整棵树放进可以左右拖动的容器
   ------------------------------------------------------------
   卡片宽度和每轮张数都是写死的（16 强 = 8 张 × 126px），
   硬压下去只会让队名被截断、连接线也对不上。
   连线 SVG 画在 .bk-board 内部，viewBox 取 board 自己的宽高，
   而滑动发生在更外层的 .bk-wrap 上，两者互不影响，
   所以坐标依然对齐，不用动 JS。
   ============================================================ */
@media (max-width: 900px) {
    .bk-wrap {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 14px;
    }
    .bk-board {
        /* 八张首轮卡 + 中轴间距 + 底板内距 */
        min-width: var(--bk-min-w, 1060px);
        /* 右侧留白：保住最后一张卡的硬投影，别被滚动容器裁掉 */
        padding-right: 26px;
    }
    /* 手机上不做卡片 hover 位移 */
    .bk-card:hover { transform: none; }
}

/* ---------- 窄屏手机：再紧一档 ---------- */
@media (max-width: 560px) {
    .title-block h1 { font-size: 1.2rem; }
    .timeline       { gap: 16px; }
    .match          { padding: 15px 13px; gap: 12px; }
    .match-body     { gap: 8px; }
    .team-name      { font-size: .84rem; }
    .score          { font-size: 1.6rem; }
    .notice-text    { font-size: .95rem; }
}