/* LineScout v4 Premium Board — same tokens as the Claude widgets (see CLAUDE.md) */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--s0); color: var(--t1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-16); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 140px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--t3); }

/* header */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: var(--fs-13); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
h1 { font-size: var(--fs-24); font-weight: 700; margin: 6px 0 0; letter-spacing: -.01em; }
.meta { font-size: var(--fs-13); color: var(--t3); text-align: right; line-height: 1.6; }
.meta .warnc { color: var(--amber); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; color: var(--t2);
  padding: 6px 12px; border: 1px solid var(--b1); border-radius: var(--r-pill); background: var(--s1); margin-bottom: 14px; }
.back:hover { border-color: var(--b2); }

.banner { border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-14); margin-bottom: 14px; border: 1px solid; }
.banner.warn { background: var(--amber-dim); border-color: var(--amber-line); color: var(--amber); }

/* cards */
.card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(0,0,0,.4);
  margin-bottom: 12px; animation: enter .35s var(--ease) both; overflow: hidden; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card-h { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-t { font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.card-r { font-size: var(--fs-13); color: var(--t4); text-align: right; }
.card-b { padding: 0 16px 14px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: var(--fs-13); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--b1); }
.accent-g { border-left: 3px solid var(--green); }
.accent-a { border-left: 3px solid var(--amber); }

/* logos */
.logos { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.logo { width: 32px; height: 32px; border-radius: var(--r-md); border: 1px solid var(--b1); background: var(--s2); object-fit: cover; }
.logo.sm { width: 24px; height: 24px; border-radius: var(--r-sm); }
.logo.lg { width: 44px; height: 44px; border-radius: var(--r-md); }
.at { font-size: var(--fs-13); color: var(--t4); }

/* chips / pills */
.chip { font-family: var(--mono); font-size: var(--fs-13); color: var(--t2); padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--b1); background: var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.chips .sep { width: 1px; height: 18px; background: var(--b2); margin: 0 4px; }
.fchip { font-size: var(--fs-14); font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--b1);
  background: var(--s1); color: var(--t2); cursor: pointer; transition: all .2s var(--ease); }
.fchip:hover { border-color: var(--b2); }
.fchip.on { background: var(--t1); color: var(--s0); border-color: var(--t1); }
.pill { display: inline-block; font-size: var(--fs-13); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid;
  text-align: center; white-space: nowrap; }
.pill.prop, .pill.g { color: var(--green); background: var(--green-dim); border-color: var(--green-line); }
.pill.line, .pill.b { color: var(--blue); background: var(--blue-dim); border-color: var(--blue-line); }
.pill.td, .pill.q, .pill.a { color: var(--amber); background: var(--amber-dim); border-color: var(--amber-line); }
.pill.sys, .pill.out, .pill.r { color: var(--red); background: var(--red-dim); border-color: var(--red-line); }
.pill.n { color: var(--t3); background: var(--s2); border-color: var(--b2); }

/* top plays strip */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.tp { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 12px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); animation: enter .35s var(--ease) both; transition: transform .2s var(--ease), border-color .2s; position: relative; }
.tp:hover { transform: translateY(-1px); border-color: var(--b2); }
.tp.sel { box-shadow: inset 3px 0 0 var(--green), 0 4px 16px rgba(0,0,0,.5); }
.tp .l1 { display: flex; align-items: center; justify-content: space-between; }
.tp .big { font-family: var(--mono); font-size: var(--fs-32); font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tp .big small { font-size: var(--fs-14); font-weight: 600; color: var(--t3); margin-left: 6px; }
.tp .bet { margin-top: 2px; }
.tp .why { margin-top: 4px; }

/* game card */
.gh { padding: 14px 16px 10px; display: flex; align-items: center; gap: 12px; }
.gh .grow { flex: 1; min-width: 0; }
.gh .name { font-weight: 600; font-size: var(--fs-16); }
.gh .sub { font-size: var(--fs-13); color: var(--t3); }
.gfoot { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 12px; border-top: 1px solid var(--b1); }
.linkbtn { font-size: var(--fs-14); font-weight: 600; color: var(--t2); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.linkbtn:hover { color: var(--t1); }
.linkbtn.go { color: var(--green); }

/* pick rows */
.row { display: grid; grid-template-columns: 70px 1fr 96px 64px 28px; gap: 10px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--b1); cursor: pointer; transition: background .15s; position: relative; }
.row:hover { background: rgba(255,255,255,.02); }
.row.sel { box-shadow: inset 3px 0 0 var(--green); background: rgba(78,238,82,.03); }
.bet { font-size: var(--fs-16); color: var(--t1); font-weight: 600; }
.why { font-size: var(--fs-13); color: var(--t3); margin-top: 1px; }
.prob { display: flex; flex-direction: column; gap: 4px; }
.bar { height: 4px; border-radius: 4px; background: var(--b1); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; }
.pct { font-family: var(--mono); font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.odds { font-family: var(--mono); font-size: var(--fs-14); color: var(--t2); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.odds small { display: block; font-size: var(--fs-13); color: var(--t4); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.add { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--b2); display: grid; place-items: center;
  font-size: var(--fs-14); color: var(--t3); background: none; cursor: pointer; padding: 0; }
.sel .add, .tp.sel .add { background: var(--green); border-color: var(--green); color: var(--s0); font-weight: 800; }
.whybtn { font-size: var(--fs-13); color: var(--t4); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.reasons { display: none; grid-column: 2 / -1; margin: 2px 0 0; padding: 8px 10px; list-style: none; border-radius: var(--r-md);
  background: var(--s2); font-size: var(--fs-14); color: var(--t2); }
.reasons li { padding: 2px 0; }
.reasons li::before { content: "· "; color: var(--green); }
.row.open .reasons { display: block; }

/* generic tables */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.tbl th { text-align: left; font-size: var(--fs-13); font-weight: 700; color: var(--t3); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px 6px 0; border-bottom: 1px solid var(--b1); }
.tbl td { padding: 7px 8px 7px 0; border-top: 1px solid var(--b1); color: var(--t2); vertical-align: top; }
.tbl tr:first-child td { border-top: 0; }
.tbl .n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl th.n { text-align: right; }
.tbl td.b { color: var(--t1); font-weight: 600; }
.scroll { overflow-x: auto; }

/* facts */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--b1); font-size: var(--fs-16); color: var(--t2); }
.facts li:first-child { border-top: 0; }
.facts .pill { flex-shrink: 0; min-width: 40px; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tiles.t3 { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 10px 12px; }
.tile .l { font-size: var(--fs-13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.tile .v { font-family: var(--mono); font-size: var(--fs-20); font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .s { font-size: var(--fs-13); color: var(--t3); }

.says td:first-child { color: var(--t1); font-weight: 600; width: 34%; }
.says .trust { display: block; font-size: var(--fs-13); color: var(--t3); font-weight: 400; }

/* hero */
.hero { padding: 18px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero .grow { flex: 1; min-width: 180px; }
.hero h2 { margin: 0; font-size: var(--fs-20); font-weight: 700; }
.hero .sub { font-size: var(--fs-14); color: var(--t3); margin-top: 2px; }

/* jump nav on game page */
.jump { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a { font-size: var(--fs-14); font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--b1); background: var(--s1); color: var(--t2); white-space: nowrap; }

/* form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 10px 12px; }
.team b { font-size: var(--fs-16); }
.rec { font-family: var(--mono); font-size: var(--fs-14); color: var(--t2); margin-top: 4px; }
.dots { display: flex; gap: 4px; margin-top: 8px; }
.dot { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: var(--fs-13); font-weight: 700; }
.dot.W { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-line); }
.dot.L { background: var(--red-dim); color: var(--red); border: 1px solid var(--red-line); }
.dot.T { background: var(--s0); color: var(--t3); border: 1px solid var(--b2); }

/* comparison bars (outside views, splits) */
.cmp { display: grid; grid-template-columns: 110px 1fr 46px; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--fs-14); color: var(--t2); }
.cmp .track { height: 8px; border-radius: var(--r-sm); background: var(--s2); overflow: hidden; display: flex; }
.cmp .track i { display: block; height: 100%; }
.cmp .v { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* parlays */
.parlay { padding: 12px 16px; border-top: 1px solid var(--b1); }
.parlay ol { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-14); color: var(--t2); }

.bottom p { margin: 0 0 8px; color: var(--t2); font-size: var(--fs-16); }
.empty { padding: 28px 16px; text-align: center; color: var(--t3); font-size: var(--fs-16); }
.foot { margin-top: 18px; font-size: var(--fs-13); color: var(--t4); line-height: 1.7; }
.foot div::before { content: "· "; }

/* bet slip */
#slip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
.slip { pointer-events: auto; max-width: 760px; margin: 0 auto; background: rgba(16,25,42,.86);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--b2); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); animation: enter .35s var(--ease) both; }
.slip-h { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.slip-h b { font-size: var(--fs-16); }
.slip .tiles { margin: 10px 0; }
.slip .tile .v { font-size: var(--fs-20); }
.legs { list-style: none; margin: 0 0 10px; padding: 0; max-height: 32vh; overflow: auto; }
.legs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--b1); font-size: var(--fs-14); color: var(--t2); }
.legs li:first-child { border-top: 0; }
.legs .x { background: none; border: 0; color: var(--t4); cursor: pointer; font-size: var(--fs-16); padding: 0 2px; }
.slip-a { display: flex; gap: 8px; align-items: center; }
.btn { border-radius: var(--r-md); padding: 10px 14px; font-weight: 700; font-size: var(--fs-16); border: 1px solid var(--b2); background: none; cursor: pointer; }
.btn.primary { flex: 1; border: 0; color: var(--s0); background: linear-gradient(135deg, var(--win), #1FAF2E); }
.slip .note { font-size: var(--fs-13); color: var(--t4); margin-top: 8px; }
.slip.min .body { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--t1); color: var(--s0);
  font-size: var(--fs-14); font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); transition: all .3s var(--ease); z-index: 30; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px 6px; }
  .strip::-webkit-scrollbar { display: none; }
  .tp { scroll-snap-align: start; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles.t3 { grid-template-columns: repeat(3, 1fr); }
  .form { grid-template-columns: 1fr; }
  .row { grid-template-columns: 56px 1fr 66px 54px 26px; gap: 7px; padding: 10px 12px; }
  .top { flex-direction: column; align-items: flex-start; }
  .meta { text-align: left; }
  .cmp { grid-template-columns: 86px 1fr 42px; }
}

/* ---------- desktop: full-width layout with a sticky sidebar ---------- */
.slip-dock { display: none; }
.empty-slip b { font-size: var(--fs-16); }
@media (min-width: 1100px) {
  .wrap { max-width: 1360px; padding: 28px 32px 48px; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .main { order: 1; min-width: 0; }
  .side { order: 2; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
  .side .divider:first-child { margin-top: 0; }
  .side .strip { grid-template-columns: 1fr; }
  .games { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .games .card { margin: 0; }
  .games .divider { grid-column: 1 / -1; margin: 14px 0 2px; }
  .games .divider:first-child { margin-top: 4px; }
  #slip { display: none; }
  .slip-dock { display: block; margin-top: 12px; }
  .slip-dock .slip { border-radius: var(--r-lg); border-bottom: 1px solid var(--b2); padding: 14px; animation: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
  .slip-dock .slip.min .body { display: block; }
  .slip-dock .slip-h { cursor: default; }
  .slip-dock .legs { max-height: 26vh; }
  .side .jump { flex-direction: column; overflow: visible; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 8px; gap: 2px; }
  .side .jump a { border: 0; background: none; border-radius: var(--r-sm); padding: 7px 10px; }
  .side .jump a:hover { background: var(--s2); color: var(--t1); }
}

/* ---------- polish: accessibility + focus + motion ---------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.add { position: relative; }
.add::after { content: ""; position: absolute; inset: -11px; }   /* 44px tap area around the 22px button */
.fchip { min-height: 36px; }

/* #1 top play: accent rule + label, no glow */
.tp.first { border-color: var(--green-line); }
.tp .rank { font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.tp .rank.n { color: var(--t3); }

/* bookmaker micro-badge */
.bk { display: inline-block; font-size: var(--fs-13); font-weight: 600; color: var(--t2); padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--s2); border: 1px solid var(--b1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.odds .bk { margin-top: 3px; }
.kick { font-size: var(--fs-13); color: var(--t3); }
.edge { color: var(--green); font-weight: 700; }

@media (min-width: 1100px) {
  .games .divider { display: none; }            /* cards flow two across in kickoff order; each card shows its time */
  .games .row > div:nth-child(2) { min-width: 0; }
  .games .row .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .games .row .reasons { white-space: normal; }
}

/* ---------- brand bar ---------- */
.brand { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -18px -16px 16px; padding: 12px 16px; background: rgba(4,8,13,.78);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--b1); }
.brandlink { display: flex; align-items: center; gap: 12px; }
.bm { height: 40px; width: auto; display: block; }
.bw { display: flex; flex-direction: column; gap: 5px; }
.bw img { height: 20px; width: auto; display: block; }
.tag { font-size: var(--fs-13); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--t3); white-space: nowrap; }
.tag b { color: var(--green); font-weight: 700; }
.brand .meta { text-align: right; }
@media (max-width: 600px) {
  .bm { height: 32px; }
  .bw img { height: 16px; }
  .tag { font-size: var(--fs-13); letter-spacing: .14em; }
  .brand .meta { display: none; }   /* on phones the meta moves below the bar */
  .brand + .mmeta { display: block; }
}
@media (min-width: 1100px) {
  .brand { margin: -28px -32px 20px; padding: 14px 32px; }
  .bm { height: 46px; }
  .bw img { height: 22px; }
  .side { top: 96px; max-height: calc(100vh - 116px); }
}
.mmeta { display: none; font-size: var(--fs-13); color: var(--t3); margin: -6px 0 12px; }
.mmeta .warnc, .meta .warnc { color: var(--amber); }

/* week summary strip */
.summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.st { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.4);
  animation: enter .35s var(--ease) both; }
.st .l { font-size: var(--fs-13); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.st .v { font-family: var(--mono); font-size: var(--fs-24); font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.st .s { font-size: var(--fs-13); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .summary { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 16px; padding: 0 16px 4px; }
  .summary::-webkit-scrollbar { display: none; }
  .st .v { font-size: var(--fs-24); }
}

/* game overview card */
.overview .card-b { padding-top: 2px; }
.ov-h { margin: 0 0 6px; font-size: var(--fs-20); font-weight: 700; letter-spacing: -.01em; }
.ov-p { margin: 0 0 12px; font-size: var(--fs-16); color: var(--t2); line-height: 1.55; max-width: 72ch; }
.ov-p b { color: var(--t1); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ov-list { display: grid; grid-template-columns: 116px 1fr; gap: 8px 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--b1); font-size: var(--fs-16); }
.ov-list dt { font-size: var(--fs-13); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding-top: 2px; }
.ov-list dd { margin: 0; color: var(--t2); line-height: 1.7; }
.ov-list .pill { margin-right: 2px; }
.ov-more { margin-top: 12px; border-top: 1px solid var(--b1); padding-top: 10px; }
.ov-more summary { cursor: pointer; font-size: var(--fs-14); font-weight: 600; color: var(--t3); list-style: none; min-height: 32px; display: flex; align-items: center; }
.ov-more summary::-webkit-details-marker { display: none; }
.ov-more summary::before { content: "▸"; margin-right: 8px; transition: transform .2s var(--ease); }
.ov-more[open] summary::before { transform: rotate(90deg); }
.ov-more ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-14); color: var(--t3); line-height: 1.6; }
@media (max-width: 600px) { .ov-list { grid-template-columns: 1fr; gap: 2px; } .ov-list dd { margin-bottom: 8px; } }

/* tap = why, + = slip */
.row { cursor: default; }
.row.tappable { cursor: pointer; }
.row .whybtn { cursor: pointer; }
.row.open .whybtn { color: var(--t2); }
.subh { font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3);
  padding: 14px 16px 6px; border-top: 1px solid var(--b1); }
.subh:first-child { border-top: 0; padding-top: 2px; }
.tp { cursor: pointer; }
.tp .reasons { grid-column: auto; margin-top: 8px; }
.tp.open .reasons { display: block; }
.tp-a { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tp .add { width: 26px; height: 26px; }

/* week switcher */
.weektabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-lg); }
.wtab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 16px; min-height: 44px; border: 0; border-radius: var(--r-md);
  background: none; cursor: pointer; text-align: left; transition: background .2s var(--ease), color .2s var(--ease); }
.wtab .wl { font-size: var(--fs-16); font-weight: 700; color: var(--t2); }
.wtab .wn { font-size: var(--fs-13); color: var(--t3); font-family: var(--mono); }
.wtab:hover { background: var(--s2); }
.wtab.on { background: var(--t1); }
.wtab.on .wl { color: var(--s0); }
.wtab.on .wn { color: #334155; }
.banner.info { background: var(--blue-dim); border-color: var(--blue-line); color: var(--t2); }
@media (max-width: 600px) { .weektabs { display: flex; } .wtab { flex: 1; } }

/* results tab */
.wsel { font: inherit; font-size: var(--fs-13); color: #334155; background: none; border: 0; padding: 0; cursor: pointer; }
.row.graded { grid-template-columns: 70px 1fr 56px 64px 28px; cursor: default; }
.res { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-14); font-weight: 800; }
.res.w { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-line); }
.res.l { background: var(--red-dim); color: var(--red); border: 1px solid var(--red-line); }
.res.p { background: var(--s2); color: var(--t3); border: 1px solid var(--b2); }
.row.graded.loss .bet { color: var(--t2); }
@media (max-width: 600px) { .row.graded { grid-template-columns: 56px 1fr 46px 54px 26px; } }
/* player-lines window toggle */
.wintoggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fchip.sm { font-size: var(--fs-13); padding: 4px 10px; min-height: 30px; }
.res.q { background: var(--s2); color: var(--t3); border: 1px dashed var(--b2); }
.row.graded.pending .bet { color: var(--t2); }
.tbl.rc td .pill { white-space: nowrap; }

/* outside views: tug-of-war bars */
.ov-head { margin: 0 0 12px; font-size: var(--fs-16); color: var(--t2); }
.ov-head b { color: var(--t1); }
.tug-teams { display: flex; justify-content: space-between; font-size: var(--fs-13); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t3); margin: 0 0 6px 152px; }
.tug-teams span { display: flex; align-items: center; gap: 6px; }
.tug-teams b { color: var(--t1); }
.tug { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; padding: 6px 0; }
.tug-l b { display: block; font-size: var(--fs-16); color: var(--t1); }
.tug-l span { display: block; font-size: var(--fs-13); color: var(--t3); }
.tug-bar { position: relative; display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden; background: var(--s2); }
.tug-bar .seg { display: flex; align-items: center; height: 100%; background: rgba(148,163,184,.14); font-style: normal; transition: width .5s var(--ease); }
.tug-bar .seg.r { justify-content: flex-end; }
.tug-bar .seg.fav { background: var(--blue-dim); box-shadow: inset 0 0 0 1px var(--blue-line); }
.tug-bar .seg em { font-style: normal; font-family: var(--mono); font-size: var(--fs-14); font-weight: 700; color: var(--t3); padding: 0 10px; font-variant-numeric: tabular-nums; }
.tug-bar .seg.fav em { color: var(--blue); }
.tug-bar .mid { position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px; background: var(--b2); }
@media (max-width: 600px) {
  .tug { grid-template-columns: 1fr; gap: 4px; }
  .tug-teams { margin-left: 0; }
}

/* player lines: one block per player */
.plines { border-collapse: separate; border-spacing: 0; }
.plines thead th { position: sticky; top: 0; background: var(--s1); }
.plines .pgroup .ph td { padding: 14px 10px 6px; border-top: 1px solid var(--b2); }
.plines .pgroup:first-of-type .ph td { border-top: 0; padding-top: 8px; }
.plines .pgroup:nth-of-type(even) td { background: rgba(255,255,255,.018); }
.plines .pname { font-size: var(--fs-16); font-weight: 700; color: var(--t1); }
.plines .ppos { font-size: var(--fs-13); color: var(--t3); margin-left: 6px; }
.plines .tdchip { margin-left: 10px; font-size: var(--fs-13); font-weight: 700; font-family: var(--mono); color: var(--amber);
  background: var(--amber-dim); border: 1px solid var(--amber-line); border-radius: var(--r-pill); padding: 1px 8px; }
.plines .ps td { border-top: 1px solid var(--b1); padding-top: 6px; padding-bottom: 6px; }
.plines .ps td:first-child { padding-left: 22px; color: var(--t2); }
.plines .pgroup .ps:last-child td { padding-bottom: 12px; }
.plines td { padding-left: 10px; padding-right: 10px; }

/* form & matchup */
.team-h { display: flex; align-items: center; gap: 8px; }
.team-h b { font-size: var(--fs-16); }
.rec-big { margin-left: auto; font-size: var(--fs-20); font-weight: 800; }
.rk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.rk { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 6px 8px; text-align: center; }
.rk .rl { display: block; font-size: var(--fs-13); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.rk .rv { display: block; font-family: var(--mono); font-size: var(--fs-20); font-weight: 800; }
.rk.good { border-color: var(--green-line); } .rk.good .rv { color: var(--green); }
.rk.bad { border-color: var(--red-line); } .rk.bad .rv { color: var(--red); }
.l5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 10px; }
.g5 { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.g5o { font-size: var(--fs-13); color: var(--t2); }
.g5s { font-size: var(--fs-13); color: var(--t3); }
.matchread { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--blue-dim); border: 1px solid var(--blue-line); font-size: var(--fs-14); color: var(--t2); }

/* summary tiles as shortcuts */
@media (min-width: 601px) { .summary.n4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .summary { grid-auto-columns: 64%; } }
.st-btn { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.st-btn:hover { border-color: var(--b2); transform: translateY(-1px); }
.st.stale { border-color: var(--green-line); }
.st .s b { font-family: var(--mono); }
.nextko { font-size: var(--fs-14); color: var(--t3); margin: -4px 0 10px; }
@media (max-width: 600px) { .wtab { padding: 8px 10px; } .wtab .wn { font-size: var(--fs-12); white-space: nowrap; } }

/* ================= phone app experience ================= */
html, body { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, .tp, .st-btn, .fchip, .back, .linkbtn, .jump a { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#tabbar, .sheet-bg, .mweek, .sheet-only { display: none; }
.brand { padding-top: calc(12px + env(safe-area-inset-top)); }
/* press feedback: things you tap dip slightly */
.tp:active, .st-btn:active, .row.tappable:active, .fchip:active, .back:active, .card.game .gh:active, .tb:active { transform: scale(.98); }
.add:active { transform: scale(.88); }
.tp, .st-btn, .fchip, .back, .tb, .add { transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }

@media (max-width: 600px) {
  .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  /* bottom tab bar */
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(4,8,13,.88);
    backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid var(--b1); }
  .tb { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 50px; padding: 6px 0 2px;
    background: none; border: 0; border-radius: var(--r-md); color: var(--t3); font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
  .tb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tb.on { color: var(--t1); }
  .tb.on svg { stroke: var(--green); }
  .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--green); color: var(--s0); font-size: var(--fs-12); font-weight: 800; line-height: 18px; text-align: center; font-family: var(--mono); }
  /* the slip becomes a sheet that slides up from the Slip tab */
  #slip { display: none; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 29; padding: 0 8px; }
  body.slip-open #slip { display: block; }
  body.slip-open .sheet-bg { display: block; position: fixed; inset: 0; z-index: 28; background: rgba(0,0,0,.55); animation: fade .2s ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  #slip .slip { border-radius: var(--r-lg); border-bottom: 1px solid var(--b2); max-height: 72vh; overflow-y: auto; padding: 16px;
    animation: sheetUp .3s var(--ease) both; box-shadow: 0 -8px 40px rgba(0,0,0,.6); }
  #slip .slip.min .body, .slip .body { display: block; }
  #slip .sheet-only { display: block; }
  /* week tabs live in the tab bar on phones; Results gets its own week picker */
  .weektabs { display: none !important; }
  .mweek { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
  .mweek label { font-size: var(--fs-13); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
  .mweek select { flex: 1; font: inherit; font-size: var(--fs-16); color: var(--t1); background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r-md); padding: 10px 12px; }
  /* summary tiles: no stretched empty space */
  .summary { align-items: start; }
  /* game-page section chips stay pinned under the header */
  .jump { position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 12; margin: 0 -16px 12px; padding: 8px 16px;
    background: rgba(4,8,13,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  /* wide tables become labeled rows: nothing runs off the right edge */
  .scroll { overflow-x: visible; }
  .tbl.resp, .tbl.resp tbody, .tbl.resp thead { display: block; width: 100%; }
  .tbl.resp tr:first-child:has(th), .tbl.resp thead { display: none; }
  .tbl.resp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--b1); }
  .tbl.resp td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; background: none !important; min-width: 0; }
  .tbl.resp td::before { content: attr(data-label); display: block; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--t3); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin-bottom: 1px; }
  .tbl.resp td:first-child { grid-column: 1 / -1; font-weight: 700; color: var(--t1); font-size: var(--fs-16); }
  .tbl.resp td:first-child::before { display: none; }
  .tbl.resp td[colspan] { grid-column: 1 / -1; }
  .tbl.resp td[colspan]::before { display: none; }
  .plines .pgroup { display: block; }
  .plines .ph { display: block !important; padding: 14px 0 4px; }
  .plines .ps td:first-child { padding-left: 0 !important; font-size: var(--fs-16); color: var(--t2); }
  .tug-teams { margin-left: 0; }
}
/* installed to the home screen: no browser chrome, so leave room for the status bar */
@media (display-mode: standalone) {
  .brand { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* ---- collapsible sections (phones only), game flipper, skeletons, pull to refresh ---- */
.chev { display: none; }
.cbody { display: block; }
.gnav { display: none; }
@media (max-width: 600px) {
  .brand { justify-content: center; }
  .brand .brandlink { margin: 0 auto; }
  .summary { align-items: stretch; }
  .collapsible .card-h { cursor: pointer; min-height: 48px; }
  .collapsible .chev { display: block; width: 10px; height: 10px; margin-left: 8px; flex-shrink: 0; border-right: 2px solid var(--t3); border-bottom: 2px solid var(--t3);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
  .collapsible.collapsed .chev { transform: rotate(-45deg); }
  .collapsible.collapsed .cbody { display: none; }
  .collapsible.collapsed .card-h { padding-bottom: 14px; }
  .gnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: var(--fs-13); }
  .gnav a { color: var(--t2); padding: 8px 10px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--b1); font-family: var(--mono); font-weight: 700; }
  .gnav a:last-child { justify-self: end; }
  .gpos { text-align: center; color: var(--t3); font-size: var(--fs-13); line-height: 1.2; }
  .gpos small { display: block; font-size: var(--fs-12); color: var(--t4); }
  #app.slide-l { animation: slideL .3s var(--ease) both; }
  #app.slide-r { animation: slideR .3s var(--ease) both; }
  @keyframes slideL { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes slideR { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}
.sk-card { padding: 16px; }
.sk { display: block; height: 14px; margin: 8px 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--s2) 0%, rgba(255,255,255,.07) 50%, var(--s2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-row { display: flex; gap: 12px; align-items: center; }
.sk-row .sk { flex-shrink: 0; }
.st .sk { height: 12px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#ptr { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; z-index: 40; transform: translate(-50%, -60px); opacity: 0;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--b2);
  box-shadow: 0 4px 16px rgba(0,0,0,.5); font-size: var(--fs-13); color: var(--t2); pointer-events: none; transition: opacity .15s; }
#ptr.ready { border-color: var(--green-line); color: var(--t1); }
#ptr .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--b2); border-top-color: var(--green); }
#ptr.loading .spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* swipe between games: the page follows the finger; the next game's name shows at the edge */

#swipehint { position: fixed; top: 50%; z-index: 35; transform: translateY(-50%); opacity: 0; pointer-events: none;
  padding: 10px 14px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--b2); box-shadow: 0 4px 16px rgba(0,0,0,.5);
  font-family: var(--mono); font-size: var(--fs-14); font-weight: 700; color: var(--t1); transition: opacity .1s; }
#swipehint.r { right: 12px; }
#swipehint.l { left: 12px; }

/* the neighbouring game, drawn beside the current one while swiping */
#peek { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; z-index: 5;
  background: var(--s0); pointer-events: none; }
#peek .brand { position: relative; }

/* jumping to a section stops just below the pinned logo bar (and section chips on phones) so its title stays readable */
.card[id] { scroll-margin-top: 96px; }
@media (max-width: 600px) { .card[id] { scroll-margin-top: calc(env(safe-area-inset-top) + 136px); } }
@media (max-width: 600px) { .side { display: contents; } }

/* value spots */
.vrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--b1); cursor: pointer; }
.vrow:first-child { border-top: 0; }
.vrow .pill { justify-self: start; margin-top: 2px; }
.vrow .vwhy { display: none; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--s2); font-size: var(--fs-14); color: var(--t2); }
.vrow.open .vwhy { display: block; }
.clv { font-weight: 700; color: var(--t3); }
.clv.up { color: var(--green); }
.clv.dn { color: var(--red); }
@media (max-width: 600px) { .vrow { grid-template-columns: 1fr auto; } .vrow .pill { grid-column: 1 / -1; } }

