/**
 * Win Predictions (1X2) — unified match module layout.
 * Desktop + tablet: teams side-by-side, center meta, tug bar with flanking %.
 * Mobile (≤768px): stacked teams, meta above, draw line between teams.
 */

.win-1x2-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.win-1x2-module {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--match-border, #2a2a2a);
  background: rgba(255, 255, 255, 0.012);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .win-1x2-module:hover {
    background: var(--table-hover-bg, rgba(74, 124, 89, 0.1));
    box-shadow: inset 3px 0 0 var(--table-hover-accent, rgba(74, 124, 89, 0.65));
  }
}

/* ---- Teams row (desktop / tablet) ---- */
.win-1x2-module__teams-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.win-1x2-module__team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.win-1x2-module__team--home {
  justify-content: flex-end;
  text-align: right;
}

.win-1x2-module__team--away {
  justify-content: flex-start;
  text-align: left;
}

.win-1x2-module__team-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.win-1x2-module__team--home .win-1x2-module__team-link {
  flex-direction: row;
  justify-content: flex-end;
}

.win-1x2-module__team--away .win-1x2-module__team-link {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.win-1x2-module__crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.win-1x2-module__team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-1x2-module__team-pct {
  display: none;
  flex-shrink: 0;
}

/* Center meta (desktop / tablet) */
.win-1x2-module__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 110px;
  max-width: 160px;
  text-align: center;
}

.win-1x2-module__league-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.win-1x2-module__league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.9;
}

.win-1x2-module__league-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 0;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.win-1x2-module__league-link .win-1x2-module__league-name {
  line-height: 1.2;
}

.win-1x2-module__league-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #888);
  line-height: 1.2;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-1x2-module__kickoff-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.win-1x2-module__kickoff-date {
  font-size: 10px;
  color: var(--text-muted, #888);
  line-height: 1.2;
}

.win-1x2-module__kickoff-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #ccc);
  font-variant-numeric: tabular-nums;
}

/* Mobile-only meta + draw (hidden on desktop/tablet) */
.win-1x2-module__meta-mobile,
.win-1x2-module__draw-mobile {
  display: none;
}

