/* ============================================================================
   HBL — shared MATCH CARD component (.sch-match)
   Single source for the match-row design used by the Schedule list AND the
   Player Detail "Upcoming Matches" / "Last Matches" sections, so every match
   card across the site is visually identical. Uses --pink / --pink-bright
   (defined per page). Player-card avatar calibration is local to each page.
   ============================================================================ */

.sch-match {
  display: grid;
  grid-template-columns: 88px 99px minmax(0, 1fr) 116px minmax(0, 1fr) 99px 60px;
  grid-template-rows: 1fr auto;
  column-gap: 0; row-gap: 0;
  padding: 0;
  border-radius: 12px;
  overflow: visible;
  position: relative; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.022) 0%, transparent 44%),
    linear-gradient(90deg, transparent 0%, transparent 21%, rgba(255,255,255,0.06) 32%,
      rgba(4,1,1,0.42) 50%, rgba(255,255,255,0.06) 68%, transparent 79%, transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 32px rgba(0,0,0,0.48), 0 0 44px rgba(255,31,90,0.04),
    inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.18);
  min-height: 120px;
  margin-bottom: 20px;
  align-items: stretch;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s;
}
.sch-match::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14); z-index: 0; pointer-events: none;
  transition: border-color 0.26s;
}
.sch-match:hover {
  transform: translateY(-2px); z-index: 2;
  box-shadow: 0 18px 52px rgba(0,0,0,0.64), 0 0 60px rgba(255,31,90,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.sch-match:hover::before { border-color: rgba(255,31,90,0.55); }
.sch-match:hover .sch-avatar {
  transform: translateX(-50%) translateY(var(--sch-dy, 0px)) scale(calc(var(--sch-s, 1) * 1.03));
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.64)) drop-shadow(0 0 0 1px rgba(0,0,0,0.30))
          drop-shadow(0 0 14px rgba(255,31,90,0.20));
}

.sch-match--done {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.018) 0%, transparent 44%),
    linear-gradient(90deg, transparent 0%, transparent 21%, rgba(255,255,255,0.038) 32%,
      rgba(3,0,0,0.36) 50%, rgba(255,255,255,0.038) 68%, transparent 79%, transparent 100%);
}
.sch-match--done::before { border-color: rgba(255,255,255,0.09); }
.sch-match--upcoming {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.025) 0%, transparent 44%),
    linear-gradient(90deg, transparent 0%, transparent 21%, rgba(255,255,255,0.07) 32%,
      rgba(6,1,1,0.38) 50%, rgba(255,255,255,0.07) 68%, transparent 79%, transparent 100%);
  box-shadow: 0 6px 32px rgba(0,0,0,0.44), 0 0 50px rgba(255,31,90,0.05),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.sch-match--upcoming::before { border-color: rgba(255,255,255,0.16); }

.sch-time-col {
  grid-column: 1; grid-row: 1 / 3; align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 5px; padding: 14px 8px 12px 20px;
}
.sch-time {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: 0.08em; color: #FF1F5A;
  text-shadow: 0 0 20px rgba(255,31,90,0.50), 0 0 7px rgba(255,31,90,0.22);
  white-space: nowrap; line-height: 1;
}
/* Optional date label above the time (Player Detail spans multiple days) */
.sch-mc-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); line-height: 1; white-space: nowrap;
}

.sch-status {
  grid-column: 7; grid-row: 1 / 3; z-index: 5; align-self: center; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; pointer-events: none;
}
.sch-status-icon { width: 29px; height: 29px; display: flex; }
.sch-status-icon svg { width: 100%; height: 100%; display: block; }
.sch-status-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.sch-status--done .sch-status-icon { color: var(--pink-bright); filter: drop-shadow(0 0 9px rgba(255,31,90,0.60)); }
.sch-status--done .sch-status-label { color: var(--pink-bright); }
.sch-status--upcoming .sch-status-icon { color: rgba(255,255,255,0.62); filter: drop-shadow(0 0 7px rgba(255,31,90,0.28)); }
.sch-status--upcoming .sch-status-label { color: rgba(255,255,255,0.55); }
.sch-status--live .sch-status-icon { color: var(--pink-bright); filter: drop-shadow(0 0 8px rgba(255,31,90,0.6)); }
.sch-status--live .sch-status-label { color: var(--pink-bright); font-weight: 700; }
/* WIN / LOSS (Player Detail last matches) — icon-only, minimalist (no text/badge/frame).
   ~+18% larger than the Completed/Upcoming icons; win = sports green, loss = HBL pink,
   both with a very soft glow so they pop on black. */
