/* show页主体：不动你index头尾 */
.wrap{width:min(1200px,92vw);margin:0 auto}

/* 面包屑 */
.crumb{margin:14px 0 10px;font-size:12px;color:#8b90a1}
.c-a{color:#8b90a1;font-weight:800}
.c-a:hover{color:#ff7a1a}
.c-sep{margin:0 6px;color:#c7cad6}
.c-cur{color:#111827;font-weight:1000}
/* ===== 顶部对阵横幅（1:1 仿参考） ===== */
.vs-hero{
  position:relative;
  height:220px;
  border-radius:18px;
  overflow:hidden;
  background: radial-gradient(1200px 400px at 50% 40%, #0b1b4f 0%, #0a163f 55%, #111827 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  margin-bottom:18px;
}

.vs-hero .hero-side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:18px;
  z-index:2;
  color:#fff;
  padding:0 26px;
}
.vs-hero .hero-side.left{ left:0; }
.vs-hero .hero-side.right{ right:0; flex-direction:row-reverse; text-align:right; }

.vs-hero .hero-logo{
  width:86px;
  height:86px;
  border-radius:50%;
  background:#fff;
  padding:10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  object-fit:contain;
}
.vs-hero .hero-name{
  font-weight:900;
  font-size:28px;
  letter-spacing:.5px;
  max-width:280px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 中间区域：上胶囊 + 大 VS + 按钮 */
.vs-hero .hero-mid{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  z-index:3;
}

.vs-hero .mid-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.12);
  color:#fff;
  font-weight:900;
  font-size:18px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.vs-hero .pill-lg{ white-space:nowrap; }
.vs-hero .pill-time{ white-space:nowrap; opacity:.95; }

.vs-hero .mid-vs{
  font-size:42px;
  font-weight:1000;
  color:#fff;
  letter-spacing:2px;
}

.vs-hero .mid-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 54px;
  border-radius:999px;
  background:#fff;
  color:#ff3b30;
  font-weight:1000;
  font-size:22px;
  text-decoration:none;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.vs-hero .mid-btn:hover{ transform: translateY(-1px); }

/* 响应式：小屏缩字号缩队徽 */
@media (max-width: 980px){
  .vs-hero{ height:200px; }
  .vs-hero .hero-logo{ width:72px; height:72px; }
  .vs-hero .hero-name{ font-size:22px; max-width:200px; }
  .vs-hero .mid-vs{ font-size:36px; }
  .vs-hero .mid-btn{ height:50px; font-size:20px; padding:0 44px; }
}
@media (max-width: 640px){
  .vs-hero{ height:auto; padding:18px 12px; }
  .vs-hero .hero-side{
    position:static;
    transform:none;
    justify-content:center;
    padding:8px 0;
  }
  .vs-hero .hero-mid{
    position:static;
    transform:none;
    padding:10px 0 14px;
  }
}

/* 顶部对阵横幅（仿截图黑蓝渐变大块） */
.hero{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #eef0f6;
  box-shadow:0 10px 26px rgba(17,24,39,.08);
  background:linear-gradient(90deg,#1f2937 0%, #0b1d49 52%, #1f2937 100%);
}
.hero-inner{
  padding:26px 22px;
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items:center;
  gap:10px;
}
.side{display:flex;align-items:center;gap:14px}
.side.right{justify-content:flex-end;text-align:right}
.badge{
  width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);
}
.badge-img{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;background:#fff;
}
.tname{
  color:#fff;
  font-weight:1000;
  font-size:14px;
  max-width:260px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mid{text-align:center}
.meta{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  border-radius:999px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:900;
}
.vs{
  margin:10px 0 12px;
  color:#fff;
  font-weight:1100;
  font-size:26px;
  letter-spacing:2px;
}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;
  padding:0 18px;
  border-radius:999px;
  background:#fff;
  color:#ef4444;
  font-weight:1100;
  font-size:12px;
}

/* 卡片通用 */
.card{
  margin-top:14px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(17,24,39,.08);
  border:1px solid #eef0f6;
  overflow:hidden;
}
.mt{margin-top:14px}

/* 橙色标题条（仿截图） */
.card-h{padding:14px 14px 8px}
.tag{
  display:inline-flex;align-items:center;gap:10px;
  background:#ff7a1a;
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-weight:1000;
}
.tag-ico{
  width:16px;height:16px;border-radius:6px;
  background:rgba(255,255,255,.18);
  position:relative;
}
.tag-ico::after{
  content:"";
  position:absolute;left:6px;top:4px;
  width:0;height:0;
  border-left:7px solid #fff;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}
.tag-txt{font-size:15px;letter-spacing:.2px}

/* 信号源按钮 */
.sig-row{
  padding:10px 14px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.sig{
  height:28px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #ffd3c1;
  background:#fff7f2;
  color:#ff7a1a;
  font-weight:1000;
  font-size:12px;
}
.sig:hover{background:#ff7a1a;color:#fff;border-color:#ff7a1a}

/* 比赛介绍 */
.intro{padding:6px 14px 14px}
.kv{
  margin:8px 0;
  font-size:13px;
  color:#374151;
  font-weight:800;
}
.kv strong{color:#111827;margin-right:8px}
.txt{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #f3f4f6;
  color:#4b5563;
  font-size:13px;
  line-height:1.8;
}
.tips{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  background:#f9fafb;
  border:1px solid #eef2f7;
}
.tips-t{font-weight:1000;color:#111827;font-size:12px}
.tips-p{margin:6px 0 0;color:#6b7280;font-size:12px}

/* 更多直播表格 */
.live-table{padding:8px 6px 10px}
.tr{
  margin:0 8px;
  padding:10px 10px;
  display:grid;
  grid-template-columns: 86px 120px 1fr 56px 1fr 110px;
  gap:8px;
  align-items:center;
  border-top:1px solid #f3f4f6;
}
.tr:first-child{border-top:none}
.tr:hover{background:#fafafa;border-radius:10px}
.td{min-width:0}
.time{font-size:12px;font-weight:1000;color:#3b4252;font-variant-numeric:tabular-nums}
.league .lg{font-size:12px;color:#7b8196;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:22px;height:22px;border-radius:50%;border:1px solid #eef2f7;object-fit:cover;background:#fff}
.name{font-size:12px;font-weight:1000;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name:hover{color:#ff7a1a;text-decoration:underline}
.vs{text-align:center;color:#ef4444;font-weight:1000;font-size:12px}
.act{display:flex;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 12px;border-radius:8px;
  font-size:12px;font-weight:1000;
}
.btn-soon{background:#f3f4f6;color:#9ca3af;border:1px solid #e5e7eb}

/* 响应式 */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:12px}
  .side.right{justify-content:flex-start;text-align:left}
  .tr{grid-template-columns: 78px 1fr 56px 1fr 100px;}
  .league{display:none;}
}
@media (max-width: 560px){
  .tr{grid-template-columns: 70px 1fr 56px 1fr 88px;}
  .logo{display:none;}
}