/* ============================================================================
   Rooky Move
   Warm neutral ground, single light-orange accent, hairline structure.
   No boxes where a rule and some air will do.
   ========================================================================== */

:root{
  --bg:        #0d0c0b;
  --surface:   #131211;
  --raised:    #1a1918;
  --hair:      rgba(255,255,255,.075);
  --hair-2:    rgba(255,255,255,.04);

  --ink:       #ece8e3;
  --ink-2:     #9c958c;
  --ink-3:     #6a635c;

  --accent:    #f0a868;
  --accent-dim:rgba(240,168,104,.14);
  --accent-ink:#171310;

  --pos:       #8fbf6a;
  --neg:       #d9705a;

  --r:         10px;
  --maxw:      1180px;

  /* one spacing scale, used everywhere */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --cell-x: 26px;   /* horizontal gutter between table columns */
}

*{ box-sizing:border-box; }

html,body{ margin:0; background:var(--bg); color:var(--ink); }
body{
  font:15px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",
       Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ------------------------------------------------------------------ masthead */

.masthead{ padding:var(--s5) 0 var(--s4); }
.brand{
  font-size:26px; font-weight:600; letter-spacing:-.025em; margin:0;
  display:flex; align-items:center; gap:9px;
}
/* The rook is upside down on purpose — sized by height, since it is much
   taller than it is wide and a square box would shrink it to nothing. */
.brand .mark{
  height:30px; width:auto; flex:none; display:block;
}
@media (max-width:720px){ .brand .mark{ height:26px; } }
.brand b{ font-weight:600; color:var(--accent); }
.lede{
  color:var(--ink-2); margin:12px 0 0; font-size:15px; max-width:52ch;
  line-height:1.55;
}

/* ---------------------------------------------------------------- searchbar */

.finderrow{ display:flex; gap:10px; }
input[type=text]{
  flex:1; min-width:0;
  background:var(--surface);
  border:1px solid var(--hair);
  color:var(--ink);
  padding:0 15px; height:46px;
  border-radius:var(--r);
  font-size:15.5px; font-family:inherit;
  transition:border-color .15s, background .15s;
}
input[type=text]::placeholder{ color:var(--ink-3); }
input[type=text]:focus{
  outline:none; border-color:var(--accent); background:var(--raised);
}
input[type=number]{
  background:var(--surface); border:1px solid var(--hair); color:var(--ink);
  border-radius:7px; padding:5px 8px; width:58px; font-family:inherit; font-size:13px;
}
input[type=number]:focus{ outline:none; border-color:var(--accent); }

button.primary{
  background:var(--accent); color:var(--accent-ink);
  border:0; height:46px; padding:0 24px; border-radius:var(--r);
  font:600 15px/1 inherit; cursor:pointer; white-space:nowrap;
  transition:filter .15s, transform .05s;
}
button.primary:hover:not(:disabled){ filter:brightness(1.07); }
button.primary:active:not(:disabled){ transform:translateY(1px); }
button.primary:disabled{ opacity:.4; cursor:default; }

/* -------------------------------------------------------------------- chips */

.filters{ margin-top:var(--s3); }
.filterbar{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }

/* segmented control — one decision, one control */
.segmented{
  display:inline-flex; border:1px solid var(--hair); border-radius:9px;
  overflow:hidden; background:var(--surface);
}
.seg{
  background:transparent; border:0; border-right:1px solid var(--hair);
  color:var(--ink-2); font:500 13px/1 inherit; padding:9px 15px;
  cursor:pointer; white-space:nowrap; transition:background .13s, color .13s;
}
.seg:last-child{ border-right:0; }
.seg:hover{ color:var(--ink); background:rgba(255,255,255,.03); }
.seg.on{ background:var(--accent); color:var(--accent-ink); font-weight:600; }

.disclosure{
  background:none; border:0; color:var(--ink-3); cursor:pointer;
  font:500 13px/1 inherit; padding:9px 2px; transition:color .13s;
}
.disclosure:hover{ color:var(--ink-2); }
.disclosure.active{ color:var(--accent); }
.disclosure::after{ content:' ▾'; font-size:9px; opacity:.7; }
.disclosure[aria-expanded="true"]::after{ content:' ▴'; }

.morepanel{
  margin-top:var(--s3); padding-top:var(--s3);
  border-top:1px solid var(--hair);
}
.filterset + .filterset{ margin-top:var(--s3); }
.setlabel{
  font-size:10.5px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.09em; font-weight:500; display:block; margin-bottom:9px;
}
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--hair); background:transparent; color:var(--ink-2);
  padding:5px 12px; border-radius:999px; cursor:pointer;
  font-size:13px; line-height:1.5; user-select:none;
  transition:border-color .13s, color .13s, background .13s;
}
.chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.16); }
.chip.on{
  background:var(--accent-dim); border-color:rgba(240,168,104,.5); color:var(--accent);
}

/* ------------------------------------------------------------------ progress */

