/* Compact matchups, actual one-color lime team marks.
   Uses existing transparent PNGs and keeps the current pick/lock API behavior. */
.mc-card{
  margin-bottom:9px;
  border-radius:12px;
  box-shadow:none;
}
.mc-card .mc-head{
  padding:7px 11px;
  gap:6px;
}
.mc-card .mc-head-left,.mc-card .mc-head-right{gap:7px}
.mc-card .mc-game-number{font-size:.6rem}
.mc-card .mc-date{font-size:.64rem}
.mc-card .mc-head .pill{font-size:.58rem;padding:4px 7px}
.mc-card .mc-matchup{
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  gap:5px;
  padding:7px 10px;
  background:none;
}
.mc-card .mc-team{
  display:grid;
  grid-template-areas:"status status status" "logo name line" "result result result";
  grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  text-align:left;
  column-gap:9px;
  row-gap:4px;
  min-height:0;
  padding:8px 10px;
  border-radius:9px;
  gap:4px 9px;
}
.mc-card .mc-team-top{grid-area:status;margin:0}
.mc-card .mc-side-label{font-size:.53rem}
.mc-card .mc-selection-indicator{font-size:.53rem}
.mc-card .mc-team-name{
  grid-area:name;
  margin:0;
  min-height:0;
  font-size:clamp(1rem,1.85vw,1.32rem);
  line-height:1.06;
  letter-spacing:0;
}
.mc-card .mc-team-line{
  grid-area:line;
  margin:0;
  padding:5px 8px;
  min-width:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:7px;
}
.mc-card .mc-team-line small{font-size:.51rem}
.mc-card .mc-team-line strong{font-size:1.39rem}
.mc-card .mc-final-score{
  grid-area:result;
  justify-content:flex-start;
  margin:2px 0 0;
}
.mc-card .mc-team-logo,
.mc-card .mc-team-logo.mc-logo-pending{
  grid-area:logo;
  width:44px;
  height:44px;
  min-width:0;
  border:0;
  border-radius:0;
  margin:0;
  background:transparent;
  color:var(--lime,#D6FF59);
  box-shadow:none;
  overflow:visible;
  flex-shrink:0;
}
.mc-card .mc-logo-fallback{
  color:var(--lime,#D6FF59);
  font-size:1.1rem;
}
.mc-card .mc-team-logo.mc-logo-ready,
.mc-card .mc-team-logo.mc-logo-failed{
  background:transparent;
  color:var(--lime,#D6FF59);
  border:0;
  box-shadow:none;
}
.mc-card .mc-logo-image{
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  /* First remove the original team colors. Then recolor the transparent
     PNG silhouette electric lime; not a glow around the old multicolor art. */
  filter:brightness(0) saturate(100%) invert(54%) sepia(67%)
         saturate(336%) hue-rotate(37deg) brightness(149%) contrast(112%);
}
.mc-card .mc-logo-ready .mc-logo-image{
  opacity:1;
  filter:brightness(0) saturate(100%) invert(54%) sepia(67%)
         saturate(336%) hue-rotate(37deg) brightness(149%) contrast(112%);
}
.mc-card .mc-team.mc-selected .mc-logo-ready{
  border:0;
  box-shadow:none;
}
.mc-card .mc-team.mc-selected .mc-logo-image{
  filter:brightness(0) saturate(100%) invert(54%) sepia(67%)
         saturate(336%) hue-rotate(37deg) brightness(149%) contrast(112%)
         drop-shadow(0 0 3px rgba(214,255,89,.33));
}
.mc-card .mc-team-logo.mc-logo-failed .mc-logo-image{display:none}
.mc-card .mc-team-logo.mc-logo-failed .mc-logo-fallback{visibility:visible}
.mc-card .mc-center span{
  width:22px;height:22px;
  font-size:.75rem;
}
.mc-card .mc-center:before,.mc-card .mc-center:after{
  height:calc(50% - 14px);
}
.mc-card .mc-foot{
  padding:7px 11px;
  gap:7px;
  flex-wrap:nowrap;
}
.mc-card .mc-foot-status{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  column-gap:10px;
  row-gap:3px;
  min-width:0;
}
.mc-card .mc-decision{font-size:.6rem;line-height:1.2}
.mc-card .mc-countdown,.mc-card .mc-closed{font-size:.6rem}
.mc-card .mc-foot-actions{flex-wrap:wrap;gap:6px;flex-shrink:0}
.mc-card .mc-lock-action{
  min-height:34px;
  padding:7px 9px;
  font-size:.62rem;
  border-radius:7px;
}
.mc-card .mc-foot-actions .result-tag{font-size:.67rem}
@media(max-width:760px){
  .mc-card .mc-team{grid-template-columns:38px minmax(0,1fr) auto;gap:3px 6px;padding:8px}
  .mc-card .mc-team-logo,.mc-card .mc-team-logo.mc-logo-pending{width:38px;height:38px}
  .mc-card .mc-team-name{font-size:1.02rem}
  .mc-card .mc-team-line{padding:4px 6px;min-width:43px}
  .mc-card .mc-team-line strong{font-size:1.25rem}
}
@media(max-width:560px){
  .mc-card .mc-matchup{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:4px;padding:6px}
  .mc-card .mc-team{
    grid-template-areas:"status status" "logo name" "logo line" "result result";
    grid-template-columns:35px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    justify-items:start;
    padding:7px 6px;
    column-gap:5px;
    row-gap:3px;
  }
  .mc-card .mc-team-top{width:100%}
  .mc-card .mc-team-logo,.mc-card .mc-team-logo.mc-logo-pending{
    width:35px;height:35px;
  }
  .mc-card .mc-logo-fallback{font-size:.88rem}
  .mc-card .mc-team-name{font-size:1rem;line-height:1.05;align-self:end}
  .mc-card .mc-team-line{min-width:0;flex-direction:row;gap:4px;padding:3px 6px;align-self:start}
  .mc-card .mc-team-line strong{font-size:1.17rem}
  .mc-card .mc-team-line small{font-size:.45rem}
  .mc-card .mc-center span{width:16px;height:19px;font-size:.62rem}
  .mc-card .mc-center:before,.mc-card .mc-center:after{height:calc(50% - 12px)}
  .mc-card .mc-head{padding:7px 9px}
  .mc-card .mc-head-right{width:auto}
  .mc-card .mc-date{font-size:.59rem}
  .mc-card .mc-foot{padding:7px 9px;gap:5px}
  .mc-card .mc-decision{font-size:.57rem}
  .mc-card .mc-countdown{font-size:.57rem}
  .mc-card .mc-foot-actions{width:auto;justify-content:flex-end}
  .mc-card .mc-lock-action{width:auto;min-height:35px;padding:6px 7px;font-size:.55rem;max-width:126px}
  .mc-card .mc-foot-actions .result-tag{width:auto}
}
@media(max-width:360px){
  .mc-card .mc-head{align-items:flex-start}
  .mc-card .mc-head-right{width:100%;justify-content:space-between}
  .mc-card .mc-foot{flex-wrap:wrap}
  .mc-card .mc-foot-actions{width:100%}
  .mc-card .mc-lock-action{max-width:none;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .mc-card .mc-team,.mc-card .mc-logo-image{transition:none}
}

/* Detailed team marks: preserve black facial features, lettering and ink.
   The base transparent PNG remains lime via the generic filter above.
   A second copy uses a high-contrast luminance threshold: the logo's dark
   ink becomes black, while its orange fills turn white. Multiply with the
   lime silhouette to reveal interior artwork only for flagged team marks.
   If that second image fails, the normal lime silhouette still works. */
.mc-card .mc-team-logo.mc-logo-detailed{
  isolation:isolate;
  --mc-ink-brightness:2.4;
  --mc-ink-contrast:8;
  --mc-ink-opacity:.87;
}
/* Dark team fills like Rams navy or Utah red are NOT interior linework.
   Lift those fills into the "white / leave lime" range before blending.
   Only genuinely dark outlining remains as black artwork. */
.mc-card .mc-team-logo.mc-logo-ink-deep{
  --mc-ink-brightness:7.3;
  --mc-ink-contrast:7;
  --mc-ink-opacity:.83;
}
.mc-card .mc-logo-detailed .mc-logo-detail-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  display:block;
  opacity:0;
  filter:grayscale(1) brightness(var(--mc-ink-brightness)) contrast(var(--mc-ink-contrast));
  mix-blend-mode:multiply;
  transition:opacity .2s ease;
}
.mc-card .mc-logo-detailed.mc-logo-ready.mc-logo-detail-ready .mc-logo-detail-image{
  opacity:var(--mc-ink-opacity);
}
.mc-card .mc-logo-detailed.mc-logo-detail-failed .mc-logo-detail-image{
  display:none;
}
@media(prefers-reduced-motion:reduce){
  .mc-card .mc-logo-detailed .mc-logo-detail-image{transition:none}
}

/* PNG assets produced by duotone.mjs have correct lime and dark-ink pixels.
   No grayscale/multiply filters: those made Rams, Utah and Pats disappear. */
.mc-card .mc-logo-detailed .mc-logo-detail-image{display:none!important}
.mc-card .mc-team-logo.mc-logo-duotone-ready .mc-logo-image,
.mc-card .mc-team.mc-selected .mc-logo-duotone-ready .mc-logo-image{
  filter:none;
  opacity:1;
}
.mc-card .mc-team.mc-selected .mc-logo-duotone-ready .mc-logo-image{
  filter:drop-shadow(0 0 3px rgba(214,255,89,.27));
}

/* Uniform optical logo size: fill the icon slot, not ESPN's transparent margins.
   A +4px adjustment restores Patriots, BYU and Seahawks legibility without
   returning to oversized matchup cards. */
.mc-card .mc-team{
  grid-template-columns:48px minmax(0,1fr) auto;
}
.mc-card .mc-team-logo,
.mc-card .mc-team-logo.mc-logo-pending{
  width:48px;height:48px;
}
@media(max-width:760px){
  .mc-card .mc-team{grid-template-columns:44px minmax(0,1fr) auto}
  .mc-card .mc-team-logo,
  .mc-card .mc-team-logo.mc-logo-pending{width:44px;height:44px}
}
@media(max-width:560px){
  .mc-card .mc-team{grid-template-columns:40px minmax(0,1fr)}
  .mc-card .mc-team-logo,
  .mc-card .mc-team-logo.mc-logo-pending{width:40px;height:40px}
}