/* MatchX body (brief 21), compact layout (design lead, 2026-10-18): nothing scrolls. Same body
   geometry as pick / field goal: title line 32 + stage 300 (+12 margin) + CTA 44 = body 420.
   Stage: bar 24 + 8 + five 44 px rows with 4 px gaps (236) + 8 + foot 24 = 300.
   No Figma yet: colours are placeholders in the modal's palette (data-todo="design").
   Perf: only opacity changes (press feedback); no layout animation. */

.mx-title {
  width: 288px;
  margin: 0;
  font: 800 15px/32px 'Inter', sans-serif;
  letter-spacing: 0.03em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-title__tail {
  font-weight: 600;
  letter-spacing: 0;
  color: #f2c14e;
  font-variant-numeric: tabular-nums;
}

.mx-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 288px;
  height: 300px;
  margin-bottom: 12px;
  overflow: hidden; /* fixed box: content never grows the modal */
}

/* Bar: "Exact 10 · Winner 3" left, picks status / links right. */
.mx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 24px;
  flex-shrink: 0;
  font: 500 12px/24px 'Inter', sans-serif;
  color: #9aa0b4;
  white-space: nowrap;
}
.mx-bar__status { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.mx-picks-in {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: #4ade80;
}
.mx-picks-in svg { width: 14px; height: 14px; }
.mx-dot { color: #6b7185; }
.mx-muted { color: #6b7185; }
.mx-link {
  height: 24px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #8ab4ff;
  font: 600 12px/24px 'Inter', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.mx-link:focus-visible { outline: 2px solid #f2c14e; outline-offset: 1px; border-radius: 4px; }

.mx-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 236px;
  flex-shrink: 0;
}
.mx-empty { margin: auto 0; font: 400 14px/20px 'Inter', sans-serif; color: #c4c4c4; text-align: center; }

/* Row: [team] [stepper : stepper] [team], 44 px. */
.mx-row {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.mx-row.is-nopick .mx-digit { color: #6b7185; }

.mx-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.mx-badge {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: var(--mx-badge, #4b5563);
  overflow: hidden;
}
.mx-badge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-team__code {
  font: 800 10px/12px 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
}

.mx-row__middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.mx-row__sep { font: 800 14px/20px 'Inter', sans-serif; color: #6b7185; }

/* Stepper: 28 px buttons, 26 px digit field. */
.mx-stepper {
  display: inline-flex;
  align-items: center;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.mx-stepper__btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 600 16px/28px 'Inter', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mx-stepper__btn:active:not(:disabled) { opacity: 0.55; }
.mx-stepper__btn:disabled { color: rgba(255, 255, 255, 0.25); cursor: default; }
.mx-stepper__btn:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; border-radius: 7px; }
.mx-stepper__value {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 800 15px/24px 'Inter', sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mx-stepper__value::placeholder { color: rgba(255, 255, 255, 0.35); }
.mx-stepper__value:focus { outline: 2px solid #f2c14e; outline-offset: 0; }

/* Locked digits (where the steppers were). */
.mx-digit {
  min-width: 40px;
  font: 800 18px/30px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Result: "24–17" over "you 21–17 +3". */
.mx-final__box { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mx-final { font: 800 16px/20px 'Inter', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.mx-final__sub { display: inline-flex; align-items: center; gap: 6px; }
.mx-final__you { font: 500 11px/16px 'Inter', sans-serif; color: #9aa0b4; font-variant-numeric: tabular-nums; }
.mx-chip {
  min-width: 26px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  font: 800 10px/16px 'Inter', sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mx-chip.is-exact { background: rgba(0, 166, 62, 0.25); color: #4ade80; }
.mx-chip.is-winner { background: rgba(242, 193, 78, 0.2); color: #f2c14e; }
.mx-chip.is-missed, .mx-chip.is-void, .mx-chip.is-pending { background: rgba(255, 255, 255, 0.08); color: #9aa0b4; }

/* Foot line: notice, or results total + rank, or the last results link. */
.mx-foot { height: 24px; flex-shrink: 0; }
.mx-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  font: 600 13px/24px 'Inter', sans-serif;
  color: #c4c4c4;
  white-space: nowrap;
}
.mx-summary[hidden] { display: none; }
.mx-summary__pts { font-weight: 800; color: #f2c14e; }
.mx-notice {
  height: 24px;
  margin: 0;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.45);
  font: 600 12px/24px 'Inter', sans-serif;
  color: #fecaca;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-notice[hidden] { display: none; }

/* Bar left group: scoring + "How to play". The scoring truncates first if a long status ever
   crowds the bar (full text in its title). */
.mx-bar__info { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mx-scoring { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mx-bar .mx-link { padding: 0; flex-shrink: 0; }
.mx-link[hidden] { display: none; }

/* How to play (howto.js): takes the 300 px stage. Head 24 + 8 + viewport 236 + 8 + foot 24.
   Slides move by transform only (250 ms); reduced motion = instant. */
.mx-howto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 300px;
}
.mx-howto__head { display: flex; align-items: center; height: 24px; flex-shrink: 0; }
.mx-howto__viewport {
  flex: 0 0 236px;
  overflow: hidden;
  border-radius: 10px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.mx-howto__viewport:focus { outline: none; }
.mx-howto__viewport:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }
.mx-howto__track {
  display: flex;
  height: 100%;
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.mx-howto.is-dragging .mx-howto__track { transition: none; }
.mx-howto__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.mx-howto__demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 136px;
  flex-shrink: 0;
  pointer-events: none;
}
.mx-howto__line { display: flex; align-items: center; justify-content: center; gap: 10px; height: 24px; margin-top: 8px; font: 500 12px/24px 'Inter', sans-serif; }
.mx-howto__pill {
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(242, 193, 78, 0.14);
  color: #f2c14e;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mx-howto__summary { height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 15px; }
.mx-howto__title { margin: 14px 0 4px; font: 800 16px/22px 'Inter', sans-serif; color: #fff; text-align: center; }
.mx-howto__text { margin: 0; padding: 0 8px; font: 400 13px/18px 'Inter', sans-serif; color: #c4c4c4; text-align: center; }

.mx-howto__foot { display: flex; align-items: center; justify-content: space-between; height: 24px; flex-shrink: 0; }
.mx-howto__arrow {
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mx-howto__arrow svg { display: block; width: 16px; height: 16px; margin: 0 auto; }
.mx-howto__arrow[aria-disabled="true"] { color: rgba(255, 255, 255, 0.25); cursor: default; }
.mx-howto__arrow:active:not([aria-disabled="true"]) { opacity: 0.55; }
.mx-howto__arrow:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }
.mx-howto__dots { display: flex; align-items: center; gap: 2px; }
.mx-howto__dot {
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mx-howto__dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.mx-howto__dot[aria-current="step"]::before { background: #f2c14e; }
.mx-howto__dot:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .mx-howto__track { transition: none; }
}