/* ============================================================
   排球赛程 · 基础布局（主题共用）
   ------------------------------------------------------------
   本文件只放结构与默认外观；配色、纹理、形状、动效由主题文件覆盖
   ============================================================ */

:root {
    --header-h: 98px;
    --maxw: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg, #ffffff);
    color: var(--text, #111111);
    font-family: var(--font-display, system-ui, -apple-system, "Microsoft YaHei", sans-serif);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background .35s ease, color .35s ease;
}

/* ---------- 头部 ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg, #ffffff);
    border-bottom: var(--header-border, 1px solid #eeeeee);
}

.header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 30px 40px 26px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.title-block { min-width: 0; }

.title-block h1 {
    margin: 0;
    font-size: var(--title-size, 1.75rem);
    font-weight: 900;
    letter-spacing: var(--title-spacing, -.015em);
    font-family: var(--font-display);
    text-transform: var(--title-transform, none);
}

/* ---------- 公告栏：独立大模块，不再挂在标题下面 ---------- */
.notice-panel {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 30px 40px 0;
}

.notice-inner {
    padding: 26px 32px 30px;
}

.notice-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.notice-tag {
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .2em;
}

.notice-label {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .34em;
    opacity: .5;
}

.notice-text {
    margin: 0;
    font-size: var(--notice-size, 1.2rem);
    font-weight: 800;
    line-height: 1.6;
}

.refresh-icon { display: inline-block; font-size: .95rem; }

/* ---------- 主体 ---------- */
.schedule {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 30px 40px 90px;
}

.state-hint {
    padding: 44px 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-dim, #777);
    letter-spacing: .05em;
}
.state-hint.is-error { color: var(--live, #e00); }

/* ---------- 赛程表第一行：按轮次筛选 ---------- */
.round-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft, rgba(10, 10, 10, .16));
}

.filter-chip {
    padding: 6px 15px 5px;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--btn-fg, #0A0A0A);
    background: var(--btn-bg, transparent);
    border: var(--btn-border, 2.5px solid #0A0A0A);
    border-radius: var(--btn-radius, 0);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.filter-chip:hover { transform: translate(-1px, -2px); }
.filter-chip:focus-visible {
    outline: 2px solid var(--accent, #0057B8);
    outline-offset: 3px;
}
.filter-chip.is-active {
    color: var(--accent-fg, #FFFFFF);
    background: var(--accent, #0057B8);
    border-color: var(--accent, #0057B8);
}

/* ---------- 时间轴：全部比赛按时间排序，不再按日期/小组切块 ---------- */
.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 32px 28px;
    /* 同一行的卡片拉齐：所有卡片尺寸一致，不以内容多少论高矮 */
    align-items: stretch;
}

/* ---------- 比赛卡片 ---------- */
.match {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--card-pad, 24px 26px);
    background: var(--card-bg, #ffffff);
    border: var(--card-border, 2px solid #111111);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, none);
    transition: transform .18s ease, box-shadow .18s ease;
}
.match:hover {
    transform: var(--card-hover-transform, translateY(-3px));
    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
}

.match-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-dim, #777);
}

.match-time {
    font-weight: 900;
    color: var(--accent, #111);
    font-variant-numeric: tabular-nums;
}

/* 日期是卡片上的主信息（没有日期分组条了），单独强调 */
.match-date {
    font-weight: 900;
    color: var(--accent, #111);
}

.match-week {
    font-size: .7em;
    font-weight: 800;
    letter-spacing: .08em;
}

.match-court::before {
    content: "·";
    margin-right: 6px;
    opacity: .45;
}

/* 比分主体 */
.match-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.team.away { justify-content: flex-end; }

.team-name {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team.is-winner .team-name {
    font-weight: 900;
    color: var(--win, #0A0A0A);
}

/* ---------- 晋级队伍：黄色荧光笔 ---------- */
/* 只用背景色画一道「笔迹」，不动结构和行高；边缘不齐才像手涂的 */
.hl {
    padding: 0 .18em;
    margin: 0 -.18em;
    color: var(--hl-fg, #0A0A0A);
    background-image: linear-gradient(
        180deg,
        transparent 7%,
        var(--hl, #FFD400) 7%,
        var(--hl, #FFD400) 93%,
        transparent 93%
    );
    background-repeat: no-repeat;
    clip-path: polygon(1% 13%, 100% 3%, 99% 88%, 2% 97%);
}

/* 轮空那一侧：压淡，和晋级的队伍拉开 */
.team.is-bye .team-name {
    font-weight: 600;
    font-style: italic;
    color: var(--text-dim, #777);
}

.score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-score, var(--font-display));
    font-size: var(--score-size, 2.2rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.score-num { color: var(--score-fg, #111); }

/* 中间分隔符：两个几何方块，可整体着色与错位 */
.score-sep {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 3px;
    font-size: 0;
}
.score-sep i {
    display: block;
    width: var(--sep-size, 12px);
    height: var(--sep-size, 12px);
    background: var(--sep-bg, #0A0A0A);
}
.score-sep i:last-child {
    transform: translateX(var(--sep-offset, 0));
}

.match[data-status="upcoming"] .score-num { color: var(--upcoming, #bbb); }

/* 每局小分 */
.match-sets { margin-top: -2px; }

.sets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* 没打完、轮空的比赛也要占掉一行的高度，
       卡片才不会比已结束的比赛矮一截 */
    min-height: var(--set-h, 23px);
    align-items: flex-start;
}

.set {
    padding: 2px 8px;
    font-family: var(--font-score, var(--font-display));
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-dim, #777);
    background: var(--set-bg, rgba(0,0,0,.04));
    border: var(--set-border, 1px solid transparent);
    border-radius: var(--radius-sm, 6px);
    font-variant-numeric: tabular-nums;
}
.set.is-win {
    color: var(--text, #111);
    font-weight: 900;
    background: var(--set-win-bg, rgba(0,0,0,.08));
}
/* 状态徽章 */
.match-status {
    position: absolute;
    top: var(--badge-top, 14px);
    right: var(--badge-right, 16px);
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .05em;
    color: var(--badge-fg, #777);
    background: var(--badge-bg, transparent);
    border: var(--badge-border, 1px solid currentColor);
    border-radius: var(--badge-radius, 999px);
    white-space: nowrap;
}

.match[data-status="finished"] .status-badge {
    color: var(--win, #0A0A0A);
    background: var(--win-soft, rgba(10, 10, 10, .055));
    border-color: var(--win, #0A0A0A);
}

/* ---------- 备注 ---------- */
.match-note {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-dim, #777);
}

/* ---------- 页脚 ---------- */
.site-footer {
    padding: 22px 28px 36px;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.75;
    color: var(--text-dim, #777);
    border-top: var(--header-border, 1px solid #eee);
    /* 允许 data/site.json 的 footerNote 用 \n 换行排多行署名 */
    white-space: pre-line;
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
    .header-inner   { padding: 14px 16px; }
    .notice-panel   { padding: 20px 16px 0; }
    .notice-inner   { padding: 20px 20px 24px; }
    .schedule       { padding: 24px 16px 40px; }
    /* 窄屏单列，卡片才不会被压扁 */
    .timeline       { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- 无障碍：尊重系统的减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}