/* Live game page (#/live/<id>) and the live card's links. Uses the shared tokens; no new colours. */
.lteams { display: block; color: inherit; text-decoration: none; border-radius: var(--r-md); margin: 0 -6px; padding: 0 6px; transition: background var(--t-fast) var(--ease); }
.lteams:hover { background: rgba(255,255,255,.03); }
.lteams:focus-visible, .lopen:focus-visible { outline: 2px solid var(--focus, var(--green)); outline-offset: 2px; }
.lopen { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 12px; border-radius: var(--r-md);
  background: var(--s2); color: var(--t1); font-weight: 700; font-size: var(--fs-14); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.lopen:hover { background: var(--surface-3, var(--s2)); transform: translateY(-1px); }
.lcard.is-live .lopen { box-shadow: inset 0 0 0 1px var(--red-line); }
.lopen span { color: var(--t3); font-size: var(--fs-16); }

#lgBox { animation: lgIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes lgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lg-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lg-col { display: grid; gap: 14px; min-width: 0; }
.lg-col > .card, .lg-score { margin: 0; padding: 16px 18px; }
.lg-score { margin-bottom: 14px; }
.lg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lg-h h3 { margin: 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.lg-h.sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--b1); }
.lg-note, .lg-empty { margin: 10px 0 0; font-size: var(--fs-12); color: var(--t3); line-height: 1.5; }
.lg-empty { font-size: var(--fs-13); }
.lg-foot { margin: 16px 2px 0; font-size: var(--fs-12); color: var(--t4, var(--t3)); line-height: 1.5; }

/* scoreboard */
.lg-score.is-live { box-shadow: var(--sh-1), inset 0 0 0 1px var(--red-line); }
.lg-top { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.lg-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0 4px; }
.lg-vs { color: var(--t4, var(--t3)); font-size: var(--fs-13); }
.lg-team { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lg-team b { font-size: var(--fs-16); color: var(--t1); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-team small { font-size: var(--fs-12); color: var(--t3); }
.lg-sc { font-size: var(--fs-32); font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1; }
.lg-sc.lose, .lg-team.lose b { color: var(--t3); }
.lg-sit { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; margin-top: 10px; font-size: var(--fs-14); color: var(--t2); }
.lg-sit b { color: var(--t1); font-family: var(--mono); }
.lg-field { display: grid; grid-template-columns: 34px 1fr 34px; align-items: stretch; height: 26px; margin-top: 10px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.lg-field .ez { display: grid; place-items: center; font-style: normal; font-size: var(--fs-11); font-weight: 700; color: var(--t3); background: var(--s2); }
.lg-field .yd { position: relative; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.07) calc(10% - 1px) 10%), rgba(78,238,82,.05); }
.lg-field .yd b { position: absolute; top: 50%; left: var(--p); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(4,8,13,.8);
  transition: left var(--t-slow, .4s) cubic-bezier(.16,1,.3,1); }
.lg-last { margin: 10px 0 0; font-size: var(--fs-13); color: var(--t2); line-height: 1.5; }
.lg-last .k { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 2px; }

/* bets with progress bars */
.lg-tally { font-size: var(--fs-12); color: var(--t3); }
.lg-bet { padding: 11px 0; border-top: 1px solid var(--b1); }
.lg-bet:first-of-type { border-top: 0; padding-top: 2px; }
.lg-bh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.lg-bh .src { grid-column: 1 / -1; } .lg-ch { grid-column: 1; grid-row: 3; }
.lg-bh .src { font-size: var(--fs-11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.lg-bh .src.mine { color: var(--blue); }
.lg-bh .b { font-size: var(--fs-14); color: var(--t1); font-weight: 600; min-width: 0; }
.lg-ch { font-size: var(--fs-12); color: var(--t3); white-space: nowrap; }
.lg-bh .pill { font-size: var(--fs-12); white-space: nowrap; }
.lg-bar { position: relative; height: 8px; margin: 26px 0 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); }
.lg-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--amber); transition: width var(--t-slow, .4s) cubic-bezier(.16,1,.3,1); }
.lg-bar.g .fill { background: var(--green); } .lg-bar.r .fill { background: var(--red); } .lg-bar.n .fill { background: var(--t3); }
.lg-bar .pace { position: absolute; top: 0; bottom: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: currentColor; opacity: .22; color: var(--amber); }
.lg-bar.g .pace { color: var(--green); }
.lg-bar .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--t1); border-radius: 1px; }
.lg-bar .tick small { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font: 600 var(--fs-11)/1 var(--mono); color: var(--t3); white-space: nowrap; }
.lg-bsub { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-12); color: var(--t3); margin-top: 6px; }
.lg-bsub .mono, .lg-bsub b { color: var(--t2); font-variant-numeric: tabular-nums; }
.lg-bet.st-won .lg-bh .b, .lg-bet.st-lost .lg-bh .b { color: var(--t2); }