.progress{
  height:2px; background:var(--hair-2); border-radius:2px;
  overflow:hidden; margin-top:20px; display:none;
}
.progress > i{
  display:block; height:100%; width:0; background:var(--accent);
  transition:width .18s ease-out;
}
.note{ color:var(--ink-2); font-size:13.5px; margin-top:13px; min-height:20px; }
.note.error{ color:var(--neg); }

/* --------------------------------------------------------------------- tabs */

.tabbar{
  position:sticky; top:0; z-index:20;
  background:rgba(13,12,11,.86);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--hair);
  margin-top:var(--s2);
}
/* Underlined text links read as prose and get scrolled past. These are the
   primary navigation of the whole site, so they are buttons: a bordered pill
   group where the active one is filled, which is the same visual language as
   the filter segments below it. */
.tabbar .wrap{ display:flex; gap:8px; padding-top:12px; padding-bottom:12px; }
.tab{
  flex:0 1 auto; cursor:pointer;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
  padding:11px 18px; color:var(--ink-2);
  font:600 14px/1 inherit; letter-spacing:-.005em;
  transition:background .14s, color .14s, border-color .14s;
}
.tab:hover{ background:var(--surface-2, rgba(255,255,255,.05)); color:var(--ink); }
.tab[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:#171310;
}
.tab[aria-selected="true"]:hover{ background:var(--accent); }
.tab .count{ font-weight:400; margin-left:6px; font-size:13px; opacity:.7; }

@media (max-width:600px){
  .tabbar .wrap{ gap:6px; }
  .tab{ flex:1 1 0; padding:11px 6px; font-size:12.5px; text-align:center; }
}

/* ------------------------------------------------------------------ summary */

.headline{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  column-gap:var(--s4); row-gap:0;
  margin:var(--s4) 0 var(--s1);
  border-top:1px solid var(--hair);
}
.hstat{
  padding:var(--s3) 0; border-bottom:1px solid var(--hair-2);
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:104px;
}
.hstat .k{
  font-size:10.5px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.09em; font-weight:500; line-height:1.4;
}
.hstat .v{
  font-size:26px; font-weight:600; margin-top:10px; letter-spacing:-.022em;
  line-height:1.1; overflow-wrap:anywhere;
}
.hstat .v small{ font-size:14px; font-weight:400; color:var(--ink-2); }
.hstat .sub{ font-size:12.5px; color:var(--ink-3); margin-top:auto; padding-top:8px;
  line-height:1.45; }

/* -------------------------------------------------------------- card sheet */

/* Fourteen cells, seven across. 14 divides only by 7 and 2, so the sheet
   scrolls rather than reflowing into a short final row. Rules are drawn by a
   1px grid gap over a hairline backdrop — no nth-child arithmetic to break. */