/* ---- Tug-of-war confidence bar ---- */
.win-1x2-tug {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.win-1x2-tug__pct {
  flex: 0 0 3.5rem;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  line-height: 1;
}

.win-1x2-tug__pct--home {
  text-align: right;
}

.win-1x2-tug__pct--away {
  text-align: left;
  justify-content: flex-start;
}

.win-1x2-tug__pct.is-pick .win-1x2-pct__num {
  font-weight: 900;
}

/* Win % — large digits, smaller lighter unit */
.win-1x2-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.win-1x2-pct__num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.win-1x2-pct__sym {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 2px;
}

.win-1x2-pct--pending {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
}

.win-1x2-tug__pct--home .win-1x2-pct__num,
.win-1x2-tug__pct--home .win-1x2-pct__sym {
  color: #c4b5fd;
}

.win-1x2-tug__pct--away .win-1x2-pct__num,
.win-1x2-tug__pct--away .win-1x2-pct__sym {
  color: #fdba74;
}

.win-1x2-module__team-pct--home .win-1x2-pct__num,
.win-1x2-module__team-pct--home .win-1x2-pct__sym {
  color: #c4b5fd;
}

.win-1x2-module__team-pct--away .win-1x2-pct__num,
.win-1x2-module__team-pct--away .win-1x2-pct__sym {
  color: #fdba74;
}

.win-1x2-tug__bar {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.win-1x2-tug__seg {
  display: block;
  height: 100%;
  min-width: 0;
  flex-shrink: 0;
}

.win-1x2-tug__seg--home {
  background: #c4b5fd;
}

.win-1x2-tug__seg--draw {
  background: #94a3b8;
}

.win-1x2-tug__seg--away {
  background: #fdba74;
}

/* ---- Form dots ---- */
.win-1x2-module__form {
  width: 100%;
}

.win-form-dots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.win-form-dots__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.win-form-dots__side {
  flex: 0 0 auto;
  width: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  line-height: 1;
  text-align: center;
}

.win-form-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.win-form-dot--win {
  background: var(--confidence-high, #22c55e);
}

.win-form-dot--draw {
  background: var(--neutral-gray, #9ca3af);
}

.win-form-dot--loss {
  background: var(--confidence-low, #ef4444);
}

.win-form-dots__na {
  font-size: 10px;
  color: var(--text-muted, #888);
}

.win-form-dots .tooltip-container {
  display: inline-flex;
  line-height: 0;
}

/* ---- Footer: H2H ---- */
.win-1x2-module__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.win-h2h-record {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #888);
  letter-spacing: 0.02em;
}

.win-h2h-record--empty {
  font-style: italic;
  font-weight: 500;
}

.win-h2h-record__letter--h {
  color: #c4b5fd;
  font-weight: 700;
}

.win-h2h-record__letter--d {
  color: #94a3b8;
  font-weight: 700;
}

.win-h2h-record__letter--a {
  color: #fdba74;
  font-weight: 700;
}

.win-1x2-module__pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 4px 0;
}

.win-1x2-module__pending-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #888);
}

.win-1x2-module__pending-note {
  font-size: 10px;
  color: var(--text-muted, #888);
}

/* ---- Tablet: tighter spacing, same structure ---- */
@media (max-width: 1133px) {
  .win-1x2-list {
    gap: 8px;
  }

  .win-1x2-module {
    padding: 11px 12px;
    gap: 8px;
  }

  .win-1x2-module__teams-row {
    gap: 10px;
  }

  .win-1x2-module__crest {
    width: 20px;
    height: 20px;
  }

  .win-1x2-module__team-name {
    font-size: 12px;
  }

  .win-1x2-module__center {
    min-width: 90px;
    max-width: 130px;
  }

  .win-1x2-module__league-name {
    font-size: 9px;
  }

  .win-1x2-module__kickoff-time {
    font-size: 11px;
  }

  .win-1x2-tug__pct {
    flex-basis: 3.25rem;
  }

  .win-1x2-pct__num {
    font-size: 19px;
  }

  .win-1x2-pct__sym {
    font-size: 11px;
  }

  .win-1x2-tug__bar {
    height: 7px;
  }

  .win-form-dot {
    width: 6px;
    height: 6px;
  }

  .win-form-dots__row {
    gap: 4px;
  }
}

/* ---- Mobile: stacked teams ---- */
@media (max-width: 768px) {
  .win-1x2-module__meta-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted, #888);
  }

  .win-1x2-module__league-mobile {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .win-1x2-module__league-mobile .win-1x2-module__league-name {
    font-size: 10px;
    max-width: none;
  }

  .win-1x2-module__kickoff-mobile {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary, #ccc);
    font-variant-numeric: tabular-nums;
  }

  .win-1x2-module__teams-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .win-1x2-module__center {
    display: none;
  }

  .win-1x2-module__team {
    width: 100%;
    padding: 4px 0;
  }

  .win-1x2-module__team--home {
    justify-content: space-between;
    text-align: left;
  }

  .win-1x2-module__team--home .win-1x2-module__team-link {
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-direction: row;
    min-width: 0;
  }

  .win-1x2-module__team--away {
    justify-content: space-between;
    text-align: left;
  }

  .win-1x2-module__team--away .win-1x2-module__team-link {
    flex-direction: row;
    justify-content: flex-start;
  }

  .win-1x2-module__team-pct {
    display: inline;
    margin-left: 8px;
  }

  .win-1x2-module__draw-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 0 4px;
    font-size: 11px;
  }

  .win-1x2-module__draw-label {
    color: var(--text-muted, #888);
    font-weight: 600;
  }

  .win-1x2-module__draw-pct {
    color: #94a3b8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .win-1x2-tug__pct {
    display: none;
  }

  .win-1x2-tug {
    gap: 0;
  }

  .win-1x2-tug__bar {
    height: 6px;
  }

  .win-1x2-module__team-name {
    font-size: 13px;
  }
}

/* ---- Light theme ---- */
[data-theme="light"] .win-1x2-module {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .win-1x2-module:hover {
    background: #f8fafc;
  }
}

[data-theme="light"] .win-1x2-module__team-name {
  color: #1a202c;
}

[data-theme="light"] .win-1x2-tug__pct--home .win-1x2-pct__num,
[data-theme="light"] .win-1x2-tug__pct--home .win-1x2-pct__sym,
[data-theme="light"] .win-1x2-module__team-pct--home .win-1x2-pct__num,
[data-theme="light"] .win-1x2-module__team-pct--home .win-1x2-pct__sym {
  color: #6d28d9;
}

[data-theme="light"] .win-1x2-tug__pct--away .win-1x2-pct__num,
[data-theme="light"] .win-1x2-tug__pct--away .win-1x2-pct__sym,
[data-theme="light"] .win-1x2-module__team-pct--away .win-1x2-pct__num,
[data-theme="light"] .win-1x2-module__team-pct--away .win-1x2-pct__sym {
  color: #c2410c;
}

[data-theme="light"] .win-1x2-tug__bar {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .win-1x2-tug__seg--home {
  background: #6d28d9;
}

[data-theme="light"] .win-1x2-tug__seg--draw {
  background: #64748b;
}

[data-theme="light"] .win-1x2-tug__seg--away {
  background: #c2410c;
}

[data-theme="light"] .win-h2h-record__letter--h {
  color: #6d28d9;
}

[data-theme="light"] .win-h2h-record__letter--d {
  color: #64748b;
}

[data-theme="light"] .win-h2h-record__letter--a {
  color: #c2410c;
}

[data-theme="light"] .win-1x2-module__draw-pct {
  color: #64748b;
}