:root {
  --green: #00742d;
  --green-2: #018927;
  --deep: #00623d;
  --mint: #a6d8b2;
  --gold: #ffd800;
  --ink: #222;
  --paper: #f3f6f4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #e7f3ea url("/static/theme/bg.jpg") center top no-repeat;
  background-size: 100% auto;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: 0; }
.wrap { width: min(1120px, calc(100% - 28px)); margin: 0 auto; }
.top { padding: 18px 0 8px; color: #fff; }
.top-in { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: #fff; }
.brand strong { display: block; font-size: 26px; letter-spacing: .08em; line-height: 1.1; }
.brand small { color: #d7ecdf; font-size: 12px; }
.nav { display: flex; gap: 8px; }
.nav a { color: #fff; font-size: 18px; padding: 6px 12px; }
.nav a.on, .nav a:hover { color: var(--gold); }
.nav-toggle, .nav-btn { display: none; }
.hotevent {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 14px;
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
}
.hotevent a { color: #c9ddff; font-size: 18px; white-space: nowrap; margin: 0 12px; padding-bottom: 4px; }
.hotevent a.on, .hotevent a:hover { color: #fff; border-bottom: 3px solid var(--gold); }
#hot_match { padding: 10px 0 20px; }
#hot_match .tit img { width: min(997px, 100%); display: block; }
.hot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-top: 12px; }
.hot-card {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  min-height: 90px;
  padding: 8px 12px;
  background: url("/static/theme/bg_hot.png") center / 100% 100% no-repeat;
  color: #111;
  font-weight: 700;
}
.hot-card .ellipsis { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hot-card .ellipsis:last-child { justify-content: flex-end; }
.hot-time { text-align: center; color: #fff; line-height: 1.35; }
.hot-time i { display: block; color: #111; font-style: normal; }
.logo { width: 34px; height: 34px; object-fit: contain; background: transparent; flex: 0 0 auto; }
#index {
  background: #06732c;
  padding: 28px 0 40px;
  color: #fff;
}
#index .desc { max-width: 920px; margin: 0 auto 18px; text-align: center; }
#index h1 { margin: 0 0 8px; font-size: 40px; }
#index .desc p { margin: 0; line-height: 1.8; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.sec-head h2, .subhead { margin: 0; font-size: 26px; }
.sec-head a, .page-head a { color: var(--gold); }
.match-list { display: flex; flex-direction: column; gap: 6px; max-height: 920px; overflow: auto; }
.match-row {
  display: grid;
  grid-template-columns: 92px 72px minmax(0,1fr) 88px minmax(0,1fr) 92px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 2px;
}
.match-row:nth-child(odd) { background: var(--mint); color: #111; }
.match-row:nth-child(even) { background: var(--deep); color: #fff; }
.match-row:nth-child(odd) .m-league, .match-row:nth-child(odd) .m-score { color: #0b5c32; }
.match-row:nth-child(even) .m-league, .match-row:nth-child(even) .m-score { color: var(--gold); }
.m-time, .m-league, .m-state { font-size: 14px; }
.m-time small { display: block; color: #d40000; font-size: 12px; }
.match-row:nth-child(even) .m-time small { color: #ffb4b4; }
.m-home, .m-away { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.m-home { justify-content: flex-end; }
.m-home span, .m-away span, .hot-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-score { display: flex; justify-content: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-score i { font-style: normal; font-weight: 500; }
.m-state { justify-self: end; font-weight: 700; }
#index_news, #index_video, .band {
  padding: 36px 0 28px;
}
#index_news {
  background:
    linear-gradient(rgba(8, 70, 32, .78), rgba(8, 70, 32, .78)),
    #0a5c28 url("/static/theme/bg_news.jpg") center top / cover no-repeat;
}
#index_video {
  background:
    linear-gradient(rgba(8, 70, 32, .78), rgba(8, 70, 32, .78)),
    #0a5c28 url("/static/theme/bg_video.jpg") center top / cover no-repeat;
}
#index_news .sec-head, #index_video .sec-head, #index_news h2, #index_video h2 { color: #fff; width: min(1120px, calc(100% - 28px)); margin-left: auto; margin-right: auto; }
.card-list, .page-head, .days, .article, .board, .signals, .crumb, .side, .pager, .subhead, .empty {
  width: min(1120px, calc(100% - 28px));
  margin-left: auto;
  margin-right: auto;
}
.card-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.news-card, .video-card {
  display: block;
  background: #fff;
  border: 3px solid #00ad2a;
  padding: 12px;
  color: #111;
}
.news-card { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.news-card img, .ph { width: 140px; height: 92px; object-fit: cover; background: #e8f6ec; }
.ph { display: flex; align-items: center; justify-content: center; color: var(--green); font-weight: 800; }
.news-card h3, .video-card h3 { margin: 0; font-size: 16px; line-height: 1.45; }
.meta, .excerpt { margin: 6px 0 0; color: #4d6456; font-size: 13px; }
.page-head { padding: 22px 0 8px; }
.page-head h1 { margin: 0 0 8px; font-size: 32px; color: #06381c; }
.page-head p { margin: 0; color: #245c38; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; color: #245c38; font-size: 13px; }
.crumb a { color: var(--gold); }
.days { display: flex; gap: 8px; margin: 12px auto; }
.days a, .pager a, .pager span { padding: 6px 12px; background: var(--green-2); color: #fff; }
.days a.on, .pager .on { background: var(--gold); color: #111; }
.pager { display: flex; gap: 8px; justify-content: center; margin: 18px auto; }
.board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 28px 16px;
  text-align: center;
  color: var(--green);
  background: #fff url("/static/theme/bg_match.jpg") center / cover no-repeat;
  min-height: 120px;
}
.board .team { font-size: 22px; font-weight: 800; }
.board .big { font-size: 36px; font-weight: 800; }
.signals { display: flex; gap: 10px; justify-content: center; margin: 16px auto; }
.signals a {
  min-width: 160px;
  text-align: center;
  line-height: 38px;
  color: var(--green);
  font-weight: 800;
  background: url("/static/theme/bg_btn.jpg") center / cover no-repeat;
}
.article, .panel { background: var(--green); color: #fff; padding: 18px; margin-top: 16px; }
.article h1, .panel h2 { margin-top: 0; }
.article-body p { margin: 0 0 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a, .tags span { background: var(--green-2); color: #fff; padding: 3px 8px; font-size: 12px; }
.side { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.side a { background: var(--green-2); color: #fff; padding: 10px 14px; background-image: url("/static/theme/icon.jpg"); background-repeat: no-repeat; background-position: right 12px center; }
.player { margin: 12px 0; background: #000; }
.player video { width: 100%; max-height: 520px; }
.lines { display: flex; flex-wrap: wrap; gap: 8px; }
.lines a { background: #fff; color: var(--green); padding: 8px 12px; font-weight: 700; }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; width: min(1120px, calc(100% - 28px)); margin: 20px auto 28px; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.2); padding: 8px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.empty { background: #fff; color: #666; padding: 16px; }
.site-foot {
  background: #06351c url("/static/theme/bg_footer.jpg") center top / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 36px 16px 42px;
  line-height: 1.9;
}
.foot-name { margin: 0; letter-spacing: .18em; font-size: 18px; }
.site-foot p { margin: 0; }
.subhead { color: #06381c; margin-top: 22px; }
@media (max-width: 800px) {
  body { background-size: auto 220px; overflow-x: hidden; }
  .wrap { width: calc(100% - 20px); }
  .brand strong { font-size: 22px; }
  .brand img { width: 36px; height: 36px; }
  .hotevent { width: calc(100% - 20px); padding-bottom: 10px; }
  .hotevent a { font-size: 15px; margin: 0 8px; }
  .hot-grid, .card-list, .split, .news-card { grid-template-columns: 1fr; }
  .hot-card {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    min-height: 76px;
    padding: 8px 8px;
    font-size: 13px;
    background-image: url("/static/theme/bg_hot2.png");
  }
  .hot-card .logo, .match-row .logo { width: 26px; height: 26px; }
  .nav-btn { display: inline-flex; color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 4px 10px; border-radius: 999px; }
  .nav { display: none; position: absolute; left: 10px; right: 10px; top: 74px; z-index: 8; flex-direction: column; background: rgba(0, 60, 30, .97); padding: 8px; border-radius: 12px; }
  .nav-toggle:checked ~ .nav { display: flex; }
  .top { position: relative; }
  #index { padding: 18px 0 28px; }
  #index h1, .page-head h1 { font-size: 26px; }
  #index .desc p { font-size: 14px; line-height: 1.7; }
  .sec-head { align-items: center; margin: 16px 0 8px; }
  .sec-head h2 { font-size: 20px; }
  .match-list { max-height: none; }
  .match-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "time league state" "home score away";
    gap: 6px 8px;
    padding: 8px 10px;
  }
  .m-time { grid-area: time; }
  .m-league { grid-area: league; justify-self: center; text-align: center; }
  .m-state { grid-area: state; font-size: 12px; }
  .m-home { grid-area: home; justify-content: flex-start; }
  .m-score { grid-area: score; }
  .m-away { grid-area: away; justify-content: flex-end; }
  #index_news, #index_video { background: #0a5c28; padding: 22px 0 18px; }
  .news-card img, .ph { width: 100%; height: 140px; }
  .board { grid-template-columns: 1fr; background-image: url("/static/theme/bg_match2.jpg"); min-height: 0; }
  .signals { flex-direction: column; align-items: center; }
  .signals a { width: min(240px, 100%); }
  .article h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}