/* 2BIT tables: the Cabinets directory (.dir-) and High Scores (.hs-).
   Components (.tbl, .seg, .chip, .field, .btn, .card, .screen) are in
   base.css; this file only lays them out and adds the two things that are
   particular to these views: the sticky identity column with its scroll
   shadows, and the CRT score table. Tokens only, no raw colours. */

/* ==========================================================================
   Shared by both tables
   ========================================================================== */

/* the box the right-hand "more this way" shadow hangs on (the wrap scrolls) */
.dir-tblbox, .hs-edge{ position:relative; }
.dir-tblbox::after, .hs-edge::after{
  content:""; position:absolute; top:1px; bottom:1px; right:1px; width:20px; z-index:3; pointer-events:none;
  border-radius:0 var(--r-3) var(--r-3) 0;
  background:linear-gradient(to left, var(--shelf), transparent);
  opacity:0; transition:opacity var(--d-2) linear;
}
.dir-tblbox.has-more::after, .hs-edge.has-more::after{ opacity:.85; }

/* identity column: stays put while the numbers scroll under it */
.dir-tbl .dir-id, .hs-tbl .hs-id{ position:sticky; left:0; z-index:1; background:var(--bg-card); }
.dir-tbl th.dir-id, .hs-tbl th.hs-id{ z-index:2; }
.dir-tbl .dir-id::after, .hs-tbl .hs-id::after{
  content:""; position:absolute; top:0; bottom:0; left:100%; width:10px; pointer-events:none;
  background:linear-gradient(to right, var(--shelf), transparent);
  opacity:0; transition:opacity var(--d-2) linear;
}
.is-scrolled .dir-id::after, .is-scrolled .hs-id::after{ opacity:.85; }

.dir-tbl td, .hs-tbl td{ white-space:nowrap; }

/* ==========================================================================
   Cabinets directory
   ========================================================================== */

.dir-lede{ max-width:60ch; margin:calc(var(--s-3) * -1) 0 var(--s-5); }

/* ---------- toolbar ---------- */
.dir-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
  padding:var(--s-3);
  background:var(--bg-card); border:1px solid var(--line-1); border-radius:var(--r-3);
}
.dir-search{ flex:1 1 220px; max-width:320px; }
.dir-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); flex:1 1 auto; min-width:0; }
.dir-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.dir-tiers{ flex:none; }
.dir-zone{ flex:none; width:160px; }
.dir-sortbox{ display:flex; align-items:center; gap:var(--s-2); flex:none; }
.dir-sort{ width:200px; }
.dir-dir{ font-family:var(--f-mono); font-size:16px; }
.dir-view{ flex:none; margin-left:auto; }
/* only exist below 560px / inside the sheet */
.dir-filters-btn, .dir-sheet-h, .dir-done{ display:none; }

.dir-meta{ display:flex; align-items:center; gap:var(--s-3); min-height:44px; margin:var(--s-2) 0; }

/* ---------- LIST ---------- */
.dir-tbl tbody td{ cursor:pointer; }
.dir-id{ min-width:200px; }
.dir-link{
  display:flex; align-items:center; gap:var(--s-3); min-width:0;
  color:inherit; text-decoration:none; border-radius:var(--r-1);
}
.dir-link:focus-visible{ box-shadow:var(--focus); }
.dir-glyph{ flex:none; width:28px; height:40px; }
.dir-idt{ display:flex; flex-direction:column; min-width:0; }
.dir-tk{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; line-height:1.3; color:var(--tx-1); white-space:nowrap;
}
.dir-nm{
  max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 13px/1.3 var(--f-ui); letter-spacing:.01em; color:var(--tx-2);
}
.dir-tn{ margin-left:var(--s-2); font:500 13px/1.3 var(--f-ui); color:var(--tx-2); }
.dir-by{ margin-left:var(--s-2); color:var(--tx-3); }
.dir-act{ width:1%; text-align:right; white-space:nowrap; }
/* the row's one action stays in view while the numbers scroll under it */
.dir-tbl .dir-act{ position:sticky; right:0; z-index:1; background:var(--bg-card); }
.dir-tbl th.dir-act{ z-index:2; }
/* Game: free text, capped so it cannot push the table wider */
.dir-tbl td:nth-child(2){ max-width:22ch; overflow:hidden; text-overflow:ellipsis; }
.dir-ooo{ color:var(--tx-3); }
.dir-tbl tr.is-off > td{ color:var(--tx-3); }
.dir-tbl tr.is-off .dir-tk{ color:var(--tx-2); }
/* live: the coin's page on pump.fun, a real link out (list column and shelf card) */
.dir-ext{ display:inline-flex; align-items:center; white-space:nowrap; border-radius:var(--r-1); }
.dir-ext:focus-visible{ box-shadow:var(--focus); }
.dir-coin .dir-ext{ font:500 13px/1.4 var(--f-mono); letter-spacing:0; }