/* line shopping: best price vs LineScout's fair price */
.odds.pt-good { color: var(--green); }
.odds.pt-good .bk { border-color: var(--green-line); color: var(--green); }
.odds.pt-bad { color: var(--amber); }
.odds.pt-bad .bk { border-color: var(--amber-line); }

/* sportsbook icons beside book names */
.bk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bkico { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; background: #fff; }

/* ---------- Ask LineScout (chat) ---------- */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 26; display: flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 14px; border-radius: var(--r-pill); border: 1px solid var(--b2); background: rgba(16,25,42,.88);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--t1); font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.chat-fab:hover { transform: translateY(-1px); border-color: var(--green-line); }
.chat-fab svg { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.chat-open .chat-fab { opacity: 0; pointer-events: none; }
.chat { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: 420px; max-width: 100vw; display: flex; flex-direction: column;
  background: rgba(10,17,27,.94); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-left: 1px solid var(--b2); box-shadow: -8px 0 32px rgba(0,0,0,.45);
  transform: translateX(104%); transition: transform .38s var(--ease); visibility: hidden; }
body.chat-open .chat { transform: none; visibility: visible; }
.chat-bg { display: none; }
.chat-h { display: flex; align-items: center; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 14px 14px 20px; border-bottom: 1px solid var(--b1); }
.chat-title { display: flex; align-items: center; gap: 9px; flex: 1; font-size: var(--fs-16); letter-spacing: -.01em; }
.chat-title .live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.chat-scope { font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t3);
  padding: 6px 10px; border: 1px solid var(--b2); border-radius: var(--r-pill); white-space: nowrap; }
.chat-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-md); border: 0; background: none; color: var(--t3); cursor: pointer; }
.chat-x:hover { background: rgba(255,255,255,.05); color: var(--t1); }
.chat-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-body { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.chat-empty { margin: auto 0; text-align: center; padding: 0 12px; animation: cardEnter .35s var(--ease) both; }
.chat-empty img { opacity: .9; margin-bottom: 14px; }
.chat-empty h3 { margin: 0 0 6px; font-size: var(--fs-20); font-weight: 700; letter-spacing: -.02em; color: var(--t1); }
.chat-empty p { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--t3); }
.cm { animation: cardEnter .3s var(--ease) both; font-size: var(--fs-14); line-height: 1.6; color: var(--t2); }
.cm.u { display: flex; justify-content: flex-end; }
.cm.u .bub { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--s2); border: 1px solid var(--b2); color: var(--t1); }
.cm.a { padding-left: 14px; border-left: 2px solid var(--green-line); }
.cm.a p { margin: 0 0 8px; } .cm.a p:last-child { margin-bottom: 0; }
.cm.a ul { margin: 0 0 8px; padding-left: 18px; } .cm.a li { margin: 3px 0; } .cm.a li::marker { color: var(--green); }
.cm.a b { color: var(--t1); font-weight: 700; }
.caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--green); border-radius: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dots { display: flex; gap: 5px; padding: 6px 0; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); animation: dot 1.2s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.chat-sugg button { padding: 9px 13px; border-radius: var(--r-pill); border: 1px solid var(--b2); background: var(--s1); color: var(--t2);
  font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.chat-sugg button:hover { border-color: var(--green-line); color: var(--t1); }
.chat-in { display: flex; gap: 8px; margin: 0 14px; padding: 6px 6px 6px 16px; border-radius: var(--r-lg); border: 1px solid var(--b2); background: var(--s1);
  transition: border-color .2s var(--ease); }
.chat-in:focus-within { border-color: var(--green-line); }
.chat-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--t1); font: 500 16px/1.4 inherit; font-family: inherit; }
.chat-in input::placeholder { color: var(--t4); }
.send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: linear-gradient(135deg, var(--win), #1FAF2E); color: var(--s0); transition: opacity .2s var(--ease), transform .12s var(--ease); }
.send:active { transform: scale(.92); } .send:disabled { opacity: .35; cursor: default; }
.send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-foot { padding: 10px 20px calc(12px + env(safe-area-inset-bottom)); text-align: center; font-size: var(--fs-11); color: var(--t4); }
@media (max-width: 600px) {
  .chat-fab { display: none; }
  .chat { top: auto; left: 0; width: auto; height: calc(100dvh - 56px - env(safe-area-inset-top)); border-left: 0; border-top: 1px solid var(--b2);
    border-radius: 22px 22px 0 0; transform: translateY(104%); padding-bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 29; }
  body.chat-open .chat-bg { display: block; position: fixed; inset: 0; z-index: 28; background: rgba(0,0,0,.55); animation: fade .2s ease both; }
  .chat-h { padding-top: 16px; } .chat-h::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--b2); }
  .chat-foot { padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .chat, .cm, .chat-empty { transition: none; animation: none; } }
@keyframes cardEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* chat answer: bold headline + pick cards drawn from the board */
.cm.a p:first-child b:only-child { display: block; font-size: var(--fs-16); letter-spacing: -.01em; color: var(--t1); }
.cm.a.err { border-left-color: var(--amber-line); color: var(--t3); }
.ccs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cc { padding: 12px 14px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--b1); box-shadow: 0 1px 2px rgba(0,0,0,.4);
  animation: cardEnter .35s var(--ease) both; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cc:hover { border-color: var(--b2); transform: translateY(-1px); }
.cc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-top .at { font-size: var(--fs-11); }
.cc-top .pill { font-size: var(--fs-11); padding: 1px 8px; }
.cc-tier { margin-left: auto; font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t4); }
.cc-main { display: flex; align-items: flex-start; gap: 14px; }
.cc-bet { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-bet b { font-size: var(--fs-14); line-height: 1.35; color: var(--t1); font-weight: 700; }
.cc-bet span { font-size: var(--fs-12); line-height: 1.45; color: var(--t4); }
.cc-pct { flex: none; width: 64px; text-align: right; }
.cc-pct b { display: block; font: 800 22px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cc-pct i { display: block; height: 4px; margin-top: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.cc-pct s { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.cc-price { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--b1); font-size: var(--fs-13); color: var(--t3); }
.cc-odds { font: 700 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); }
.cc-fair { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t4); }
.chat-sugg button { white-space: nowrap; }
.cc.sel { box-shadow: inset 3px 0 0 var(--green), 0 1px 2px rgba(0,0,0,.4); }
.cc-add { margin-left: auto; }
.cc-add.on { background: var(--green); color: var(--s0); border-color: var(--green); }
.vmore { display: block; width: 100%; padding: 12px 0 2px; text-align: center; font-weight: 700; }
.signout { color: var(--t4); font-size: var(--fs-12); text-decoration: none; } .signout:hover { color: var(--t1); text-decoration: underline; }

/* ---------- live tab ---------- */
.livedot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(251,113,133,.5); animation: livepulse 1.6s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(251,113,133,.5); } 100% { box-shadow: 0 0 0 7px rgba(251,113,133,0); } }
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }
.lnote { margin: 0 0 12px; font-size: var(--fs-13); color: var(--t3); }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.lcard { padding: 14px 16px; margin: 0; }
.lcard.is-live { border-color: var(--red-line); }
.lhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lstat { font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.lstat.on { color: var(--red); }
.lteam { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.lteam .logo { width: 32px; height: 32px; }
.lteam .nm { font-size: var(--fs-16); font-weight: 700; color: var(--t1); }
.lteam .nm small { margin-left: 8px; font-size: var(--fs-12); font-weight: 500; color: var(--t3); font-family: var(--mono); }
.lteam .sc { font-size: var(--fs-24); font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; }
.lteam.lose .nm, .lteam.lose .sc { color: var(--t3); }
.poss { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.lsit { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-md); background: var(--s2); font-size: var(--fs-13); color: var(--t2); }
.lsit b { color: var(--t1); }
.lsit .lp { margin-top: 4px; font-size: var(--fs-12); color: var(--t3); }
.lbets { margin-top: 10px; border-top: 1px solid var(--b1); }
.lbet { display: grid; grid-template-columns: 70px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--b1); font-size: var(--fs-13); }
.lbet .src { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); }
.lbet .src.mine { color: var(--green); }
.lbet .b { color: var(--t1); }
.lbet .now { text-align: right; color: var(--t2); font-size: var(--fs-12); }
.lbet .now small { display: block; color: var(--t3); font-size: var(--fs-11); }
.lwatch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.lwatch .k { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); margin-right: 2px; }
.watch { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--b2);
  color: var(--t1); font-size: var(--fs-13); text-decoration: none; }
.watch:hover { border-color: var(--green-line); color: var(--green); }
.watch.off { color: var(--t3); }
@media (max-width: 600px) {
  .lgrid { grid-template-columns: 1fr; }
  .lbet { grid-template-columns: 1fr auto; }
  .lbet .src { grid-column: 1 / -1; }
}

/* ---------- hot bets ---------- */
.hotsel { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: var(--fs-13); color: var(--t3); }
.hotsel select { min-height: 36px; padding: 4px 10px; border-radius: var(--r-md); border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font: inherit; font-size: var(--fs-14); }
.hhead, .hrow { display: grid; grid-template-columns: 1fr 84px 84px 92px 28px; gap: 10px; align-items: center; }
.hhead { padding: 0 0 6px; border-bottom: 1px solid var(--b1); font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.hhead span:nth-child(n+2) { text-align: right; }
.hrow { padding: 10px 0; border-bottom: 1px solid var(--b1); }
.hrow.sel { box-shadow: inset 3px 0 0 var(--green); padding-left: 8px; }
.hrow .hg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hrow .bet { font-size: var(--fs-14); color: var(--t1); }
.hdk, .hls { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-14); }
.hdk a { color: var(--t1); text-decoration: none; font-weight: 700; }
.hdk a:hover { color: var(--green); }
.hdk small, .hls small { display: block; font-size: var(--fs-11); color: var(--t3); font-family: inherit; }
.hv { text-align: right; }
@media (max-width: 600px) {
  .hhead { display: none; }
  .hrow { grid-template-columns: 1fr auto auto 28px; }
  .hrow .hg { grid-column: 1 / -1; }
  .hv { text-align: left; }
}
.syspanel { margin: -6px 0 16px; }
.sysrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--b1); }
.sysrow .sb b { color: var(--t1); font-size: var(--fs-14); }
@media (max-width: 600px) { .sysrow { grid-template-columns: auto 1fr; } .sysrow .go { grid-column: 1 / -1; } }
.hurt { margin-top: 6px; font-size: var(--fs-13); color: var(--t2); } .hurt b { color: var(--t1); }

