/* sports.css v1 — game scoreboard, bet sections, listing cards (2026-06-11)
   Light+dark via site tokens; RTL-safe (logical props). */

/* ── scoreboard ── */
/* Blended into the page (no card bg/border/radius) — scoreboard acts as the match hero */
.spx-sb{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;margin:0 0 14px}
.spx-sb-top{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 0 9px;border:0!important;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.spx-sb-top .spx-lg{font-weight:800;color:var(--text)}
.spx-sb-top .spx-bo{font-weight:800;color:var(--accent);border:1px solid var(--border);border-radius:5px;padding:0 5px;letter-spacing:.03em;line-height:1.5}
.spx-sb-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:4px 0}
/* Broadcast-style team cell: big flag/logo on top, FULL team name centered below (wraps, no cut) */
.spx-team{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;min-width:0;padding:0 4px}
.spx-team.home{flex-direction:column;text-align:center}
.spx-tlogo{width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex:none}
.spx-tlogo img,.spx-tlogo .spx-tflag,.spx-team>img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.spx-tinfo{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.spx-tname{font-weight:700;font-size:15px;line-height:1.18;color:var(--text);white-space:normal;overflow-wrap:anywhere}
.spx-tname a{color:inherit;text-decoration:none}.spx-tname a:hover{text-decoration:underline}
.spx-trec{font-size:11px;color:var(--text-muted)}
.spx-tbar{display:none}
@media(max-width:768px){
  .spx-tlogo{width:42px;height:42px}
  .spx-tlogo img,.spx-tlogo .spx-tflag,.spx-team>img{width:40px;height:40px}
  .spx-tname{font-size:13px;line-height:1.15}
  /* Tidy: pull the scoreboard tighter to the chart below it on mobile */
  .spx-sb{margin-bottom:8px}
  .spx-sb-top{padding-bottom:6px;font-size:10.5px}
  .spx-sb-main{padding:2px 0}
}
.spx-mid-wrap{display:flex;align-items:center;gap:10px}
.spx-score{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;min-width:34px;text-align:center;color:var(--text)}
.spx-score.dim{color:var(--text-muted);font-weight:600;font-size:16px}
/* Tennis: per-set games per player (e.g. "6⁴ 5") — smaller than a single big score, LTR, spaced */
.spx-score.spx-sets{font-size:22px;letter-spacing:3px;min-width:40px;direction:ltr;unicode-bidi:isolate}
@media(max-width:768px){.spx-score.spx-sets{font-size:17px;letter-spacing:2px}}
/* Tennis per-set TABLE: 1 row per player, 1 cell per set (current set in green) */
.spx-sb-main.spx-tnt{display:block;padding:6px 0}
.spx-tnt-row{display:flex;align-items:center;gap:11px;padding:5px 2px}
.spx-tnt-p{flex:1;display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;font-size:16px}
.spx-tnt-p img,.spx-tnt-p .spx-flag-sm{width:26px;height:26px;border-radius:5px;flex:none;object-fit:cover}
.spx-tnt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spx-tnt-name a{color:inherit;text-decoration:none}
.spx-tnt-cells{display:flex;gap:2px;direction:ltr;unicode-bidi:isolate;flex:none}
.spx-tnt-cell{width:34px;text-align:center;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.spx-tnt-cell.cur{color:var(--green)}
.spx-tnt-state{text-align:center;margin-top:7px}
/* #1302 (operator): on DESKTOP the tennis scoreboard (names + set scores) shrinks to its
   content width and centers in the row, instead of stretching the full content column.
   Mobile keeps the full-width (block) layout above. */
@media(min-width:769px){
  .spx-sb-main.spx-tnt{width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
}
@media(max-width:768px){
  .spx-sb-main{gap:4px}
  .spx-score{font-size:23px;min-width:28px}
  .spx-team img{width:34px;height:34px}
  .spx-tnt-p{font-size:14px}
  .spx-tnt-cell{width:27px;font-size:18px}
  .spx-tnt-p img,.spx-tnt-p .spx-flag-sm{width:22px;height:22px}
}
.spx-mid{text-align:center;min-width:84px}
.spx-vs{font-size:12px;color:var(--text-muted);font-weight:700}
.spx-start{font-size:12.5px;font-weight:600;color:var(--text)}
.spx-cd{font-size:11px;color:var(--text-muted)}
.spx-ph{font-size:12px;color:var(--text-muted);font-weight:700}
.spx-clock{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.spx-livechip{display:inline-flex;align-items:center;gap:5px;background:var(--red-soft);color:var(--red);font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 8px;letter-spacing:.05em}
.spx-livechip.sm{font-size:9.5px;padding:1px 6px}
.spx-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:spxPulse 1.4s infinite}
@keyframes spxPulse{0%,100%{opacity:1}50%{opacity:.35}}
.spx-ctx{border-top:1px solid var(--border);padding:9px 14px;font-size:12px;color:var(--text-muted)}
.spx-ctx summary{cursor:pointer;font-weight:600;color:var(--text);font-size:12px}
.spx-ctx p{margin-top:6px;line-height:1.55}

/* ── sections — #342 PM-parity market cards ── */
.spx-wrap{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
/* market-category toggler (Game Lines / Exact Score / Halves / Corners / Goals / …) */
.spx-cattabs{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);margin-bottom:3px}
.spx-cattabs::-webkit-scrollbar{display:none}
.spx-cattab{background:none;border:none;border-radius:0;color:var(--text-muted);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;padding:9px 0;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.spx-cattab:hover{color:var(--text)}
.spx-cattab.on{color:var(--text);border-bottom-color:var(--text)}
.spx-catgroup{display:flex;flex-direction:column;gap:11px}
.spx-catgroup[hidden]{display:none}

/* market card: title + reg-time chip + volume start-side, price pills end-side (PM) */
.spx-mcard{border:1px solid var(--border);border-radius:13px;background:transparent;padding:13px 15px}
.spx-mc-h{display:flex;align-items:center;gap:12px}
.spx-mc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.spx-mc-t1{display:flex;align-items:center;gap:8px;min-width:0}
.spx-mc-t1 b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spx-regtime{flex:none;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:5px;padding:1px 6px;white-space:nowrap}
.spx-mc-vol{font-size:11px;color:var(--text-muted)}
.spx-mc-b{display:flex;align-items:center;gap:8px;flex:none}
.spx-mc-b .spx-mlcell{flex:0 0 auto;min-width:0}
.spx-mc-rows{margin-top:4px}
.spx-mcard.spx-list{padding-top:5px;padding-bottom:5px}
/* #1307 (operator): the whole market area is the expand tap target — signal it with a pointer
   cursor + a subtle hover on the card, and rotate the affordance chevron when its drill is open. */
.spx-mcard,.spx-mlcell,.spx-prow,.spx-pick{cursor:pointer}
.spx-mcard:hover{border-color:color-mix(in srgb,var(--text-muted) 55%,var(--border))}
/* drill open state: rotate the card's chevron (mirrors market.php's row/pick rules) */
.spx-mcard.spx-active{border-color:var(--pm-accent,#2563eb)}
.spx-mcard.spx-active .spx-mexp{transform:rotate(180deg);color:var(--pm-accent,#2563eb)}

/* PM price pill: small uppercase label + bold price ("ESP 74.75¢" / "YES 42¢") */
.spx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);border-radius:9px;background:var(--bg-secondary);padding:8px 14px;min-width:96px;cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 color-mix(in srgb,#000 25%,transparent);transition:filter .15s,transform .08s}
.spx-btn:hover{filter:brightness(1.12)}
.spx-btn:active{transform:translateY(1px);box-shadow:none}
.spx-btn em{font-style:normal;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.spx-btn b{font-size:13.5px;font-weight:800;color:var(--text);white-space:nowrap}
.spx-btn.sm{min-width:84px;padding:6px 12px}
/* team-colored fill (moneyline), white text like PM mobile */
.spx-btn.tc{background:var(--tc,var(--bg-secondary));border-color:transparent}
.spx-btn.tc em,.spx-btn.tc b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* moneyline cell: pill + its drill chevron beneath */
.spx-mlcell{display:flex;flex-direction:column;align-items:center;gap:3px}

/* selected-line duo (client-rendered into the card header) */
.spx-duo{display:flex;gap:8px;align-items:center}

/* PM line strip: hairline, ‹ › nav, gray line values, active = bold + ▼ marker */
.spx-strip{display:flex;align-items:center;gap:2px;border-top:1px solid var(--border);margin-top:12px;padding-top:3px}
.spx-snav{flex:none;border:none;background:none;color:var(--text-muted);cursor:pointer;padding:8px;font-size:11px}
.spx-snav:hover{color:var(--text)}
.spx-schips{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;padding-top:6px;min-width:0}
.spx-schips::-webkit-scrollbar{display:none}
/* center when the lines fit, scroll cleanly when they overflow */
.spx-lchip:first-child{margin-inline-start:auto}
.spx-lchip:last-child{margin-inline-end:auto}
.spx-lchip{position:relative;flex:0 0 auto;border:none;background:none;padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;cursor:pointer;font-family:inherit;direction:ltr}
.spx-lchip:hover{color:var(--text)}
.spx-lchip.on{color:var(--text);font-weight:800}
.spx-lchip.on::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--accent)}

/* rows inside a card (exact score, corners extras, player props) */
.spx-prow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.spx-prow:last-child{border-bottom:0}
.spx-pn{flex:1;min-width:0}
.spx-pn b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.spx-pn span{font-size:11px;color:var(--text-muted)}
/* #342 player-prop selector row: threshold chips under the name, ONE Yes/No pair beside */
.spx-prow .spx-chips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 2px}
.spx-prow .spx-chips::-webkit-scrollbar{display:none}
.spx-prow .spx-chips .spx-lchip{border:1px solid var(--border);border-radius:8px;padding:4px 10px}
.spx-prow .spx-chips .spx-lchip:first-child{margin-inline-start:0}
.spx-prow .spx-chips .spx-lchip:last-child{margin-inline-end:0}
.spx-prow .spx-chips .spx-lchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.spx-prow .spx-chips .spx-lchip.on::before{display:none}
.spx-pduo{flex:0 0 auto;display:flex;gap:9px;align-items:center}

/* Mobile: PM stacks the card — title block, then full-width buttons, then the strip */
@media(max-width:768px){
  .spx-mc-h{flex-wrap:wrap;row-gap:9px}
  .spx-mc-b{flex:1 1 100%}
  .spx-mc-b .spx-mlcell{flex:1;min-width:0}
  .spx-mlcell .spx-btn{width:100%;min-width:0}
  .spx-mc-b>.spx-btn{flex:1;min-width:0}
  .spx-mc-b .spx-duo{flex:1 1 100%}
  .spx-duo{flex:1 1 100%}
  .spx-duo .spx-btn{flex:1;min-width:0}
  .spx-btn{padding:8px 8px;gap:5px;min-width:0}
  .spx-btn em{max-width:none}
  .spx-prow{flex-wrap:wrap;row-gap:8px}
  .spx-prow .spx-pn{flex:1 1 100%;order:0}
  .spx-prow .spx-pn b{white-space:normal;overflow:visible;text-overflow:clip}
  .spx-prow .spx-btn{order:1;flex:1;min-width:0}
  .spx-prow .spx-mexp{order:2;align-self:center}
  .spx-pduo{order:1;flex:1 1 100%}
  .spx-pduo .spx-btn{flex:1}
}

/* ── listing game card ── */
/* NOTE: base .market-card has NO padding (its standard inner sections pad
   themselves) — the game card must bring its own. flex column + centered so it
   matches sibling card heights in any .markets-grid. */
.spx-card{display:flex;flex-direction:column;justify-content:center;padding:13px 15px;text-decoration:none;color:inherit;min-height:120px}
.spx-card:hover{text-decoration:none}
.spxc-top{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);margin-bottom:9px}
.spxc-lg{font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.spxc-when{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.spxc-final{font-weight:700}
.spxc-grid{display:flex;align-items:center;gap:12px}
.spxc-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.spxc-trow{display:flex;align-items:center;gap:8px;min-width:0}
.spxc-trow img{width:22px;height:22px;object-fit:contain;flex:none}
.spxc-nm{font-weight:600;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spxc-rec{font-size:11px;color:var(--text-muted);flex:none}
.spxc-sc{margin-inline-start:auto;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}
/* #1302: tennis card score is a per-set summary ("6 4 6") — keep it LTR + isolated so the
   digit sequence never reorders inside an RTL card, and tighten it a touch (multiple numbers). */
.spxc-sc-tnt{direction:ltr;unicode-bidi:isolate;font-size:13.5px;letter-spacing:.6px}
.markets-grid .spxc-sc-tnt{font-size:12.5px;letter-spacing:.4px}
.spxc-mls{display:flex;flex-direction:column;gap:6px;flex:none}
.spxc-ml{border:1px solid var(--border);border-radius:8px;padding:4px 10px;min-width:70px;text-align:center;font-weight:800;font-size:12.5px;background:var(--bg-secondary);color:var(--text);position:relative;overflow:hidden;font-variant-numeric:tabular-nums}
.spxc-ml::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--tc,transparent)}
.spxc-ml small{display:block;font-size:9px;color:var(--text-muted);font-weight:700;text-transform:uppercase}
.spxc-foot{margin-top:9px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:12px}
/* card is now a div+cardClick; inner content link stays crawlable + looks unchanged */
.spx-card{cursor:pointer}
.spxc-link{display:block;color:inherit;text-decoration:none}
/* Polymarket affiliate icon in the footer (matches the standard card's mc-ext), pushed to the end */
.spxc-foot .spxc-ext{margin-inline-start:auto;color:var(--text-muted);font-size:13px;line-height:1}
.spxc-foot .spxc-ext:hover{color:var(--text)}

/* compact treatment inside dense card grids (similar markets, browse, home) */
.markets-grid .spx-card{padding:12px 13px;min-height:112px}
.markets-grid .spxc-trow img{width:18px;height:18px}
.markets-grid .spxc-nm{font-size:12.5px}
.markets-grid .spxc-rec{display:none}
.markets-grid .spxc-ml{min-width:56px;padding:3px 7px;font-size:11.5px}
.markets-grid .spxc-ml small{font-size:8.5px}
.markets-grid .spxc-grid{gap:8px;flex-direction:column;align-items:stretch}
/* grid match cards: both teams side-by-side, 50/50, each centered in its half
   (space around, not jammed to the edges); long names ellipsis-safe - owner Jun 14 */
.markets-grid .spxc-teams{flex-direction:row;align-items:center;justify-content:space-around;gap:10px;padding:2px 4px}
.markets-grid .spxc-trow{flex:1 1 0;min-width:0;justify-content:center;gap:7px}
.markets-grid .spxc-trow:last-child{flex-direction:row-reverse}
.markets-grid .spxc-nm{font-size:14px;font-weight:700;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.markets-grid .spxc-trow img{flex:none}
.markets-grid .spxc-trow .spxc-sc{flex:none;margin-inline-start:4px}
.markets-grid .spxc-mls{flex-direction:row}
.markets-grid .spxc-mls .spxc-ml{flex:1;min-width:0}
/* #146: padding-top guarantees a clear gap above the footer even when margin-top:auto collapses to 0
   on a full-height card - otherwise the price-button row (esp. the 3-way spxc-mls-row) touches the
   footer line on mobile. 14px balances the row's 10px top gap + the 14px spxc-top gap. */
.markets-grid .spxc-foot{font-size:10.5px;margin-top:auto;padding-top:14px}
.markets-grid .spxc-top{margin-bottom:14px}

/* Live match cards: subtle, elegant red glow + slow pulse */
.spx-card.spx-live{
  border-color:color-mix(in srgb,#e6394a 38%,var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb,#e6394a 20%,transparent),0 0 16px -7px color-mix(in srgb,#e6394a 55%,transparent);
  animation:spxLiveGlow 2.8s ease-in-out infinite;
}
.spx-card.spx-live:hover{border-color:color-mix(in srgb,#e6394a 55%,var(--border))}
@keyframes spxLiveGlow{
  0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,#e6394a 18%,transparent),0 0 13px -8px color-mix(in srgb,#e6394a 50%,transparent)}
  50%{box-shadow:0 0 0 1px color-mix(in srgb,#e6394a 30%,transparent),0 0 22px -5px color-mix(in srgb,#e6394a 72%,transparent)}
}
@media(prefers-reduced-motion:reduce){.spx-card.spx-live{animation:none}}

@media(max-width:560px){
  .spx-sb-main{padding:11px 10px;gap:5px}
  .spx-team img{width:32px;height:32px}
  .spx-score{font-size:22px;min-width:26px}
  .spx-mid{min-width:64px}
  .spx-mlnm{font-size:11px}
  .spx-mlpx{font-size:15px}
  .spxc-ml{min-width:60px;padding:3px 7px}
}

/* 3-way (soccer) cards: ML as full-width bottom row [away | draw | home] */
.spxc-mls-row{flex-direction:row;margin-top:10px;gap:8px}
.spxc-mls-row .spxc-ml{flex:1;min-width:0}
.markets-grid .spxc-mls-row .spxc-ml{min-width:0}

.spx-flag-sm{width:16px;height:16px;border-radius:3px;vertical-align:-2px;margin-inline-end:6px}

.spx-tlink{color:var(--text);text-decoration:none}
.spx-tlink:hover{color:var(--accent);text-decoration:underline}

/* ==== #949/#848v2: desktop odds-cell symmetry (game pages) ====
   Polymarket-style symmetric alignment (operator 2026-07-06): every card's
   button GROUP is one fixed width, so whether a market has 2 buttons (duos,
   yes/no pairs) or 3 (moneyline), they all START on the same x line - the
   buttons just split the group equally. Buttons stay SEPARATE rounded pills
   (base 8px gaps) - NOT joined. Desktop only - the <=768px rules above already
   stretch cells full-width with no min-width. The three group shapes inside
   .spx-mc-b: a direct .spx-btn pair, 3x .spx-mlcell, or a single client-rendered
   .spx-duo - each splits the fixed group width equally (#851: no expand chevron). */
@media (min-width:769px){
  .spx-mc-h{ --spx-groupw:356px; }
  .spx-mc-b{ flex:0 0 var(--spx-groupw); max-width:var(--spx-groupw); }
  .spx-mc-b > .spx-btn,
  .spx-mc-b > .spx-mlcell,
  .spx-mc-b > .spx-duo{ flex:1 1 0; min-width:0; }
  .spx-mc-b .spx-mlcell .spx-btn{ width:100%; min-width:0; }
  .spx-duo .spx-btn{ flex:1 1 0; min-width:0; }
  /* player-prop rows (expanded body): uniform separate pair */
  .spx-prow > .spx-btn.sm{ flex:0 0 104px; min-width:104px; }
}
/* narrower desktop column: shrink the shared group width, alignment holds */
@media (min-width:769px) and (max-width:1150px){
  .spx-mc-h{ --spx-groupw:300px; }
}

/* #1319 — spx (sports) buy buttons: a11y focus ring, disabled, + mobile tactile.
   Base is already tactile (2px drop-shadow + :active depress); add the missing
   focus/disabled states and, on touch, kill the latched :hover + firm the press. */
.spx-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.spx-btn:focus-visible{outline:2px solid var(--accent,#315eff);outline-offset:2px}
.spx-btn:disabled,.spx-btn.is-disabled{opacity:.45;cursor:not-allowed;filter:saturate(.55);pointer-events:none;box-shadow:none}
@media (hover:none),(pointer:coarse){
  .spx-btn:hover{filter:none}
  .spx-btn:active{transform:translateY(1px) scale(.965);filter:brightness(1.06);box-shadow:none}
}