/* The house token set, the same one the main site and the holding page are
   built on: a depth ramp rather than flat greys, translucent surfaces over it,
   and one teal accent. Nothing here invents a colour. */
:root {
  --d0: #05080e;
  --d1: #070a10;
  --d2: #0a0f18;
  --d3: #0d1220;

  --surface-1: rgba(255,255,255,.026);
  --surface-2: rgba(255,255,255,.045);
  --surface-3: rgba(255,255,255,.07);

  --line-1: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.1);
  --line-3: #1a2a3e;

  --text:   #e4edf7;
  --text-2: rgba(228,237,247,.62);
  --text-3: rgba(228,237,247,.38);

  --teal:      #4d8dff;
  --teal-2:    #bcd5ff;
  --teal-dim:  rgba(77, 141, 255,.1);
  --teal-glow: rgba(77, 141, 255,.28);
  --green:     #23a559;
  --yellow:    #faa61a;
  --red:       #ed4245;
  --blue:      #4d9fff;

  --grad-brand: linear-gradient(135deg, #4d8dff 0%, #0079e4 100%);

  --r-sm: 6px;
  --r:    10px;
  --r-md: 14px;
  --r-full: 999px;

  --topbar-h: 60px;

  --ease: cubic-bezier(.16,1,.3,1);
  --fast: .16s ease;
  --norm: .28s var(--ease);

  --shadow-1: 0 2px 12px rgba(0,0,0,.35);
  --shadow-2: 0 12px 40px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* no scroll-behavior: smooth. it makes every scroll measurement race the
   animation, and the rules already had that written down before this page
   went and set it anyway. */
html { background: var(--d1); }

/* The page is a column at least as tall as the window, and the footer takes
   whatever is left over. Without this the footer sits wherever the content
   happens to end: on Players it floated 456px up the screen with nothing under
   it, which reads as the page having failed to load the rest of itself. */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--d1);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* the shell is what grows, so the footer is pushed to the bottom rather than
   being pulled there by a margin nothing else respects */
.shell { flex: 1 0 auto; }
.foot { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - 48px, 1180px); margin: 0 auto; }

/* ── topbar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: rgba(5,8,14,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-1);
}
.topbar .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* the same emblem the dashboard uses, at the same size, so the two surfaces
   are recognisably one product */
.brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.brand-name { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: #fff; }
.brand-sub {
  font-size: .8rem; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  padding-left: 11px; border-left: 1px solid var(--line-2);
}

/* ── buttons and fields, the house pair ─────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.btn-primary { background: var(--teal); color: #040c1a; }
.btn-primary:hover { background: var(--teal-2); }
.btn-ghost { background: var(--surface-1); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { background: var(--surface-1); border-color: var(--line-2); }

.field {
  height: 36px; padding: 0 12px;
  background: var(--d2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: var(--r-sm); font-size: .875rem;
  transition: border-color var(--fast), background var(--fast);
}
.field:hover { border-color: var(--line-3); }
.field:focus { outline: none; border-color: var(--teal); background: var(--d0); }
select.field { cursor: pointer; padding-right: 28px; }
button.field { cursor: pointer; }
button.field:hover { border-color: var(--teal); }

/* the head to head search is the primary control in its row, so it takes the
   space rather than sitting at its default input width */
#h2h-q { flex: 1 1 260px; min-width: 0; }

/* which league you are looking at. sits beside the brand rather than in the
   nav, because it changes what every page below means. */
.league { flex: 0 0 auto; display: flex; align-items: center; }
.league-name {
  font-size: .8125rem; color: var(--text-2); padding: 0 10px;
  border-left: 1px solid var(--line-2); margin-left: 2px;
}
.league-pick { height: 32px; font-size: .8125rem; max-width: 220px; }

.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;
}

.search { display: flex; gap: 8px; margin-left: auto; flex: 0 1 400px; }
.search .field { flex: 1; min-width: 0; }

/* ── the viewer, top right ──────────────────────────────────────────────
   Only two margin-left:auto elements would split the free space between
   them, so the search keeps the auto and this sits after it. */
.me { position: relative; flex: 0 0 auto; }
.me-btn {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  background: var(--d2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: .875rem; cursor: pointer;
  transition: border-color var(--fast);
}
.me-btn:hover { border-color: var(--line-3); }
.me-btn img { border-radius: 50%; display: block; }
.me-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--line-3); display: block; }
.me-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* an author display: flex beats the browser's own [hidden] rule whatever the
   specificity, so el.hidden did nothing and the menu was permanently open */
