/* ==========================================================================
   HoopsMatic — NBA Garbage Time. Shared stylesheet.
   Design tokens lifted from the HoopsHype NBA Polymarket tracker.
   ========================================================================== */
:root{
  --bg:#f5f5f7;--surface:#fff;--surface-hover:#f0f0f2;--border:#d1d1d6;
  --text:#1d1d1f;--text-secondary:#6e6e73;--accent:#3b82f6;--accent-dim:rgba(59,130,246,.15);
  --green:#1d8a40;--green-dim:rgba(52,199,89,.16);
  --red:#d12c2c;--red-dim:rgba(239,68,68,.13);
  --orange:#b26b00;--orange-dim:rgba(245,158,11,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:115%}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);
  color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:1.5rem 1.5rem 4rem}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.tabs{display:flex;gap:.3rem;margin-bottom:1rem;flex-wrap:wrap}
.tabs a{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;padding:.4rem .8rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);text-decoration:none}
.tabs a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.tabs a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.hdr{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.35rem;flex-wrap:wrap}
.hdr h1{font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.hdr .brand{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.08em}
.subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:1.25rem;max-width:60rem}
.subtitle .stamp{font-family:'JetBrains Mono',monospace;font-size:.78rem}
.rule{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:10px;padding:.75rem .9rem;margin-bottom:1.25rem;font-size:.84rem;color:var(--text);max-width:60rem}
.rule b{font-weight:700}
.rule .lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent);margin-right:.4rem}
.block{margin-bottom:1.6rem}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.6rem;flex-wrap:wrap}
.block-head h2{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.block-head .more{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600}
.block-head .sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em}
.controls{position:sticky;top:0;z-index:100;background:var(--bg);display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:.7rem 1rem;padding:.7rem 0 .8rem;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field>label{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-secondary)}
select,input[type=number],input[type=text]{font-family:inherit;font-size:.86rem;padding:.45rem .6rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
input[type=number]{width:5rem}
.toggle{display:inline-flex;gap:.3rem;flex-wrap:wrap}
.toggle button{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;padding:.4rem .7rem;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-secondary);
  cursor:pointer;transition:.12s}
.toggle button:hover{border-color:var(--accent);color:var(--accent)}
.toggle button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chip{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;padding:.34rem .7rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);
  cursor:pointer;transition:.12s;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem}
.tile{display:flex;flex-direction:column;gap:.2rem;padding:.8rem .9rem;border:1px solid var(--border);
  border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;transition:.12s}