.sheetwrap{
  overflow-x:auto; border:1px solid var(--hair); border-radius:var(--r);
  margin:var(--s4) 0 0;
}
.sheet{
  display:grid; grid-template-columns:repeat(7,minmax(118px,1fr)); gap:1px;
  background:rgba(255,255,255,.06); min-width:854px;
}
.cell{
  background:#100f0e; padding:13px 14px 14px; min-width:0; text-align:left;
  border:0; font:inherit; color:inherit; cursor:pointer;
  transition:background .13s;
  display:flex; flex-direction:column;
}
.cell:hover{ background:#191817; }
.cell:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cell.hero{ background:rgba(240,168,104,.07); }
.cell.hero:hover{ background:rgba(240,168,104,.12); }
.cell.quiet{ cursor:default; }
.cell.quiet:hover{ background:#100f0e; }

.ck{
  font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; line-height:1.35;
}
.cv{
  font-size:24px; font-weight:600; letter-spacing:-.03em; line-height:1.05;
  margin-top:7px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cv i{ font-style:normal; font-size:12.5px; font-weight:400; color:var(--ink-3); }
.cv u{ text-decoration:none; font-size:11.5px; font-weight:400; color:var(--ink-2); margin-left:2px; }
.cv.none{ color:var(--ink-3); font-size:19px; font-weight:500; }
.cv.acc{ color:var(--accent); }
.cv.pos{ color:var(--pos); }
.cv.neg{ color:var(--neg); }
.cs{
  font-size:10px; color:var(--ink-3); line-height:1.35; margin-top:auto;
  padding-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:600px){
  .sheet{ grid-template-columns:repeat(2,1fr); min-width:0; }
  .cv{ font-size:27px; }
  .ck{ font-size:9.5px; }
  .cs{ font-size:11px; }
}

/* a section briefly marks itself when a card jumps you to it */
@keyframes rb-flash{
  0%{ background:rgba(240,168,104,.10); }
  100%{ background:transparent; }
}
.section.flash{ animation:rb-flash 1.1s ease-out; }

/* ------------------------------------------------------------------ section */

.section{
  padding:var(--s5) 0;
  border-top:1px solid var(--hair);
}
.section:first-of-type{ border-top:0; padding-top:var(--s4); }
.section:last-of-type{ padding-bottom:var(--s4); }
.sechead{ display:block; }
.sectitle{ font-size:20px; font-weight:600; margin:0; letter-spacing:-.022em; line-height:1.3; }
.secnote{ color:var(--ink-2); font-size:13.5px; margin:var(--s1) 0 0; max-width:62ch;
  line-height:1.6; }
.secnote input[type=number]{ margin:0 5px; vertical-align:baseline; }
.secsum{
  color:var(--accent); font-size:14.5px; margin:var(--s2) 0 0; font-weight:500;
  line-height:1.5; max-width:62ch;
}
.secsum:empty{ display:none; }

.seccontrols{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--s2); row-gap:var(--s2);
  margin-top:var(--s3);
}
.seccontrols .segmented{ border-radius:8px; }
.seccontrols .seg{ padding:7px 13px; font-size:12.5px; }
.ctlgroup{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.ctlgroup .setlabel{ margin:0 var(--s1) 0 0; display:inline-block; line-height:1; }
.mini{
  border:1px solid var(--hair); background:transparent; color:var(--ink-3);
  padding:5px 12px; border-radius:999px; cursor:pointer;
  font-size:12px; line-height:1.45; user-select:none; white-space:nowrap;
  transition:border-color .13s, color .13s, background .13s;
}
.mini:hover{ color:var(--ink-2); }
.mini.on{ background:var(--accent-dim); border-color:rgba(240,168,104,.45); color:var(--accent); }

/* ------------------------------------------------------------------- tables */

.tablewrap{ overflow-x:auto; margin-top:var(--s3); }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }

/* One horizontal rhythm for every cell. Right-aligned numeric columns keep the
   same gutter as text columns so nothing collides across a column boundary. */
th, td{ padding-right:var(--cell-x); }
th:last-child, td:last-child{ padding-right:0; }

thead th{
  text-align:left; font-weight:500; font-size:10.5px; letter-spacing:.085em;
  text-transform:uppercase; color:var(--ink-3);
  padding-top:0; padding-bottom:14px; white-space:nowrap;
  border-bottom:1px solid var(--hair); vertical-align:bottom;
}
thead th.sortable{ cursor:pointer; user-select:none; transition:color .13s; }
thead th.sortable:hover{ color:var(--ink-2); }
thead th.sorted{ color:var(--accent); }
thead th .arrow{ opacity:.75; font-size:9px; margin-left:4px; }

th.num, td.num{ text-align:right; font-variant-numeric:tabular-nums; }

tbody td{
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--hair-2);
  white-space:nowrap; vertical-align:middle; line-height:1.4;
}
tbody tr:first-child td{ padding-top:16px; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background .12s; }
tbody tr:hover td{ background:rgba(255,255,255,.018); }

.idx{
  color:var(--ink-3); font-size:11.5px; width:26px;
  padding-right:var(--s2); text-align:right;
}
.lead{ font-weight:600; font-size:14.5px; letter-spacing:-.01em; }
.dim{ color:var(--ink-2); }
.dimmer{ color:var(--ink-3); }
.pos{ color:var(--pos); font-weight:600; }
.neg{ color:var(--neg); font-weight:600; }
.acc{ color:var(--accent); font-weight:600; }
code{
  font:12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface); border:1px solid var(--hair);
  padding:2.5px 6px; border-radius:5px; color:var(--ink);
}
a{ color:var(--accent); text-decoration:none; }
.viewlink{
  color:var(--ink-2); font-size:14px; font-weight:600;
  letter-spacing:-.005em; transition:color .13s;
}
.viewlink:hover{ color:var(--accent); }

.pill{
  display:inline-block; font-size:11px; padding:2.5px 8px; border-radius:5px;
  background:var(--surface); border:1px solid var(--hair); color:var(--ink-2);
  margin-right:5px; line-height:1.4; vertical-align:middle;
}
.pill:last-child{ margin-right:0; }

/* the move column: played → what was there */
.arrow-i{ color:var(--ink-3); margin:0 8px; font-size:12px; }
.more{
  color:var(--ink-3); font-size:11.5px; margin-left:10px;
  white-space:nowrap;
}

.blank{ color:var(--ink-3); font-size:13.5px; padding:var(--s3) 0 0; }
.footnote{
  color:var(--ink-3); font-size:13px; line-height:1.65; max-width:66ch;
  margin:var(--s4) 0 0; padding-left:var(--s2);
  border-left:2px solid var(--hair);
}
.footnote b{ color:var(--ink-2); font-weight:600; }

/* -------------------------------------------------------------- board (tab2) */

.boards{ display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s4); }
.boardunit{ }

/* Two equal columns, so every pairing on the board tab lines up on one grid. */
.duo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:var(--s5); margin-top:var(--s4); align-items:start;
}
.duo > div{ min-width:0; }
.duo table{ margin-top:0; }
.boardcap{ font-size:13px; color:var(--ink-2); margin:0 0 var(--s2); line-height:1.5; }
.board{
  display:grid; grid-template-columns:repeat(8,38px); grid-auto-rows:38px;
  border:1px solid var(--hair); border-radius:7px; overflow:hidden;
}
.sq{
  position:relative; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-3); background:var(--surface);
}
.sq.alt{ background:var(--raised); }
.sq .n{ position:relative; z-index:2; font-weight:600; }
.sq.hot .n{ color:var(--accent-ink); }
.sq .heat{ position:absolute; inset:0; background:var(--accent); z-index:1; }
.boardaxis{ display:grid; grid-template-columns:repeat(8,38px); margin-top:5px; }
.boardaxis span{ text-align:center; font-size:10px; color:var(--ink-3); }
.boardrow{ display:flex; gap:7px; align-items:flex-start; }
.rankaxis{ display:grid; grid-auto-rows:38px; }
.rankaxis span{
  display:flex; align-items:center; justify-content:flex-end;
  font-size:10px; color:var(--ink-3);
}

