/* ============================================
   SEAMHEADS — Matchups Page Premium Styles
   ============================================ */

/* ── Page Header ── */
.mu-hero {
  text-align: center;
  padding: 2rem 0 1rem;
}
.mu-hero__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  color: var(--white);
}
.mu-hero__sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--g400);
  margin-top: 0.5rem;
  line-height: 1.5;
}
.mu-hero__bar {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--red);
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* ── Date Navigation ── */
.mu-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.mu-date-nav__btn {
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--g300);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.mu-date-nav__btn:hover {
  background: var(--g700);
  color: var(--white);
  border-color: var(--g600);
}
.mu-date-nav__btn--today {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.mu-date-nav__btn--today:hover {
  background: var(--red);
  color: var(--black);
}
.mu-date-nav__btn--active {
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
}
.mu-date-nav__display {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
  padding: 0 0.5rem;
  min-width: 180px;
  text-align: center;
}
.mu-date-nav__picker {
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--g300);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.mu-date-nav__picker::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ── Controls Row ── */
.mu-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ── Search ── */
.mu-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.mu-search__icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--g500);
  pointer-events: none;
}
.mu-search__input {
  width: 100%;
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.5rem 2rem 0.5rem 2rem;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.mu-search__input::placeholder { color: var(--g500); }
.mu-search__input:focus { border-color: var(--red); }
.mu-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--g400);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
}
.mu-search__clear:hover { color: var(--white); }

/* ── Sort Tabs ── */
.mu-sort {
  display: flex;
  gap: 0;
}
.mu-sort__btn {
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--g400);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.mu-sort__btn:first-child { border-radius: 5px 0 0 5px; }
.mu-sort__btn:last-child { border-radius: 0 5px 5px 0; }
.mu-sort__btn + .mu-sort__btn { border-left: none; }
.mu-sort__btn--active {
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
}
.mu-sort__btn:hover:not(.mu-sort__btn--active) {
  background: var(--g700);
  color: var(--white);
}

/* ── Game Count ── */
.mu-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--g500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ── Card Grid ── */
.mu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1rem;
}

/* ── Matchup Card ── */
.mc {
  background: linear-gradient(135deg, var(--g800) 0%, var(--g900) 100%);
  border: 1px solid var(--g700);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  position: relative;
}
.mc:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mc--ranked {
  border-color: rgba(255, 183, 27, 0.3);
}
.mc--live {
  border-color: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.15);
}

/* Card Header */
.mc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--g700);
}
.mc__time {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--g300);
  letter-spacing: 0.04em;
}
.mc__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: #4ade80;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mc__live-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  animation: mc-pulse 1.5s ease-in-out infinite;
}
@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.mc__venue {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--g500);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc__tv {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--g400);
  background: var(--g700);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

/* Card Body - Teams */
.mc__body {
  padding: 1rem;
}
.mc__teams {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc__team {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mc__team--away { align-items: flex-start; }
.mc__team--home { align-items: flex-end; text-align: right; }

.mc__team-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc__team--home .mc__team-top {
  flex-direction: row-reverse;
}

.mc__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.mc__logo--placeholder {
  background: var(--g700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--g400);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
}

.mc__team-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.mc__team--home .mc__team-info { align-items: flex-end; }

.mc__rank {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--red);
  letter-spacing: 0.03em;
}
.mc__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--white);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.2;
}
.mc__name:hover {
  color: var(--red);
}
.mc__record {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--g400);
  letter-spacing: 0.03em;
}

/* Center divider */
.mc__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-width: 50px;
}
.mc__at {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--g500);
  letter-spacing: 0.05em;
}
.mc__score {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mc__score-val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--g300);
  min-width: 1.5rem;
  text-align: center;
}
.mc__score-val--win { color: #4ade80; }
.mc__score-sep {
  font-family: var(--font-body);
  color: var(--g600);
  font-size: 0.9rem;
}
.mc__final-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--g500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Last 5 Form Strip ── */
.mc__form {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.2rem;
}
.mc__team--home .mc__form {
  justify-content: flex-end;
}
.mc__form-summary {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--g500);
  letter-spacing: 0.04em;
  margin-left: 0.35rem;
  white-space: nowrap;
}
.mc__form-dot {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: default;
  transition: transform 0.1s;
  position: relative;
}
.mc__form-dot:hover {
  transform: scale(1.2);
  z-index: 2;
}
.mc__form-dot--W {
  background: #16a34a;
}
.mc__form-dot--L {
  background: #dc2626;
}
.mc__form-dot--T {
  background: var(--g600);
}

/* Form tooltip */
.mc__form-dot[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--g900);
  color: var(--g200);
  border: 1px solid var(--g600);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
.mc__form-dot[data-tip]:hover::after {
  opacity: 1;
}

/* ── Win Probability Bar ── */
.mc__prob {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mc__prob-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
}
.mc__prob-pct {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.mc__prob-pct--fav { color: var(--red); }
.mc__prob-pct--dog { color: var(--g400); }
.mc__prob-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: help;
}
.mc__prob-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--g700);
  overflow: hidden;
  display: flex;
}
.mc__prob-fill--away {
  height: 100%;
  background: linear-gradient(90deg, var(--red), #ffcc54);
  border-radius: 3px 0 0 3px;
  transition: width 0.4s ease;
}
.mc__prob-fill--home {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 0 3px 3px 0;
  transition: width 0.4s ease;
}

/* ── Stat Callouts ── */
.mc__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.mc__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.15);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
}
.mc__stat-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mc__stat-vals {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mc__stat-val {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--g300);
}
.mc__stat-val--win { color: #4ade80; }
.mc__stat-val--lose { color: var(--g500); }
.mc__stat-sep {
  font-size: 0.5rem;
  color: var(--g600);
}

/* ── Edge Badges ── */
.mc__edges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.mc__edge {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mc__edge--offense {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.mc__edge--pitching {
  background: rgba(96, 165, 250, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.2);
}
.mc__edge--form {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.mc__edge--ranked {
  background: rgba(255, 183, 27, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 183, 27, 0.25);
}

/* ── Countdown ── */
.mc__countdown {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--g400);
  margin-top: 0.15rem;
}

/* ── States ── */
.mu-state {
  text-align: center;
  padding: 4rem 2rem;
  grid-column: 1 / -1;
}
.mu-state__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--g700);
  border-top-color: var(--red);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mu-state__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.mu-state__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--g300);
  margin-bottom: 0.4rem;
}
.mu-state__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--g500);
}
.mu-state__retry {
  margin-top: 1rem;
  background: var(--red);
  color: var(--black);
  border: none;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.mu-state__retry:hover {
  background: var(--red-dark);
}

/* ── Detail Panel (Expandable) ── */
.mc__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid transparent;
}
.mc--expanded .mc__detail {
  max-height: 2000px;
  border-top-color: var(--g700);
}
.mc__detail-inner {
  padding: 1rem;
}

/* Detail Tabs */
.mc__dtabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
}
.mc__dtab {
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--g400);
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.mc__dtab:first-child { border-radius: 5px 0 0 5px; }
.mc__dtab:last-child { border-radius: 0 5px 5px 0; }
.mc__dtab + .mc__dtab { border-left: none; }
.mc__dtab--active {
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
}

/* Detail Stat Rows */
.mc__drow {
  display: flex;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mc__drow:last-child { border-bottom: none; }
.mc__dval {
  flex: 0 0 60px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--g300);
}
.mc__dval--away { text-align: right; padding-right: 0.5rem; }
.mc__dval--home { text-align: left; padding-left: 0.5rem; }
.mc__dval--win { color: #4ade80; }
.mc__dval--lose { color: var(--g500); }
.mc__dbar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.mc__dlabel {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mc__dbar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  display: flex;
  overflow: hidden;
  background: var(--g700);
}
.mc__dbar-fill--away {
  height: 100%;
  background: linear-gradient(90deg, var(--red), #ffcc54);
  transition: width 0.3s;
}
.mc__dbar-fill--home {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.3s;
}

/* Detail Edge Summary */
.mc__dedge {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--g300);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  padding: 0.6rem;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  border-left: 3px solid var(--red);
}

/* Detail Form Section */
.mc__dform {
  margin-top: 0.75rem;
}
.mc__dform-title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.mc__dform-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.mc__dform-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--g300);
  min-width: 100px;
}
.mc__dform-games {
  display: flex;
  gap: 0.25rem;
}
.mc__dform-game {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.mc__dform-game--W { background: #16a34a; }
.mc__dform-game--L { background: #dc2626; }

/* Detail History */
.mc__dhist {
  margin-top: 0.75rem;
}
.mc__dhist-title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.mc__dhist-game {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.7rem;
}
.mc__dhist-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--g500);
  min-width: 40px;
}
.mc__dhist-result {
  font-family: var(--font-display);
  color: var(--g300);
}
.mc__dhist-winner { color: #4ade80; }
.mc__dhist-score {
  font-family: var(--font-mono);
  color: var(--g400);
}
.mc__dhist-empty {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--g500);
  padding: 1rem 0;
  text-align: center;
}

/* No data in detail */
.mc__dno-data {
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--g500);
}

