/* =============================================================================
   BEST PRICE — the odds screen (/nfl/best-price; docs/ev-terminal-plan.md,
   docs/best-price-data-spine.md "Section").

   The board CSS of the design reference DataUpdater/scripts/best_price_template.html
   (built page: design-prototypes/best-price.html), ported 2026-09-07:
     * the demo's app-shell mirrors are DROPPED (its :root tokens, top bar,
       bottom nav, parlay pill, drawer, backdrop) — core/themes.css owns the
       tokens, the shell owns the chrome; teal = var(--theme-accent*) and is
       reserved for the best price and the ADD flash, as designed;
     * every rule is scoped under .pb-best-price (the #best-price-root class)
       and the class names the demo shared with the workbench sheets are
       renamed: .pf-chip(s) -> .bp-chip(s) (.active-chip -> .is-on),
       .table-parlay-btn -> .bp-add, .tv-player-name -> .bp-name,
       .team-code -> .bp-code, .glass-panel -> .bp-panel;
     * no :root declarations (pickem.css rule): the board-local vars live on
       .pb-best-price;
     * the PHONE LAYER: the app ships NO viewport meta, so a phone renders the
       ~980px canvas scaled down (pickem.css:26-30, bottom-nav.css:171). The
       demo's <=640px block is re-expressed at the app's compact breakpoint,
       @media (max-width: 1000px), same structure (segmented bar + Great
       prices, the chip strip, full-width search, group headers with a square
       chevron, one card per bet, "All books" chips + Other lines), every size
       ~1.8x (the hub's own scale: nav 64->124, trend pill 13->23px). The JS
       switches on the same query (bestPricePage.js MQ).
   Controls (founder 2026-09-07): ONE row — the bet-type chips, the view
   chips and Great prices in the same chip style, the compact search and
   "Collapse all" with its sliders icon — and the freshness line as small
   muted right-aligned text under it. The BOARD below stays the design
   reference's (one sticky header tier at --bp-th, 48px rows, 44px avatars,
   the ADD pill in the line cell, boxed .bp-c / .bp-cell prices): a restyle
   of the table was reverted the same day at the founder's call.
   Shell-state rules mirror core/pickem.css (body.best-price-active is the
   full equivalent of the direct-load doc-write #best-price-init-styles in
   templates/index.html — keep the two in sync).
   ============================================================================= */

/* ── Sticky enabler (pickem.css precedent): keep the root a non-scroller ── */
html.is-best-price,
html.is-best-price body { overflow-x: clip; }

