/* Narrow screens (≤1180px, ≤640px): the rules that rearrange the page */
@media (max-width: 1180px) {
  .fam-h {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  /* top bar on one line: logo · search · books · settings (the views: the bottom bar). Search is an icon until tapped,
     then covers the line; the books button is a count, not every logo */
  .board-in {
    position: relative;
    flex-wrap: nowrap;
    height: auto;
    padding-block: var(--s2) 0;
    gap: 0 var(--s2);
  }
  .tools {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  .views {
    order: 2;
    flex: 1 1 100%;
    height: 40px;
    margin-left: calc(var(--s3) * -1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .views::-webkit-scrollbar {
    display: none;
  }
  .views button,
  .views a {
    flex: none;
  }
  .search input {
    width: var(--ctl);
    padding: 0;
    cursor: pointer;
    color: transparent;
  }
  .search input::placeholder {
    color: transparent;
  }
  .search input:not(:placeholder-shown) {
    border-color: var(--accent);
    background: var(--accent-tint);
  }
  .search svg {
    left: 9px;
  }
  .search:focus-within {
    position: absolute;
    z-index: 5;
    top: var(--s2);
    left: var(--gutter);
    right: var(--gutter);
  }
  .search:focus-within input {
    width: 100%;
    padding: 0 var(--s3) 0 34px;
    cursor: text;
    background: var(--surface);
    color: var(--ink);
  }
  .search:focus-within input::placeholder {
    color: var(--faint);
  }
  .search:focus-within svg {
    left: var(--s3);
  }
  #mine summary .lg {
    display: none;
  }
  /* phone: no Down books; at most the first 2 Slow ones (counted among Slow spans only) */
  .health span[data-st='bad'],
  .health span[data-st='warn'] ~ span[data-st='warn'] ~ span[data-st='warn'] {
    display: none;
  }
  /* game strip: narrower cards, no props line */
  .game {
    width: 128px;
    padding-block: var(--s2);
  }
  .game .gp {
    display: none;
  }
  .layout {
    padding-block: var(--s3) 40px;
  }
  /* Arbs: max bet, min profit and sort sit behind a Filters button */
  .ftog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    font: 500 var(--t-sm)/1 var(--body);
    color: var(--ink);
  }
  .ftog em {
    font-style: normal;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .arbhead.fopen .ftog {
    background: var(--sunk);
  }
  .arbhead:not(.fopen) #arbCtl {
    display: none;
  }
  /* player ladders: name and prices on one line, the name wrapping to two; the side names column narrows */
  .fam-h.sharedrow,
  .fam-h.shead {
    grid-template-columns: minmax(64px, 24%) minmax(0, 1fr);
    gap: 0 var(--s2);
    padding-block: var(--s2);
    align-items: center;
  }
  .fam-h.sharedrow .axis,
  .fam-h.shead .axis {
    --sn: 36px;
  }
  .fam-h.sharedrow .ftitle .who b {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .fam-h.sharedrow .ftitle .who b img {
    display: none;
  }
  .fam-h.sharedrow .pc {
    padding-inline: 2px;
  }
  /* 1st drive boxes: a narrower outcome column that wraps, so two team columns fit without scrolling */
  .d1pair .tdg .tn span,
  .section.d1 .tdg .tn span {
    line-height: 1.15;
  }
  /* labels and meta a step up (prices keep 13px: the ladder columns are sized for it) */
  :root {
    --t-xs: 12px;
    --t-sm: 13px;
  }
  /* game rows on a phone: the market name on its own line, the prices full width under it */
  .fam-h {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2) 0;
    min-height: 0;
    padding: var(--s3);
  }
  .ftitle .who {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .ftitle .who b {
    white-space: normal;
  }
  .fam-h.sharedrow {
    min-height: 0;
  }
  .fam-h.listrow .ftitle {
    padding-top: 0;
  }
  .axis {
    overflow-x: auto;
    scrollbar-width: none;
  } /* rows with fixed columns (period winners) scroll inside the row */
  .axis::-webkit-scrollbar {
    display: none;
  }
  .duel {
    padding-inline: 0;
    gap: var(--s2);
  }
  .duel .bar i {
    min-width: 0;
    overflow: hidden;
  }
  .duel .bar i.tie {
    min-width: 72px;
  }
  /* a table's row names: the name column is 168px (less the team logo and, in a two-sided table, the OVER / UNDER or
     YES / NO), so a name wraps to two lines, the row growing to fit, instead of being cut to ~8 letters. Every cell of
     the row stretches to its height, so the row lines stay straight */
  .tdg > span:not(.th) {
    height: auto;
    min-height: 30px;
    align-self: stretch;
    padding-inline: var(--s2);
  }
  .tdg .tn {
    padding-block: 3px;
    padding-left: var(--s3);
    gap: 6px;
  }
  .tdg .tn > span:not(.sd) {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.2;
  }
  .tdg:has(.tc.ou) .tn > span:not(.sd) {
    -webkit-line-clamp: 3; /* the sides leave ~100px: "Jaxon / Smith- / Njigba" in the row's 42px */
    line-height: 1.1;
  }
  /* a step smaller on a phone (Avi 10/13: "everything's too big"): prices and their logos, the team logo, the column
     heads, the OVER / UNDER, and two-price rows 42px, not 56 */
  .tdg .pc {
    font-size: 11.5px;
    padding-inline: 2px;
  }
  .tdg .pc .bk,
  .tdg .pc .bk.many {
    width: 11px;
    height: 11px;
    min-width: 11px;
  }
  .tdg .tn .lg,
  .tdg .tn .lg img {
    width: 14px;
    height: 14px;
  }
  .tdg .th {
    height: 26px;
    font-size: 9.5px;
  }
  .tdg:has(.tc.ou) > span:not(.th) {
    height: 42px;
  }
  .tdg.kk:has(.tc.ou) > span:not(.th) {
    height: 52px;
  }
  .tdg:has(.tc.ou) > .tc {
    gap: 2px;
    padding-top: 4px;
  }
  .tdg:has(.tc.ou) > .tc > *,
  .tdg .tn .sd > b {
    height: 16px;
  }
  .tdg:has(.tc.ou) > .tc > small,
  .tdg .tn .sd > b.top {
    height: 11px;
  }
  .tdg .tn .sd {
    gap: 2px;
    margin-top: 1px;
    padding-left: var(--s1);
  }
  .tdg .tn .sd > b {
    font-size: 9.5px;
  }
  /* touchdown table: the player column stays put while the markets scroll */
  .tdg .tn,
  .tdg .th.l {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
  .tdg .th.l {
    background: var(--raised);
  }
}

/* ---------- phone tabs at the bottom (index.html .bnav): Odds · Arbs · Outliers · More (DFS, Stats); the header's row of
   tabs and the game strip off the board are hidden ---------- */
.bnav,
.bmore,
.bscrim {
  display: none;
}
@media (max-width: 640px) {
  .views {
    display: none;
  }
  .board-in {
    padding-block: var(--s2);
  }
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)); /* clear of the floating tab bar */
  }
  /* the page fades into the ground behind the bar (no rule over it) */
  body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(110px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--ground) 70%);
    pointer-events: none;
    z-index: 47; /* under the More sheet's scrim (48) */
  }
  /* the game strip only on Odds: elsewhere a game tap just goes back to Odds, which the bar already does */
  body:not([data-view='board']) .slatebar,
  body:not([data-view='board']) .lgbar {
    display: none;
  }
  /* the tab bar (Avi 11/1, notes/mock-phone-leagues-v8.html): a floating glass capsule inset from the edges, the page
     scrolling under it; the shown tab a lighter pill inside it */
  .bnav {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Odds, Arbs, Outliers, DFS, More */
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, color-mix(in srgb, var(--raised) 86%, var(--ink)) 72%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.35),
      0 14px 36px rgba(0, 0, 0, 0.6);
  }
  @media (prefers-reduced-transparency: reduce) {
    .bnav {
      background: var(--raised);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  .bnav a,
  .bnav button {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: color-mix(in srgb, var(--muted) 75%, var(--ink));
    text-decoration: none;
    font: 500 10px/1 var(--body);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
      transform 100ms ease-out,
      background-color 150ms ease-out;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav a:active,
  .bnav button:active {
    transform: scale(0.94); /* gives on touch-down */
  }
  .bnav svg,
  .bmore svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .bnav .on {
    background: color-mix(in srgb, var(--ink) 15%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: var(--ink);
    font-weight: 600;
  }
  .bnav em {
    position: absolute;
    top: 5px;
    left: calc(50% + 6px);
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    font: 600 10px/1 var(--body);
    font-style: normal;
    color: var(--pos);
    background: var(--pos-tint);
    text-align: center;
  }
  .bnav em:empty {
    display: none;
  }
  /* More: a card floating over the bar (its edges, 10px above it), the page dimmed behind it */
  .bmore:not([hidden]) {
    display: grid;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(14px + 62px + 10px + env(safe-area-inset-bottom)); /* the bar's offset + height (54 + 2 x 4) + a gap */
    z-index: 49;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgb(0 0 0 / 0.45);
  }
  .bmore a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 52px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font: 500 15px/1 var(--body);
  }
  .bmore a.on {
    background: var(--raised);
  }
  .bmore svg {
    color: var(--muted);
  }
  .bscrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgb(8 12 16 / 0.45);
  }
}

/* ---------- a game on a phone: the game strip and the market row stay at the top while the board scrolls; the market
   tabs are pills (the selected one centred, app.js), the period buttons share the width ---------- */
@media (max-width: 640px) {
  .slatebar {
    position: sticky;
    top: 0;
    z-index: 21;
  }
  .mine .menu {
    z-index: 30; /* the books and settings menus open over the pinned game strip */
  }
  .secnav {
    position: sticky;
    top: var(--slateh, 76px); /* right under the game strip (its height measured by app.js) */
    z-index: 20;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: var(--ground);
    border-bottom: 1px solid var(--line);
  }
  .secnav .subtabs {
    gap: 8px;
    margin: 0;
    padding: 10px 0;
  }
  .secnav .subtabs button:not(.ng):not(.dc) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: none;
    font: 500 var(--t-md) / 1 var(--body);
    color: var(--ink);
    background: var(--surface);
  }
  .secnav .subtabs button:not(.ng):not(.dc) em {
    margin: 0;
    color: var(--faint);
  }
  .secnav .subtabs button.on:not(.ng):not(.dc) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ground);
    font-weight: 600;
  }
  .secnav .subtabs button.on:not(.ng):not(.dc) em {
    color: color-mix(in srgb, var(--ground) 65%, var(--ink));
  }
  .secnav .subtabs .ng {
    display: none; /* the group labels (GAME, PLAYERS…) between the pills */
  }
  .gper {
    padding: 10px 0 0;
  }
  .gper .ng {
    display: none;
  }
  .gper .seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); /* as many as the sport has: NFL 7 (Game, halves, quarters), NHL 5 (Game, 60 min, periods) */
    width: 100%;
  }
  .gper .seg button {
    padding: 0;
    text-align: center;
  }
  /* the moneyline bar: each team's logo only (the prices either side already say which is which) */
  .duel .bar i:not(.tie) {
    font-size: 0;
    gap: 0;
  }
}

