/* 星蓝：移动端风格的蓝色直播站 */
:root {
  --xl-blue: #3a63f3;
  --xl-blue-2: #5b84ff;
  --xl-blue-grad: linear-gradient(180deg, #5b84ff, #3a63f3);
  --xl-red: #e8383d;
  --xl-ink: #1f2329;
  --xl-sub: #646a73;
  --xl-gray: #999da5;
  --xl-line: #eef0f3;
  --xl-bg: #f5f6f8;
  --xl-tab-h: 58px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #e9ebef; color: var(--xl-ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
img { vertical-align: middle; }
button { font: inherit; }
[hidden] { display: none !important; }
.xl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 整站是一个居中的手机宽度应用 */
.xl-app { position: relative; max-width: 640px; min-height: 100vh; margin: 0 auto; background: var(--xl-bg); padding-bottom: calc(var(--xl-tab-h) + env(safe-area-inset-bottom)); box-shadow: 0 0 24px rgba(0, 0, 0, .06); }
.xl-main { padding: 0 0 10px; }

/* ---------- 顶部胶囊 ---------- */
.xl-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 10px; background: linear-gradient(180deg, #eef2ff, #fff); }
.xl-brand-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xl-brand-logo img { flex: none; border-radius: 10px; box-shadow: 0 3px 8px rgba(58, 99, 243, .3); }
.xl-brand-logo span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.xl-brand-logo b { font-size: 19px; font-weight: 900; color: var(--xl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-brand-logo small { font-size: 12px; color: var(--xl-gray); white-space: nowrap; }
.xl-brand-live { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: #fff; color: var(--xl-blue); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px #d6e0ff inset; }
.xl-brand-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--xl-red); animation: xlblink 1.2s infinite; }
@keyframes xlblink { 50% { opacity: .2; } }
.xl-top { position: sticky; top: 0; z-index: 20; background: #fff; padding: 8px 0 12px; border-bottom: 1px solid var(--xl-line); }
.xl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 10px; scrollbar-width: none; }
.xl-chips::-webkit-scrollbar { display: none; }
.xl-chip { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: var(--xl-blue-grad); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 6px rgba(58, 99, 243, .25); }
.xl-chip.on { background: #e8edff; color: #000; font-size: 17px; font-weight: 900; box-shadow: none; }

/* ---------- 热门卡片（横向滚动） ---------- */
.xl-hot { background: #fff; padding: 4px 0 12px; margin-bottom: 8px; }
.xl-hot-track { display: flex; gap: 8px; overflow-x: auto; padding: 0 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.xl-hot-track::-webkit-scrollbar { display: none; }
.xl-card { flex: none; width: 170px; padding: 8px 10px 10px; border-radius: 8px; background: #fff; box-shadow: 0 1px 8px rgba(31, 35, 41, .1); scroll-snap-align: start; }
.xl-card-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--xl-gray); }
.xl-card-hd span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.xl-card-lg { max-width: 56px; overflow: hidden; text-overflow: ellipsis; display: block !important; }
.xl-play { width: 12px; height: 12px; background: url("i/play.svg") center / contain no-repeat; }
.xl-fire { width: 12px; height: 12px; background: url("i/fire.svg") center / contain no-repeat; }
.xl-card-vs { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 6px; }
.xl-card-btn { padding: 0 8px; line-height: 22px; border-radius: 4px; background: var(--xl-blue); color: #fff; font-size: 12px; }
.xl-card-btn.on { background: var(--xl-red); }
.xl-card-nm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; font-size: 13px; }
.xl-card-nm b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-card-nm b:last-child { text-align: right; }
.xl-card-nm em { font-style: italic; font-weight: 900; color: #c6cad2; font-size: 13px; }
.xl-card-all { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; letter-spacing: 2px; font-size: 13px; font-weight: 700; color: var(--xl-ink); border-radius: 8px; background: #fff; box-shadow: 0 1px 8px rgba(31, 35, 41, .1); }

/* ---------- 队徽 ---------- */
.xl-crest { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; font-style: normal; }
.xl-crest img { width: 100%; height: 100%; object-fit: contain; }
.xl-crest-lg { width: 36px; height: 36px; }
.xl-crest-xl { width: 62px; height: 62px; background: #fff; padding: 4px; }
.xl-ini { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--xl-blue); color: #fff; font-weight: 800; font-size: 12px; }
.xl-crest-lg .xl-ini { font-size: 16px; }
.xl-crest-xl .xl-ini { font-size: 26px; }

/* ---------- 区块 ---------- */
.xl-box { background: #fff; padding: 14px 16px 6px; margin-bottom: 8px; }
.xl-h { display: flex; align-items: baseline; gap: 8px; font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.xl-h small { font-size: 13px; font-weight: 400; color: var(--xl-gray); }
.xl-h a, .xl-h-sub { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--xl-gray); }
.xl-day { margin: 10px 0 0; padding: 6px 10px; border-radius: 6px; background: #f0f3ff; color: var(--xl-blue); font-size: 14px; font-weight: 700; }
.xl-none { padding: 30px 0; text-align: center; color: var(--xl-gray); }

/* ---------- 比赛行 ---------- */
.xl-row + .xl-row { border-top: 1px solid var(--xl-line); }
.xl-row-in { display: block; padding: 12px 0; }
.xl-row-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 13px; color: var(--xl-gray); }
.xl-row-time { display: inline-flex; align-items: center; gap: 5px; }
.xl-sp { width: 15px; height: 15px; background: center / contain no-repeat; }
.xl-sp-zuqiu { background-image: url("i/s-foot.svg"); }
.xl-sp-lanqiu { background-image: url("i/s-bask.svg"); }
.xl-st { display: inline-flex; align-items: center; gap: 4px; color: var(--xl-blue); font-size: 13px; }
.xl-st.on { color: var(--xl-red); }
.xl-st.on::before { content: ""; width: 14px; height: 12px; background: url("i/live.svg") center / contain no-repeat; }
.xl-row-lg { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-row-vs { display: grid; grid-template-columns: minmax(0, 1fr) 42px 34px 42px minmax(0, 1fr); align-items: center; margin-top: 10px; }
.xl-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; }
.xl-team b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-team-a { justify-content: flex-end; text-align: right; }
.xl-pt { text-align: center; font-size: 21px; font-weight: 800; font-family: "DIN Alternate", "Bahnschrift", Arial, sans-serif; }
.xl-vs { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 4px; font-style: italic; font-weight: 900; font-size: 17px; background: linear-gradient(90deg, rgba(58, 99, 243, .12), rgba(232, 56, 61, .12)); }
.xl-vs i { font-style: italic; }
.xl-vs i:first-child { color: var(--xl-blue); }
.xl-vs i:last-child { color: var(--xl-red); }
.xl-row:active { background: #fafbfc; }
.xl-bump { animation: xlbump .7s ease 3; }
@keyframes xlbump { 50% { color: var(--xl-red); transform: scale(1.25); } }

.xl-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 14px 0 10px; }
.xl-pager a, .xl-pager b { min-width: 34px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: #f0f3ff; color: var(--xl-blue); font-size: 14px; }
.xl-pager b { background: var(--xl-blue-grad); color: #fff; }

/* ---------- 详情：深色球馆头部 ---------- */
.xl-hero { position: relative; color: #fff; padding: 0 12px 16px; background: #0c111d url("i/arena.svg") center top / cover no-repeat; }
.xl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 16, .35), rgba(5, 8, 16, .7)); pointer-events: none; }
.xl-hero > * { position: relative; z-index: 1; }
.xl-hero-bar { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.xl-hero-bar { position: relative; }
.xl-hero-back { width: 30px; height: 30px; background: url("i/back.svg") center / 22px no-repeat; }
.xl-hero-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 40%; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-hero-home { display: flex; align-items: center; gap: 6px; max-width: 36%; font-size: 13px; font-weight: 700; }
.xl-hero-home img { flex: none; border-radius: 7px; }
.xl-hero-home span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-hero-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 4px; }
.xl-hero-team { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.xl-hero-side { position: absolute; top: 22px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.xl-hero-team:first-child .xl-hero-side { left: 0; }
.xl-hero-team:last-child .xl-hero-side { right: 0; }
.xl-hero-team b { font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-hero-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px; }
.xl-hero-mid time { font-size: 14px; color: rgba(255, 255, 255, .9); }
.xl-hero-score { display: flex; align-items: center; gap: 10px; font-family: "DIN Alternate", "Bahnschrift", Arial, sans-serif; }
.xl-hero-score strong { font-size: 34px; font-weight: 800; }
.xl-hero-score em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .8); }
.xl-hero-btn { padding: 0 12px; line-height: 26px; border-radius: 4px; background: var(--xl-blue); font-size: 13px; }
.xl-hero-btn.on { background: var(--xl-blue); box-shadow: 0 0 0 0 rgba(91, 132, 255, .6); animation: xlpulse 1.8s infinite; }
@keyframes xlpulse { 70% { box-shadow: 0 0 0 8px rgba(91, 132, 255, 0); } }

/* ---------- 线路 + 播放器 ---------- */
.xl-lines { background: #e9eefc; padding: 10px 0 10px; margin-bottom: 8px; }
.xl-chips-lines { padding-bottom: 2px; }
.xl-chip-out::after { content: ""; width: 10px; height: 10px; margin-left: 4px; background: url("i/out.svg") center / contain no-repeat; }
.xl-chips-lines .xl-chip.cur { background: linear-gradient(180deg, #ff6b6f, #e8383d); box-shadow: 0 2px 6px rgba(232, 56, 61, .3); }
.xl-player { position: relative; margin: 10px 10px 0; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000 url("i/arena.svg") center / cover no-repeat; }
.xl-player video, .xl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.xl-player-tip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); background: rgba(5, 8, 16, .6); font-size: 14px; }
.xl-ended { margin: 0 10px; padding: 18px 0; text-align: center; border-radius: 8px; background: #fff; color: var(--xl-blue); font-weight: 700; }
.xl-wait { color: var(--xl-sub); font-weight: 400; font-size: 14px; }

.xl-intro { margin: 8px 0 10px; font-size: 16px; line-height: 1.75; color: #333; text-align: justify; }
.xl-facts { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.xl-facts li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: #f5f7fb; font-size: 13px; }
.xl-facts span { color: var(--xl-gray); }

/* ---------- 404 ---------- */
.xl-404 { text-align: center; padding: 40px 16px 30px; }
.xl-404 h1 { margin-top: 12px; font-size: 20px; }
.xl-404 p { margin-top: 6px; color: var(--xl-gray); }
.xl-btn { display: inline-block; margin-top: 12px; padding: 0 24px; line-height: 38px; border-radius: 19px; background: var(--xl-blue-grad); color: #fff; font-weight: 700; }

/* ---------- 页脚 ---------- */
.xl-foot { padding: 16px 16px 20px; text-align: center; font-size: 12px; color: var(--xl-gray); line-height: 1.8; }
.xl-foot a { color: var(--xl-sub); }

/* ---------- 底部导航 ---------- */
.xl-tabbar { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 640px; height: calc(var(--xl-tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: #fff; box-shadow: 0 -1px 0 var(--xl-line), 0 -4px 12px rgba(0, 0, 0, .04); }
.xl-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: #6b7079; }
.xl-tabbar a.on { color: var(--xl-ink); font-weight: 600; }
.xl-ti { width: 26px; height: 26px; background: center / contain no-repeat; }
.xl-ti-home { background-image: url("i/t-home.svg"); }
.xl-ti-foot { background-image: url("i/t-foot.svg"); }
.xl-ti-bask { background-image: url("i/t-bask.svg"); }
.xl-tabbar a.on .xl-ti-home { background-image: url("i/t-home-on.svg"); }
.xl-tabbar a.on .xl-ti-foot { background-image: url("i/t-foot-on.svg"); }
.xl-tabbar a.on .xl-ti-bask { background-image: url("i/t-bask-on.svg"); }

@media (min-width: 641px) {
  .xl-row-in:hover .xl-team b { color: var(--xl-blue); }
  .xl-card:hover { box-shadow: 0 4px 14px rgba(58, 99, 243, .2); }
}

/* =========================================================
   动画
   ========================================================= */

/* ---- 进场：品牌栏 / 胶囊 / 卡片依次出现 ---- */
@keyframes xlUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xlLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes xlPop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.xl-brand-logo { animation: xlUp .5s ease-out both; }
.xl-brand-live { animation: xlPop .6s .25s ease-out both; }
.xl-chips .xl-chip { animation: xlLeft .45s ease-out both; }
.xl-chips .xl-chip:nth-child(2) { animation-delay: .06s; }
.xl-chips .xl-chip:nth-child(3) { animation-delay: .12s; }
.xl-chips .xl-chip:nth-child(4) { animation-delay: .18s; }
.xl-chips .xl-chip:nth-child(5) { animation-delay: .24s; }
.xl-chips .xl-chip:nth-child(n+6) { animation-delay: .3s; }
.xl-hot-track > * { animation: xlLeft .5s ease-out both; }
.xl-hot-track > :nth-child(2) { animation-delay: .08s; }
.xl-hot-track > :nth-child(3) { animation-delay: .16s; }
.xl-hot-track > :nth-child(4) { animation-delay: .24s; }
.xl-hot-track > :nth-child(n+5) { animation-delay: .32s; }

/* 比赛行、区块标题：滚动到可见时淡入（live-feed.js 加 xl-in；没有 JS 时直接显示） */
.xl-js .xl-row, .xl-js .xl-box > .xl-h { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
.xl-js .xl-row.xl-in, .xl-js .xl-box > .xl-h.xl-in { opacity: 1; transform: none; }
/* 兜底：脚本没加载时 2.5 秒后自动显示 */
.xl-js .xl-row:not(.xl-in), .xl-js .xl-box > .xl-h:not(.xl-in) { animation: xlFailsafe 0s 2.5s forwards; }
@keyframes xlFailsafe { to { opacity: 1; transform: none; } }

/* ---- logo 扫光 + 呼吸 ---- */
.xl-logo-wrap { position: relative; flex: none; display: inline-block; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 8px rgba(58, 99, 243, .3); }
.xl-logo-wrap img { display: block; box-shadow: none !important; border-radius: 0 !important; animation: xlBreath 2.4s ease-in-out infinite; }
.xl-logo-wrap::after { content: ""; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); transform: rotate(25deg); animation: xlShine 3.2s ease-in-out infinite; }
@keyframes xlShine { 0%, 60% { left: -80%; } 100% { left: 140%; } }
@keyframes xlBreath { 50% { transform: scale(1.06); } }

/* ---- 今日直播：红点扩散波纹 ---- */
.xl-brand-live i { position: relative; }
.xl-brand-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--xl-red); animation: xlRipple 1.6s ease-out infinite; }
@keyframes xlRipple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

/* ---- 胶囊：按下回弹、选中项下方小蓝条 ---- */
.xl-chip { transition: transform .15s, box-shadow .2s; }
.xl-chip:active { transform: scale(.92); }
.xl-chip.on { position: relative; }
.xl-chip.on::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--xl-blue); animation: xlBar .5s .3s ease-out both; }
@keyframes xlBar { from { width: 0; margin-left: 0; } }

/* ---- 热门卡：火苗跳动、直播按钮呼吸、按下下沉 ---- */
.xl-fire { animation: xlFlame .9s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes xlFlame { 0% { transform: scale(1) rotate(-6deg); } 100% { transform: scale(1.2) rotate(6deg); } }
.xl-card { transition: transform .2s, box-shadow .2s; }
.xl-card:active { transform: scale(.96); }
.xl-card-btn.on { animation: xlGlow 1.4s ease-in-out infinite; }
@keyframes xlGlow { 50% { box-shadow: 0 0 0 4px rgba(232, 56, 61, .2); } }
.xl-card-all { position: relative; overflow: hidden; }
.xl-card-all::after { content: "\203A"; position: absolute; bottom: 8px; left: 50%; margin-left: -4px; color: var(--xl-blue); font-weight: 900; writing-mode: horizontal-tb; animation: xlNudge 1.2s ease-in-out infinite; }
@keyframes xlNudge { 50% { transform: translateX(4px); } }

/* ---- 比赛行：进行中的 VS 流光 + 左侧红色指示 ---- */
.xl-row { position: relative; }
.xl-row:active, .xl-js .xl-row.xl-in:active { transform: scale(.985); transition: transform .1s; }
.xl-row[data-xl-st="1"]::before { content: ""; position: absolute; left: -16px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--xl-red); animation: xlBlink 1.4s ease-in-out infinite; }
@keyframes xlBlink { 50% { opacity: .25; } }
.xl-row[data-xl-st="1"] .xl-vs { position: relative; overflow: hidden; }
.xl-row[data-xl-st="1"] .xl-vs::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); animation: xlSweep 2s linear infinite; }
@keyframes xlSweep { to { left: 120%; } }
.xl-row[data-xl-st="1"] .xl-pt { color: var(--xl-red); }

/* ---- 区块标题左侧蓝条 ---- */
.xl-h::before { content: ""; align-self: center; width: 4px; height: 16px; border-radius: 2px; background: var(--xl-blue-grad); }
.xl-h.xl-in::before { animation: xlGrow .6s ease-out both; }
@keyframes xlGrow { from { height: 0; } }

/* ---- 详情：顶灯光束扫动、队徽浮动、比分发光 ---- */
.xl-hero { overflow: hidden; }
.xl-hero > .xl-beam { position: absolute; z-index: 1; top: -40px; width: 120px; height: 340px; pointer-events: none; background: linear-gradient(180deg, rgba(190, 210, 255, .45), rgba(190, 210, 255, 0) 80%); filter: blur(6px); mix-blend-mode: screen; }
.xl-beam-l { left: 8%; transform-origin: 50% 0; animation: xlSwingL 6s ease-in-out infinite; }
.xl-beam-r { right: 8%; transform-origin: 50% 0; animation: xlSwingR 7s ease-in-out infinite; }
@keyframes xlSwingL { 0%, 100% { transform: rotate(18deg); opacity: .7; } 50% { transform: rotate(-8deg); opacity: 1; } }
@keyframes xlSwingR { 0%, 100% { transform: rotate(-18deg); opacity: .7; } 50% { transform: rotate(8deg); opacity: 1; } }
.xl-hero > :not(.xl-beam) { z-index: 2; }
.xl-hero-team .xl-crest { animation: xlFloat 3.2s ease-in-out infinite; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.xl-hero-team:last-child .xl-crest { animation-delay: -1.6s; }
@keyframes xlFloat { 50% { transform: translateY(-6px); } }
.xl-hero-score strong { text-shadow: 0 0 14px rgba(120, 160, 255, .6); }
.xl-hero[data-xl-st="1"] .xl-hero-score strong { animation: xlScoreGlow 2s ease-in-out infinite; }
@keyframes xlScoreGlow { 50% { text-shadow: 0 0 22px rgba(255, 255, 255, .95), 0 0 6px rgba(120, 160, 255, .9); } }
.xl-hero-vs { animation: xlUp .6s .1s ease-out both; }

/* ---- 线路胶囊：轮流扫光；播放器等待时转圈 ---- */
.xl-chips-lines .xl-chip { position: relative; overflow: hidden; }
.xl-chips-lines .xl-chip::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: skewX(-20deg); animation: xlChipShine 3.6s ease-in-out infinite; }
.xl-chips-lines .xl-chip:nth-child(2)::before { animation-delay: .4s; }
.xl-chips-lines .xl-chip:nth-child(3)::before { animation-delay: .8s; }
.xl-chips-lines .xl-chip:nth-child(4)::before { animation-delay: 1.2s; }
.xl-chips-lines .xl-chip:nth-child(n+5)::before { animation-delay: 1.6s; }
@keyframes xlChipShine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
.xl-player { animation: xlUp .5s .2s ease-out both; }
.xl-player-tip::before { content: ""; flex: none; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: xlSpin .9s linear infinite; }
@keyframes xlSpin { to { transform: rotate(360deg); } }

/* ---- 底部导航：选中图标弹跳 ---- */
.xl-tabbar a.on .xl-ti { animation: xlHop .6s ease-out both; }
@keyframes xlHop { 0% { transform: translateY(0) scale(.8); } 40% { transform: translateY(-6px) scale(1.1); } 70% { transform: translateY(1px); } 100% { transform: none; } }
.xl-tabbar a:active .xl-ti { transform: scale(.85); }

/* ---- 空状态插图浮动 ---- */
.xl-404 img { animation: xlFloat 3s ease-in-out infinite; }

/* 系统设置了“减少动态效果”时关闭动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .xl-js .xl-row, .xl-js .xl-box > .xl-h { opacity: 1; transform: none; }
}

/* 比分列表（内置 score-row 等）配色 */
:root { --sc-accent: #3a63f3; --sc-on: #fff; --sc-live: #e8383d; --sc-radius: 10px; }

/* 手机端：缩小字号和间距，队名放不下时换行，尽量完整显示 */
@media (max-width: 480px) {
  .xl-row-vs { grid-template-columns: minmax(0, 1fr) 36px 30px 36px minmax(0, 1fr); }
  .xl-team { gap: 4px; font-size: 13.5px; }
  .xl-team b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
}
@media (max-width: 480px) {
  .xl-card-nm { font-size: 12px; }
  .xl-card-nm b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
}

/* 手机端：长队名不截断，换行完整显示 */
@media (max-width: 480px) {
  .xl-hero-team b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
}

/* 热门比赛标记（后台设为热门或属于热门联赛），手机上只显示火苗 */
.xl-hotmark { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; padding: 0 6px 0 4px; border-radius: 9px; background: linear-gradient(90deg, #ff8a1f, #ff3b30); color: #fff; font: normal 700 11px/17px -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; vertical-align: middle; white-space: nowrap; text-transform: none; animation: xl-hotmark-glow 1.8s ease-in-out infinite; }
.xl-hotmark::before { content: "🔥"; font-size: 11px; line-height: 1; }
@keyframes xl-hotmark-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 30, .35); } 50% { box-shadow: 0 0 0 4px rgba(255, 80, 30, 0); } }
@media (max-width: 480px) {
  .xl-hotmark { padding: 0 3px; font-size: 0; gap: 0; margin-left: 2px; }
  .xl-hotmark::before { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .xl-hotmark { animation: none; } }
/* 横滑卡片头部空间小，热门只显示火苗 */
.xl-card .xl-hotmark { padding: 0 3px; font-size: 0; gap: 0; }
.xl-card .xl-hotmark::before { font-size: 12px; }
.xl-card-lg { flex: none; }

/* 热门比赛：火苗跳动；整行左侧一抹淡淡的火光缓慢明暗，叠在原有背景上，不改变原样式 */
.xl-hotmark::before { display: inline-block; transform-origin: 50% 85%; animation: xl-flicker 1.3s ease-in-out infinite; }
@keyframes xl-flicker {
  0%, 100% { transform: scale(1) rotate(-4deg); filter: brightness(1); }
  25% { transform: scale(1.1, 1.2) rotate(3deg); filter: brightness(1.2); }
  50% { transform: scale(.95, 1.04) rotate(-2deg); filter: brightness(.95); }
  75% { transform: scale(1.06, 1.14) rotate(4deg); filter: brightness(1.15); }
}
.xl-hotrow { animation: xl-ember 3.2s ease-in-out infinite; }
@keyframes xl-ember {
  0%, 100% { box-shadow: inset 3px 0 0 rgba(255, 98, 40, .7), inset 90px 0 70px -52px rgba(255, 140, 50, .16); }
  50% { box-shadow: inset 3px 0 0 rgba(255, 64, 30, .9), inset 130px 0 90px -60px rgba(255, 112, 40, .26); }
}
tr.xl-hotrow { animation: none; }
tr.xl-hotrow > td { animation: xl-ember-td 3.2s ease-in-out infinite; }
tr.xl-hotrow > td:first-child { box-shadow: inset 3px 0 0 rgba(255, 80, 30, .8); }
@keyframes xl-ember-td { 0%, 100% { background-color: rgba(255, 150, 60, .05); } 50% { background-color: rgba(255, 120, 40, .11); } }
@media (prefers-reduced-motion: reduce) {
  .xl-hotmark::before, .xl-hotrow, tr.xl-hotrow > td { animation: none; }
  .xl-hotrow { box-shadow: inset 3px 0 0 rgba(255, 98, 40, .7), inset 90px 0 70px -52px rgba(255, 140, 50, .16); }
}

/* 播放页球队名链接到球队搜索页 */
.xl-tlink { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.xl-tlink:hover { opacity: .8; border-bottom-style: solid; }

/* 首页：日期选择 + 热门直播 + 赛事直播 */
.xl-box-dates { padding: 10px 12px; }
.xl-box-dates .hd-dates { margin: 0; }
.xl-h .hd-tabs { margin-left: auto; align-self: center; font-weight: 400; }
.xl-row-lg .hd-lg:hover { color: var(--xl-blue); }
.xl-crumb { margin: 0 0 8px; font-size: 13px; color: var(--xl-gray); }
/* 导航 5 项：一屏放下 */
.xl-chips { overflow: visible; gap: 4px; }
.xl-chip { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 14px; }
.xl-chip.on { font-size: 15px; }
.xl-row.xl-hotrow .xl-row-in { padding-left: 8px; }

/* 热门标记：本模板专属样式（✨ 热门），覆盖上面通用的 🔥 热门；手机上只显示图标 */
.xl-hotmark { --xl-hot-lb: 11px; gap: 2px; font-size: 0; background: linear-gradient(90deg,#3a63f3,#7b5cff); color: #fff; border: 0; border-radius: 9px; animation: xl-hot-glow 1.8s ease-in-out infinite; }
.xl-hotmark::before { content: "✨"; display: inline-block; transform-origin: 50% 50%; animation: xl-hot-ic 1.4s ease-in-out infinite; }
.xl-hotmark::after { content: "热门"; font-size: var(--xl-hot-lb); line-height: 1; }
@keyframes xl-hot-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(58,99,243, .35); } 50% { box-shadow: 0 0 0 4px rgba(58,99,243, 0); } }
@keyframes xl-hot-ic { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 480px) { .xl-hotmark { --xl-hot-lb: 0; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .xl-hotmark, .xl-hotmark::before { animation: none; } }
.xl-card .xl-hotmark { --xl-hot-lb: 0; gap: 0; }

/* 日期条吸顶（样式在内置 hd.css）：底色跟页面一致 */
:root { --hd-bg: #e9ebef; }