.census{ margin-top:0; }
.censusrow{ display:flex; align-items:center; gap:var(--s2); padding:11px 0;
  border-bottom:1px solid var(--hair-2); }
.censusrow:last-child{ border-bottom:0; }
.censusname{ width:82px; flex:none; font-size:13px; color:var(--ink-2); text-transform:capitalize; }
.censusbar{ flex:1; height:6px; background:var(--hair-2); border-radius:3px; overflow:hidden; }
.censusbar > i{ display:block; height:100%; background:var(--accent); }
.censusval{ width:52px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }
.censuszero{ color:var(--neg); }

/* --------------------------------------------------------------------- misc */

.panel{
  border:1px solid var(--hair); border-radius:var(--r);
  padding:var(--s4); margin-top:var(--s3); background:var(--surface);
}
.panel h3{ margin:0 0 var(--s2); font-size:16px; font-weight:600; letter-spacing:-.015em; }
.panel p{ margin:0; color:var(--ink-2); font-size:14px; max-width:66ch; line-height:1.65; }
.panel p + p{ margin-top:var(--s2); }
.soon{
  display:inline-block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(240,168,104,.4); background:var(--accent-dim);
  border-radius:999px; padding:3px 10px; margin-bottom:14px; font-weight:600;
}
.hidden{ display:none !important; }

footer{
  border-top:1px solid var(--hair); margin-top:var(--s5); padding:var(--s4) 0 var(--s5);
  color:var(--ink-3); font-size:12.5px; line-height:1.9;
}

@media (max-width:720px){
  .wrap{ padding:0 18px; }
  .masthead{ padding:34px 0 22px; }
  .brand{ font-size:22px; }
  .finderrow{ flex-wrap:wrap; }
  .tabbar .wrap{ gap:20px; overflow-x:auto; }
  .board{ grid-template-columns:repeat(8,32px); grid-auto-rows:32px; }
  .rankaxis{ grid-auto-rows:32px; }
  .boardaxis{ grid-template-columns:repeat(8,32px); }
}


/* ============================================================================
   Ad inventory
   ==========================================================================*/

/*
 * Side rails sit outside .wrap, so they can never shift the centred column.
 * The content column is 1180px plus 28px of padding each side. A 160px rail
 * with a 24px gutter needs 368px more, so rails only appear from 1560px up —
 * a 1440px laptop will never see them. In-content slots below carry the
 * inventory that always renders.
 */
.rail{
  position:fixed; top:96px; width:160px; display:none; z-index:5;
}
.rail-l{ left:calc(50% - 590px - 24px - 160px); }
.rail-r{ left:calc(50% + 590px + 24px); }
@media (min-width:1560px){ .rail{ display:block; } }

/* 300px wide rails once there is genuinely room for them */
@media (min-width:1860px){
  .rail{ width:300px; }
  .rail-l{ left:calc(50% - 590px - 32px - 300px); }
  .rail-r{ left:calc(50% + 590px + 32px); }
}

.pslot{ margin:var(--s4) 0 0; }
.pslot:empty{ display:none; }

/* Shared frame for both rails and in-content units. Hairline, no fill, so an
   unsold slot reads as part of the page rather than a hole in it. */
.punit{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair); border-radius:var(--r);
  background:var(--surface); overflow:hidden; position:relative;
  min-height:90px;
}
.rail .punit{ min-height:600px; }
.punit img{ display:block; max-width:100%; height:auto; }
.punit a{ display:block; line-height:0; }

/* Disclosure marker — required, kept quiet */
.punit::before{
  content:'Ad'; position:absolute; top:6px; left:8px;
  font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; pointer-events:none;
}

/* House creative shown while a slot is unsold */
.phouse{
  text-align:center; padding:var(--s3) var(--s2);
  color:var(--ink-3); font-size:12.5px; line-height:1.6;
}
.phouse b{ display:block; color:var(--ink-2); font-size:13.5px; font-weight:600;
  margin-bottom:3px; }
.phouse a{ color:var(--accent); }

/* ============================================================================
   Acts — the summary sheet in three bands
   ==========================================================================*/

.act + .act{ margin-top:var(--s4); }
.actlabel{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 var(--s2);
}
.act .sheetwrap{ margin-top:0; }
.act-disaster .actlabel{ color:var(--neg); }
.act-escape   .actlabel{ color:var(--pos); }
.act-crime    .actlabel{ color:var(--accent); }

/* Acts hold five, four and five cards; a fixed seven-column grid would strand
   two dead columns on the short band. */
.act .sheet{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); min-width:0; }

/* ============================================================================
   Badges — earned and unearned, both on the board
   ==========================================================================*/

.badgegrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px; background:rgba(255,255,255,.06);
  border:1px solid var(--hair); border-radius:var(--r);
  margin-top:var(--s4); overflow:hidden;
}
.badge{ background:#100f0e; padding:14px; display:flex; flex-direction:column; min-height:104px; }
.badge .bl{
  font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.badge .bv{
  font-size:23px; font-weight:600; letter-spacing:-.03em; margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.badge .bn{ font-size:10px; color:var(--ink-3); line-height:1.35; margin-top:auto; padding-top:6px; }
.badge.got .bv{ color:var(--accent); }
/* Unearned badges stay visible on purpose — an empty slot is the only thing
   on the site that gives you a reason to come back. */
.badge.not{ opacity:.38; }
.badge.not .bv{ color:var(--ink-3); }
.badge .viewlink{ margin-top:6px; font-size:10px; }

/* ============================================================================
   Tables on a narrow screen — two lines, never a horizontal scrollbar
   ==========================================================================*/

@media (max-width:720px){
  .tablewrap{ overflow-x:visible; }
  table.rows{ font-size:13px; }
  table.rows thead{ display:none; }
  table.rows tbody tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px;
    padding:13px 0; border-bottom:1px solid var(--hair-2);
  }
  table.rows tbody tr:last-child{ border-bottom:0; }
  table.rows tbody td{
    border:0; padding:0; white-space:nowrap; text-align:left;
  }
  /* Row position is not information; it costs a column of width. */
  table.rows td[data-m="0"], table.rows .idx{ display:none; }
  table.rows td[data-brk="1"]{ flex-basis:100%; margin-top:5px; }
  table.rows td[data-m="2"]{ font-size:11.5px; color:var(--ink-3); }
  table.rows td[data-m="2"] .pos,
  table.rows td[data-m="2"] .neg{ font-weight:500; }
}


/* ============================================================================
   Section windows

   Every table is a ten-row window. Six sections of forty rows each is a page
   nobody reaches the bottom of — and the partner slot above each section only
   gets seen if the section above it ends somewhere.
   ==========================================================================*/

/* 10 rows at ~45px, plus the sticky header. */
.tablewrap.scrolls{
  max-height:calc(33px + (10 * 45px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tablewrap.scrolls thead th{
  position:sticky; top:0; z-index:2;
  background:var(--bg);
  box-shadow:0 1px 0 var(--hair);
}
.tablewrap.scrolls::-webkit-scrollbar{ width:9px; }
.tablewrap.scrolls::-webkit-scrollbar-track{ background:transparent; }
.tablewrap.scrolls::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13); border-radius:5px;
}
.tablewrap.scrolls::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
.tablewrap.scrolls{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }

.tblfoot{
  font-size:11px; color:var(--ink-3); margin:var(--s2) 0 0;
}
.tblfoot:empty{ display:none; }

@media (max-width:720px){
  /* Two-line rows are taller, and ten of them overrun a phone screen. Cap to
     the viewport so the window is always visibly a window. */
  .tablewrap.scrolls{ max-height:min(calc(10 * 62px), 68vh); }
  .tablewrap.scrolls thead{ display:none; }
}

/* ============================================================================
   Hover: weight, not underline

   An underline on a dark background thickens the glyphs and costs legibility
   on exactly the elements that have to be readable to earn anything.
   ==========================================================================*/

a:hover{ text-decoration:none; font-weight:500; }
.ptext:hover .ptitle,
.ptext:hover .pcta{ font-weight:500; }
.ptext:hover .pbrand{ font-weight:700; }

/* The source toggle sits inside the search row, so it has to match the input
   height rather than the filter-bar height it was designed for. */
.finderrow #srcseg{ flex:0 0 auto; }
.finderrow #srcseg .seg{ padding-top:0; padding-bottom:0; height:100%; }
@media (max-width:600px){
  .finderrow #srcseg{ order:-1; flex:1 0 100%; }
  .finderrow #srcseg .seg{ flex:1; height:38px; }
}

/* ============================================================================
   Column priority

   Tables were overflowing sideways on ordinary laptops, and a horizontal
   scrollbar on a wide screen is a scrollbar nobody looks for. Columns carry a
   tier: 1 is the number the section is about and never drops; 3 goes first.
   ==========================================================================*/

/* Tier 3 is hidden at every width, deliberately. The content column is capped
   at --maxw (1180px) however wide the screen is, so a viewport-based breakpoint
   would let these columns back in on a 1512px laptop and overflow the same
   1180px column they were dropped from. Raise --maxw and they can come back. */
[data-pri="3"]{ display:none; }
@media (max-width:1120px){ [data-pri="2"]{ display:none; } }

/* Tighter gutters buy roughly one extra column before anything has to drop. */
:root{ --cell-x: 20px; }
@media (max-width:1240px){ :root{ --cell-x: 16px; } }

/* Long free-text cells truncate rather than force the table wider. Numbers,
   moves and results are never truncated — they are the content. */
td .dim, td .dimmer{ max-width:22ch; overflow:hidden; text-overflow:ellipsis;
  display:inline-block; vertical-align:bottom; }
th.num, td.num{ white-space:nowrap; }

/* ============================================================================
   Insights request form
   ==========================================================================*/

.askform{
  margin-top:var(--s4); max-width:560px;
  display:flex; flex-direction:column; gap:var(--s3);
}
.askrow{ display:flex; flex-direction:column; gap:6px; }
.asklabel{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.askform input[type="email"],
.askform textarea{
  width:100%; box-sizing:border-box;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--hair); border-radius:var(--r);
  padding:11px 13px; font:inherit; font-size:14px; line-height:1.5;
  transition:border-color .13s;
}
.askform textarea{ resize:vertical; min-height:76px; }
.askform input[type="email"]:focus,
.askform textarea:focus{ outline:none; border-color:var(--accent); }
.askform ::placeholder{ color:var(--ink-3); }

/* Bots fill every field they can find. This one is not for people. */
.askhp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.askfoot{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.askmsg{ font-size:12px; color:var(--ink-3); }
.askmsg.ok{ color:var(--pos); }
.askmsg.bad{ color:var(--neg); }

/* ============================================================================
   Finder and the insights form, side by side

   On The Board and Streaks and Badges the search area leaves a wide empty
   column to its right. The form lives there rather than pushing the data down
   the page. On Games the same form runs at the foot instead, because that tab
   is long and a form above the tables is in the way of the thing people came
   for.
   ==========================================================================*/



.askbox{ margin:0; padding-top:0; border-top:0; }
.askbox.compact{ /* frame comes from the shared panel rule above */ }
.askbox.compact .sectitle{ font-size:15px; }
.askbox.compact .secnote{ font-size:12px; margin-top:4px; }
.askbox.compact .askform{ margin-top:12px; gap:10px; max-width:none; }

.askopt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }

#bottomform{ margin:var(--s5) 0 var(--s6); }
#bottomform .askbox{
  border-top:1px solid var(--hair); padding-top:var(--s5);
}



/* Privacy page copy. The rest of the site is tables; this is the one place
   with running text, so it gets a measure that is actually readable. */
.prose{ max-width:64ch; margin-top:var(--s4); }
.prose h3{
  font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
  margin:var(--s5) 0 var(--s2);
}
.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--ink-2); font-size:14px; line-height:1.65; margin:0 0 var(--s3); }
.prose ul{ color:var(--ink-2); font-size:14px; line-height:1.65; padding-left:18px; margin:0 0 var(--s3); }
.prose li{ margin-bottom:8px; }
.prose b{ color:var(--ink); font-weight:600; }
footer a{ color:var(--accent); }