.me-menu[hidden] { display: none; }
.me-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 170px; display: flex; flex-direction: column;
  background: var(--d1); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.me-menu a, .me-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; text-decoration: none;
}
.me-menu a:hover, .me-menu button:hover { background: var(--d2); }

.btn-quiet {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  background: var(--d2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--text); font-size: .875rem; text-decoration: none;
}
.btn-quiet:hover { border-color: var(--teal); }

/* the three identity cards on the profile page */
/* align-items: start, or the grid stretches every card to match the tallest.
   Only the Roblox card carries a note, so the other two were 135px tall around
   44px of content and the row read as two empty boxes. */
/* the margin matters: on your own profile a heading separated these from
   whatever came next, and on somebody else's the stats sit straight underneath
   and were touching. Adjacent margins collapse, so the heading's 32px still
   wins where there is one. */
.idcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; margin-bottom: 20px; }
.idcard {
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 14px;
}
.idcard-head { display: flex; align-items: center; gap: 12px; }
.idcard-head img { border-radius: 50%; display: block; flex: 0 0 auto; }
/* a clan picture is a badge, not a face, so it keeps its corners */
.idcard-head img.idcard-clan { border-radius: 11px; object-fit: cover; }
.idcard-blank {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--d2); border: 1px solid var(--line-2); display: block;
}
.idcard-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.idcard-head b { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.idcard-head span, .idcard-head a { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idcard .note { margin: 10px 0 0; }

@media (max-width: 640px) {
  /* the search and the viewer both want the right edge, so on a phone the
     search takes the row and the viewer wraps to the left of it */
  .me-name { display: none; }
  .me-btn { padding: 0 6px; }

  /* and once it is on the left, anchoring the menu to the button's right edge
     puts a 170px panel at -114. measured, not guessed. */
  .me-menu { right: auto; left: 0; }
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.shell { display: flex; gap: 40px; align-items: flex-start; padding: 30px 0 64px; }

.nav { display: flex; flex-direction: column; gap: 2px; width: 168px; flex: 0 0 168px; position: sticky; top: calc(var(--topbar-h) + 22px); }
.nav a {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-2);
  border: 1px solid transparent;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.nav a:hover { background: var(--surface-1); color: var(--text); }
.nav a.on { background: var(--teal-dim); color: var(--teal); border-color: rgba(77, 141, 255,.16); }

.view { flex: 1 1 auto; min-width: 0; }

/* ── headings ───────────────────────────────────────────────────────────── */

.head { margin-bottom: 22px; }
.head h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.25; }
.head p { font-size: .9rem; color: var(--text-2); margin-top: 6px; max-width: 62ch; }

h2 {
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin: 32px 0 12px;
}
h2:first-child { margin-top: 0; }
.muted { color: var(--text-2); }

/* home carries one soft brand glow, the same one the holding page uses */
.glow { position: relative; }
.glow::before {
  content: ''; position: absolute; inset: -140px 0 auto 0; height: 340px;
  background: radial-gradient(ellipse 50% 100% at 30% 0%, rgba(0,121,228,.14), transparent 70%);
  pointer-events: none;
}
.glow > * { position: relative; }

/* ── cards and stats ────────────────────────────────────────────────────── */

.card {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r); padding: 18px;
  transition: background var(--fast), border-color var(--fast);
}
/* 148px fit six across, and a profile has seven stats, so the seventh sat
   alone on a second row. 118 fits all seven and still wraps sensibly narrower. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.stat { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r); padding: 16px 18px; }
.stat:hover { background: var(--surface-2); border-color: var(--line-2); }
.stat b { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.stat span { font-size: .78rem; color: var(--text-3); }
.stat.accent b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── filters ────────────────────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filters .spacer { margin-left: auto; }
.count { font-size: .8rem; color: var(--text-3); }

/* ── tables ─────────────────────────────────────────────────────────────── */

/* a wide table scrolls inside its own box. the page never scrolls sideways. */
.tablewrap {
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r); overflow-x: auto; max-width: 100%;
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 620px; }
th {
  text-align: left; font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  padding: 13px 16px; border-bottom: 1px solid var(--line-1); white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--line-1); color: var(--text-2); }
td:first-child, td.strong { color: var(--text); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--fast); }
tbody tr:hover { background: var(--surface-1); }
td.right, th.right { text-align: right; }
.id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  color: var(--teal); font-weight: 600;
}
.empty { padding: 44px 16px; text-align: center; color: var(--text-3); font-size: .875rem; }