/* ---------- a phone's line ladder charts: the market's title opens / shuts its chart (app.js), the toggle a 40px target;
   Fair / Best price on its own line above the chart, not over its bars ---------- */
@media (max-width: 640px) {
  .fam-h:has(.fx) .ftitle {
    cursor: pointer;
  }
  .fam-h .fx {
    width: 40px;
    height: 40px;
    margin-left: 0;
  }
  /* the spread / total chart: not on a phone (Avi 10/20) */
  .spc {
    display: none;
  }
}

/* ---------- Arbs on a phone: phase and filters each on one line (filters always open), the market tabs as pills, each
   arb its own card: game and profit, the market and return, then one row per bet (book, side, price, American) ---------- */
@media (max-width: 640px) {
  #arbView .arbhead {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  #arbView .ftog {
    display: none;
  }
  /* the phase and the Books / Games / Markets filters on one line (Avi 11/1: they wrapped to two): "All " left out and
     the chips a little tighter (measured, plex-sans at 13px: Pregame 412 / Books / Games / Markets 352px of a 402px
     phone's 368); only the phase (its count) shrinks to an ellipsis on a narrower phone, the filters never */
  #arbView .afbar {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
  }
  #arbView .afbar > .afl {
    flex: none;
  }
  #arbView .afbar > #arbPhase {
    flex: 0 1 auto;
    min-width: 0;
  }
  #arbView .afbar > .afl summary {
    min-width: 0;
    padding: 0 7px;
  }
  #arbView .afbar > .afl summary::after {
    margin-left: 4px;
  }
  #arbView .afbar > .afl summary b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #arbView .afl summary .aall {
    display: none;
  }
  #arbView .afl:not(.on) summary b {
    text-transform: capitalize; /* "books" -> "Books" once "All " is gone */
  }
  #arbView .arbhead #arbCtl {
    display: flex;
    flex-basis: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
  }
  #arbCtl .cap {
    gap: 6px;
  }
  #arbCtl .cap input {
    width: 72px;
  }
  .cap i.long {
    display: none;
  }
  #arbRows {
    display: grid;
    gap: 10px;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  #arbRows > * {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
  }
  /* History and Replay rows: game and edge, then the market, then the legs, then how long */
  #arbRows .ahead.hrow {
    display: none;
  }
  #arbRows .arow.hrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 14px;
  }
  #arbRows .arow.hrow .mk,
  #arbRows .arow.hrow .legs {
    grid-column: 1 / -1;
  }
  #arbRows .arow.hrow .pf {
    grid-row: 1;
    grid-column: 2;
  }
  #arbRows .arow.hrow .du {
    text-align: left;
  }
  #arbRows .arow:not(.hrow) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'gm pf' 'mk ret' 'legs legs';
    gap: 2px 12px;
    padding: 12px 14px 6px;
  }
  #arbRows .arow:not(.hrow) .gm {
    font: 600 var(--t-sm) / 1 var(--display);
    color: var(--muted);
  }
  #arbRows .arow:not(.hrow) .gm img {
    width: 16px;
    height: 16px;
  }
  #arbRows .arow:not(.hrow) .mk {
    display: flex;
    flex-direction: column-reverse; /* the market (James Cook III receptions · 1st half) over its line (1+) */
    gap: 3px;
    margin-top: 4px;
  }
  #arbRows .arow:not(.hrow) .mk small {
    font: 600 15px/1.25 var(--body);
    color: var(--ink);
    white-space: normal;
  }
  #arbRows .arow:not(.hrow) .mk b {
    font: 500 var(--t-sm) / 1.2 var(--body);
    color: var(--muted);
    -webkit-line-clamp: 1;
  }
  #arbRows .arow:not(.hrow) .pf {
    align-self: start;
  }
  #arbRows .arow:not(.hrow) .pf b {
    font: 700 18px/1 var(--body);
    color: var(--pos);
  }
  #arbRows .arow:not(.hrow) .pf small {
    display: block;
    margin-top: 3px;
  }
  #arbRows .arow:not(.hrow) .ret {
    align-self: end;
    font: 600 var(--t-sm) / 1 var(--body);
  }
  #arbRows .arow:not(.hrow) .legs {
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid var(--line);
  }
  #arbRows .arow:not(.hrow) .lg {
    grid-template-columns: 20px minmax(0, 1fr) auto 64px 52px;
    gap: 10px;
    height: 40px;
    border-bottom: 1px solid var(--line);
  }
  #arbRows .arow:not(.hrow) .lg:last-child {
    border-bottom: 0;
  }
  #arbRows .arow:not(.hrow) .lg img {
    width: 20px;
    height: 20px;
  }
  #arbRows .arow:not(.hrow) .lg .bkn {
    display: block;
    font: 500 var(--t-md) / 1 var(--body);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #arbRows .arow:not(.hrow) .lg small {
    justify-self: end;
    font-size: var(--t-xs);
    color: var(--muted);
  }
  #arbRows .arow:not(.hrow) .lg > span:last-child {
    display: contents; /* its price and American odds take the row's last two columns */
  }
  #arbRows .arow:not(.hrow) .lg .px {
    justify-self: end;
    font: 600 var(--t-lg) / 1 var(--body);
  }
  #arbRows .arow:not(.hrow) .lg em {
    justify-self: end;
    margin: 0;
  }
}