/* ---------- guide + legal ---------- */
#guide { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
#guide[hidden] { display: none; }
.gd-back { position: absolute; inset: 0; background: rgba(2,5,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gd { position: relative; width: min(560px, 100%); max-height: min(86dvh, 760px); display: flex; flex-direction: column;
  background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.gd-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.gd-h h2 { margin: 0; font-size: var(--fs-20); color: var(--t1); }
.gd-x { width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--t2); font-size: var(--fs-24); cursor: pointer; }
.gd-x:hover { background: var(--s1); }
.gd-b { overflow: auto; padding: 4px 20px 8px; }
.gd-i { padding: 10px 0; border-bottom: 1px solid var(--b1); }
.gd-i b { color: var(--t1); font-size: var(--fs-16); }
.gd-i p { margin: 4px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--t2); }
.gd-legal { margin: 12px 0 4px; font-size: var(--fs-12); line-height: 1.5; color: var(--t3); }
.gd-f { padding: 12px 20px 18px; }
.gd-ok { width: 100%; min-height: 46px; border: 0; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: var(--fs-16); color: #04130c;
  background: linear-gradient(135deg, var(--win), #1FAF2E); cursor: pointer; }
body.gd-open { overflow: hidden; }
footer.legal { margin: 32px auto 96px; max-width: 760px; text-align: center; font-size: var(--fs-12); line-height: 1.5; color: var(--t3); }
.hdk small.bestp { color: var(--green); }
footer.legal a, .gd-legal a { color: var(--t2); }

/* ---------- player research ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rsearch { position: relative; margin: 0 0 14px; max-width: 520px; }
.rsearch input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--b2); background: var(--s1); color: var(--t1); font: inherit; font-size: var(--fs-16); }
.rsearch input:focus { outline: 2px solid var(--green-line); outline-offset: 1px; }
.rres { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.rres:empty { display: none; }
.rr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--t1); text-decoration: none; border-top: 1px solid var(--b1); }
.rr:first-child { border-top: 0; } .rr:hover { background: var(--s1); } .rr .muted { margin-left: auto; font-size: var(--fs-13); }
.rh { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rimg { width: 64px; height: 64px; border-radius: var(--r-lg); object-fit: cover; background: var(--s2); }
.rname { margin: 0; font-size: var(--fs-24); color: var(--t1); }
.rchips { margin: 8px 0; }
.rctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.stp { width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font-size: var(--fs-20); cursor: pointer; }
.rlv { min-width: 52px; text-align: center; font-size: var(--fs-20); color: var(--t1); }
.fchip.sm { min-height: 32px; padding: 4px 12px; font-size: var(--fs-13); }
.rsel { min-height: 36px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font: inherit; font-size: var(--fs-14); max-width: 100%; }
.rchart { width: 100%; height: auto; margin: 10px 0 6px; display: block; }
.rchart .cv { fill: var(--t1); font: 600 12px var(--mono); }
.rchart .cl { fill: var(--t3); font: 11px var(--mono); }
.rchart .rline { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rchart .rlt { fill: var(--amber); font: 700 12px var(--mono); }
.rstats { margin-top: 8px; }
@media (max-width: 600px) { .rchart .cv { font-size: var(--fs-16); } .rchart .cl { font-size: var(--fs-16); } .rchart .rlt { font-size: var(--fs-16); } }

/* no visible scroll bars (page, sidebar, panels); scrolling still works with wheel, trackpad and touch */
html, body, .side, .chat, #slip, .gd-b, .rres, .summary, .strip, .weektabs { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .side::-webkit-scrollbar, .chat *::-webkit-scrollbar, .chat::-webkit-scrollbar,
#slip::-webkit-scrollbar, .gd-b::-webkit-scrollbar, .rres::-webkit-scrollbar, .summary::-webkit-scrollbar, .strip::-webkit-scrollbar,
.weektabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- bet tracker ---------- */
.track { margin: 10px 0; }
.track > summary { list-style: none; display: block; text-align: center; cursor: pointer; }
.track > summary::-webkit-details-marker { display: none; }
.track-b { margin-top: 10px; padding: 12px; border: 1px solid var(--b1); border-radius: var(--r-md); background: var(--s1); }
.seg { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; font-size: var(--fs-14); color: var(--t1); }
.seg input { accent-color: var(--win); }
.tk-l { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--t2); flex-wrap: wrap; }
.tk-l input { width: 72px; min-height: 36px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--b2); background: var(--s2); color: var(--t1); font: inherit; }
.pg-h { margin: 6px 0 14px; font-size: var(--fs-24); color: var(--t1); }
.mb { padding: 12px 0; border-top: 1px solid var(--b1); }
.mb:first-child { border-top: 0; }
.mb-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--t1); }
.mb-t .x { margin-left: auto; }
.mb-l { margin-top: 4px; font-size: var(--fs-13); color: var(--t2); }
.mb-d { margin-top: 4px; font-size: var(--fs-12); }
.pill.sm { font-size: var(--fs-11); padding: 1px 8px; }

/* ---------- public betting splits ---------- */
.spk { display: flex; gap: 16px; font-size: var(--fs-12); color: var(--t3); margin: 10px 0 6px; }
.spk i, .spb i { display: inline-block; height: 8px; border-radius: 4px; }
.spk i { width: 14px; margin-right: 6px; vertical-align: middle; }
i.b { background: var(--blue, var(--info)); } i.h { background: var(--green); }
.spm { margin: 8px 0; }
.spm-h { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.spr { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 38px 1fr 38px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--r-sm); font-size: var(--fs-13); color: var(--t1); }
.spr.sharp { background: var(--green-dim); box-shadow: inset 3px 0 0 var(--green); }
.spb { height: 8px; background: var(--s2); border-radius: 4px; overflow: hidden; }
.spb i { display: block; }
.spn { text-align: right; font-size: var(--fs-12); color: var(--t2); }
.spf { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--b1); color: var(--t1); text-decoration: none; font-size: var(--fs-14); }
.spf .mono { font-size: var(--fs-12); color: var(--t2); }
.spall { margin-top: 10px; }
.spall > summary { list-style: none; cursor: pointer; }
.spall > summary::-webkit-details-marker { display: none; }
.spg { padding: 10px 0; border-top: 1px solid var(--b1); }
.spg-t { display: flex; align-items: center; gap: 8px; color: var(--t1); text-decoration: none; font-weight: 700; font-size: var(--fs-14); }
@media (max-width: 600px) {
  .spr { grid-template-columns: 1fr 42px; row-gap: 5px; padding: 8px; }
  .spr .sps { grid-column: 1 / -1; }
  .spb { height: 10px; }
}

/* ---------- alerts ---------- */
.gd-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.gd-row .gd-ok { width: auto; padding: 0 22px; }
.gd-ok[disabled] { opacity: .45; cursor: default; }
ol.steps { margin: 6px 0 10px; padding-left: 20px; color: var(--t2); }
ol.steps li { margin: 4px 0; }

/* ---------- account links (top right; a row under the logo on phones) ---------- */
.meta-t { margin-bottom: 8px; }
.hnav, .hnav-m { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hnav-m { display: none; }
.hb { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--b2);
  background: var(--s1); color: var(--t1); font-size: var(--fs-14); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.hb:hover { border-color: rgba(255,255,255,.24); background: var(--s2); }
.hb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb.main { color: var(--green); border-color: var(--green-line); background: var(--green-dim); }
.hb.main:hover, .hb.main.on { background: rgba(78,238,82,.16); }
.hb.quiet { color: var(--t3); background: transparent; }
@media (max-width: 600px) {
  .hnav-m { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; scrollbar-width: none; }
  .hnav-m::-webkit-scrollbar { display: none; }
  .hnav-m .hb { min-height: 40px; font-size: var(--fs-16); }
}

/* splits v2: sentence + two split bars */
.spm { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--b1); border-radius: var(--r-md); }
.spm.sharp { border-color: var(--green-line); box-shadow: inset 3px 0 0 var(--green); }
.spm-h .muted { margin-left: 8px; font-size: var(--fs-11); letter-spacing: 0; text-transform: none; }
.spm-t { margin: 4px 0 8px; font-size: var(--fs-14); color: var(--t2); line-height: 1.45; }
.spm-t b { color: var(--t1); }
.sx { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; margin: 5px 0; }
.sx-l { font-size: var(--fs-12); font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }
.sx-bar { display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden; background: var(--s2); }
.sx-bar i { display: flex; align-items: center; min-width: 0; font-style: normal; background: rgba(148,163,184,.16); color: var(--t2); }
.sx-bar i.sx-b { justify-content: flex-end; border-left: 2px solid var(--bg, var(--bg)); }
.sx-bar i.lead { background: rgba(78,238,82,.24); color: var(--t1); }
.sx-bar em { font: 600 12px var(--mono); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }

/* ---------- results v2 ---------- */
.rscope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.rscope .chips { margin: 0; }
.rsum { margin: 14px 0 0; font-size: var(--fs-16); line-height: 1.55; color: var(--t2); }
.rsum b { color: var(--t1); }
.rt { display: grid; grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1.4fr) 76px 128px; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--b1); }
.rt:first-child { border-top: 0; }
.rt-n b { display: block; color: var(--t1); font-size: var(--fs-16); }
.rt-n span { font-size: var(--fs-12); color: var(--t3); }
.rt-r { font-size: var(--fs-16); color: var(--t1); }
.rt-r small, .rt-p small { display: block; font-size: var(--fs-11); color: var(--t3); font-family: inherit; }
.rt-p { font-size: var(--fs-16); text-align: right; }
.rt-bar span { display: block; margin-top: 4px; font-size: var(--fs-12); color: var(--t2); }
.hb2 { position: relative; height: 10px; border-radius: var(--r-sm); background: var(--s2); }
.hb2 i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--green); opacity: .8; }
.hb2 .said { position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1px; border-radius: 2px; background: var(--t1); }
.rt .pill { justify-self: end; }
.wkrow { display: grid; grid-template-columns: 1fr 70px 80px auto; gap: 12px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--b1);
  background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.wkrow:first-child { border-top: 0; }
.wkrow:hover .muted { color: var(--green); }
.hood { margin: 16px 0; }
.hood > summary { list-style: none; cursor: pointer; display: block; padding: 12px 0; }
.hood > summary::-webkit-details-marker { display: none; }
@media (max-width: 700px) {
  .rt { grid-template-columns: 1fr auto; row-gap: 6px; }
  .rt-bar { grid-column: 1 / -1; }
  .rt-p { text-align: left; }
}
.hood > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--b2);
  border-radius: var(--r-lg); background: var(--s1); transition: border-color .15s, background .15s; }
.hood > summary:hover { border-color: var(--green-line); background: var(--s2); }
.hood-t b { display: block; font-size: var(--fs-16); color: var(--t1); }
.hood-t span { font-size: var(--fs-13); color: var(--t3); }
.hood-c { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: var(--fs-14); font-weight: 600; color: var(--green); }
.hood-c i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.hood[open] > summary { margin-bottom: 12px; }
.hood[open] .hood-c i { transform: rotate(-135deg) translate(-2px, -2px); }
.hood[open] .hood-c { font-size: 0; } .hood[open] .hood-c::before { content: "Hide details"; font-size: var(--fs-14); }

/* ---------- under the hood: plain checks ---------- */
.ck-h { margin: 18px 0 4px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.ck-h:first-child { margin-top: 0; }
.ck { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--b1); }
.ck-q b { display: block; font-size: var(--fs-16); color: var(--t1); }
.ck-q p { margin: 4px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--t2); }
.ck .pill:empty { display: none; }
.ck-bars { margin-top: 10px; display: grid; gap: 6px; }
.ck-bars div { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-13); color: var(--t2); }
.ck-bars i { height: 12px; border-radius: var(--r-sm); background: rgba(148,163,184,.35); }
.ck-bars i.win { background: var(--green); }
.ck-bars em { font: 600 12px var(--mono); font-style: normal; color: var(--t1); white-space: nowrap; }
.ck-stats { margin-top: 10px; display: grid; gap: 8px; }
.ck-stat, .stk-row { display: grid; grid-template-columns: 150px 1fr 48px 120px; gap: 10px; align-items: center; font-size: var(--fs-13); }
.stk-row { grid-template-columns: 210px 1fr; }
.ck-sn { color: var(--t1); }
.ck-track { position: relative; height: 12px; border-radius: var(--r-sm); background: var(--s2); }
.ck-track i { display: block; height: 100%; border-radius: var(--r-sm); background: rgba(148,163,184,.4); }
.ck-track i.win { background: var(--green); }
.ck-track .mid { position: absolute; left: 50%; top: -3px; width: 2px; height: 18px; background: var(--t1); opacity: .7; }
.ck-sv { color: var(--t1); text-align: right; }
.ck-sc { font-size: var(--fs-12); }
.stk { display: flex; height: 22px; border-radius: var(--r-sm); overflow: hidden; margin-top: 10px; background: var(--s2); }
.stk-row .stk { margin-top: 0; }
.stk i { display: flex; align-items: center; justify-content: center; font: 600 11px var(--mono); font-style: normal; color: #04130c; min-width: 0; overflow: hidden; }
.stk i.up { background: var(--green); } .stk i.fl { background: rgba(148,163,184,.3); color: var(--t1); } .stk i.dn { background: var(--red); }
.stk-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: var(--fs-12); color: var(--t3); }
.stk-key i { display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.stk-key i.up { background: var(--green); } .stk-key i.fl { background: rgba(148,163,184,.3); } .stk-key i.dn { background: var(--red); }
@media (max-width: 700px) {
  .ck { grid-template-columns: 1fr; } .ck .pill { justify-self: start; }
  .ck-stat { grid-template-columns: 1fr 48px; } .ck-stat .ck-track { grid-column: 1 / -1; grid-row: 2; } .ck-sc { display: none; }
  .stk-row { grid-template-columns: 1fr; gap: 4px; }
  .ck-bars div { grid-template-columns: 96px 1fr; } .ck-bars em { grid-column: 2; }
}
.wkrow.open { border-bottom: 1px solid var(--green-line); }
.wkrow.open .muted { color: var(--green); }
.wkpicks { padding: 12px 0 6px; }
.wkpicks .games.past { margin-top: 8px; }

.lspred { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 6px 0 4px; padding: 12px 14px;
  border: 1px solid var(--green-line); border-radius: var(--r-md); background: var(--green-dim); }
.lspred .l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.lsp-row { display: flex; gap: 18px; margin-top: 4px; font-size: var(--fs-24); }
.lspred .muted { font-size: var(--fs-12); }

/* phone: game header line chip drops to its own row so team names never get clipped */
@media (max-width: 600px) {
  .gh { flex-wrap: wrap; row-gap: 8px; }
  .gh .grow { flex: 1 1 0; }
  .gh .name { overflow-wrap: anywhere; }
  .gh .chip { order: 3; margin-left: 82px; max-width: calc(100% - 82px); overflow: hidden; text-overflow: ellipsis; }
  .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}


/* slip: legs that changed since they were added */
.slipchg { margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-md); font-size: var(--fs-13); font-weight: 600;
  color: var(--amber); background: var(--amber-dim); border: 1px solid var(--amber-line); }
.legchg { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--amber); }
.chgdot { font-size: var(--fs-12); font-weight: 600; color: var(--amber); margin-left: 6px; }
.row .mv { font-size: var(--fs-12); color: var(--t3); font-family: var(--mono); font-variant-numeric: tabular-nums; margin-top: 1px; }
.row .mv span { font-family: var(--sans); }

/* weekly recap */
.recap .rc-why { margin: 8px 0 0; font-size: var(--fs-14); color: var(--t2); line-height: 1.5; }
.recap .rc-h { margin: 12px 0 4px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.recap .rc-l { margin: 0; padding: 0; list-style: none; }
.recap .rc-l li { padding: 6px 0; border-top: 1px solid var(--b1); font-size: var(--fs-14); }
.recap .rc-l li b { color: var(--t1); font-weight: 600; } .recap .rc-l .muted { font-size: var(--fs-12); display: block; }
.recap .linkbtn { margin-top: 10px; }

/* game page: pill tabs inside one card, merged overview, collapsible game states */
.gtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cbody > .gtabs { padding: 12px 16px 2px; margin: 0; }
.gtabs .gt-n { font-family: var(--mono); font-size: var(--fs-11); opacity: .65; margin-left: 2px; }
.ov-sh { margin: 14px 0 6px; }
.ov-list.says dd { color: var(--t2); }
.ov-list .trust { font-size: var(--fs-11); color: var(--t3); margin-left: 4px; }
.gstate { margin-top: 12px; border: 1px solid var(--b1); border-radius: var(--r-md); }
.gstate summary { cursor: pointer; padding: 10px 12px; font-size: var(--fs-14); font-weight: 600; color: var(--t1); list-style: none; }
.gstate summary::-webkit-details-marker { display: none; }
.gstate summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--t3); transition: transform .2s var(--ease); }
.gstate[open] summary::before { transform: rotate(90deg); }
.gstate summary .muted { font-weight: 400; font-size: var(--fs-12); }
.gstate .scroll { padding: 0 12px 10px; }

/* board: record lives in the tile row; Picks / Value / Hot bets tabs */
.st.proof { border-left: 3px solid var(--green); } .st.proof.warn { border-left-color: var(--amber); }
.st.proof .s b { color: var(--t1); } .st.proof.warn .s b { color: var(--amber); }
.btabs { display: flex; gap: 4px; padding: 4px; margin: 4px 0 14px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-md); }
.btab { flex: 1; font: 600 14px var(--sans); color: var(--t2); background: none; border: 0; border-radius: var(--r-sm); padding: 9px 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.btab.on { background: var(--t1); color: var(--s0); }
.bt-n { font: 700 11px var(--mono); padding: 1px 6px; border-radius: var(--r-pill); background: var(--b2); }
.bt-n.a { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-line); }
.btab.on .bt-n.a { background: var(--amber); color: var(--s0); }
.pf-l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pf-m { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-14); color: var(--t2); }
.pf-m > b { font-size: var(--fs-24); color: var(--t1); } .pf-m span b { color: var(--t1); }

/* overview: the three markets as tiles */
.ovtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 14px; }
.ovt { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.ovt .l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovt .v { font: 800 22px var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); margin-top: 2px; }
.ovt .s { font-size: var(--fs-12); color: var(--t3); font-family: var(--mono); }
.ovt-tr { font-size: var(--fs-11); color: var(--amber); margin-top: 4px; }
.vintro { margin: 0; padding: 12px 16px 4px; font-size: var(--fs-13); color: var(--t3); line-height: 1.5; } .vintro b { color: var(--t2); }
.vintro .vwarn { color: var(--amber); }
.vrow .odds .vchance { display: block; margin-top: 2px; font-size: var(--fs-11); color: var(--t3); font-family: var(--mono); }
.btab-note { margin: -6px 0 12px; font-size: var(--fs-13); color: var(--t3); line-height: 1.45; }
.btab-note b { color: var(--green); } .btab-note.value b { color: var(--amber); } .btab-note.hot b { color: var(--t2); }

/* wide screens: compact "This week" card in the right column; the tile row stays on smaller screens */
.glance { display: none; }
@media (min-width: 1100px) {
  .top-tiles { display: none; }
  .glance { display: block; margin: 0; }
  .gl-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; font: inherit; color: inherit;
    background: none; border: 0; border-top: 1px solid var(--b1); padding: 10px 16px; }
  button.gl-row { cursor: pointer; } button.gl-row:hover { background: var(--s2); }
  .gl-l { font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); align-self: center; }
  .gl-v { font-size: var(--fs-16); font-weight: 800; color: var(--t1); text-align: right; font-variant-numeric: tabular-nums; }
  .gl-s { grid-column: 1 / -1; font-size: var(--fs-12); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gl-s b { font-weight: 700; }
}