/* ---------- SHELF ---------- */
.dir-shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--s-4); }
.dir-card{ display:flex; flex-direction:column; gap:var(--s-3); padding:10px; }
.dir-card-link{
  display:flex; flex-direction:column; gap:var(--s-2); min-width:0;
  color:inherit; text-decoration:none; border-radius:var(--r-2);
}
.dir-card-link:focus-visible{ box-shadow:var(--focus); }
.dir-card-stage{ position:relative; display:block; flex:none; margin:0 auto; }
.dir-cab{ display:block; max-width:none; }
/* the watched canvas sits on the glass; shown only while its card is hot */
.dir-scr{ position:absolute; max-width:none; opacity:0; pointer-events:none; image-rendering:pixelated; }
.dir-card.is-hot .dir-scr{ opacity:1; transition:opacity var(--d-1) linear 120ms; }
.dir-card-t{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); min-width:0; }
.dir-card-t .dir-tk{ font-size:16px; }
.dir-card-tier{ flex:none; }
.dir-card-g{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 13px/1.3 var(--f-ui); letter-spacing:.01em; color:var(--tx-2);
}
.dir-card-m{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-2);
  padding:var(--s-2) var(--s-3); background:var(--bg-raise); border-radius:var(--r-2);
}
.dir-card-m > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dir-card-m .mono{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.dir-card-act{ margin-top:auto; min-height:48px; }
.dir-card-act .dir-ooo{ display:flex; align-items:center; justify-content:center; height:44px; }
.dir-card.is-off .dir-tk{ color:var(--tx-2); }
.dir-card-x{ text-align:center; }

@media (hover: hover){
  .dir-card{ transition:transform var(--d-2) var(--e-out); }
  .dir-card:hover{ transform:translateY(-2px); }
}
:root[data-calm="1"] .dir-card{ transition:none; transform:none; }
:root[data-calm="1"] .dir-card.is-hot .dir-scr{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .dir-card{ transition:none; transform:none; }
  .dir-card.is-hot .dir-scr{ transition:none; }
}

/* ---------- empty / load more ---------- */
.dir-empty{ margin-top:var(--s-2); }
.dir-foot{ display:flex; align-items:center; justify-content:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }

/* ---------- FILTERS sheet (kit.modal frame, docked to the bottom) ---------- */
.modal.dir-sheet{ align-self:flex-end; width:100%; padding:var(--s-4); border-radius:var(--r-3) var(--r-3) 0 0; }
.dir-sheet .dir-filters{ flex-direction:column; align-items:stretch; gap:var(--s-4); }
.dir-sheet .dir-sheet-h{ display:block; padding-right:var(--s-7); font-size:22px; }
.dir-sheet .dir-done{ display:flex; }
.dir-sheet .dir-chips{ gap:var(--s-3) var(--s-2); }
.dir-sheet .dir-tiers{ display:flex; }
.dir-sheet .dir-tiers > button{ flex:1 1 0; padding:0; }
.dir-sheet .dir-zone{ width:auto; }
.dir-sheet .dir-sort{ flex:1 1 auto; width:auto; }

/* ==========================================================================
   High Scores
   ========================================================================== */

.hs-tabs{ margin-bottom:var(--s-4); }
.hs-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:44px; margin-bottom:var(--s-3);
}
.hs-demo{ color:var(--tx-2); }
.hs-demo .demo{ margin:0 var(--s-2) 0 0; }
/* no pots: the Boards tab's cabinet picker */
.hs-pick{ flex:none; width:320px; max-width:100%; }