/* ── View Details Link ── */
.mc__expand-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--g700);
  color: var(--g400);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.mc__expand-btn:hover {
  background: rgba(255, 183, 27, 0.05);
  color: var(--red);
}
.mc--expanded .mc__expand-btn {
  background: rgba(255, 183, 27, 0.05);
  color: var(--red);
}

/* ── Moneyline Odds Strip ── */
.mc__odds {
  margin-top: 0.6rem;
  padding: 0.6rem 0.65rem;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  border: 1px solid var(--g700);
}
.mc__odds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.mc__odds-title {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mc__odds-book {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--g500);
  background: rgba(255,255,255,0.04);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.mc__odds-lines {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mc__odds-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
}
.mc__odds-side--away { align-items: flex-start; }
.mc__odds-side--home { align-items: flex-end; }
.mc__odds-team {
  font-family: var(--font-body);
  font-size: 0.55rem;
  color: var(--g500);
}
.mc__odds-val {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.mc__odds-val--pos { color: #4ade80; }
.mc__odds-val--neg { color: var(--g300); }
.mc__odds-val--best {
  position: relative;
}
.mc__odds-best-tag {
  font-family: var(--font-display);
  font-size: 0.4rem;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 0.1rem;
}
.mc__odds-sep {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--g600);
}

/* Moneyline movement chip */
.mc__odds-move {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-top: 0.1rem;
}
.mc__odds-move--up {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}
.mc__odds-move--down {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}
.mc__odds-move--flat {
  color: var(--g500);
  background: rgba(255,255,255,0.03);
}

/* Model edge tag */
.mc__model-edge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-top: 0.3rem;
  background: rgba(255, 183, 27, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 183, 27, 0.2);
}

/* Expandable sportsbook detail */
.mc__odds-books {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.mc__odds--expanded .mc__odds-books {
  max-height: 500px;
}
.mc__odds-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.04);
  color: var(--g500);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  padding: 0.35rem 0 0.1rem;
  cursor: pointer;
  transition: color 0.15s;
  text-align: center;
}
.mc__odds-toggle:hover { color: var(--g300); }
.mc__odds-brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mc__odds-brow:last-child { border-bottom: none; }
.mc__odds-bname {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--g400);
  min-width: 80px;
}
.mc__odds-bvals {
  display: flex;
  gap: 1rem;
}
.mc__odds-bval {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--g300);
  min-width: 50px;
  text-align: center;
}
.mc__odds-bval--pos { color: #4ade80; }
.mc__odds-bval--neg { color: var(--g300); }
.mc__odds-bval--best { color: var(--red); font-weight: bold; }

/* Status filter tabs */
.mu-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.mu-filter-btn {
  background: var(--g800);
  border: 1px solid var(--g700);
  color: var(--g400);
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.mu-filter-btn--active {
  background: var(--red);
  color: var(--black);
  border-color: var(--red);
}
.mu-filter-btn:hover:not(.mu-filter-btn--active) {
  background: var(--g700);
  color: var(--white);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mu-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .mu-hero__title { font-size: 1.6rem; }
  .mu-date-nav { gap: 0.35rem; }
  .mu-date-nav__btn { padding: 0.35rem 0.6rem; font-size: 0.6rem; }
  .mu-date-nav__display { font-size: 0.85rem; min-width: auto; }
  .mu-controls { flex-direction: column; align-items: stretch; }
  .mu-search { max-width: none; }
  .mc__teams { flex-direction: column; gap: 0.75rem; }
  .mc__team--away, .mc__team--home {
    align-items: flex-start;
    text-align: left;
  }
  .mc__team--home .mc__team-top { flex-direction: row; }
  .mc__team--home .mc__team-info { align-items: flex-start; }
  .mc__team--home .mc__form { justify-content: flex-start; }
  .mc__center {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    padding: 0.25rem 0;
  }
  .mc__stats { grid-template-columns: 1fr; }
  .mc__prob-header { flex-wrap: wrap; gap: 0.3rem; }
  .mc__name { font-size: 0.85rem; }
  .mc__logo { width: 28px; height: 28px; }
  .mc__odds-val { font-size: 0.85rem; }
  .mc__odds-lines { gap: 0.3rem; }
}

/* ── Inline Info Link (on cards) ── */
.mc__info-link {
  color: var(--g500);
  text-decoration: none;
  font-size: 0.7rem;
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.15s;
  margin-left: 2px;
}
.mc__info-link:hover {
  color: var(--red);
}

/* ── Explainer Section ── */
.explainer {
  margin-top: 3rem;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--g700);
}
.explainer__inner {
  max-width: 720px;
  margin: 0 auto;
}
.explainer__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
  text-align: center;
}
.explainer__intro {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--g400);
  line-height: 1.65;
  text-align: center;
  margin-bottom: 2rem;
}