.tiles.t4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Account menu ---------- */
.gd.acct { max-width: 560px; }
.acct-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 20px 4px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-md); }
.acct-tabs button { flex: 1; font: 600 14px var(--sans); color: var(--t2); background: none; border: 0; border-radius: var(--r-sm); padding: 8px 6px; cursor: pointer; }
.acct-tabs button.on { background: var(--t1); color: var(--s0); }
.acct-id { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.acct-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 18px var(--sans); color: var(--s0);
  background: linear-gradient(135deg, var(--win), #1FAF2E); flex-shrink: 0; }
.acct-id b { display: block; color: var(--t1); font-size: var(--fs-16); word-break: break-all; } .acct-id span { font-size: var(--fs-13); color: var(--t3); }
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.acct-stats > div { background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 10px 12px; }
.acct-stats span { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.acct-stats b { font: 800 16px var(--mono); color: var(--t1); }
.acct-links { display: flex; flex-direction: column; border: 1px solid var(--b1); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.acct-links a { display: flex; justify-content: space-between; padding: 13px 14px; color: var(--t1); text-decoration: none; font-weight: 600; font-size: var(--fs-16); border-top: 1px solid var(--b1); }
.acct-links a:first-child { border-top: 0; } .acct-links a:hover { background: var(--s2); } .acct-links span { color: var(--t3); }
.acct-out { display: block; text-align: center; text-decoration: none; color: var(--red) !important; border-color: rgba(251,113,133,.3) !important; }
.prow { padding: 14px 0; border-top: 1px solid var(--b1); } .prow:first-child { border-top: 0; padding-top: 4px; }
.prow .pt b { display: block; color: var(--t1); font-size: var(--fs-16); } .prow .pt span { display: block; font-size: var(--fs-13); color: var(--t3); margin: 2px 0 10px; line-height: 1.45; }
.seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-md); margin: 0 6px 6px 0; flex-wrap: wrap; }
.seg button { font: 600 13px var(--sans); color: var(--t2); background: none; border: 0; border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; min-height: 34px; }
.seg button.on { background: var(--t1); color: var(--s0); }
.bookchips { display: flex; flex-wrap: wrap; gap: 6px; }
.unitrow { display: flex; align-items: center; gap: 6px; font: 600 15px var(--mono); color: var(--t2); }
.unitrow input { width: 120px; font: 600 15px var(--mono); color: var(--t1); background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r-md); padding: 8px 10px; }
.gd-sec { margin: 18px 0 2px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.gd-sec:first-child { margin-top: 0; }

/* phones: pick rows stack (type, then the bet at full width, then chance · odds · add) so text isn't squeezed */
@media (max-width: 600px) {
  .row:not(.graded) { grid-template-columns: 1fr auto 36px; grid-template-areas: "pill pill pill" "main main main" "prob odds add";
    gap: 6px 10px; padding: 12px 14px; align-items: center; }
  .row:not(.graded) > .pill { grid-area: pill; justify-self: start; font-size: var(--fs-11); padding: 2px 9px; }
  .row:not(.graded) > div:nth-child(2) { grid-area: main; min-width: 0; }
  .row:not(.graded) > .prob { grid-area: prob; display: flex; flex-direction: row; align-items: center; gap: 8px; }
  .row:not(.graded) > .prob .bar { flex: 1 1 auto; min-width: 70px; max-width: 150px; }
  .row:not(.graded) > .odds { grid-area: odds; text-align: right; display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
  .row:not(.graded) > .odds br { display: none; }
  .row:not(.graded) > .add { grid-area: add; justify-self: end; }
  .row:not(.graded) > .reasons { grid-column: 1 / -1; }
  .row:not(.graded) .bet { font-size: var(--fs-16); line-height: 1.3; }
  .row:not(.graded) .why { font-size: var(--fs-13); line-height: 1.45; }
  .row:not(.graded) .mv { font-size: var(--fs-12); }
}
@media (max-width: 600px) { .btab { font-size: var(--fs-13); white-space: nowrap; padding: 8px 4px; gap: 4px; } .bt-n { font-size: var(--fs-11); padding: 1px 5px; } }
/* the LineScout wordmark inline in text */
img.ls-word { height: .82em; width: auto; vertical-align: -0.04em; margin: 0 .08em; display: inline; }

/* line builder */
.lb-mk { margin-bottom: 10px; }
.lb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-row .seg { margin: 0; }
.lb-step { display: inline-flex; align-items: center; gap: 4px; background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 3px; }
.lb-step button { width: 38px; height: 34px; border-radius: var(--r-sm); border: 0; background: var(--s2); color: var(--t1); font: 700 18px var(--sans); cursor: pointer; }
.lb-step b { min-width: 58px; text-align: center; font-size: var(--fs-20); color: var(--t1); }
.lb-out { display: flex; align-items: center; gap: 22px; margin-top: 14px; padding: 12px 14px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); flex-wrap: wrap; }
.lb-out .l { display: block; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.lb-out .v { font-size: var(--fs-24); font-weight: 800; }
.lb-out .add { margin-left: auto; }
.lb-px { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: var(--fs-14); color: var(--t2); }
.lb-px.muted { color: var(--t3); font-size: var(--fs-13); }

/* game page: section pills across the top on every screen, wrapping so nothing scrolls sideways */
.jump.jump-top { flex-wrap: wrap; overflow: visible; padding-bottom: 0; margin-bottom: 14px; }
.jump.jump-top a { cursor: pointer; transition: border-color .15s, color .15s; }
.jump.jump-top a:hover { border-color: var(--b2); color: var(--t1); }
@media (max-width: 600px) { .jump.jump-top { gap: 5px; } .jump.jump-top a { font-size: var(--fs-13); padding: 5px 10px; } }
@media (max-width: 600px) { .jump.jump-top { position: static; margin: 0 0 12px; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.bl-list dd .why { margin-top: 3px; } .bl-bet { color: var(--t1); font-size: var(--fs-16); }
.lb-wrap { padding: 12px 16px 14px; }
.parlay { padding: 12px 16px; border-top: 1px solid var(--b1); }

/* parlays */
.parlay .pl-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.parlay .pl-h b { font-size: var(--fs-16); color: var(--t1); }
.parlay .pl-s { font-size: var(--fs-14); color: var(--t2); margin-top: 2px; }
.pl-legs { list-style: none; margin: 8px 0 6px; padding: 0; }
.pl-legs li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--b1); font-size: var(--fs-14); }
.pl-legs li:first-child { border-top: 0; }
.pl-b { color: var(--t1); min-width: 0; } .pl-o { color: var(--t3); font-size: var(--fs-13); }
.pl-legs li.weak .pl-c { text-decoration: underline; text-decoration-color: var(--amber); }
.pl-w { grid-column: 1 / -1; font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.pl-a { margin-top: 10px; } .pl-a .btn { min-height: 38px; }
.cross-parlay { margin-bottom: 14px; }

/* game page right column: your bets, quick questions, other games (wide screens only) */
.gs { display: none; }
@media (min-width: 1100px) {
  .gs { display: grid; gap: 12px; margin-top: 12px; }
  .gs-card { margin: 0; }
  .gs-qs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 14px; }
  .gs-q { font: 600 13px var(--sans); color: var(--t2); background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; text-align: left; }
  .gs-q:hover { border-color: var(--green-line); color: var(--t1); }
  .gs-games { display: flex; flex-direction: column; }
  .gs-g { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo m" "logo p"; gap: 2px 10px; align-items: center; padding: 9px 16px;
    border-top: 1px solid var(--b1); text-decoration: none; color: inherit; }
  .gs-g:hover { background: var(--s2); }
  .gs-g .logos { grid-area: logo; }
  .gs-m { grid-area: m; display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-14); } .gs-m b { color: var(--t1); }
  .gs-m .muted { font-size: var(--fs-12); }
  .gs-p { grid-area: p; font-size: var(--fs-12); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gs-bet { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--b1); font-size: var(--fs-13); color: var(--t1); }
}

/* ---------- tools ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card.tool { display: flex; flex-direction: column; gap: 6px; padding: 16px; margin: 0; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card.tool:hover { border-color: var(--green-line); transform: translateY(-1px); }
.card.tool b { font-size: var(--fs-16); color: var(--t1); } .card.tool span { font-size: var(--fs-14); color: var(--t2); line-height: 1.45; } .card.tool .go { color: var(--green); font-weight: 600; margin-top: auto; }
/* heat map */
.hm-wrap { overflow-x: auto; margin-top: 12px; }
.hm-t { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-12); min-width: 640px; width: 100%; }
.hm-t thead th { font-size: var(--fs-11); font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; cursor: pointer; white-space: nowrap; }
.hm-t thead th.on { color: var(--green); }
.hm-t tbody th { text-align: left; white-space: nowrap; padding: 4px 6px; font-weight: 700; color: var(--t1); }
.hm-t tbody th .logo { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; }
.hm-t tbody th small { display: block; font-weight: 400; color: var(--t3); font-size: var(--fs-11); }
.hm { text-align: center; padding: 6px 4px; border-radius: var(--r-sm); font-family: var(--mono);
  background: color-mix(in srgb, color-mix(in srgb, var(--loss) calc((1 - var(--h)) * 100%), var(--win) calc(var(--h) * 100%)) calc(18% + 22% * (2 * abs(var(--h) - .5))), transparent); }
.hm b { display: block; color: var(--t1); font-size: var(--fs-13); } .hm small { color: var(--t3); font-size: var(--fs-11); } .hm.na { color: var(--t3); background: none; }
/* slip checker */
.ck-text { width: 100%; box-sizing: border-box; font: 14px var(--mono); color: var(--t1); background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r-md); padding: 10px 12px; resize: vertical; }
.ck-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ck-up { cursor: pointer; }
.ck-err { color: var(--red); font-size: var(--fs-14); margin: 10px 0 0; }
.ck-res { display: grid; grid-template-columns: 1fr auto 36px; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--b1); }
.ck-b b { color: var(--t1); } .ck-pre { white-space: pre-wrap; font-size: var(--fs-12); color: var(--t2); }
/* same-game parlay */
.sgp-opt { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--b1); font-size: var(--fs-14); }
.sgp-opt .pl-b { color: var(--t1); }
.sgp-box .pl-legs li { grid-template-columns: 1fr auto 24px; }
.sgp-box .x { background: none; border: 0; color: var(--t3); font-size: var(--fs-20); cursor: pointer; }
.rp-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ck-btn { width: 100%; margin-top: 10px; } .ck-link { display: block; margin: 8px 0 0; }
.gd.ck { max-width: 620px; } .ck-list { margin-top: 12px; border-top: 1px solid var(--b1); } .ck-list .ck-res { padding: 10px 0; }
.ck-sum { margin-top: 12px; } .ck-track { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.ck-track label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--t2); }
.ck-track input { width: 90px; font: 600 14px var(--mono); color: var(--t1); background: var(--s1); border: 1px solid var(--b2); border-radius: var(--r-sm); padding: 7px 9px; }
.ck-cam { font-size: var(--fs-16); }

/* team pages */
.theat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 22px; }
.sbars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.sbar { display: grid; grid-template-columns: 110px 1fr 76px; gap: 8px; align-items: center; font-size: var(--fs-13); }
.sbar .sl { color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar .st { height: 8px; border-radius: 4px; background: var(--b1); overflow: hidden; } .sbar .st i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.sbar b { text-align: right; color: var(--t1); font-size: var(--fs-12); } .sbar small { color: var(--t3); font-weight: 400; }
.rk { font: 700 11px var(--mono); padding: 1px 6px; border-radius: var(--r-pill); background: var(--s2); color: var(--t2); }
.rk.good { color: var(--green); background: var(--green-dim); } .rk.bad { color: var(--red); background: rgba(251,113,133,.08); }
.trow { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 16px; border-top: 1px solid var(--b1); text-decoration: none; color: inherit; }
.trow:hover { background: var(--s2); } .trow b { color: var(--t1); } .trow .muted { font-size: var(--fs-12); margin-left: auto; }
.news { list-style: none; margin: 0; padding: 0; } .news li { padding: 8px 0; border-top: 1px solid var(--b1); font-size: var(--fs-14); } .news li:first-child { border-top: 0; }
.news a { color: var(--t1); text-decoration: none; display: block; } .news a:hover { color: var(--green); } .news .muted { font-size: var(--fs-12); }

/* ================= team pages v2 ================= */
.th { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px; }
.th-id { display: flex; align-items: center; gap: 14px; }
.th h1 { margin: 0 0 6px; font-size: var(--fs-24); font-weight: 800; letter-spacing: -.02em; color: var(--t1); }
.th-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.th-next { display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: baseline; text-decoration: none; color: inherit;
  padding: 10px 14px; border: 1px solid var(--b1); border-radius: var(--r-md); background: var(--s2); }
.th-next b { font-size: var(--fs-20); color: var(--t1); } .th-next .go { grid-column: 1 / -1; color: var(--green); font-weight: 600; font-size: var(--fs-13); }
.th-next:hover { border-color: var(--green-line); }
.t-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.t-body .card-b { padding: 18px; }
.t-when { margin-bottom: 14px; }
.t-winbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--b1); }
.t-winbar .seg { margin: 0; }
.t-winbar .seg button { min-height: 30px; padding: 5px 12px; font-size: var(--fs-12); font-family: var(--mono); }
.t-winbar > .muted { font-size: var(--fs-12); }
.t-sec { margin-top: 18px; } .t-sec:first-child { margin-top: 0; }
.t-sec h3 { margin: 0 0 10px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.t-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 14px; }
.t-flush { margin: 0 -18px -18px; border-top: 1px solid var(--b1); }
.t-line { margin: 0; font-size: var(--fs-16); color: var(--t2); line-height: 1.6; } .t-line b { color: var(--t1); font-family: var(--mono); }
@media (max-width: 700px) { .t-two { grid-template-columns: 1fr; gap: 14px; } }
/* stat tiles */
.tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.tt { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r-md); }
.tt-l { font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.tt-v { font-size: var(--fs-32); font-weight: 800; color: var(--t1); line-height: 1.1; }
.tt-s { font-size: var(--fs-13); color: var(--t3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rk { font: 700 12px var(--mono); padding: 2px 8px; border-radius: var(--r-pill); background: var(--s1); color: var(--t2); border: 1px solid var(--b1); }
.rk.good { color: var(--green); background: var(--green-dim); border-color: var(--green-line); }
.rk.bad { color: var(--red); background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); }
/* share bars */
.sbars { display: flex; flex-direction: column; gap: 8px; }
.sbar { display: grid; grid-template-columns: minmax(90px, 130px) 1fr 52px; gap: 10px; align-items: center; font-size: var(--fs-14); }
.sbar .sl { color: var(--t1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tr { display: block; height: 10px; border-radius: var(--r-sm); background: var(--b1); overflow: hidden; }
.sb-tr i { display: block; height: 100%; border-radius: var(--r-sm); background: linear-gradient(90deg, rgba(78,238,82,.55), var(--win)); }
.sbar b { text-align: right; color: var(--t1); font-size: var(--fs-14); }
/* field map, the signature */
.fmap { margin: 0; }
.fmap figcaption { font-size: var(--fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.fm-grid { display: grid; grid-template-columns: 64px repeat(3, 1fr); gap: 4px; padding: 10px; border-radius: var(--r-lg);
  background: repeating-linear-gradient(180deg, rgba(78,238,82,.05) 0 28px, rgba(78,238,82,.02) 28px 56px), #0A1620;
  border: 1px solid rgba(78,238,82,.18); }
.fm-band { display: flex; flex-direction: column; justify-content: center; font-size: var(--fs-12); font-weight: 600; color: var(--t2); }
.fm-band small { font: 600 11px var(--mono); color: var(--t3); } .fm-band.los { color: var(--t3); font-size: var(--fs-11); }
.fm-cell { height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 13px var(--mono); color: var(--t1);
  background: rgba(78,238,82, var(--a)); border: 1px solid rgba(255,255,255,.04); }
.fm-los { height: 2px; align-self: center; background: rgba(241,245,249,.5); border-radius: 2px; }
.fm-run { height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 13px var(--mono); color: var(--t1); background: rgba(96,165,250, var(--a)); }
.fm-lane { text-align: center; font-size: var(--fs-12); font-weight: 600; color: var(--t2); text-transform: capitalize; padding-top: 4px; }
.fm-lane small { display: block; font: 600 11px var(--mono); color: var(--t3); }
/* defense heat */
.dh-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dh-top .seg { margin: 0; }
.dh-leg { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); font-weight: 600; color: var(--t3); }
.dh-leg i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--loss), rgba(251,113,133,.35), #1E2A3A, rgba(78,238,82,.35), var(--win)); }
.dh { display: grid; gap: 16px; } .dh.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .dh.two { grid-template-columns: 1fr; } }
.dh-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .dh-t b { color: var(--t1); font-size: var(--fs-16); } .dh-t .linkbtn { margin-left: auto; }
.dh-r { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 6px; margin-bottom: 6px; align-items: stretch; }
.dh-pos { display: flex; align-items: center; font-size: var(--fs-13); font-weight: 700; color: var(--t2); }
.dh-c { display: flex; flex-direction: column; justify-content: center; padding: 9px 10px; border-radius: var(--r-md); border: 1px solid transparent; min-height: 50px; }
.dh-c b { font-size: var(--fs-16); font-weight: 800; } .dh-c small { font: 500 11px var(--mono); opacity: .85; margin-top: 2px; }
.dh-c.t0 { background: rgba(251,113,133,.30); color: #FFE4E8; border-color: rgba(251,113,133,.45); }
.dh-c.t1 { background: rgba(251,113,133,.13); color: #FBA4B4; border-color: rgba(251,113,133,.22); }
.dh-c.t2 { background: var(--s2); color: var(--t2); border-color: var(--b1); }
.dh-c.t3 { background: rgba(78,238,82,.13); color: #8DF390; border-color: rgba(78,238,82,.24); }
.dh-c.t4 { background: rgba(78,238,82,.30); color: #E2FFF3; border-color: rgba(78,238,82,.5); }
.dh-c.na { background: var(--s1); color: var(--t3); }
.om { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 700px) { .om { grid-template-columns: 1fr; } }
/* lineup */
.lu { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.lu-c { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--b1);
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.lu-c:hover { border-color: var(--green-line); transform: translateY(-1px); }
.lu-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lu-h b { font-size: var(--fs-16); color: var(--t1); }
.lu-pos { font: 700 11px var(--mono); padding: 2px 7px; border-radius: var(--r-sm); background: var(--s1); color: var(--t2); border: 1px solid var(--b2); }
.lu-snap { display: grid; grid-template-columns: 46px 1fr 40px; gap: 8px; align-items: center; font-size: var(--fs-12); color: var(--t3); }
.lu-snap b { color: var(--t1); font-size: var(--fs-13); text-align: right; }
.lu-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lu-s span { display: flex; flex-direction: column; } .lu-s b { font-size: var(--fs-20); color: var(--t1); font-weight: 800; } .lu-s small { font-size: var(--fs-11); color: var(--t3); }
.pers { display: flex; flex-direction: column; gap: 8px; }
.pers-i { display: grid; grid-template-columns: 40px 1fr 52px; gap: 10px; align-items: center; font-size: var(--fs-14); }
.pers-i b { font-size: var(--fs-16); color: var(--t1); } .pers-i small { grid-column: 2 / -1; margin-top: -4px; font-size: var(--fs-11); color: var(--t3); }
.miss { display: flex; flex-wrap: wrap; gap: 8px; } .miss span { padding: 6px 10px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--b1); font-size: var(--fs-13); } .miss b { color: var(--t1); }
/* splits, trends, schedule */
.split-t { display: flex; flex-direction: column; }
.split-r { display: grid; grid-template-columns: 1fr 60px 92px 80px; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--b1); font-size: var(--fs-14); }
.split-r:first-child { border-top: 0; } .split-r b { color: var(--t1); font-size: var(--fs-16); }
.dots-r { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: var(--fs-13); color: var(--t2); }
.dots-r > div { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } .dot.w { background: var(--win); } .dot.l { background: var(--loss); } .dot.p { background: var(--text-off); }
.qbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: 150px; align-items: end; }
.qb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.qb i { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--win), rgba(78,238,82,.35)); min-height: 4px; }
.qv { font-size: var(--fs-16); font-weight: 800; color: var(--t1); } .ql { font-size: var(--fs-12); font-weight: 700; color: var(--t3); }
.sched { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.sg { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--b1); font-size: var(--fs-14); }
.sg .sw { grid-column: 1 / -1; font-size: var(--fs-11); font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }
.sg b { color: var(--t1); } .sg .mono { text-align: right; }
.sg.done.w { border-left: 3px solid var(--win); } .sg.done.l { border-left: 3px solid var(--loss); }
.sg.hard { background: rgba(251,113,133,.07); } .sg.easy { background: rgba(78,238,82,.07); }
/* news */
.nw { display: flex; flex-direction: column; gap: 8px; }
.nw-i { display: grid; grid-template-columns: 1fr 20px; gap: 4px 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s2);
  border: 1px solid var(--b1); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.nw-i:hover { border-color: var(--green-line); transform: translateY(-1px); }
.nw-meta { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-12); color: var(--t3); } .nw-meta b { color: var(--green); font-weight: 700; }
.nw-t { grid-column: 1; font-size: var(--fs-16); font-weight: 600; color: var(--t1); line-height: 1.35; }
.nw-go { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--t3); }
.nw-i.lead { padding: 16px; background: linear-gradient(180deg, rgba(78,238,82,.06), var(--s2)); } .nw-i.lead .nw-t { font-size: var(--fs-20); font-weight: 700; }
.nw-empty { padding: 18px; text-align: center; color: var(--t3); font-size: var(--fs-14); }
@media (prefers-reduced-motion: reduce) { .lu-c, .nw-i { transition: none; } }

/* ================= top bar v2: logo · search · actions, on one symmetric grid ================= */
.brand { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr); align-items: center; gap: 20px;
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); background: rgba(4,8,13,.82);
  border-bottom: 1px solid var(--b1); }
