/* ═══════════════════════════════════════════
   Mobile Responsive Fixes - v1.0
   适用于 index / prediction / expert / pay
   ═══════════════════════════════════════════ */

/* ── 基础响应式重置 ── */
@media (max-width: 768px) {
  * { -webkit-tap-highlight-color: transparent; }

  body {
    -webkit-text-size-adjust: 100%;
  }

  /* 防止横向溢出 */
  .container,
  .match-card,
  .block,
  .match-hero,
  .match-strip,
  .core-visual,
  .data-grid,
  .sub-sec,
  table,
  .stats-bar {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── 通用容器 ── */
  .container {
    padding: 12px 8px 32px !important;
  }

  /* ── 顶栏手机优化 ── */
  .topbar {
    height: 48px;
    padding: 0 12px;
  }
  .topbar .tb-title {
    font-size: 14px;
  }

  /* ── match hero ── */
  .match-hero {
    padding: 20px 12px;
    border-radius: 12px;
  }
  .mh-teams {
    gap: 10px;
  }
  .mh-team .mh-name {
    font-size: 16px;
  }
  .mh-score {
    font-size: 28px;
    min-width: 50px;
  }

  /* ── data grid 堆叠 ── */
  .data-grid {
    flex-wrap: wrap;
  }
  .data-cell {
    flex: 1 1 50%;
    min-width: 50%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .data-cell .dc-title { font-size: 11px; }
  .data-cell .dc-val { font-size: 12px; }
  .data-cell .dc-pct { font-size: 13px; }

  /* ── 表格横向滚动 ── */
  .block-bd {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 600px;
    font-size: 12px;
  }
  th, td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* ── opt row 换行 ── */
  .opt-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .opt-row .or-items {
    margin-left: 0;
    gap: 8px;
  }

  /* ── 卡片 ── */
  .block {
    border-radius: 10px;
    margin-top: 12px;
  }
  .block-hd {
    padding: 12px 12px 8px;
  }
  .block-bd {
    padding: 10px 12px;
  }

  /* ── 分析文本 ── */
  .analysis-txt {
    font-size: 13px;
    padding: 10px;
  }

  /* ── 得分/比分 ── */
  .match-score .main {
    font-size: 18px;
  }
  .match-score .ht {
    font-size: 10px;
  }
}

/* ── 小屏手机 (<480px) ── */
@media (max-width: 480px) {
  /* 核心结论行 */
  .core-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .core-row .cr-prob {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  /* data cell 全宽 */
  .data-cell {
    flex: 1 1 100%;
    min-width: 100%;
  }

  /* 球队名缩小 */
  .mh-team .mh-name {
    font-size: 14px;
  }
  .mh-score {
    font-size: 24px;
    min-width: 40px;
  }

  /* 标签缩小 */
  .mh-meta {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
  }

  /* sub section */
  .sub-hd .sh-left { font-size: 12px; }
  .sub-hd .sh-right { font-size: 10px; }

  /* block title */
  .block-hd .bh-title {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════
   顶栏导航 手机适配：标签独占一行
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* header 改为两行：logo行 + 标签行 */
  .header-inner {
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* 第一行：logo + 用户 */
  .header .logo {
    flex-shrink: 0;
    padding: 6px 8px;
  }
  .header .logo .logo-icon {
    width: 20px;
    height: 20px;
  }
  .header .logo-text {
    font-size: 13px !important;
  }

  .header-right {
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 8px;
  }

  .btn-login, .btn-signup {
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 26px !important;
    line-height: 26px !important;
  }

  .user-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  .points-badge {
    font-size: 11px !important;
  }

  /* 第二行：导航标签（全宽，可滑动） */
  #headerTabs {
    display: flex !important;
    flex: 1 1 100% !important;
    order: 99;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin: 0;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(0,0,0,0.15);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #headerTabs::-webkit-scrollbar { display: none; }

  #headerTabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 16px;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
  }
  #headerTabs .tab.active {
    border-bottom-color: var(--primary);
  }

  /* 内容区微调，给两行 header 留空间 */
  .container {
    padding-top: 8px !important;
  }
}

/* ═══════════════════════════════════════════
   首页 match card 手机彻底重排
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .match-card {
    padding: 10px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    position: relative;
  }

  .match-row {
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    align-items: center !important;
  }

  /* 时间固定在左上 */
  .match-time {
    width: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    order: 1;
  }
  .match-time .time {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .match-time .date {
    display: none;
  }

  /* 隐藏联赛标签 */
  .match-card .league-badge {
    display: none;
  }

  /* 球队名：双方各占一行内联 */
  .team {
    font-size: 13px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word;
    line-height: 1.4 !important;
    text-align: left;
    padding: 0 4px;
  }
  .team.home {
    order: 2;
    text-align: right;
  }
  .team.away {
    order: 4;
    text-align: left;
  }

  /* VS / 比分 */
  .match-vs {
    width: auto !important;
    min-width: 28px !important;
    font-size: 12px !important;
    font-weight: 700;
    order: 3;
    flex: 0 0 auto !important;
    text-align: center;
  }
  .match-score {
    width: auto !important;
    min-width: 36px !important;
    order: 3;
    flex: 0 0 auto !important;
  }
  .match-score .main {
    font-size: 16px !important;
    line-height: 1.2;
  }
  .match-score .ht {
    font-size: 10px !important;
    line-height: 1.1;
  }

  /* 预测栏 / 按钮：换到下一行，居中 */
  .match-row .prediction,
  .match-row .btn-group-dual {
    order: 5;
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-top: 6px;
    justify-content: center !important;
    text-align: center;
  }

  /* 解锁按钮居中 */
  .btn-group-dual {
    display: flex !important;
    justify-content: center !important;
    gap: 8px;
  }
  .btn-group-dual button,
  .btn-unlock-predict,
  .btn-expert-predict {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* 状态标签放在右上角 */
  .match-card .status {
    order: 0;
    margin-left: auto;
  }
  .match-card .status .status-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
  }

  /* 概率条缩小 */
  .prediction .bar-wrap {
    height: 6px !important;
  }
  .prediction .labels {
    font-size: 10px !important;
    gap: 4px !important;
  }
  .prediction .hl,
  .prediction .dl,
  .prediction .al {
    font-size: 10px !important;
  }
  .confidence .val {
    font-size: 14px !important;
  }
  .confidence .lbl {
    font-size: 9px !important;
  }

  /* 隐藏盘口/大小球 */
  .match-card .handicap,
  .match-card .over-under {
    display: none;
  }

  /* stats bar 横向滚动 */
  .stats-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 8px 12px !important;
  }
  .stat {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* hero section */
  .home-hero {
    padding: 24px 12px !important;
  }
  .hero-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .hero-subtitle {
    font-size: 13px !important;
  }
  .hero-stats {
    gap: 12px !important;
    flex-wrap: wrap;
  }
  .hero-stat-val {
    font-size: 24px !important;
  }

  /* 已完成比赛精简 */
  .match-card.completed .match-stamp {
    width: 40px !important;
    height: 40px !important;
    font-size: 11px !important;
    top: 4px;
    right: 4px;
  }
  .match-card.completed .match-row {
    padding-right: 50px;
  }
}

/* ═══════════════════════════════════════════
   专家分析页 expert.html 手机适配
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .container {
    max-width: 100% !important;
    padding: 24px 12px 60px !important;
  }

  .engine-title {
    font-size: 22px !important;
  }

  .match-strip {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    text-align: center;
  }

  /* feature cards 堆叠 */
  .features {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .feature-card {
    width: 100% !important;
  }

  /* architecture 图 */
  .arch-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .arch-node {
    width: 100% !important;
  }

  /* 进度条 */
  .bar-group {
    gap: 8px !important;
  }
  .bar-label {
    font-size: 12px !important;
  }

  /* matrix */
  .matrix {
    font-size: 11px !important;
  }
  .matrix td,
  .matrix th {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  .engine-title {
    font-size: 18px !important;
  }
  .engine-subtitle {
    font-size: 10px !important;
  }
  .core-ring {
    width: 80px !important;
    height: 80px !important;
  }
  .core-text {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════
   支付页 pay.html 优化（已有基础适配）
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .plans {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .plan-card {
    padding: 18px 12px !important;
  }
  .plan-card .amount {
    font-size: 28px !important;
  }
}

/* ═══════════════════════════════════════════
   首页卡片走马灯 手机版（无图，简洁卡片）
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .card-strip {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    perspective: none;
    margin-top: 20px;
  }

  .card-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    border-radius: 10px;
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.06));
  }

  .card-item.pos-0,
  .card-item.pos-1,
  .card-item.pos-neg1,
  .card-item.pos-2,
  .card-item.pos-neg2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  /* 手机版不显示图片 */
  .card-img {
    display: none !important;
  }

  .card-body {
    padding: 14px 16px !important;
    justify-content: center;
  }

  .card-league {
    font-size: 11px !important;
    margin-bottom: 6px;
  }

  .card-teams {
    font-size: 15px !important;
    gap: 8px !important;
  }
  .card-teams .ct-home,
  .card-teams .ct-away {
    font-size: 15px !important;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-teams .ct-vs {
    font-size: 16px !important;
    font-weight: 700;
    color: #ed3b6b;
  }

  .card-info {
    margin-top: 8px;
  }
  .card-info .ci-time {
    font-size: 12px !important;
  }
  .card-info .ci-date {
    font-size: 12px !important;
  }

  .card-stamp {
    width: 44px !important;
    height: 44px !important;
    font-size: 11px !important;
    top: 6px !important;
    right: 8px !important;
    border-width: 2px;
  }

  /* 隐藏边缘卡片 */
  .card-item.pos-2,
  .card-item.pos-neg2 {
    display: none !important;
  }
}