/* ═══════════════ SwiftScore · Match strip & Match Centre ═══════════════ */

/* ── Filter chips ── */
.mc-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.mc-chip{padding:6px 14px;border-radius:999px;border:1px solid var(--ss-border2);background:#0a1a24;color:#9cc3d6;
  font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center}
.mc-chip:hover{color:#fff;border-color:var(--org)}
.mc-chip.active{background:var(--org);border-color:var(--org);color:#06121a;font-weight:700;box-shadow:0 0 14px var(--org)}
.mc-demo{font-size:.64rem;color:var(--ss-amber);border:1px dashed rgba(251,191,36,.45);padding:4px 10px;border-radius:999px;letter-spacing:.06em}

/* ── Horizontal match strip ── */
.mc-strip-wrap{position:relative}
.mc-strip{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:none}
.mc-strip::-webkit-scrollbar{display:none}
.mc-arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--ss-border2);background:rgba(6,18,26,.94);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5);transition:all .15s}
.mc-arrow.left{left:-16px}.mc-arrow.right{right:-16px}
.mc-arrow:hover{border-color:var(--org);color:var(--org)}

/* ── Match card ── */
.mc-card{flex:0 0 280px;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px;padding:14px 16px 10px;border-radius:14px;
  text-decoration:none;color:inherit;background:linear-gradient(160deg,var(--ss-card),var(--ss-bg2));border:1px solid var(--ss-border);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.mc-card:hover{transform:translateY(-2px);border-color:var(--org);box-shadow:0 10px 26px rgba(0,0,0,.45);color:inherit}
.mc-card.live{border-color:rgba(248,113,113,.45)}
.mc-card.current{border-color:var(--org);box-shadow:0 0 0 1px var(--org),0 0 18px rgba(0,0,0,.4)}
.mc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.62rem}
.mc-status{display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.14em;color:var(--ss-muted);font-size:.62rem}
.mc-status.live{color:var(--ss-red)}
.mc-status.result{color:var(--ss-green)}
.mc-status.upcoming{color:var(--ss-amber)}
.mc-status.abandoned{color:var(--ss-dim)}
.mc-stage{color:var(--ss-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-team{display:flex;align-items:center;gap:10px;min-width:0}
.mc-name{font-weight:700;color:#fff;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mc-score{margin-left:auto;font-family:var(--ff-head);font-weight:700;color:#fff;font-size:.88rem;white-space:nowrap}
.mc-score small{font-family:var(--ff-mono);font-size:.7rem;color:var(--ss-muted);font-weight:400;margin-right:5px}
.mc-team.dim .mc-name,.mc-team.dim .mc-score{color:var(--ss-dim)}
.mc-note{font-size:.76rem;color:var(--ss-cyan2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-note.live{color:#fca5a5}.mc-note.upcoming{color:#fcd34d}.mc-note.abandoned{color:var(--ss-muted)}
.mc-foot{display:flex;gap:16px;padding-top:8px;border-top:1px solid var(--ss-border);font-size:.72rem;font-weight:600;color:#9cc3d6}
.mc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mc-grid .mc-card{flex:initial}

/* ── Team badge (club colour) ── */
.tm-badge{--tc:#22d3ee;width:28px;height:28px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--ff-head);font-size:.5rem;font-weight:800;letter-spacing:.02em;color:#06121a;background:var(--tc);box-shadow:0 0 8px var(--tc)}

/* ── Match header ── */
.mx-head{padding:22px 24px 18px}
.mx-series{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.72rem;color:var(--ss-muted);margin-bottom:14px}
.mx-series b{color:#cfe6f1;font-weight:600}
.mx-team{display:flex;align-items:center;gap:12px;padding:5px 0;min-width:0}
.mx-team .tm-badge{width:36px;height:36px;font-size:.6rem;border-radius:10px}
.mx-team-name{font-family:var(--ff-head);font-size:1.12rem;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-team-score{margin-left:auto;font-family:var(--ff-head);font-size:1.5rem;font-weight:800;color:#fff;white-space:nowrap}
.mx-team-score small{font-family:var(--ff-mono);font-size:.85rem;color:var(--ss-muted);font-weight:400;margin-right:6px}
.mx-team.dim .mx-team-name{color:var(--ss-muted)}
.mx-team.dim .mx-team-score{font-family:'Inter';font-size:.82rem;font-weight:500;color:var(--ss-dim)}
.mx-status{margin-top:14px;font-weight:600;color:#fff}
.mx-status.live{color:#fca5a5}.mx-status.result{color:#6ee7b7}.mx-status.upcoming{color:#fcd34d}
.mx-meta{font-size:.76rem;color:var(--ss-muted);margin-top:4px;font-family:var(--ff-mono)}

/* ── Tabs ── */
.mx-tabs{display:flex;gap:2px;border-top:1px solid var(--ss-border);border-bottom:1px solid var(--ss-border);padding:0 14px;overflow-x:auto;scrollbar-width:none}
.mx-tabs::-webkit-scrollbar{display:none}
.mx-tab{background:none;border:none;padding:13px 14px;color:#9cc3d6;font-weight:600;font-size:.86rem;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.mx-tab:hover{color:#fff}
.mx-tab.active{color:#fff;border-bottom-color:var(--org)}
.mx-tab.soon{opacity:.45;pointer-events:none}
.mx-pane{display:none;padding:18px}
.mx-pane.active{display:block;animation:mxIn .25s ease}
@keyframes mxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Score tables ── */
.mx-table{width:100%;border-collapse:collapse;font-size:.82rem}
.mx-table th{font-family:var(--ff-head);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-cyan2);background:#0c2e2e;
  padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--ss-border2)}
.mx-table th:first-child,.mx-table td:first-child{text-align:left}
.mx-table td{padding:9px 10px;text-align:right;border-bottom:1px solid #12303f;color:#cfe6f1;white-space:nowrap}
.mx-table tbody tr:hover{background:#0f2a3a}
.mx-table .grp{border-left:1px solid var(--ss-border)}
.mx-table .num-b{font-family:var(--ff-head);font-weight:700;color:#fff}
.mx-table .num-w{font-family:var(--ff-head);font-weight:700;color:var(--ss-green)}
.mx-table .sub{color:var(--ss-dim);font-size:.7rem;margin-left:5px}
.mx-player{color:#fff;font-weight:600}
.mx-player .strike{color:var(--org);margin-left:1px}
.mx-dismiss{color:var(--ss-muted);font-size:.76rem;text-align:left!important;white-space:normal!important}
.mx-row-total td{background:#0a1f2b;font-weight:700;color:#fff}
.mx-total{font-family:var(--ff-head);font-size:1rem}
.mx-info{font-size:.76rem;color:var(--ss-muted);line-height:1.9;padding:10px 2px 4px}
.mx-info b{color:#e6f7ff;font-weight:600}
.mx-info .sep{margin:0 8px;color:var(--ss-border2)}

/* ── Ball-by-ball timeline ── */
.mx-balls{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:12px 2px 6px;scrollbar-width:thin}
.mx-balls .ss-ball{width:32px;height:32px;flex-shrink:0}
.ss-ball.ex{background:rgba(251,191,36,.16);border-color:var(--ss-amber);color:#fcd34d;font-size:.5rem}
.mx-over-sep{flex-shrink:0;text-align:center;font-size:.54rem;line-height:1.3;color:var(--ss-muted);letter-spacing:.08em;text-transform:uppercase;
  padding:0 8px;margin:0 2px;border-left:1px dashed var(--ss-border2);border-right:1px dashed var(--ss-border2)}
.mx-over-sep b{display:block;font-family:var(--ff-head);color:#fff;font-size:.66rem}

/* ── Innings header ── */
.mx-inn-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(99,102,241,.10));border:1px solid var(--ss-border);border-bottom:none;font-weight:700;color:#fff}
.mx-inn-head .s{font-family:var(--ff-head);white-space:nowrap}
.mx-inn-head .s small{font-family:var(--ff-mono);color:var(--ss-muted);font-weight:400;margin-left:6px}
.mx-inn-box{border:1px solid var(--ss-border);border-radius:0 0 10px 10px;overflow:hidden;margin-bottom:22px}
.mx-inn-note{padding:10px 14px;font-size:.76rem;color:var(--ss-muted);border-top:1px solid #12303f;line-height:1.7}
.mx-inn-note b{color:#e6f7ff}

/* ── Commentary ── */
.mx-comm{display:flex;gap:14px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid #12303f}
.mx-comm-ov{font-family:var(--ff-head);font-size:.76rem;color:#fff;width:40px;flex-shrink:0;padding-top:7px}
.mx-comm .ss-ball{flex-shrink:0;width:32px;height:32px}
.mx-comm-text{color:#cfe6f1;font-size:.84rem;line-height:1.55;padding-top:5px}
.mx-comm-text b{color:#fff}
.mx-over-end{margin:12px 0;padding:10px 14px;border-radius:10px;background:#0a1f2b;border:1px solid var(--ss-border);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.76rem;color:var(--ss-muted)}
.mx-over-end b{font-family:var(--ff-head);color:#fff}

/* ── Playing XI ── */
.mx-xi-title{font-family:var(--ff-head);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.mx-xi-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #12303f;color:#cfe6f1}
.mx-xi-no{width:22px;font-family:var(--ff-mono);color:var(--ss-dim)}
.mx-xi-tag{font-size:.58rem;padding:1px 6px;border-radius:5px;background:rgba(251,191,36,.14);color:#fcd34d;font-weight:700;text-transform:uppercase}

/* ── Side cards ── */
.mx-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #173446;font-size:.8rem}
.mx-kv:last-child{border-bottom:none}
.mx-kv span:first-child{color:var(--ss-muted)}
.mx-kv span:last-child{color:#e6f7ff;text-align:right}

@media(max-width:767px){
  .mc-arrow{display:none}
  .mc-card{flex-basis:250px}
  .mx-head{padding:18px}
  .mx-team-name{font-size:.92rem}
  .mx-team-score{font-size:1.15rem}
  .mx-pane{padding:12px}
}