/* ── pills ──────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border: 1px solid var(--line-1); border-radius: var(--r-full);
  background: var(--surface-1); color: var(--text-2);
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.open      { color: #7aa2ff; border-color: rgba(122,162,255,.28); }
.pill.full      { color: var(--blue); border-color: rgba(77,159,255,.28); }
.pill.live      { color: var(--green); border-color: rgba(35,165,89,.35); background: rgba(35,165,89,.07); }
.pill.reporting { color: var(--yellow); border-color: rgba(250,166,26,.3); }
.pill.completed { color: var(--teal); border-color: rgba(77, 141, 255,.24); background: var(--teal-dim); }
.pill.cancelled, .pill.abandoned { color: var(--text-3); }

.unlinked { color: var(--text-3); }
.tick { color: var(--green); font-size: .7rem; }
/* name and tick are one thing: the tick belongs to the name, not to the row.
   Without this the flex row put it halfway across the card. */
.who-id { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.who-id a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── match and player detail ────────────────────────────────────────────── */

.detail { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px; align-items: start; }
.rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--topbar-h) + 22px); }
.kv { display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; padding: 6px 0; border-bottom: 1px solid var(--line-1); }
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: var(--text-3); }

.team {
  border: 1px solid var(--line-1); border-radius: var(--r); padding: 16px;
  margin-bottom: 12px; background: var(--surface-1);
}
.team.won { border-color: rgba(35,165,89,.35); background: rgba(35,165,89,.05); }
.team h3 {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 10px; display: flex; justify-content: space-between;
}
.team.won h3 { color: var(--green); }
.who { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9rem; }
.who + .who { border-top: 1px solid var(--line-1); }
.who .meta { color: var(--text-3); font-size: .8rem; }

.shots { display: flex; flex-wrap: wrap; gap: 12px; }
.shots a { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-1); transition: border-color var(--fast); }
.shots a:hover { border-color: var(--teal); }
.shots img { max-width: 100%; width: 260px; display: block; }

.timeline { display: flex; flex-direction: column; }
.timeline .row { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; padding: 5px 0; }
.timeline .row + .row { border-top: 1px solid var(--line-1); }
.timeline .kind { color: var(--text); font-weight: 500; }
.timeline .at { color: var(--text-3); }

.pager { display: flex; gap: 8px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.pager .count { margin: 0 4px; }

/* the page number between the arrows is typed into, because a board of forty
   pages is not worth forty clicks */
.pager-jump {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--text-3); margin: 0 4px;
}
.pager-input {
  width: 4.5ch; height: 36px; padding: 0 6px;
  text-align: center; font-size: .875rem; font-weight: 600;
  -moz-appearance: textfield;
}
/* the spinners cost more width than they are worth at this size */
.pager-input::-webkit-outer-spin-button,
.pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* the first and last arrows are square rather than pill shaped */
.pager .btn[data-page="0"]:first-child,
.pager .btn:last-child { padding: 0 12px; font-size: 1rem; line-height: 1; }

.note {
  margin-top: 18px; padding: 14px 16px;
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-left: 2px solid var(--teal); border-radius: var(--r-sm);
  color: var(--text-2); font-size: .82rem;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line-1); background: var(--d0); padding: 22px 0; }
.foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot, .foot a { color: var(--text-3); font-size: .8rem; }
.foot a:hover { color: var(--text-2); }
.foot-links { display: flex; gap: 20px; }

@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0,1fr); }
  .rail { position: static; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; gap: 20px; padding-top: 22px; }
  .nav { flex-direction: row; flex-wrap: wrap; width: auto; flex: none; position: static; }
  .nav a { height: 32px; }
  /* a stretched flex item will not shrink under its own min-content, and the
     table sets a min-width, so the column is given a width to resolve against.
     without this the whole page scrolls sideways on a phone rather than the
     table scrolling inside its box. */
  .view { width: 100%; }
}
@media (max-width: 620px) {
  .wrap { width: min(100% - 32px, 1180px); }
  .topbar { height: auto; }
  .topbar .wrap { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .search { margin-left: 0; flex-basis: 100%; }
  .brand-sub { display: none; }
  .head h1 { font-size: 1.35rem; }
}

.sub-line { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.sub-line a:hover { color: var(--teal); }
.vs { color: var(--text-3); font-weight: 500; padding: 0 2px; }

/* ── the match sheet ──────────────────────────────────────────────────
   A match opens over the list it was clicked in rather than replacing it.
   Nothing here invents a colour: the same depth ramp, the same line and text
   ramps, the same radii as every other surface. */

body.locked { overflow: hidden; }

tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--surface-2); }

#overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 5, 9, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(24px, 4vh) 16px 40px;
  overflow-y: auto;
  animation: sheet-in .16s var(--ease);
}

@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }

#overlay .sheet {
  width: min(860px, 100%);
  background: var(--d2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  overflow: hidden;
}
#overlay .sheet.loading { padding: 28px; }

#overlay header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
}
#overlay header h2 { margin: 0 0 4px; font-size: 1.15rem; }
#overlay header p { margin: 0; font-size: .85rem; color: var(--text-2); }
.sheet-head-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

#overlay .x {
  width: 30px; height: 30px; line-height: 1; font-size: 20px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface-1); color: var(--text-2); cursor: pointer;
}
#overlay .x:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-3); }

.verdict {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-1);
  background: rgba(35, 165, 89, .07);
}
.verdict b { color: var(--green); font-size: 1rem; }
.verdict span { color: var(--text-2); font-variant-numeric: tabular-nums; }

.sheet-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  gap: 20px; padding: 18px 20px;
  /* without this the shorter column is stretched to the taller one, and a
     four player match leaves a screen of nothing under the teams */
  align-items: start;
}
/* a long match has a long timeline, and it is the least important thing here */
.sheet-rail .timeline { max-height: 320px; overflow-y: auto; }
.sheet-rail { display: flex; flex-direction: column; gap: 12px; }
.sides { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.side {
  border: 1px solid var(--line-1); border-radius: var(--r);
  background: var(--surface-1); padding: 12px 14px;
}
.side.won { border-color: rgba(35, 165, 89, .32); background: rgba(35, 165, 89, .05); }
.side h3 {
  margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); display: flex; align-items: center; gap: 8px;
}
.side.won h3 { color: var(--green); }

.who-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 88px;
  gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: .9rem;
}
.who-row + .who-row { border-top: 1px solid var(--line-1); }
.who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-row.empty .who-name { color: var(--text-3); font-style: italic; }
.who-rank { color: var(--text-3); font-size: .8rem; }
.who-kills { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.who-kills i { color: var(--text-3); font-style: normal; font-size: .75rem; margin-left: 4px; }

.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); color: var(--text-3);
}
.tag + .tag { margin-left: 4px; }
.tag.mvp { color: var(--yellow); border-color: rgba(250, 166, 26, .35); background: rgba(250, 166, 26, .08); }
.tag.win { color: var(--green); border-color: rgba(35, 165, 89, .35); }

.proof { padding: 0 20px 18px; }
.proof h3 {
  margin: 0 0 10px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3);
}
/* nothing to show is a line, not a panel. the .note block style elsewhere is
   for something worth reading. */
.proof.empty { border-top: 1px solid var(--line-1); padding-top: 12px; }
.proof.empty .note {
  border: 0; background: none; padding: 0; margin: 0;
  font-size: .82rem; color: var(--text-3);
}

#overlay footer {
  padding: 14px 20px; border-top: 1px solid var(--line-1);
  background: var(--surface-1); display: flex; justify-content: flex-end;
}

@media (max-width: 720px) {
  #overlay { padding: 0; }
  #overlay .sheet { border-radius: 0; border: 0; min-height: 100%; }
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  /* the teams are what the match is, so they stay first. the rail was above
     them and pushed them off the bottom of a phone. */
  .sheet-rail .timeline { max-height: 220px; }
  .who-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .who-rank, .who-kills { grid-column: 1 / -1; text-align: left; }
}

/* the bracket, round by round. Nothing here invents a colour: it is the same
   token set the rest of this page is built on. */
.round { margin: 0 0 22px; }
.round h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 8px;
}
.ties { list-style: none; margin: 0; padding: 0; }
.tie {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line-1);
}
.tie:last-child { border-bottom: none; }
.tie-score { font-variant-numeric: tabular-nums; color: var(--text-3); min-width: 42px; }
.tie-sides { flex: 1 1 auto; min-width: 0; }
.tie-note { margin-left: auto; font-size: 13px; }
.tie-bye .tie-note { margin-left: 0; }
.gamelink { font-variant-numeric: tabular-nums; margin-left: 4px; }
.warn { color: var(--yellow); }