/* Accordion blocks */
.explainer__block {
  background: var(--g800);
  border: 1px solid var(--g700);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.explainer__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.explainer__toggle:hover {
  background: rgba(255,255,255,0.03);
}
.explainer__toggle-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.02em;
}
.explainer__toggle-icon {
  font-size: 0.9rem;
  color: var(--g500);
  transition: transform 0.25s;
}
.explainer__toggle[aria-expanded="false"] .explainer__toggle-icon {
  transform: rotate(-90deg);
}
.explainer__content {
  padding: 0 1.25rem 1.25rem;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.explainer__content.collapsed {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}
.explainer__content p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--g300);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.explainer__content strong {
  color: var(--white);
}

/* Table */
.explainer__table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.explainer__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.78rem;
}
.explainer__table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--g700);
}
.explainer__table td {
  padding: 0.55rem 0.75rem;
  color: var(--g300);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.explainer__weight {
  font-family: var(--font-mono);
  color: var(--red);
  font-size: 0.78rem;
}

/* Lists */
.explainer__list {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--g300);
  line-height: 1.7;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.explainer__list li {
  margin-bottom: 0.4rem;
}
.explainer__list--ordered {
  list-style: decimal;
}
.explainer__sublist {
  margin-top: 0.35rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--g400);
}

/* Example callout */
.explainer__example {
  background: var(--g900);
  border-left: 3px solid var(--red);
  border-radius: 0 6px 6px 0;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}
.explainer__example p {
  margin-bottom: 0;
}
.explainer__example-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.4rem;
}

/* Disclaimer */
.explainer__disclaimer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--g700);
}
.explainer__disclaimer p {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--g500);
  line-height: 1.6;
  text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
  .explainer {
    margin-top: 2rem;
    padding: 2rem 0 1.5rem;
  }
  .explainer__title {
    font-size: 1.2rem;
  }
  .explainer__toggle {
    padding: 0.85rem 1rem;
  }
  .explainer__content {
    padding: 0 1rem 1rem;
  }
  .explainer__table {
    font-size: 0.72rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SKILL MODEL v2 — Edge Tiers, Reason Tags, Top Value Plays
   ═══════════════════════════════════════════════════════════════════ */

/* ── Edge Tier Row ── */
.mc__edge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid transparent;
}
.mc__edge-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e0e0e0;
}
.mc__implied {
  font-size: 0.72rem;
  color: #888;
}
.mc__dog-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f59e0b;
  color: #000;
  vertical-align: middle;
  margin-left: 4px;
}

/* Pregame Lock Badge */
.mc__pregame-lock {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  vertical-align: middle;
  margin-left: 4px;
}

