/* Mobile-first. The base stylesheet is a phone-sized table that fits without
   sideways scrolling; wider screens progressively add columns and breathing
   room. There is no separate mobile layout -- it is one table throughout. */

:root {
  --bg:        #0d1117;
  --bg-head:   #11161d;
  --line:      #262d38;
  --line-soft: #1d232c;
  --text:      #e6edf3;
  --text-dim:  #8b949e;
  --accent:    #f0b429;
  --focus:     #58a6ff;
  --pad:       12px;   /* header/footer gutter; the table is edge-to-edge */
  --row:       #0d1117;
  --row-alt:   #12171f;
  --cell:      4px;    /* horizontal cell padding */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* App shell: the page itself never scrolls. The table region takes the
   remaining height and scrolls in both directions, which is what lets the
   header row and the first two columns stay pinned. */
html { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================== header */

.page-head {
  background: var(--bg-head);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--pad);
}

.head-inner { max-width: 1180px; margin: 0 auto; }

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

h1::before {
  content: "";
  display: inline-block;
  width: 4px; height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--accent);
}

.subtitle {
  margin: 3px 0 0 12px;
  font-size: 12px;
  color: var(--text-dim);
}

/* The filter owns its own row, so the driver count changing as you type can
   never resize the focused input (a mid-type resize moves the caret). */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

#filter {
  order: 1;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;             /* >=16px stops iOS zooming in on focus */
}

#filter:focus { outline: none; border-color: var(--focus); }
#filter::placeholder { color: #6e7681; }