/* ---------- the CRT score table: a screen, not a card and not a podium ---------- */
.hs-crt{
  --hs-rank:104px;
  padding:var(--s-5) var(--s-6);
  border-radius:var(--r-stage);
}
.hs-crt-h, .hs-row{
  display:grid;
  grid-template-columns:var(--hs-rank) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap:var(--s-5); align-items:baseline;
  padding-left:var(--s-3); padding-right:var(--s-3);
}
.hs-crt-h{
  margin-bottom:var(--s-2); padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line-1);
  font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
}
.hs-list{ display:flex; flex-direction:column; gap:2px; }
.hs-row{
  min-height:44px; padding-top:6px; padding-bottom:6px;
  color:var(--tx-2); text-decoration:none; border-radius:var(--r-1);
  font:400 34px/1.15 var(--f-pix); letter-spacing:.04em; text-transform:uppercase;
}
.hs-list > li:nth-child(1) .hs-row{ font-size:40px; color:var(--coin); }
.hs-list > li:nth-child(2) .hs-row,
.hs-list > li:nth-child(3) .hs-row{ font-size:34px; color:var(--tx-1); }
.hs-rank{ white-space:nowrap; }
.hs-who{ display:flex; align-items:baseline; gap:var(--s-2); min-width:0; }
.hs-who-t, .hs-cab{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-val{ text-align:right; white-space:nowrap; }
/* score digits in fixed cells */
.hs-row .hs-val > i, .hs-row .hs-cab > i{ display:inline-block; width:.62em; text-align:center; font-style:normal; }
.hs-sub{
  grid-column:2 / -1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:500 13px/1.4 var(--f-mono); letter-spacing:0; text-transform:none; color:var(--tx-3);
}
.hs-you{ flex:none; align-self:center; color:var(--tx-1); }
.hs-row.is-me{ background:var(--sel-wash); box-shadow:inset 3px 0 0 0 var(--sel); }
@media (hover: hover){
  .hs-row:hover{ background:var(--bg-raise); }
}
.hs-row:focus-visible{ background:var(--bg-raise); box-shadow:inset 0 0 0 2px var(--sel); }

/* rows come in top-down, 60 ms apart; all at once when calm */
.hs-list.is-reveal .hs-row{
  animation:hs-reveal var(--d-2) linear both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
@keyframes hs-reveal{ from{ opacity:0; } }
:root[data-calm="1"] .hs-list.is-reveal .hs-row{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .hs-list.is-reveal .hs-row{ animation:none; }
}

.hs-none{ padding:var(--s-7) var(--s-4); text-align:center; color:var(--tx-2); }
.hs-none .pix{ margin-bottom:var(--s-2); font-size:28px; line-height:1.1; text-transform:uppercase; color:var(--tx-1); }
/* the empty table's one action (build the first cabinet, go and play) */
.hs-none-a{ margin-top:var(--s-4); }
.hs-rule{
  margin-top:var(--s-4); padding:var(--s-3) var(--s-3) 0;
  border-top:1px solid var(--line-1); color:var(--tx-3);
}
.hs-note{ margin-top:var(--s-3); }

/* ---------- ranks 11 to 100 ---------- */
.hs-tblbox{ margin-top:var(--s-6); }
.hs-rest{ margin-bottom:var(--s-2); }
.hs-rk{ display:inline-block; min-width:3ch; margin-right:var(--s-3); text-align:right; color:var(--tx-3); }
.hs-idt{ display:inline-flex; align-items:center; gap:var(--s-2); vertical-align:middle; }
/* the visitor's row: the wash has to be opaque where the column is sticky */
.hs-tbl tbody tr.is-me > td.hs-id{ background:linear-gradient(var(--sel-wash), var(--sel-wash)), var(--bg-card); }

/* ==========================================================================
   Below 900px: fewer columns, the identity column and its shadows stay
   ========================================================================== */
@media (max-width: 899px){
  .dir-tbl .dir-x, .hs-tbl .hs-x{ display:none; }
  .dir-id{ min-width:0; }
  .dir-nm{ max-width:14ch; }
  .dir-tbl th{ padding-top:0; padding-bottom:0; }
  .dir-tbl .tbl-sort{ min-height:44px; }
  .dir-toolbar{ gap:var(--s-2); }
  .dir-zone{ width:150px; }
  .dir-sort{ width:180px; }
  .dir-foot .btn{ min-width:160px; }
  .dir-ext{ min-height:44px; }

  .hs-crt{ --hs-rank:76px; padding:var(--s-4) var(--s-3); }
  .hs-crt-h, .hs-row{ column-gap:var(--s-3); }
  .hs-list > li:nth-child(n) .hs-row{ font-size:28px; }
}

/* ==========================================================================
   Below 560px: card lists, the FILTERS sheet, the three-column score table
   ========================================================================== */
@media (max-width: 559px){
  .dir-toolbar > .dir-filters{ display:none; }
  .dir-filters-btn{ display:inline-flex; }
  .dir-search{ flex:1 1 100%; max-width:none; }

  .dir-wrap, .hs-wrap{ overflow:visible; background:none; border:0; border-radius:0; }
  .dir-tblbox::after, .hs-edge::after, .dir-tbl .dir-id::after, .hs-tbl .hs-id::after{ display:none; }
  .dir-tbl, .dir-tbl tbody, .hs-tbl, .hs-tbl tbody{ display:block; }
  /* sorting is in the FILTERS sheet at this width */
  .dir-tbl thead, .hs-tbl thead{ display:none; }
  .dir-tbl tr, .hs-tbl tr{
    position:relative;
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-2) var(--s-3);
    margin-bottom:var(--s-2); padding:var(--s-3);
    background:var(--bg-card); border:1px solid var(--line-1); border-radius:var(--r-2);
  }
  /* same weight as base.css's row hover / is-me rules, so these win by order */
  .tbl.dir-tbl tbody tr > td, .tbl.hs-tbl tbody tr > td{
    display:block; min-width:0; padding:0; border:0; background:none;
  }
  .tbl.dir-tbl td.num, .tbl.hs-tbl td.num{ text-align:left; }
  .dir-tbl td[data-l]:not(.dir-id)::before, .hs-tbl td[data-l]::before{
    content:attr(data-l); display:block; margin-bottom:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font:700 12px/1.2 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
  }
  .tbl.dir-tbl tbody tr > td.dir-id{ grid-column:1 / -1; position:static; padding-right:128px; }
  .tbl.hs-tbl tbody tr > td.hs-id{ grid-column:1 / -1; position:static; }
  .tbl.dir-tbl tbody tr > td.dir-act{
    position:absolute; right:var(--s-3); top:var(--s-3);
    display:flex; align-items:center; width:auto; height:40px;
  }
  .tbl.dir-tbl tbody tr > td.dir-x, .tbl.dir-tbl tbody tr > td.dir-y, .tbl.hs-tbl tbody tr > td.hs-x{ display:none; }
  .dir-nm{ max-width:none; }
  .hs-tbl tr.is-me{ background:linear-gradient(var(--sel-wash), var(--sel-wash)), var(--bg-card); border-color:var(--sel-lo); }

  .dir-shelf{ gap:var(--s-3); }
  .dir-meta{ flex-wrap:wrap; }

  .hs-bar{ align-items:flex-start; }
  .hs-pick{ width:100%; }
  .hs-by{ display:flex; width:100%; }
  .hs-by > button{ flex:1 1 0; padding:0; }
  .hs-crt{ --hs-rank:58px; padding:var(--s-3) var(--s-2); border-radius:var(--r-3); }
  .hs-crt-h, .hs-row{
    grid-template-columns:var(--hs-rank) minmax(0, 1fr) auto; column-gap:var(--s-2);
    padding-left:var(--s-2); padding-right:var(--s-2);
  }
  .hs-list > li:nth-child(n) .hs-row{ font-size:22px; }
  /* the cabinet drops to a second, smaller line */
  .hs-row .hs-cab{ grid-column:2 / -1; font:500 13px/1.4 var(--f-mono); letter-spacing:0; color:var(--tx-3); }
  .hs-crt-h .hs-cab, .hs-sub{ display:none; }
  .hs-none .pix{ font-size:22px; }
}