/* Edge Tier Colors */
.mc__edge-tier--premium {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,0.08);
}
.mc__edge-tier--premium .mc__edge-label { color: #fbbf24; }

.mc__edge-tier--strong {
  border-left-color: #22c55e;
  background: rgba(34,197,94,0.06);
}
.mc__edge-tier--strong .mc__edge-label { color: #4ade80; }

.mc__edge-tier--slight {
  border-left-color: #3b82f6;
  background: rgba(59,130,246,0.06);
}
.mc__edge-tier--slight .mc__edge-label { color: #60a5fa; }

/* ── Reason Tags ── */
.mc__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0.35rem 0.75rem 0.25rem;
}
.mc__reason {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  color: #aaa;
}
.mc__reason--pitching { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.mc__reason--offense  { background: rgba(34,197,94,0.12);  color: #86efac; }
.mc__reason--strength { background: rgba(168,85,247,0.12); color: #c4b5fd; }
.mc__reason--home     { background: rgba(251,146,60,0.12); color: #fdba74; }
.mc__reason--dog      { background: rgba(245,158,11,0.15); color: #fcd34d; }
.mc__reason--premium  { background: rgba(245,158,11,0.18); color: #fbbf24; }
.mc__reason--form     { background: rgba(56,189,248,0.12); color: #7dd3fc; }

/* ── Top Value Plays ── */
.mu-tvp {
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(0,0,0,0) 60%);
  padding: 1rem;
  overflow: hidden;
}
.mu-tvp__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mu-tvp__title {
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0;
  letter-spacing: -0.01em;
}
.mu-tvp__subtitle {
  font-size: 0.75rem;
  color: #888;
}

.mu-tvp__card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid transparent;
  transition: background 0.15s;
}
.mu-tvp__card:hover {
  background: rgba(255,255,255,0.04);
}
.mu-tvp__card.mc__edge-tier--premium { border-left-color: #f59e0b; }
.mu-tvp__card.mc__edge-tier--strong  { border-left-color: #22c55e; }
.mu-tvp__card.mc__edge-tier--slight  { border-left-color: #3b82f6; }

.mu-tvp__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.mu-tvp__rank {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fbbf24;
  min-width: 1.5rem;
  margin-bottom: 0.25rem;
}
.mu-tvp__teams {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.mu-tvp__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.mu-tvp__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mu-tvp__pick {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mu-tvp__vs {
  font-size: 0.7rem;
  color: #888;
}
.mu-tvp__dog {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f59e0b;
  color: #000;
  vertical-align: middle;
  margin-left: 4px;
}

.mu-tvp__edge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.mu-tvp__edge-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #4ade80;
}
.mu-tvp__edge-label {
  font-size: 0.65rem;
  color: #888;
}
.mu-tvp__ml {
  font-size: 0.75rem;
  font-weight: 600;
  color: #a5b4fc;
  margin-top: 2px;
}

.mu-tvp__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.mu-tvp__prob {
  font-size: 0.7rem;
  color: #888;
}
.mu-tvp__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* ── Mobile tweaks for TVP ── */
@media (max-width: 600px) {
  .mu-tvp { padding: 0.75rem; }
  .mu-tvp__header { flex-direction: column; gap: 0.25rem; }
  .mu-tvp__pick { font-size: 0.8rem; }
  .mu-tvp__edge-val { font-size: 0.95rem; }
}

/* ── Bullpen Legend (inline in bar) ── */
.mu-bp-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .mu-bp-legend {
    gap: 0.3rem;
  }
}

/* ── Bullpen Vulnerability Strip ── */
.mc__bp {
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.mc__bp-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}
.mc__bp-title {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
}
.mc__bp-info {
  font-size: 0.65rem;
  color: #666;
  cursor: help;
  line-height: 1;
}
.mc__bp-vals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.mc__bp-sep {
  color: #444;
  font-size: 0.65rem;
}
.mc__bp-pill {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mc__bp-score {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  opacity: 0.7;
}
.mc__bp-pill--fresh {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.mc__bp-pill--stable {
  background: rgba(96, 165, 250, 0.08);
  color: #93b8f8;
  border: 1px solid rgba(96, 165, 250, 0.15);
}
.mc__bp-pill--atrisk {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.mc__bp-pill--burned {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.mc__bp-pill--none {
  background: transparent;
  color: #555;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mc__bp-edge {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #fbbf24;
}

/* ── Mobile tweaks for Bullpen ── */
@media (max-width: 600px) {
  .mc__bp { padding: 0.35rem 0.45rem; }
  .mc__bp-pill { font-size: 0.55rem; padding: 0.12rem 0.4rem; }
  .mc__bp-vals { gap: 0.35rem; }
}

/* ── Unified filter row ── */
.mu-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Has Odds Toggle ── */
.mu-odds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g400);
  border: 1px solid var(--g600);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mu-odds-toggle:hover {
  border-color: var(--g400);
  color: var(--g200);
}
.mu-odds-toggle--active {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}
.mu-odds-toggle__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g600);
  transition: background 0.15s;
}
.mu-odds-toggle--active .mu-odds-toggle__dot {
  background: #4ade80;
}

/* ── Count + Legend Bar ── */
.mu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

/* ── Top Value Plays (collapsible) ── */
.mu-tvp-wrap {
  margin-bottom: 0.6rem;
}
.mu-tvp-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.mu-tvp-toggle:hover {
  background: rgba(251, 191, 36, 0.1);
}
.mu-tvp-toggle__icon {
  font-size: 0.7rem;
  transition: transform 0.2s;
}
.mu-tvp--collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s, opacity 0.2s;
}
.mu-tvp:not(.mu-tvp--collapsed) {
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.3s, opacity 0.2s;
}

/* ── Hidden utility ── */
.hidden { display: none !important; }