@font-face{font-family:"SlipCond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BarlowCondensed-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/BarlowCondensed-Medium.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-Bold.ttf") format("truetype")}
@font-face{font-family:"SlipCond";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/BarlowCondensed-Black.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.ttf") format("truetype")}
@font-face{font-family:"SlipSans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Inter-Bold.ttf") format("truetype")}
:root {
  --bg: #06080c;
  --panel: #101820;
  --line: #243244;
  --text: #f7fafc;
  --muted: #d5deea;
  --amber: #ffc633;
  --green: #22e06b;
  --red: #ff3b3b;
  --blue: #5ec4ff;
  --cond: "SlipCond", "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
  --ui: "SlipSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--ui);
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, #16202e, #06080c 55%); color: var(--text); min-height: 100vh; font-family: var(--ui); font-weight: 400; font-synthesis: none; }
button, input, select { font-family: var(--ui); font-weight: 400; font-synthesis: none; }
b, strong { font-weight: 400; }
a, a:link, a:visited, a:hover, a:focus, a:active,
a *, a:link *, a:visited *, a:hover *, a:focus *, a:active * {
  text-decoration: none;
  -webkit-text-decoration: none;
}
a, a:link, a:visited, a:hover, a:focus, a:active { color: var(--blue); }
a:hover, a:focus-visible { background: #1c2838; }
.sample {
  position: sticky; top: 0; z-index: 5;
  margin: 0; padding: 0.55rem 0.8rem; text-align: center;
  background: #2a2108; color: var(--amber); border-bottom: 2px dashed #ffb400;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem;
}
header.bar, .toolbar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
}
a.brandlink { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; line-height: 1; text-decoration: none; color: white; background: transparent; min-width: 0; }
a.brandlink:hover, a.brandlink:focus-visible { background: transparent; color: white; }
a.brandlink .ri {
  height: 2.4rem; width: calc(2.4rem * 500 / 374); max-height: 2.4rem;
  max-width: calc(2.4rem * 500 / 374); min-width: calc(2.4rem * 500 / 374);
  flex: 0 0 calc(2.4rem * 500 / 374); display: block; object-fit: contain;
}
a.brandlink .brandtext { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.word { font-family: var(--cond); font-weight: 500; letter-spacing: 0.04em; font-size: 1.4rem; line-height: 1; text-decoration: none; color: white; }
.word .wb, .word b { color: var(--blue); font-weight: 500; }
.word .wi, .word i { font-style: normal; color: #ff9d1f; font-weight: 500; }
.platform { display: block; font-size: 0.78rem; line-height: 1.2; font-weight: 400; letter-spacing: 0.01em; text-transform: none; white-space: nowrap; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 0.45rem; }
nav a, button.unit {
  color: white; text-decoration: none; border: 1px solid #2c3a4e; background: #141c27;
  border-radius: 0.5rem; padding: 0.45rem 0.7rem; min-height: 2.6rem; font-weight: 400;
}
nav a:hover, nav a:focus-visible, button.unit:hover, button.unit:focus-visible { background: #1c2838; }
button.unit.on { box-shadow: inset 0 -3px 0 var(--amber); }
main { padding: 1rem; max-width: 1100px; margin: 0 auto; }
h1 { font-family: var(--cond); font-size: 1.6rem; font-weight: 500; margin: 0 0 0.3rem; }
h2, h3 { font-weight: 500; }
.muted { color: var(--muted); }
.cards { display: grid; gap: 0.7rem; }
.card, .pair, .race {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.8rem; padding: 0.8rem 0.9rem;
}
.card h2 { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 500; color: var(--text); }
.meta { color: var(--muted); font-size: 0.92rem; font-weight: 400; }
.live { color: var(--green); font-weight: 400; letter-spacing: 0.08em; }
.meetcard { padding: 0; }
a.meetmain, a.meetmain:link, a.meetmain:visited {
  display: block; padding: 0.8rem 0.9rem 0.35rem; color: inherit; background: transparent; text-decoration: none;
}
.meetcard .chips { padding: 0 0.9rem 0.8rem; }
.chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
a.pill, a.roundtab, .chips span, .roundtab {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.28rem 0.7rem; font-size: 0.8rem; font-weight: 400; background: #141c27; color: var(--text);
  text-decoration: none; white-space: nowrap; cursor: pointer; min-height: 2rem;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
a.pill:link, a.pill:visited, a.roundtab:link, a.roundtab:visited { color: var(--text); background: #141c27; text-decoration: none; }
.roundtabs { position: relative; z-index: 2; display: flex; gap: 0.4rem; overflow-x: auto; margin: 0.6rem 0; }
a.pill:hover, a.pill:focus-visible, a.roundtab:hover, a.roundtab:focus-visible,
.chips a:hover, .chips a:focus-visible { background: #1c2838; color: var(--text); text-decoration: none; }
.roundtab.on, a.roundtab.on, a.roundtab.on:link, a.roundtab.on:visited { border-color: var(--blue); color: var(--blue); background: #141c27; }
.classblock { margin-top: 1.2rem; }
.classblock h2 { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.pair { display: grid; gap: 0.25rem; margin-top: 0.45rem; }
a.pair, a.pair:link, a.pair:visited, a.race, a.race:link, a.race:visited {
  color: inherit; background: var(--panel); text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
}
a.pair { display: grid; }
a.race { display: block; }
.racewrap { margin-top: 0.45rem; }
.racewrap > .pair { margin-top: 0; }
.pair .who { display: flex; justify-content: space-between; gap: 0.5rem; }
.win, .win *, .side.win, .side.win *,
.win a, .win a:link, .win a:visited, .side.win a, .side.win a:link, .side.win a:visited { color: var(--green); font-weight: 400; }
.lose { color: #9aabbd; font-weight: 400; }
.nums { font-variant-numeric: tabular-nums; font-family: var(--cond); font-weight: 400; font-size: 1.05rem; color: #f7fafc; }
.win .nums, .side.win .nums { color: var(--green); font-weight: 400; }
.drivername { font-weight: 400; color: inherit; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0 0 0.7rem; color: var(--muted); }
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 400; border-radius: 0.3rem; padding: 0 0.15rem; }
.crumbs .sep { opacity: 0.7; }
.slipgrid { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.slipgrid th, .slipgrid td { border-bottom: 1px solid #1d2735; padding: 0.35rem 0.4rem; text-align: center; }
.slipgrid th { font-family: var(--cond); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: #d5deea; }
.slipgrid td.num, .slipgrid .big { font-family: var(--cond); font-weight: 400; font-size: 1.45rem; }
.slipgrid td.ahead { color: var(--green); }
.slipgrid td.behind { color: var(--red); }
.slipgrid td.nr { color: #d5deea; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.driverhero { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: 0.8rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.driverhero img { width: 8rem; height: 10rem; object-fit: cover; object-position: 50% 8%; border-radius: 0.7rem; background: #0c1218; }
.thumb { width: 2.4rem; height: 3rem; object-fit: cover; object-position: 50% 8%; border-radius: 0.35rem; vertical-align: middle; margin-right: 0.35rem; background: #0c1218; }
.slipgrid .thumb { display: block; margin: 0.3rem auto 0.25rem; }
.bests { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.4rem 0 0.8rem; }
.bests span { border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; }
.race { position: relative; }
.hit { position: relative; cursor: pointer; }
a.hit:hover, a.hit:focus-visible, .hit:hover, .hit:focus-within { background: #162433; border-color: #3a4d66; color: inherit; }
a.hit:active, .hit:active { background: #1b2838; }
a.pair:focus-visible, a.race:focus-visible, a.meetmain:focus-visible { outline: 2px solid #5ec4ff; outline-offset: 2px; }
.driverlink { position: relative; z-index: 2; color: var(--blue); font-weight: 400; text-decoration: none; border-radius: 0.25rem; }
.driverlink:hover, .driverlink:focus-visible { background: #1c2838; text-decoration: none; }
.col h3 a { font-weight: 400; text-decoration: none; }
@media (max-width: 700px) {
  .driverhero { grid-template-columns: 5.5rem minmax(0,1fr); }
  .driverhero img { width: 5.5rem; height: 7rem; }
  .slipgrid td.num { font-size: 1.15rem; }
}
.ladder { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.6rem; touch-action: pan-x; }
.col { min-width: 15rem; }
.col h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.side { display: flex; justify-content: space-between; gap: 0.4rem; padding: 0.25rem 0; border-top: 1px solid #1d2735; }
.side.bye { color: var(--amber); }
.side.tbd, .who .tbd { color: #d5deea; }
form.topsearch { flex: 1 1 16rem; min-width: 12rem; }
form.topsearch input { width: 100%; }
form.h2hpick { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 1rem; }
form.h2hpick select { min-width: 14rem; }
.h2hbtn, form.h2hpick button {
  position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 2.4rem;
  margin-top: 0.35rem; padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--blue); font-weight: 400; background: #141c27; cursor: pointer; text-decoration: none;
}
form.h2hpick button { margin-top: 0; color: var(--text); }
.h2hbtn:hover, .h2hbtn:focus-visible, form.h2hpick button:hover { background: #1c2838; text-decoration: none; }
.h2h-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 1.15rem; }
.h2h-rec .num, .h2h-stats .num { font-family: var(--cond); font-weight: 400; font-size: 1.8rem; }
.h2h-dash { color: var(--muted); }
.h2h-stats { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.8rem; }
.h2h-stats th, .h2h-stats td { border-bottom: 1px solid #1d2735; padding: 0.28rem 0.4rem; text-align: center; font-weight: 400; }
.h2h-stats th { font-family: var(--cond); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.h2h-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.h2h-paths ul, .points { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; }
.h2h-paths a, .h2h-last a { font-weight: 400; text-decoration: none; }
.answer { border-color: #1f6b45; }
.answer-line { border-left: 3px solid var(--green); padding: 0.2rem 0.6rem; }
.h2h-inner h3 { margin: 0.8rem 0 0.3rem; }
@media (max-width: 700px) {
  .h2h-paths { grid-template-columns: 1fr; }
  form.h2hpick select { min-width: 100%; }
}
input, select {
  background: #0c1218; color: white; border: 1px solid var(--line); border-radius: 0.5rem;
  min-height: 2.7rem; padding: 0.4rem 0.6rem; font: inherit;
}
@media (max-width: 700px) {
  form.search { grid-template-columns: 1fr; }
  header.bar { align-items: flex-start; }
  .word { font-size: 1.2rem; }
  a.brandlink .ri {
    height: 2.2rem; width: calc(2.2rem * 500 / 374); max-height: 2.2rem;
    max-width: calc(2.2rem * 500 / 374); min-width: calc(2.2rem * 500 / 374);
    flex: 0 0 calc(2.2rem * 500 / 374);
  }
}