/* ============================================================================
   Partner text units

   `.punit` is a flex box that centres a banner image — right for a 970x90 gif,
   wrong for a block of text, which ended up sitting beside its own disclosure
   instead of beneath it. Text units therefore opt out of that layout entirely
   and lay themselves out as blocks.

   One disclosure, drawn by CSS from data-mark, so the unit can never end up
   with two competing labels again.
   ==========================================================================*/

.punit-text{
  display:block;                 /* not the flex centring used for banners */
  align-items:initial; justify-content:initial;
  min-height:0;                  /* text sets its own height */
  border:1px solid var(--hair);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  background:linear-gradient(100deg, var(--accent-dim), transparent 70%);
  transition:background .16s;
}
.rail .punit-text{ min-height:0; }

/* The banner-era corner label would overlap the copy, so it is suppressed and
   replaced by a block that reserves its own space. */
.punit-text::before{
  content:attr(data-mark);
  position:static; display:block;
  padding:11px 16px 0;
  font-size:9px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3);
}

.ptext{
  display:block; text-decoration:none; color:inherit;
  padding:7px 16px 15px;
}
.punit-text:hover{ background:linear-gradient(100deg, rgba(240,168,104,.2), transparent 70%); }

.pbrand{
  display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
}
.ptitle{
  display:block; font-size:16px; font-weight:600; letter-spacing:-.015em;
  line-height:1.28; margin-top:5px; color:var(--ink);
}
.pbody{
  display:block; font-size:12.5px; line-height:1.5; color:var(--ink-2);
  margin-top:5px; max-width:62ch;
}
.psource{
  display:block; font-size:10.5px; color:var(--ink-3); margin-top:6px;
}
.pcta{
  display:inline-block; font-size:12px; font-weight:600; color:var(--accent);
  margin-top:9px;
}
.parrow{ margin-left:5px; display:inline-block; transition:transform .16s; }
.punit-text:hover .parrow{ transform:translateX(3px); }

/* Wide screens: the copy would otherwise run to a 1200px line. Hold the text
   to a readable measure and let the unit breathe. */
@media (min-width:900px){
  .punit-text::before{ padding:13px 20px 0; }
  .ptext{ padding:7px 20px 17px; }
  .ptitle{ font-size:17px; }
}

/* Rails are ~160px wide skyscrapers; the same unit has to survive that. */
.rail .punit-text::before{ padding:10px 12px 0; font-size:8.5px; }
.rail .ptext{ padding:6px 12px 13px; }
.rail .ptitle{ font-size:14px; }
.rail .pbody{ font-size:11.5px; }