/* ---------- Outliers on a phone: the two price tables side by side, each fitting its half (the price column as wide as
   its price, "incl. fee" a small line under it so it doesn't widen the row); the price scale's end logo kept on screen;
   the full-screen popup grows and scrolls instead of squeezing its boxes to the screen's height ---------- */
@media (max-width: 640px) {
  .oxts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
  }
  .oxt td {
    height: 44px;
    padding: 12px 4px 0;
    vertical-align: top;
    font-size: var(--t-sm);
  }
  .oxt .pr {
    position: relative;
  }
  .oxt .pr small,
  .oxt.yes .pr small,
  .oxt.no .pr small {
    position: absolute;
    bottom: 3px;
    margin: 0;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }
  .oxt.yes .pr small {
    right: 4px;
  }
  .oxt.no .pr small {
    left: 4px;
  }
  .scale .track {
    margin-right: 12px;
  }
  .pop .popcard {
    align-self: start;
  }
}

/* ---------- Halftime / fulltime on a phone: the rows say only who leads at the half (BUF / Tie / LAR, app.js), the name
   column narrows, so the three result columns fit ---------- */
@media (max-width: 640px) {
  .tdg.htft {
    grid-template-columns: minmax(0, 136px) repeat(3, minmax(64px, 1fr)) !important; /* over the table's own inline columns */
  }
  .tdg.htft .lx {
    display: none;
  }
}
@media (min-width: 641px) {
  .tdg.htft .ls {
    display: none;
  }
}
/* (the row names' long and short labels are <i>: labelSides puts the YES / NO after the name's first </span>) */
.tdg.htft i.lx,
.tdg.htft i.ls {
  font-style: inherit;
}