/* ── Page shell ── */
body.best-price-active {
  background: #000;
  padding-bottom: calc(var(--pb-bottom-nav-height, 64px) + max(env(safe-area-inset-bottom), 12px));
}
body.best-price-active .pb-bottom-nav { display: flex !important; }
body.best-price-active #cover-page,
body.best-price-active .navbar,
body.best-price-active .workbench-layout,
body.best-price-active .sidebar,
body.best-price-active #main-app-wrapper,
body.best-price-active #loading-animation { display: none !important; }
body.best-price-active .landing-nav { display: block !important; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
body.best-price-active .landing-nav .sport-selector { display: flex !important; }
#best-price-root { display: none; }   /* revealed by the doc-write + the module */
body.best-price-active #best-price-root { display: block; min-height: 100vh; }

/* ── Board-local vars + the page's own box (clears the fixed landing-nav) ── */
.pb-best-price {
  --bp-th: 66px;          /* the sticky book-header row's height (game rows stick under it) */
  --bp-top: 84px;         /* the fixed landing-nav's height on the desktop canvas (pickem.css .app) */
  color: var(--theme-text-primary, #fff);
  font-size: 14px;
  line-height: 1.4;
  padding: calc(var(--bp-top) + env(safe-area-inset-top, 0px)) 0 0;
}
.pb-best-price *, .pb-best-price *::before, .pb-best-price *::after { box-sizing: border-box; }
.pb-best-price button, .pb-best-price input { font-family: inherit; }
.pb-best-price img { max-width: 100%; }

/* ── Loading / unavailable states (the app has no inlined capture to fall back to) ── */
.pb-best-price .bp-state { padding: 48px 16px; text-align: center; color: rgba(255,255,255,.6); font-size: 15px; }
.pb-best-price .bp-state.is-error { color: rgba(255,255,255,.75); }
.pb-best-price .bp-state .bp-retry { display: inline-block; margin-top: 14px; padding: 8px 20px; border-radius: 999px; border: 1px solid rgba(var(--theme-accent-rgb,0,211,189),.4); background: rgba(var(--theme-accent-rgb,0,211,189),.1); color: var(--theme-accent-bright,#00F5D4); font-weight: 600; font-size: 13px; cursor: pointer; }
.pb-best-price .bp-state .bp-retry:hover { background: rgba(var(--theme-accent-rgb,0,211,189),.2); }

/* ── ADD (the stub): a tap flashes "Coming soon" in the accent for 1.5 s (bestPricePage.js addFlash) ── */
.pb-best-price .bp-add.bp-soon,
.pb-best-price .bp-add.bp-soon:hover { background: rgba(var(--theme-accent-rgb,0,211,189),.16); border-color: rgba(var(--theme-accent-rgb,0,211,189),.6); color: var(--theme-accent-bright,#00F5D4); }

/* ==== the board (design reference, scoped) ==== */
/* ---- the board fills the shell; the table wrap is the one scroller (both axes) so the
   sticky book-logo header and the sticky game headers sit on the scrollport edge ---- */
.pb-best-price #bp-section{width:100%;padding:0 12px;margin-top:6px;position:relative;z-index:1}
.pb-best-price .bp-panel{position:relative;isolation:isolate}   /* no card chrome: the board lies on the page */
.pb-best-price #bp-board{display:flex;flex-direction:column;min-height:600px;max-height:calc(100vh - var(--bp-top) - var(--pb-bottom-nav-height,64px) - 20px);padding:0}
.pb-best-price .bp-board-inner{padding:2px 0 10px;flex:0 0 auto}
.pb-best-price .bp-table-wrap{flex:1 1 auto;min-height:0;overflow:auto;margin:0 0 16px;padding:0}
.pb-best-price .bp-panel-title{margin:0;font-size:16px;font-weight:600;color:#fff}

/* ---- controls, one row: the bet-type chips (wrap), the view chips + Great prices, then the search + Collapse all;
   the freshness line as small muted text right-aligned under the row ---- */
.pb-best-price .bp-board-head{display:flex;align-items:center;gap:9px;background:#171717;border-radius:12px;padding:9px 10px}
.pb-best-price .bp-viewgrp{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.pb-best-price .bp-view{display:inline-flex;align-items:center;gap:6px}
.pb-best-price .bp-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pb-best-price .bp-board-row2{display:none;justify-content:flex-end;align-items:center;margin-top:6px;min-height:12px}
.pb-best-price .bp-board-row2:has(> [hidden]){display:none}
.pb-best-price .bp-spacer{flex:1 1 auto}
.pb-best-price .bp-search{position:relative;display:flex;align-items:center}
.pb-best-price .bp-search svg{position:absolute;left:13px;width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;pointer-events:none}
.pb-best-price .bp-search input{width:150px;height:36px;padding:0 12px 0 34px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.95);font-size:12.5px;font-weight:500;outline:none;transition:border-color .15s,background .15s}
.pb-best-price .bp-search input::placeholder{color:rgba(255,255,255,.4)}
.pb-best-price .bp-search input:focus{background:rgba(var(--theme-accent-rgb,0,211,189),.06);border-color:rgba(var(--theme-accent-rgb,0,211,189),.5)}
/* the one freshness element: "Live data · pulled N min ago", only when the snapshot came from the app's feed */
.pb-best-price .bp-live{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap;line-height:1}
.pb-best-price .bp-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#2dd4bf;margin-right:6px;vertical-align:0}
.pb-best-price .bp-fold{appearance:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.85);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.pb-best-price .bp-fold:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.pb-best-price .bp-fold-ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:0 0 auto}
.pb-best-price .bp-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto;min-width:0}
.pb-best-price .bp-chip{appearance:none;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font-size:12px;font-weight:500;padding:0 8px;cursor:pointer;white-space:nowrap;line-height:1;transition:background .15s,border-color .15s,color .15s}
.pb-best-price .bp-chip:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
/* the active chip — a chosen bet type, the current view, Great prices on: teal outline + teal text */
.pb-best-price .bp-chip.is-on,.pb-best-price .bp-seg.is-active{background:rgba(var(--theme-accent-rgb,0,211,189),.08);border-color:rgba(var(--theme-accent-rgb,0,211,189),.6);color:var(--theme-accent-bright,#00F5D4)}

/* ---- the odds screen (header treatment from workbench-table.css .props-table) ---- */
.pb-best-price .bp-table{width:100%;min-width:1330px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px}
.pb-best-price .bp-table th{position:sticky;top:0;z-index:6;height:var(--bp-th);background:#171717;border-bottom:6px solid var(--theme-bg-base,#000);background-clip:padding-box;color:rgba(var(--theme-accent-rgb,0,211,189),.92);padding:6px 4px;text-align:center;vertical-align:middle;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;user-select:none;}
.pb-best-price .bp-table th:first-child{border-radius:12px 0 0 12px}
.pb-best-price .bp-table th:last-child{border-radius:0 12px 12px 0}
.pb-best-price .bp-table th.col-id,.pb-best-price .bp-table th.col-line{text-align:left;padding-left:10px}
/* fixed layout: the header row sets every column; the identity column must not collapse now that ADD lives in the line cell */
.pb-best-price .bp-table th.col-id{width:210px}
.pb-best-price .bp-table th.col-line{width:206px}
.pb-best-price .bp-table th.col-fair{width:62px}
.pb-best-price .bp-table th.col-book{width:56px}
.pb-best-price .bp-table th.col-gap{width:58px}
.pb-best-price .bp-table th.col-chev{width:26px}
.pb-best-price .bp-table th.col-fair{color:var(--theme-accent-bright,#00F5D4)}
.pb-best-price .bp-bh{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1}
.pb-best-price .bp-bh .bp-bk,.pb-best-price .bp-bh .bp-mono{display:block}
.pb-best-price .bp-bh .bp-bkname{font-size:9px;letter-spacing:-.2px;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pb-best-price .bp-table td{padding:0 4px;height:48px;vertical-align:middle;text-align:center;color:rgba(255,255,255,.88);background:rgba(255,255,255,.07)}
.pb-best-price .bp-table tr.first td{border-top:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-table tr.last td{border-bottom:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-table td.cell-id,.pb-best-price .bp-table td.cell-chev{border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-table td.cell-id{border-left:1px solid rgba(255,255,255,.10);border-radius:12px 0 0 12px}
.pb-best-price .bp-table td.cell-chev{border-right:1px solid rgba(255,255,255,.10);border-radius:0 12px 12px 0}
.pb-best-price .bp-table tr.bp-sp td{height:8px;padding:0;background:transparent;border:0}
/* the row highlight is about the LINE you are on, so the rowspan'd player cell stays out of it
   (it belongs to the whole block, and lighting it made hovering either line flash the player) */
.pb-best-price .bp-table tr.bp-r:hover td:not(.cell-id){background:rgba(255,255,255,.105)}
.pb-best-price .bp-table tr.is-open td{background:rgba(255,255,255,.055)}
.pb-best-price .bp-table tr.bp-r{cursor:pointer}
.pb-best-price .bp-table td.cell-action{width:52px;padding:0 2px}
.pb-best-price .bp-table td.cell-id{text-align:left;padding-left:12px}
.pb-best-price .bp-table td.cell-line{text-align:left;padding-left:8px;font-size:14px;font-weight:400;white-space:nowrap;color:rgba(255,255,255,.92)}
.pb-best-price .bp-linewrap{display:flex;align-items:center;gap:9px}
.pb-best-price .bp-linewrap .bp-add{flex:0 0 auto}
.pb-best-price .bp-table td.cell-fair{padding:2px 4px}
.pb-best-price .bp-table td.cell-bk{padding:3px 2px}
.pb-best-price .bp-table td.cell-chev{padding:0 4px 0 2px}
.pb-best-price .bp-add{width:44px;padding:5px 9px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);border-radius:6px;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.pb-best-price .bp-add:hover{background:rgba(var(--theme-accent-rgb,0,211,189),.14);border-color:rgba(var(--theme-accent-rgb,0,211,189),.5);color:var(--theme-accent-bright,#00F5D4)}
/* the "Coming soon" flash wraps to two lines inside the ADD's own box (a flex item sizes to
   max-content, so the cap is what keeps the line label from jumping for 1.5 s) */
.pb-best-price .bp-add.bp-soon{max-width:44px;white-space:normal;line-height:1.1;font-size:8.5px;letter-spacing:0;padding:3px 3px}
.pb-best-price .bp-player{display:flex;align-items:center;gap:9px;min-width:0}
.pb-best-price .bp-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#101216;border:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-avatar-team,.pb-best-price .bp-avatar-init{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:rgba(255,255,255,.6)}
.pb-best-price .bp-avatar-init{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);letter-spacing:.3px}
.pb-best-price .bp-avatar-team img{width:70%;height:70%;object-fit:contain}
/* [hidden] re-asserted (nfl-game-detail.css does the same): the display rules above (the avatar
   fallback beside a headshot, #bp-live, #bp-fold …) would otherwise beat the UA's [hidden] rule */
.pb-best-price [hidden]{display:none!important}
.pb-best-price .bp-player-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pb-best-price .bp-name{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-team{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:rgba(255,255,255,.58);margin-top:3px}
.pb-best-price .bp-team-logo{width:16px;height:16px;object-fit:contain}
.pb-best-price .bp-code{font-weight:700;letter-spacing:.3px}
.pb-best-price .bp-sep{color:rgba(255,255,255,.3)}
.pb-best-price .bp-mkword{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-price{font-weight:600;font-size:13px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-best-price .bp-price.pos{color:#4ade80}
.pb-best-price .bp-price.over{color:#f87171}
.pb-best-price .bp-dash{color:rgba(255,255,255,.3)}
.pb-best-price .bp-na{font-size:11px;font-weight:400;color:rgba(255,255,255,.35);white-space:nowrap}
.pb-best-price .bp-fairv{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;line-height:1.1}
.pb-best-price .bp-table td.cell-gap{padding:0 2px}
.pb-best-price .bp-gap{display:inline-block;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);line-height:1.2}
.pb-best-price .bp-gap.mid{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-weight:600}
.pb-best-price .bp-gap.lo{background:transparent;border-color:transparent;color:rgba(255,255,255,.38);font-weight:500;padding:0}
.pb-best-price .bp-table tr.bp-lr .bp-gap{font-size:10.5px}
.pb-best-price .bp-great{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;background:rgba(var(--theme-accent-rgb,0,211,189),.16);color:var(--theme-accent-bright,#00F5D4);border:1px solid rgba(var(--theme-accent-rgb,0,211,189),.45);line-height:1.2}
/* a book cell: the price at the row's line, or the book's own line (captioned) */
.pb-best-price .bp-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:40px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.86);text-decoration:none;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;min-width:0}
.pb-best-price a.bp-c:hover{background:rgba(var(--theme-accent-rgb,0,211,189),.12);border-color:rgba(var(--theme-accent-rgb,0,211,189),.45)}
.pb-best-price .bp-c.empty{background:transparent;border-color:transparent}
.pb-best-price .bp-c.empty::before{content:"–";color:rgba(255,255,255,.2);font-size:13px}
.pb-best-price .bp-c.own{color:rgba(255,255,255,.62)}
.pb-best-price .bp-c.tiny{color:rgba(255,255,255,.38)}
.pb-best-price .bp-c.best{background:linear-gradient(180deg,rgba(var(--theme-accent-rgb,0,211,189),.12) 0%,rgba(var(--theme-accent-rgb,0,211,189),.04) 100%);border-color:rgba(var(--theme-accent-rgb,0,211,189),.75);color:var(--theme-accent-bright,#00F5D4);font-weight:700}
.pb-best-price .bp-c .bp-cap{font-size:9px;font-weight:400;color:rgba(255,255,255,.5);white-space:nowrap;line-height:1}
.pb-best-price .bp-c.best .bp-cap{color:rgba(0,245,212,.8)}
.pb-best-price .bp-bk{border-radius:5px;object-fit:contain;flex:0 0 auto;display:inline-block;vertical-align:middle}
.pb-best-price .bp-mono{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;font-weight:700;letter-spacing:.2px;color:hsl(var(--h) 70% 74%);background:hsl(var(--h) 45% 16%);border:1px solid hsl(var(--h) 50% 30%);flex:0 0 auto;line-height:1}
.pb-best-price .bp-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;border:1px solid transparent}
.pb-best-price .bp-pill.great{background:rgba(var(--theme-accent-rgb,0,211,189),.16);color:var(--theme-accent-bright,#00F5D4);border-color:rgba(var(--theme-accent-rgb,0,211,189),.45)}
.pb-best-price .bp-pill.fair{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.1)}
.pb-best-price .bp-pill.over{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.35)}
.pb-best-price .bp-chev{appearance:none;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.35);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.pb-best-price .bp-chev:hover{color:var(--theme-accent-bright,#00F5D4);background:rgba(var(--theme-accent-rgb,0,211,189),.1)}
.pb-best-price .bp-chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.pb-best-price tr.is-open .bp-chev svg{transform:rotate(180deg)}
.pb-best-price .bp-empty{padding:40px;text-align:center;color:rgba(255,255,255,.5)}
.pb-best-price .bp-morerow td{height:auto;padding:8px 0 10px;border:0;background:transparent}   /* the button sits on the page, not on a card */
.pb-best-price .bp-more{padding:7px 18px;border-radius:999px;border:1px solid rgba(var(--theme-accent-rgb,0,211,189),.35);background:rgba(var(--theme-accent-rgb,0,211,189),.08);color:var(--theme-accent-bright,#00F5D4);font-weight:600;font-size:12px;cursor:pointer}
.pb-best-price .bp-more:hover{background:rgba(var(--theme-accent-rgb,0,211,189),.18)}

/* ---- game header rows: chevron, away @ home with logos, the kickoff chip; sticky under the book row ---- */
.pb-best-price .bp-table tr.bp-game td{position:sticky;top:var(--bp-th);z-index:5;height:50px;padding:0 10px 0 8px;text-align:left;background:#171717;border:0;border-bottom:6px solid var(--theme-bg-base,#000);background-clip:padding-box;border-radius:12px;cursor:pointer}
.pb-best-price .bp-table tr.bp-game:hover td{background:#1e1e1e}

.pb-best-price .bp-gh{display:flex;align-items:center;gap:12px}
.pb-best-price .bp-gchev{color:rgba(255,255,255,.5)}
.pb-best-price tr.bp-game .bp-gchev svg{transform:rotate(180deg)}
.pb-best-price tr.bp-game.is-closed .bp-gchev svg{transform:none}
.pb-best-price .bp-gteams{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.95)}
.pb-best-price .bp-glogo{width:26px;height:26px;object-fit:contain}
.pb-best-price .bp-gat{font-weight:500;color:rgba(255,255,255,.4);margin:0 2px}
.pb-best-price .bp-kick{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;color:rgba(255,255,255,.8);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);white-space:nowrap}
.pb-best-price .bp-gcount{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:rgba(255,255,255,.55);white-space:nowrap}
.pb-best-price .bp-gcount svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb-best-price tr.bp-game.is-closed .bp-gcount svg{transform:rotate(-90deg)}

/* ---- block expansion: the ladder is more rows of the open block, on the board's own columns (the sticky book header labels them) ---- */
.pb-best-price .bp-table tr.bp-lr td{height:36px;background:rgba(255,255,255,.04);border-top:0;border-bottom:0;border-radius:0}
.pb-best-price .bp-table tr.bp-lr.lead td{border-top:1px solid rgba(255,255,255,.09)}
.pb-best-price .bp-table tr.bp-lr.first:not(.lead) td{border-top:1px solid rgba(255,255,255,.06)}
.pb-best-price .bp-table tr.bp-lr.is-main td{background:rgba(255,255,255,.06)}
.pb-best-price .bp-table tr.bp-lr td.cell-id{border-left:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-table tr.bp-lr td.cell-chev{border-right:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-table tr.bp-lr td.cell-bk{padding:2px 2px}
.pb-best-price .bp-table tr.bp-lr .bp-fairv{font-size:13px;font-weight:600;color:rgba(255,255,255,.78)}
/* the identity column carries the line's best price (with its book) and the typical price */
.pb-best-price .bp-lmeta{display:flex;align-items:center;gap:12px;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-best-price .bp-lbest{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.92);font-weight:700}
.pb-best-price .bp-lbest .bp-bk,.pb-best-price .bp-lbest .bp-mono{border-radius:4px}
.pb-best-price .bp-ltyp{color:rgba(255,255,255,.45);font-weight:400}
.pb-best-price .bp-ll{display:flex;align-items:center;gap:8px;font-weight:400;font-size:13.5px;color:rgba(255,255,255,.85);white-space:nowrap;min-width:0;overflow:hidden}
.pb-best-price .bp-ll>span{overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-ll .bp-mainpill{flex:0 0 auto}
.pb-best-price .bp-ll.is-main{color:#fff;font-weight:600}
.pb-best-price .bp-ll .bp-ladd,.pb-best-price .bp-ll .bp-ghost{flex:0 0 auto;padding:4px 8px;font-size:10px}
.pb-best-price .bp-ghost{visibility:hidden;font-style:normal}
.pb-best-price .bp-mainpill{display:inline-block;padding:2px 6px;border-radius:999px;font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:.2px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.14);line-height:1.3}
.pb-best-price svg.bp-ext{position:absolute;top:3px;right:3px;width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.42;pointer-events:none}
.pb-best-price a.bp-c:hover .bp-ext,.pb-best-price a.bp-cell:hover .bp-ext{opacity:1}
.pb-best-price .bp-c.best .bp-ext,.pb-best-price .bp-cell.best .bp-ext{opacity:.7}
/* gold: the tap lands with the bet already in the slip */
.pb-best-price .bp-c.slip .bp-ext,.pb-best-price .bp-cell.slip .bp-ext{stroke:#f5c042;opacity:.9}
.pb-best-price a.bp-c.slip:hover .bp-ext,.pb-best-price a.bp-cell.slip:hover .bp-ext{opacity:1}
/* a ladder cell: a boxed price; the best price on the line is the outlined one; nothing offered is a dash */
.pb-best-price .bp-cell{position:relative;display:flex;align-items:center;justify-content:center;height:30px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.84);text-decoration:none;font-weight:500;white-space:nowrap;min-width:0}
.pb-best-price a.bp-cell:hover{background:rgba(var(--theme-accent-rgb,0,211,189),.10);border-color:rgba(var(--theme-accent-rgb,0,211,189),.45)}
.pb-best-price .bp-cell.empty{background:transparent;border-color:transparent}
.pb-best-price .bp-cell.empty::before{content:"–";color:rgba(255,255,255,.2)}
.pb-best-price .bp-cell.best{background:linear-gradient(180deg,rgba(var(--theme-accent-rgb,0,211,189),.12) 0%,rgba(var(--theme-accent-rgb,0,211,189),.04) 100%);border-color:rgba(var(--theme-accent-rgb,0,211,189),.75);color:var(--theme-accent-bright,#00F5D4);font-weight:600}
.pb-best-price .bp-cell.best.lone{border-color:rgba(var(--theme-accent-rgb,0,211,189),.4)}
.pb-best-price .bp-cell.tiny{color:rgba(255,255,255,.4)}
.pb-best-price .bp-cell.mine{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* the foot of an open block: "More lines" and the card's bottom corners */
.pb-best-price .bp-table tr.bp-expand td{padding:0 12px 8px;background:rgba(255,255,255,.04);text-align:left;height:auto;border:1px solid rgba(255,255,255,.10);border-top:0;border-radius:0 0 12px 12px}
.pb-best-price .bp-table tr.bp-expand td:empty{padding-bottom:6px}
/* the open block loses its bottom edge: its rows and the ladder read as one card */
.pb-best-price .bp-table tr.is-open td.cell-id{border-bottom:0;border-radius:12px 0 0 0}
.pb-best-price .bp-table tr.is-open td.cell-chev{border-bottom:0;border-radius:0 12px 0 0}
.pb-best-price .bp-table tr.is-open.last td{border-bottom:0}
.pb-best-price .bp-lines{appearance:none;margin:6px 0 0;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);font-size:12px;font-weight:600;cursor:pointer}
.pb-best-price .bp-lines:hover{background:rgba(var(--theme-accent-rgb,0,211,189),.12);border-color:rgba(var(--theme-accent-rgb,0,211,189),.45);color:var(--theme-accent-bright,#00F5D4)}

/* ---- game blocks: both team logos where a player would be ---- */
.pb-best-price .bp-avatar-game{display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.pb-best-price .bp-avatar-game img{width:58%;height:58%;object-fit:contain;flex:0 0 auto}
.pb-best-price .bp-avatar-game img:first-child{margin-right:-12%}
.pb-best-price .bp-avatar-game img:last-child{margin-left:-12%}

/* ---- the phone list (#bp-mobile, shown under 640px): group headers, then one card per block ---- */
.pb-best-price .bp-mg{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.pb-best-price .bp-mg+.bp-mg{border-top:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-mg-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.pb-best-price .bp-mg-logos{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
.pb-best-price .bp-mg-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pb-best-price .bp-mg-name{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-mg-name .bp-gat{font-size:14px}
.pb-best-price .bp-mg-sub{font-size:12px;font-weight:400;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pb-best-price .bp-mg-n{font-size:12px;font-weight:500;color:rgba(255,255,255,.55);white-space:nowrap;flex:0 0 auto}
.pb-best-price .bp-mg-chev{width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);flex:0 0 auto}
.pb-best-price .bp-mg-chev svg{width:16px;height:16px;transform:rotate(180deg)}
.pb-best-price .bp-mg.is-closed .bp-mg-chev svg{transform:none}
.pb-best-price .bp-mc{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.024);margin:0 0 10px;overflow:hidden}
.pb-best-price .bp-mc-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px}
.pb-best-price .bp-mc-head .bp-avatar{width:40px;height:40px}
.pb-best-price .bp-mc-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pb-best-price .bp-mc-name{font-size:15px;font-weight:600;color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-mc-sub{display:flex;align-items:center;gap:4px;font-size:12px;color:rgba(255,255,255,.58);margin-top:2px;white-space:nowrap;min-width:0}
.pb-best-price .bp-mc-sub .bp-team-logo{flex:0 0 auto}
.pb-best-price .bp-mc-sub .bp-mkword{min-width:0}
.pb-best-price .bp-mc-t .bp-gtag{margin-top:2px}
.pb-best-price .bp-mc-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.pb-best-price .bp-mc-r .bp-great{margin-top:0}
.pb-best-price .bp-ml{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border-top:1px solid rgba(255,255,255,.10)}
.pb-best-price #bp-mobile .bp-add{flex:0 0 auto;min-width:56px;height:40px;padding:0 10px;font-size:11px}
.pb-best-price .bp-ml-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.pb-best-price .bp-ml-lbl{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pb-best-price .bp-ml-t .bp-ml-fair{margin-top:2px}
.pb-best-price .bp-ml .bp-spacer,.pb-best-price .bp-mo-r .bp-spacer{min-width:4px}
.pb-best-price .bp-ml-fair{font-size:11px;font-weight:500;color:rgba(255,255,255,.5);white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pb-best-price .bp-mb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:96px;height:40px;border-radius:8px;flex:0 0 auto;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.pb-best-price .bp-mb.best{background:linear-gradient(180deg,rgba(var(--theme-accent-rgb,0,211,189),.12) 0%,rgba(var(--theme-accent-rgb,0,211,189),.04) 100%);border-color:rgba(var(--theme-accent-rgb,0,211,189),.75);color:var(--theme-accent-bright,#00F5D4);font-weight:700}
.pb-best-price .bp-mb.empty{color:rgba(255,255,255,.3);font-weight:400}
.pb-best-price .bp-mb.sm{width:84px;font-size:13px}
.pb-best-price .bp-mb .bp-bk,.pb-best-price .bp-mb .bp-mono{border-radius:4px}
.pb-best-price .bp-mb .bp-ext{top:2px;right:2px;width:8px;height:8px;opacity:.7}
.pb-best-price .bp-mb.slip .bp-ext,.pb-best-price .bp-mk.slip .bp-ext{stroke:#f5c042;opacity:.9}
.pb-best-price .bp-mf{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;border:0;border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);color:rgba(255,255,255,.7);font-size:13px;font-weight:600;cursor:pointer}
.pb-best-price .bp-mf-n{color:rgba(255,255,255,.45);font-weight:500}
.pb-best-price .bp-mf svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.pb-best-price .bp-mc.is-open .bp-mf{color:var(--theme-accent-bright,#00F5D4);background:rgba(var(--theme-accent-rgb,0,211,189),.05)}
.pb-best-price .bp-mc.is-open .bp-mf svg{transform:rotate(180deg)}
.pb-best-price .bp-mx{padding:2px 12px 12px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-mx-lbl{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.45);margin:12px 0 6px}
.pb-best-price .bp-mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.pb-best-price .bp-mk{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.86);text-decoration:none;font-weight:500;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0;line-height:1}
.pb-best-price .bp-mk-v{display:flex;flex-direction:column;align-items:center;gap:3px}
.pb-best-price .bp-mk .bp-cap{font-size:9px;font-weight:400;color:rgba(255,255,255,.5);line-height:1}
.pb-best-price .bp-mk.own{color:rgba(255,255,255,.62)}
.pb-best-price .bp-mk.tiny{color:rgba(255,255,255,.38)}
.pb-best-price .bp-mk.best{background:linear-gradient(180deg,rgba(var(--theme-accent-rgb,0,211,189),.12) 0%,rgba(var(--theme-accent-rgb,0,211,189),.04) 100%);border-color:rgba(var(--theme-accent-rgb,0,211,189),.75);color:var(--theme-accent-bright,#00F5D4);font-weight:700}
.pb-best-price .bp-mk.best .bp-cap{color:rgba(0,245,212,.8)}
.pb-best-price .bp-mk .bp-ext{opacity:.7}
.pb-best-price .bp-mo-r{display:flex;align-items:center;gap:10px;height:44px}
.pb-best-price .bp-mo-r.first{border-top:1px solid rgba(255,255,255,.10)}
.pb-best-price .bp-mx-lbl+.bp-mo-r{border-top:0}
.pb-best-price .bp-mo-sp{width:56px;flex:0 0 auto}
.pb-best-price .bp-mo-lbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.85);white-space:nowrap;min-width:0}
.pb-best-price .bp-mo-lbl>span{overflow:hidden;text-overflow:ellipsis}
.pb-best-price .bp-mo-lbl .bp-mainpill{flex:0 0 auto}
.pb-best-price .bp-mo-r.is-main .bp-mo-lbl{color:#fff;font-weight:600}
.pb-best-price .bp-mo .bp-lines{display:block;width:100%;height:40px;margin:8px 0 0;padding:0 14px}
.pb-best-price .bp-m-more{padding:2px 0 12px;text-align:center}
.pb-best-price .bp-m-more .bp-more{height:40px;padding:0 20px}
.pb-best-price #bp-mobile .bp-empty{padding:40px 12px}

/* ==== the phone layer: the demo's <=640px block at the app's compact breakpoint, ~1.8x ====
   The page scrolls, the board loses its fixed height, the controls stack:
   the segmented bar with Great prices, the bet-type chips as one scrolling
   strip, the search full width with the freshness line under it. ---- */
@media (max-width: 1000px) {
  .pb-best-price { --bp-top: 108px; font-size: 24px; }
  .pb-best-price #bp-section { padding: 0 12px; margin-top: 12px; }
  .pb-best-price #bp-board { min-height: 0; max-height: none; }
  .pb-best-price .bp-board-inner { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 14px; }
  .pb-best-price .bp-board-head { display: contents; }
  .pb-best-price .bp-viewgrp { order: 1; display: flex; gap: 12px; }
  .pb-best-price .bp-view { flex: 1 1 auto; min-width: 0; gap: 12px; }
  .pb-best-price .bp-seg { flex: 1 1 0; height: 72px; padding: 0 10px; font-size: 25px; }
  .pb-best-price #bp-great { height: 72px; padding: 0 26px; font-size: 25px; flex: 0 0 auto; }
  .pb-best-price #bp-markets { order: 2; flex: 0 0 auto; width: auto; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .pb-best-price #bp-markets::-webkit-scrollbar { display: none; }
  .pb-best-price #bp-markets .bp-chip { height: 72px; padding: 0 26px; font-size: 25px; flex: 0 0 auto; border-radius: 999px; }
  .pb-best-price .bp-head-right { order: 3; width: 100%; }
  .pb-best-price .bp-search { width: 100%; }
  .pb-best-price .bp-search svg { left: 24px; width: 28px; height: 28px; }
  .pb-best-price .bp-search input { width: 100%; height: 78px; padding: 0 20px 0 68px; font-size: 27px; border-radius: 16px; }
  .pb-best-price .bp-board-row2 { order: 4; justify-content: flex-start; margin-top: 0; min-height: 0; display: none; }
  .pb-best-price .bp-live { font-size: 21px; padding: 2px 4px 0; }
  .pb-best-price .bp-live::before { width: 12px; height: 12px; margin-right: 10px; }
  .pb-best-price .bp-fold { display: none; }
  .pb-best-price .bp-table-wrap { margin: 0 0 20px; }
  .pb-best-price .bp-state { padding: 72px 20px; font-size: 27px; }
  .pb-best-price .bp-state .bp-retry { margin-top: 24px; padding: 0 36px; height: 72px; line-height: 70px; font-size: 24px; }

  /* the card list */
  .pb-best-price #bp-mobile { padding: 0 20px 24px; }
  .pb-best-price .bp-mg { gap: 16px; min-height: 100px; padding: 10px 0; }
  .pb-best-price .bp-mg-l { gap: 16px; }
  .pb-best-price .bp-mg-logos { gap: 4px; }
  .pb-best-price .bp-mg-name { font-size: 29px; gap: 10px; }
  .pb-best-price .bp-mg-name .bp-gat { font-size: 25px; }
  .pb-best-price .bp-mg-sub { font-size: 21px; margin-top: 4px; }
  .pb-best-price .bp-mg-n { font-size: 21px; }
  .pb-best-price .bp-mg-chev { width: 72px; height: 72px; border-radius: 18px; }
  .pb-best-price .bp-mg-chev svg { width: 28px; height: 28px; }
  .pb-best-price .bp-mc { border-radius: 20px; margin: 0 0 18px; }
  .pb-best-price .bp-mc-head { gap: 18px; padding: 20px 20px 16px; }
  .pb-best-price .bp-mc-name { font-size: 27px; }
  .pb-best-price .bp-mc-sub { font-size: 21px; gap: 8px; margin-top: 4px; }
  .pb-best-price .bp-mc-t .bp-gtag { font-size: 19px; margin-top: 4px; }
  .pb-best-price .bp-mc-r { gap: 8px; }
  .pb-best-price #bp-mobile .bp-gap { font-size: 20px; padding: 6px 13px; }
  .pb-best-price #bp-mobile .bp-gap.lo { padding: 0; }
  .pb-best-price #bp-mobile .bp-great { font-size: 17px; padding: 4px 12px; }
  .pb-best-price .bp-ml { gap: 16px; height: 86px; padding: 0 20px; }
  .pb-best-price .bp-mc-head .bp-avatar { width: 72px; height: 72px; }
  .pb-best-price #bp-mobile .bp-add { min-width: 100px; height: 72px; padding: 0 18px; font-size: 20px; border-radius: 10px; }
  /* "Coming soon" wraps to two lines inside the same 100x72 box: the row does not jump */
  .pb-best-price #bp-mobile .bp-add.bp-soon { max-width: 100px; white-space: normal; line-height: 1.05; font-size: 16px; letter-spacing: 0; padding: 0 8px; }
  .pb-best-price .bp-ml-lbl { font-size: 25px; }
  .pb-best-price .bp-ml-t .bp-ml-fair { margin-top: 4px; }
  .pb-best-price .bp-ml-fair { font-size: 20px; }
  .pb-best-price .bp-mb { width: 172px; height: 72px; gap: 10px; border-radius: 14px; font-size: 25px; }
  .pb-best-price .bp-mb.sm { width: 150px; font-size: 23px; }
  .pb-best-price .bp-mb .bp-bk, .pb-best-price .bp-mb .bp-mono { border-radius: 7px; }
  .pb-best-price .bp-mb .bp-ext { top: 4px; right: 4px; width: 14px; height: 14px; }
  .pb-best-price .bp-mf { height: 72px; font-size: 23px; gap: 10px; }
  .pb-best-price .bp-mf svg { width: 26px; height: 26px; }
  .pb-best-price .bp-mx { padding: 4px 20px 20px; }
  .pb-best-price .bp-mx-lbl { font-size: 19px; margin: 20px 0 10px; }
  .pb-best-price .bp-mx-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
  .pb-best-price .bp-mk { height: 80px; gap: 10px; border-radius: 14px; font-size: 23px; }
  .pb-best-price .bp-mk-v { gap: 5px; }
  .pb-best-price .bp-mk .bp-cap { font-size: 16px; }
  .pb-best-price .bp-mk .bp-ext { width: 16px; height: 16px; top: 5px; right: 5px; }
  .pb-best-price .bp-mo-r { gap: 16px; height: 80px; }
  .pb-best-price .bp-mo-sp { width: 100px; }
  .pb-best-price .bp-mo-lbl { font-size: 23px; gap: 10px; }
  .pb-best-price #bp-mobile .bp-mainpill { font-size: 17px; padding: 4px 10px; }
  .pb-best-price .bp-mo .bp-lines { height: 72px; margin: 14px 0 0; padding: 0 24px; font-size: 22px; }
  .pb-best-price .bp-m-more { padding: 4px 0 20px; }
  .pb-best-price .bp-m-more .bp-more { height: 72px; padding: 0 36px; font-size: 22px; }
  .pb-best-price #bp-mobile .bp-empty { padding: 72px 20px; font-size: 24px; }
}

/* ---- the hovered book column, and the row's cheapest price ---- */
.pb-best-price .bp-table td.cell-bk.bp-col-hot{background:rgba(255,255,255,.11)}
.pb-best-price .bp-table th.col-book.bp-col-hot{background:#22262c}
/* the row's cheapest usable price: the mirror of .best, deliberately quieter — it is information, not an action */
.pb-best-price .bp-c.worst,.pb-best-price .bp-cell.worst,.pb-best-price .bp-mk.worst{background:linear-gradient(180deg,rgba(255,101,119,.10) 0%,rgba(255,101,119,.03) 100%);border-color:rgba(255,101,119,.42);color:#ff8b98}
.pb-best-price a.bp-c.worst:hover,.pb-best-price a.bp-cell.worst:hover,.pb-best-price a.bp-mk.worst:hover{background:rgba(255,101,119,.16);border-color:rgba(255,101,119,.6)}
.pb-best-price .bp-c.worst .bp-cap{color:rgba(255,139,152,.75)}