/* Phones */
@media (max-width:600px){
  .punit-text::before{ padding:10px 13px 0; }
  .ptext{ padding:6px 13px 13px; }
  .ptitle{ font-size:15px; line-height:1.3; }
  .pbody{ font-size:12px; }
  .pcta{ font-size:11.5px; }
}

/* Beside the finder the column is ~35% wide, so tighten the same unit again. */
.finderaside .punit-text .pbody{ font-size:12px; }


/* ============================================================================
   Finder and insights form as a matched pair

   Previously the left column carried a top margin the right one did not, so
   the two boxes started at different heights, and the search row was capped at
   520px inside a 65% column — which is where the dead gap between them came
   from. Both are now panels of equal width and equal height, starting and
   ending on the same lines.
   ==========================================================================*/

.findersplit{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s4);
  align-items:stretch;          /* equal heights, not just equal tops */
  margin-top:var(--s4);         /* on the grid, so both columns share it */
}
.findersplit:has(> .finderaside:not(.hidden)){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

/* Both panels: same frame, same padding, same radius. */
.finder,
.finderaside > .askbox{
  min-width:0;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:18px 18px 16px;
  height:100%;
}

/* Alone on the Games tab the panel would run the full page width and stretch
   the search bar with it, so it keeps a sensible measure there. Beside the
   form it fills its half. */
.finder{ max-width:640px; display:flex; flex-direction:column; }
.findersplit:has(> .finderaside:not(.hidden)) .finder{ max-width:none; }

.finderaside{ min-width:0; }
.finderaside > .askbox{ margin:0; border-top:1px solid var(--hair); }

/* The status line sits at the foot of its panel rather than leaving a gap
   under the filters. */
.finder .note{ margin-top:auto; padding-top:13px; }

/* :has() is unsupported on older Safari and Firefox. There the layout stays a
   single column — the form sits under the finder, which is the phone layout
   and perfectly usable. */
@supports not selector(:has(*)){
  .findersplit{ grid-template-columns:minmax(0,1fr); }
  .finder{ max-width:640px; }
}

/* Stacked, not side by side, once there is no room for two readable columns. */
@media (max-width:900px){
  .findersplit,
  .findersplit:has(> .finderaside:not(.hidden)){ grid-template-columns:minmax(0,1fr); }
  .finder{ max-width:none; }
  .finder,
  .finderaside > .askbox{ height:auto; }
}

@media (max-width:600px){
  .finder,
  .finderaside > .askbox{ padding:15px 15px 14px; }
  .finderrow{ flex-wrap:wrap; }
  .finderrow input[type=text]{ flex:1 1 100%; order:2; }
  .finderrow #go{ order:3; flex:1 1 auto; }
  .finderrow #srcseg{ order:1; flex:1 1 100%; }
}

/* ============================================================================
   The search row is the primary action

   Both panels are the same width and height, but they are not the same
   importance: everything on the page depends on someone completing the search.
   The controls in the finder are therefore a size up from the form's, so the
   pair reads as primary and secondary rather than as two equal choices.
   ==========================================================================*/

.finder .finderrow input[type=text],
.finder .finderrow button.primary,
.finder .finderrow .segmented{ height:52px; }
.finder .finderrow input[type=text]{ font-size:16.5px; padding:0 17px; }
.finder .finderrow button.primary{ font-size:15px; font-weight:600; padding:0 28px; }
.finder .finderrow .seg{ font-size:14px; padding:0 15px; }

/* The filter row sits just under it, so it steps down rather than matching. */
.finder .filterbar .seg{ height:38px; font-size:13px; }

/* The form's fields stay smaller — that difference is the hierarchy. */
.finderaside .askform input[type="email"],
.finderaside .askform textarea{ font-size:13.5px; }
.finderaside .askform button.primary{ height:40px; font-size:13.5px; padding:0 20px; }

@media (max-width:600px){
  .finder .finderrow input[type=text],
  .finder .finderrow button.primary,
  .finder .finderrow .segmented{ height:48px; }
  .finder .finderrow input[type=text]{ font-size:16px; }  /* 16px stops iOS zooming on focus */
}

/* ============================================================================
   Portrait phones

   The two-line collapse existed but only applied to Games; the Streaks,
   Sessions and Rivalries tables kept eleven columns and spilled sideways. And
   because the collapse hides thead, there was no way to sort at all on a
   phone — headers are the only sort control on desktop.
   ==========================================================================*/

/* Sort control, shown only where the headers are hidden. */
.sortpick{ display:none; }

@media (max-width:720px){
  .sortpick{
    display:flex; align-items:center; gap:8px;
    margin:0 0 var(--s3);
  }
  .sortpick label{
    font-size:10px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-3); font-weight:600;
  }
  .sortpick select{
    flex:1 1 auto; min-width:0; height:38px;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--hair); border-radius:var(--r);
    padding:0 10px; font:inherit; font-size:14px;
  }
  .sortpick .sortdir{
    flex:none; width:38px; height:38px; line-height:1;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--hair); border-radius:var(--r);
    font-size:15px; cursor:pointer;
  }

  /* Every table collapses, not just the ones on the Games tab. */
  table.rows{ display:block; }
  table.rows thead{ display:none; }
  table.rows tbody{ display:block; }
  table.rows tbody tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px;
    padding:12px 0; border-bottom:1px solid var(--hair-2);
  }
  table.rows tbody tr:last-child{ border-bottom:0; }
  table.rows tbody td{
    display:inline; border:0; padding:0; text-align:left;
    white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  }
  table.rows td[data-m="0"], table.rows .idx{ display:none; }
  table.rows td[data-brk="1"]{ flex-basis:100%; margin-top:4px; }
  table.rows td[data-m="2"]{ font-size:11.5px; color:var(--ink-3); }
  /* A cell that ends up empty must not leave a gap in the row. */
  table.rows tbody td:empty{ display:none; }

  /* Nothing inside a row may force the page wider than the screen. */
  .tablewrap{ overflow-x:visible; max-width:100%; }
  .tblfoot{ font-size:11px; }
}