.tile:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.tile.active{border-color:var(--accent);background:var(--accent-dim)}
.tile .ab{font-family:'JetBrains Mono',monospace;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.tile .tl{font-size:.84rem;font-weight:600}
.tile .ts{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em}
table.lb.sortable thead th.sortable-th{cursor:pointer;-webkit-user-select:none;user-select:none}
table.lb.sortable thead th.sortable-th:hover{color:var(--accent)}
table.lb thead th.sort-asc::after{content:"▲";font-size:.6em;margin-left:.35em;vertical-align:middle}
table.lb thead th.sort-desc::after{content:"▼";font-size:.6em;margin-left:.35em;vertical-align:middle}
td.gpct{font-weight:700;color:#1d1d1f}
.delta.deemph{font-weight:400;opacity:.6}
td.muted{color:var(--text-secondary)}
.stat-card.gpct-card{border-color:transparent}
.stat-card.gpct-card .num{color:#1d1d1f}
.ec.gpct{padding:.05rem .4rem;border-radius:5px;color:#1d1d1f;font-weight:700}
.search-wrap{position:relative;flex:1 1 18rem;min-width:14rem}
.search-wrap input{width:100%}
.typeahead{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:22rem;overflow-y:auto;z-index:200;display:none}
.typeahead.open{display:block}
.ta-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem;border-bottom:1px solid var(--border);
  cursor:pointer;color:var(--text)}
.ta-item:last-child{border-bottom:none}
.ta-item:hover,.ta-item.active{background:var(--surface-hover)}
.ta-item img{width:30px;height:22px;border-radius:4px;object-fit:cover;background:var(--surface-hover);flex-shrink:0}
.ta-item .nm{font-size:.86rem;font-weight:600}
.ta-empty{padding:.7rem .8rem;color:var(--text-secondary);font-size:.82rem}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.lb{width:100%;border-collapse:collapse;font-size:.86rem}
table.lb thead th{background:var(--surface-hover);color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:.04em;font-size:.66rem;font-weight:600;padding:.7rem .6rem;text-align:center;
  border-bottom:1px solid var(--border);white-space:nowrap;user-select:none}
table.lb thead th.left{text-align:left}
table.lb thead th.dcol{background:var(--accent-dim);color:var(--accent);font-weight:700}
table.lb tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
table.lb tbody tr:last-child{border-bottom:none}
table.lb tbody tr:hover{background:var(--surface-hover)}
table.lb td{padding:.55rem .6rem;text-align:center;font-family:'JetBrains Mono',monospace;
  font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
table.lb td.left{text-align:left}
td.rank{color:var(--text-secondary);font-size:.78rem;width:2.6rem}
td.dcol,th.dcol{background:var(--accent-dim)}
.delta{font-weight:600}
.delta.pos{color:var(--green)}.delta.neg{color:var(--red)}.delta.flat{color:var(--text-secondary)}
.dash{color:var(--text-secondary)}
tr.career-row td{background:var(--accent-dim);font-weight:700;border-top:2px solid var(--accent)}
tr.career-row:hover td{background:var(--accent-dim)}
.pcell{display:flex;align-items:center;gap:.55rem;font-family:'DM Sans',sans-serif;text-align:left}
.pcell img{width:30px;height:22px;border-radius:4px;object-fit:cover;background:var(--surface-hover);flex-shrink:0}
.pcell a,.pcell .lnk{font-weight:600;color:var(--text);cursor:pointer}
.pcell a:hover,.pcell .lnk:hover{color:var(--accent);text-decoration:underline}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem}
.stat-card .lbl{font-size:.6rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;margin-bottom:.3rem;font-family:'JetBrains Mono',monospace}
.stat-card .num{font-family:'JetBrains Mono',monospace;font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.stat-card .num.pos{color:var(--green)}.stat-card .num.neg{color:var(--red)}.stat-card .num.flat{color:var(--text)}
.stat-card .sub{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-secondary);margin-top:.25rem}
.stat-cards.compact{gap:.6rem;margin-bottom:.6rem}
.stat-cards.compact .stat-card{padding:.55rem .8rem}
.stat-cards.compact .lbl{margin-bottom:.1rem}
.stat-cards.compact .num{font-size:1.35rem}
.stat-cards.compact .sub{margin-top:.1rem;font-size:.64rem}
.section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.section>h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);
  font-weight:600;margin-bottom:.2rem;font-family:'JetBrains Mono',monospace}
.section .hint{font-size:.74rem;color:var(--text-secondary);margin-bottom:.9rem}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.section-head h2{margin-bottom:0}
.back{font-size:.78rem;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);
  display:inline-block;margin-bottom:1rem}
.back:hover{color:var(--accent);text-decoration:none}
.ehead{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--border);
  padding-bottom:1rem;margin-bottom:1.2rem}
.eimg{width:84px;height:62px;border-radius:12px;object-fit:cover;background:var(--surface-hover);
  border:1px solid var(--border);flex-shrink:0}
.ehead h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.esub{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.4rem}
.ecard{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none;transition:.12s}
.ecard:hover{border-color:var(--accent);text-decoration:none}
.ecard img{width:38px;height:28px;border-radius:5px;object-fit:cover;background:var(--surface-hover);flex-shrink:0}
.ecard .en{flex:1;font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecard .ec{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-secondary)}
.dir-letter{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;color:var(--text-secondary);
  margin:1.1rem 0 .5rem;border-bottom:1px solid var(--border);padding-bottom:.2rem}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--text-secondary)}