/* ---------- a phone's top of page (Avi 10/14, notes/mock-phone-chrome.html): the league row folds into the game strip as a
   small picker, each game chip the teams over the kickoff (10/19, notes/mock-phone-home.html), the market pills tightened.
   Desktop keeps the league row and the three-line chips (.g1 and .lgsel hidden there: board.css) ---------- */
.lgpk {
  display: none;
}
@media (max-width: 640px) {
  .lgbar {
    display: none;
  }
  /* the strip's row (mock .navrow): 45px and its foot line; the league picker pinned at the left with a line after it
     (header.js #lgpk), the games scrolling beside it */
  .slatebar > .wrap {
    display: flex;
    align-items: stretch;
    height: 45px;
    padding-inline: 0;
  }
  .lgpk {
    display: flex;
    flex: none;
  }
  .lgpk:empty {
    display: none;
  }
  .slate {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline: 0;
  }
  .lgsel {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 14px;
    border: 0;
    border-right: 1px solid var(--line);
    background: none;
    cursor: pointer;
  }
  .lgsel img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .lgsel svg,
  .gpsel svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .lgsel svg {
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .lgo .lgsel svg {
    transform: rotate(180deg);
  }
  /* the picker open (boot.js lgShow): the games slide out left, the leagues in from the right, in the same 45 px row */
  .slatebar > .wrap {
    position: relative;
    overflow: hidden;
  }
  .slate,
  .lgopts {
    transition:
      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.18s ease;
  }
  .lgopts {
    position: absolute;
    inset: 0 0 0 59px; /* left: the picker's width, set on open */
    display: flex;
    align-items: stretch;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
  }
  .lgo .slate {
    opacity: 0;
    transform: translateX(-24px);
    pointer-events: none;
  }
  .lgo .lgopts {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .lgopts button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    background: none;
    font: 500 13px/1 var(--body);
    color: var(--muted);
    cursor: pointer;
  }
  .lgopts button.on {
    font-weight: 600;
    color: var(--ink);
  }
  .lgopts button.on::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
  }
  .lgopts img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .lgopts small {
    font: 400 11px/1 var(--num);
    color: var(--muted);
  }
  @media (prefers-reduced-motion: reduce) {
    .slate,
    .lgopts {
      transform: none !important;
    }
  }
  /* a chip (mock .gm): the teams over the kickoff, 14px either side, the shown game underlined */
  .game {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0 14px;
    background: none;
  }
  .game:hover,
  .game.on {
    background: none;
    box-shadow: none;
  }
  .game + .game::before {
    display: none;
  }
  .game.on::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
  }
  .game .when,
  .game .mrow,
  .game .gp {
    display: none;
  }
  .game .g1 {
    display: grid;
    gap: 2px;
  }
  .game .g1 b {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 600 13px/1 var(--body);
    color: var(--ink);
    white-space: nowrap;
  }
  .game:not(.on) .g1 b {
    font-weight: 500;
    color: var(--muted);
  }
  .game .g1 b img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  .game .g1 small {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 400 11px/1 var(--num);
    color: var(--muted);
    white-space: nowrap;
  }
  .game .g1 .arbdot {
    margin-left: 0;
  }
  /* the period switch: 30 px, smaller type, less room above */
  .gper {
    padding: 8px 0 0;
  }
  .gper .seg button {
    height: 30px;
    font-size: 12px;
  }
  /* the market pills (mock .pills / .pill): a 45px row and its foot line, 8px after the period, 12px at the end */
  .secnav .subtabs {
    gap: 6px;
    height: 45px;
    align-items: center;
    padding: 0 12px 0 8px;
  }
  .secnav .subtabs button:not(.ng):not(.dc) {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    background: none;
  }
  .secnav .subtabs button:not(.ng):not(.dc) em {
    font: 400 12px/1 var(--num);
    color: var(--muted);
  }
  .secnav .subtabs button.on:not(.ng):not(.dc) em {
    color: color-mix(in srgb, var(--faint) 77%, var(--ground)); /* the mock's #4a5259 in the dark theme */
  }
}

