/* ===========================
   比赛详情页 — 全屏独立页面
   直播区 + 比赛信息 + 投注玩法
=========================== */

/* ---- 页面容器：三段式 flex 布局 ---- */
#pageMatchDetail {
  padding: 0 !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 480px;
  margin: 0 auto;
  z-index: var(--z-detail-page);
  background: #0B1426;
  display: none;
  flex-direction: column;
  overflow: hidden;           /* 页面本身不滚动 */
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
#pageMatchDetail.active {
  display: flex !important;
  transform: translateX(0) !important;
  animation: none !important;
}

/* ---- 自定义顶部导航栏（替代全局 top-nav） ---- */
.match-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: rgba(11,20,38,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;                /* 不被压缩 */
  position: relative;            /* ::after 定位基准 */
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-sizing: border-box;
}
.match-detail-header::after {
  /* 隐蔽的底部阴影线，增加层次感 */
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.match-detail-back {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 7px 14px 7px 10px;
  color: var(--text-main); font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}
.match-detail-back:active { background: rgba(255,255,255,0.12); transform: scale(0.96); }
.match-detail-back i { font-size: var(--icon-md); }
.match-detail-header-title {
  font-size: var(--fs-md); font-weight: 800; color: var(--text-main);
  text-align: center; flex: 1; padding: 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ================================================================
   直播 / 比赛画面区 — 沉浸式大屏
=============================================================== */
.match-live-section {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    #071020 0%,
    #0a1a30 25%,
    #0c2240 50%,
    #0a1a30 75%,
    #071020 100%
  );
  min-height: 300px;
  display: flex; flex-direction: column;
}

/* 直播画面模拟 — 球场视角 */
.match-live-visual {
  width: 100%; height: 280px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* 球场草皮纹理 */
.match-live-visual::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(255,255,255,0.015) 28px,
      rgba(255,255,255,0.015) 29px
    );
  z-index: 0;
}

/* 球场线条 — 完整足球场轮廓 */
.match-live-visual::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 70%; height: 78%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.09);
  border-radius: 3px;
  z-index: 1;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.3),
    0 0 60px rgba(59,130,246,0.05);
}

/* 中圈 */
.match-live-center-circle {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.09);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

/* 中线 */
.match-live-center-line {
  position: absolute; top: 50%; left: 50%;
  width: 1px; height: 80%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.08) 20%,
    rgba(255,255,255,0.08) 80%,
    transparent 100%
  );
  z-index: 1;
}

/* 禁区弧（左右两侧）*/
.match-live-penalty-area-left,
.match-live-penalty-area-right {
  position: absolute; top: 50%;
  width: 16%; height: 52%;
  border: 1.5px solid rgba(255,255,255,0.06);
  transform: translateY(-50%);
  z-index: 1;
}
.match-live-penalty-area-left { left: calc((100% - 70%) / 2); }
.match-live-penalty-area-right { right: calc((100% - 70%) / 2); }

/* 直播比分叠加层 */
.match-live-score-overlay {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 14px; padding: 10px 32px;
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.match-live-score-team {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-main);
}
.match-live-score-team img {
  width: 26px; height: 18px; border-radius: 3px;
  object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.match-live-score-nums {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 900; color: #fff;
  letter-spacing: 3px; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  min-width: 72px; text-align: center;
  padding: 0 6px;
}

/* LIVE 状态条 */
.match-live-status-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(239,68,68,0.05);
  border-bottom: 1px solid rgba(239,68,68,0.08);
}
.match-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.6);
  animation: liveDotPulse 1.5s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.match-live-status-text {
  font-size: var(--fs-sm); font-weight: 800; color: #F87171;
  letter-spacing: 0.5px;
}
.match-live-time {
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600;
}

/* ================================================================
   比赛信息摘要区
=============================================================== */
.match-detail-info {
  padding: 18px 18px 16px;
  background: var(--bubble-bg-solid);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: var(--bubble-blur); -webkit-backdrop-filter: var(--bubble-blur);
}
.match-detail-teams {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.match-detail-team {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1;
}
.match-detail-team-flag {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.match-detail-team-flag:hover {
  transform: scale(1.06) translateY(-2px);
}
.match-detail-team-name-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.match-detail-team-name {
  font-size: var(--fs-md); font-weight: 800; color: var(--text-main);
  text-align: center; letter-spacing: -0.2px;
}
.match-detail-team-tag {
  font-size: 10px; font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,230,138,0.1);
  color: var(--primary);
  border: 1px solid rgba(0,230,138,0.2);
  line-height: 1.2;
}
.match-detail-vs {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0 14px; flex-shrink: 0;
  min-width: 90px;
}
.match-detail-vs-text {
  font-size: var(--fs-xs); color: var(--text-muted);
  letter-spacing: 2px; font-weight: 800; opacity: 0.65;
}
.match-detail-vs-score {
  font-size: clamp(20px, 6vw, 28px); font-weight: 900; color: var(--text-main);
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  white-space: nowrap;
  letter-spacing: 2px;
}
.match-detail-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600;
}
.meta-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 10px; border-radius: 10px;
  font-size: var(--fs-xs); font-weight: 700;
}