.brand .brandlink { justify-self: start; }
.hnav { display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; justify-self: end; }
.hnav-m { display: none !important; }
.hnav .hb { min-height: 40px; padding: 0 16px; }
.hnav .hb svg, .hi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hi { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--b2); background: var(--s1);
  color: var(--t2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.hi:hover { border-color: rgba(255,255,255,.24); color: var(--t1); background: var(--s2); }
.hi-search { display: none; }
.hav { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font: 800 16px var(--sans); color: var(--bg);
  background: linear-gradient(135deg, var(--win), #1FAF2E); box-shadow: 0 0 0 2px rgba(78,238,82,.18); transition: box-shadow .15s; }
.hav:hover { box-shadow: 0 0 0 3px rgba(78,238,82,.35); }
.hi:focus-visible, .hav:focus-visible, .hb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* search */
.hsearch { position: relative; margin: 0 !important; max-width: none !important; width: 100%; }
.hsearch input { width: 100%; height: 44px; min-height: 44px; padding: 0 64px 0 42px !important; border-radius: 12px !important;
  border: 1px solid var(--b2) !important; background: var(--s1) !important; color: var(--t1); font-size: var(--fs-16);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.hsearch input::placeholder { color: var(--t3); }
.hsearch input:focus { outline: none !important; border-color: var(--green-line) !important; background: var(--s2) !important; box-shadow: 0 0 0 4px rgba(78,238,82,.08); }
.hsearch input::-webkit-search-cancel-button { display: none; }
.hs-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--t3); pointer-events: none; }
.hs-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hs-k { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px var(--mono); color: var(--t3);
  padding: 3px 7px; border-radius: var(--r-sm); border: 1px solid var(--b2); background: var(--s0); pointer-events: none; }
.hsearch .rres { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; border-radius: var(--r-md); overflow: hidden;
  background: rgba(16,25,42,.97); backdrop-filter: blur(20px); border: 1px solid var(--b2); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.hsearch .rres:empty { display: none; }
/* week switcher: one full-width segmented bar, equal columns, status at the end */
.wrow { display: flex; align-items: stretch; gap: 14px; margin: 0 0 16px; }
.wrow .weektabs { flex: 1; display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 4px; gap: 4px; }
.wrow .wtab { position: relative; align-items: center; text-align: center; padding: 10px 12px; background: none; }
.wrow .wtab .wl { font-size: var(--fs-16); color: var(--t2); display: inline-flex; align-items: center; gap: 6px; }
.wrow .wtab.on { background: var(--s2); box-shadow: inset 0 0 0 1px var(--b2), 0 1px 2px rgba(0,0,0,.4); }
.wrow .wtab.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 2px; border-radius: 2px; background: var(--green); }
.wrow .wtab.on .wl { color: var(--t1); } .wrow .wtab.on .wn { color: var(--t3); }
.wrow .wtab .wsel { color: var(--t2); }
.wmeta { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 2px; min-width: 150px;
  font-size: var(--fs-12); color: var(--t3); text-align: right; line-height: 1.4; }
.brand + .mmeta { display: none !important; }
@media (max-width: 1099px) { .wmeta { display: none; } }
/* tablets: shorter search */
@media (max-width: 1099px) and (min-width: 601px) {
  .brand { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hs-k { display: none; }
  .hnav .hb span { display: none; } .hnav .hb { width: 40px; padding: 0; justify-content: center; }
}
/* phones: logo + three icons; search opens as a full-width row */
@media (max-width: 600px) {
  .brand { grid-template-columns: auto 1fr; gap: 10px; justify-content: stretch !important; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .brand .brandlink { margin: 0 !important; }
  .brand .tag { display: none; }
  .hi-search { display: grid; }
  .hnav .hb.main { display: none; }
  .hnav { gap: 6px; }
  .hsearch { display: none; grid-column: 1 / -1; order: 3; }
  body.search-open .hsearch { display: block; }
  .hs-k { display: none; }
  .brand + .mmeta { display: block !important; }
}
/* board tabs match the week switcher: soft lift + green underline instead of a white block */
.btabs .btab { position: relative; }
.btabs .btab.on { background: var(--s2); color: var(--t1); box-shadow: inset 0 0 0 1px var(--b2), 0 1px 2px rgba(0,0,0,.4); }
.btabs .btab.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--green); }
.btabs .btab.on .bt-n.a { background: var(--amber-dim); color: var(--amber); }
@media (max-width: 600px) { .wrow { display: none; } }  /* phones switch weeks from the bottom tab bar */
.brand + .mmeta { display: none !important; }  /* the status lives in the week row (desktop) or the next-kickoff line (phones) */
@media (min-width: 1100px) { .nk-up { display: none; } }
/* This week card v2 */
.gl-row .gl-s { white-space: normal !important; overflow: visible !important; line-height: 1.5; }
.gl-row.nov { grid-template-columns: 1fr; }
.gl-up { color: var(--green); font-size: var(--fs-11); } .gl-dn { color: var(--amber); font-size: var(--fs-11); }
.gl-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gl-list li { font-size: var(--fs-13); } .gl-list b { color: var(--t1); font-weight: 600; } .gl-list span { color: var(--t3); }
.gl-list a { text-decoration: none; color: inherit; display: block; } .gl-list a:hover b { color: var(--green); }
.gl-more { font-size: var(--fs-12); color: var(--t3); }
.gl-pick { display: block; margin-top: 2px; } .gl-pick b { color: var(--t1); font-size: var(--fs-14); } .gl-pick span { display: block; font-size: var(--fs-12); color: var(--t3); }
.gl-add { margin-top: 8px; font: 600 12px var(--sans); color: var(--green); background: var(--green-dim); border: 1px solid var(--green-line); border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; }
.gl-add.on { color: var(--t2); background: var(--s2); border-color: var(--b2); }

/* ===== phones: the swipe row of big tiles becomes a compact "This week" grid that fits the screen ===== */
@media (max-width: 600px) {
  .top-tiles { display: none !important; }
  .glance { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none; }
  .glance > .card-h { display: none; }
  .glance .gl-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 1px solid var(--b1) !important;
    border-radius: var(--r-lg); background: var(--s1); text-align: left; min-width: 0; }
  .glance .gl-l { font-size: var(--fs-11); letter-spacing: .08em; }
  .glance .gl-v { font-size: var(--fs-24); text-align: left; }
  .glance .gl-s { font-size: var(--fs-12); color: var(--t3); white-space: normal !important; overflow: hidden !important; max-width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }  /* wrap to two lines instead of cutting words */
  .glance .gl-s br, .glance .gl-s .gl-up, .glance .gl-s .gl-dn { display: none; }
  .glance .gl-list li:nth-child(n+2), .glance .gl-more { display: none; }
  .glance .gk-top-pick { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
  .glance .gk-top-pick .gl-l { grid-column: 1; } .glance .gk-top-pick .gl-v { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-24); }
  .glance .gk-top-pick .gl-s { grid-column: 1; white-space: normal !important; }
  .glance .gk-top-pick .gl-add { margin-top: 6px; }
  .glance .gk-weather-watch, .glance .gk-line-movers, .glance .gk-system-plays, .glance .gk-price-plays { display: none; }
  .glance .gk-next-puck-drop { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; padding: 10px 12px; order: 5; }
  .glance .gk-next-puck-drop .gl-v { order: 3; font-size: var(--fs-16); } .glance .gk-next-puck-drop .gl-s { order: 2; }
  .nextko { display: none; }
}
@media (max-width: 600px) {
  .glance .gk-record { order: 1; } .glance .gk-key-players-out { order: 2; } .glance .gk-top-pick { order: 3; }
  .glance .gk-your-bets { order: 4; } .glance .gk-next-kickoff { order: 5; }
  .glance .gk-your-bets, .glance .gk-next-kickoff { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; padding: 10px 12px; }
  .glance .gk-your-bets .gl-v, .glance .gk-next-kickoff .gl-v { order: 3; font-size: var(--fs-16); }
  .glance .gk-your-bets .gl-s, .glance .gk-next-kickoff .gl-s { order: 2; }
}
.sort-tg { display: none; }
@media (max-width: 600px) {
  .sort-full, .chips .sep { display: none; }
  .sort-tg { display: inline-flex; margin-left: auto; }
  .chips { flex-wrap: nowrap; } .chips .fchip { padding: 6px 11px; font-size: var(--fs-13); }
  .btab-note { font-size: var(--fs-12); }
}
.sf { display: none; }
@media (max-width: 600px) { .lf { display: none; } .sf { display: inline; } .chips .fchip { white-space: nowrap; } }
/* phones: the player/team search is always there, full width under the logo */
@media (max-width: 600px) {
  .hsearch { display: block !important; grid-column: 1 / -1; order: 3; }
  .hsearch input { height: 42px; min-height: 42px; font-size: var(--fs-16); }
  .hi-search { display: none !important; }
}
/* search above the board tabs on phones; the top bar keeps it on other pages */
.msearch { display: none !important; }
@media (max-width: 600px) {
  .msearch { display: block !important; margin: 0 0 12px !important; }
  body:has(.msearch) .brand .hsearch { display: none !important; }
}
.dh-take { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--b1); font-size: var(--fs-14); color: var(--t1); }
.dh-take .pill { margin-right: 6px; }
.dh-t .muted { font-size: var(--fs-12); margin-left: 4px; }
.dh-c small { font-family: var(--sans) !important; }
@media (max-width: 600px) { .mw-x { display: none; } .dh-r { grid-template-columns: 64px 1fr 1fr; } .dh-pos { font-size: var(--fs-12); } }
/* player matchups: one row per player */
.pm { display: flex; flex-direction: column; gap: 8px; }
.pm-r { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--s2); border: 1px solid var(--b1); text-decoration: none; color: inherit; }
.pm-r:hover { border-color: var(--b2); }
.pm-dot { width: 10px; height: 10px; border-radius: 50%; }
.pm-b b { font-size: var(--fs-16); color: var(--t1); } .pm-tag { margin-left: 6px; font-size: var(--fs-12); color: var(--t3); }
.pm-s { display: block; margin-top: 3px; font-size: var(--fs-13); color: var(--t2); line-height: 1.4; }
.pm-w { font-size: var(--fs-13); font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.pm-r.t4 .pm-dot, .pm-r.t3 .pm-dot { background: var(--win); } .pm-r.t2 .pm-dot { background: var(--text-off); } .pm-r.t1 .pm-dot, .pm-r.t0 .pm-dot { background: var(--loss); }
.pm-r.t4 .pm-w { background: rgba(78,238,82,.2); color: #8DF390; } .pm-r.t3 .pm-w { background: rgba(78,238,82,.1); color: #8DF390; }
.pm-r.t2 .pm-w { background: var(--s1); color: var(--t2); }
.pm-r.t1 .pm-w { background: rgba(251,113,133,.1); color: #FBA4B4; } .pm-r.t0 .pm-w { background: rgba(251,113,133,.2); color: #FBA4B4; }
.pm-r.t4 { border-left: 3px solid var(--win); } .pm-r.t0 { border-left: 3px solid var(--loss); }

/* ===== matchups v3: face-off chips + Attack / Avoid with bars vs an average defense ===== */
.fo { display: grid; gap: 8px; margin: 0 0 14px; }
.fo-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--b1); }
.fo-t { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.fo-t b { font-size: var(--fs-14); color: var(--t1); } .fo-t small { font-size: var(--fs-11); color: var(--t3); }
.fo-c { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fo-x { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: var(--r-md); font: 700 11px var(--sans); color: var(--t3);
  border: 1px solid var(--b1); background: var(--s0); }
.fo-x b { font: 700 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--t2); }
.fo-x.t4, .fo-x.t3 { background: rgba(78,238,82,.08); border-color: rgba(78,238,82,.3); } .fo-x.t4 b, .fo-x.t3 b { color: var(--green); }
.fo-x.t0, .fo-x.t1 { background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); } .fo-x.t0 b, .fo-x.t1 b { color: var(--red); }
.pm2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-col { display: grid; gap: 6px; align-content: start; }
.pm-h { font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 0 2px 2px; }
.pm-col.up .pm-h { color: var(--green); } .pm-col.dn .pm-h { color: var(--red); }
.pm-e { font-size: var(--fs-12); margin: 0; }
.pm2 .pm-r { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n v" "bar l"; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--b1); text-decoration: none; transition: border-color .15s, background .15s; }
.pm2 .pm-r:hover { border-color: var(--b2); background: var(--s2); }
.pm-n { grid-area: n; min-width: 0; display: flex; flex-direction: column; }
.pm-n b { font-size: var(--fs-14); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-n .pm-tag { font-size: var(--fs-11); color: var(--t3); }
.pm-v { grid-area: v; font-size: var(--fs-16); font-weight: 700; text-align: right; }
.pm-v small { font: 600 11px var(--sans); color: var(--t3); }
.pm-col.up .pm-v { color: var(--green); } .pm-col.dn .pm-v { color: var(--red); }
.pm-bar { grid-area: bar; position: relative; height: 4px; border-radius: 4px; background: var(--b1); }
.pm-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--b2); }
.pm-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.pm-col.up .pm-bar i { left: 50%; background: var(--green); }
.pm-col.dn .pm-bar i { right: 50%; background: var(--red); }
.pm-l { grid-area: l; font: 600 11px var(--mono); color: var(--t3); text-align: right; }
@media (max-width: 600px) {
  .pm2 { grid-template-columns: 1fr; }
  .fo-r { flex-direction: column; align-items: stretch; gap: 8px; }
}
.pm2 .pm-r.t4, .pm2 .pm-r.t0 { border-left: 1px solid var(--b1); }
.pm-l b { color: var(--t1); font-weight: 700; }
.fo-x em { font: 600 11px var(--mono); font-style: normal; opacity: .85; }
.fo-x.t3 em, .fo-x.t4 em { color: var(--green); } .fo-x.t0 em, .fo-x.t1 em { color: var(--red); }

/* ===== matchups v4: away | home, a bar per position ===== */
.mu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mu-side { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--b1); }
.mu-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--t3); margin-bottom: 2px; }
.mu-h b { color: var(--t1); font-size: var(--fs-14); }
.mu-r { display: grid; gap: 5px; }
.mu-top { display: flex; justify-content: space-between; align-items: baseline; }
.mu-p { font-size: var(--fs-13); font-weight: 600; color: var(--t1); }
.mu-w { font-size: var(--fs-12); font-weight: 700; }
.mu-bar { height: 8px; border-radius: var(--r-sm); background: var(--b1); overflow: hidden; }
.mu-bar i { display: block; height: 100%; border-radius: var(--r-sm); transition: width .35s var(--ease); }
.mu-r.t3 .mu-bar i, .mu-r.t4 .mu-bar i { background: var(--green); } .mu-r.t3 .mu-w, .mu-r.t4 .mu-w { color: var(--green); }
.mu-r.t2 .mu-bar i { background: var(--text-4); } .mu-r.t2 .mu-w { color: var(--t3); }
.mu-r.t0 .mu-bar i, .mu-r.t1 .mu-bar i { background: var(--red); } .mu-r.t0 .mu-w, .mu-r.t1 .mu-w { color: var(--red); }
.mu-n { font-size: var(--fs-11); color: var(--t3); }
@media (max-width: 420px) { .mu { gap: 8px; } .mu-side { padding: 10px; } .mu-h span { font-size: var(--fs-11); } }
.mu-y { font-size: var(--fs-11); color: var(--t2); line-height: 1.35; } .mu-y b { font-family: var(--mono); color: var(--t1); }
.mu-n { font-weight: 500; margin-left: 4px; }
.mu-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: var(--fs-11); color: var(--t3); }
.mu-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.mu-key .g::before { background: var(--green); } .mu-key .r::before { background: var(--red); }
.mu-r { padding: 10px 0; border-top: 1px solid var(--b1); } .mu-h + .mu-r { border-top: 0; padding-top: 4px; }
.mu-bar { position: relative; } .mu-bar u { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: rgba(241,245,249,.35); z-index: 1; }
.mu-y { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.mu-y b { font-size: var(--fs-13); }
.mu-k { font-size: var(--fs-11); font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--s2); color: var(--t2); }
.mu-r.t3 .mu-k, .mu-r.t4 .mu-k { background: rgba(78,238,82,.1); color: var(--green); }
.mu-r.t0 .mu-k, .mu-r.t1 .mu-k { background: rgba(251,113,133,.1); color: var(--red); }
.mu-a { flex-basis: 100%; font-size: var(--fs-11); color: var(--t3); }
.mu-side { animation: cardEnter .35s var(--ease) both; } .mu-side + .mu-side { animation-delay: .04s; }

/* ===== player lines v2: verdict-first rows, tap for recent games vs the line ===== */
.pl-hint { font-size: var(--fs-12); color: var(--t3); margin: 4px 0 10px; }
.pl-p-card { border: 1px solid var(--b1); border-radius: var(--r-lg); background: var(--s1); margin: 0 0 10px; overflow: hidden; animation: cardEnter .35s var(--ease) both; }
.pl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px 8px; }
.pl-n { font-size: var(--fs-16); font-weight: 700; color: var(--t1); text-decoration: none; }
.pl-s { border-top: 1px solid var(--b1); }
.pl-s summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 74px 1fr auto 14px; gap: 10px; align-items: center; padding: 12px 14px; transition: background .15s; }
.pl-s summary::-webkit-details-marker { display: none; }
.pl-s summary:hover { background: rgba(255,255,255,.02); }
.pl-s.has summary { box-shadow: inset 3px 0 0 var(--green); }
.pl-st { font-size: var(--fs-13); font-weight: 600; color: var(--t2); }
.pl-v { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pl-lean { font-size: var(--fs-16); color: var(--t1); white-space: nowrap; }
.pl-ch { font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-none { font-size: var(--fs-13); color: var(--t3); }
.pl-p { font-size: var(--fs-12); color: var(--t3); white-space: nowrap; }
.pl-p em { font-style: normal; } .pl-p em.up { color: var(--green); } .pl-p em.dn { color: var(--red); }
.pl-x { color: var(--t3); font-size: var(--fs-20); transition: transform .2s var(--ease); }
.pl-s[open] .pl-x { transform: rotate(90deg); }
.pl-d { padding: 4px 14px 14px; }
.plc { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 18px 0 18px; margin: 0 0 12px; }
.plc-g { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.plc-g i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; }
.plc-g.o i { background: var(--green); } .plc-g.u i { background: rgba(251,113,133,.75); }
.plc-g b { font: 600 11px var(--mono); color: var(--t3); margin-bottom: 2px; white-space: nowrap; }
.plc-g small { position: absolute; bottom: -16px; font: 600 11px var(--mono); color: var(--t3); }
.plc-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(241,245,249,.55); z-index: 1; pointer-events: none; margin-bottom: 18px; }
.plc-line span { position: absolute; right: 0; top: -17px; font: 700 11px var(--mono); color: var(--t1); background: var(--s1); padding: 0 4px; border-radius: 4px; }
.pl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-tiles div { background: var(--s0); border: 1px solid var(--b1); border-radius: var(--r-md); padding: 8px 10px; }
.pl-tiles span { display: block; font-size: var(--fs-11); font-weight: 600; color: var(--t3); }
.pl-tiles b { font: 700 16px var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); }
.pl-note { font-size: var(--fs-12); color: var(--amber); margin: 10px 0 0; }
@media (max-width: 600px) {
  .pl-s summary { grid-template-columns: 62px 1fr auto 12px; gap: 8px; padding: 12px; }
  .pl-p { display: none; }
  .pl-s[open] .pl-p { display: none; }
}
.plc-t { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin: 4px 0 0; }
/* chart fix: bars, labels and the line all share one plot box */
.plc { padding: 0 !important; height: 120px; margin: 26px 0 30px !important; }
.plc-g { flex-direction: row !important; align-items: flex-end !important; justify-content: center; }
.plc-g b { position: absolute; left: 0; right: 0; text-align: center; margin: 0 !important; }
.plc-line { margin-bottom: 0 !important; }