.lang {
  order: 2;
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.lang button {
  margin: 0;
  padding: 7px 10px;
  border: 0;
  background: var(--bg);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
}

.lang button + button { border-left: 1px solid var(--line); }
.lang button:hover { color: var(--text); }
.lang button.on { background: var(--accent); color: #0d1117; }
.lang button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.count {
  order: 3;
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== layout */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.status { padding: 20px var(--pad); color: var(--text-dim); font-size: 14px; }
.status.error { color: #f85149; }
.status.hidden { display: none; }

.empty { padding: 26px var(--pad); color: var(--text-dim); text-align: center; }

/* =============================================================== table */

/* The wrapper is the scroll container in both axes. Sticky offsets resolve
   against it, so `top: 0` pins the header row and `left` pins the first two
   columns -- which only works because the page itself does not scroll. */
.table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

table {
  table-layout: fixed;
  width: 100%;
  min-width: 640px;            /* forces the horizontal scroll on phones */
  border-collapse: separate;   /* sticky cells drop borders when collapsed */
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* --- column widths. The two frozen columns are deliberately tight; the
       figures get the room, since they are what the list is about. --- */
.c-rank   { width: 34px; }
.c-player { width: 132px; }
.c-num    { width: 76px; }
.c-dr     { width: 100px; }
.c-races  { width: 70px; }
.c-wide   { width: 76px; }

/* --- header row --- */
thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-head);
  border-bottom: 1px solid var(--line);
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: right;
}

thead th.c-player { text-align: left; }

thead th span {
  display: block;
  padding: 9px var(--cell);
  overflow: hidden;
  text-overflow: ellipsis;
}

thead th.sorted { color: var(--accent); }
thead th.sorted::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
}

thead th.sorted span::before {
  content: "▼";
  font-size: 7px;
  margin-right: 3px;
  vertical-align: 1px;
}

thead th.sorted.asc span::before { content: "▲"; }
thead th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* --- frozen columns. Opaque backgrounds are mandatory: a transparent sticky
       cell shows the scrolling content sliding underneath it. `inherit` picks
       up the row's own stripe colour. --- */
.c-rank, .c-player { position: sticky; }
.c-rank   { left: 0; }
.c-player { left: 34px; }

thead th.c-rank, thead th.c-player { z-index: 5; }
tbody td.c-rank, tbody td.c-player { z-index: 2; background: inherit; }

/* Hairline marking where the frozen columns end and scrolling begins. */
.c-player { box-shadow: 1px 0 0 var(--line); }

/* --- body --- */
tbody tr { background: var(--row); }
tbody tr:nth-child(even) { background: var(--row-alt); }

tbody td {
  padding: 6px var(--cell);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}

td.rank { color: var(--text-dim); font-size: 11.5px; }
td.player { text-align: left; }
td.pos { color: var(--text-dim); }

.oid {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nick {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tint is the cell's own background, kept light so the digits lead. */
td.heat { font-weight: 700; }

.badge {
  display: inline-block;
  min-width: 22px;
  margin-right: 5px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: #0d1117;
  vertical-align: 1px;
}

.dr-S  { background: #d8b4fe; }
.dr-Ap { background: #f87171; }
.dr-A  { background: #fb923c; }
.dr-B  { background: #facc15; }
.dr-C  { background: #4ade80; }
.dr-D  { background: #38bdf8; }
.dr-E  { background: #94a3b8; }
.dr-x  { background: #4b5563; color: var(--text-dim); }

/* ============================================================== footer */

.page-foot {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px var(--pad) 10px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.5;
}

.page-foot p { margin: 0; }
.page-foot a { color: var(--focus); }
.note { display: none; }          /* the formula belongs on roomier screens */

/* ================================================= 560px+ : more room */

@media (min-width: 560px) {
  :root { --cell: 8px; --pad: 14px; }
  table { font-size: 13.5px; min-width: 702px; }
  thead th { font-size: 10.5px; letter-spacing: .5px; }
  tbody td { padding: 7px var(--cell); }
  .c-rank   { width: 40px; }
  .c-player { width: 150px; }
  .c-player { left: 40px; }
  .c-num    { width: 82px; }
  .c-dr     { width: 108px; }
  .c-races  { width: 76px; }
  .c-wide   { width: 82px; }
  .oid  { font-size: 13.5px; }
  .nick { font-size: 10.5px; }
  .note { display: block; }
  .page-foot { font-size: 11px; padding: 10px var(--pad) 12px; }
}

/* ============================ 700px+ : desktop header, full labels */

@media (min-width: 700px) {
  :root { --pad: 16px; --cell: 10px; }

  h1 { font-size: 19px; }
  .subtitle { font-size: 12.5px; margin-left: 13px; }

  .head-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .controls { margin-top: 0; width: auto; gap: 10px; }

  #filter {
    order: 0;
    flex: 0 0 auto;
    width: 200px;
    min-width: 140px;
    padding: 7px 11px;
    font-size: 14px;
  }

  .count { order: 1; flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; }
  .lang  { order: 2; }

  main { padding: 0 var(--pad); }

  table { font-size: 15px; min-width: 902px; }
  thead th { font-size: 11.5px; letter-spacing: .55px; }
  thead th span { padding: 11px var(--cell); }
  thead th:hover { color: var(--text); }

  .c-rank   { width: 52px; }
  .c-player { width: 210px; left: 52px; }
  .c-num    { width: 106px; }
  .c-dr     { width: 132px; }
  .c-races  { width: 96px; }
  .c-wide   { width: 100px; }

  tbody td { padding: 7px var(--cell); }
  tbody tr:hover td { background: #1a212b; }

  td.rank { font-size: 13px; }
  td.pos { font-size: 13.5px; }
  .oid { font-size: 14.5px; }
  .oid:hover { color: var(--focus); text-decoration: underline; }
  .nick { font-size: 11.5px; }
  .badge { min-width: 26px; margin-right: 7px; font-size: 10.5px; padding: 1px 5px; }
  .page-foot { font-size: 11.5px; padding: 12px var(--pad) 14px; }
}

/* ========================= 1100px+ : the player column can breathe */

@media (min-width: 1100px) {
  table { min-width: 0; }
  .c-player { width: auto; }
}