/* Match Lab inside the platform (scripts/components/match_lab.js).
   The "Match Skin" design: the platform's own tokens (shared.css / theme.css),
   Inter type, the purple accent for selection, the score orange for the one
   headline number (top speed) and the speed-band ramp. The video stage stays
   dark in both themes (footage). */

.ml [hidden] { display: none !important; }
.ml { display: flex; flex-direction: column; gap: 14px; color: var(--t1); font-family: Inter, system-ui, sans-serif; }
.ml-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ml-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ml-team-name { display: inline-flex; align-items: center; gap: 8px; font-family: Montserrat, Inter, sans-serif; font-weight: 700; font-size: 22px; }
.ml-score { padding: 2px 12px; border-radius: 8px; background: var(--purple); color: #fff; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.ml-score--vs { background: var(--s2); color: var(--t2); font-size: 14px; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ml-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); font-size: 12px; font-weight: 600; }
.ml-pill--ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.ml-kitdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

.ml-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ml-stage-wrap { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ml-panel { flex: 1 1 340px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ml-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rc, 14px); overflow: hidden; border: 1px solid var(--bd); background: #000; }
.ml-stage video, .ml-stage canvas[data-ml-overlay] { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-stage video { object-fit: contain; }
.ml-loader { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; background: #0d0d1a; color: #d6d6eb; text-align: center; transition: opacity .4s; z-index: 4; }
.ml-loader.is-done { opacity: 0; pointer-events: none; }
.ml-loader__label { font-weight: 600; }
.ml-loader__bar { width: 240px; height: 6px; border-radius: 3px; background: #1b1b33; overflow: hidden; }
.ml-loader__bar i { display: block; height: 100%; width: 0; background: #6c47ff; transition: width .2s; }
.ml-loader__sub { font-size: 12px; color: #9d9dbf; font-variant-numeric: tabular-nums; }
.ml-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(13, 13, 26, .85); border: 1px solid #3a3a5c; color: #f4f4ff; font-size: 13px; white-space: nowrap; transition: opacity .3s; pointer-events: none; }
.ml-hint.is-hidden { opacity: 0; }
.ml-bigplay { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 0; background: #6c47ff; color: #fff; display: grid; place-items: center; cursor: pointer; transition: opacity .2s, transform .2s; }
.ml-bigplay svg { width: 30px; height: 30px; }
.ml-bigplay:hover { transform: scale(1.05); }
.ml-bigplay.is-hidden { opacity: 0; pointer-events: none; }
.ml-radar { position: absolute; top: 12px; right: 12px; width: 32%; min-width: 200px; padding: 8px 10px 10px; border-radius: 12px; background: rgba(21, 21, 41, .9); border: 1px solid #3a3a5c; z-index: 2; }
.ml-radar__head { display: flex; justify-content: space-between; font-size: 11px; color: #9d9dbf; margin-bottom: 6px; }
.ml-radar__head span:first-child { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #d6d6eb; }
.ml-radar canvas { display: block; width: 100%; cursor: pointer; }
.ml-hud { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(21, 21, 41, .92); border: 1px solid var(--pc, #6c47ff); color: #f4f4ff; font-size: 13px; z-index: 3; }
.ml-hud--speed { flex-direction: column; align-items: stretch; width: min(420px, calc(100% - 24px)); }
.ml-hud__row { display: flex; align-items: center; gap: 10px; }
.ml-hud__kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffa55f; }
.ml-hud__x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #3a3a5c; background: #1b1b33; color: #f4f4ff; cursor: pointer; }
.ml-hud__body { display: flex; gap: 10px; align-items: center; }
.ml-hud__now { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.ml-hud__now b { font-size: 28px; font-variant-numeric: tabular-nums; color: var(--pc, #6c47ff); }
.ml-hud__now small { color: #9d9dbf; }
.ml-hud canvas { flex: 1; height: 90px; min-width: 0; }

.ml-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--s1); border: 1px solid var(--bd); }
.ml-ctl { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); display: inline-grid; place-items: center; cursor: pointer; font: 600 13px Inter, sans-serif; padding: 0 8px; }
.ml-ctl svg { width: 18px; height: 18px; }
.ml-ctl:hover { border-color: var(--purple); color: var(--t1); }
.ml-ctl:focus-visible, .ml-btn:focus-visible, .ml-tile:focus-visible, .ml-tab:focus-visible, .ml-chip:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ml-ctl--primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.ml-ctl.is-on { background: var(--purple-d); border-color: var(--purple); color: var(--t1); }
.ml-ctl:disabled { opacity: .45; cursor: default; }
.ml-time { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; padding: 0 4px; white-space: nowrap; }
.ml-time__dur { color: var(--t3); }
.ml-timeline { position: relative; flex: 1 1 180px; height: 32px; border-radius: 8px; background: var(--s2); cursor: pointer; touch-action: none; }
.ml-timeline canvas { width: 100%; height: 100%; display: block; }
.ml-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--yellow, #ffa55f); pointer-events: none; }
.ml-speed { padding: 0 6px; }
.ml-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-legend__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pc); background: var(--s1); color: var(--t1); font: 600 12px Inter, sans-serif; cursor: pointer; }
.ml-legend__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.ml-note { margin: 0; font-size: 12px; color: var(--t3); }

.ml-box, .ml-card { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--rc, 14px); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ml-card { border-color: var(--pc, var(--purple)); }
.ml-box__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ml-box__actions { display: flex; gap: 6px; }
.ml-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.ml-label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ml-team { display: flex; flex-direction: column; gap: 6px; }
.ml-team + .ml-team { margin-top: 8px; }
.ml-team__head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.ml-team__head .ml-btn { margin-left: auto; }
.ml-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ml-tile { height: 44px; border-radius: 8px; border: 1px solid var(--bd2); border-top: 3px solid var(--kit); background: var(--s2); color: var(--t1); font: 700 15px Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.ml-tile:hover { border-color: var(--purple); border-top-color: var(--kit); }
.ml-tile.is-on { border: 2px solid var(--pc); border-top: 3px solid var(--kit); background: color-mix(in srgb, var(--pc) 22%, var(--s2)); }
.ml-tile.is-focus { box-shadow: 0 0 0 2px var(--purple); }

.ml-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); font: 600 13px Inter, sans-serif; cursor: pointer; text-decoration: none; }
.ml-btn:hover { border-color: var(--purple); color: var(--t1); }
.ml-btn--primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.ml-btn--primary:hover { color: #fff; filter: brightness(1.08); }
.ml-btn--ghost { background: transparent; }
.ml-btn--xs { min-height: 28px; padding: 0 8px; font-size: 12px; }
.ml-btn--block { width: 100%; min-height: 44px; }
.ml-btn--link { border: 0; background: none; color: var(--purple); padding: 0 6px; }

.ml-card__head { display: flex; align-items: center; gap: 12px; }
.ml-card__num { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--s2); border: 1px solid var(--bd2); border-top: 3px solid var(--kit); display: grid; place-items: center; font-weight: 700; font-size: 20px; }
.ml-card__who { flex: 1; min-width: 0; }
.ml-card__name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.ml-card__sub { font-size: 12px; color: var(--t3); }
.ml-card__x { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); cursor: pointer; }
.ml-card__body { display: flex; flex-direction: column; gap: 12px; }
.ml-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-tab { min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); font: 600 12px Inter, sans-serif; cursor: pointer; }
.ml-tab.is-on { border-color: var(--purple); background: var(--purple-d); color: var(--t1); }

.ml-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ml-stat { display: flex; flex-direction: column; gap: 1px; padding: 10px; border-radius: 10px; background: var(--s2); border: 1px solid var(--bd); min-width: 0; }
.ml-stat b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ml-stat.is-top b { color: var(--yellow, #ffa55f); }
.ml-stat__l { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.ml-stat__s { font-size: 11px; color: var(--t3); }
.ml-zbar { display: flex; height: 12px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: 6px; }
.ml-zleg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--t2); }
.ml-zleg span { display: inline-flex; align-items: center; gap: 5px; }
.ml-zleg i { width: 10px; height: 10px; border-radius: 3px; }
.ml-zleg small { color: var(--t3); }
.ml-blocks, .ml-heat, .ml-net { display: block; width: 100%; border-radius: 10px; }
.ml-empty { margin: 0; font-size: 12px; color: var(--t3); }
.ml-muted { color: var(--t3); }
.ml-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t2); font: 600 12px Inter, sans-serif; cursor: pointer; }
.ml-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ml-chip.is-on { border-color: var(--purple); background: var(--purple-d); color: var(--t1); }
.ml-styles, .ml-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ml-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--s1); box-shadow: 0 0 0 1px var(--bd2); cursor: pointer; }
.ml-sw.is-on { box-shadow: 0 0 0 2px var(--t1); }

.ml-sprints { display: flex; flex-direction: column; gap: 8px; }
.ml-sprint { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--bd); }
.ml-sprint__kmh { width: 52px; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.ml-sprint__kmh.is-top { color: var(--yellow, #ffa55f); }
.ml-sprint__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--t1); }
.ml-sprint__meta i { display: block; height: 3px; border-radius: 2px; background: var(--purple); margin-top: 4px; }
.ml-touches { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ml-touch { text-align: left; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--s2); color: var(--t1); font: 13px Inter, sans-serif; cursor: pointer; }
.ml-touch.is-on { border-color: var(--purple); }

.ml-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 14, .6); }
.ml-modal[hidden] { display: none; }
.ml-modal__box { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--s1); border: 1px solid var(--bd2); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ml-modal__head { display: flex; justify-content: space-between; align-items: center; }
.ml-modal__head h3 { margin: 0; font-family: Montserrat, Inter, sans-serif; font-size: 20px; }
.ml-modal__x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bd2); background: var(--s2); color: var(--t1); cursor: pointer; font-size: 18px; }
.ml-modal__body { display: flex; flex-direction: column; gap: 12px; }
.ml-tablewrap { overflow-x: auto; border: 1px solid var(--bd); border-radius: 12px; }
.ml-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.ml-table th { background: var(--s3); text-align: left; padding: 0; }
.ml-table th button { width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; color: var(--t3); font: 600 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ml-table th button.is-sorted { color: var(--t1); }
.ml-table td { position: relative; padding: 8px 12px; border-top: 1px solid var(--bd); font-variant-numeric: tabular-nums; }
.ml-table td.is-sorted { font-weight: 700; }
.ml-table td i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--purple); }
.ml-rowbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--t1); font: 600 13px Inter, sans-serif; cursor: pointer; padding: 0; text-align: left; }
.ml-rowbtn:hover { color: var(--purple); }
.ml-poss { display: flex; flex-direction: column; gap: 6px; }
.ml-poss__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.ml-poss__head span { display: inline-flex; align-items: center; gap: 6px; }
.ml-poss__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.ml-cardpreview { width: min(360px, 100%); align-self: center; border-radius: 12px; border: 1px solid var(--bd); }

@media (max-width: 640px) {
  .ml-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ml-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-radar { width: 46%; min-width: 0; }
  .ml-chips { margin-left: 0; }
}

/* compact (player panel Matches tab): video + controls only */
.ml--compact .ml-head, .ml--compact .ml-panel, .ml--compact .ml-hint, .ml--compact .ml-note { display: none !important; }
.ml--compact .ml-stage-wrap { flex-basis: 100%; }
/* Fit video + controls in the panel without scrolling: width follows the
   height left under the panel header (16:9 stage). */
.ml--compact .ml-stage-wrap { max-width: min(100%, calc((100vh - 440px) * 16 / 9)); }