/* phones: cleaner home — no next-kickoff bar, no note under Most likely */
@media (max-width: 600px) { .nextko { display: none !important; } .btab-note.picks { display: none !important; } }

/* ===== sim + game script v2 ===== */
.sm-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 0 2px; }
.sm-tm { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--t2); } .sm-tm.r { justify-content: flex-end; }
.sm-big { font-size: 36px; font-weight: 800; color: var(--t1); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sm-big i { font-style: normal; color: var(--t3); margin: 0 6px; }
.sm-rng { text-align: center; font-size: var(--fs-12); color: var(--t3); margin: 2px 0 14px; } .sm-rng b { color: var(--t1); font-family: var(--mono); }
.sm-m { display: grid; gap: 12px; }
.sm-t { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-13); font-weight: 600; color: var(--t1); }
.sm-t b { font-size: var(--fs-20); font-weight: 800; }
.sm-bar { height: 6px; border-radius: var(--r-sm); background: var(--b1); margin-top: 6px; overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: var(--r-sm); }
.sm-s { font-size: var(--fs-11); color: var(--t3); margin-top: 4px; font-family: var(--mono); }
.gs-story { font-size: var(--fs-14); line-height: 1.5; color: var(--t2); margin: 2px 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s1); border-left: 3px solid var(--info); }
.gs-story b { color: var(--t1); }
.gs-key { display: flex; justify-content: space-between; font-size: var(--fs-13); font-weight: 700; margin-bottom: 6px; }
.gs-key span { display: flex; align-items: center; gap: 6px; } .gs-key .a { color: var(--info); } .gs-key .h { color: var(--text-2); }
.gs-sec { margin: 0 0 14px; }
.gs-h { font-size: var(--fs-11); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--b1); }
.gs-h small { letter-spacing: 0; text-transform: none; font-weight: 600; margin-left: 4px; }
.tw { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: 6px 0; }
.tw-v { font-size: var(--fs-16); font-weight: 700; color: var(--t3); font-variant-numeric: tabular-nums; } .tw-v.r { text-align: right; } .tw-v.w { color: var(--t1); }
.tw-l { font-size: var(--fs-12); color: var(--t2); text-align: center; margin-bottom: 4px; }
.tw-b { display: flex; gap: 2px; height: 8px; }
.tw-b i { display: block; height: 100%; opacity: .3; transition: width .4s var(--ease); }
.tw-b i.a { background: var(--info); border-radius: 8px 0 0 8px; } .tw-b i.h { background: var(--text-2); border-radius: 0 8px 8px 0; }
.tw-b i.w { opacity: 1; }
.gs-vol { font-size: var(--fs-12); color: var(--t3); margin: 0 0 14px; line-height: 1.5; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 600; color: var(--t1); text-decoration: none;
  background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.3); transition: transform .15s, border-color .15s; }
.gs-chip span { font: 600 11px var(--mono); color: var(--green); }
.gs-chip:hover { transform: translateY(-1px); border-color: var(--green); }

/* ===== game state: team switch + three situation cards ===== */
.gst-r { position: absolute; opacity: 0; pointer-events: none; }
.gst-sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-md); background: var(--s0); border: 1px solid var(--b1); margin-bottom: 12px; }
.gst-sw label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; font-weight: 700; font-size: var(--fs-14); color: var(--t3); cursor: pointer; transition: color .2s; }
.gst-k { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-sm); background: var(--s2); box-shadow: inset 0 0 0 1px var(--b2), 0 1px 2px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.gst-r.i1:checked ~ .gst-sw .gst-k { transform: translateX(100%); }
.gst-r.i0:checked ~ .gst-sw label:nth-of-type(1), .gst-r.i1:checked ~ .gst-sw label:nth-of-type(2) { color: var(--t1); }
.gst-p { display: none; animation: cardEnter .3s var(--ease) both; }
.gst-r.i0:checked ~ .gst-p.p0, .gst-r.i1:checked ~ .gst-p.p1 { display: block; }
.gst-r:focus-visible ~ .gst-sw { outline: 2px solid var(--green); outline-offset: 2px; }
.gst-say { font-size: var(--fs-13); color: var(--t2); margin: 0 0 10px; line-height: 1.45; }
.gst-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gst-c { padding: 10px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--b1); border-top: 3px solid var(--t3); min-width: 0; }
.gst-c.up { border-top-color: var(--green); } .gst-c.dn { border-top-color: var(--red); } .gst-c.mid { border-top-color: var(--text-4); }
.gst-l { font-size: var(--fs-11); font-weight: 700; color: var(--t2); }
.gst-pts { font-size: var(--fs-24); font-weight: 800; color: var(--t1); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.gst-pts small { font: 600 11px var(--sans); color: var(--t3); margin-left: 3px; }
.gst-sh { font-size: var(--fs-11); color: var(--t3); margin-bottom: 8px; }
.gst-pr { height: 6px; border-radius: var(--r-sm); background: var(--text-4); overflow: hidden; }
.gst-pr i { display: block; height: 100%; background: var(--info); }
.gst-ps { display: flex; justify-content: space-between; font: 600 11px var(--mono); color: var(--t3); margin-top: 4px; }
.gst-ps span:first-child { color: var(--info); }
.gst-key { font-size: var(--fs-11); color: var(--t3); margin: 8px 0 0; } .gst-key .pass { color: var(--info); } .gst-key .run { color: var(--text-3); }
.gst-ps { font: 600 11px var(--sans) !important; white-space: nowrap; gap: 4px; }
.gst-pts small { font-size: var(--fs-12) !important; font-weight: 600 !important; }
.gst-ps { font-size: var(--fs-11) !important; font-weight: 600 !important; font-family: inherit !important; }
.gst-ps span { overflow: hidden; text-overflow: ellipsis; }

/* ===== player lines: team switch (away | home) ===== */
.plf-r { position: absolute; opacity: 0; pointer-events: none; }
.plf-sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-md); background: var(--s0); border: 1px solid var(--b1); margin: 0 0 12px; }
.plf-sw label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; font-weight: 700; font-size: var(--fs-14); color: var(--t3); cursor: pointer; transition: color .2s; }
.plf-k { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-sm); background: var(--s2); box-shadow: inset 0 0 0 1px var(--b2), 0 1px 2px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.plf-r.i1:checked ~ .plf-sw .plf-k { transform: translateX(100%); }
.plf-r.i0:checked ~ .plf-sw label:nth-of-type(1), .plf-r.i1:checked ~ .plf-sw label:nth-of-type(2) { color: var(--t1); }
.plf-r.i0:checked ~ .pl-list .tH, .plf-r.i1:checked ~ .pl-list .tA { display: none; }
.plf-r:focus-visible ~ .plf-sw { outline: 2px solid var(--green); outline-offset: 2px; }

/* player line detail v3: one plain sentence, history chart, three tiles */
.pl-why { font-size: var(--fs-14); line-height: 1.5; color: var(--t2); margin: 2px 0 12px; }
.pl-why b { color: var(--t1); } .pl-why b.up { color: var(--green); } .pl-why b.dn { color: var(--red); }
.plc-few { font-size: var(--fs-12); color: var(--amber); margin: 4px 0 0; }
.pl-tiles em { display: block; font-style: normal; font-size: var(--fs-11); color: var(--t3); margin-top: 2px; }
.plc-g.old i { opacity: .45; } .plc-g small { white-space: nowrap; font-size: var(--fs-11); }
.pl-why b.dn, .pl-why b.up { color: var(--green); }
.plc-g small { font-size: var(--fs-11); }

/* closed-row mini chart */
.pl-s summary { grid-template-columns: 74px 1fr 96px 14px !important; }
.pl-sp { position: relative; display: flex; align-items: flex-end; gap: 2px; width: 96px; height: 30px; }
.pl-sp i { flex: 1; border-radius: 2px 2px 1px 1px; }
.pl-sp i.o { background: var(--green); } .pl-sp i.u { background: rgba(251,113,133,.7); }
.pl-sp u { position: absolute; left: -2px; right: -2px; border-top: 1px dashed rgba(241,245,249,.7); }
.pl-sp b { position: absolute; left: -3px; right: -3px; height: 2px; background: var(--info); box-shadow: 0 0 0 1px rgba(4,8,13,.6); border-radius: 2px; }
.pl-s[open] .pl-sp { visibility: hidden; }
@media (max-width: 600px) {
  .pl-s summary { grid-template-columns: 60px 1fr 72px 12px !important; gap: 8px; }
  .pl-sp { width: 72px; height: 26px; gap: 1px; }
  .pl-lean, .pl-ch { font-size: var(--fs-14); }
}

/* history-disagrees warning tag */
.htag { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0; padding: 1px 8px; border-radius: var(--r-pill); font: 700 11px var(--sans);
  color: var(--warn); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); white-space: nowrap; }
.htag::before { content: "⚠"; font-size: var(--fs-11); }
.pl-v .htag { margin: 0 0 0 2px; }
/* history note: quiet text, not a badge */
.htag { border: 0 !important; background: none !important; padding: 0 !important; font-weight: 600 !important; margin-top: 2px; }
.pl-sp { justify-content: flex-end; }

/* ===== Season outlook ===== */
.ss-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.ss-tc { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid var(--b1); box-shadow: 0 1px 2px rgba(0,0,0,.4);
  text-decoration: none; color: inherit; animation: cardEnter .35s var(--ease) both; transition: transform .15s, border-color .15s; }
.ss-tc:hover { transform: translateY(-1px); border-color: var(--b2); }
.ss-l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.ss-tr { display: flex; align-items: center; gap: 10px; } .ss-tr b { font-size: var(--fs-32); font-weight: 800; color: var(--green); }
.ss-s { font-size: var(--fs-12); color: var(--t2); }
.ss-ctl { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.ss-ctl .chips { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ss-sort { background: var(--s1); color: var(--t1); border: 1px solid var(--b2); border-radius: var(--r-pill); padding: 6px 10px; font: 600 12px var(--sans); }
.ss-card { padding: 6px 14px 10px; margin-bottom: 12px; }
.ss-dv { font-size: var(--fs-11); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); padding: 10px 0 2px; }
.ss-h, .ss-r { display: grid; grid-template-columns: minmax(110px, 1.3fr) 80px minmax(110px, 1.3fr) 70px 64px 76px 84px; gap: 8px; align-items: center; }
.ss-h { font-size: var(--fs-11); font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 0 6px; }
.ss-h span:not(:first-child) { text-align: right; }
.ss-r { padding: 8px 0; border-top: 1px solid var(--b1); text-decoration: none; color: var(--t2); animation: cardEnter .3s var(--ease) both; transition: background .15s; }
.ss-r:hover { background: rgba(255,255,255,.02); }
.ss-tm { display: flex; align-items: center; gap: 8px; min-width: 0; } .ss-tm b { color: var(--t1); font-size: var(--fs-14); } .ss-tm small { color: var(--t3); font-size: var(--fs-12); font-family: var(--mono); }
.ss-n { text-align: right; font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.ss-sb { color: var(--t1); font-weight: 700; }
.ss-po { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .ss-po b { font-size: var(--fs-13); color: var(--t1); min-width: 38px; text-align: right; }
.ss-bar { flex: 1; max-width: 80px; height: 6px; border-radius: var(--r-sm); background: var(--b1); overflow: hidden; } .ss-bar i { display: block; height: 100%; border-radius: var(--r-sm); }
.ss-chip { text-decoration: none; color: var(--green) !important; border-color: rgba(78,238,82,.35) !important; background: rgba(78,238,82,.08) !important; }
@media (max-width: 700px) {
  .ss-top { grid-template-columns: 1fr; }
  .ss-hide { display: none; }
  .ss-h, .ss-r { grid-template-columns: minmax(92px, 1.2fr) 66px minmax(84px, 1fr) 56px 64px; gap: 6px; }
  .ss-bar { max-width: 40px; }
}
@media (max-width: 700px) {
  .ss-top { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .ss-tc { padding: 10px; gap: 4px; }
  .ss-l { font-size: var(--fs-11); letter-spacing: .04em; }
  .ss-tr { gap: 6px; } .ss-tr b { font-size: var(--fs-20); } .ss-tr img { width: 24px; height: 24px; }
  .ss-s { display: none; }
}
.stake { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--r-pill); font: 700 11px var(--mono); color: var(--green); background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.3); vertical-align: 1px; }
.shop { display: inline-block; margin: 4px 6px 0 0; padding: 1px 8px; border-radius: var(--r-pill); font: 700 11px var(--sans); color: var(--info); background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.3); }

/* You vs LineScout */
.yvu-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.yvu-g > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--b1); }
.yvu-g .l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.yvu-g b { font-size: var(--fs-24); color: var(--t1); }
.yvu-r { display: grid; grid-template-columns: 1fr 64px 72px; gap: 8px; padding: 8px 0; border-top: 1px solid var(--b1); font-size: var(--fs-13); color: var(--t2); }
.yvu-r span:not(:first-child) { text-align: right; }

/* ===== Results hero ===== */
.rsh { padding: 20px 22px; }
.rsh-top { display: grid; grid-template-columns: 1.1fr 1.4fr 1.3fr; gap: 22px; align-items: center; }
.rsh-l { font-size: var(--fs-11); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); display: flex; align-items: center; gap: 8px; }
.rsh-big { font-size: 44px; font-weight: 800; color: var(--t1); letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rsh-big i { font-style: normal; color: var(--t3); margin: 0 4px; font-weight: 600; }
.rsh-sub { font-size: var(--fs-12); color: var(--t3); margin-top: 2px; }
.rsh-mid { font-size: var(--fs-24); font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rsh-acc { padding: 0 22px; border-left: 1px solid var(--b1); border-right: 1px solid var(--b1); }
.rsh-tag { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 8px; border-radius: var(--r-pill); }
.rsh-tag.rsh-ok { color: var(--green); background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.3); }
.rsh-tag.rsh-hot { color: var(--warn); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); }
.rsh-meter { position: relative; height: 10px; border-radius: var(--r-md); background: var(--b1); margin: 14px 0 10px; }
.rsh-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-md); background: var(--green); }
.rsh-meter b { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--t1); box-shadow: 0 0 0 2px var(--s1); }
.rsh-acc-k { display: flex; gap: 18px; font-size: var(--fs-12); color: var(--t2); }
.rsh-acc-k span { display: flex; align-items: center; gap: 6px; } .rsh-acc-k b { color: var(--t1); font-size: var(--fs-14); }
.rsh-acc-k em { width: 10px; height: 4px; border-radius: 2px; display: inline-block; } .rsh-acc-k em.won { background: var(--green); } .rsh-acc-k em.said { background: var(--t1); width: 3px; height: 10px; }
.rsh-money { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rsh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--b1); }
.rsh-chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-12); color: var(--t2); background: var(--s2); border: 1px solid var(--b1); }
.rsh-chip b { font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase; }
.rsh-chip.up b { color: var(--green); } .rsh-chip.dn b { color: var(--red); } .rsh-chip.n b { color: var(--t3); }
.rsh-spark { margin-top: 16px; } .rsh-spark svg { width: 100%; height: 64px; display: block; margin-top: 6px; }
.rsh-spark path { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; } .rsh-spark path.g { stroke: var(--green); } .rsh-spark path.r { stroke: var(--red); }
.rsh-spark circle.g { fill: var(--green); } .rsh-spark circle.r { fill: var(--red); }
.rsh-spark line.z { stroke: rgba(241,245,249,.18); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rsh-wk { display: flex; justify-content: space-between; font: 600 11px var(--mono); color: var(--t3); margin-top: 4px; }
.rsh-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--b1); }
.rsh-notes ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rsh-notes li { display: grid; gap: 2px; } .rsh-notes li b { font-size: var(--fs-13); color: var(--t1); font-weight: 600; } .rsh-notes li span { font-size: var(--fs-12); color: var(--t3); }
@media (max-width: 760px) {
  .rsh { padding: 16px; }
  .rsh-top { grid-template-columns: 1fr; gap: 16px; }
  .rsh-acc { padding: 16px 0; border: 0; border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
  .rsh-big { font-size: 38px; }
  .rsh-notes { grid-template-columns: 1fr; gap: 14px; }
}

.rsh-strip { margin-top: 16px; }
.rsh-sq { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.rsh-sq i, .rsh-sqk i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rsh-sq i.w, .rsh-sqk i.w { background: var(--green); } .rsh-sq i.l, .rsh-sqk i.l { background: rgba(251,113,133,.75); }
.rsh-sqk { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; font-size: var(--fs-12); color: var(--t3); align-items: center; }
.rsh-sqk b { color: var(--t1); } .rsh-sqk span { display: inline-flex; gap: 6px; align-items: center; }
.rsh-tag { white-space: nowrap; }

/* confidence bands */
.rsh-bands { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--b1); }
.rsh-band { display: grid; grid-template-columns: 110px 1fr 64px 64px; gap: 14px; align-items: center; padding: 8px 0; }
.rsh-bl { font-size: var(--fs-14); font-weight: 700; color: var(--t1); display: flex; flex-direction: column; } .rsh-bl small { font-size: var(--fs-11); font-weight: 500; color: var(--t3); }
.rsh-bt { position: relative; height: 22px; border-radius: var(--r-sm); background: var(--b1); overflow: visible; }
.rsh-bt i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); } .rsh-bt i.rsh-ok { background: rgba(78,238,82,.85); } .rsh-bt i.rsh-hot { background: rgba(251,191,36,.8); }
.rsh-bt b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--t1); box-shadow: 0 0 0 2px var(--s1); }
.rsh-bt em { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 700 12px var(--mono); font-style: normal; color: var(--bg); }
.rsh-br { font-size: var(--fs-14); color: var(--t1); text-align: right; } .rsh-bp { font-size: var(--fs-14); font-weight: 700; text-align: right; }
.rsh-bk { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; font-size: var(--fs-11); color: var(--t3); align-items: center; }
.rsh-bk span { display: inline-flex; gap: 6px; align-items: center; } .rsh-bk i { width: 12px; height: 8px; border-radius: 2px; background: rgba(78,238,82,.85); } .rsh-bk b { width: 3px; height: 12px; border-radius: 2px; background: var(--t1); }
@media (max-width: 760px) { .rsh-band { grid-template-columns: 74px 1fr 48px 52px; gap: 8px; } }
.rsh-band { grid-template-columns: 110px 1fr 64px 92px; }
@media (max-width: 760px) { .rsh-band { grid-template-columns: 70px 1fr 44px 78px; } }

