@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500&display=swap");
      :root {
        /* Whole-app density. 1 renders the shell at full size. Values below 1
           fit extra rows without shrinking any individual element by hand --
           this has been 0.9 and 0.8 at various points, each step buying about
           three more rows and costing legibility. The body height below
           follows automatically and the JS coordinate bridge reads the
           computed value, so this is the only place to change it. */
        --app-zoom: 0.8;
        --bg: #0d1117;
        --surface: #161b22;
        --border: rgba(255, 255, 255, 0.07);
        --text: #e6edf3;
        --muted: #7d8590;
        --accent: #39d353;
        --up: #39d353;
        --down: #f85149;
        --flat: #7d8590;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: "Inter", sans-serif;
        font-size: 13px;
        /* height is divided by the zoom because a zoomed element's own 100vh is
           measured pre-scale, then shrunk — leaving a dead band at the bottom
           of the viewport (measured: 216px when the zoom was 0.8). */
        zoom: var(--app-zoom);
        height: calc(100vh / var(--app-zoom));
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .sticky-top {
        background: var(--bg);
        flex-shrink: 0;
      }
      header {
        padding: 12px 28px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: nowrap;
      }
      .logo {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 26px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .logo span {
        color: var(--accent);
      }
      .hdiv {
        width: 1px;
        height: 22px;
        background: var(--border);
        flex-shrink: 0;
      }
      .date-badge {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--accent);
        white-space: nowrap;
      }
      .hstat-block {
        display: flex;
        flex-direction: column;
        gap: 0;
        white-space: nowrap;
      }
      .hstat-label {
        font-family: "DM Mono", monospace;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
      }
      .hstat-val {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #39d353;
        line-height: 1.1;
      }
      .hstat-sub {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: var(--muted);
      }
      .legend-row {
        padding: 8px 28px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .btn-group {
        display: flex;
        align-items: center;
        gap: 6px;
        border: 1px solid #30363d;
        border-radius: 6px;
        padding: 4px 10px;
        background: #0d1117;
      }
      .hinfo {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        display: flex;
        gap: 10px;
        align-items: center;
        color: var(--muted);
        flex-wrap: nowrap;
      }
      .refresh-btn {
        margin-left: auto;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 4px;
        border: 1px solid var(--accent);
        background: transparent;
        color: var(--accent);
        cursor: pointer;
        white-space: nowrap;
      }
      .refresh-btn:hover {
        background: var(--accent);
        color: #0d1117;
      }
      .tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1px;
        background: var(--border);
        border-bottom: 1px solid var(--border);
      }
      .tile {
        background: var(--surface);
        padding: 4px 12px;
      }
      .tlabel {
        font-family: "DM Mono", monospace;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--muted);
        margin-bottom: 1px;
      }
      .tval {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--accent);
        line-height: 1;
      }
      .tsub {
        font-size: 9px;
        color: var(--muted);
        margin-top: 0px;
      }
      .games-strip {
        display: flex;
        gap: 6px;
        padding: 6px 28px;
        overflow-x: auto;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        scrollbar-width: thin;
      }
      .game-pill {
        font-family: "DM Mono", monospace;
        font-size: 13px;
        color: var(--muted);
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 100px 8px 14px;
        white-space: nowrap;
        min-height: unset;
        flex-shrink: 0;
        line-height: 1.5;
        cursor: pointer;
        transition: all 0.15s;
        min-width: 300px;
        position: relative;
      }
      .game-pill:hover {
        border-color: var(--accent);
        color: var(--text);
      }
      .game-pill.pill-live {
        border-color: #e3b341;
      }
      .game-pill.pill-final {
        opacity: 0.45;
      }
      .game-pill.pill-active {
        border-color: var(--accent);
        background: rgba(57, 211, 83, 0.1);
        color: var(--accent);
      }
      .game-pill.see-all {
        color: var(--accent);
        border-color: var(--accent);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        min-width: 70px;
        max-width: 80px;
      }
      .game-pill.see-all.pill-active {
        background: rgba(57, 211, 83, 0.15);
      }
      .game-pill strong {
        color: var(--text);
        display: block;
        font-size: 16px;
        padding-right: 90px;
      }
      .game-pill span {
        color: var(--muted);
        font-size: 12px;
      }
      .game-pill .wx-badge {
        position: absolute;
        top: 8px;
        right: 10px;
        font-family: "DM Mono", monospace;
        font-size: 12px;
        color: var(--muted);
        text-align: right;
        white-space: nowrap;
        line-height: 1.5;
      }
      .game-pill .wx-badge .wind-hot {
        color: #39d353;
        font-weight: 600;
      }
      .game-pill .wx-badge .wind-warm {
        color: #e3b341;
      }
      .game-pill .wx-badge .dome {
        color: #58a6ff;
      }
      .mu-card {
        background: #0d1117;
        border: 1px solid #1e1e1e;
        border-radius: 8px;
        padding: 12px 14px;
        text-align: center;
      }
      .mu-card .mu-label { font-size: 13px; color: #8b949e; margin-bottom: 6px; font-weight: 600; letter-spacing: .04em; }
      .mu-card .mu-big { font-size: 28px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; margin-bottom: 2px; }
      .mu-card .mu-sub { font-size: 12px; color: #555; margin-bottom: 8px; }
      .mu-card .mu-divider { border-top: 1px solid #1e1e1e; margin-bottom: 6px; }
      .mu-card .mu-detail { display: grid; grid-template-columns: 1fr auto auto; gap: 0 6px; font-size: 11px; }
      .mu-card .mu-detail .dl { color: #555; text-align: left; padding: 2px 0; }
      .mu-card .mu-detail .dp { text-align: right; font-weight: 600; padding: 2px 0; }
      .mu-card .mu-detail .dc { color: #555; text-align: right; padding: 2px 0; }
      .controls {
        padding: 8px 28px;
        display: flex;
        gap: 8px;
        align-items: stretch;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
      }
      .controls > * {
        height: 34px;
        display: flex;
        align-items: center;
      }
      .sep {
        width: 1px;
        height: 20px;
        background: var(--border);
      }
      .btn {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--muted);
        cursor: pointer;
        transition: all 0.12s;
      }
      .btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #0d1117;
      }
      .btn.slate-on {
        background: #1a3a5c;
        border-color: #58a6ff;
        color: #58a6ff;
      }
      .sw {
        position: relative;
      }
      .sw input {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 12px;
        padding: 4px 10px 4px 26px;
        border-radius: 4px;
        width: 160px;
        outline: none;
      }
      .sw input:focus {
        border-color: var(--accent);
      }
      .sw::before {
        content: "⌕";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 14px;
        pointer-events: none;
      }
      select {
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
      }
      label {
        font-family: "DM Mono", monospace;
        font-size: 11px;
        color: var(--muted);
      }
      .tw {
        overflow: auto;
        flex: 1;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: "DM Mono", monospace;
        font-size: 12px;
        table-layout: auto;
      }
      thead th {
        padding: 7px 4px;
        text-align: center;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        border-bottom: 2px solid var(--border);
        background: #161b22;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      thead th.name-col {
        text-align: left;
        width: 185px;
      }
      thead th.spark-col {
        width: 160px;
        cursor: default;
      }
      thead th.g-col {
        width: 36px;
      }
      thead th.pa-col {
        width: 44px;
        min-width: 40px;
        padding-left: 2px;
        padding-right: 2px;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
      }
      tbody td.pa-td {
        text-align: center;
        font-size: 11px;
        padding: 0 2px;
      }
      thead th.sp-col {
        width: 28px;
        color: #58a6ff;
      }
      thead th.bh-col {
        width: 22px;
        color: #7d8590;
      }
      thead th.lu-col {
        width: 28px;
        color: #39d353;
      }
      thead th.num-col {
        width: 46px;
        min-width: 40px;
        white-space: nowrap;
      }
      thead th.pct-col {
        width: 54px;
      }
      thead th.hr-col {
        width: 46px;
      }
      thead th.rank-col {
        width: 28px;
      }
      thead th.status-col {
        width: 34px;
        cursor: default;
        text-align: center;
      }
      thead th.pred-col {
        width: 44px;
        min-width: 38px;
        padding-left: 2px;
        padding-right: 2px;
        letter-spacing: 0.02em;
        background: #161b22;
        border-bottom: 2px solid rgba(88, 166, 255, 0.4);
        color: #58a6ff;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      thead th:hover:not(.spark-col):not(.status-col) {
        color: var(--text);
      }
      thead th.sorted {
        color: var(--accent);
      }
      tbody tr {
        border-bottom: 1px solid var(--border);
      }
      tbody tr:hover td {
        filter: brightness(1.12);
      }
      tbody td {
        padding: 0;
        text-align: center;
        height: 38px;
        vertical-align: middle;
      }
      tbody td.pad {
        padding: 0 6px;
      }
      tbody td.name-td {
        text-align: left;
        padding: 0 8px;
      }
      tbody td.status-td {
        text-align: center;
        padding: 0 4px;
      }
      thead th.mu-col {
        width: 38px;
        cursor: pointer;
        text-align: center;
      }
      tbody td.mu-td {
        text-align: center;
        /* No vertical padding: the background is painted on the cell itself
           (see muCell in dashboard.js) so the fill spans the full row height.
           Horizontal padding stays so the number never touches the edge. */
        padding: 0 2px;
        font-size: 11px;
        font-weight: 700;
        cursor: help;
      }
      thead th.zf-col {
        width: 40px;
        cursor: pointer;
        text-align: center;
      }
      tbody td.zf-td {
        text-align: center;
        padding: 0 2px;
        font-size: 11px;
        font-weight: 600;
      }
      thead th.pick-col {
        width: 48px;
        cursor: pointer;
        text-align: center;
        color: #58a6ff;
      }
      tbody td.pick-td {
        text-align: center;
        padding: 0 2px;
      }
      .player-cell {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .name-block {
        display: inline;
      }
      .nemoji {
        font-size: 11px;
        margin-left: 3px;
        white-space: nowrap;
      }
      .logo-img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        flex-shrink: 0;
      }
      .logo-err {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #333;
        flex-shrink: 0;
        display: inline-block;
      }
      .pname {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 15px;
        font-weight: 600;
      }
      .hcell {
        display: block;
        width: 100%;
        min-width: 44px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-weight: 700;
        font-size: 13px;
        white-space: nowrap;
      }
      .pred-cell {
        display: block;
        width: 100%;
        min-width: 55px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-weight: 700;
        font-size: 13px;
      }
      .na-cell {
        display: block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: rgba(255, 255, 255, 0.12);
        font-size: 11px;
      }
      .trend-up {
        color: var(--up);
        font-size: 11px;
      }
      .trend-dn {
        color: var(--down);
        font-size: 11px;
      }
      .trend-fl {
        color: var(--flat);
        font-size: 11px;
      }
      .empty {
        text-align: center;
        padding: 60px;
        color: var(--muted);
      }
      canvas {
        display: block;
      }
      .row-highlight {
        background: #1a2a1a !important;
        outline: 1px solid #00c853;
      }
      .row-highlight:hover {
        background: #1e2e1e !important;
      }
      #parlay-tray {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 320px;
        background: #0d1117;
        border: 1px solid #2b2b2b;
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        z-index: 999;
        font-family: "DM Mono", monospace;
        font-size: 11px;
        transition: transform 0.2s ease;
        transform: translateY(100%);
      }
      #parlay-tray.open {
        transform: translateY(0);
      }
      #parlay-tray-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: #161b22;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        border-bottom: 1px solid #2b2b2b;
      }
      #parlay-tray-header span {
        color: #00c853;
        font-weight: 700;
        font-size: 12px;
      }
      #parlay-tray-header .pt-count {
        background: #00c853;
        color: #000;
        border-radius: 10px;
        padding: 1px 7px;
        font-size: 10px;
        font-weight: 700;
      }
      #parlay-tray-body {
        padding: 8px 12px;
        max-height: 320px;
        overflow-y: auto;
      }
      .parlay-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid #1e1e1e;
        gap: 8px;
      }
      .parlay-row:last-child {
        border-bottom: none;
      }
      .parlay-row .pr-name {
        color: #e6edf3;
        font-weight: 600;
        flex: 1;
      }
      .parlay-row .pr-line {
        color: #8b949e;
        font-size: 10px;
        white-space: nowrap;
      }
      .parlay-row .pr-p2 {
        color: #00c853;
        font-weight: 700;
        white-space: nowrap;
      }
      .parlay-row .pr-remove {
        color: #f85149;
        cursor: pointer;
        font-size: 13px;
        padding: 0 3px;
        line-height: 1;
      }
      #parlay-tray-footer {
        padding: 8px 12px;
        border-top: 1px solid #2b2b2b;
        display: flex;
        gap: 8px;
      }
      .pt-btn {
        flex: 1;
        padding: 6px 0;
        border-radius: 4px;
        font-family: "DM Mono", monospace;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid;
        text-align: center;
      }
      .pt-btn-copy {
        background: #00c853;
        color: #000;
        border-color: #00c853;
      }
      .pt-btn-copy:hover {
        background: #00e65c;
      }
      .pt-btn-clear {
        background: transparent;
        color: #f85149;
        border-color: #f85149;
      }
      .pt-btn-clear:hover {
        background: #1a0a0a;
      }
      #parlay-copied {
        display: none;
        text-align: center;
        color: #00c853;
        font-size: 10px;
        padding: 4px 12px;
      }
      /* BEST / AVG / CUR. These three carried inline width:44/44/36 plus the
         thead default 4px of side padding, so ~124px of table went to three
         one- and two-digit numbers. The inline widths are gone and the width
         now comes from this rule, which is a FLOOR, not a fixed size:
         table-layout is auto, so a column never renders narrower than its
         own header text. 26px is about what "BEST" measures at 10px with the
         0.06em tracking, which is the point -- the columns are now as narrow
         as their labels allow and not a pixel of it is padding. Roughly 45px
         comes back to the stat columns on the right, which is where the
         horizontal scroll actually starts. */
      .streak-col {
        width: 26px;
        min-width: 0;
        text-align: center;
      }
      thead th.streak-col {
        padding-left: 1px;
        padding-right: 1px;
      }
      .streak-badge {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #00c853;
      }
      .streak-badge.hot {
        color: #ffd700;
      }

      /* ── Accuracy Panel ── */
      #acc-panel {
        margin: 0 0 0 0;
        border-bottom: 1px solid #1e1e1e;
        background: #0a0f0a;
      }
      #acc-panel-header {
        /* 1fr / auto / 1fr puts the title in a centre cell that is centred on
           the ROW itself. A flex row with margin-left:auto on the toggle only
           ever centres the title in the leftover space, which drifts as the
           "last graded" text changes width. */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        cursor: pointer;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #58a6ff;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        user-select: none;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }
      #acc-panel-header:hover {
        background: #0d1117;
      }
      #acc-panel-header .acc-head-title {
        grid-column: 2;
        white-space: nowrap;
      }
      #acc-panel-header #acc-header-summary {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #acc-panel-header .acc-toggle {
        grid-column: 3;
        color: #555;
        font-size: 11px;
        /* justify-self, not margin-left:auto -- the grid already owns the
           column, and margin-left:auto would fight it. */
        justify-self: end;
      }
      /* Under ~420px the three cells cannot all fit on one line. Drop the
         timestamp rather than let the centred title get shoved off axis.
         The explicit grid-column above is what makes this safe: hiding the
         summary must not let the title auto-place into column 1. */
      @media (max-width: 420px) {
        /* Two changes, both to keep the title dead-centre on a phone.
           1. The timestamp goes -- three cells will not fit on one line.
           2. The toggle comes OUT OF FLOW. Left in its grid column it has a
              min-content width wider than its 1fr share, so it steals space
              from column 1 and drags the title off axis: measured -14.3px at
              360px wide. Absolutely positioned it costs the grid nothing and
              the offset is 0.0px from 360px up. */
        #acc-panel-header #acc-header-summary {
          display: none;
        }
        #acc-panel-header {
          position: relative;
          padding-left: 10px;
          padding-right: 10px;
        }
        #acc-panel-header .acc-toggle {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          white-space: nowrap;
        }
      }
      #acc-panel-body {
        display: none;
        padding: 10px 16px 14px;
      }
      #acc-panel-body.open {
        display: block;
      }
      .acc-grid {
        display: grid;
        grid-template-columns: 160px 1fr 1fr;
        gap: 12px;
        align-items: start;
      }
      .acc-big {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border: 1px solid #1e3a5f;
        border-radius: 6px;
        background: #0d1a2a;
      }
      .acc-big .ab-pct {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 42px;
        font-weight: 700;
        color: #58a6ff;
        line-height: 1;
      }
      .acc-big .ab-label {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: #3a7abf;
        margin-top: 4px;
        letter-spacing: 0.06em;
      }
      .acc-big .ab-sub {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: #555;
        margin-top: 2px;
      }
      .acc-breakdown {
        font-family: "DM Mono", monospace;
        font-size: 10px;
      }
      .acc-breakdown-title {
        color: #555;
        font-size: 9px;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
        text-transform: uppercase;
      }
      .acc-bar-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
      }
      .acc-bar-label {
        color: #8b949e;
        width: 90px;
        font-size: 9px;
        flex-shrink: 0;
      }
      .acc-bar-track {
        flex: 1;
        height: 6px;
        background: #1e1e1e;
        border-radius: 3px;
        overflow: hidden;
      }
      .acc-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.3s;
      }
      .acc-bar-val {
        color: #e6edf3;
        font-size: 9px;
        width: 36px;
        text-align: right;
        flex-shrink: 0;
      }
      .acc-bar-n {
        color: #444;
        font-size: 8px;
        width: 28px;
        flex-shrink: 0;
      }
      .acc-log {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        max-height: 150px;
        overflow-y: auto;
        border: 1px solid #1e1e1e;
        border-radius: 4px;
      }
      .acc-log-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 3px 6px;
        border-bottom: 1px solid #111;
      }
      .acc-log-row:last-child {
        border-bottom: none;
      }
      .acc-log-row.hit {
        background: #0a150a;
      }
      .acc-log-row.miss {
        background: #150a0a;
      }
      .acc-log-dot {
        font-size: 8px;
        width: 12px;
        flex-shrink: 0;
      }
      .acc-log-name {
        color: #e6edf3;
        flex: 1;
      }
      .acc-log-date {
        color: #444;
        width: 52px;
        flex-shrink: 0;
      }
      .acc-log-ehrr {
        color: #8b949e;
        width: 36px;
        text-align: right;
        flex-shrink: 0;
      }
      .acc-log-actual {
        width: 40px;
        text-align: right;
        flex-shrink: 0;
        font-size: 8px;
      }
      .acc-log-actual.hit {
        color: #00c853;
      }
      .acc-log-actual.miss {
        color: #f85149;
      }
      .acc-empty {
        color: #444;
        font-size: 10px;
        text-align: center;
        padding: 16px;
      }
      .acc-tabs {
        display: flex;
        gap: 2px;
        padding: 6px 12px 0;
        border-bottom: 1px solid #1e1e1e;
      }
      .acc-tab {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.07em;
        padding: 4px 10px;
        cursor: pointer;
        border-radius: 4px 4px 0 0;
        color: #555;
        border: 1px solid transparent;
        border-bottom: none;
        background: transparent;
        user-select: none;
      }
      .acc-tab:hover {
        color: #8b949e;
      }
      .acc-tab.active {
        color: #e6edf3;
        background: #0d1117;
        border-color: #2b2b2b;
      }
      .acc-tab-pane {
        display: none;
        padding: 10px 12px 12px;
      }
      .acc-tab-pane.active {
        display: block;
      }
      .acc-window-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 8px;
      }
      .acc-window-cell {
        background: #0d1117;
        border: 1px solid #1e1e1e;
        border-radius: 4px;
        padding: 5px 7px;
        text-align: center;
        font-family: "DM Mono", monospace;
      }
      .acc-window-cell .wc-label {
        font-size: 8px;
        color: #555;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
      }
      .acc-window-cell .wc-val {
        font-size: 13px;
        font-weight: 700;
      }
      .acc-window-cell .wc-sub {
        font-size: 8px;
        color: #555;
        margin-top: 1px;
      }
      .acc-list-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
      .acc-list-col {
      }
      .acc-list-col-title {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        color: #555;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
        text-transform: uppercase;
      }
