/*
 * matches-board.css — the shared look of the matches tool, for EVERY competition.
 *
 * PL and IPL show the same board over different leagues, and the owner's standing
 * instruction is that they look the same wherever they can. Two copies of these rules
 * would drift the first time one page was touched, so there is one copy and the pages
 * carry only what is genuinely league-specific.
 *
 * Class prefix is `mb-` (matches board) rather than `pl-`/`ipl-`: a competition prefix
 * on a shared sheet is an invitation to fork it.
 *
 * Depends on vc-theme.css for the palette and for the segmented capsule
 * (.vc-seg-toggle / .vc-seg-btn), which the game picker uses unchanged.
 */

/* ── Controls row ──────────────────────────────────────────────────────────
   CENTRED, both the game picker and the gameweek picker. They are the page's two
   controls and they sit above a centred column of cards; left-aligning them left
   the board looking hung off one edge. */
.mb-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.mb-gamerow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vc-text-sub);
  font-size: 0.82rem;
  font-weight: 600;
  user-select: none;
}
.mb-gwbar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mb-gwbar .mb-nav {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vc-border);
  background: var(--vc-surface); color: var(--vc-text); font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.mb-gwbar .mb-nav:disabled { opacity: 0.4; cursor: default; }
.mb-gwbar select {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--vc-border);
  background: var(--vc-surface); color: var(--vc-text); font-family: inherit; font-weight: 700;
}

/* ── Match card ──────────────────────────────────────────────────────────── */
.mb-match {
  background: var(--vc-surface); border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md); margin-bottom: 10px; overflow: hidden;
}
.mb-match .head {
  display: flex; align-items: center; padding: 10px 14px; gap: 10px;
  background: linear-gradient(135deg, var(--vc-surface2), var(--vc-surface));
  border-bottom: 1px solid var(--vc-border);
}
.mb-match .side { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb-match .side.away { flex-direction: row-reverse; text-align: end; }
.mb-match .crest { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mb-match .crest-ph {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--vc-surface3); border: 1px solid var(--vc-border);
}
.mb-match .team { font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--vc-text); }
.mb-match .score { flex-shrink: 0; text-align: center; min-width: 62px; }
.mb-match .score .line { display: flex; align-items: center; justify-content: center; gap: 4px; direction: ltr; }
.mb-match .score .n { font-size: 1.35rem; font-weight: 800; color: var(--vc-text); }
.mb-match .score .sep { font-size: 1.2rem; color: var(--vc-text-sub); margin: 0 2px; }
.mb-match .score .st { font-size: 0.68rem; color: var(--vc-text-sub); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }
.mb-match .score .ko { font-size: 0.82rem; color: var(--vc-accent); font-weight: 600; }