/* confidence levels v2: a sentence per row + slim bar */
.rsh-band2 { padding: 10px 0; border-top: 1px solid var(--b1); } .rsh-bands .rsh-l + .rsh-band2 { border-top: 0; }
.rsh-b2-top { display: grid; grid-template-columns: 120px 1fr auto 56px 90px; gap: 12px; align-items: center; }
.rsh-b2-top b { font-size: var(--fs-14); color: var(--t1); }
.rsh-b2-s { font-size: var(--fs-13); color: var(--t2); } .rsh-b2-s i { font-style: normal; color: var(--t3); margin: 0 4px; } .rsh-b2-s strong { color: var(--t1); }
.rsh-b2-r { font-size: var(--fs-13); color: var(--t2); text-align: right; } .rsh-b2-p { font-size: var(--fs-14); font-weight: 700; text-align: right; }
.rsh-pill { font-size: var(--fs-11); font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.rsh-pill.rsh-ok { color: var(--green); background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.3); }
.rsh-pill.rsh-up { color: var(--info); background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.3); }
.rsh-pill.rsh-hot { color: var(--warn); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); }
.rsh-b2-bar { position: relative; height: 6px; border-radius: var(--r-sm); background: var(--b1); margin-top: 8px; }
.rsh-b2-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); }
.rsh-b2-bar i.rsh-ok { background: var(--green); } .rsh-b2-bar i.rsh-up { background: var(--info); } .rsh-b2-bar i.rsh-hot { background: var(--warn); }
.rsh-b2-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--t1); border-radius: 2px; }
@media (max-width: 760px) {
  .rsh-b2-top { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rsh-b2-s { grid-column: 1 / -1; order: 3; }
  .rsh-b2-r { display: none; }
}

/* week pill doubles as the week picker */
.wkpill { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wkpill i { font-style: normal; font-size: var(--fs-11); opacity: .7; }
.wkpill select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: var(--fs-16); }
.wkpill:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.rsh-b2-top { grid-template-columns: 120px 1fr auto 56px 124px; }
.rsh-b2-p { white-space: nowrap; }

/* Sport switcher beside the logo (LineScout home lists every sport) */
.brandgrp { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
.brand .brandgrp .brandlink { margin: 0 !important; }
.sportsw { position: relative; flex: none; }
.sportsw summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px; font: 700 11px/1 var(--mono); letter-spacing: .06em;
  color: var(--green); background: var(--green-dim); border: 1px solid var(--green-line); border-radius: var(--r-pill); padding: 5px 9px; }
.sportsw summary::-webkit-details-marker { display: none; }
.sportsw[open] summary svg { transform: rotate(180deg); }
.sw-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 170px; padding: 6px; background: var(--s2);
  border: 1px solid var(--b2); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,.5); display: grid; gap: 2px; }
.sw-menu > a, .sw-menu > .sw-off { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font: 700 13px/1.2 var(--mono); }
.sw-menu > a:hover { background: var(--s1); }
.sw-menu span span, .sw-menu a span { font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--t4); }
.sw-menu .on { color: var(--green); }
.sw-off { color: var(--t4); cursor: default; }
.sw-all { border-top: 1px solid var(--b1); margin-top: 4px; padding-top: 10px !important; font-family: inherit !important; font-weight: 600 !important; color: var(--t2); }
@media (max-width: 520px) {
  .brandgrp { gap: 8px; }
  .brandgrp .bw img { width: 132px; height: auto; }
  .sportsw summary { padding: 4px 7px; gap: 3px; }
}

/* Sport pills in the top bar; the search sits centered under the tabs */
.spnav { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.spnav a, .spnav .off { padding: 7px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-14); color: var(--t3); white-space: nowrap; transition: color .2s, background .2s; }
.spnav a:hover { color: var(--t1); background: var(--s1); }
.spnav a.on { color: var(--s0); background: var(--t1); }
.spnav .off { color: var(--t4); cursor: default; }
.spnav .off small { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .08em; }
.csearch { display: block !important; max-width: 620px !important; width: 100%; margin: 2px auto 18px !important; grid-column: auto !important; order: 0 !important; }
.brand .hi-search { display: none; }
@media (max-width: 720px) {
  .spnav { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .spnav::-webkit-scrollbar { display: none; }
  .spnav a, .spnav .off { padding: 6px 11px; font-size: var(--fs-13); }
}

/* Board game cards: the matchup is its own header band, clearly set apart from the picks below (NFL + NHL) */
.games > .card { overflow: hidden; }
.games > .card > .gh { background: linear-gradient(180deg, var(--s2), rgba(16,25,42,.55)); border-bottom: 1px solid var(--b2); padding: 14px 16px; }
.games > .card > .gh:hover { background: var(--s2); }
.games > .card > .gh .name { font-size: var(--fs-16); font-weight: 800; color: var(--t1); letter-spacing: .005em; }
.games > .card > .gh .logo { width: 38px; height: 38px; }
.games > .card > .gh .chip { background: var(--s0); border-color: var(--b2); color: var(--t1); }
.games > .card > .gh + .row { padding-top: 14px; }
.games > .card + .card, .games > .divider + .card { margin-top: 2px; }

/* Ask LineScout lives in the header (desktop) and the tab bar (phones); no floating button over the slip */
.chat-fab { display: none !important; }
.hb.ask-hd { color: var(--t1); background: var(--s1); border-color: var(--b2); cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-14); }
.hb.ask-hd svg { width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .hb.ask-hd { display: none !important; } }
/* game card header (NFL + NHL boards): logos + names on one row, the line chip on its own row below, so names never wrap */
.games > .card > .gh { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; }
.games > .card > .gh .grow { min-width: 0; }
.games > .card > .gh .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.games > .card > .gh .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.games > .card > .gh .chip { grid-column: 1 / -1; justify-self: start; margin-left: 0 !important; max-width: 100%; }
/* "Why this pick" reads as a control, not fine print (NFL + NHL) */
.whybtn { display: inline-flex; align-items: center; margin-top: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600;
  color: var(--t2) !important; background: var(--s0); border: 1px solid var(--b2) !important; text-decoration: none !important; }
.row:hover .whybtn { color: var(--t1) !important; border-color: rgba(255,255,255,.22) !important; }
.row.open .whybtn { color: var(--green) !important; border-color: var(--green-line) !important; }
/* one type scale for pick rows on every sport page */
.row .bet { font-size: var(--fs-16); font-weight: 600; }
.row .why { font-size: var(--fs-13); }
.row .pct { font-size: var(--fs-14); }
.row .odds { font-size: var(--fs-14); } .row .odds small { font-size: var(--fs-12); }
.row .reasons li { font-size: var(--fs-13); }
/* mid-width screens (laptops, tablets): keep the header on one clean row — drop the tagline and the button labels before anything overlaps */
@media (max-width: 1280px) {
  .brand .tag { display: none !important; }
  .hnav .hb span { display: none; }
  .hnav .hb { width: 40px; padding: 0 !important; justify-content: center; }
  .brand { grid-template-columns: auto minmax(0, 1fr) auto !important; }
}
@media (max-width: 1280px) { .spnav .off { display: none; } .spnav { justify-content: center; overflow: hidden; } }
.acct-out { display: block; margin-top: 18px; padding: 10px 0 2px; border-top: 1px solid var(--b1); font-size: var(--fs-14); font-weight: 600; color: var(--red); }
.acct-out:hover { text-decoration: underline; }

.rp-win { margin: 0; }
.rp-win button { min-height: 30px; padding: 5px 11px; font-size: var(--fs-12); font-family: var(--mono); }

/* Sharp money tab (Polymarket) */
.sh-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.sh-st { background: var(--s2, var(--surface-2)); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sh-st span { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.sh-st b { font-size: var(--fs-24); font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; } .sh-st small { font-size: var(--fs-12); color: var(--t3); }
.sh-gauge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 16px 10px; font-size: var(--fs-12); color: var(--t2); }
.sh-bar { height: 6px; border-radius: var(--r-pill); background: rgba(96,165,250,.25); overflow: hidden; } .sh-bar i { display: block; height: 100%; background: var(--info); border-radius: var(--r-pill); }
.sh-m { border-top: 1px solid var(--b1); }
.sh-m > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 58px minmax(0, 1fr) 84px 72px; gap: 10px; align-items: center; padding: 10px 16px; }
.sh-m > summary::-webkit-details-marker { display: none; } .sh-m > summary:hover { background: rgba(255,255,255,.02); }
.sh-m .bet .pill { margin-left: 4px; vertical-align: 1px; }
.sh-m .prob .bar i { background: var(--info); } .sh-m .prob .pct { color: var(--info); }
.sh-who { padding: 0 16px 12px 84px; display: flex; flex-direction: column; gap: 8px; }
.sh-gap { margin: 0; font-size: var(--fs-12); color: var(--warn); }
.sh-side > b { display: block; font-size: var(--fs-12); color: var(--t3); margin-bottom: 4px; }
.sh-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 4px 0; font-size: var(--fs-13); color: var(--t1); text-decoration: none; }
.sh-h:hover span:first-child { text-decoration: underline; } .sh-h .muted { font-size: var(--fs-12); }
.sh-new { color: var(--win); font-weight: 700; }
.sh-t td, .sh-t th { white-space: nowrap; }
@media (max-width: 600px) {
  .sh-strip { grid-template-columns: 1fr 1fr; } .sh-strip .sh-st:last-child { grid-column: 1 / -1; }
  .sh-m > summary { grid-template-columns: 48px minmax(0, 1fr) 64px; } .sh-m .prob { display: none; }
  .sh-who { padding-left: 16px; } .sh-h { grid-template-columns: minmax(0, 1fr) auto; } .sh-h .muted { grid-column: 1 / -1; }
}

/* parlay price check on the slip (NFL + NHL) */
.bkc { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--b1); border-radius: var(--r-md); background: var(--s1); }
.bk-l { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-12); font-weight: 600; color: var(--t2); }
.bk-in { width: 90px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--b1); background: var(--s0, var(--bg)); color: var(--t1); font: 600 14px var(--mono); text-align: right; }
.bk-in:focus { outline: none; border-color: rgba(96,165,250,.5); }
.bk-res { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: var(--fs-12); color: var(--t3); }
.bk-v { font-size: var(--fs-13); font-weight: 700; } .bk-v.g { color: var(--win); } .bk-v.r { color: var(--loss); }
.bk-n { font-family: var(--mono); color: var(--t2); } .bk-n b { color: var(--t1); }
.bk-hint { font-size: var(--fs-12); color: var(--t4, var(--text-4)); }

.pbands .pb-on, .pbands .pb-off { font-size: var(--fs-11); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.pbands .pb-on { color: var(--win); background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.25); }
.pbands .pb-off { color: var(--loss); background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.25); }

/* Trends tab (NFL + NHL) */
.tr-ctl { gap: 8px; } .tr-ctl .seg { margin: 0; }
.tr-r { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px 70px 78px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--b1); }
.tr-m b { font-size: var(--fs-14); color: var(--t1); } .tr-m small { display: block; font-size: var(--fs-12); color: var(--t4, var(--text-4)); margin-top: 2px; }
.tr-s { font-size: var(--fs-13); font-weight: 600; } .tr-s.o { color: var(--win); } .tr-s.u { color: var(--info); }
.tr-dots { display: flex; gap: 3px; } .tr-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--loss); } .tr-dots i.y { background: var(--win); }
.tr-k { text-align: right; line-height: 1.15; } .tr-k b { font-size: var(--fs-16); color: var(--t1); } .tr-k small { display: block; font-size: var(--fs-11); color: var(--t4, var(--text-4)); }
.tr-v { justify-self: end; font-size: var(--fs-11); font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.tr-v.g { color: var(--win); background: rgba(78,238,82,.08); border: 1px solid rgba(78,238,82,.3); }
.tr-v.r { color: var(--loss); background: rgba(251,113,133,.08); border: 1px solid rgba(251,113,133,.3); }
.tr-v.n { color: var(--t3); background: var(--s1); border: 1px solid var(--b1); }
@media (max-width: 600px) { .tr-r { grid-template-columns: minmax(0, 1fr) 50px 70px; } .tr-dots, .tr-k:nth-of-type(3) { display: none; } .tr-r .tr-v { grid-column: 2 / -1; } }

/* board: every game as an equal card in start order; one best-bet line each (NFL + NHL) */
.games.even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.games.even > .divider { grid-column: 1 / -1; }
.games.even > .gcard { display: flex; flex-direction: column; margin: 0; }
.games.even > .gcard > .gfoot { margin-top: auto; }
.gwp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px 2px; font-size: var(--fs-12); color: var(--t2); }
.gwp .wp-bar { height: 6px; border-radius: var(--r-pill); background: rgba(96,165,250,.28); overflow: hidden; }
.gwp .wp-bar i { display: block; height: 100%; background: var(--info); border-radius: var(--r-pill); }
.nobet { padding: 14px 16px; font-size: var(--fs-13); color: var(--t3); }
@media (max-width: 760px) { .games.even { grid-template-columns: 1fr; } }

/* ===== NHL layout pieces shared with the NFL page (2026-10-09) ===== */
/* Our Picks board tab */
.op-f { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.op-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-lab { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); width: 44px; }
.op-sel { background: var(--surface-2); color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 6px 12px; font: 600 13px var(--sans, system-ui); }
.op-g { overflow: hidden; }
.op-gh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(255,255,255,.06); }
.op-gh .op-n { margin-left: auto; font-size: var(--fs-12); color: var(--text-4); }
.op-gh:hover .op-n { color: var(--win); }
.op-it { position: relative; border-left: 3px solid var(--opc); }
.op-pick { --opc: var(--win); } .op-safe { --opc: var(--info); } .op-value { --opc: var(--warn); } .op-more { --opc: var(--text-off); }
.op-tag { position: absolute; top: 6px; right: 52px; font-size: var(--fs-11); font-weight: 700; letter-spacing: .04em; color: var(--opc); z-index: 1; pointer-events: none; }
.op-it > .row, .op-it > .sl-r { border-top: 1px solid rgba(255,255,255,.05); }
.op-m { padding: 8px 16px 0; font-size: var(--fs-11); font-weight: 600; color: var(--text-4); border-top: 1px solid rgba(255,255,255,.06); }
.op-m + .op-it > .row, .op-m + .op-it > .sl-r { border-top: 0; }
.op-par { margin-top: 12px; background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-lg); overflow: hidden; }
.op-par > summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; font-weight: 700; color: var(--text); }
.op-par > summary::-webkit-details-marker { display: none; } .op-par > summary .muted { font-weight: 500; font-size: var(--fs-13); }
.op-par[open] .pg-cv { transform: rotate(180deg); }
@media (max-width: 760px) { .op-tag { right: 12px; top: 4px; } .op-lab { width: auto; } }

.npar-why { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; padding: 6px 0 2px; border-top: 1px solid rgba(255,255,255,.06); }


/* Our Picks v2: type tiles + one filter row */
.op-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.op-tile { position: relative; text-align: left; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 11px 12px; color: var(--text-2); cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.op-tile:hover { border-color: rgba(255,255,255,.14); }
.op-tile .op-ti { font-size: var(--fs-16); grid-row: 1 / 3; } .op-tile b { font-size: var(--fs-14); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tile .op-tn { font-size: var(--fs-13); font-weight: 700; color: var(--text-3); } .op-tile small { grid-column: 2 / 4; font-size: var(--fs-11); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tile.on { background: color-mix(in srgb, var(--opc) 10%, var(--surface-2)); border-color: var(--opc); box-shadow: inset 0 -2px 0 var(--opc); } .op-tile.on .op-tn { color: var(--opc); }
.op-tile.op-parlays { --opc: var(--info); }
.op-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.op-dd { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-pill); padding: 4px 6px 4px 12px; }
.op-dd span { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.op-dd select { background: transparent; border: 0; color: var(--text); font: 600 13px var(--sans, system-ui); padding: 3px 4px; outline: 0; cursor: pointer; } .op-dd select option { background: var(--surface-2); }
@media (max-width: 860px) { .op-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .op-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-dd { flex: 1 1 100%; } .op-dd select { flex: 1; } }


/* Picks v2: Our bets groups + All lines bar; tighter rows */
.pg { margin: 10px 16px 0; border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--pgc); border-radius: var(--r-md); overflow: hidden; }
.pg:last-child { margin-bottom: 14px; }
.pg-pick { --pgc: var(--win); } .pg-safe { --pgc: var(--info); } .pg-value { --pgc: var(--warn); } .pg-more { --pgc: var(--text-4); }
.pg-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: color-mix(in srgb, var(--pgc) 8%, transparent); }
.pg-t { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pgc); }
.pg-s { font-size: var(--fs-12); color: var(--text-4); }
.pg-empty { padding: 10px 14px; font-size: var(--fs-13); color: var(--text-4); }
.pg .row, .pg .sl-r { padding-left: 14px; padding-right: 14px; }
#g-picks .row { padding-top: 7px; padding-bottom: 7px; }
#g-picks .row .why { font-size: var(--fs-12); line-height: 1.35; }
#g-picks .row .pill { font-size: var(--fs-11); padding: 2px 8px; }
#g-picks .whybtn { font-size: var(--fs-12); padding: 1px 8px; margin-top: 3px; }
#g-picks .sl-r { padding-top: 7px; padding-bottom: 7px; }
.al-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px 6px; }
.al-bar select, .al-q { background: var(--surface-2); color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 7px 10px; font: 600 13px var(--sans, system-ui); }
.al-q { flex: 1; min-width: 150px; font-weight: 500; }
.al-n { font-size: var(--fs-12); color: var(--text-4); margin-left: auto; }

details.pg > summary { cursor: pointer; list-style: none; } details.pg > summary::-webkit-details-marker { display: none; }
.pg-cv { margin-left: auto; color: var(--text-4); transition: transform .2s var(--ease); } details.pg[open] .pg-cv { transform: rotate(180deg); }
.pg-n { margin-left: 4px; font-size: var(--fs-11); color: var(--text-3); background: rgba(255,255,255,.06); border-radius: var(--r-pill); padding: 1px 7px; letter-spacing: 0; }

.al-more { display: block; width: calc(100% - 32px); margin: 8px 16px 14px; padding: 9px; background: transparent; color: var(--text-2); border: 1px dashed rgba(255,255,255,.14); border-radius: var(--r-md); font: 600 13px var(--sans, system-ui); cursor: pointer; }
.al-more:hover { border-color: rgba(255,255,255,.3); color: var(--text); }


/* Trends v2: pills, streak controls, hot bets table */
.tr-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tr-pill { text-align: left; background: var(--surface-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 11px 14px; color: var(--text-2); cursor: pointer; font: inherit; }
.tr-pill b { display: block; font-size: var(--fs-14); color: var(--text); } .tr-pill small { font-size: var(--fs-12); color: var(--text-4); }
.tr-pill.on { border-color: var(--warn); background: rgba(251,191,36,.07); box-shadow: inset 0 -2px 0 var(--warn); }
.tr-ctl2 { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.tr-g { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--text-3); }
.hot2-hd, .hot2-r { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 64px 78px 104px; gap: 10px; align-items: center; padding: 9px 16px; }
.hot2-hd { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); padding-top: 4px; padding-bottom: 4px; }
.hot2-hd span:nth-child(n+3) { text-align: right; } .hot2-hd span:last-child { text-align: center; }
.hot2-r { border-top: 1px solid rgba(255,255,255,.05); font-size: var(--fs-14); }
.hot2-rk { color: var(--text-4); font-size: var(--fs-12); } .hot2-b b { color: var(--text); } .hot2-m { color: var(--text-3); } .hot2-b small { display: block; font-size: var(--fs-12); color: var(--text-4); margin-top: 1px; }
.hot2-o, .hot2-c { text-align: right; color: var(--text-2); } .hot2-c.ls { color: var(--text); font-weight: 700; }
.hv { justify-self: center; font-size: var(--fs-12); font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.hv-g { color: var(--win); background: rgba(78,238,82,.08); border-color: rgba(78,238,82,.3); } .hv-n { color: var(--text-3); border-color: rgba(255,255,255,.12); }
.hv-r { color: var(--loss); background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); } .hv-x { color: var(--text-off); border-color: rgba(255,255,255,.06); }
@media (max-width: 760px) { .hot2-hd { display: none; } .hot2-r { grid-template-columns: 22px minmax(0, 1fr) auto; } .hot2-o, .hot2-c { display: none; } .hot2-c.ls { display: block; grid-column: 2; text-align: left; font-size: var(--fs-12); } }