/* Very narrow phones: let long opponent names wrap rather than push the row. */
@media (max-width:400px){
  table.rows tbody td{ white-space:normal; }
  table.rows tbody tr{ gap:0 7px; }
}

/* The period control sits with the other filters. */
#periodsel{
  height:38px; background:var(--surface); color:var(--ink);
  border:1px solid var(--hair); border-radius:var(--r);
  padding:0 11px; font:inherit; font-size:13px; cursor:pointer;
}
#periodsel:focus{ outline:none; border-color:var(--accent); }
@media (max-width:600px){
  #periodsel{ height:36px; font-size:16px; }
}

/* The filter rule for the current view, under its controls. */
.secrule{
  font-size:11.5px; color:var(--ink-3); margin:var(--s2) 0 0;
  letter-spacing:.01em;
}
.secrule:empty{ display:none; }

/* ============================================================================
   Drill-downs on Streaks and Badges

   An inline drawer, not a modal: no fixed positioning, no z-index, no scroll
   lock, no focus trap. That list is exactly what breaks on a phone, and none
   of it is needed to show ten rows under the number they came from.
   ==========================================================================*/

.drilllink{
  display:inline-block; background:none; border:0; padding:0;
  color:var(--accent); font:inherit; font-size:11.5px; cursor:pointer;
  text-align:left;
}
.drilllink:hover{ font-weight:500; }
.drilllink.open::after{ content:' ×'; }

.badge .drilllink{ margin-top:6px; font-size:10.5px; }

.drillrow > td{ padding:0 !important; }

.drillpanel{
  margin:2px 0 10px; padding:11px 13px;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r);
}
.drillcap{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 8px;
}
.drilllist{ list-style:none; margin:0; padding:0; }
.drilllist li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px;
  padding:6px 0; border-bottom:1px solid var(--hair-2); font-size:12.5px;
}
.drilllist li:last-child{ border-bottom:0; }
.drilllist a{ color:var(--accent); }
.drilllist .dr{ font-size:11.5px; color:var(--ink-3); }

/* The badge grid is a fixed-width grid; a drawer inside one cell must not
   stretch it, so it spans the full row instead. */
.badge{ position:relative; }
.badge .drillpanel{ margin-top:8px; }

@media (max-width:720px){
  .drillpanel{ padding:10px 11px; }
  .drilllist li{ font-size:12px; gap:0 8px; }
  .drilllist li > *{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  /* Inside a collapsed table the drawer row is a flex child, so it has to be
     told to take the whole width rather than sit beside the cells above it. */
  table.rows tbody tr.drillrow{
    display:block; padding:0; border-bottom:0;
  }
  table.rows tbody tr.drillrow > td{ display:block; width:100%; }
}

/* Ten rows, then the rest on request. */
.drillmorebtn{
  display:block; margin-top:9px; background:none; border:0; padding:0;
  color:var(--accent); font:inherit; font-size:11.5px; cursor:pointer;
}
.drillmorebtn:hover{ font-weight:500; }
.drilllist li.hidden{ display:none; }

/* The view link is the only cell that is a control rather than a fact, so on a
   phone it needs a tap target rather than being 11px of grey text at the end
   of a line. Pushed to the right so it sits in the same place on every row. */
@media (max-width:720px){
  table.rows td[data-m="2"] .viewlink,
  .drilllist .viewlink{
    margin-left:auto;
    padding:3px 9px;
    border:1px solid var(--hair);
    border-radius:var(--r);
    color:var(--accent);
    font-size:11.5px;
    line-height:1.5;
  }
  table.rows tbody tr{ position:relative; }
}

/* Only visible while a large archive is loading. */
.loadnote{
  margin:8px 0 0; font-size:12px; line-height:1.5;
  color:var(--ink-3); max-width:56ch;
}
@media (max-width:600px){ .loadnote{ font-size:11.5px; } }

/* Offered only when results came from the session copy. */
.refreshlink{
  background:none; border:0; padding:0; margin:0;
  color:var(--accent); font:inherit; font-size:inherit; cursor:pointer;
}
.refreshlink:hover{ font-weight:500; }