.loading{text-align:center;padding:3rem 1rem;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.8rem}
@media(max-width:860px){
  .container{padding:1rem 1rem 3rem}
  .hdr h1{font-size:1.15rem}
  .hdr .brand{display:none}
  .subtitle{font-size:.82rem;margin-bottom:.8rem}
  .stat-cards{gap:.5rem}
  .stat-card{padding:.7rem .6rem}
  .stat-card .num{font-size:1.25rem}
  .ehead h1{font-size:1.3rem}
}
@media(max-width:560px){
  .stat-cards{grid-template-columns:1fr 1fr 1fr}
}
/* mobile: tighten the home-page header chrome (subtitle, rule callout, filter
   row, tiles) so the first leaderboard row comes up sooner. Nothing hidden —
   just denser spacing/type. Desktop is unaffected. */
@media(max-width:680px){
  .subtitle{margin-bottom:.55rem}
  .rule{padding:.5rem .6rem;margin-bottom:.6rem;font-size:.76rem;border-left-width:3px;border-radius:8px}
  .rule .lbl{font-size:.56rem;margin-right:.3rem}
  .controls{flex-wrap:nowrap;gap:.4rem .5rem;padding:.4rem 0 .5rem;margin-bottom:.6rem}
  .field{gap:.18rem}
  .field>label{font-size:.54rem}
  select,input[type=number],input[type=text]{font-size:.82rem;padding:.38rem .5rem}
  .search-wrap{flex:1 1 auto;min-width:0}
  input[type=number]{width:3.2rem}
  .tilegrid{gap:.3rem;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr))}
  .tile{gap:.05rem;padding:.3rem .25rem;border-radius:9px}
  .tile .ab{font-size:.82rem}
  .tile .tl{font-size:.64rem}
  .tile .ts{display:none}
  #board .block-head{margin-bottom:.4rem}
  #board .block-head[style]{margin-top:.9rem !important}
}

/* mobile (#2): ranking tables become stacked cards so nothing is clipped and
   no horizontal scrolling/sticky tricks are needed (those failed on iOS
   Safari). Scope: table.lb.sortable — i.e. the leaderboard boards, the
   leaderboard hub previews and the All Players directory. The per-player
   splits tables on player pages are table.lb (NOT .sortable) and keep the
   normal horizontally-scrollable layout. One card per row: rank badge +
   headshot + name across the top, then each stat as a labeled line
   (label from td[data-label] via ::before). */
@media(max-width:680px){
  /* per-player splits tables: stay a normal scrollable table */
  table.lb:not(.sortable){min-width:max-content}
  table.lb:not(.sortable) th,table.lb:not(.sortable) td{white-space:nowrap}

  /* ranking tables: card layout */
  table.lb.sortable{display:block;width:100%;min-width:0}
  table.lb.sortable thead{display:none}
  table.lb.sortable tbody{display:block}
  table.lb.sortable tr{display:block;position:relative;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;margin:.55rem}
  table.lb.sortable td{display:flex;justify-content:space-between;align-items:center;gap:1rem;
    text-align:right;white-space:normal;border:0;padding:.28rem 0;font-size:.86rem}
  table.lb.sortable td::before{content:attr(data-label);text-align:left;color:var(--text-secondary);
    font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em}
  /* player cell = card header; rank sits in the top-right corner */
  table.lb.sortable td.left{display:block;padding:0 2.4rem .5rem 0;margin-bottom:.45rem;
    border-bottom:1px solid var(--border)}
  table.lb.sortable td.left::before{content:none}
  table.lb.sortable td.left .pcell img{width:34px;height:25px}
  table.lb.sortable td.rank{position:absolute;top:.55rem;right:.7rem;display:block;width:auto;
    padding:0;font-size:.74rem;color:var(--text-secondary)}
  table.lb.sortable td.rank::before{content:"#"}
  /* only the garbage-% line keeps a tint; reset the desktop accent on others */
  table.lb.sortable td.dcol{background:initial}
  table.lb.sortable td.gpct{padding:.28rem .45rem;border-radius:6px}
  table.lb.sortable td.empty{justify-content:center;color:var(--text-secondary)}
  table.lb.sortable td.empty::before{content:none}
}