/* =========================================================== stats v7 ==
   Mobile layout for the league table.

   The problem: the 7-column table sits in a 290px scroll window on a 390px
   phone (nested padding eats 100px), so Sens and FOV — the two columns
   anyone actually opens this page for — are off-screen behind a sideways
   scroll. Below 760px each row becomes a card and every field is visible.

   Column headers stay on screen as a chip row, so sorting still works.
   Desktop is untouched.
   ==================================================================== */

@media(max-width:760px){

  /* reclaim the width the nested frames were eating */
  .page-frame{padding-left:8px;padding-right:8px}
  .table-panel{padding-left:10px;padding-right:10px}
  .table-scroll{overflow-x:visible;margin:0;padding:0}

  /* --- headers become a sort chip row (click handlers are on th) ------ */
  .data-table thead{display:block;margin-bottom:10px}
  .data-table thead tr{display:flex;flex-wrap:wrap;gap:6px}
  .data-table thead th{
    display:block;padding:6px 10px;border:1px solid #202a34;border-radius:999px;
    background:#101720;color:#8794a2;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  }
  .data-table thead th:active{background:#18212c;color:#e9eef4}

  /* --- dense rows, not 51 stacked cards ------------------------------
     First pass made every row a card with five label/value lines, which
     turned 51 players into roughly 10,000px of scrolling. Now: name and the
     two numbers people came for on one line, everything else as a wrapped
     inline run underneath, rows split by a hairline instead of boxed.
     Same seven fields, about a third of the height. */
  .data-table,.data-table tbody,.data-table tr{display:block;width:auto}
  .data-table{min-width:0;width:100%;border-collapse:collapse}

  .data-table tbody tr{
    position:relative;
    padding:12px 2px 14px;
    border-bottom:1px solid #161e27;
  }
  .data-table tbody tr:last-child{border-bottom:0}

  /* line 1 — player, with sens and FOV parked on the right */
  .data-table tbody td:nth-child(1){
    display:block;padding:0 132px 11px 0;border:0;
    font-family:'Barlow Condensed',system-ui,sans-serif;
    font-weight:700;font-size:19px;line-height:1.05;letter-spacing:-.005em;
    text-transform:uppercase;color:#f3f5f6;
  }
  .data-table tbody td:nth-child(3),
  .data-table tbody td:nth-child(4){
    position:absolute;top:9px;padding:0;border:0;
    text-align:right;line-height:1.15;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:17px;font-weight:500;letter-spacing:-.01em;color:#e9e7e2;
  }
  .data-table tbody td:nth-child(3){right:64px;width:64px}
  .data-table tbody td:nth-child(4){right:2px;width:54px}
  .data-table tbody td:nth-child(3)::before,
  .data-table tbody td:nth-child(4)::before{
    display:block;margin-bottom:5px;
    font-size:7.5px;font-weight:400;letter-spacing:.12em;color:#646c72;
  }
  .data-table tbody td:nth-child(3)::before{content:"SENS"}
  .data-table tbody td:nth-child(4)::before{content:"FOV"}

  /* line 2 — team, layout, grip, controller flow as one wrapped run */
  .data-table tbody td:nth-child(2),
  .data-table tbody td:nth-child(5),
  .data-table tbody td:nth-child(6),
  .data-table tbody td:nth-child(7){
    display:inline;padding:0;border:0;
    font-size:11.5px;line-height:1.7;color:#7d8894;
  }
  .data-table tbody td:nth-child(2){color:#95a1ad}
  /* Separators lead each item rather than trailing it, so a hidden cell
     never leaves an orphan middot at either end of the run. */
  .data-table tbody td:nth-child(5)::before,
  .data-table tbody td:nth-child(6)::before,
  .data-table tbody td:nth-child(7)::before{
    content:" \00B7 ";color:#3c4753;
  }
  /* "not recorded" cells carry .nd — the dash still shows on desktop, but
     on a phone the slot is dropped instead of printing "\00B7 \2014 \00B7" */
  .data-table tbody td.nd,
  .data-table tbody td:empty{display:none}

  /* --- the chart section was still two columns on a phone ------------ */
  /* .stats-grid held 180px + 115px tracks inside a 312px container, which
     squeezed the chart panels to 115px and collapsed every .bar-row's bar
     track to 0px — the distribution bars were rendering at zero width. */
  .stats-grid{grid-template-columns:minmax(0,1fr) !important;gap:10px}
  .stats-grid>*{min-width:0}
  .stats-chart-panel,.sens-chart-shell,.chart-note{width:auto !important;max-width:none}
  .bar-row{grid-template-columns:86px minmax(0,1fr) 34px !important;align-items:center;gap:8px}
  .sens-chart-meta{width:auto !important}

  /* --- stat tiles: stop values breaking mid-number ("45 / 51") -------- */
  .stats-hero-grid,.page-summary.stats-summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .statgrid .stat b,.statgrid b,.stat-hero b,
  .stats-hero-grid b,.page-summary.stats-summary b{white-space:nowrap}
}

@media(max-width:400px){
  .data-table tbody td:nth-child(n+3){font-size:12.5px}
  .data-table tbody td:nth-child(1){font-size:17px}
}

/* ------------------------------------------- every-player table, mobile --
   The full 51-player table duplicates the directory on the home page, which
   is searchable and filterable. On a phone it added roughly 4,800px of
   scrolling to reach the same data. Hidden below 760px; desktop keeps it,
   where the seven-column layout is genuinely useful.
   ------------------------------------------------------------------------ */
@media(max-width:760px){
  /* Back on, but reorganised. On a phone the table's job is comparing sens
     and FOV, not browsing — the home page directory already does browsing,
     and tapping any row opens that player's full settings sheet. So the
     three long fields (layout, grip, controller) come off the list and stay
     one tap away, which is what halves the height. */
  .data-table tbody td:nth-child(5),
  .data-table tbody td:nth-child(6),
  .data-table tbody td:nth-child(7){display:none}

  /* team drops to its own quiet line under the name */
  .data-table tbody td:nth-child(2){
    display:block;font-size:11px;line-height:1.3;color:#7d8894;
  }
  .data-table tbody tr{padding:10px 2px 11px}
  .data-table tbody td:nth-child(1){padding-bottom:3px}

  /* sort chips stay reachable while the list scrolls */
  .data-table thead{
    position:sticky;top:112px;z-index:5;
    margin:0 0 10px;padding:8px 0;
    background:#0a0e14;
    box-shadow:0 6px 14px rgba(10,14,20,.9);
  }
}