/* SuperNova match centre (SF-456) · local synthetic build. */
:root {
  --ink: #17212b;
  --muted: #5b6875;
  --line: #d9e0e6;
  --ground: #f4f6f8;
  --card: #ffffff;
  --accent: #1f6feb;
  --win: #16794a;
  --warn-bg: #fff4e5;
  --warn-ink: #7a4100;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7edf3;
    --muted: #9aa7b4;
    --line: #2c3742;
    --ground: #10161c;
    --card: #18212a;
    --accent: #6ea8ff;
    --win: #4cc38a;
    --warn-bg: #3a2a12;
    --warn-ink: #ffd39a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.mc-shell { max-width: 960px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.mc-state { text-align: center; padding: 48px 16px; }
.mc-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mc-eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mc-title { margin: 2px 0 0; font-size: 24px; }
.mc-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-muted { color: var(--muted); margin: 0; }
.mc-link { color: var(--accent); }
.mc-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.mc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mc-stack { display: grid; gap: 10px; }
.mc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mc-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.mc-field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.mc-input { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; }
input[type="number"].mc-input { width: 5.5em; }
.mc-btn { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.mc-btn:disabled { opacity: .55; cursor: default; }
.mc-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mc-btn-sm { padding: 3px 9px; }
.mc-toggle, .mc-catnav { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tab { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mc-tab-active { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.mc-section { margin: 4px 0; font-size: 16px; }
.mc-empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.mc-finished { margin: 0; color: var(--win); }
.mc-warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.mc-match { border-left: 4px solid var(--accent); }
.mc-done { border-left-color: var(--win); }
.mc-highlight { outline: 2px solid var(--accent); }
.mc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.mc-time { font-weight: 600; }
.mc-court-label { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); }
.mc-badge { margin-left: auto; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--ground); }
.mc-badge-done { color: var(--win); }
.mc-side { display: flex; justify-content: space-between; padding: 2px 0; }
.mc-win { font-weight: 600; }
.mc-winner { color: var(--win); }
.mc-mine { color: var(--accent); }
.mc-score { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.mc-caption { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.mc-next-label { margin: 0 0 4px; font-size: 12px; color: var(--accent); font-weight: 600; }
.mc-courts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mc-court { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.mc-court[aria-pressed="true"] { border-color: var(--accent); }
.mc-court progress { width: 100%; }
.mc-game { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mc-table-wrap { overflow-x: auto; }
.mc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc-table th, .mc-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mc-table tbody th { font-weight: 500; }
.mc-mine-row { background: var(--ground); }
.mc-pool { max-width: 240px; }

/* SF-557 · the Squad tie screen. One column on a phone, and the running
   result stays legible without it: the count is the largest thing on the
   card, and the two sides sit either side of it on a wide screen and above
   and below it on a narrow one. */
.mc-tie-score { display: grid; gap: 6px; align-items: center; margin: 8px 0; }
.mc-tie-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.mc-tie-count { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mc-tie-outcome { margin: 0; }
.mc-line { border-left: 4px solid var(--line); }
.mc-line.mc-done { border-left-color: var(--win); }

/* SF-564 · a component's score, in the row of the pairing that scored it.
   Two rows, one per side: the names are the row's header, then that side's
   own number for each game. The pairing column takes whatever width is
   left and wraps; the number columns stay narrow and right-aligned, so the
   card fits a phone without scrolling sideways and a name is never pushed
   away from its score. */
.mc-line-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.mc-line-table th, .mc-line-table td { text-align: left; vertical-align: baseline; padding: 3px 0; }
/* Qualified, both of them: the row above sets `text-align` and the `padding`
   shorthand on every cell, and would otherwise win the cascade over a
   single class. Right-aligned, so 21 and 9 line up under the same game. */
.mc-line-table .mc-line-pair { font-weight: 400; overflow-wrap: anywhere; padding-right: 12px; }
.mc-line-table .mc-line-game { width: 2.4em; text-align: right; white-space: nowrap; }
.mc-line-team { display: block; font-size: 13px; }
.mc-line-head th { padding-bottom: 0; font-size: 12px; font-weight: 400; color: var(--muted); }
.mc-line-row.mc-win th, .mc-line-row.mc-win td { font-weight: 600; }
.mc-line-row + .mc-line-row th, .mc-line-row + .mc-line-row td { border-top: 1px solid var(--line); }
/* Said to assistive technology, drawn for nobody: a label that would be
   noise on the screen but is the whole meaning without one. */
.mc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%); }
.mc-pair-form, .mc-decider { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.mc-decider h3 { margin: 0; font-size: 15px; }
.mc-confirm { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: 13px; }
.mc-confirm input { margin-top: 3px; }
@media (min-width: 560px) {
  /* Wide enough that the numbers need not be pushed to the far edge: the
     table stops stretching, so each score sits just past the longest
     pairing instead of a screen away from its own. */
  .mc-line-table { width: auto; max-width: 100%; }
  .mc-line-table .mc-line-pair { padding-right: 20px; }
  .mc-tie-score { grid-template-columns: 1fr auto 1fr; gap: 14px; }
  .mc-tie-score .mc-tie-side:last-child { justify-content: flex-end; text-align: right; }
  .mc-tie-count { text-align: center; }
}

/* SF-560 · knockout rounds. Each round asks for 260px and the row wraps
   when the CONTAINER cannot give it, so a phone shows one round at a time
   and a wide board shows them side by side. No width is guessed. */
.mc-rounds { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.mc-round { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-round > h3 { margin: 0; }