/* Divider between the visiting-team block and the home-team block when a
   single game is selected. A border on the row rather than an injected
   separator <tr>, so the # column keeps counting straight through and no
   row-index logic has to know this exists. */
tr.side-break > td {
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

/* ── 🧪 LAB flip cards ── */
/* Flipping also GROWS the card ~1.8x for readability, then shrinks back on
   the return flip. z-index uses a delayed transition so the card stays above
   its neighbors until the shrink animation finishes. */
.lab-card { perspective: 900px; height: 249px; cursor: pointer; position: relative; z-index: 1; transition: z-index 0s .45s; }
.lab-card.flipped { z-index: 60; transition: z-index 0s 0s; }
.lab-inner { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
/* --lab-dx is set by labFlip() before the flip: the 1.8x blow-up pushes
   0.4x of the card's width past each edge, so the first and last cards in
   a row used to hang off screen. translateX sits LEFTMOST in the list, so
   it is applied outermost and its px value is NOT multiplied by scale. */
.lab-card.flipped .lab-inner { transform: translateX(var(--lab-dx, 0px)) rotateY(180deg) scale(1.8); }
.lab-card.flipped .lab-back { box-shadow: 0 22px 55px rgba(0,0,0,.75); border-color: #2a3140; }
.lab-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; }
.lab-back { transform: rotateY(180deg); background: #0d1117; border: 1px solid #1e1e1e; padding: 8px 10px; display: flex; flex-direction: column; text-align: left; }
.lab-back-hdr { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; color: #8b949e; margin-bottom: 6px; }
.lab-back-hdr > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.lab-back-hdr > span:last-child { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lab-front > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-tab-btn { padding: 2px 5px; border: 1px solid #1e1e1e; border-radius: 5px; font-size: 8px; color: #666; cursor: pointer; user-select: none; white-space: nowrap; flex: 0 0 auto; }
.lab-tab-btn.active { color: #0d1117; background: #8b949e; border-color: #8b949e; }
.lab-list { overflow-y: auto; flex: 1; min-height: 0; }
.lab-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 2px 0; border-bottom: 1px solid #14181f; }
.lab-nm { color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.lab-meta { color: #555; white-space: nowrap; flex: 0 0 auto; }

      /* ══════════════════════════════════════════════════════════════════
         HEADER RECORDS TICKER  (2026-08-01)
         Lives in the flex slack between the Streak Leader block and the date
         badge. The hard requirement is that it NEVER wraps the header to a
         second row -- records that do not fit simply vanish.

         Three things make that true and all three are load-bearing:
           flex: 1 1 0   the strip claims the slack but its BASIS is 0, so it
                         is the first thing to give width back as the window
                         narrows. Other header blocks keep their size.
           min-width: 0  without this a flex item refuses to shrink below its
                         min-content width -- the chips would push the header
                         wider and force a wrap. This one line is the whole
                         no-wrap guarantee.
           overflow:hidden  the paint-time backstop. fitHeaderRecords() in
                         dashboard.js hides whole chips so you never see a
                         half one, but between a resize and that callback the
                         clip is what stops a bleed.
         :not(:empty) drives the left divider so an empty strip leaves no
         orphan rule; .hrec-off is set by JS when every chip got hidden.     */
      .hrec-strip {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        /* stretch, not center. The header is align-items:center, so a chip
           sized by its own content floats in the middle of the row and reads
           as a different species from the Streak / Slate blocks beside it.
           Stretching hands the chips the full content height of the header,
           whatever the tallest block happens to be, so they top- and
           bottom-align with it for free and stay aligned if that block's
           copy ever changes.
           This can never grow the header: a flex line's height is the max of
           its items' CONTENT heights, and stretch is applied afterwards. The
           one thing that would break it is a chip whose own content grows
           past the tallest hstat-block (~46px) -- keep the type below. */
        align-self: stretch;
        align-items: stretch;
        gap: 5px;
        overflow: hidden;
      }
      .hrec-strip:not(:empty) {
        border-left: 1px solid var(--border);
        padding-left: 12px;
      }
      /* State class is namespaced on purpose. A bare `.empty` already exists
         in this stylesheet as a generic "no data here" placeholder carrying
         `padding: 60px`, and reusing that name gave the strip 120px of
         vertical padding -- which is exactly what was doubling the header
         height at narrow widths. Do not shorten this back to `.empty`. */
      .hrec-strip.hrec-off {
        border-left: 0;
        padding-left: 0;
      }
      .hrec-chip {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        /* chip is full-height now, so centre the three lines inside it */
        /* Height budget: the chip must stay shorter than the tallest
           .hstat-block (~46px layout) or align-self:stretch stops being free
           and the header grows when records appear. 9 + 20 + 9 of type plus
           1px padding lands at ~44. Do not add gap back. */
        justify-content: center;
        gap: 0;
        padding: 1px 8px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: #0e1319;
        white-space: nowrap;
        line-height: 1.15;
      }
      .hrec-lbl {
        font-family: "DM Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      /* Was an inline flex row holding the pct and the n side by side. Now a
         plain block so the two stack, giving the chip the same
         label / value / sub rhythm as .hstat-block. Stacking also makes the
         chip much narrower, so more records survive a narrow window. */
      .hrec-row {
        display: block;
      }
      .hrec-val {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
      }
      .hrec-n {
        display: block;
        font-family: "DM Mono", monospace;
        font-size: 9px;
        margin-top: -1px;
        color: #484f58;
      }

      /* ══════════════════════════════════════════════════════════════════
         COLLAPSIBLE STATIC ROWS  (2026-08-01)
         A single vertical rail down the left gutter, one tab per static row,
         all at the same x. The rows already carry 28px of left padding and
         the acc-panel header 16px, so a 16px tab sits inside existing space:
         no padding anywhere changes, and in particular #acc-panel-header
         keeps the symmetric padding its 1fr/auto/1fr centring depends on.

         Two classes on purpose:
           .crow-rail  draws the tab. Goes on all four rows so the rail is an
                       unbroken column.
           .crow       adds the collapse behaviour. NOT on #acc-panel-header,
                       which collapses its BODY, not itself -- putting .crow
                       there would hide the header's own title and toggle.
         .shut is the shared state class, so one chevron rule covers both.   */
      .crow-rail {
        position: relative;
      }
      .crow-rail > .crow-tab {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 16px;
        /* height:auto and min-height:0 beat `.controls > * { height: 34px }`,
           which would otherwise stretch the tab out of its own row. */
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
        cursor: pointer;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "DM Mono", monospace;
        font-size: 7px;
        line-height: 1;
        color: transparent;
        -webkit-appearance: none;
        appearance: none;
      }
      /* the rail itself -- a thin bar that swells into a pill on hover and
         knocks the chevron out of it in the page background colour. */
      .crow-rail > .crow-tab::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 5px;
        bottom: 5px;
        width: 3px;
        border-radius: 2px;
        background: #21262d;
        transition:
          background 0.12s ease,
          left 0.12s ease,
          width 0.12s ease;
      }
      .crow-rail > .crow-tab::after {
        content: "▾";
        position: relative;
        z-index: 1;
      }
      .crow-rail.shut > .crow-tab::after {
        content: "▸";
      }
      .crow-rail.shut > .crow-tab::before {
        background: #2f3742;
      }
      .crow-rail > .crow-tab:hover::before,
      .crow-rail > .crow-tab:focus-visible::before,
      #acc-panel-header:hover > .crow-tab::before {
        background: #58a6ff;
        left: 2px;
        width: 11px;
      }
      .crow-rail > .crow-tab:hover,
      .crow-rail > .crow-tab:focus-visible,
      #acc-panel-header:hover > .crow-tab {
        color: var(--bg);
        outline: none;
      }
      /* The acc-panel header is already click-to-toggle across its whole
         width, so its tab is a marker, not a second control -- let the click
         fall through rather than fire toggleAccPanel() twice. */
      #acc-panel-header > .crow-tab {
        pointer-events: none;
      }

      .crow.shut {
        padding-top: 2px;
        padding-bottom: 2px;
        min-height: 22px;
        overflow: hidden;
        align-items: center;
        flex-wrap: nowrap;
      }
      .crow.shut > *:not(.crow-tab):not(.crow-stub) {
        display: none !important;
      }
      .crow-stub {
        display: none;
      }
      .crow.shut > .crow-stub {
        display: block;
        height: auto;
        flex: 0 0 auto;
        font-family: "DM Mono", monospace;
        font-size: 8.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #484f58;
        white-space: nowrap;
        line-height: 18px;
        user-select: none;
      }