/* Windows 无国旗 emoji 字体，用只覆盖国旗码位的 Twemoji 子集字体兜底（79KB，离线自托管） */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/static/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0020-E007F;
  font-display: swap;
}

:root {
  --bg: #f3f5f9; --card: #fff; --ink: #1e293b; --dim: #64748b;
  --home: #2563eb; --draw: #94a3b8; --away: #e11d48; --accent: #059669;
  --line: #e2e8f0; --nav1: #0b1220; --nav2: #16224d;
  --gold: #ca8a04; --shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
  --shadow-lg: 0 6px 24px rgba(15,23,42,.13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Twemoji Country Flags", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #eef1f7 0%, var(--bg) 240px);
  color: var(--ink); line-height: 1.6; }
main { max-width: 1080px; margin: 0 auto; padding: 20px 16px; }

/* ===== 顶部声明 ===== */
.ai-notice { background: linear-gradient(120deg, #fffbeb, #fef3c7); color: #92400e;
  font-size: .8rem; text-align: center; padding: 6px 14px; line-height: 1.5;
  border-bottom: 1px solid #fde68a; }

/* ===== 导航 ===== */
.nav { display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(120deg, var(--nav1), var(--nav2) 70%, #1e3a8a);
  color: #fff; padding: 12px 22px; flex-wrap: wrap; gap: 6px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 14px rgba(2,6,23,.35); }
.nav .brand { font-weight: 800; font-size: 1.12rem; margin: 0; letter-spacing: .01em;
  color: #fff; text-decoration: none; }
.nav nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav nav a { color: #cbd5e1; text-decoration: none; margin: 0; padding: 5px 12px;
  border-radius: 999px; font-size: .92rem; transition: all .15s; }
.nav nav a:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ===== 标题 ===== */
h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; }
h2 { font-size: 1.08rem; font-weight: 700; }
.date-head { border-left: 4px solid var(--accent); padding-left: 10px; margin-top: 28px;
  color: #0f172a; }

/* ===== 悬浮视频窗（右下角） ===== */
.float-video { position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: min(336px, calc(100vw - 32px)); border-radius: 12px; overflow: hidden;
  background: #0f172a; box-shadow: 0 8px 30px rgba(2,6,23,.45);
  border: 1px solid rgba(255,255,255,.12); }
.fv-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 6px 7px 12px;
  background: linear-gradient(120deg, #0b1220, #16224d); }
.fv-head a { color: #e2e8f0; text-decoration: none; font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-head a:hover { color: #fff; text-decoration: underline; }
.fv-close { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: rgba(255,255,255,.1); color: #cbd5e1; font-size: .85rem; line-height: 1;
  cursor: pointer; }
.fv-close:hover { background: rgba(255,255,255,.22); color: #fff; }
.fv-body { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fv-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) { .float-video { right: 12px; bottom: 12px; } }

/* ===== 卡片 ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card { display: block; background: var(--card); border-radius: 14px; padding: 16px;
  text-decoration: none; color: inherit; border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: #bfdbfe; }
.card-top { display: flex; justify-content: space-between; font-size: .8rem; color: var(--dim); }
.group-tag { background: linear-gradient(120deg, #e0e7ff, #ede9fe); color: #4338ca;
  border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.teams-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; gap: 8px; }
.team { font-weight: 700; font-size: 1.04rem; display: flex; align-items: center; gap: 6px;
  min-width: 0; }
.team .tflag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.tflag { font-style: normal; }
.score.final { font-weight: 800; font-size: 1.25rem; color: var(--accent);
  background: #ecfdf5; border-radius: 8px; padding: 0 10px; flex-shrink: 0; }
.score.vs { color: #cbd5e1; font-weight: 700; font-size: .82rem; flex-shrink: 0; }

/* ===== 概率条 ===== */
.prob-bar { display: flex; height: 24px; border-radius: 999px; overflow: hidden;
  font-size: .72rem; color: #fff; text-align: center; font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.18); }
.prob-bar.big { height: 38px; font-size: .98rem; margin: 14px 0; border-radius: 12px; }
.prob-bar .seg { display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; min-width: 0; }
.seg.home { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.seg.draw { background: linear-gradient(180deg, #a8b3c2, #94a3b8); }
.seg.away { background: linear-gradient(180deg, #f43f5e, #e11d48); }

.top-scores { font-size: .85rem; margin-top: 10px; color: var(--dim); }
.chip { display: inline-block; background: #ecfdf5; color: #065f46; border-radius: 6px;
  border: 1px solid #d1fae5; padding: 1px 7px; margin: 2px 4px 0 0; white-space: nowrap;
  font-size: .82rem; }
.chip em { font-style: normal; opacity: .7; }

.back { display: inline-block; margin-bottom: 10px; color: var(--home);
  text-decoration: none; font-weight: 600; font-size: .92rem; }
.back:hover { text-decoration: underline; }
.detail-head .sub { color: var(--dim); margin-top: -6px; }
.detail-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-small { font-size: .95rem; color: #cbd5e1; font-weight: 700; }
.team-link { color: inherit; text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color .15s; }
.team-link:hover { border-color: var(--home); color: var(--home); }
.squad-link { float: right; font-size: .78rem; font-weight: 500; color: var(--home);
  text-decoration: none; }
.squad-link:hover { text-decoration: underline; }

/* ===== 面板 ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.panel { background: var(--card); border-radius: 14px; padding: 16px 20px;
  border: 1px solid var(--line); box-shadow: var(--shadow); margin: 16px 0; }
.grid-2 .panel { margin: 0; }
.panel h2 { margin-top: 2px; }

/* ===== 表格 ===== */
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.compare th, .compare td { padding: 7px 8px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.compare td:first-child { text-align: left; }
.compare tr:hover td { background: #f8fafc; }
.edge-row .pos { color: #b45309; font-weight: 700; }
.edge-row .neg { color: #6b7280; }

.heatmap { table-layout: fixed; text-align: center; font-size: .78rem; }
.heatmap th { background: #f1f5f9; padding: 4px; }
.heatmap th.corner { font-size: .68rem; }
.heatmap td { padding: 6px 2px; border: 1px solid #fff; border-radius: 2px; }

.form-table td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; }
.form-table tr:last-child td { border-bottom: none; }
.dim { color: var(--dim); } .small { font-size: .78rem; }
.result { display: inline-block; width: 1.7em; text-align: center; border-radius: 6px;
  color: #fff; font-size: .8rem; font-weight: 600; }
.result.w { background: var(--accent); } .result.d { background: var(--draw); }
.result.l { background: var(--away); }

.elo-chart { width: 100%; height: auto; background: #fafbfd; border: 1px solid #f1f5f9;
  border-radius: 8px; }

/* AI 预测解读：标签列 + 内容列的统一行式布局 */
.explain-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.explain-item { display: flex; align-items: flex-start; gap: 12px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 9px 14px; }
.explain-item.conclusion {
  background: linear-gradient(120deg, #eff6ff, #eef2ff); border-color: #dbeafe; }
.explain-head { flex: 0 0 8.2rem; display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .85rem; color: #334155; line-height: 1.65;
  white-space: nowrap; }
.explain-item.conclusion .explain-head { color: #1e40af; }
.explain-icon { font-size: 1rem; }
.explain-text { flex: 1; min-width: 0; font-size: .9rem; color: #475569;
  line-height: 1.65; }
.explain-item.conclusion .explain-text { color: #1e3a8a; font-weight: 500; }
@media (max-width: 560px) {
  .explain-item { flex-direction: column; gap: 2px; }
  .explain-head { flex: none; }
}
.explanation { font-size: .98rem; }
.note { font-size: .82rem; color: var(--dim); }

.table-wrap { overflow-x: auto; border-radius: 10px; }
.rank-table th, .rank-table td { padding: 7px 9px; text-align: center;
  border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.rank-table .team-cell { text-align: left; font-weight: 700; }
.rank-table .team-cell .team-link { display: flex; align-items: center; gap: 7px; }
.rank-table .team-cell .tflag { font-size: 1.25rem; line-height: 1; }
.rank-table thead th { background: linear-gradient(120deg, var(--nav1), var(--nav2));
  color: #fff; position: sticky; top: 0; }
.rank-table tbody tr { background: #fff; }
.rank-table tbody tr:nth-child(even) { background: #fafbfd; }
.rank-table tbody tr:hover { background: #eff6ff; }
.champ { font-weight: 700; }

footer { max-width: 1080px; margin: 28px auto; padding: 14px 16px 0; color: var(--dim);
  font-size: .82rem; border-top: 1px solid var(--line); }
.disclaimer { color: #b45309; }

/* ===== 球队主页 ===== */
.team-hero { display: flex; align-items: center; gap: 22px;
  background: linear-gradient(120deg, #ffffff, #f0f6ff 60%, #eef2ff);
  border: 1px solid #dbe5f3; }
.team-hero-flag { font-size: 4.6rem; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(15,23,42,.25)); }
.team-hero-info h1 { margin: 0 0 4px; }
.team-hero-info .sub { color: var(--dim); margin: 0 0 10px; }
.team-en { font-size: .85rem; font-weight: 500; color: #94a3b8; margin-left: 6px; }
.stat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; font-size: .82rem; font-weight: 600; color: #334155;
  box-shadow: var(--shadow); }
.stat-chip.gold { background: linear-gradient(120deg, #fef9c3, #fef3c7);
  border-color: #fde68a; color: #92400e; }

.adv-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.adv-label { width: 64px; flex-shrink: 0; font-size: .85rem; font-weight: 600; color: #334155; }
.adv-track { position: relative; flex: 1; height: 16px; background: #eef2f7;
  border-radius: 999px; overflow: hidden; }
.adv-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #059669); }
.adv-val { width: 52px; flex-shrink: 0; text-align: right; font-size: .85rem;
  font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.pos-head { margin: 18px 0 8px; padding-left: 10px; border-left: 4px solid var(--home);
  font-size: .98rem; }
.pos-head.pos-gk { border-color: #f59e0b; }
.pos-head.pos-df { border-color: #2563eb; }
.pos-head.pos-mf { border-color: #059669; }
.pos-head.pos-fw { border-color: #e11d48; }
.squad-table th, .squad-table td { padding: 6px 10px; text-align: center;
  border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.squad-table thead th { background: #f8fafc; color: var(--dim); font-size: .78rem;
  font-weight: 600; }
.squad-table .squad-name { text-align: left; font-weight: 600; }
.squad-table .squad-club { text-align: left; color: #475569; }
.squad-table .squad-no { color: var(--dim); font-variant-numeric: tabular-nums; }
.squad-table tbody tr:hover { background: #f8fafc; }
.cap-badge { display: inline-block; background: var(--gold); color: #fff;
  border-radius: 50%; width: 1.25em; height: 1.25em; line-height: 1.25em;
  text-align: center; font-size: .72rem; font-weight: 700; vertical-align: 10%; }

/* ===== 淘汰赛页 ===== */
.ko-card { cursor: default; }
.slot-row { font-size: .85rem; color: var(--dim); margin: 6px 0 10px; font-weight: 600; }
.ko-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ko-team { padding: 3px 0; }
.ko-line { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; font-size: .85rem; }
.ko-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ko-val { font-style: normal; font-size: .8rem; font-weight: 700; color: #1e40af;
  flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ko-p { display: block; position: relative; height: 5px; margin-top: 3px;
  background: #eef2f7; border-radius: 999px; overflow: hidden; }
.ko-p i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.if-pair { font-size: .8rem; background: linear-gradient(120deg, #fefce8, #fef9c3);
  border: 1px solid #fef08a; border-radius: 8px; padding: 7px 10px; margin-top: 10px;
  color: #713f12; }

/* ===== 淘汰赛对阵树 ===== */
.bracket-wrap { overflow-x: auto; background: linear-gradient(180deg, #ffffff, #f6f9fd);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px;
  box-shadow: var(--shadow); }
.bracket { display: flex; gap: 28px; min-width: 1320px; height: 780px; --bline: #cbd5e1; }
.bside { display: flex; gap: 28px; flex: 4; min-width: 0; }
.bcenter { flex: 1.15; position: relative; display: flex; flex-direction: column;
  justify-content: center; padding-top: 30px; }
.round { display: flex; flex-direction: column; flex: 1; position: relative;
  padding-top: 30px; min-width: 0; }
.rlabel { position: absolute; top: 0; left: 0; right: 0; text-align: center;
  font-size: .78rem; font-weight: 800; color: #64748b; letter-spacing: .12em; }
.bcenter > .rlabel { top: 0; }

.pair { flex: 1; display: flex; flex-direction: column; justify-content: space-around;
  position: relative; }
.pair.single { justify-content: center; }

/* 节点卡片 */
.bmatch { display: block; background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 7px; text-decoration: none; color: inherit; position: relative; z-index: 1;
  box-shadow: 0 1px 3px rgba(15,23,42,.07); transition: all .12s; }
.bmatch:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(29,78,216,.2);
  transform: translateY(-1px); }
.bm-head { display: flex; justify-content: space-between; font-size: .64rem;
  color: #94a3b8; margin-bottom: 2px; }
.bm-row { display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; line-height: 1.5; gap: 4px; }
.bm-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row .p { color: #64748b; font-size: .68rem; flex-shrink: 0; }
.bm-row.fav .n { font-weight: 700; color: #1d4ed8; }
.bm-row.fav .p { color: #1d4ed8; font-weight: 700; }

/* 连接线：⊐ 形（出线）+ 入线短横 */
.bleft .pair:not(.single)::after { content: ''; position: absolute; right: -15px;
  top: 25%; height: 50%; width: 14px; border: 2px solid var(--bline); border-left: none;
  border-radius: 0 8px 8px 0; }
.bright .pair:not(.single)::after { content: ''; position: absolute; left: -15px;
  top: 25%; height: 50%; width: 14px; border: 2px solid var(--bline); border-right: none;
  border-radius: 8px 0 0 8px; }
.bleft .pair.single::after { content: ''; position: absolute; right: -15px; top: 50%;
  width: 14px; height: 2px; background: var(--bline); }
.bright .pair.single::after { content: ''; position: absolute; left: -15px; top: 50%;
  width: 14px; height: 2px; background: var(--bline); }
.bleft .round:not(.rfirst) .bmatch::before, .final-node .bmatch::before {
  content: ''; position: absolute; left: -15px; top: 50%; width: 14px; height: 2px;
  background: var(--bline); }
.bright .round:not(.rfirst) .bmatch::before { content: ''; position: absolute;
  right: -15px; top: 50%; width: 14px; height: 2px; background: var(--bline); }
.final-node .bmatch::after { content: ''; position: absolute; right: -15px; top: 50%;
  width: 14px; height: 2px; background: var(--bline); }

/* 中央：冠军 / 决赛 / 季军 */
.final-node .bmatch { border: 2px solid #fbbf24; box-shadow: 0 4px 14px rgba(202,138,4,.28); }
.champ-box { position: absolute; top: 36px; left: 0; right: 0; text-align: center;
  background: linear-gradient(135deg, #fef9c3, #fde68a); border: 1px solid #fcd34d;
  border-radius: 14px; padding: 12px 6px; box-shadow: 0 4px 14px rgba(202,138,4,.18); }
.crown { font-size: 1.7rem; line-height: 1; }
.champ-name { font-weight: 800; font-size: 1.05rem; color: #92400e; margin-top: 2px; }
.champ-sub { font-size: .72rem; color: #b45309; }
.champ-others { font-size: .68rem; color: #a16207; margin-top: 4px;
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.third-box { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 8px 6px; }
.third-box .bm-head { justify-content: center; gap: 4px; }
.third-line { font-size: .78rem; }
.third-link { font-size: .72rem; color: var(--home); text-decoration: none; }

.detail-title { margin-top: 36px; }
.ko-card:target { outline: 3px solid #93c5fd; outline-offset: 2px; }

@media (max-width: 760px) {
  .bracket { height: 700px; }
  .bracket-wrap { padding: 10px 6px; border-radius: 12px; }
  .team-hero { gap: 14px; }
  .team-hero-flag { font-size: 3.2rem; }
  .nav { padding: 10px 14px; }
}