/* ── Top-3 podium ────────────────────────────────────────────────────────── */
.mb-top3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--vc-border);
  background: linear-gradient(180deg, rgba(219,181,128,0.05), transparent);
}
.mb-t3 {
  background: var(--vc-surface2); border: 1px solid var(--vc-border);
  border-radius: 10px; padding: 9px; position: relative; min-width: 0;
}
.mb-t3.r1 { border-color: rgba(219,181,128,0.55); background: rgba(219,181,128,0.10); }
.mb-t3 .row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mb-t3 .face, .mb-t3 .ph {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--vc-surface3); border: 1.5px solid var(--vc-border);
}
.mb-t3 .face { object-fit: cover; object-position: top center; }
.mb-t3 .ph { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: var(--vc-text-sub); }
.mb-t3.r1 .face, .mb-t3.r1 .ph { border-color: #dbb580; }
.mb-t3 .body { min-width: 0; flex: 1; }
.mb-t3 .nm { font-weight: 700; font-size: 0.84rem; color: var(--vc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-t3 .sub { font-size: 0.68rem; color: var(--vc-text-sub); margin-top: 1px; }
.mb-t3 .price { direction: ltr; unicode-bidi: isolate; font-weight: 700; color: var(--vc-text); }
/* Gold, and the biggest thing on the card -- it is what the podium ranks on.
   The literal, NOT var(--vc-gold)/var(--vc-accent): both remap to blue under
   data-vc-theme="light", and champagne on a near-white card measures 1.9:1. */
.mb-t3 .pts { font-size: 1.55rem; font-weight: 900; color: #dbb580; flex-shrink: 0; display: flex; align-items: baseline; gap: 3px; line-height: 1.05; }
.mb-t3 .pts small { font-size: 0.56rem; font-weight: 700; opacity: .75; }
html[data-vc-theme="light"] .mb-t3 .pts { color: #8a6218; }   /* 5.5:1 on white */
.mb-t3 .rk {
  position: absolute; top: -6px; inset-inline-start: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--vc-surface3); border: 1px solid var(--vc-border);
  font-size: 0.62rem; font-weight: 800; color: var(--vc-text-sub);
  display: flex; align-items: center; justify-content: center;
}
.mb-t3.r1 .rk { background: #dbb580; color: #14202c; border-color: #dbb580; }
/* Chips: each a NAMED component and what it was worth. They sum to the gold total,
   which is what makes the card explain its own number. */
.mb-t3 .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mb-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; color: var(--vc-text-sub);
  background: var(--vc-surface3); border: 1px solid var(--vc-border);
  border-radius: 999px; padding: 2px 7px;
}
.mb-chip .v { color: var(--vc-green); font-weight: 900; direction: ltr; }
.mb-chip.neg .v { color: var(--vc-red); }
html[data-vc-theme="light"] .mb-chip .v { color: #23803e; }

/* ── Events ──────────────────────────────────────────────────────────────── */
.mb-events { padding: 6px 14px 10px; }
.mb-cols { display: flex; direction: ltr; gap: 12px; }
.mb-col { flex: 1; min-width: 0; }
html[dir="rtl"] .mb-col { direction: rtl; }
.mb-col.home { border-inline-start: 1px solid var(--vc-border); padding-inline-start: 12px; }
.mb-ev { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; font-size: 0.84rem; }
.mb-ev + .mb-ev { border-top: 1px solid rgba(255,255,255,0.04); }
.mb-ev .icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.85rem; padding-top: 1px; }
.mb-ev .detail { flex: 1; min-width: 0; }
.mb-ev .who { font-weight: 600; color: var(--vc-text); }
.mb-ev .lbl { font-weight: 600; font-size: 0.78rem; color: var(--vc-text-sub); }
.mb-ev .cnt { font-size: 0.7rem; color: var(--vc-text-sub); opacity: .7; }
.mb-ev .names { font-size: 0.68rem; color: var(--vc-text-sub); opacity: .75; line-height: 1.45; }
/* A signed number is a mathematical expression: without LTR, "+4" renders "4+". */
.mb-ev .pts { font-size: 0.7rem; font-weight: 700; margin-inline-start: 4px; flex-shrink: 0; padding-top: 2px; direction: ltr; }
.mb-ev .pts.pos { color: var(--vc-green); }
.mb-ev .pts.neg { color: var(--vc-red); }
.mb-ev .pts.zero { color: var(--vc-text-sub); opacity: .55; }
.mb-ev .pts.blank { color: var(--vc-text-sub); opacity: .45; }
.mb-ev.goal .who { color: var(--vc-green); }
.mb-ev.assist .who { color: #7dd3fc; }
.mb-ev.own_goal .who, .mb-ev.penalty_missed .who { color: var(--vc-red); }
.mb-ev.clean_sheet .who, .mb-ev.penalty_saved .who, .mb-ev.penalty_won .who { color: var(--vc-green); }
.mb-ev.bonus .who { color: var(--vc-accent); }
/* Rows the selected game scores differently from the default. */
.mb-ev.diverges { background: rgba(219,181,128,0.07); border-radius: 5px; }
.mb-ev.diverges .pts { text-decoration: underline dotted rgba(219,181,128,0.8); text-underline-offset: 3px; }
/* A player the selected game does not list -- dimmed whole-row, not just a blank
   number, so it reads as "not in this game" and not as "zero points". */
.mb-ev.absent { opacity: 0.42; }
.mb-ev.absent .who { color: var(--vc-text-sub) !important; }
.mb-posflag {
  font-size: 0.64rem; color: var(--vc-accent); border: 1px solid rgba(219,181,128,0.4);
  border-radius: 4px; padding: 0 4px; margin-inline-end: 5px; white-space: nowrap;
}

.mb-date { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--vc-text-sub); font-size: 0.78rem; font-weight: 600; }
.mb-date:first-child { margin-top: 0; }
.mb-date::before, .mb-date::after { content: ''; flex: 1; height: 1px; background: var(--vc-border); }
.mb-empty { text-align: center; padding: 40px 16px; color: var(--vc-text-sub); }
.mb-empty h2 { color: var(--vc-text); margin: 0 0 8px; font-size: 1.1rem; }
.mb-hint { text-align: center; font-size: .78rem; color: var(--vc-text-sub); opacity: .6; padding: 6px 0; }

@media (max-width: 640px) {
  .mb-top3 { grid-template-columns: 1fr; gap: 6px; padding: 10px; }
  .mb-match .head { padding: 8px 10px; gap: 6px; }
  .mb-match .crest, .mb-match .crest-ph { width: 24px; height: 24px; }
  .mb-match .team { font-size: 0.82rem; }
  .mb-match .score .n { font-size: 1.15rem; }
  .mb-events { padding: 6px 10px 8px; }
  .mb-cols { gap: 8px; }
  .mb-col.home { padding-inline-start: 8px; }
}