/* ── touch ──────────────────────────────────────────────────────────────── */
/*
   A row link was 15px tall and a footer link 20px, which is under half what a
   finger actually lands on.
   
   Both halves of the query matter. The pointer test is the true one and catches
   a tablet at any width; the width test is the one a desktop browser can be
   made to satisfy, so this is checkable rather than taken on trust. A narrow
   window on a desktop getting roomier rows is a fair price for that.
*/
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .foot-links a,
  .nav a,
  .brand,
  .who a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /*
     Padding the cell alone was not enough. It made the row 43px and left the
     link inside it 15px, so a thumb landing a few pixels high or low hit the
     row and nothing happened.

     The link grows instead, and negative margin gives the height back to the
     line so the row stays the height it was. inline-block rather than block
     because a verified player's name is followed by a tick, and a block would
     drop that onto its own line. `only-of-type` keeps this off the one cell
     that holds a comma separated list of entrants, which would otherwise
     stack.
  */
  tbody td { padding-top: 14px; padding-bottom: 14px; }
  tbody td > a:only-of-type {
    display: inline-block;
    padding: 14px 0;
    margin: -14px 0;
  }
  .btn, .field, .pager-input { min-height: 44px; }
  select.field { height: 44px; }

  /* the one control that dismisses the match sheet, at 30 square */
  #overlay .x { width: 44px; height: 44px; }

  /* a roster line wraps to 85px on a phone and held a 16px name inside it, so
     the link takes the room that is already there */
  .who-row .who-name a { display: inline-block; padding: 14px 0; margin: -14px 0; }

  /* a key and value row is 35px, so this fills it rather than spilling over
     the row above and below it */
  .kv a { display: inline-block; padding: 9px 0; margin: -9px 0; }

  /* the games under a bracket tie sit several to a line in a 21px strip, so
     these grow the strip instead of reaching into the ties either side of it.
     the sideways padding matters as much as the height: without it two game
     links are close enough that a thumb opens the wrong one. */
  .tie-note a { display: inline-block; padding: 14px 10px; }

  /*
     What is deliberately left alone: a name inside a sentence, such as the
     host in "hosted by Ava", and the two clan names inside a match row. The
     first cannot grow without pulling the line apart, and the second sits in a
     row that already opens the match, so a bigger target there would take taps
     meant for the row and send them somewhere else.
  */
}

/* A clan's picture. Set with /clan pfp, stored through the image vault so the
   url can be re-signed, and drawn from the tag when a clan has not set one. */
.clan-head { display: flex; align-items: flex-start; gap: 16px; }
.clan-head > div { min-width: 0; flex: 1; }
.clan-face {
  width: 72px; height: 72px; flex: none; border-radius: 16px;
  object-fit: cover; border: 1px solid var(--line-1); background: var(--bg-2);
}
.clan-face-tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; letter-spacing: .04em;
  color: var(--text-3); text-transform: uppercase;
}
@media (max-width: 640px) {
  .clan-head { gap: 12px; }
  .clan-face { width: 56px; height: 56px; border-radius: 14px; }
}

/* ── select ──────────────────────────────────────────────────────────────
   Every dropdown was a bare <select>, so opening one handed the page to the
   operating system: a white list with a blue highlight in the middle of a dark
   site. The native element is still there and still holds the value; this is
   what you see instead of it. */
.sel { position: relative; display: inline-block; min-width: 0; }
.sel > select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; left: 0; top: 0; margin: 0;
}
.sel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--surface-1); border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--text-1);
  font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.sel-btn:hover { background: var(--surface-2); border-color: var(--line-3, var(--line-2)); }
.sel-btn:focus-visible { outline: 2px solid var(--brand, #4d8dff); outline-offset: 1px; }
.sel-btn:disabled { opacity: .55; cursor: default; }
.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-3); transition: transform .14s ease; }
.sel.open .sel-btn svg { transform: rotate(180deg); }
.sel.open .sel-btn { border-color: var(--brand, #4d8dff); }

.sel-list {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 100%; max-height: 300px; overflow-y: auto;
  background: var(--d2, #12161d); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.sel.open .sel-list { display: block; }
.sel-opt {
  padding: 8px 10px; border-radius: var(--r); cursor: pointer;
  font-size: .875rem; color: var(--text-2); white-space: nowrap;
}
.sel-opt:hover { background: var(--surface-2); color: var(--text-1); }
/* the chosen one is marked by the brand, not by the operating system's blue */
.sel-opt.on { color: var(--text-1); background: color-mix(in srgb, var(--brand, #4d8dff) 16%, transparent); }

/* a filter row sizes its controls, so the wrapper has to pass that through */
.filters .sel { flex: 0 1 auto; }
.filters .sel .sel-btn { min-width: 150px; }
.sel-league .sel-btn { height: 34px; font-size: .8125rem; }