/* win chance */
.lg-now { font-size: var(--fs-13); color: var(--t2); } .lg-now b { font-size: var(--fs-20); color: var(--t1); margin-right: 2px; }
.lg-chart { position: relative; height: 150px; }
.lg-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-chart .mid { stroke: rgba(255,255,255,.12); stroke-dasharray: 4 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-chart .area { fill: var(--green); opacity: .08; }
.lg-chart .ln { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lg-chart .dot { fill: var(--green); }
.lg-chart .lab { position: absolute; left: 0; font: 600 var(--fs-11)/1 var(--mono); color: var(--t3); pointer-events: none; }
.lg-chart .lab.t { top: 0; } .lg-chart .lab.b { bottom: 0; }

/* team stats */
.lg-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--t3); }
.lg-key i { display: inline-block; width: 10px; height: 4px; border-radius: 2px; } .lg-key i.a, .lg-st .sp i.a { background: var(--blue); } .lg-key i.h, .lg-st .sp i.h { background: var(--green); }
.lg-key i.h { margin-left: 6px; }
.lg-st { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; gap: 10px; padding: 7px 0; }
.lg-st .v { font-size: var(--fs-14); color: var(--t3); font-variant-numeric: tabular-nums; } .lg-st .v.r { text-align: right; } .lg-st .v.lg-hi { color: var(--t1); font-weight: 700; }
.lg-st .mid small { display: block; text-align: center; font-size: var(--fs-12); color: var(--t3); margin-bottom: 4px; }
.lg-st .sp { display: flex; gap: 3px; height: 4px; } .lg-st .sp i { border-radius: 2px; opacity: .85; min-width: 2px; }

/* players */
.lg-seg { margin: 0 0 8px; }
.lg-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.lg-tbl th, .lg-tbl td { padding: 8px 4px; border-top: 1px solid var(--b1); text-align: left; font-weight: 500; }
.lg-tbl thead th { border-top: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; color: var(--t3); }
.lg-tbl .n { text-align: right; width: 46px; font-variant-numeric: tabular-nums; color: var(--t2); }
.lg-tbl tbody th { color: var(--t1); }
.lg-tbl tbody th small { display: block; font-size: var(--fs-11); color: var(--t3); }
.lg-tbl .pn { display: inline-flex; align-items: center; gap: 6px; }
.inbet { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* scoring + drive */
.lg-sp, .lg-plays { list-style: none; margin: 0; padding: 0; }
.lg-sp li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--b1); font-size: var(--fs-13); }
.lg-sp li:first-child { border-top: 0; }
.lg-sp .when { font-size: var(--fs-12); color: var(--t3); grid-row: span 2; }
.lg-sp .kind { font-size: var(--fs-12); font-weight: 700; color: var(--t2); } .lg-sp .kind.td { color: var(--green); }
.lg-sp .sc { grid-row: span 2; align-self: center; color: var(--t1); font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-sp .txt { color: var(--t3); line-height: 1.45; }
.lg-dd { font-size: var(--fs-12); color: var(--t3); }
.lg-plays li { padding: 7px 0 7px 14px; border-left: 2px solid var(--b2); font-size: var(--fs-13); color: var(--t2); line-height: 1.45; }
.lg-plays li:first-child { border-left-color: var(--amber); color: var(--t1); }

/* loading */
.lg-skel { display: grid; gap: 10px; padding: 18px; }
.lg-skel span { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--s2), rgba(255,255,255,.07), var(--s2)); background-size: 200% 100%; animation: lgShim 1.2s linear infinite; }
.lg-skel span:nth-child(1) { height: 40px; } .lg-skel span:nth-child(3) { width: 60%; }
@keyframes lgShim { to { background-position: -200% 0; } }

@media (max-width: 860px) { .lg-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .lg-col > .card, .lg-score { padding: 14px; }
  .lg-sc { font-size: var(--fs-32); } .lg-teams { gap: 8px; }
  .lg-team .logo.lg { width: 36px; height: 36px; }
  .lg-tbl .n { width: 38px; }
}
@media (prefers-reduced-motion: reduce) { #lgBox, .lg-skel span { animation: none; } .lg-bar .fill, .lg-field .yd b { transition: none; } }

/* win chance with only the current number (no history yet) */
.lg-split { display: flex; gap: 3px; height: 10px; margin-top: 4px; }
.lg-split i { border-radius: 5px; min-width: 4px; transition: width var(--t-slow, .4s) cubic-bezier(.16,1,.3,1); }
.lg-split i.a { background: var(--blue); } .lg-split i.h { background: var(--green); }
.lg-splitl { display: flex; justify-content: space-between; margin-top: 6px; font: 600 var(--fs-12)/1.2 var(--mono); color: var(--t2); }
@media (prefers-reduced-motion: reduce) { .lg-split i { transition: none; } }
.lk-wrap { margin: 0 0 14px; }
/* scoring rows: time | kind over text | score (explicit, so long text never pushes the score to a new row) */
.lg-sp .when { grid-column: 1; grid-row: 1 / span 2; }
.lg-sp .kind { grid-column: 2; grid-row: 1; }
.lg-sp .txt { grid-column: 2; grid-row: 2; }
.lg-sp .sc { grid-column: 3; grid-row: 1 / span 2; }