/**
 * CupLab mobile H5 — shared responsive overrides.
 * Desktop (≥769px): rules here do not apply.
 * Loaded by desktop.html and embed.css (@import).
 */

@media (max-width: 768px) {
  /* ── Embed pages (iframe content) ── */
  html.embed-mode .wrap,
  html.embed-mode .container {
    padding: 12px 14px 28px !important;
  }

  html.embed-mode .filter-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  html.embed-mode .filter-strip-badges {
    max-width: none !important;
    flex-wrap: wrap;
  }

  html.embed-mode .filter-strip-actions {
    width: 100%;
    justify-content: flex-end;
  }

  html.embed-mode .filter-drawer-grid {
    grid-template-columns: 1fr !important;
  }

  html.embed-mode .date-header {
    font-size: 0.88rem;
    padding: 8px 4px;
  }

  html.embed-mode .next-step {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  html.embed-mode .next-step-actions {
    width: 100%;
  }

  html.embed-mode .next-step-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  html.embed-mode .data-strip {
    flex-direction: column;
    align-items: stretch;
  }

  html.embed-mode .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  html.embed-mode .stat-value {
    font-size: 1.25rem;
  }

  html.embed-mode .dim-layer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.embed-mode .dim-table-wrap {
    max-height: 280px;
  }

  html.embed-mode .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  html.embed-mode .toolbar {
    flex-wrap: wrap;
  }

  html.embed-mode .toolbar .btn {
    min-height: 44px;
  }

  /* Match list cards (today / schedules embed) — 三列布局：主队 | 比分 | 客队 */
  html.embed-mode .match-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 10px;
    margin-bottom: 8px;
  }

  html.embed-mode .match-card-head {
    grid-column: 1 / -1;
    gap: 5px;
  }

  /* 主队：右对齐，头像靠近中心 */
  html.embed-mode .team-home,
  html.embed-mode .team-away {
    align-items: center;
  }

  html.embed-mode .team-home {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
    gap: 6px;
  }

  html.embed-mode .team-away {
    grid-column: 3;
    grid-row: 2;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
    gap: 6px;
  }

  html.embed-mode .team-home .team-avatar,
  html.embed-mode .team-away .team-avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  /* 中心列：比分/时间 */
  html.embed-mode .match-center {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-content: center;
    min-width: 54px;
    max-width: 54px;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
    border-left: none;
  }

  /* 卡片内每队比分隐藏，由中心列统一显示 */
  html.embed-mode .team-home .team-score,
  html.embed-mode .team-away .team-score {
    display: none;
  }

  html.embed-mode .team-name {
    display: block;
    font-size: 0.85rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    max-width: 32vw;
  }

  html.embed-mode .team-type { display: none; }


  html.embed-mode .match-center {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: stretch;
    justify-content: center;
    min-width: 56px;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
  }

  html.embed-mode .match-meta,
  html.embed-mode .pred-metrics,
  html.embed-mode .ai-review-section {
    grid-column: 1 / -1;
  }

  html.embed-mode .match-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 2px;
  }

  /* 操作按钮：全宽换行，AI按钮突出排在最前 */
  html.embed-mode .match-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    overflow: visible;
    max-width: none;
    margin-left: 0;
  }

  html.embed-mode .match-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  /* AI/workflow 按钮更宽更明显，排最前 */
  html.embed-mode .match-actions [data-ai],
  html.embed-mode .match-actions [data-workflow] {
    flex: 2 1 auto;
    min-height: 42px;
    font-size: 0.88rem;
    border-radius: 10px;
    order: -1;
  }

  html.embed-mode .match-extra-section { margin-top: 4px; }

  html.embed-mode .match-extra-toggle { padding: 8px 10px; }

  html.embed-mode .match-extra-summary { font-size: 0.8rem; }

  /* Workflow */
  html.embed-mode .wf-page {
    padding: 12px 14px 24px;
  }

  html.embed-mode .wf-head {
    flex-direction: column;
  }

  html.embed-mode .wf-head-actions {
    width: 100%;
  }

  html.embed-mode .wf-head-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  html.embed-mode .wf-step-head {
    flex-wrap: wrap;
    gap: 6px;
  }

  html.embed-mode .wf-step-body pre {
    font-size: 11px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Settings card */
  html.embed-mode .card {
    padding: 16px 14px;
  }

  html.embed-mode input,
  html.embed-mode select,
  html.embed-mode textarea,
  html.embed-mode button.btn {
    min-height: 44px;
    font-size: 16px; /* avoid iOS zoom on focus */
  }

  html.embed-mode textarea {
    min-height: 88px;
  }

  /* Horizontal scroll for wide tables */
  html.embed-mode .factor-table-wrap,
  html.embed-mode .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  html.embed-mode .stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  html.embed-mode .dim-layer-grid {
    grid-template-columns: 1fr;
  }

  html.embed-mode .pred-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Safe area (notched phones) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    html.embed-mode body {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}