.sch-status--win  .sch-status-icon  { width: 34px; height: 34px; color: #3DDC84; filter: drop-shadow(0 0 7px rgba(61,220,132,0.45)); }
.sch-status--loss .sch-status-icon  { width: 34px; height: 34px; color: #FF2D65; filter: drop-shadow(0 0 7px rgba(255,45,101,0.45)); }
/* Small colour-matched label under the icon (icon stays dominant) — broadcast look */
.sch-status--win  .sch-status-label { color: #3DDC84; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-shadow: 0 0 7px rgba(61,220,132,0.45); }
.sch-status--loss .sch-status-label { color: #FF2D65; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-shadow: 0 0 7px rgba(255,45,101,0.45); }

.sch-vs--live {
  color: var(--pink-bright) !important;
  text-shadow: 0 0 14px rgba(255,31,90,0.7), 0 0 28px rgba(255,31,90,0.4);
  animation: sch-live-pulse 1.5s ease-in-out infinite;
}
@keyframes sch-live-pulse { 0%,100%{opacity:1;} 50%{opacity:0.55;} }

.sch-portrait {
  display: block; align-self: stretch; position: relative; overflow: visible;
  z-index: 3; text-decoration: none;
}
.sch-portrait--left  { grid-column: 2; grid-row: 1 / 3; }
.sch-portrait--right { grid-column: 6; grid-row: 1 / 3; }
.sch-avatar {
  display: block; position: absolute; left: 50%; bottom: 5px;
  transform: translateX(-50%) translateY(var(--sch-dy, 0px)) scale(var(--sch-s, 1));
  transform-origin: bottom center;
  height: calc(100% + 16px); width: auto; max-width: none;
  object-fit: contain; object-position: bottom center; z-index: 1;
  filter: brightness(1.035) contrast(1.02) drop-shadow(0 9px 20px rgba(0,0,0,0.50));
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), filter 0.28s;
}
.sch-portrait:hover .sch-avatar {
  transform: translateX(-50%) translateY(var(--sch-dy, 0px)) scale(calc(var(--sch-s, 1) * 1.035));
  filter: brightness(1.05) contrast(1.02) drop-shadow(0 12px 28px rgba(0,0,0,0.60));
}
.sch-avatar[src*="Sia"]       { --sch-s: 1.10; }
.sch-avatar[src*="Annabelle"] { --sch-s: 1.08; }
.sch-avatar[src*="Mischella"] { --sch-s: 1.05; }
.sch-avatar[src*="Tess"] { --sch-dy: -2px; }
.sch-avatar[src*="Yumi"] { --sch-dy: 2px; }

.sch-pname {
  display: flex; align-items: center; text-decoration: none; color: inherit;
  min-width: 0; grid-row: 1; align-self: center; transition: color 0.22s;
}
.sch-pname--left  { grid-column: 3; justify-content: flex-end;   padding: 0 20px 0 32px; }
.sch-pname--right { grid-column: 5; justify-content: flex-start;  padding: 0 32px 0 20px; }
.sch-pname:hover .sch-name,
.sch-pname:hover .sch-name--winner,
.sch-pname:hover .sch-name--loser { color: var(--pink-bright); text-shadow: 0 0 20px rgba(255,31,90,0.40); }

.sch-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; transition: color 0.22s, text-shadow 0.22s;
}
.sch-name--winner { color: #ffffff; text-shadow: 0 0 24px rgba(255,31,90,0.16); }
.sch-name--loser  { color: rgba(255,255,255,0.62); font-weight: 700; }
.sch-name--long  { font-size: 19px; letter-spacing: 0.04em; }
.sch-name--xlong { font-size: 16.5px; letter-spacing: 0.02em; }

.sch-centre {
  grid-column: 4; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; align-self: center; padding: 0 6px;
}
.sch-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 48px; font-weight: 800; letter-spacing: 0.04em; color: #ffffff;
  text-shadow: 0 2px 24px rgba(255,255,255,0.14);
  line-height: 1; white-space: nowrap; user-select: none;
}
.sch-vs {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-bright); text-shadow: 0 0 20px rgba(255,31,90,0.15);
  line-height: 1; user-select: none;
  transition: text-shadow 0.26s cubic-bezier(0.22,1,0.36,1);
}
.sch-match:hover .sch-vs { text-shadow: 0 0 24px rgba(255,31,90,0.26); }

.sch-sets-row {
  grid-column: 3 / 6; grid-row: 2; text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.92);
  margin-top: -16px; padding: 0 16px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.sch-set-sep { color: var(--pink-bright); font-weight: 700; margin: 0 1px; }

/* ── TABLET ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sch-match {
    grid-template-columns: 76px 82px minmax(0, 1fr) 100px minmax(0, 1fr) 82px 56px;
    min-height: 110px;
  }
  .sch-time-col { padding: 12px 6px 10px 14px; }
  .sch-time { font-size: 15px; }
  .sch-status { font-size: 9px; }
  .sch-avatar { bottom: 4px; height: calc(100% + 14px); }
  .sch-portrait--right .sch-avatar { right: auto; }
  .sch-name { font-size: 17px; }
  .sch-pname--left  { padding: 0 16px 0 24px; }
  .sch-pname--right { padding: 0 24px 0 16px; }
  .sch-centre { padding: 0 6px; }
  .sch-score { font-size: 30px; }
  .sch-vs    { font-size: 20px; }
  .sch-sets-row { font-size: 14px; font-weight: 700; padding: 0 12px 10px; }
}

/* ── MOBILE — time bar on top, portraits flank a centred score block ─────── */
@media (max-width: 580px) {
  .sch-match {
    grid-template-columns: 54px 1fr 64px 1fr 54px;
    grid-template-rows: auto 0.45fr auto auto 1fr;
    min-height: 122px;
  }
  .sch-time-col {
    grid-column: 1 / 6; grid-row: 1;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 14px 6px; position: relative; justify-content: flex-start;
  }
  .sch-time-col::after {
    content: ''; position: absolute; left: 54px; right: 54px; bottom: 0; height: 1px;
    background: rgba(255,255,255,0.07); pointer-events: none;
  }
  .sch-portrait--left  { grid-column: 1; grid-row: 2 / 6; }
  .sch-portrait--right { grid-column: 5; grid-row: 2 / 6; }
  .sch-avatar { bottom: 2px; height: 100%; }
  .sch-portrait--right .sch-avatar { right: auto; }
  .sch-pname--left  { grid-column: 2; grid-row: 3; justify-content: flex-end;   padding: 0 6px 0 4px; align-self: center; }
  .sch-centre       { grid-column: 3; grid-row: 3; align-self: center; padding: 0 3px; }
  .sch-pname--right { grid-column: 4; grid-row: 3; justify-content: flex-start; padding: 0 4px 0 6px; align-self: center; }
  .sch-sets-row { grid-column: 2 / 5; grid-row: 4; align-self: start; text-align: center; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); margin-top: 3px; padding: 0 6px; white-space: nowrap; }
  .sch-name  { font-size: 15px; }
  .sch-name--long  { font-size: 13.5px; letter-spacing: 0.03em; }
  .sch-name--xlong { font-size: 12px;   letter-spacing: 0.01em; }
  .sch-score { font-size: 26px; }
  .sch-vs    { font-size: 17px; }
  .sch-time  { font-size: 13px; letter-spacing: 0.08em; }
  .sch-mc-date { font-size: 10px; letter-spacing: 0.14em; }
  .sch-status { position: absolute; grid-column: auto; top: 7px; right: 12px; flex-direction: row; align-items: center; gap: 6px; width: auto; }
  .sch-status-icon { width: 15px; height: 15px; }
  .sch-status-label { font-size: 9px; letter-spacing: 0.16em; }
  /* Player-detail result — compact ONE-LINE indicator "✓ WIN / ✕ LOSS", right-
     aligned, clear of the player photo; colours + soft glow kept from the base. */
  .sch-status--win, .sch-status--loss {
    flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px;
  }
  .sch-status--win .sch-status-icon, .sch-status--loss .sch-status-icon { width: 18px; height: 18px; }
  .sch-status--win .sch-status-label, .sch-status--loss .sch-status-label { font-size: 12px; letter-spacing: 0.12em; }
  /* Very soft HBL-pink ambient glow under the card → it floats over the black */
  .sch-match {
    box-shadow:
      0 6px 32px rgba(0,0,0,0.48),
      0 12px 42px rgba(255,45,101,0.07),
      inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.18);
  }
}

/* Player-detail list wrapper — caps width so cards match the Schedule column */
.pd-match-list { max-width: 900px; margin: 0 auto; }