/* Shared styles for index.html, cfb-h2h.html and cbb-h2h.html.
   "Broadcast graphic" look: slanted TV score-bug blocks, Chakra Petch + Manrope.
   data-sport="cfb|cbb" sets the accent (amber / teal): on <body> for the page,
   and on each recent-lookup row for its own sport. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #161b26;
  --muted: #4a5260;
  --loser: #6b7280;
  --line: #d9dce1;
  --line-soft: #eceef1;
  --panel: #ffffff;
  --panel-2: #e6e8ec;
  --rule: #161b26;
  /* Section-heading bars and the active tab: dark on light, light on dark. */
  --bar: #161b26;
  --bar-fg: #ffffff;
  --danger: #b42318;
  --accent: #f2a900;
  --accent-soft: #fdeec2;
  --accent-fg: #161b26;
  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
[data-sport="cfb"] { --accent: #f2a900; --accent-soft: #fdeec2; }
[data-sport="cbb"] { --accent: #2dd4bf; --accent-soft: #ccf5ef; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #e8eaee;
    --muted: #9aa3b2;
    --loser: #7d8696;
    --line: #2a313c;
    --line-soft: #222a35;
    --panel: #151b24;
    --panel-2: #1f2630;
    --rule: #e6e8ec;
    --bar: #e6e8ec;
    --bar-fg: #0d1117;
    --danger: #ff8a80;
    --accent-soft: #3a2f10;
  }
  [data-sport="cfb"] { --accent-soft: #3a2f10; }
  [data-sport="cbb"] { --accent-soft: #0f3a35; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
}
a { color: var(--fg); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
button { font-family: var(--body); cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
/* clip-path would cut the focus ring off the slanted controls, so drop it while focused. */
.slant { clip-path: var(--slant); }
.slant:focus-visible { clip-path: none; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Header ---- */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-top: 26px;
}
/* The rule under the header, as a last full-width row so it spans the content, not the padding. */
.site-head::after { content: ""; order: 99; flex-basis: 100%; height: 3px; background: var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.brand-tag { font: 700 22px var(--display); padding: 4px 16px; background: var(--accent); color: var(--accent-fg); }
.brand-name { font: 700 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.tabs { display: flex; gap: 4px; }
.tabs a {
  font: 700 14px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  color: var(--fg);
  background: var(--panel-2);
}
.tabs a:hover { background: var(--line); }
.tabs a[aria-current="page"] { background: var(--bar); color: var(--bar-fg); }
.modes { margin-left: auto; display: flex; gap: 16px; }
.mode-btn {
  font: 700 14px var(--body);
  padding: 10px 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
}
.mode-btn:hover { color: var(--fg); }
.mode-btn[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }

main.wrap { display: flex; flex-direction: column; gap: 34px; padding-top: 34px; }

/* ---- Page heading (shrinks to screen-reader only once a result is showing) ---- */
.hero h1 { margin: 0 0 6px; font: 700 clamp(34px, 6vw, 52px) / 1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hero p { margin: 0; color: var(--muted); font-size: 18px; }
.has-result .hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Picker ---- */
.picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.field { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.field label { font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.input-box { position: relative; }
.input-box input, .input-box select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font: 700 18px var(--body);
  color: var(--fg);
  background: var(--panel);
  border: 2px solid var(--line);
  border-left: 8px solid var(--team, var(--line));
  border-radius: 0;
  outline: none;
}
.input-box input:focus, .input-box select:focus { border-color: var(--fg); border-left-color: var(--team, var(--fg)); }
.input-wrap.has-logo input { padding-left: 50px; }
.input-logo { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: none; }
.input-wrap.has-logo .input-logo { display: block; }
button.swap {
  flex: none;
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: var(--fg);
  background: var(--panel);
  border: 2px solid var(--line);
}
button.swap:hover { border-color: var(--fg); }
#go {
  height: 50px;
  padding: 0 34px;
  font: 700 16px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
}
#go:hover:not(:disabled) { filter: brightness(1.06); }

/* ---- Status and suggestions ---- */
#status { margin: -18px 0 0; color: var(--muted); }
#status:empty { display: none; }
#status.error { color: var(--danger); font-weight: 600; }
#suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -24px; }
#suggest:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 20px;
  font: 700 14px var(--body);
  color: var(--fg);
  text-decoration: none;
  background: var(--panel-2);
  border: 0;
}
.chip:hover { background: var(--accent); color: var(--accent-fg); }

/* ---- Recent lookups: a sport band over two team blocks ---- */
.recents { display: flex; flex-direction: column; gap: 14px; }
.recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.recent-list:empty { display: none; }
.recent { display: flex; flex-direction: column; min-width: 0; color: var(--fg); text-decoration: none; background: var(--panel); border: 1px solid var(--line); }
.recent:hover { border-color: var(--fg); }
.recent-band {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 10px;
  font: 700 11px var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-fg);
}
.recent-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row { display: flex; align-items: stretch; height: 50px; }
.recent-team { flex: 0 0 84px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.recent-team.t1 { background: var(--c1); color: var(--f1); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.recent-team.t2 { background: var(--c2); color: var(--f2); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); }
.recent-team b { font: 700 20px var(--display); font-variant-numeric: tabular-nums; }
.recent-vs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
  font: 700 15px var(--display);
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}
.recent .logo.disc { width: 26px; height: 26px; padding: 3px; }
.recent .logo.disc .initials { font-size: 9px; }
.recent-empty { margin: 0; padding: 14px; font-size: 15px; color: var(--muted); border: 1px dashed var(--line); }

#result { display: flex; flex-direction: column; gap: 34px; }
#result:empty { display: none; }
.matchup { display: flex; flex-direction: column; gap: 34px; }

/* ---- Section heading: a caption bar with an accent notch ---- */
.cap { margin: 0; display: inline-flex; align-self: flex-start; }
.cap::before { content: ""; width: 16px; background: var(--accent); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cap span {
  font: 700 16px var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 26px 8px 16px;
  background: var(--bar);
  color: var(--bar-fg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- Score bug ----
   Team blocks use --c1/--c2 (team color) with --f1/--f2 (readable text on it).
   Marks on the page background (bars, card stripes) use --mark1/--mark2, which
   switch to a lighter variant in dark mode so navy-type colors don't vanish. */
.matchup { --mark1: var(--m1); --mark2: var(--m2); }
@media (prefers-color-scheme: dark) {
  .matchup { --mark1: var(--m1d); --mark2: var(--m2d); }
}
.bug { display: flex; flex-direction: column; }
.bug-row { display: flex; align-items: stretch; min-height: 150px; }
.bug-team {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.bug-team.t1 { background: var(--c1); color: var(--f1); padding: 18px 56px 18px 24px; clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%); }
.bug-team.t2 { background: var(--c2); color: var(--f2); padding: 18px 24px 18px 56px; clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%); }
@media (prefers-color-scheme: dark) {
  .bug-team.t1 { box-shadow: inset 0 4px 0 var(--mark1); }
  .bug-team.t2 { box-shadow: inset 0 4px 0 var(--mark2); }
}
.bug-name {
  flex: 1;
  font: 700 clamp(22px, 2.8vw, 34px) / 1.05 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  /* Break between words; a word too long for the block hyphenates instead of overflowing. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.bug-team.t2 .bug-name { text-align: right; }
.bug-num { font: 700 clamp(56px, 7.5vw, 92px) / 1 var(--display); font-variant-numeric: tabular-nums; }
/* Three-digit totals (conference records) need room left for the names. */
.bug-num.long { font-size: clamp(44px, 5.4vw, 66px); }
.bug-mid {
  flex: 0 0 150px;
  margin: 0 -30px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bar);
  color: var(--bar-fg);
  clip-path: polygon(36px 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
}
.bug-mid small { font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bug-mid b { font: 700 26px var(--display); }
@media (prefers-color-scheme: dark) {
  /* Accent text would be unreadable on the light middle block. */
  .bug-mid small { color: #4a5260; }
}
.bug-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 10px 20px;
  font: 700 14px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-fg);
}
.bug-strip .sep { opacity: .7; }
.bug-strip .link-btn { margin-left: auto; }
.link-btn {
  min-height: 32px;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bug-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---- Logos ---- */
.logo { position: relative; display: inline-grid; place-items: center; flex: none; }
.logo.sm { width: 28px; height: 28px; }
.logo.md { width: 40px; height: 40px; }
.logo picture, .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo .initials {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 700 .7rem var(--display);
  letter-spacing: .02em;
  color: #fff;
  background: var(--team);
  visibility: hidden;
}
.logo.no-img .initials { visibility: visible; }
.logo.no-img picture { display: none; }
/* Logos on the score bug sit in a white disc so they show on any team color. */
.logo.disc { width: 84px; height: 84px; padding: 12px; border-radius: 50%; background: #fff; }
.logo.disc .initials { inset: 0; font-size: 26px; color: var(--team); background: #fff; }
.logo.disc.no-img { padding: 0; }
.conf-logos { flex: none; display: grid; grid-template-columns: repeat(2, 38px); gap: 6px; }
.conf-logos .logo.md { width: 38px; height: 38px; padding: 5px; border-radius: 50%; background: #fff; }
.conf-logos .logo.md .initials { inset: 0; font-size: 12px; }

/* ---- Pills ---- */
.pill {
  display: inline-block;
  padding: 2px 8px;
  font: 700 11px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: var(--panel-2);
}
.pill.post { background: var(--accent-soft); }

/* ---- Series notes: six cards, three across, labels on a team-color bar ----
   --nc/--nf are the team's block color and text color (unset for a tie). */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.note { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); }
.note-label {
  padding: 7px 26px 7px 16px;
  font: 700 12px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--nc, var(--panel-2));
  color: var(--nf, var(--fg));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
@media (prefers-color-scheme: dark) {
  /* A navy bar barely shows on the dark card, so it gets a top edge in the lighter mark color. */
  .note-label { box-shadow: inset 0 3px 0 var(--nm, transparent); }
}
.note-value { padding: 10px 18px 0; font: 700 40px / 1.05 var(--display); font-variant-numeric: tabular-nums; }
.note-sub { padding: 2px 18px 14px; font-size: 14px; color: var(--muted); }

/* ---- Wins by decade: team 1 above the line, team 2 below ---- */
.dec-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 700; }
.dec-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dec-legend i { width: 12px; height: 12px; }
.dec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Bars carry their length as --v (0–1 of the busiest decade); --n is the decade count. */
.dec-chart { display: flex; gap: 8px; min-width: calc(var(--n) * 40px); }
.dec-col { flex: 1; min-width: 34px; display: flex; flex-direction: column; }
.dec-up, .dec-down { height: 140px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dec-up { justify-content: flex-end; }
.dec-down { justify-content: flex-start; }
.dec-up i, .dec-down i { display: block; flex: none; width: 70%; height: calc(var(--v) * 110px); }
.dec-up i { background: var(--mark1); }
.dec-down i { background: var(--mark2); }
.dec-n { font: 700 13px var(--display); }
.dec-label {
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font: 600 11px / 1.2 var(--display);
  background: var(--bar);
  color: var(--bar-fg);
}
/* Same height for every label, so the baselines line up when some decades have ties. */
.dec-chart.has-ties .dec-label { height: 34px; }
.dec-label small { display: block; font-size: 10px; opacity: .8; }

/* ---- Every meeting: recent games as winner-colored strips, then the full table ----
   Two columns filled top to bottom (--rows is half the strip count, rounded up). */
.gstrips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), auto);
  grid-auto-flow: column;
  gap: 6px 12px;
}
.gstrip { display: flex; align-items: stretch; min-width: 0; min-height: 60px; background: var(--panel-2); color: var(--fg); }
.gstrip.t1 { background: var(--c1); color: var(--f1); }
.gstrip.t2 { background: var(--c2); color: var(--f2); }
.gstrip.upcoming { background: var(--accent-soft); }
.gstrip-year {
  flex: 0 0 66px;
  display: grid;
  place-items: center;
  font: 700 18px var(--display);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .28);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.gstrip.tie .gstrip-year, .gstrip.upcoming .gstrip-year { background: rgba(127, 127, 127, .2); }
.gstrip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 12px; }
.gstrip-main b { font: 700 19px / 1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.gstrip-main small { font-size: 12px; opacity: .88; }
.gstrip .pill, .gstrip .pill.post { margin-left: 2px; padding: 0 6px; background: rgba(255, 255, 255, .22); color: inherit; }
.gstrip.tie .pill, .gstrip.upcoming .pill { background: var(--panel); }
.gstrip .logo.disc { align-self: center; margin-right: 12px; width: 38px; height: 38px; padding: 5px; }
.gstrip .logo.disc .initials { font-size: 12px; }
.btn {
  align-self: center;
  min-height: 46px;
  padding: 0 28px;
  font: 700 14px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--bar);
  color: var(--bar-fg);
  border: 0;
}
.btn.quiet { background: var(--panel-2); color: var(--fg); }
.full-games { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 3px solid var(--rule); }
.full-games-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.full-games-head h3 { margin: 0; font: 700 16px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.full-games-head .btn { align-self: auto; min-height: 44px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th {
  text-align: left;
  padding: 8px;
  font: 700 12px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}
td { padding: 9px 8px; border-top: 1px solid var(--line-soft); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
td.score { font: 700 15px var(--display); text-align: right; color: var(--loser); }
td.score b { color: var(--fg); }
th.num { text-align: right; }
td.team.won { font-weight: 700; }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--line); vertical-align: -1px; }
tr.upcoming td { color: var(--muted); }

/* ---- Conference table ---- */
a.vs-link { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--fg); font-weight: 700; text-decoration: none; }
a.vs-link:hover span { text-decoration: underline; }
.pct { display: inline-flex; align-items: center; gap: 8px; }
.pct-bar { width: 64px; height: 8px; background: var(--panel-2); overflow: hidden; }
.pct-bar i { display: block; height: 100%; background: var(--mark1); }
.table-note { margin: 0; font-size: 14px; color: var(--muted); }

/* ---- Loading skeleton ---- */
.skeleton { display: flex; flex-direction: column; gap: 0; }
.skel-row { display: flex; height: 150px; }
.skel { position: relative; overflow: hidden; background: var(--panel-2); }
.skel-row .skel { flex: 1; }
.skel-row .skel:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%); }
.skel-row .skel:last-child { margin-left: 8px; clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%); }
.skel.strip { height: 40px; margin-top: 4px; }
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 8%, transparent), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ---- Footer ---- */
footer.wrap { margin-top: 48px; padding-top: 12px; padding-bottom: 40px; font-size: 14px; color: var(--muted); }
footer.wrap::before { content: ""; display: block; height: 3px; margin-bottom: 12px; background: var(--rule); }
footer a { color: var(--muted); }

/* ---- Home page: the search on an accent panel (amber or teal by sport) ---- */
.home-search {
  margin: -10px -24px 0;
  padding: 30px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--accent);
  color: var(--accent-fg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}
.home-search h1 { margin: 0; font: 700 clamp(38px, 7vw, 64px) / 1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sport-switch { display: flex; gap: 4px; }
.sport-switch button {
  padding: 11px 22px;
  font: 700 14px var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #161b26;
  background: rgba(255, 255, 255, .55);
  border: 0;
}
.sport-switch button[aria-pressed="true"] { background: #161b26; color: #ffffff; }
.home-search .field label { color: inherit; }
.home-search .input-box input { border-color: transparent; }
.home-search .input-box input:focus { border-color: #161b26; }
.home-search button.swap { border-color: transparent; }
/* Compare can't be accent-on-accent here. */
.home-search #go { background: #161b26; color: #ffffff; }
.home-search #status { margin: 0; color: inherit; font-weight: 700; }
.home-search #suggest { margin: 0; }
.conf-link { align-self: flex-start; color: inherit; font-size: 14px; font-weight: 800; text-underline-offset: 3px; }

/* ---- Narrower screens ---- */
@media (max-width: 1100px) {
  .bug .logo.disc { width: 64px; height: 64px; padding: 9px; }
  .bug .logo.disc .initials { font-size: 20px; }
  .bug-team { gap: 14px; }
  .bug-team.t1 { padding: 18px 46px 18px 20px; }
  .bug-team.t2 { padding: 18px 20px 18px 46px; }
  .bug-mid { flex-basis: 130px; margin: 0 -26px; }
}
@media (max-width: 900px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Between the phone layout and full width there's no room for the logo discs in the bug. */
@media (min-width: 761px) and (max-width: 900px) {
  .bug .logo.disc { display: none; }
}
@media (max-width: 760px) {
  /* The bug becomes one edge-to-edge band split on a diagonal: team 1's color
     fills it, team 2's is laid over the right side by ::before, and ::after is
     the dark seam. Each team block is then just a transparent column of logo,
     name and score, so long names grow the band instead of overflowing it. */
  .bug { margin: 0 -24px; }
  .bug-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 236px; background: var(--c1); }
  .bug-row::before, .bug-row::after { content: ""; position: absolute; inset: 0; }
  .bug-row::before { background: var(--c2); clip-path: polygon(64% 0, 100% 0, 100% 100%, 36% 100%); }
  .bug-row::after { background: #10141b; clip-path: polygon(61% 0, 67% 0, 39% 100%, 33% 100%); }
  .bug-team.t1, .bug-team.t2 {
    position: relative;
    z-index: 1;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px 4px;
    background: none;
    clip-path: none;
    box-shadow: none;
  }
  .bug-team.t1 { align-items: flex-start; }
  .bug-team.t2 { align-items: flex-end; }
  /* Team 2's markup runs score, name, logo (for the desktop mirror); stack it logo first. */
  .bug-team.t2 > .logo, .bug-team.t2 > .conf-logos { order: -2; }
  .bug-team.t2 .bug-name { order: -1; }
  /* Narrow enough to stay on their own side of the diagonal. */
  .bug-name { flex: none; max-width: 90%; font-size: clamp(14px, 4.3vw, 17px); letter-spacing: .03em; }
  .bug-num { margin-top: auto; font-size: 84px; }
  .bug-num.long { font-size: 58px; }
  /* The tag sits between the two logos, the one row names never reach. */
  .bug-mid {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 47px;
    transform: translate(-50%, -50%);
    margin: 0;
    flex-direction: row;
    gap: 6px;
    padding: 5px 16px;
    white-space: nowrap;
    background: var(--accent);
    color: var(--accent-fg);
    clip-path: var(--slant);
  }
  .bug-mid small, .bug-mid b { font: 700 13px var(--display); letter-spacing: .08em; color: inherit; }
  .bug .logo.disc { width: 58px; height: 58px; padding: 8px; }
  .bug .logo.disc .initials { font-size: 18px; }
  .bug-strip { padding: 10px 16px; gap: 6px 14px; font-size: 13px; }
  .bug-strip .sep { display: none; }
  .bug-strip .link-btn { margin-left: 0; }
  .skeleton { margin: 0 -24px; }
  .skel-row { position: relative; height: 236px; }
  .skel-row .skel { position: absolute; inset: 0; margin: 0; }
  .skel-row .skel:first-child { clip-path: polygon(0 0, 61% 0, 33% 100%, 0 100%); }
  .skel-row .skel:last-child { margin: 0; clip-path: polygon(67% 0, 100% 0, 100% 100%, 39% 100%); }
  .skel.strip { margin-top: 0; }
}
@media (prefers-color-scheme: dark) and (max-width: 760px) {
  .bug-mid small { color: inherit; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-head { padding-top: 16px; gap: 12px 16px; }
  .modes { margin-left: 0; flex-basis: 100%; }
  .tabs a { padding: 10px 16px; }
  main.wrap { gap: 26px; padding-top: 24px; }
  #result, .matchup { gap: 26px; }
  .field { flex-basis: 100%; }
  button.swap { margin: 0 auto; transform: rotate(90deg); }
  #go { flex-basis: 100%; }
  #status { margin-top: -12px; }
  #suggest { margin-top: -16px; }
  .bug, .skeleton { margin: 0 -16px; }
  .home-search { margin: -8px -16px 0; padding: 24px 16px 48px; gap: 14px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%); }
  /* Swap and Compare share a row under both fields, so recents start higher up. */
  .home-search button.swap { order: 1; margin: 0; }
  .home-search #go { order: 2; flex: 1 1 0; min-width: 0; }

  .notes { gap: 8px; }
  .note-label { padding: 6px 20px 6px 10px; font-size: 11px; letter-spacing: .08em; }
  .note-value { padding: 8px 10px 0; font-size: 28px; }
  .note-sub { padding: 2px 10px 10px; font-size: 13px; }

  /* Wins by decade turns sideways: one row per decade, team 1's bar growing
     left from the decade label, team 2's growing right. */
  .dec-legend .dec-where { display: none; }
  .dec-legend { width: 100%; justify-content: space-between; }
  .dec-chart { flex-direction: column; gap: 4px; min-width: 0; }
  .dec-col { flex-direction: row; align-items: center; min-width: 0; }
  .dec-up, .dec-down { flex: 1; min-width: 0; height: 22px; flex-direction: row; align-items: center; gap: 6px; }
  .dec-up { justify-content: flex-end; }
  .dec-up i, .dec-down i { width: calc(var(--v) * (100% - 28px)); height: 18px; }
  .dec-label, .dec-chart.has-ties .dec-label { flex: 0 0 76px; height: 24px; flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
  .dec-label small { display: inline; }

  .gstrips { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 4px; }
  .gstrip-year { flex-basis: 62px; }
  .recent-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  table { font-size: 14px; }
}
@media (max-width: 380px) {
  .bug .logo.disc { width: 46px; height: 46px; padding: 6px; }
  .bug .logo.disc .initials { font-size: 14px; }
  .bug-mid { top: 41px; }
  .bug-name { letter-spacing: .01em; }
  .bug-num { font-size: 64px; }
  .bug-num.long { font-size: 46px; }
  .recent-team { flex-basis: 74px; }
  .gstrip .logo.disc { display: none; }
}