@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-latin-700-normal.woff2) format("woff2") }
@font-face { font-family: "PT Sans Narrow"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-narrow-latin-400-normal.woff2) format("woff2") }
/* Layout: plain stats-site page; one blue bar, breadcrumbs, dense striped tables; the finishing-odds grid is the only coloured block. */
:root {
  --bg: #FFFFFF;
  --ink: #1D2430;
  --muted: #5F6977;
  --rule: #C9D1DC;
  --stripe: #F3F6FA;
  --bar: #1C3F7A;
  --bar-ink: #FFFFFF;
  --head: #E3EAF4;
  --link: #1B4FA3;
  --heat: #2463C2;
  --up: #DDF0E6;
  --down: #F6E0E2;
  --up-ink: #1C7048;
  --down-ink: #A3313F;
  --lucky: #9A6A0B;
  --unlucky: #A2385E;
  --font: "PT Sans", "Trebuchet MS", Verdana, sans-serif;
  --narrow: "PT Sans Narrow", "Arial Narrow", "PT Sans", sans-serif;
}
:root[data-theme="dark"] {
  --bg: #12161D; --ink: #DCE3EC; --muted: #96A1B0; --rule: #2E3846; --stripe: #181E27; --bar: #16305C; --bar-ink: #EAF0F8;
  --head: #1F2A3A; --link: #8DB4F0; --heat: #5E95E8; --up: #173527; --down: #3A1D24; --up-ink: #7FD1A5; --down-ink: #EE8E9A;
  --lucky: #E2B456; --unlucky: #E58DB0; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.4 }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px }

.top { background: var(--bar); color: var(--bar-ink); padding-inline: 16px }
.top-in { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-block: 8px }
.logo { font-weight: 700; font-size: 1.25rem; color: var(--bar-ink) }
.logo:hover { text-decoration: none }
.logo small { font-weight: 400; font-size: 12px; opacity: .75; margin-left: 4px }
.top nav { display: flex; gap: 14px; flex-wrap: wrap }
.top nav a { color: var(--bar-ink); opacity: .85 }
.top nav a[aria-current] { opacity: 1; font-weight: 700 }
.top form { margin-left: auto; display: flex; gap: 6px; align-items: center }
.top input { font: inherit; font-size: 13px; padding: 3px 6px; width: 180px; max-width: 40vw; border: 1px solid transparent; border-radius: 2px; background: var(--bg); color: var(--ink) }
.top .theme { font-size: 12px; color: var(--bar-ink); text-decoration: underline }
.empty { color: var(--muted); padding: 8px 0 }

main { max-width: 1000px; margin: 0 auto; padding-inline: 16px; padding-block: 14px 40px }
.crumbs { font-size: 13px; color: var(--muted) }
h1 { font-size: 1.6rem; margin: 2px 0 2px }
h2 { font-size: 1.1rem; margin: 22px 0 6px; padding-bottom: 3px; border-bottom: 2px solid var(--bar) }
.meta { color: var(--muted); margin: 0 }

.roundnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 0; font-size: 13px }
.roundnav select { font: inherit; padding: 1px 4px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule) }
.roundnav .off { color: var(--muted) }

.wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 13px }
table.stats { min-width: 640px }
th { background: var(--head); text-align: left; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap }
th abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help }
td { padding: 3px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap }
tbody tr:nth-child(even) td { background: var(--stripe) }
tbody tr.up td { background: var(--up) }
tbody tr.down td { background: var(--down) }
.n { text-align: right; font-variant-numeric: tabular-nums }
.c { text-align: center }
.b { font-weight: 700 }
.lucky { color: var(--lucky) } .unlucky { color: var(--unlucky) }
.hit { font-weight: 700; text-decoration: underline; text-underline-offset: 2px }
.note { font-size: 12px; color: var(--muted); margin: 4px 0 0; max-width: 80ch }
.key { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; border: 1px solid var(--rule) }

table.grid td.p { padding: 0; width: 38px; text-align: center; font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--heat) calc(var(--p) * 100%), var(--bg)) !important }
table.grid td.p.dark { color: #fff }
table.grid td.p span { display: block; padding: 3px 0 }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start }
.cols.halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.infobox { border: 1px solid var(--rule); font-size: 13px }
.infobox caption { background: var(--bar); color: var(--bar-ink); font-weight: 700; padding: 5px 8px; text-align: left; caption-side: top }
.infobox th { background: none; font-weight: 400; color: var(--muted); border: 0; padding: 3px 8px }
.infobox td { border: 0; padding: 3px 8px; text-align: right; white-space: normal }
.chart svg { display: block; width: 100%; height: auto }
.chart text { fill: var(--muted); font: 11px var(--narrow) }

.filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0; font-size: 13px }
.filters select, .filters input { font: inherit; padding: 2px 5px; color: var(--ink); background: var(--bg); border: 1px solid var(--rule) }
.pager { font-size: 13px; margin-top: 6px; color: var(--muted) }
footer { max-width: 1000px; margin: 0 auto; padding: 14px 16px 30px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px }
@media (max-width: 760px) { .cols, .cols.halves { grid-template-columns: 1fr } .infobox { order: -1 } }
.top .mine { position: relative; font-size: 13px }
.top .mine summary { cursor: pointer; list-style: none }
.top .mine summary::-webkit-details-marker { display: none }
.top .mine .menu { position: absolute; z-index: 5; top: 22px; left: 0; min-width: 240px; max-width: 90vw; background: var(--bg);
  border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); padding: 4px 0 }
.top .mine .menu a { display: block; padding: 3px 10px; overflow-wrap: anywhere }
.top .mine .menu small { color: var(--muted) }
.top .mine .menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0 }
.star { color: var(--lucky) }
ul.series { columns: 6em; column-gap: 12px; list-style: none; margin: 6px 0; padding: 0 }
.faq { max-width: 720px }
.bar { display: block; height: 10px; background: var(--heat) }