/* ================================================================
   投注玩法区
=============================================================== */
.match-detail-betting {
  padding: 0 0 120px;
  background: var(--bg-page);
}
.match-detail-betting .bet-section-title {
  padding: 18px 18px 8px;
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted);
  letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.match-detail-betting .bet-section-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), #3B82F6);
  opacity: 0.65; flex-shrink: 0;
}
.match-detail-betting .bet-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}
.match-detail-betting .bet-options {
  padding: 0 18px 10px; display: flex; flex-wrap: wrap; gap: 8px;
}

/* 详情页投注按钮 — 复用首页基础样式 + 细调 */
.match-detail-betting .bet-btn {
  flex: 1;
  min-width: calc(33.333% - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 14px 8px 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
/* 顶部高光 */
.match-detail-betting .bet-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  pointer-events: none;
}
.match-detail-betting .bet-btn:active { transform: scale(0.96); }

/* 选中态 — 金色高亮 */
.match-detail-betting .bet-btn.selected {
  background: linear-gradient(180deg, rgba(255,209,102,0.15) 0%, rgba(240,165,0,0.08) 100%);
  border-color: rgba(255,209,102,0.4);
  box-shadow:
    0 0 0 1px rgba(255,209,102,0.15),
    0 4px 20px rgba(255,180,50,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: scale(1.02);
}
.match-detail-betting .bet-btn.selected::before {
  background: linear-gradient(180deg, rgba(255,209,102,0.08), transparent);
}
.match-detail-betting .bet-btn.selected .bet-label { color: #FFD166; font-weight: 700; }
.match-detail-betting .bet-btn.selected .bet-odds {
  color: #fff;
  text-shadow: 0 0 16px rgba(255,209,102,0.4);
}
.match-detail-betting .bet-btn .bet-label {
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.match-detail-betting .bet-btn .bet-odds {
  font-size: var(--fs-lg); font-weight: 900; color: var(--text-main);
  letter-spacing: -0.8px; line-height: 1.2;
}

/* hover 效果 */
@media (hover: hover) {
  .match-detail-betting .bet-btn:hover:not(.selected) {
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-1px);
  }
  .match-detail-betting .bet-btn:hover:not(.selected) .bet-odds {
    transform: scale(1.05); display: inline-block;
  }
}

/* ---- 顶部固定区（头部+直播画面+比赛摘要，不随滚动） ---- */
.match-detail-fixed-top {
  flex-shrink: 0;           /* 不被压缩 */
  overflow: hidden;         /* 防止内部溢出 */
}

/* ---- 中间滚动区（投注玩法，可滚动） ---- */
.match-detail-scroll-area {
  flex: 1;                  /* 占据剩余空间 */
  overflow-y: auto;         /* 独立滚动 */
  -webkit-overflow-scrolling: touch;
  min-height: 0;            /* flex 子项滚动必须 */
  overscroll-behavior-y: contain; /* 防止滚动事件穿透到 body */
  position: relative;       /* 确保自身创建滚动上下文 */
}

/* ---- 固定底部的加入投注单栏 ---- */
.match-detail-bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  width: 100%;
  background: rgba(11,20,38,0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 10px);
  box-sizing: border-box;
}

/* ---- 加入注单按钮（详情页） ---- */
.btn-add-bet-detail {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,209,102,0.12) 0%, rgba(240,165,0,0.08) 100%);
  border: 1.5px solid rgba(255,209,102,0.25);
  color: #FFD166;
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: var(--fs-md); font-weight: 800;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  position: relative; overflow: hidden;
}
.btn-add-bet-detail::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
}
.btn-add-bet-detail:not(:disabled):hover::after { left: 120%; }
.btn-add-bet-detail:not(:disabled):active { transform: scale(0.98); opacity: 0.9; }
.btn-add-bet-detail:disabled {
  background: rgba(255,255,255,0.03);
  color: var(--text-light);
  cursor: not-allowed;
  box-shadow: none;
  border-color: rgba(255,255,255,0.06);
}
.btn-add-bet-detail:disabled::after { display: none; }

/* ================================================================
   更多玩法面板
=============================================================== */
.more-markets-panel {
  /* 直接展开，无需折叠 */
}

/* 小屏适配（clamp 已自动缩放，仅做布局微调） */
@media (max-width: 380px) {
  .match-live-visual { height: 240px; }
  .match-detail-team-flag { width: 42px; height: 30px; }
  .match-detail-betting .bet-btn { padding: 12px 6px 9px; }
}