/* ---------- a phone's top of page, each row one line (Avi 10/19, notes/mock-phone-home.html): the header's logo, then
   search, books (an icon and the count) and settings as 40px icon buttons, Sign in / the account in the settings menu
   (account.js #acctIn), any stale books' dots before them and the first to give way; the period a dropdown at the start
   of the market pills' row (layout.js); the scrolling rows fade only at an edge with more past it (header.js).
   Desktop: the books icon, the period dropdown and the menu's account entry hidden ---------- */
#mine summary .bkic,
.gpsel,
.acctin {
  display: none;
}
.settings .menu .odds {
  display: contents;
}
@media (max-width: 640px) {
  .brand,
  .tools > * {
    flex: none;
  }
  .health {
    order: -1;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 4px;
  }
  .health:not(:has(> span[data-st='warn'])),
  .acctslot {
    display: none;
  }
  .search input {
    width: 40px;
    height: 40px;
    border-color: transparent;
    background: none;
  }
  .search svg {
    left: 10px;
    width: 20px;
    height: 20px;
    stroke: var(--muted);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #mine summary,
  .settings summary {
    height: 40px;
    border: 0;
    background: none;
  }
  #mine summary:hover,
  #mine[open] summary,
  .settings summary:hover,
  .settings[open] summary {
    border-color: transparent;
    background: var(--raised);
  }
  #mine summary {
    gap: 5px;
    padding: 0 8px;
  }
  #mine summary .bkic {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #mine summary .bkw {
    display: none;
  }
  #mine summary b {
    font: 600 var(--t-md)/1 var(--num);
  }
  .settings summary {
    width: 40px;
  }
  .settings summary svg {
    width: 20px;
    height: 20px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .acctin:not(:empty) {
    display: grid;
    gap: 2px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .acctin b {
    padding: 0 8px 6px;
    font: 500 var(--t-md)/1.2 var(--body);
    color: var(--ink);
    word-break: break-all;
  }
  .settings .acctin button {
    color: var(--ink);
  }
  .settings .menu .acctin button::after {
    display: none;
  }
  /* the market pills' row: the period dropdown, then the pills */
  .secnav {
    display: flex;
    align-items: center;
    gap: 0;
    padding-inline: 12px 0;
  }
  .secnav > .subtabs {
    position: relative; /* the pills' offsetLeft from the row's own start (dfs.js centres the selected one) */
    flex: 1 1 auto;
    min-width: 0;
  }
  .gper {
    flex: none;
    padding: 0;
  }
  .gper .seg {
    display: none;
  }
  .gper .gpsel {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--raised);
  }
  .gpsel select {
    appearance: none;
    -webkit-appearance: none;
    height: 100%;
    padding: 0 24px 0 10px;
    border: 0;
    background: none;
    font: 600 var(--t-md)/1 var(--body);
    color: var(--ink);
    cursor: pointer;
  }
  .gpsel svg {
    position: absolute;
    right: 8px;
    pointer-events: none;
  }
  /* the header's row (mock .hdr): 51px and the strip's top line, 16px before the logo, 12px after settings, the buttons
     4px apart, their icons 20px */
  .board-in {
    height: 51px;
    padding: 0 12px 0 16px;
    gap: 4px;
  }
  .brand {
    gap: 8px;
  }
  .tools {
    gap: 4px;
  }
  /* the board right under the market pills' row, 8px down (mock .list) */
  body[data-view='board'] .layout:has(> .secnav > #nav:not([hidden])) {
    padding-top: 0;
    row-gap: 8px;
  }
  /* edge fades: on only where the row has more past that edge */
  .slate[data-fl],
  .secnav .subtabs[data-fl] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
    mask-image: linear-gradient(90deg, transparent, #000 28px);
  }
  .slate[data-fr],
  .secnav .subtabs[data-fr] {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 28px);
    mask-image: linear-gradient(270deg, transparent, #000 28px);
  }
  .slate[data-fl][data-fr],
  .secnav .subtabs[data-fl][data-fr] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
}

/* ---------- Outliers on a phone (notes/mock-outliers-v3.html): Pregame / Live and the sort on one row, the book chips one
   sideways-scrolling row (as the Arbs tab's market pills), a row per bet: its short name over the game, the book's price
   over the next best, the edge over how long it's been open. History stacks ---------- */
@media (max-width: 640px) {
  .oxtop {
    display: block;
    margin-bottom: 10px;
  }
  .oxsortd {
    display: block;
  }
  .oxhead,
  .oxr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 56px;
    gap: 8px;
    align-items: center;
    padding: 0 10px 0 12px;
  }
  .oxhead {
    height: 30px;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    font: 500 var(--t-sm)/1 var(--body);
    color: var(--muted);
    white-space: nowrap;
  }
  .oxhead .r {
    text-align: right;
    justify-self: end;
  }
  .oxr {
    height: 60px;
    /* rows off screen aren't laid out or painted until they near it (300 rows on a phone, Avi 10/20: slow) */
    content-visibility: auto;
    contain-intrinsic-size: auto 60px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .oxr:last-child {
    border-bottom: 0;
  }
  .oxr:active {
    background: var(--raised);
  }
  #oxView .bt b {
    font-size: 14px;
  }
  #oxView .bt small {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font: 500 var(--t-sm)/15px var(--body);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
  }
  #oxView .bt small img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: none;
  }
  #oxView .bt small i {
    font-style: normal;
    color: var(--faint);
  }
  #oxView .bt small .d {
    font: 400 var(--t-xs)/1 var(--num);
    color: var(--muted);
  }
  .oxr .px,
  .oxr .ed {
    display: grid;
    gap: 4px;
    justify-items: end;
  }
  .oxr .px b {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 var(--t-lg)/18px var(--num);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }
  .oxr .px b img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
  .oxr .px small,
  .oxr .ed small {
    font: 500 var(--t-xs)/15px var(--body);
    color: var(--faint);
    white-space: nowrap;
  }
  /* the next best's book count: in the popup; the row keeps its width for the game's start time */
  .oxr .px small .nb {
    display: none;
  }
  .oxr .px small span {
    font-family: var(--num);
    color: var(--muted);
  }
  .oxr .ed b {
    font: 600 var(--t-lg)/18px var(--num);
    color: var(--pos);
    font-variant-numeric: tabular-nums;
  }
  .oxgh {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: var(--sunk);
    border-bottom: 1px solid var(--line);
    font: 700 var(--t-md)/1 var(--display);
    letter-spacing: 0.02em;
  }
  .oxgh img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .oxgh i {
    font-style: normal;
    font: 500 var(--t-xs)/1 var(--body);
    color: var(--faint);
  }
  .oxgh .d {
    margin-left: 4px;
  }
  .oxgh em {
    margin-left: auto;
    font: 400 var(--t-sm)/1 var(--num);
    font-style: normal;
    color: var(--faint);
  }
  .oxhgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
/* an outlier's popup on a phone: a bottom sheet (notes/mock-outliers-v3.html, the sheet and its grab handle) */
@media (max-width: 640px) {
  .pop .popcard.p7 {
    align-self: end;
    min-height: 0;
    max-height: 86vh;
    max-height: 86dvh;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 10px 10px 0 0;
    padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
  }
  /* opening and closing: the sheet slides up from the bottom edge and back down (Avi 10/20), not the desktop card's
     grow-from-the-press; same spring (motion.js --pd: 0 closed .. 1 open) */
  .pop.anim > .popcard.p7 {
    transform: translateY(calc((1 - var(--pd, 1)) * 100%));
    transform-origin: 50% 100%;
    opacity: 1;
  }
  .p7-grab {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-strong);
    margin: 2px auto 10px;
  }
}

/* ---------- a phone's Game lines (layout.js glPhone, notes/mock-gamelines.html): the sportsbook grid (each team: its
   spread, the total, its moneyline), each team's total, then a row per market opening its sheet of every line ---------- */
@media (max-width: 640px) {
  .glg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px 90px;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .glg + .glg {
    margin-top: 8px;
  }
  .glg .th {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 10px/1 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .glg .th.l {
    justify-content: flex-start;
  }
  .glt,
  .glg > .glc,
  .glg > .gll,
  .glg > span:empty:not(.th) {
    height: 64px;
    border-top: 1px solid var(--line);
  }
  .glt {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 15px/1 var(--body);
    color: var(--ink);
  }
  .glt img {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }
  .gll {
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 14px/1 var(--num);
    color: var(--muted);
  }
  .glc {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink);
  }
  .glc:active {
    background: var(--raised);
  }
  .glc i {
    font: 400 11px/1 var(--num);
    font-style: normal;
    color: var(--muted);
  }
  .glc i.no {
    visibility: hidden;
  }
  /* the main grid (layout.js glPhone .glm) in the league page's card (Avi 11/1, league.css .lgx): a bordered card, its
     head row over a rule, each market a raised tile (the line over the best price and its book; Money the price alone),
     the vig row under; the team totals' grid (.gltt) as it was */
  .glg.glm {
    grid-template-columns: minmax(0, 1fr) 82px 82px 82px;
    column-gap: 4px;
    row-gap: 4px;
    padding: 0 10px 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .glg.glm .th {
    height: 34px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--line);
  }
  .glg.glm > .glt,
  .glg.glm > .glc,
  .glg.glm > span:empty:not(.th) {
    height: 50px;
    border-top: 0;
  }
  .glg.glm > .glt {
    font: 600 15px/1 var(--body);
  }
  .glg.glm > .glt img {
    width: 22px;
    height: 22px;
  }
  .glg.glm > .glc {
    gap: 5px;
    border-radius: var(--r);
    background: var(--raised);
    overflow: hidden;
  }
  .glg.glm > .glc:active {
    background: var(--line-strong);
  }
  .glg.glm > .glc i {
    font: 500 14px/1 var(--num);
    color: var(--ink);
  }
  .glg.glm > .glc i.no {
    display: none;
  }
  .glg.glm > .glc b {
    gap: 4px;
    font: 400 12px/1 var(--num);
    color: var(--muted);
  }
  .glg.glm > .glc b .bk {
    width: 13px;
    height: 13px;
  }
  .glg.glm > .glc:has(i.no) b {
    gap: 5px;
    font: 500 14px/1 var(--num);
    color: var(--ink);
  }
  .glg.glm > .glc:has(i.no) b .bk {
    width: 14px;
    height: 14px;
  }
  /* each team's total in the same card (Avi 11/1): its line, then Over and Under as tiles, the price alone */
  .glg.gltt {
    grid-template-columns: minmax(0, 1fr) 82px 82px 82px;
    column-gap: 4px;
    row-gap: 4px;
    margin-top: 12px;
    padding: 0 10px 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .glg.gltt .th {
    height: 34px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--line);
  }
  .glg.gltt > .glt,
  .glg.gltt > .glc,
  .glg.gltt > .gll {
    height: 50px;
    border-top: 0;
  }
  .glg.gltt > .glt {
    font: 600 15px/1 var(--body);
  }
  .glg.gltt > .glt img {
    width: 22px;
    height: 22px;
  }
  .glg.gltt > .gll {
    font: 500 14px/1 var(--num);
    color: var(--ink);
  }
  .glg.gltt > .glc {
    border-radius: var(--r);
    background: var(--raised);
    overflow: hidden;
  }
  .glg.gltt > .glc:active {
    background: var(--line-strong);
  }
  .glg.gltt > .glc b {
    gap: 5px;
    font: 500 14px/1 var(--num);
    color: var(--ink);
  }
  .glg.gltt > .glc b .bk {
    width: 14px;
    height: 14px;
  }
  .gltt .glc i.no {
    display: none;
  }
  /* the grid is the tab's top, flat: not in the section's card */
  .panel:has(> .rows > .glp) {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .glc b,
  .glq {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 500 15px/1 var(--num);
    color: var(--ink);
  }
  /* the rows that open every line of a market, in a card as the game's (Avi 11/1: flat full-width rows looked out of place) */
  .glos {
    margin-top: 12px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .glos > .glo:last-child {
    border-bottom: 0;
  }
  .glo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    font: 500 14px/1 var(--body);
    color: var(--ink);
    text-align: left;
  }
  .glo em {
    margin-left: 8px;
    font: 400 12px/1 var(--num);
    font-style: normal;
    color: var(--muted);
  }
  .glo svg {
    margin-left: auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* the sheet: a fixed height, two panes side by side (the lines, a line's books), each its title and column heads pinned
     over its own scrolling body; a line tapped slides to its books (.drilled), back slides home */
  /* one height while it's up (Avi 10/20): a line's books view at 7 books (grab, title, chart, 7 rows, "+N more") */
  .pop .popcard.p7.gls {
    --ha: #5b8def;
    --hb: #f2711c;
    height: min(86dvh, calc(12px + 45px + 196px + 45px + 7 * 53px + 45px + env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px 0 0;
  }
  .gls-track {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 200%;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .gls.drilled .gls-track {
    transform: translateX(-50%);
  }
  .gls-pane {
    width: 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .gls-b {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .gls .p7-grab {
    margin: 2px auto 0;
  }
  .gls.still .gls-track {
    transition: none;
  }
  .gls-t {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    font: 600 16px/1 var(--body);
  }
  /* a line's books: its two sides and the fair price, the books' column heads right over them (Avi 10/20) */
  .gls-h {
    height: 45px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
  }
  .gls-h .glh:first-child::before,
  .gls-h .glh.r::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ha);
  }
  .gls-h .glh.r::after {
    background: var(--hb);
  }
  /* the fair price between the sides: each side's, the vig removed (fairOf) */
  .glf {
    display: grid;
    justify-items: center;
    gap: 3px;
  }
  .glf small {
    font: 500 9px/1 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .glf b {
    font: 500 12px/1 var(--num);
    color: var(--faint);
  }
  .glf i {
    font-style: normal;
  }
  .glf .a,
  .glhw .a {
    color: var(--ha);
    fill: var(--ha);
  }
  .glf .b,
  .glhw .b {
    color: var(--hb);
    fill: var(--hb);
  }
  /* the chart: between two softly glowing rules, the ranges over its bottom left */
  .glhw {
    position: relative;
    height: 196px;
    background: color-mix(in srgb, var(--ink) 2%, transparent);
  }
  .glhw::before,
  .glhw::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .glhw::before {
    top: 0;
  }
  .glhw::after {
    bottom: 0;
  }
  .glhr {
    position: absolute;
    left: 12px;
    bottom: 8px;
    z-index: 1;
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
  }
  .glhr button {
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 12px;
    background: none;
    font: 500 11px/1 var(--num);
    color: var(--muted);
  }
  .glhr button.on {
    background: var(--raised);
    color: var(--ink);
  }
  .glhc {
    position: relative;
    height: 196px;
    touch-action: pan-y;
  }
  .glhc svg {
    display: block;
    overflow: visible;
  }
  .glhe {
    padding-top: 70px;
    text-align: center;
    font: 400 12px/1 var(--body);
    color: var(--faint);
  }
  .glhw .hg {
    stroke: var(--line);
    stroke-width: 1;
  }
  .glhw .hy,
  .glhw .hx {
    font: 400 10px var(--num);
    fill: var(--faint);
  }
  .glhw .htx {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 2 3;
  }
  .glhw .hgap {
    fill: color-mix(in srgb, var(--ink) 9%, transparent);
  }
  .glhw .hl {
    fill: none;
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .glhw .hl.a {
    stroke: var(--ha);
  }
  .glhw .hl.b {
    stroke: var(--hb);
  }
  .glhw .he {
    font: 600 11px var(--num);
  }
  .glhw .harb {
    fill: var(--pos);
    opacity: 0.35;
  }
  .glhw .hcur {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 2 3;
  }
  .htip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    gap: 12px;
    font: 500 11px/1 var(--num);
    color: var(--ink);
    pointer-events: none;
  }
  .htip.on {
    display: flex;
  }
  .htip span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .htip .bk {
    width: 13px;
    height: 13px;
    border-radius: 3px;
  }
  .htip em {
    font-style: normal;
    color: var(--muted);
  }
  .hk {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .hk.a {
    background: var(--ha);
  }
  .hk.b {
    background: var(--hb);
  }
  .glbm {
    width: 100%;
    height: 45px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    font: 400 12px/1 var(--num);
    color: var(--muted);
  }
  .gls-h .glh {
    grid-column: auto;
    font: 600 15px/1 var(--body);
    color: var(--ink);
  }
  .gls-t2 {
    border-bottom: 1px solid var(--line);
  }
  .gls-t2 .p7-x {
    margin-left: auto;
  }
  .gls-t2 .gls-n {
    font: 600 15px/1 var(--body);
  }
  .gls-t .p7-x {
    margin-left: auto;
  }
  .gls-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -10px 0 -10px -10px;
    padding: 0;
    border: 0;
    background: none;
  }
  .gls-back svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .glsh,
  .glr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 56px 48px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
  }
  .glsh {
    flex: none;
    height: 36px;
  }
  .glb {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 53px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
  }
  /* a price and its books: the price on the outer edge, its books side by side toward the middle */
  .glb .glq {
    gap: 10px;
    font-size: 17px;
    font-weight: 400;
    color: var(--muted);
  }
  .glb .glq b {
    font: inherit;
  }
  .glk {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .glk a {
    display: flex;
  }
  .glk .bk {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
  }
  .glb .glq.best {
    font-weight: 600;
    color: var(--ink);
  }
  /* the main line: a bar at its edge, as the shown game's underline */
  .glr.main {
    box-shadow: inset 3px 0 0 var(--ink);
  }
  .glh {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 var(--body);
    color: var(--muted);
  }
  .glh.r {
    justify-content: flex-end;
  }
  .glh img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .glsh .glv {
    font: 500 10px/1 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .glr {
    height: 44px;
  }
  /* a total's row: Over | the line, its vig under it | Under */
  .glsh.glr1,
  .glr.glr1 {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  }
  .glsh.glr1 .glh {
    grid-column: auto;
  }
  .glr.glr1 {
    height: 48px;
  }
  .glmid {
    display: grid;
    justify-items: center;
    gap: 3px;
  }
  .glmid b {
    font: 400 14px/1 var(--num);
    color: var(--ink);
  }
  .glr.main .glmid b {
    font-weight: 600;
  }
  .glr:active {
    background: var(--raised);
  }
  .gln {
    font: 400 14px/1 var(--num);
    text-align: right;
    padding-right: 10px;
  }
  .gln.r {
    text-align: left;
    padding: 0 0 0 10px;
  }
  .glv {
    font: 400 11px/1 var(--num);
    color: var(--faint);
    text-align: center;
  }
  .glv.arb {
    color: var(--pos);
  }
  .glq.r {
    justify-content: flex-end;
  }
  .glr.main .gln,
  .glr.main .glq {
    font-weight: 600;
  }
}
@media (max-width: 640px) {
  .glc .bk,
  .glq .bk {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    object-fit: contain;
  }
}

/* ---------- a phone's game page (Avi 11/1): a top bar (back, the matchup, its kickoff) in place of the site's header and
   the game strip, the market pills pinned under it; the league page and the other tabs keep the header ---------- */
.gbar {
  display: none;
}
@media (max-width: 640px) {
  html:not(.lg) body[data-view='board'] :is(header.board, .slatebar, .lgbar) {
    display: none;
  }
  html:not(.lg) body[data-view='board'] .gbar {
    position: sticky;
    top: 0;
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 0 12px 0 4px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  html:not(.lg) body[data-view='board'] .secnav {
    top: 52px; /* under the top bar (the game strip it followed is hidden) */
  }
  .gback {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gback:active {
    background: var(--raised);
  }
  .gback svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .gtitle {
    min-width: 0;
  }
  .gtitle b {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 16px/1 var(--body);
    color: var(--ink);
  }
  .gtitle b img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .gtitle b i {
    margin: 0 2px;
    font-style: normal;
    font-weight: 500;
    color: var(--faint);
  }
  /* its kickoff, or the Live chip (the cards'), at the bar's right end */
  .gwhen {
    margin-left: auto;
    font: 500 12px/1 var(--body);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
  }
  .gwhen .livechip {
    font: 600 var(--t-xs)/1 var(--body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bad);
    background: var(--flash-down);
    padding: 2px 5px;
    border-radius: var(--r-sm);
  }
}

/* ---------- DFS on a phone: the side list's contests hidden (Avi 11/1: in the pills' strip they were "nearly impossible");
   the picker in the DFS view takes their place (dfs.js dfsPick, dfs.css .ph-pick) ---------- */
@media (max-width: 640px) {
  body[data-view='dfs'] .secnav {
    display: none;
  }
}