/* player-history.css — paired with player-history.js (THE per-player round panel on
 * the IPL, PL and UCL player-stats boards). Change them together. Theme tokens only,
 * so the light theme follows without a second sheet. */

html.vph-lock, html.vph-lock body { overflow: hidden; }

.vph {
  position: fixed; inset: 0; z-index: 1500; display: none;
  align-items: flex-start; justify-content: center;
  padding: 28px 16px; box-sizing: border-box;
  background: rgba(3, 8, 16, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vph.open { display: flex; animation: vph-fade .16s ease-out; }
@keyframes vph-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vph-rise { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

.vph-sheet {
  position: relative; width: min(860px, 100%); max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
  overflow-y: auto; overscroll-behavior: contain; outline: none;
  background: var(--vc-surface, #102030);
  border: 1px solid var(--vc-card-border, rgba(255,255,255,.07));
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  color: var(--vc-text, #f7f7f7); font-family: inherit;
  animation: vph-rise .2s ease-out;
}
.vph-grab { display: none; }
.vph-x {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: rgba(255,255,255,0.06); border: 1px solid var(--vc-chip-border, rgba(255,255,255,.08));
  color: var(--vc-text, #f7f7f7); transition: background .15s;
}
.vph-x:hover { background: rgba(255,255,255,0.12); }
.vph-body { padding: 0 0 22px; }

.vph-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 0; color: var(--vc-text-sub); }
.vph-empty { padding: 8px 24px 0; color: var(--vc-text-sub); }

/* ── header ─────────────────────────────────────────────────────────────── */
.vph-head {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 24px 20px; padding-inline-end: 64px;
  background: var(--vc-hero-bg, linear-gradient(145deg, rgba(252,198,29,.12), rgba(16,32,48,.98) 74%));
  border-bottom: 1px solid var(--vc-hero-border, rgba(252,198,29,.2));
  border-radius: 20px 20px 0 0;
}
.vph-crest {
  width: 60px; height: 60px; flex: 0 0 60px; object-fit: contain; padding: 8px; box-sizing: border-box;
  border-radius: 16px; background: rgba(255,255,255,0.92); box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.vph-id { min-width: 0; }
.vph-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-accent, #dbb580); }
.vph-name { margin: 3px 0 6px; font-size: 1.55rem; font-weight: 800; line-height: 1.15; color: var(--vc-text); }
.vph-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: var(--vc-text-soft, #c9ccf0); }
.vph-price { padding: 2px 9px; border-radius: 999px; background: var(--vc-chip-bg, rgba(255,255,255,.06)); border: 1px solid var(--vc-chip-border, rgba(255,255,255,.08)); font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* ── summary tiles ──────────────────────────────────────────────────────── */
.vph-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 18px 24px 4px; }
.vph-tile {
  padding: 12px 10px 11px; border-radius: 14px; text-align: center;
  background: var(--vc-surface2, #16293d); border: 1px solid var(--vc-card-border, rgba(255,255,255,.07));
}
.vph-tile.is-key { background: linear-gradient(160deg, rgba(252,198,29,.16), rgba(252,198,29,.03)); border-color: rgba(252,198,29,.32); }
.vph-tile-v { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--vc-text); font-variant-numeric: tabular-nums; }
.vph-tile.is-key .vph-tile-v { color: var(--vc-gold, #fcc61d); }
.vph-tile-l { margin-top: 4px; font-size: .74rem; font-weight: 700; color: var(--vc-text-sub); }
.vph-tile-s { margin-top: 2px; font-size: .68rem; color: var(--vc-text-sub); opacity: .8; }

/* ── sections ───────────────────────────────────────────────────────────── */
.vph-sec { padding: 18px 24px 0; }
.vph-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vph-sec-title { margin: 0 0 10px; font-size: .98rem; font-weight: 800; color: var(--vc-text); }
.vph-sec-head .vph-sec-title { margin: 0; }
.vph-legend { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--vc-text-sub); }
.vph-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-start: 6px; }
.vph-legend i.is-min { height: 4px; width: 14px; background: #3ec5d6; border-radius: 2px; }

/* tier palette — shared by bars and point pills */
.vph-t-hi   { --t: #fcc61d; --t-ink: #1b1300; }
.vph-t-good { --t: #5fd97a; --t-ink: #06240f; }
.vph-t-mid  { --t: #6fa8dc; --t-ink: #071a2c; }
.vph-t-low  { --t: #4a5d73; --t-ink: #e8edf4; }
.vph-t-neg  { --t: #f85149; --t-ink: #2a0503; }
.vph-t-none { --t: transparent; --t-ink: var(--vc-text-sub); }
.vph-legend i[class^="vph-t-"] { background: var(--t); }

/* ── chart ──────────────────────────────────────────────────────────────── */
.vph-chart {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: 12px 12px 8px; border-radius: 14px;
  background: var(--vc-table-wrap-bg, var(--vc-surface2)); border: 1px solid var(--vc-table-wrap-border, rgba(255,255,255,.07));
}
.vph-cols { display: flex; align-items: stretch; justify-content: center; gap: 6px; min-width: 100%; width: max-content; }
.vph-col { flex: 1 0 34px; max-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vph-col-v { font-size: .76rem; font-weight: 800; color: var(--vc-text); font-variant-numeric: tabular-nums; }
.vph-col-bar { position: relative; width: 100%; height: 112px; display: flex; align-items: flex-end; justify-content: center;
  background: repeating-linear-gradient(to top, rgba(255,255,255,.035) 0 1px, transparent 1px 28px); border-radius: 8px 8px 0 0; }
.vph-bar { display: block; width: 72%; max-width: 30px; min-height: 0; border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, var(--t), color-mix(in srgb, var(--t) 70%, #000)); box-shadow: 0 0 14px color-mix(in srgb, var(--t) 30%, transparent); }
.vph-col-min { width: 72%; max-width: 30px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.vph-col-min span { display: block; height: 100%; background: #3ec5d6; border-radius: 2px; }
.vph-col-gw { font-size: .7rem; color: var(--vc-text-sub); font-variant-numeric: tabular-nums; }
.vph-col.is-dnp .vph-col-v { color: var(--vc-text-sub); font-weight: 600; }
.vph-col.is-dnp .vph-col-bar::after { content: ''; position: absolute; bottom: 0; width: 60%; max-width: 26px; height: 6px;
  border: 1px dashed rgba(255,255,255,.22); border-radius: 4px; }

/* ── row pieces ─────────────────────────────────────────────────────────── */
.vph-dim { color: var(--vc-text-sub); opacity: .55; font-weight: 400; }
.vph-fx { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vph-fx + .vph-fx { margin-inline-start: 10px; }
.vph-opp { font-weight: 700; color: var(--vc-text); }
.vph-ha { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; color: var(--vc-text-sub);
  background: var(--vc-chip-bg, rgba(255,255,255,.06)); border: 1px solid var(--vc-chip-border, rgba(255,255,255,.08)); }
.vph-res { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 1px 7px 1px 2px;
  border-radius: 7px; background: rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
[dir="rtl"] .vph-res { padding: 1px 2px 1px 7px; }
.vph-res b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-size: .66rem; color: #06111c; }
.vph-res.r-w b { background: #5fd97a; } .vph-res.r-d b { background: #b0b4c8; } .vph-res.r-l b { background: #f85149; color: #fff; }
.vph-pts { display: inline-block; min-width: 30px; padding: 3px 7px; border-radius: 8px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; background: var(--t); color: var(--t-ink); }
.vph-pts.vph-t-low { background: rgba(255,255,255,.08); color: var(--vc-text); }
.vph-role { font-weight: 800; color: var(--vc-text-sub); }
.vph-role.is-start { color: #5fd97a; }
.vph-role.is-sub { color: #6fa8dc; }
.vph-min { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 34px; font-variant-numeric: tabular-nums; }
.vph-min-n { font-weight: 700; }
.vph-min-t { width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.vph-min-t span { display: block; height: 100%; background: #3ec5d6; }
.vph-cs { color: #5fd97a; font-weight: 800; }
.vph-card { display: inline-block; width: 9px; height: 13px; border-radius: 2px; margin: 0 1px; vertical-align: middle; }
.vph-card.is-y { background: #fcc61d; } .vph-card.is-r { background: #f85149; }
.vph-ev { display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 6px; font-size: .68rem; font-weight: 800;
  background: rgba(255,255,255,.07); color: var(--vc-text-soft, #c9ccf0); white-space: nowrap; }
.vph-ev.ev-motm { background: rgba(252,198,29,.16); color: #fcc61d; }
.vph-ev.ev-og, .vph-ev.ev-penMiss { background: rgba(248,81,73,.14); color: #ff8a83; }
.vph-ev.ev-penSave, .vph-ev.ev-penWon { background: rgba(95,217,122,.14); color: #5fd97a; }
.vph-ev.ev-penCon { background: rgba(248,81,73,.14); color: #ff8a83; }
.vph-ev.ev-saves { background: rgba(111,168,220,.14); color: #8fc1ee; }
.vph-locked { letter-spacing: 2px; color: var(--vc-text-sub); filter: blur(.4px); }

/* ── the round table — ONE layout on every screen ──────────────────────────
   Wider than its box (a phone, a narrow modal) it scrolls sideways with the ROUND and
   the OPPONENT pinned, so a row never loses whose match it is. Pinned cells carry a
   SOLID background (a translucent one would let scrolled cells show through), and a
   did-not-play row is dimmed by colour, never by `opacity` on the cell, for the same
   reason. `separate` borders, because sticky cells and collapsed borders do not mix. */
.vph-table-wrap { --vph-row: var(--vc-surface2, #16293d);
  --vph-row-hover: color-mix(in srgb, var(--vc-surface2, #16293d) 93%, #fff);
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border-radius: 14px; border: 1px solid var(--vc-table-wrap-border, rgba(255,255,255,.07)); background: var(--vph-row); }
html[data-vc-theme="light"] .vph-table-wrap { --vph-row-hover: color-mix(in srgb, var(--vc-surface2) 94%, #000); }
/* More columns past the edge: fade the far side (left in RTL, right in LTR). */
.vph-table-wrap.vph-more { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30px); mask-image: linear-gradient(to left, transparent 0, #000 30px); }
[dir="rtl"] .vph-table-wrap.vph-more { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px); mask-image: linear-gradient(to right, transparent 0, #000 30px); }
.vph-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.vph-table th { padding: 10px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .03em; color: var(--vc-text-sub);
  text-align: center; white-space: nowrap; background: var(--vph-row);
  border-bottom: 1px solid var(--vc-table-head-border, rgba(255,255,255,.08)); }
.vph-table td { padding: 9px 8px; text-align: center; white-space: nowrap; background: var(--vph-row);
  border-top: 1px solid var(--vc-table-row-border, rgba(255,255,255,.06)); font-variant-numeric: tabular-nums; vertical-align: middle; }
.vph-table tbody tr:first-child td { border-top: none; }
.vph-table tbody tr:hover td { background: var(--vph-row-hover); }
.vph-table .c-gw, .vph-table .c-opp { position: sticky; z-index: 1; }
.vph-table th.c-gw, .vph-table th.c-opp { z-index: 2; }
.vph-table .c-gw { inset-inline-start: 0; width: 40px; min-width: 40px; font-weight: 800; color: var(--vc-text-sub); }
.vph-table .c-opp { inset-inline-start: 40px; text-align: start;
  box-shadow: inset -1px 0 0 var(--vc-table-head-border, rgba(255,255,255,.08)); }
[dir="rtl"] .vph-table .c-opp { box-shadow: inset 1px 0 0 var(--vc-table-head-border, rgba(255,255,255,.08)); }
.vph-table .c-adv { border-inline-start: 1px solid var(--vc-table-head-border, rgba(255,255,255,.08)); }
.vph-table tr.is-dnp td { color: var(--vc-text-sub); }
.vph-table tr.is-dnp td:not(.c-gw):not(.c-opp) > * { opacity: .5; }
.vph-table tr.is-dnp td.c-opp .vph-opp { color: var(--vc-text-sub); }
.vph-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 6px; font-size: .64rem; font-weight: 700;
  color: var(--vc-text-sub); background: var(--vc-chip-bg, rgba(255,255,255,.06)); border: 1px solid var(--vc-chip-border, rgba(255,255,255,.08)); }
.vph-fx-meta { display: inline-flex; align-items: center; gap: 6px; }

/* Compact twins: full text on a wide table, the short one on a narrow one. */
.vph-ls, .vph-min-role, .vph-ev-cards { display: none; }

/* Narrow (a phone, or any box under 640px — the module sets it on the container).
   The WHOLE table fits: no start or cards column (the start mark rides under the
   minutes, cards join the events cell), short labels, tight cells. Every size inside is
   in em so the module's fitTable() can shrink the lot together on a very small screen. */
.vph-narrow .vph-lf { display: none; }
.vph-narrow .vph-ls { display: inline; }
.vph-narrow .vph-table .c-start, .vph-narrow .vph-table .c-cards { display: none; }
.vph-narrow .vph-min-role { display: block; margin-top: .15em; font-size: .8em; line-height: 1; }
.vph-narrow .vph-ev-cards { display: inline-flex; gap: .15em; margin-inline-end: .2em; vertical-align: middle; }
.vph-narrow .vph-table { font-size: .74rem; table-layout: auto; }
.vph-narrow .vph-table th { padding: .7em .2em; font-size: .78em; letter-spacing: 0; }
.vph-narrow .vph-table td { padding: .55em .2em; }
.vph-narrow .vph-table .c-gw { width: auto; min-width: 0; padding-inline: .35em .15em; }
.vph-narrow .vph-table .c-opp { min-width: 0; max-width: 6.6em; padding-inline: .3em .35em; white-space: normal; }
.vph-narrow .vph-table .c-gw, .vph-narrow .vph-table .c-opp { position: static; }
.vph-narrow .vph-table .c-x { padding-inline: .35em; }
.vph-narrow .vph-fx { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; white-space: normal; }
.vph-narrow .vph-fx + .vph-fx { margin: .5em 0 0; }
.vph-narrow .vph-opp { line-height: 1.15; overflow-wrap: normal; word-break: keep-all; }
.vph-narrow .vph-fx-meta { gap: .25em; }
.vph-narrow .vph-ha { font-size: .78em; padding: 0 .35em; border-radius: .4em; }
.vph-narrow .vph-res { font-size: .82em; gap: .25em; padding: 0 .4em 0 .1em; border-radius: .45em; }
[dir="rtl"] .vph-narrow .vph-res, .vph-narrow[dir="rtl"] .vph-res { padding: 0 .1em 0 .4em; }
.vph-narrow .vph-res b { width: 1.35em; height: 1.35em; font-size: .85em; border-radius: .35em; }
.vph-narrow .vph-tag { margin: .3em 0 0; font-size: .74em; padding: 0 .4em; }
.vph-narrow .vph-pts { min-width: 1.9em; padding: .2em .35em; border-radius: .5em; }
.vph-narrow .vph-min { min-width: 0; gap: .15em; }
.vph-narrow .vph-min-t { width: 2em; height: 2px; }
.vph-narrow .vph-card { width: .55em; height: .8em; }
.vph-narrow .vph-ev { font-size: .8em; padding: 0 .3em; margin: .05em .1em; }
.vph-narrow .vph-locked { letter-spacing: 1px; }
.vph-narrow .vph-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vph-narrow .vph-legend { display: none; }

.vph-note { margin: 14px 24px 0; font-size: .76rem; color: var(--vc-text-sub); }

/* ── game toggle (points per fantasy game) ───────────────────────────────── */
.vph-games { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px 0; }
.vph-games-l { font-size: .78rem; font-weight: 700; color: var(--vc-text-sub); }
.vph-seg { display: inline-flex; flex-wrap: wrap; }
.vph-seg .vc-seg-btn { min-height: 34px; padding: 6px 14px; font-size: .84rem; }
.vph-seg .vc-seg-btn[disabled] { opacity: .7; cursor: progress; }

/* ── planner modal tabs (projection | history) ───────────────────────────── */
.vph-tabs { display: flex; width: 100%; margin: 10px 0 12px; box-sizing: border-box; }
.vph-tabs .vc-seg-btn { flex: 1 1 0; justify-content: center; min-height: 36px; }
.vph-tab-hidden { display: none !important; }
.vph-tabpane { text-align: start; }

/* The planner modal while its history tab shows: room for the round table. */
.vph-wide { max-width: min(900px, calc(100vw - 32px)) !important; width: 100% !important; }

/* ⛔ HOST TABLE RULES DO NOT REACH THE PANEL'S TABLE. The planner modals style every
   table cell they contain — `#taXptsModal td:first-child { color }`, `td:last-child
   { text-align:left; font-weight:600 }`, `.ta-modal td { padding; border-top }` — and an
   id selector outranks any class one, so these few properties are pinned here. */
.vph-inline .vph-table { border-collapse: separate !important; border-spacing: 0 !important; font-size: .86rem !important; }
.vph-inline .vph-table td, .vph-inline .vph-table th { padding: 9px 8px !important; text-align: center !important; font-weight: 400 !important; font-size: inherit !important; }
.vph-inline .vph-table td { color: var(--vc-text) !important; }
.vph-inline .vph-table th { padding: 10px 8px !important; color: var(--vc-text-sub) !important; font-weight: 800 !important; font-size: .7rem !important; }
.vph-inline .vph-table td.c-opp, .vph-inline .vph-table th.c-opp { text-align: start !important; }
.vph-inline .vph-table td.c-gw, .vph-inline .vph-table tr.is-dnp td { color: var(--vc-text-sub) !important; }
.vph-inline .vph-table td.c-gw { font-weight: 800 !important; }
.vph-inline.vph-narrow .vph-table { font-size: .74rem !important; }
.vph-inline.vph-narrow .vph-table td { padding: .55em .2em !important; font-size: 1em !important; }
.vph-inline.vph-narrow .vph-table th { padding: .7em .2em !important; font-size: .78em !important; }
.vph-inline.vph-narrow .vph-table td.c-opp { padding-inline: .3em .35em !important; }
.vph-inline.vph-narrow .vph-table td.c-gw { padding-inline: .35em .15em !important; }

/* ── inline (inside a planner modal): no sheet chrome, the host owns it ─── */
.vph-inline { color: var(--vc-text); }
.vph-inline .vph-tiles { padding: 4px 0 2px; gap: 8px; }
.vph-inline .vph-sec { padding: 14px 0 0; }
.vph-inline .vph-note, .vph-inline .vph-empty { margin-inline: 0; padding-inline: 0; }
.vph-inline .vph-tile { padding: 10px 6px 9px; }
.vph-inline .vph-tile-v { font-size: 1.2rem; }
.vph-inline .vph-col-bar { height: 88px; }
.vph-inline .vph-loading { padding: 32px 0; }
/* Board-owned sections (PL's past seasons / radar) inherit the module's table look. */
.vph-extra table { width: 100%; }

@media (max-width: 720px) {
  .vph { padding: 0; align-items: flex-end; }
  .vph-games { padding: 14px 16px 0; }
  .vph-sheet { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; border-bottom: none;
    animation: vph-sheet .24s cubic-bezier(.2,.8,.2,1); }
  @keyframes vph-sheet { from { transform: translateY(40px); } to { transform: none; } }
  .vph-grab { display: block; position: sticky; top: 0; z-index: 3; height: 0; }
  .vph-grab::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: rgba(255,255,255,.28); }
  .vph-x { top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; }
  .vph-head { padding: 26px 16px 16px; padding-inline-end: 56px; gap: 12px; border-radius: 22px 22px 0 0; }
  .vph-crest { width: 50px; height: 50px; flex-basis: 50px; border-radius: 14px; padding: 6px; }
  .vph-name { font-size: 1.28rem; }
  .vph-meta { font-size: .8rem; gap: 6px; }
  .vph-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 2px; }
  .vph-tile { padding: 10px 6px 9px; }
  .vph-tile-v { font-size: 1.22rem; }
  .vph-sec { padding: 16px 16px 0; }
  .vph-legend { display: none; }
  .vph-col { flex-basis: 30px; }
  .vph-col-bar { height: 92px; }
  .vph-note { margin: 12px 16px 0; }
  .vph-body { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

html[data-vc-theme="light"] .vph { background: rgba(10, 20, 35, 0.45); }
html[data-vc-theme="light"] .vph-x { background: rgba(0,0,0,.05); }
html[data-vc-theme="light"] .vph-res, html[data-vc-theme="light"] .vph-ev,
html[data-vc-theme="light"] .vph-pts.vph-t-low, html[data-vc-theme="light"] .vph-min-t,
html[data-vc-theme="light"] .vph-col-min { background: rgba(0,0,0,.07); }
html[data-vc-theme="light"] .vph-col-bar { background: repeating-linear-gradient(to top, rgba(0,0,0,.05) 0 1px, transparent 1px 28px); }
html[data-vc-theme="light"] .vph-col.is-dnp .vph-col-bar::after { border-color: rgba(0,0,0,.25); }
html[data-vc-theme="light"] .vph-tile.is-key .vph-tile-v { color: #a8780a; }
html[data-vc-theme="light"] .vph-ev.ev-motm { color: #a8780a; }
html[data-vc-theme="light"] .vph-grab::before { background: rgba(0,0,0,.2); }

/* Phones: the table section takes back some of the side padding — width it needs more
   than the margin does. */
.vph-sheet.vph-narrow .vph-sec { padding-inline: 10px; }
@media (max-width: 720px) {
  .vph-wide { padding-inline: 10px !important; }
}

/* A score never breaks ("1-" over "2"): it moves to its own line whole instead. */
.vph-res { white-space: nowrap; }
.vph-narrow .vph-fx-meta { flex-wrap: wrap; row-gap: .25em; }
.vph-narrow .vph-table .c-opp { max-width: 7.4em; }
.vph-inline.vph-narrow .vph-table td.c-x { padding-inline: .35em !important; }
/* A club name breaks only BETWEEN words ("מנ' / יונייטד"), never inside one; a tag stays
   whole. If that leaves the table too wide, fitTable() shrinks it — it never scrolls. */
.vph-tag { white-space: nowrap; }
.vph-narrow .vph-table .c-opp { max-width: none; }

/* ── phones: the table first ────────────────────────────────────────────────
   Owner, 2026-10-18: on a phone the last rounds should be on screen without scrolling.
   So the chart goes (the table carries the same points and minutes), the six summary
   tiles become one thin strip with short labels, and the header + toggle tighten. */
.vph-narrow .vph-chart-sec { display: none; }
.vph-narrow .vph-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.vph-sheet.vph-narrow .vph-tiles { padding: 10px 10px 0; }
.vph-narrow .vph-tile { padding: 6px 2px 5px; border-radius: 10px; }
.vph-narrow .vph-tile-v { font-size: 1rem; }
.vph-narrow .vph-tile-l { font-size: .6rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.vph-narrow .vph-tile-s { display: none; }
.vph-narrow .vph-sec { padding-top: 12px; }
.vph-narrow .vph-sec-title { font-size: .86rem; margin-bottom: 6px; }
.vph-inline.vph-narrow .vph-tile-v { font-size: 1rem; }
@media (max-width: 720px) {
  .vph-head { padding: 20px 14px 12px; padding-inline-end: 52px; gap: 10px; }
  .vph-crest { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; padding: 5px; }
  .vph-kicker { font-size: .64rem; }
  .vph-name { font-size: 1.12rem; margin: 2px 0 4px; }
  .vph-meta { font-size: .74rem; gap: 5px; }
  .vph-x { top: 10px; width: 32px; height: 32px; font-size: 20px; }
  .vph-games { padding: 10px 12px 0; gap: 8px; }
  .vph-games-l { font-size: .72rem; }
  .vph-seg .vc-seg-btn { min-height: 30px; padding: 4px 12px; font-size: .8rem; }
  .vph-tabs { margin: 6px 0 8px; }
  .vph-tabs .vc-seg-btn { min-height: 32px; }
}