:root {
  /* Bigfoot's Book: black night, dark forest green. */
  --bg: #060908; --panel: #0e1a13; --panel-2: #15261b; --line: #22392a;
  --text: #eef4ef; --muted: #95ab9c; --accent: #52b56f; --accent-rgb: 82, 181, 111; --accent-ink: #04140a;
  --forest: #1f5a34; --forest-hover: #26703f; --green-soft: #10301c; --green-line: #2a5e3a;
  --bad: #e2583f; --warn: #e8a23a; --info: #7fb0c7; --radius: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px 60px; }

.top { display: flex; align-items: center; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.top .brand { font-weight: 700; font-size: 1.1rem; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.top .brand:hover { text-decoration: none; }
.footprint { width: 15px; height: 20px; fill: var(--accent); flex-shrink: 0; }
.top .spacer { flex: 1; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { color: var(--text); }

.flash { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 14px;
  background: var(--green-soft); border: 1px solid var(--green-line); }
.flash.bad { background: #3a2016; border-color: #6b3524; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; }
.card.link { display: block; color: inherit; }
.card.link:hover { border-color: var(--accent); text-decoration: none; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 0; }
.tag { display: inline-block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.tag.on { background: var(--green-soft); color: var(--accent); }

.col-toggle { position: relative; }
.col-toggle button.tag { border: none; font: inherit; letter-spacing: .04em; cursor: pointer; }
.col-toggle-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; min-width: 150px; z-index: 20; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.col-toggle.open .col-toggle-panel { display: block; }
.col-toggle-panel label { white-space: nowrap; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 10px 0; border-bottom: 1px solid var(--line); }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; min-width: 110px; }
.chip b { display: block; font-size: 1.1rem; }
.chip span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs .badge { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .68rem;
  line-height: 16px; text-align: center; font-weight: 700; vertical-align: 2px; }
.tabs .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-left: 5px; vertical-align: middle; }

label { display: block; font-size: .85rem; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
select, textarea { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; }
textarea { min-height: 96px; resize: vertical; }
.checks { display: flex; gap: 14px; flex-wrap: wrap; }
.checks label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: .95rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.btn { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--forest); color: #fff; font: inherit; font-weight: 600; }
.btn:hover:not(:disabled) { background: var(--forest-hover); text-decoration: none; }
.btn.ghost { background: var(--panel-2); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--line); }
.btn.danger { background: #5a2a1c; color: #ffe3d4; }
.btn.danger:hover:not(:disabled) { background: #6e3322; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* odds buttons */
.pick { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; font: inherit; text-align: center; min-width: 78px; }
.pick:hover:not(:disabled) { border-color: var(--accent); }
.pick:disabled { opacity: .45; cursor: not-allowed; }
.pick .what { display: block; font-size: .8rem; color: var(--muted); }
.pick .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.picks { display: flex; gap: 6px; flex-wrap: wrap; }

/* Models tab (superadmin only): the model's confidence overlaid on a real .pick button --
   light tint for any lean, a stronger tint + border once confidence clears
   book.MODEL_CONF_STRONG. .conf shows win% and expected-value% on that selection's own live
   odds (not the model's stale snapshot). */
.pick.model-fav { border-color: var(--green-line); background: rgba(var(--accent-rgb), .14); }
.pick.model-strong { border-color: var(--accent); background: rgba(var(--accent-rgb), .3); }
.pick .conf { display: block; font-size: .68rem; font-weight: 600; color: var(--accent); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.model-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle;
  margin-right: 3px; }
.model-legend-dot.fav { background: rgba(var(--accent-rgb), .35); border: 1px solid var(--green-line); }
.model-legend-dot.strong { background: rgba(var(--accent-rgb), .6); border: 1px solid var(--accent); }

.pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.pill { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
.pill.on { border-color: var(--accent); background: var(--green-soft); }

.bets-details > summary { cursor: pointer; list-style: none; margin: 1.6rem 0 .6rem; }
.bets-details > summary::-webkit-details-marker { display: none; }
.bets-details > summary::before { content: '▸'; display: inline-block; margin-right: 6px; color: var(--muted); transition: transform .15s; }
.bets-details[open] > summary::before { transform: rotate(90deg); }
.bets-details > summary h2 { display: inline; margin: 0; }

/* A box-score cell for a stat we have a prop bet on: current, pace / line, and which side we
   took (+ = Over, - = Under). Color tracks how the pick is doing right now. Identical picks from
   several bettors are pre-merged server-side into one chip with a ×N count, but a player can
   still carry distinct chips (different line, different side) -- wrap those in a tight row
   instead of letting each force its own line and bloat the row height. */
td.pbox-cell { padding-top: 4px; padding-bottom: 4px; }
.pbox-wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.pbox { display: inline-block; padding: 0 5px; border-radius: 5px; font-variant-numeric: tabular-nums;
  font-size: .72rem; line-height: 1.6; white-space: nowrap; }
.pbox-pregame { background: rgba(232, 162, 58, .2); color: var(--warn); }
.pbox-pace-win { background: rgba(var(--accent-rgb), .18); color: #a7e49c; }
.pbox-pace-loss { background: rgba(226, 88, 63, .18); color: #f3ab9c; }
.pbox-win { background: rgba(var(--accent-rgb), .45); color: #eafbe6; font-weight: 700; }
.pbox-loss { background: rgba(226, 88, 63, .45); color: #fdeae6; font-weight: 700; }

/* Box score / team stats tables: alternating row shade, plus a crosshair highlight on the
   row and column under the cursor so a wide stat grid is easier to read across. */
#box-score-section table > tr:nth-child(even),
#team-stats-section table > tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
#box-score-section table tr.hl-row,
#team-stats-section table tr.hl-row { background: rgba(255, 255, 255, .06); }
#box-score-section table td.hl-col, #box-score-section table th.hl-col,
#team-stats-section table td.hl-col, #team-stats-section table th.hl-col { background: rgba(var(--accent-rgb), .1); }
.game .teams { font-weight: 600; }
.lines { display: grid; grid-template-columns: minmax(92px, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 6px;
  align-items: center; margin-top: 10px; }
.lines .pick { padding: 7px 4px; }
.lines .head { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  text-align: center; }
.lines .team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines .pick { min-width: 0; width: 100%; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
td.r, th.r { text-align: right; }
tr.me td { background: rgba(var(--accent-rgb), .08); }
.scroll { overflow-x: auto; }
.up { color: var(--accent); } .down { color: var(--bad); }
.rank-change { font-size: .68rem; margin-left: 3px; font-weight: 600; white-space: nowrap; }

/* Frozen header + frozen Player column on standings, done as two plain <table>s side by side
   (a non-scrolling pin pane + the normal scrolling one) instead of per-cell position:sticky on
   both axes at once -- the latter is what was bleeding content through on mobile Chrome/WebView.
   A sticky *block* (the whole pin pane) plus single-axis sticky-top on each table's own thead is
   a much better-supported combination. */
/* The card's own left/right padding would leave a gap between the scroll clip edge and where the
   sticky pin block starts -- the scrolled table shows through that gap. Zero it on the card and
   rebuild it as padding on the pin block (left) and the flex row (right), which sits inside the
   sticky/scroll boundary instead of outside it, so there's no unguarded strip. */
.standings-scroll { max-height: 65vh; overflow: auto; padding-left: 0; padding-right: 0; }
.standings-flex { display: flex; align-items: flex-start; width: max-content; padding-right: 14px; }
.standings-flex table { width: auto; }
.standings-pin { position: sticky; left: 0; z-index: 5; background: var(--panel); flex: 0 0 auto;
  padding-left: 14px; }
.standings-pin td, .standings-pin th { white-space: nowrap; }
.standings-pin thead th, #standings-table thead th {
  position: sticky; top: 0; z-index: 3; background: var(--panel); }

/* "Last 7 days" trend chips: a GitHub-contribution-style strip per player, darker = a bigger day
   relative to THAT player's own week (book.daily_trend computes level 1-4 per row, not globally,
   so a quiet grinder and a high-roller both show their own week's shape clearly). */
.trend-rows { display: flex; flex-direction: column; gap: 14px; }
.trend-row { display: flex; flex-direction: column; gap: 6px; }
.trend-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-chips { display: flex; gap: 5px; }
.trend-chip { width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 600; color: var(--muted); }
.trend-chip.none { background: var(--panel-2); border: 1px dashed var(--line); }
.trend-chip.even { background: var(--panel-2); color: var(--text); }
.trend-chip.pos-1 { background: rgba(var(--accent-rgb), .22); color: var(--text); }
.trend-chip.pos-2 { background: rgba(var(--accent-rgb), .42); color: var(--text); }
.trend-chip.pos-3 { background: rgba(var(--accent-rgb), .65); color: var(--text); }
.trend-chip.pos-4 { background: var(--accent); color: var(--accent-ink); }
.trend-chip.neg-1 { background: rgba(226, 88, 63, .22); color: var(--text); }
.trend-chip.neg-2 { background: rgba(226, 88, 63, .42); color: var(--text); }
.trend-chip.neg-3 { background: rgba(226, 88, 63, .65); color: var(--text); }
.trend-chip.neg-4 { background: var(--bad); color: var(--text); }

table.sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th[data-sort]:hover { color: var(--text); }
table.sortable th[data-sort]::after { content: ""; display: inline-block; width: 0; height: 0;
  margin-left: 4px; border: 4px solid transparent; vertical-align: middle; opacity: .35; }
table.sortable th[data-sort].sort-asc::after { border-bottom-color: var(--accent); opacity: 1; }
table.sortable th[data-sort].sort-desc::after { border-top-color: var(--accent); margin-top: 3px; opacity: 1; }

.prop-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; }
.prop-row:last-child { border-bottom: 0; }
.prop-row .who { flex: 1; min-width: 150px; }
details.bet-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; padding: 0 14px; }
details.bet-group summary { cursor: pointer; padding: 12px 0; font-weight: 600; text-transform: capitalize; }
details.bet-group[open] { padding-bottom: 8px; }

.status { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.status.pending { background: var(--panel-2); color: var(--muted); }
.status.won { background: var(--green-soft); color: var(--accent); }
.status.lost { background: #3a2016; color: var(--bad); }
.status.push, .status.void { background: #3a2c12; color: var(--warn); }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; width: min(400px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.slip-pick { font-weight: 700; font-size: 1.05rem; }
.quick { display: flex; gap: 6px; margin-top: 8px; }
.quick button { flex: 1; }
/* rule toggles on the contest form */
.rules-head { margin: 22px 0 2px; font-size: 1rem; }
.rule-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px; margin-top: 10px; }
.rule-title { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 0 2px; }
.rule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--line); }
.rule:first-of-type { border-top: 0; }
.rule .toggle { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; color: var(--text);
  font-size: .95rem; cursor: pointer; }
.rule-value { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rule-value input { width: 96px; padding: 6px 8px; }

.bet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; padding: 8px 0; }
.bet-grid .toggle { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: .92rem; text-transform: capitalize; cursor: pointer; }
details.rules-box { margin: 0 0 14px; }
details.rules-box summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details.rules-box ul { margin: 8px 0 0; padding-left: 20px; }
details.rules-box li { margin: 3px 0; }

/* parlay slip */
#parlay-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--accent);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
#parlay-bar .inner { max-width: 920px; margin: 0 auto; }
#parlay-bar .leg { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line);
  font-size: .88rem; }
#parlay-bar .leg span { flex: 1; min-width: 0; }
#parlay-bar .stake { width: 110px; padding: 7px 8px; }
#parlay-legs { max-height: 34vh; overflow-y: auto; margin-bottom: 8px; }
body.has-parlay .wrap { padding-bottom: 230px; }
.parlay-leg { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.parlay-leg .grow { flex: 1; min-width: 0; }

.live { margin-top: 4px; }
.live .dot { color: var(--bad); }

/* live at-bat */
.linescore { text-align: center; }
.linescore th, .linescore td { padding: 4px 7px; text-align: center; }
.atbat { text-align: center; margin-top: 10px; }
.atbat .side { padding: 6px 0; }
.atbat .player { font-weight: 700; }
.needs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.need { display: inline-block; font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.need-open { background: #16262e; color: var(--info); border-color: #244457; }
.need-hit { background: var(--green-soft); color: var(--accent); border-color: var(--green-line); }
.need-bust { background: #3a2016; color: var(--bad); border-color: #6b3524; }
.strikezone-wrap { display: flex; justify-content: center; margin: 6px 0; }
.strikezone-wrap svg { width: 100%; max-width: 280px; height: auto; }
#pitcher-line, #batter-line { margin-top: 2px; }
.scorebug { display: inline-flex; align-items: center; gap: 22px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 20px; margin: 8px 0; }
.sb-team { text-align: center; }
.sb-name { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.sb-score { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.sb-mid { text-align: center; }
.sb-row { display: flex; align-items: baseline; gap: 10px; justify-content: center; font-weight: 700; }
.sb-inning { display: inline-flex; align-items: center; gap: 2px; }
.sb-inning .arrow { color: var(--accent); font-size: .7em; }
.sb-count { font-size: 1.05rem; }
.sb-outs { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: 2px; }
.sb-mid svg { width: 64px; height: 60px; margin-top: 4px; }
.pitch-list { margin-top: 10px; text-align: left; }
.pitch-list div { padding: 2px 0; }

.code { font: 600 1.3rem ui-monospace, Consolas, monospace; letter-spacing: .15em; }
.auth { max-width: 380px; margin: 8vh auto 0; }
.footprint-big { width: 36px; height: 48px; fill: var(--accent); display: block; margin: 0 auto 6px; }

/* password show/hide */
.pwrap { position: relative; }
.pwrap input { padding-right: 52px; }
.pwrap .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* message board reactions */
.reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.reactions form { display: inline-block; }
.react-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px;
  padding: 2px 9px; font: inherit; font-size: .82rem; cursor: pointer; }
.react-btn.mine { border-color: var(--accent); color: var(--accent); background: var(--green-soft); }
.react-btn:hover { border-color: var(--accent); }

/* message board replies */
.reply-ref { margin-top: 2px; border-left: 2px solid var(--line); padding-left: 8px; }

/* message board polls */
.poll { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.poll-option { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; font: inherit; color: var(--text); overflow: hidden; text-align: left; }
.poll-option.mine { border-color: var(--accent); }
.poll-option:hover { border-color: var(--accent); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .18); z-index: 0; }
.poll-label, .poll-pct { position: relative; z-index: 1; }
.poll-pct { flex-shrink: 0; }

/* profit chart */
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; font-size: .85rem; }
.chart-legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }