/* mobile.css — the phone layer (with mobile.js), on the demo first. Everything sits under html.m2 and phone widths. */
@media (max-width: 900px) {
  /* ── bottom bar: five equal cells, icon over label, never scrolls sideways ── */
  html.m2 .bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden;
    min-height: 0; height: calc(58px + var(--nav-pad)); padding: 0 env(safe-area-inset-right, 0px) var(--nav-pad) env(safe-area-inset-left, 0px);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  html.m2 .bottomnav.m2-away { transform: translateY(calc(100% + 4px)); }
  html.m2 .bottomnav a, html.m2 .bottomnav-more {
    flex: none; min-width: 0; flex-direction: column; gap: 3px; padding: 0 2px;
    font-size: 10.5px; letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
  }
  html.m2 .bottomnav svg { width: 22px; height: 22px; flex: none; }
  html.m2 .bottomnav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.m2 .bottomnav a:active, html.m2 .bottomnav-more:active { background: var(--bg-card); }
  html.m2 body.has-bottomnav { padding-bottom: calc(62px + var(--nav-pad)); }

  /* the leagues branch switcher above the Leagues cell */
  .m2-branch {
    position: fixed; z-index: 320; display: flex; flex-direction: column; min-width: 190px;
    background: var(--bg-card); border: var(--rule-frame) solid var(--txt); box-shadow: 0 8px 24px rgba(20, 33, 61, .18);
    opacity: 0; transform: translateY(8px); transition: opacity .16s, transform .18s cubic-bezier(.2, .8, .2, 1);
  }
  .m2-branch.in { opacity: 1; transform: none; }
  .m2-branch a {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; color: var(--txt); text-decoration: none;
    font-size: 14px; font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: .04em;
  }
  .m2-branch a + a { border-top: var(--rule-hair) solid var(--line); }
  .m2-branch a[aria-current="page"] { color: var(--accent); }
  .m2-branch svg { width: 20px; height: 20px; }

  /* ── More sheet: slides up, follows the finger down ── */
  .m2-sheet {
    position: fixed; inset: 0; z-index: 9600; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(20, 33, 61, 0); transition: background .24s;
  }
  [data-theme="dark"] .m2-sheet.in { background: rgba(0, 0, 0, .6); }
  .m2-sheet.in { background: rgba(20, 33, 61, .45); }
  .m2-panel {
    width: 100%; max-width: 640px; max-height: min(86vh, 86dvh); overflow: auto; overscroll-behavior: contain;
    background: var(--bg-card); border-top: var(--rule-heavy) solid var(--txt);
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  .m2-sheet.in .m2-panel { transform: none; }
  .m2-grab { display: flex; justify-content: center; padding: 8px 0 2px; touch-action: none; }
  .m2-grab i { display: block; width: 40px; height: 4px; background: var(--line-strong, var(--txt-dim)); }
  .m2-head {
    display: flex; align-items: center; justify-content: space-between; min-height: 48px; touch-action: none;
    font-size: 22px; font-weight: 800; font-stretch: 70%; text-transform: uppercase;
  }
  .m2-x { width: 44px; height: 44px; border: 0; background: none; color: var(--txt); font-size: 18px; cursor: pointer; }
  .m2-k { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--txt-dim); }
  .m2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-frame) solid var(--txt); }
  .m2-grid a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px;
    color: var(--txt); text-decoration: none; text-align: center; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
    font-size: 12px; font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
  }
  .m2-grid a:active { background: var(--bg-elev); }
  .m2-grid a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 calc(-1 * var(--rule-pen)) 0 var(--accent), -1px 0 0 var(--line), 0 -1px 0 var(--line); }
  .m2-grid svg { width: 26px; height: 26px; }
  .m2-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
  .m2-set + .m2-set { border-top: var(--rule-hair) solid var(--line); }
  .m2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .m2-acts .btn { min-height: 44px; flex: 1 1 auto; }
  body.m2-locked { overflow: hidden; }

  /* the app hides ⛶ below 768 px; on the phone layer it is back as a square icon button (✕ while open) */
  html.m2 .fs-btn {
    display: inline-flex !important; align-items: center; gap: 6px; flex: none; white-space: nowrap;
    height: 32px; padding: 0 10px; font-size: 0 !important; line-height: 1;
    background: var(--txt); color: var(--bg-card); border: 0; box-shadow: 0 6px 18px rgba(20, 33, 61, .25);
  }
  html.m2 .fs-btn::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--m2-fs-ico) center / contain no-repeat; mask: var(--m2-fs-ico) center / contain no-repeat; }
  html.m2 .fs-btn::after { content: attr(data-m2l); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  html.m2 .card.fullscreen .fs-btn { --m2-fs-ico: var(--m2-x-ico); }
  /* a header with its own controls (lineup tabs, shot-chart compare): title and ⛶ on the first row, the controls under them */
  html.m2 .card > h2 > .fs-btn { order: 2; margin-left: auto; }
  html.m2 .card > h2:has(> :is(.lu-tabs, .shot-compare-bar)) { flex-wrap: wrap; row-gap: 6px; }
  html.m2 .card > h2 > :is(.lu-tabs, .shot-compare-bar) { order: 3; flex-basis: 100%; }

  /* ── tables in full screen: the whole screen, no bars over the rows ── */
  html.m2 .card.fullscreen { bottom: 0; z-index: 9000; padding: 8px max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px)); }
  html.m2 body.has-fs .bottomnav { display: none; }
  html.m2 .card.fullscreen > h2:first-child { margin: 0 0 6px; padding: 4px 0 6px; min-height: 0; font-size: 18px; }

  /* the leaderboard's sideways thumb: above the new bar, flush at the bottom in full screen, gone on touch there (fingers swipe the table) */
  html.m2 body.has-bottomnav .lb-shell .lb-main > div.lb-topscroll.lb-topscroll { bottom: calc(58px + var(--nav-pad)); }
  html.m2 body.has-fs .lb-shell .lb-main > div.lb-topscroll.lb-topscroll { bottom: 0; }

  /* ── small fixes that pushed pages sideways or left tiny targets ── */
  html.m2 .shot-side, html.m2 .shot-body > * { min-width: 0; }
  html.m2 .shot-break th, html.m2 .shot-break td { padding: 7px 6px; font-size: 13px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  html.m2 select, html.m2 input:not([type="checkbox"]):not([type="radio"]) { min-height: 40px; font-size: 16px; /* 16 px: iOS stops zooming in */ }
}
@media (max-width: 900px) and (pointer: coarse) {
  /* fingers swipe the table sideways: no scroll thumb on phones */
  html.m2 .lb-topscroll.lb-topscroll.lb-topscroll { display: none; }
  /* the leaderboard filters: the whole field is the target, not a 26 px line inside it */
  html.m2 .lb-field { padding-top: 6px; padding-bottom: 4px; }
  html.m2 .lb-field .lb-select, html.m2 .lb-field .lb-num { min-height: 36px; }
}
/* the match page's ruled blocks lost their side rules below 640 px (from when they ran edge to edge); the page has a gutter now */
@media (max-width: 640px) {
  html.m2 .gs, html.m2 .gs-sum, html.m2 .gs-index { border-left: var(--rule-frame) solid var(--txt); border-right: var(--rule-frame) solid var(--txt); }
}
/* leaderboards upright: the team sits under the name (mobile.js) and its own column folds to nothing */
.m2-team { display: none; }
:root { --m2-fs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); --m2-x-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
@media ((max-width: 600px) and (orientation: portrait)), ((max-height: 540px) and (max-width: 900px) and (orientation: landscape)) {
  html.m2 :is(#lbTable, #lgTable, #ncTable) { min-width: 0 !important; }
  html.m2 :is(#lbTable, #lgTable, #ncTable) col:nth-child(3) { width: 0 !important; }
  html.m2 :is(#lbTable, #lgTable, #ncTable) :is(td.lb-team, th:nth-child(3)) { padding: 0 !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; overflow: hidden; }
  html.m2 :is(#lbTable, #lgTable, #ncTable) td.lb-name { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
  html.m2 .cmp-star ~ .m2-team { padding-left: 27px; } /* under the name, not under the compare ring */
  html.m2 .m2-team { display: block; margin-top: 1px; line-height: 1.15; font-size: 11.5px; font-weight: 500; color: var(--txt-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* upright, the three boards share one fit: rank, name (what is left), G, and the pinned sorted column all in view, so G is never hidden under it */
@media (max-width: 600px) and (orientation: portrait) {
  html.m2 :is(#lbTable, #lgTable, #ncTable) col:nth-child(1) { width: 48px !important; }
  html.m2 :is(#lbTable, #lgTable, #ncTable) col:nth-child(2) { width: clamp(130px, calc(100vw - 208px), 212px) !important; }
  html.m2 :is(#lbTable, #lgTable, #ncTable) col:nth-child(4) { width: 44px !important; }
}
@media (max-width: 360px) {
  html.m2 .bottomnav a, html.m2 .bottomnav-more { font-size: 9.5px; letter-spacing: 0; }
}

/* ── landscape phone: a 40 px bar with icon beside label, the sheet in five columns, tables at reading size ── */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 900px) {
  html.m2 .bottomnav, html.m2 body:has(:is(#tab-today, #tab-upcoming):not([style*="none"])) .bottomnav {
    display: grid; height: calc(40px + var(--nav-pad)) !important; min-height: 0 !important;
  }
  html.m2 .bottomnav a, html.m2 .bottomnav-more { flex-direction: row; gap: 8px; font-size: 11px; }
  html.m2 .bottomnav svg { width: 18px; height: 18px; }
  html.m2 body.has-bottomnav, html.m2 body:has(:is(#tab-today, #tab-upcoming):not([style*="none"])).has-bottomnav { padding-bottom: calc(44px + var(--nav-pad)) !important; }
  .m2-panel { max-width: none; max-height: 92vh; }
  .m2-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .m2-grid a { min-height: 60px; }

  html.m2 .topbar { position: static; } /* a short screen gives its height to the content */
  html.m2 .card.fullscreen { padding-top: 4px; }
  html.m2 .card.fullscreen > h2:first-child { font-size: 15px; margin-bottom: 4px; padding: 2px 0 4px; }
  html.m2 .card.fullscreen .fs-btn { height: 30px; }
  html.m2 .card.fullscreen:not(#seasonTeamProfileCard) .scroll th, html.m2 .card.fullscreen:not(#seasonTeamProfileCard) .scroll td,
  html.m2 .card.fullscreen table th, html.m2 .card.fullscreen table td { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  html.m2 .card.fullscreen :is(#lbTable, #lgTable, #ncTable) td, html.m2 .card.fullscreen :is(#lbTable, #lgTable, #ncTable) tbody tr[data-i] { height: 34px; }
  html.m2 body.has-bottomnav .lb-shell .lb-main > div.lb-topscroll.lb-topscroll { bottom: calc(40px + var(--nav-pad)); }
  html.m2 body.has-fs .lb-shell .lb-main > div.lb-topscroll.lb-topscroll { bottom: 0; }
}

/* the turn-your-phone hint */
.m2-hint {
  position: fixed; z-index: 9700; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 360px);
  padding: 12px 16px; background: var(--txt); color: var(--bg-card); font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.m2-hint.in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  html.m2 .bottomnav, .m2-panel, .m2-sheet, .m2-branch, .m2-hint { transition: none; }
}