/* ==========================================================================
   Shared components: primitives, cards, headings, buttons, pills, form controls, sheets and disclosures used by more than one screen.
   Moved out of app.css unchanged (docs/architecture/PARALLEL_DEVELOPMENT_SPLIT.md).
   ========================================================================== */

  .tierbtn{
    font-family:'Helvetica Neue', Arial, sans-serif;
    flex:0 0 auto;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--bg1);
    color:var(--text-dim);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .tierbtn.active{
    border-color:var(--gold);
    color:var(--bg0);
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  }
  .sortbtn{
    flex:1;
    padding:7px 4px;
    border-radius:8px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text-dim);
    font-size:11.5px;
  }
  .sortbtn.active{color:var(--gold-bright); border-color:var(--gold-dim);}
  .badge{
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-weight:700;font-size:11px;
    color:#0b0a08;
  }
  .badge.S{background:linear-gradient(180deg,#fff3c4,#d4af37);}
  .badge.A{background:linear-gradient(180deg,#e8c98a,#b8842e);}
  .badge.B{background:linear-gradient(180deg,#9fdc9f,#4c8a4c);color:#0b0a08;}
  .badge.C{background:linear-gradient(180deg,#e2938d,#a5433c);color:#1a0f0d;}
  .badge.Unranked{background:linear-gradient(180deg,#7d7d7d,#4a4a4a);color:#eee;}
  .tab-btn{
    flex:0 0 auto;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid var(--line);
    background:var(--bg1);
    color:var(--text-dim);
    font-size:13px; font-weight:700;
    white-space:nowrap;
  }
  .tab-btn.active{
    color:var(--bg0);
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    border-color:var(--gold);
  }
  .rating-big{font-size:16px; font-weight:700; color:var(--gold-bright);}
  .rating-sub{font-size:10.5px; color:var(--text-dim); margin-top:2px;}
  .perf-pos{color:var(--green);}
  .perf-neg{color:var(--red);}
  .strength-pill{
    display:inline-block;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:10.5px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--text-dim);
  }
  /* The tier a player held on the day of the match, not today's. */
  .hist-tier{ color:var(--text-dim); font-weight:400; font-size:0.85em; }
  .stateFilterGroup{ display:flex; align-items:center; gap:7px; }
  .stateFilterLabel{
    font-family:'Helvetica Neue', Arial, sans-serif; font-size:10.5px;
    color:var(--text-dim); white-space:nowrap;
  }
  .preset-btn{
    font-family:'Helvetica Neue', Arial, sans-serif;
    padding:5px 10px;
    border-radius:8px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text-dim);
    font-size:11.5px;
  }
  .preset-btn.active{ color:var(--gold-bright); border-color:var(--gold-dim); }
  /* An impossible action must not look pressable. Without this a disabled
     button was indistinguishable from an available one. */
  .preset-btn:disabled,
  .preset-btn[disabled]{
    opacity:0.45;
    color:var(--text-dim);
    border-style:dashed;
    cursor:not-allowed;
  }
  .reason-note{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:10.5px; color:var(--text-dim);
    border:1px solid var(--line); border-radius:8px;
    padding:6px 8px; margin-top:4px; line-height:1.45;
  }

  .callout-card{
    font-family:'Helvetica Neue', Arial, sans-serif;
    background:var(--bg1); border:1px solid var(--line); border-radius:10px;
    padding:12px; margin-bottom:10px;
  }
  .callout-card .cc-title{ font-size:13.5px; font-weight:700; color:var(--gold-bright); margin-bottom:4px; }
  .callout-card .cc-detail{ font-size:11.5px; color:var(--text-dim); line-height:1.5; }
  /* The submission line reads at the same weight it always did, now that it
     is its own row rather than a second line inside cc-detail. */
  .callout-card .cc-meta{ font-size:11.5px; color:var(--text-dim); line-height:1.5; }
  .section-heading{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:13px; font-weight:700; color:var(--text);
    margin:16px 0 8px; padding-top:6px;
  }
  .section-sub{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:11.5px; color:var(--text-dim); margin-bottom:10px; line-height:1.5;
  }
  .alpha-row{
    display:flex; align-items:center; gap:10px;
    padding:10px 2px;
    border-bottom:1px solid var(--line);
  }
  .alpha-letter{
    width:20px; font-family:Georgia,serif; font-size:13px; color:var(--gold-soft); flex:0 0 auto;
  }
  .alpha-name{ font-size:14.5px; font-weight:600; flex:1; }
  .alpha-tier{ font-size:11px; color:var(--text-dim); font-family:'Helvetica Neue', Arial, sans-serif; }
  .matchup-vs{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:12.5px; color:var(--text); line-height:1.6;
    background:var(--bg2); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; margin-top:4px;
  }
  .difficulty-row{ display:flex; gap:6px; margin-top:8px; }
  .difficulty-pill{
    flex:1; text-align:center;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:10.5px; font-weight:700;
    padding:6px 4px; border-radius:8px;
    border:1px solid var(--line);
  }
  .diff-easy{ color:var(--green); border-color:var(--green); }
  .diff-balanced{ color:var(--gold-bright); border-color:var(--gold-dim); }
  .diff-hard{ color:#e8a5a1; border-color:var(--red); }

  .fg-controls{
    background:var(--bg1); border:1px solid var(--line); border-radius:10px;
    padding:12px; margin:12px 0;
    font-family:'Helvetica Neue', Arial, sans-serif;
  }
  .fg-row{ margin-bottom:10px; }
  .fg-row:last-child{ margin-bottom:0; }
  .fg-label{
    display:block; font-size:11px; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px;
  }
  .fg-select{
    width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); font-size:14px; padding:8px 10px;
  }
  .fg-toggle{ display:flex; gap:6px; }
  .fg-toggle-btn{
    flex:1; padding:8px 6px; border-radius:8px; border:1px solid var(--line);
    background:transparent; color:var(--text-dim); font-size:12px; font-weight:600;
  }
  .fg-toggle-btn.active{ background:var(--bg2); color:var(--text); border-color:var(--gold-dim); }
  .fg-toggle-btn.diff-easy.active{ color:var(--green); border-color:var(--green); background:rgba(90,156,90,.12); }
  .fg-toggle-btn.diff-balanced.active{ color:var(--gold-bright); border-color:var(--gold-dim); background:rgba(212,175,55,.12); }
  .fg-toggle-btn.diff-hard.active{ color:#e8a5a1; border-color:var(--red); background:rgba(181,69,63,.12); }
  #buildMatchPanel{ margin-top:8px; padding-top:8px; border-top:1px solid var(--surface-border-soft); }
  .empty{
    text-align:center; color:var(--text-dim);
    font-family:'Helvetica Neue', Arial, sans-serif;
    padding:30px 10px; font-size:13px;
  }

  .footer-note{
    padding:18px 20px 4px;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:11px; color:var(--text-dim);
    line-height:1.6;
    text-align:center;
  }

/* Tier insignia -- restrained badge identity, distinct from win/loss colors.
   The letter is live HTML text (never baked into an asset), so a visual
   frame SVG can drop in later without any markup change. */
.tier-badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: var(--radius-sm);
  font-family: var(--font-interface); font-weight: 700; font-size: 11px;
  border: 1px solid var(--surface-border); background: var(--surface-1); color: var(--text-dim);
}
.tier-badge.tier-s{ color: var(--tier-s-text); border-color: var(--tier-s-border); background: var(--tier-s-bg); }
.tier-badge.tier-a{ color: var(--tier-a-text); border-color: var(--tier-a-border); background: var(--tier-a-bg); }
.tier-badge.tier-b{ color: var(--tier-b-text); border-color: var(--tier-b-border); background: var(--tier-b-bg); }
.tier-badge.tier-c{ color: var(--tier-c-text); border-color: var(--tier-c-border); background: var(--tier-c-bg); }
/* Two different facts, two different tags. Idle is temporary and says nothing
   about the player; Inactive is a club status. They deliberately do not look
   the same. */
.inactive-tag,
.idle-tag{
  display: inline-block; font-family: var(--font-interface); font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}
.idle-tag{ color: var(--gold-soft); border-color: var(--gold-dim); }

/* ==========================================================================
   PRESTIGE VISUAL SYSTEM v1 — reusable primitives
   These are the tokens for the shared vocabulary this design pass established.
   Meant to be reused as-is when redesigning Player Profile, Home and Play,
   rather than each screen inventing its own title/label/divider treatment.
   ========================================================================== */

/* Section eyebrow label -- small caps sans-serif, used above a display title. */
.mp-section-label{
  font-family: var(--font-interface); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}

/* Display title -- serif, for major screen titles only (never controls/stats).
   Ivory, not gold -- gold is reserved for selected/champion states specifically. */
.mp-display-title{
  font-family: var(--font-prestige); color: var(--text); font-weight: 400;
  line-height: 1.15;
}

/* Prestige stat numeral -- serif, for ranking numbers / championship figures. */
.mp-numeral{ font-family: var(--font-prestige); font-weight: 400; }

/* Subtle divider -- the only kind of horizontal rule the system should use. */
.mp-divider{ border: none; border-top: 1px solid var(--surface-border-soft); margin: var(--space-3) 0; }

/* Standard card -- neutral elevated surface, used for ordinary content. */
.mp-card-standard{
  background: var(--surface-1); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}

/* Prestige card -- reserved for championship/podium-tier content only. */
.mp-card-prestige{
  background: var(--surface-1); background-image: var(--gold-illumination);
  border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-podium);
}
/* Smaller, unlabelled dots -- less visually dominant than the earlier
   lettered-circle treatment; color alone communicates win/loss. */
/* A dot with no state is a dot with no result behind it, and it has to LOOK
   like one. Before this it had no background at all, so an unclassified dot
   was invisible rather than obviously wrong -- the failure mode that let ten
   losses render as ten wins would at least have shown as ten gaps. */
.form-dot{
  width: 13px; height: 13px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
}
.form-dot.w{ background: var(--green); border-color: var(--green); }
.form-dot.l{ background: var(--red); border-color: var(--red); }
/* Neither, and borrowing neither colour. Matches the draw treatment used by
   the profile's form letters and the League table's Last 10 column. */
.form-dot.d{ background: var(--draw); border-color: var(--draw); }

/* Reusable primary CTA -- champagne/gold fill, dark text, restrained depth.
   For the flagship actions (View Matchup, Find a Game), not every button. */
.mp-btn-primary{
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: none; border-radius: var(--radius-sm);
  color: #1a1408; font-family: var(--font-interface); font-size: 13px; font-weight: 700;
  height: 38px; padding: 0 16px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(212,175,55,0.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Secondary CTA -- outlined, restrained. Pairs with .mp-btn-primary wherever
   a card needs a lighter second action (e.g. Play's BEST MATCH card). */
.mp-btn-secondary{
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 1px solid var(--gold-hairline); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-interface); font-size: 13px; font-weight: 600;
  height: 38px; padding: 0 14px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "Why your rating moved" -- the plain-English reading of facts already on the
   card. Set apart so it reads as explanation, not as another statistic. */
.why-moved{
  margin-top:8px; padding:8px 10px;
  border-left:2px solid var(--gold-soft); border-radius:0 8px 8px 0;
  background:rgba(212,175,55,.05);
}
.why-moved-head{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-soft); font-weight:700;
}
.why-moved-body{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:11.5px;
  color:var(--text-soft); line-height:1.55; margin-top:3px;
}
.why-moved-body b{ color:var(--text); }
.why-moved-note{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:10px;
  color:var(--text-dim); line-height:1.45; margin-top:5px;
}

/* The decimals, one level down. In front of anyone who asks, in front of
   nobody who does not. */
.wm-calc{ margin-top:6px; }
.wm-calc-summary{
  list-style:none; cursor:pointer;
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:10.5px;
  color:var(--gold-soft); font-weight:600;
}
.wm-calc-summary::-webkit-details-marker{ display:none; }
.wm-calc-summary::after{ content:' \203A'; }
.wm-calc[open] > .wm-calc-summary::after{ content:' \2304'; }
.wm-calc-body{ margin-top:5px; }
.wm-calc-label{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:9.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);
  margin:7px 0 2px;
}
.wm-calc-label:first-child{ margin-top:0; }
.wm-calc-row{
  display:flex; justify-content:space-between; gap:10px; padding:3px 0;
  border-bottom:1px solid var(--surface-border-soft);
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:11px; color:var(--text-dim);
}
.wm-calc-row b{ color:var(--text); }
.wm-calc-sum{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:10.5px;
  color:var(--gold-soft); margin-top:5px;
}
.wm-calc-note{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:10px;
  color:var(--text-dim); line-height:1.45; margin-top:5px;
}

/* A folded section says what it is hiding. Quiet enough to read as a caption
   on the heading rather than a second heading beside it -- a filter summary
   that competed with "Filters" for attention would be worse than the panel it
   replaced. */
.fold-summary{
  font-family: var(--font-interface); font-weight: 400;
  font-size: 11px; color: var(--text-dim); letter-spacing: 0;
  text-transform: none;
}

/* Who the app thinks you are, inside a flow that is about to record it.
   Small, contextual and only where identity actually matters -- it replaced a
   full-width card that sat above every screen of the Games tab saying the
   same thing. */
.identity-line{
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 0 0 8px; font-family: var(--font-interface);
  font-size: 11.5px; color: var(--text-dim);
}
.identity-line b{ color: var(--text); font-weight: 600; }
.identity-line .identity-change{
  background: none; border: none; padding: 0;
  font-family: var(--font-interface); font-size: 11.5px;
  color: var(--gold-soft); cursor: pointer; text-decoration: underline;
}
.identity-line .identity-change:active{ opacity: .7; }

/* ===================== MEANINGFUL MONTH NOTE =====================
   Why a monthly view opened on last month: "October is taking shape · 3 of 5
   games". A caption, not a banner -- it answers a question the reader may not
   have asked, so it must not compete with the table it sits above. The month
   name is a quiet way into the current month. */
.mm-note{
  font-family: var(--font-interface); font-size: 11px; color: var(--text-dim);
  margin: 2px 2px 8px; line-height: 1.4;
}
.mm-note-link{
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-interface); font-size: 11px; font-weight: 600;
  color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px;
}
.mm-note-link:active{ opacity: .7; }
#approveConfirmBtn[disabled]{ opacity: .45; cursor: not-allowed; }
#bulkCreate[disabled]{ opacity: .45; cursor: not-allowed; }

/* ===================== MATCH RESULT CARD + MATCH ANALYSIS =====================
   One played match, opened as a sheet from any [data-scorecard] control
   (ui/components/matchScorecard.js). The Result Card (.mrc-*) comes first: a
   sports-result card with the winners as the heroes, the score, one story, one
   line of evidence and the winners' gains -- and the same card is painted as
   the shared picture. The Match Analysis (.msc-*) sits one tap behind it: both
   teams, every figure, every player's movement. */
.scorecard-open{
  background: none; border: 1px solid var(--gold-soft); border-radius: 999px;
  color: var(--gold-soft); font-family: var(--font-interface);
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; cursor: pointer;
}
.scorecard-open:active{ opacity: .7; }
.msc-open-row{ margin-top: 8px; }
.msc-title-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msc-title-row h3{ margin-bottom: 0; }
.msc-close{
  background: none; border: none; color: var(--text-dim); font-size: 16px;
  cursor: pointer; padding: 4px 6px;
}
.msc{ font-family: var(--font-interface); margin-top: 12px; }
.msc-head{ text-align: center; margin-bottom: 12px; }
.msc-date{ font-size: 12px; color: var(--text-dim); }
.msc-context{ font-size: 11px; color: var(--gold-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.msc-score{ font-size: 22px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: .02em; }
.msc-winner{ font-size: 12.5px; color: var(--gold-bright); margin-top: 2px; }
.msc-teams{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msc-team{
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  min-width: 0;
}
.msc-team.msc-won{ border-color: rgba(90,156,90,0.55); }
.msc-team-head{
  display: flex; justify-content: space-between; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 6px;
}
.msc-won .msc-result{ color: var(--green); }
.msc-player{ display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 2px 0; }
.msc-name{ color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msc-tier{ font-size: 10.5px; color: var(--gold-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.msc-move{ margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.msc-figs{ margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.msc-fig{ display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); padding: 1px 0; }
.msc-fig b{ color: var(--text); font-weight: 700; }
.msc-games{ font-size: 10.5px; color: var(--text-dim); margin-top: 4px; }
.msc-pos{ color: var(--green) !important; }
.msc-neg{ color: #e8a5a1 !important; }
.msc-note{ font-size: 10.5px; color: var(--text-dim); line-height: 1.5; margin-top: 12px; }
.msc-empty{ font-size: 12px; color: var(--text-dim); margin-top: 12px; }
@media (max-width: 340px){ .msc-teams{ grid-template-columns: 1fr; } }

/* The Result Card */
.mrc{
  position: relative; margin-top: 12px; padding: 18px 16px 16px;
  border: 1px solid rgba(212,175,55,0.28); border-radius: 18px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(212,175,55,0.18), rgba(212,175,55,0) 70%),
    linear-gradient(180deg, #1b1712, #100e0b);
  text-align: center; font-family: var(--font-interface); overflow: hidden;
}
.mrc-top{ display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-dim); }
.mrc-mark{ width: 20px; height: 20px; }
.mrc-brand{ font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); opacity: .85; }
.mrc-when{ margin-top: 10px; font-size: 11px; color: var(--gold-soft); letter-spacing: .03em; }
.mrc-heroes{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
  margin-top: 16px; font-family: var(--font-prestige); font-size: 30px; line-height: 1.15; color: var(--gold-bright);
}
.mrc-hero{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mrc-amp{ color: var(--text-dim); font-size: 22px; }
.mrc-tier{
  display: inline-block; font-family: var(--font-interface); font-size: 10.5px; font-weight: 700; line-height: 1;
  color: var(--gold-soft); border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; padding: 2px 4px; vertical-align: middle;
}
/* A draw: both pairs alike, neither in the winners' gold. */
.mrc-draw .mrc-heroes{ color: var(--text); }
.mrc-draw .mrc-heroes + .mrc-vs{ margin-top: 4px; }
.mrc-vs{ font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }
.mrc-draw .mrc-vs + .mrc-heroes{ margin-top: 4px; }
.mrc-kicker{ margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mrc-score{ display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; gap: 18px; margin-top: 10px; font-size: 44px; font-weight: 700; color: var(--text); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
/* A set is one unit and never breaks across lines; four or five sets step down
   in size so they still fit on one line on a phone (the picture already fits
   its score to the width -- CardPainter). */
.mrc-set{ white-space: nowrap; }
.mrc-score[data-sets="4"]{ font-size: 34px; gap: 14px; }
.mrc-score[data-sets="5"]{ font-size: 25px; gap: 9px; }
.mrc-against{ margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.mrc-opp{ color: var(--text); opacity: .85; white-space: nowrap; }
.mrc-against .mrc-tier{ font-size: 9.5px; padding: 1px 3px; }
.mrc-story{
  margin: 18px 0 0; padding: 12px 12px 13px; border-radius: 14px;
  background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.22);
}
.mrc-story-title{ font-family: var(--font-prestige); font-size: 22px; color: var(--gold-bright); }
.mrc-story-line{ margin-top: 3px; font-size: 12.5px; color: var(--text); opacity: .85; }
.mrc-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 16px; }
.mrc-stat b{ display: block; font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mrc-stat span{ display: block; margin-top: 2px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.mrc-up{ color: #8fcf8f !important; }
.mrc-stats-who{ margin-top: 14px; font-size: 10.5px; color: var(--text-dim); }
.mrc-stats-who + .mrc-stats{ margin-top: 6px; }
.mrc-unrated{ margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.mrc-rewards{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(212,175,55,0.16); font-size: 13px; color: var(--text);
}
.mrc-rewards-label{ font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.mrc-reward b{ color: #8fcf8f; }

/* Under the card: share it, or open the analysis. */
.msc-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.msc-action{
  flex: 1 1 140px; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-family: var(--font-interface); font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer;
}
.msc-action-primary{ background: var(--gold); border-color: var(--gold); color: #17130c; }
.msc-action:active{ opacity: .75; }
.msc-message{ margin-top: 8px; font-size: 11.5px; color: var(--gold-soft); text-align: center; }

/* ===================== PLAYER OF THE MONTH =====================
   The candidate card (Admin and League › Information), the confirmed winner
   and the history list. Cards are listed by name and carry no position: a
   shortlist of cases, not a table. The redesign may restyle all of this. */
.potm-card, .potm-winner, .potm-history, .potm-confirm-box textarea{ font-family: var(--font-interface); }
/* A nomination: the player and why they are here lead; figures and any
   Admin controls follow, smaller. */
.potm-card{
  background: var(--surface-2); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); padding: 14px 16px 12px; margin: 10px 0;
}
.potm-card.is-picked{ border-color: var(--gold-hairline); background: var(--gold-wash); }
.potm-card-head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.potm-name{ font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.potm-tier, .potm-added{
  font-size: 10.5px; letter-spacing: .04em; color: var(--text-dim);
  border: 1px solid var(--surface-border); border-radius: var(--radius-pill); padding: 1px 8px;
}
.potm-added{ border-style: dashed; }
.potm-reasons{ display: grid; gap: 10px; margin-top: 10px; }
.potm-reason-title{ font-size: 13px; font-weight: 700; color: var(--gold-soft); letter-spacing: .01em; }
.potm-reason-line{ font-size: 14px; color: var(--text); line-height: 1.35; margin-top: 1px; }
.potm-reason-ev{ color: var(--text-dim); font-size: 12px; }
.potm-also{ margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.potm-support, .potm-metrics{
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--surface-border-soft);
  font-size: 11.5px; color: var(--text-dim); line-height: 1.45; overflow-wrap: anywhere;
}
.potm-winner .potm-support{ border-top: 0; padding-top: 0; }
/* Admin controls: quiet text buttons under the nomination. */
.potm-card-actions{ display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.potm-action{
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--font-interface); font-size: 12px; color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.potm-action.potm-pick{ color: var(--gold-soft); }
.potm-action.active{ color: var(--gold-bright); text-decoration: none; font-weight: 700; }
.potm-trim{ color: var(--gold-soft); }
.potm-winner{
  background: var(--gold-wash); border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md); padding: 14px 16px; margin: 8px 0; text-align: center;
}
.potm-winner-kicker{ font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.potm-winner-name{ font-size: 20px; font-weight: 700; color: var(--text); margin-top: 4px; }
.potm-winner-citation{ font-size: 12.5px; color: var(--text); margin-top: 6px; line-height: 1.4; }
.potm-confirm-box textarea{ width: 100%; margin: 6px 0 8px; font-size: 13px; }
.potm-message{ color: var(--gold-soft); }
.potm-message.is-error{ color: var(--red); }
.potm-history{ display: grid; gap: 2px; margin-top: 4px; }
.potm-year{ font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: .08em; margin-top: 8px; }
.potm-hist-row{
  display: grid; grid-template-columns: 84px 1fr auto; gap: 8px; align-items: baseline;
  padding: 6px 2px; border-bottom: 1px solid var(--surface-border-soft); font-size: 13px;
}
.potm-hist-month{ color: var(--text-dim); }
.potm-hist-name{ color: var(--text); font-weight: 600; }
.potm-hist-title{ color: var(--text-dim); font-size: 11px; text-align: right; }
.pp-hero-award{ margin-top: 6px; font-size: 11.5px; color: var(--gold-soft); letter-spacing: .02em; }
.potm-share-row{ margin: 4px 0 12px; }
.potm-share-row .preset-btn{ width: 100%; }
.potm-share-msg{ margin-top: 6px; color: var(--gold-soft); }

/* ===================== MATCHUP CARD (Predict a Matchup) =====================
   The predicted matchup as a card that is already share-ready: teams, the
   call, expected games won. Mirrors CardPainter.matchup. */
.mu-panel{ max-height: 92vh; overflow-y: auto; }
.mu-form .fg-row{ margin-bottom: 8px; }
.mu-card{
  font-family: var(--font-interface); text-align: center;
  background: linear-gradient(180deg, #1b1712, #100e0b); border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg); padding: 18px 16px 14px; margin: 12px 0 10px;
}
.mu-eyebrow{ font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mu-team{ margin-top: 12px; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mu-player{ display: inline-flex; align-items: baseline; gap: 5px; }
.mu-name{ font-family: Georgia, 'Iowan Old Style', serif; font-size: 25px; color: var(--text); }
.mu-team.is-favoured .mu-name{ color: var(--gold-bright); }
.mu-tier{ font-size: 10px; font-weight: 700; color: var(--gold-soft); border: 1px solid var(--gold-hairline); border-radius: 6px; padding: 0 5px; align-self: center; }
.mu-rating{ font-size: 11px; color: var(--text-dim); }
.mu-amp{ font-size: 14px; color: var(--text-dim); }
.mu-vs{ margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--gold-soft); }
.mu-call{
  margin: 14px 0 4px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--gold-wash); border: 1px solid var(--gold-hairline);
}
.mu-call-kicker{ font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mu-card[data-call="level"] .mu-call-kicker{ font-family: Georgia, 'Iowan Old Style', serif; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--gold-bright); font-weight: 400; }
.mu-call-names{ font-family: Georgia, 'Iowan Old Style', serif; font-size: 22px; color: var(--gold-bright); margin-top: 2px; }
.mu-games{ margin-top: 14px; }
.mu-games-label{ font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.mu-games-row{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; margin-top: 4px; }
.mu-games-num{ font-size: 40px; font-weight: 700; color: var(--text); line-height: 1.1; }
.mu-games-dash{ font-size: 30px; color: var(--text-dim); line-height: 1.4; }
.mu-games-who{ font-size: 11.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.mu-detail{ margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }
.mu-foot{ margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--surface-border-soft); font-size: 10.5px; color: var(--gold-soft); }
.mu-actions{ display: flex; gap: 8px; }
.mu-action{
  flex: 1; border-radius: 12px; border: 1px solid var(--gold-hairline); background: transparent;
  color: var(--text); font-family: var(--font-interface); font-size: 13.5px; font-weight: 600; padding: 11px 12px; cursor: pointer;
}
.mu-action-primary{ background: var(--gold); border-color: var(--gold); color: #17130c; }
.mu-message{ margin: 6px 0 10px; min-height: 0; font-size: 11.5px; color: var(--gold-soft); text-align: center; }

/* Predict a Matchup: four players, then the card; up to five in a batch. */
.pred-slot{ margin-bottom: 4px; }
.pred-slot.is-invalid{ border-color: var(--red); }
.pred-slot-note{ font-size: 11.5px; color: #e8a5a1; min-height: 0; margin-bottom: 4px; }
.pred-slot-note:empty{ display: none; }
.pred-prompt{ margin: 10px 0 4px; padding: 14px 12px; border: 1px dashed var(--gold-hairline); border-radius: var(--radius-md); text-align: center; font-size: 13px; color: var(--text-dim); }
.pred-prompt.is-problem{ border-style: solid; border-color: var(--red); color: #e8a5a1; }
.pred-editor{ margin-bottom: 10px; }
.pred-editor-head{ display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pred-fold{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--gold-hairline); border-radius: var(--radius-md); background: var(--bg1); }
.pred-fold-n{ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold-hairline); color: var(--gold-soft); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pred-fold-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pred-fold-teams{ font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.pred-fold-teams .mu-name{ font-size: 15px; }
.pred-fold-teams .mu-amp{ margin: 0 5px; }
.pred-fold-teams .mu-player{ gap: 4px; }
.pred-fold-todo{ color: var(--text-dim); font-style: italic; }
.pred-fold-pct{ font-size: 13px; font-weight: 700; color: var(--gold-bright); }
.pred-fold-actions{ flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.pred-fold-actions .preset-btn{ padding: 5px 10px; font-size: 12px; }
.pred-preview .pred-fold{ margin: 10px 0 8px; }
.pred-done{ width: 100%; }
.pred-add{ width: 100%; margin: 4px 0 6px; padding: 11px 12px; border-color: var(--gold-hairline); color: var(--gold-bright); font-weight: 600; }
.pred-max{ margin: 4px 0 8px; font-size: 11.5px; color: var(--text-dim); text-align: center; }

/* Several predictions on one condensed card (CardPainter.matchups on screen). */
.mu-multi{ text-align: left; padding: 16px 14px 12px; }
.mu-multi .mu-eyebrow, .mu-multi-sub{ text-align: center; }
.mu-multi-sub{ margin-top: 4px; }
.mu-row{ display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(241,233,216,0.04); border: 1px solid var(--surface-border-soft); }
.mu-row-n{ flex: 0 0 auto; width: 18px; font-size: 18px; font-weight: 700; color: var(--gold-soft); text-align: center; }
.mu-row-body{ flex: 1; min-width: 0; }
.mu-row-side{ display: flex; align-items: center; gap: 8px; }
.mu-row-team{ flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.mu-row-team .mu-name{ font-size: 17px; }
.mu-row-pct{ flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mu-row-side.is-favoured .mu-name, .mu-row-side.is-favoured .mu-row-pct{ color: var(--gold-bright); }
.mu-row-vs{ font-size: 9.5px; font-weight: 700; letter-spacing: .24em; color: var(--text-dim); margin: 3px 0; text-transform: uppercase; }
.mu-multi .mu-foot{ text-align: center; }

/* Editable controls on phones and touch screens: never below 16px.
   iOS Safari zooms in on any focused field whose text is under 16px and does
   not zoom back out when the keyboard closes, which is how the app came to be
   left zoomed after typing a name. Every control here was 12.5-14px. Zoom stays
   available to the reader (the viewport tag sets no maximum-scale); this only
   removes the reason Safari had to zoom. !important because screens size some
   controls down (and a few inline) for desktop density. */
@media (pointer: coarse), (max-width: 600px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]):not([type=file]):not([type=image]),
  select,
  textarea{ font-size: 16px !important; }
}