/* Context v2: public money, line moves, injuries */
.pm-key { margin: 0 0 12px; font-size: var(--fs-13); color: var(--text-3); line-height: 1.5; } .pm-key b { color: var(--text); }
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm { background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pm-t { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.pm-sides { font-size: var(--fs-12); color: var(--text-4); } .pm-sides b { color: var(--text-2); }
.pm-head { font-size: var(--fs-14); color: var(--text-2); margin-bottom: 2px; } .pm-head b { color: var(--text); }
.pm-r { display: grid; grid-template-columns: 46px 34px minmax(0, 1fr) 34px; gap: 6px; align-items: center; font-size: var(--fs-12); }
.pm-k { color: var(--text-4); font-weight: 600; } .pm-v { color: var(--text-3); text-align: center; } .pm-v.w { color: var(--text); font-weight: 700; }
.pm-bar { display: flex; gap: 2px; height: 8px; } .pm-bar i { display: block; height: 100%; border-radius: 3px; } .pm-bar .a { background: var(--info); } .pm-bar .h { background: var(--win); }
.pm-flag { margin-top: 4px; font-size: var(--fs-12); color: var(--warn); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); border-radius: var(--r-sm); padding: 5px 8px; }
.mv2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: var(--fs-14); color: var(--text-2); }
.mv2-l { display: flex; align-items: center; gap: 6px; } .mv2-p { color: var(--text-3); } .mv2-p i { font-style: normal; margin: 0 8px; color: var(--text-off); } .mv2-p b { color: var(--text); }
.mv2-n { text-align: right; font-size: var(--fs-13); color: var(--text-4); } .mv2-n.up { color: var(--win); } .mv2-n.dn { color: var(--loss); }
.inj-e.ok { color: var(--win); }
@media (max-width: 860px) { .pm-grid { grid-template-columns: 1fr; } .mv2 { grid-template-columns: 1fr auto; } .mv2-n { grid-column: 1 / -1; text-align: left; } }
.pm-key .mu-good { color: var(--win); font-weight: 700; } .pm-key .mu-bad { color: var(--loss); font-weight: 700; }


/* Results v2 */
.rs-scope { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .rs-scope small { color: var(--text-4); font-weight: 500; margin-left: 2px; } .rs-scope .on small { color: var(--text-off); }
.rs-head { padding: 16px; }
.rs-h1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: center; margin-bottom: 14px; }
.rs-big { font-size: var(--fs-32); font-weight: 800; line-height: 1.1; margin: 2px 0; }
.rs-spark svg { width: 100%; height: 64px; } .rs-spark .z { stroke: rgba(255,255,255,.12); stroke-dasharray: 3 3; } .rs-spark path { fill: none; stroke-width: 2.2; }
.rs-spark path.g { stroke: var(--win); } .rs-spark path.r { stroke: var(--loss); }
.rs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rs-tile { text-align: left; background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 11px 12px; color: var(--text-2); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; }
.rs-tile:hover { border-color: rgba(255,255,255,.16); } .rs-tile.on { border-color: var(--win); box-shadow: inset 0 -2px 0 var(--win); }
.rs-tt { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); } .rs-rec { font-size: var(--fs-24); font-weight: 800; color: var(--text); } .rs-rec small { font-size: var(--fs-11); font-weight: 600; color: var(--text-4); margin-left: 6px; }
.rs-m { font-size: var(--fs-13); font-weight: 700; } .rs-cal { font-size: var(--fs-12); color: var(--text-4); } .rs-cal.ok { color: var(--text-3); } .rs-cal.hot { color: var(--warn); }
.rs-note { margin: 10px 0 0; font-size: var(--fs-12); color: var(--text-4); }
.rs-day { border-top: 1px solid rgba(255,255,255,.06); } .rs-day > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 80px 18px; gap: 12px; align-items: center; padding: 11px 16px; font-size: var(--fs-14); color: var(--text-2); }
.rs-day > summary::-webkit-details-marker { display: none; } .rs-day > summary b { color: var(--text); } .rs-day[open] .pg-cv { transform: rotate(180deg); }
.rs-day > summary > span:nth-child(3) { text-align: right; }
.rs-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px 54px 70px 66px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.04); font-size: var(--fs-13); }
.rs-ty { font-size: var(--fs-16); text-align: center; } .rs-bet b { color: var(--text); font-weight: 600; } .rs-bet small { display: block; font-size: var(--fs-12); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-c, .rs-o, .rs-u { text-align: right; color: var(--text-2); }
.rs-r { justify-self: center; font-size: var(--fs-12); font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; border: 1px solid; }
.rs-r.w { color: var(--win); background: rgba(78,238,82,.08); border-color: rgba(78,238,82,.3); } .rs-r.l { color: var(--loss); background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); }
.rs-r.p { color: var(--text-3); border-color: rgba(255,255,255,.12); } .rs-r.o { color: var(--warn); border-color: rgba(251,191,36,.3); }
@media (max-width: 760px) { .rs-h1 { grid-template-columns: 1fr; } .rs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; } .rs-c, .rs-o { display: none; } }


/* Results v3: type panel + bet cards + Under the hood */
.rp { padding-bottom: 8px; }
.rp-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px 6px; }
.rp-t { font-size: var(--fs-16); font-weight: 700; color: var(--text); } .rp-s { font-size: var(--fs-13); color: var(--text-3); } .rp-h .linkbtn { margin-left: auto; }
.rp-f { display: flex; gap: 6px; padding: 4px 16px 10px; }
.rp-up { margin: 0 16px 10px; background: rgba(251,191,36,.05); border: 1px solid rgba(251,191,36,.2); border-radius: var(--r-md); }
.rp-up > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 10px 14px; font-size: var(--fs-13); font-weight: 600; color: var(--warn); }
.rp-up > summary::-webkit-details-marker { display: none; } .rp-up[open] .pg-cv { transform: rotate(180deg); } .rp-up .rb-grid { padding: 0 10px 10px; }
.rp-day { display: flex; gap: 12px; align-items: baseline; padding: 12px 16px 6px; font-size: var(--fs-13); color: var(--text-3); border-top: 1px solid rgba(255,255,255,.06); }
.rp-day b { color: var(--text); font-size: var(--fs-14); }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding: 4px 16px 10px; }
.rb { background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--text-off); border-radius: var(--r-md); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb.w { border-left-color: var(--win); } .rb.l { border-left-color: var(--loss); }
.rb-t { display: flex; align-items: center; gap: 8px; } .rb-t b { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-ic { font-size: var(--fs-14); } .rb-s { font-size: var(--fs-12); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-k { display: flex; gap: 10px; font-size: var(--fs-12); color: var(--text-3); } .rb-u { margin-left: auto; font-weight: 700; }
.uh > summary { list-style: none; } .uh > summary::-webkit-details-marker { display: none; } .uh[open] > summary .pg-cv { transform: rotate(180deg); }
.uh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }
.uh-b { background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 13px 14px; min-width: 0; }
.uh-q { font-size: var(--fs-14); font-weight: 700; color: var(--text); } .uh-a { margin: 3px 0 8px; font-size: var(--fs-12); color: var(--text-4); line-height: 1.45; }
.uh-r { display: grid; grid-template-columns: minmax(70px, 1fr) 46px minmax(60px, 1.2fr) 70px 64px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.04); font-size: var(--fs-13); color: var(--text-2); }
.uh-l { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uh-rec { color: var(--text); } .uh-p { text-align: right; } .uh-p small { color: var(--text-4); } .uh-u { text-align: right; font-weight: 700; }
.uh-m { position: relative; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; } .uh-m i { position: absolute; inset: 0 auto 0 0; background: var(--win); border-radius: 3px; opacity: .7; }
.uh-m b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text); }
.uh-x { grid-column: 2 / -1; font-size: var(--fs-12); color: var(--text-4); } .uh-e { font-size: var(--fs-13); color: var(--text-4); }
.uh-tiles { display: flex; gap: 8px; } .uh-tiles > div { flex: 1; background: var(--surface-2); border-radius: var(--r-md); padding: 8px 10px; } .uh-tiles span { display: block; font-size: var(--fs-11); color: var(--text-4); } .uh-tiles b { font-size: var(--fs-16); color: var(--text); } .uh-tiles small { display: block; font-size: var(--fs-12); }
.uh-embed .card { margin: 0; background: transparent; border: 0; box-shadow: none; } .uh-embed .card-h { display: none; }
@media (max-width: 860px) { .uh-grid { grid-template-columns: 1fr; } }


/* Results calendar */
.cal { margin: 4px 16px 6px; background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 12px; }
.cal-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cal-h b { color: var(--text); font-size: var(--fs-14); } .cal-ms { font-size: var(--fs-13); color: var(--text-3); margin-right: auto; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-w { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-off); text-align: center; padding-bottom: 2px; }
.cal-d { position: relative; min-height: 58px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.05); background: var(--surface-2); color: var(--text-2); font: inherit; padding: 5px 6px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; }
.cal-d i { position: absolute; top: 4px; left: 7px; font-style: normal; font-size: var(--fs-11); color: var(--text-4); }
.cal-d.off { opacity: .45; } .cal-d b { font-size: var(--fs-13); color: var(--text); } .cal-d small { font-size: var(--fs-11); }
button.cal-d { cursor: pointer; transition: transform .12s, border-color .12s; } button.cal-d:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.2); }
.cal-d.g { background: rgba(78,238,82,.12); border-color: rgba(78,238,82,.28); } .cal-d.g small { color: var(--win); }
.cal-d.r { background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.26); } .cal-d.r small { color: var(--loss); }
.cal-d.n { background: rgba(148,163,184,.08); } .cal-d.on { outline: 2px solid var(--text); outline-offset: 1px; }
.cal-k { display: flex; gap: 14px; margin-top: 8px; font-size: var(--fs-12); color: var(--text-4); } .cal-k i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cal-k i.g { background: var(--win); } .cal-k i.r { background: var(--loss); } .cal-k i.n { background: var(--text-off); }
.cal-x { min-height: 58px; }
@media (max-width: 560px) { .cal-d { min-height: 46px; padding: 3px 4px; } .cal-d small { display: none; } .cal-d b { font-size: var(--fs-12); } .cal { margin: 4px 10px 6px; padding: 8px; } }

.rs-scope.seg { display: inline-flex; margin: 4px 0 12px; }

.rb-legs { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 2px; }
.rb-leg { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 7px; align-items: start; font-size: var(--fs-13); color: var(--text-2); }
.rb-lr { font-weight: 800; color: var(--text-4); text-align: center; } .rb-leg.w .rb-lr { color: var(--win); } .rb-leg.l .rb-lr { color: var(--loss); } .rb-leg.l .rb-lb { color: var(--text-3); }
.rb-lb small { display: block; font-size: var(--fs-11); color: var(--text-4); } .rb-lo { font-size: var(--fs-12); color: var(--text-3); }

details.pg > summary { cursor: pointer; list-style: none; } details.pg > summary::-webkit-details-marker { display: none; }

.pg-cv { margin-left: auto; color: var(--text-4); transition: transform .2s var(--ease); } details.pg[open] .pg-cv { transform: rotate(180deg); }

.pg-n { margin-left: 4px; font-size: var(--fs-11); color: var(--text-3); background: rgba(255,255,255,.06); border-radius: var(--r-pill); padding: 1px 7px; letter-spacing: 0; }

.rb-legs { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 2px; }

.rb-leg { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 7px; align-items: start; font-size: var(--fs-13); color: var(--text-2); }

.rb-lr { font-weight: 800; color: var(--text-4); text-align: center; } .rb-leg.w .rb-lr { color: var(--win); } .rb-leg.l .rb-lr { color: var(--loss); } .rb-leg.l .rb-lb { color: var(--text-3); }

.rb-lb small { display: block; font-size: var(--fs-11); color: var(--text-4); } .rb-lo { font-size: var(--fs-12); color: var(--text-3); }



.al-more { display: block; width: calc(100% - 32px); margin: 8px 16px 14px; padding: 9px; background: transparent; color: var(--text-2); border: 1px dashed rgba(255,255,255,.14); border-radius: var(--r-md); font: 600 13px var(--sans, system-ui); cursor: pointer; }

.al-more:hover { border-color: rgba(255,255,255,.3); color: var(--text); }

.op-tiles.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-tile.op-anchor { --opc: var(--info); } .op-tile.op-pick { --opc: var(--win); } .op-tile.op-value { --opc: var(--warn); } .op-tile.op-price { --opc: var(--loss); } .op-tile.op-extra { --opc: var(--text-4); }
.op-anchor { --opc: var(--info); } .op-price { --opc: var(--loss); } .op-extra { --opc: var(--text-off); }
.pg-anchor { --pgc: var(--info); } .pg-price { --pgc: var(--loss); } .pg-extra { --pgc: var(--text-4); }
.tr-pills.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gbd-best { padding: 8px 16px 0; } .gbd-k { font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gbdk-pick { color: var(--win); } .gbdk-anchor { color: var(--info); } .gbdk-value { color: var(--warn); }
.nfl-wp { grid-template-columns: auto 1fr auto; } .nfl-wp .mono { color: var(--text-3); } .nfl-wp .mono.fav { color: var(--text); font-weight: 700; }
@media (max-width: 1100px) { .op-tiles.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .op-tiles.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-pills.n3 { grid-template-columns: 1fr; } }

.ask-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; margin-top: 12px; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface-2); border: 1px solid rgba(78,238,82,.25); border-radius: var(--r-lg); padding: 14px 16px; color: var(--text-2); transition: border-color .15s, transform .15s; }
.ask-card:hover { border-color: rgba(78,238,82,.55); transform: translateY(-1px); }
.ask-ic { font-size: var(--fs-20); } .ask-card b { display: block; color: var(--text); font-size: var(--fs-14); } .ask-card small { font-size: var(--fs-12); color: var(--text-4); } .ask-go { color: var(--win); font-size: var(--fs-20); }

.hot2-hd, .hot2-r { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 64px 78px 104px; gap: 10px; align-items: center; padding: 9px 16px; }
.hot2-hd { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); padding-top: 4px; padding-bottom: 4px; }
.hot2-hd span:nth-child(n+3) { text-align: right; } .hot2-hd span:last-child { text-align: center; }
.hot2-r { border-top: 1px solid rgba(255,255,255,.05); font-size: var(--fs-14); }
.hot2-rk { color: var(--text-4); font-size: var(--fs-12); } .hot2-b b { color: var(--text); } .hot2-m { color: var(--text-3); } .hot2-b small { display: block; font-size: var(--fs-12); color: var(--text-4); margin-top: 1px; }
.hot2-o, .hot2-c { text-align: right; color: var(--text-2); } .hot2-c.ls { color: var(--text); font-weight: 700; }
.hv { justify-self: center; font-size: var(--fs-12); font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.hv-g { color: var(--win); background: rgba(78,238,82,.08); border-color: rgba(78,238,82,.3); } .hv-n { color: var(--text-3); border-color: rgba(255,255,255,.12); }
.hv-r { color: var(--loss); background: rgba(251,113,133,.08); border-color: rgba(251,113,133,.3); } .hv-x { color: var(--text-off); border-color: rgba(255,255,255,.06); }
@media (max-width: 760px) { .hot2-hd { display: none; } .hot2-r { grid-template-columns: 22px minmax(0, 1fr) auto; } .hot2-o, .hot2-c { display: none; } .hot2-c.ls { display: block; grid-column: 2; text-align: left; font-size: var(--fs-12); } }
.hot2-hd.nfl, .hot2-r.nfl { grid-template-columns: 28px minmax(0, 1fr) 64px 56px 78px 104px 28px; padding-left: 0; padding-right: 0; }
.hot2-r.nfl.sel { box-shadow: inset 3px 0 0 var(--win); }
@media (max-width: 760px) { .hot2-hd.nfl { display: none; } .hot2-r.nfl { grid-template-columns: 22px minmax(0, 1fr) auto 28px; } .hot2-r.nfl .hot2-o, .hot2-r.nfl .hot2-c { display: none; } }

.rs-tiles.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { .rs-tiles.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ko-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }

/* NFL Game Analysis: compact best-bet row (NHL style) */
.gbd-best { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; margin: 0 12px; padding: 9px 10px; background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); font-size: var(--fs-13); }
.gbd-best.none { display: block; color: var(--text-4); font-size: var(--fs-12); }
.gbd-lab { font-size: var(--fs-11); font-weight: 700; white-space: nowrap; } .gbdk-p { color: var(--win); } .gbdk-s { color: var(--info); } .gbdk-l { color: var(--text-2); } .gbdk-v { color: var(--warn); }
.gbd-bet { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbd-ch { font-size: var(--fs-14); color: var(--text); } .gbd-bo { text-align: right; line-height: 1.1; } .gbd-bo b { font-size: var(--fs-13); color: var(--text-2); } .gbd-bo small { display: block; font-size: var(--fs-11); color: var(--text-4); }
.gbd-add { width: 26px; height: 26px; border-radius: var(--r-sm); border: 1px solid rgba(78,238,82,.35); background: rgba(78,238,82,.08); color: var(--win); font-weight: 800; cursor: pointer; }
.gbd-add.on { background: var(--win); color: var(--bg); }
@media (max-width: 600px) { .gbd-best { grid-template-columns: auto minmax(0, 1fr) auto auto; } .gbd-bo { display: none; } }
.gbd-best.nfl { margin: 12px 12px 4px; } .gbdk-pick { color: var(--win); } .gbdk-anchor { color: var(--info); } .gbdk-value { color: var(--warn); }

.op-tiles.n6 .op-tile b { white-space: normal; line-height: 1.15; }

/* Player research (2026-10-12): prop dashboard, matchup + pairs, usage trend */
.pd-t { padding: 4px 16px 12px; }
.pd-r { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 64px 84px 70px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: var(--fs-13); color: var(--text-2); }
.pd-r > *:not(:first-child) { text-align: right; } .pd-r b { color: var(--text); font-weight: 600; }
.pd-hd { border-top: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.pp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pp-two > .card { margin: 0; }
.mu-l { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.04); font-size: var(--fs-14); color: var(--text-2); text-decoration: none; }
.mu-l:first-child { border-top: 0; } .mu-l b { color: var(--text); } a.mu-l:hover b { color: var(--win); }
.ut-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ut { background: var(--surface-3); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md); padding: 10px 12px; }
.ut-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-13); color: var(--text-3); } .ut-h b { color: var(--text); font-size: var(--fs-14); } .ut-h small { color: var(--text-4); }
.ut-c { margin-left: auto; font-weight: 700; font-size: var(--fs-12); color: var(--text-3); } .ut-c.up { color: var(--win); } .ut-c.dn { color: var(--loss); }
.ut-b { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 8px; } .ut-b i { flex: 1; background: rgba(96,165,250,.45); border-radius: 2px 2px 0 0; }
.ut-b i:nth-last-child(-n+5) { background: var(--info); }
@media (max-width: 700px) { .ut-g { grid-template-columns: 1fr; } .pd-r { grid-template-columns: minmax(0, 1.4fr) repeat(3, 38px) 50px; font-size: var(--fs-12); } .pd-r > *:last-child { display: none; } }

.ut-g.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } button.pd-r { width: 100%; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.05); font: inherit; color: inherit; cursor: pointer; text-align: left; } button.pd-r:hover { background: rgba(255,255,255,.02); }
@media (max-width: 700px) { .ut-g.n2 { grid-template-columns: 1fr; } }

.tr-pills.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tr-pills.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Matchup tab: this offense vs the other defense, under target share */
.mu-vs-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mu-vs-h h3 { margin: 0; }
.mu-vs .mu-side { padding: 4px 12px; }
@media (max-width: 480px) { .uh-r { grid-template-columns: minmax(0, 1fr) 44px 76px 56px; } .uh-r .uh-m { display: none; } }