/* ------------------------------------------------------------
   ShotPropz v2 – Matchup Table
   Desktop: 3 columns (value | metric | value)
   Mobile (<560px): compact header bar + each row is a 3-col grid
   ------------------------------------------------------------ */

/* ========== Container ========== */
.spz-matchup-container { margin: 0 0 24px 0; }
.spz-matchup-narrow { max-width: 820px; }

/* ========== Mobile header bar (hidden on desktop) ========== */
.spz-matchup-mobile-head { display:none; }
.spz-matchup-mobile-head .m-center {
  background:#252525; color:#fff; font-weight:800; text-align:center;
  padding:8px 10px; font-size:13px; letter-spacing:.03em; border-bottom: 4px solid #252525;;
}
.spz-matchup-mobile-head .m-team {
  color:#fff; text-transform:uppercase; text-align:center;
  padding:8px 10px; font-weight:800; letter-spacing:.05em; font-size:13px;
}

/* ========== Table shell ========== */
.spz-matchup-table {
  font-family: Oswald, Arial, Helvetica, sans-serif;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.spz-matchup-table p { margin: 6px 0; }

/* ========== Header (desktop) ========== */
.spz-matchup-table thead th {
  padding: 12px 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  font-size: 16px;
  vertical-align: middle;
}
.spz-matchup-table thead .team-left,
.spz-matchup-table thead .team-right {
  text-align: center; color:#fff;
}
.spz-matchup-table thead .center {
  background:#252525; color:#fff; text-align:center;
  border-bottom:4px solid #fff;
  border-left:3px solid #fff; border-right: 3px solid #fff;
}

/* ========== Body rows (desktop) ========== */
.spz-matchup-table tbody td {
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 16px;
  color: #1b2733;
}
.spz-matchup-table tbody tr:nth-child(odd)  td:not(.metric) { background:#ffffff; }
.spz-matchup-table tbody tr:nth-child(even) td:not(.metric) { background:#f7f7f7; }
.spz-matchup-table tbody tr:nth-child(odd)  td { border-bottom:3px solid #ffffff; }
.spz-matchup-table tbody tr:nth-child(even) td { border-bottom:3px solid #f7f7f7; }

/* Value columns */
.spz-matchup-table td.val-left,
.spz-matchup-table td.val-right {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;     /* pull toward middle */
  gap: 8px;
}

/* Metric column */
.spz-matchup-table td.metric {
  width: 92px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  background: #252525;
  letter-spacing: .01em;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

/* Values + pills */
.spz-matchup-table .val {
  display:inline-block; font-size:18px; font-weight:800; color:#1a1a1a;
}
.spz-matchup-table .rk.pill {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 34px; height: 26px; padding: 0 8px;
  border-radius: 999px; font-weight:900; font-size:14px; line-height:1;
  border:1px solid rgba(0,0,0,.06); background:#eef2f5; color:#0f1f2d;
}
.spz-matchup-table .rk.pill.rk-good { background:#e7f3ec; color:#137333; }
.spz-matchup-table .rk.pill.rk-mid  { background:#eef2f5; color:#333;    }
.spz-matchup-table .rk.pill.rk-bad  { background:#fdeceb; color:#b3261e; }

/* Hover */
.spz-matchup-table tbody tr:hover td:not(.metric) { background:#eef3f7; }

/* ========== Responsive ========== */
@media (max-width: 980px) {
  .spz-matchup-table td.metric { width: 86px; }
}
@media (max-width: 820px) {
  .spz-matchup-table tbody td { padding: 8px 8px; font-size: 15px; }
  .spz-matchup-table .val { font-size: 17px; }
  .spz-matchup-table .rk.pill { min-width: 30px; height: 24px; font-size: 13px; }
  .spz-matchup-table thead th { font-size: 15px; }
  .spz-matchup-table td.metric { width: 80px; }
}

/* ===== Mobile: real 3-col grid rows (no horizontal scroll) ===== */
@media (max-width: 560px) {
  /* Show compact mobile header bar (three equal thirds), hide table header */
  .spz-matchup-mobile-head {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 33.33% each */
    align-items: center;
    margin: 4px 0 0 0;
    border-bottom: 3px solid #fff;
  }
  .spz-matchup-table thead { display: none; }

  /* Make each TR a 3-column grid with perfect thirds */
  .spz-matchup-table { table-layout: auto; }
  .spz-matchup-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 33.33% each */
    align-items: center;
  }

  /* Tighter cell paddings & sizes */
  .spz-matchup-table tbody td { padding: 8px 6px; font-size: 14px; }
  .spz-matchup-table .val { font-size: 16px; }
  .spz-matchup-table .rk.pill { min-width: 28px; height: 22px; font-size: 12px; padding: 0 6px; }

  /* Grid placement + visual gutters that don't change layout width */
  .spz-matchup-table td.val-left  { grid-column: 1; justify-content: center; }
  .spz-matchup-table td.metric    {
    grid-column: 2; width: auto;
    /* Use inset shadows to mimic left/right white gutters without affecting width */
    border-left: 0; border-right: 0;
    box-shadow: inset 2px 0 0 #fff, inset -2px 0 0 #fff;
    font-size: 14px; letter-spacing: .02em;
  }
  .spz-matchup-table td.val-right { grid-column: 3; justify-content: center; }

  /* Keep zebra feel without huge borders */
  .spz-matchup-table tbody tr:nth-child(odd)  td:not(.metric) { background: #fff; }
  .spz-matchup-table tbody tr:nth-child(even) td:not(.metric) { background: #f7f7f7; }
  .spz-matchup-table tbody td { border-bottom: 2px solid transparent; }

  /* Slightly smaller gaps */
  .spz-matchup-table td.val-left,
  .spz-matchup-table td.val-right { gap: 6px; }
}

/* ===== Ultra-small screens ===== */
@media (max-width: 380px) {
  .spz-matchup-table .val { font-size: 15px; }
  .spz-matchup-table .rk.pill { min-width: 26px; height: 20px; font-size: 11px; }
  .spz-matchup-mobile-head .m-center { font-size:12px; padding:6px 8px; }
  .spz-matchup-mobile-head .m-team   { font-size:12px; padding:6px 8px; }
}

/* ========== Print ========== */
@media print {
  .spz-matchup-container .spz-filters { display:none !important; }
  .spz-matchup-narrow { max-width:none; }
  .spz-matchup-table thead .center { background:#000 !important; color:#fff !important; }
}

/* Opp prefix (@ / vs) – normal table text color */
.spz-gamelog .opp-prefix {
  display: inline-block;
  margin-right: 4px;
  color: #111;        /* same as other table text */
  font-weight: 400;   /* optional: a bit lighter than team code */
}