:root {
  --bg: #f3f2ec;
  --card: #fbfaf6;
  --ink: #11160f;
  --mu: #62675d;
  --line: #11160f1f;
  --pitch: #0f4d34;
  --yel: #f2d31b;
  --home: #0f4d34;
  --draw: #a9ad9e;
  --away: #d9603b;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 "IBM Plex Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; }

.grow { flex: 1; }

header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 36px;
  height: 60px;
  border-bottom: 1px solid var(--line);
}

.wm {
  font: 800 24px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  gap: 8px;
  align-items: center;
}

.wm i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  position: relative;
  flex: none;
}

.wm i:after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--yel);
}

header nav { display: flex; gap: 4px; }

header nav a {
  padding: 7px 12px;
  border-radius: 7px;
  color: var(--mu);
  font-size: 13.5px;
  text-decoration: none;
}

header nav a.on { background: var(--ink); color: #fff; }

.pill {
  font: 500 11.5px/1 var(--mono);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--mu);
  background: var(--card);
  text-decoration: none;
}

.pill a { color: inherit; text-decoration: none; }

.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fa36b;
}

.pill.warn i { background: var(--away); }

main {
  padding: 12px 36px 8px;
  max-width: 1280px;
  margin: 0 auto;
}

.top { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

.lbl {
  font: 600 11px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mu);
  display: flex;
  gap: 10px;
  align-items: center;
}

.brier { display: flex; align-items: flex-end; gap: 16px; margin: 10px 0 6px; }

.brier b {
  font: 700 92px/0.8 "Barlow Condensed", sans-serif;
  letter-spacing: -0.02em;
}

.brier span { color: var(--mu); font-size: 14px; padding-bottom: 6px; max-width: 190px; }

.scale {
  position: relative;
  margin: 20px 0 6px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f8a5a, #e7e4d6 55%, #d9603b);
}

.scale .mk { position: absolute; top: -8px; width: 3px; height: 28px; background: var(--ink); border-radius: 2px; }

.scale .mk:after {
  content: attr(data-l);
  position: absolute;
  top: -20px;
  left: -24px;
  width: 60px;
  text-align: center;
  font: 600 11px var(--mono);
}

.scale .mk:first-child:after { left: 0; text-align: left; }

.scale .mk:last-child:after { left: auto; right: 0; width: 90px; text-align: right; }

.ticks { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--mu); }

.mini { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-top: 1px solid var(--line); }

.mini div { padding: 8px 0 0; }

.mini b { font: 700 30px/1 "Barlow Condensed", sans-serif; display: block; }

.mini span {
  font: 11px var(--mono);
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fx {
  background: var(--pitch);
  color: #f2f5ee;
  border-radius: 14px;
  padding: 14px 18px;
  position: relative;
  overflow: visible;
}

.fx:before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px solid #ffffff22;
  border-radius: 6px;
}

.fx:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  border-left: 1.5px solid #ffffff22;
}

.fx .ring {
  position: absolute;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
  width: 120px;
  height: 120px;
  border: 1.5px solid #ffffff22;
  border-radius: 50%;
}

.fx > * { position: relative; z-index: 1; }

.fx > .ring { position: absolute; z-index: 0; }

.fx .lbl { color: #cfe3d6; }

.live {
  background: var(--yel);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 700;
}

.teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 10px 0 6px;
  gap: 16px;
}

.team {
  font: 700 36px/0.95 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.team.r { text-align: right; }

.vs {
  font: 600 12px var(--mono);
  background: #ffffff1a;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.3;
}

.prob {
  display: flex;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
  font: 700 20px "Barlow Condensed", sans-serif;
}

.prob div { display: flex; align-items: center; padding: 0 12px; min-width: 0; }

.ph { background: #f2f5ee; color: var(--pitch); }

.prob .pd { background: #9fb9a8; color: var(--pitch); justify-content: center; padding: 0 6px; }

.prob .pa { background: var(--away); color: #fff; justify-content: center; padding: 0 6px; }

.plab {
  display: flex;
  justify-content: space-between;
  font: 11px var(--mono);
  color: #cfe3d6;
  margin-top: 6px;
}

.fxrows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  font: 11.5px var(--mono);
  color: #cfe3d6;
}

.fxrows a { color: #fff; font-weight: 500; text-decoration: none; }

.fxrows b { color: #fff; font-weight: 500; }

h2 {
  font: 700 24px/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 12px 0 8px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

h2 small {
  font: 500 12px var(--mono);
  color: var(--mu);
  text-transform: none;
  letter-spacing: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

th {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mu);
  text-align: left;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
}

td { padding: 7px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }

tr:hover td { background: #f1efe6; }

.m { font: 700 18px "Barlow Condensed", sans-serif; text-transform: uppercase; }

.m a { text-decoration: none; }

.sb { display: flex; height: 16px; border-radius: 4px; overflow: hidden; width: 220px; }

.sb i { display: block; height: 100%; }

.sbl { font: 11px var(--mono); color: var(--mu); margin-top: 3px; }

.res, .bs { font: 700 22px "Barlow Condensed", sans-serif; }

.tag {
  font: 600 10.5px var(--mono);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag.y { background: var(--yel); border-color: var(--yel); color: var(--ink); }

td.h { font: 12px var(--mono); color: var(--mu); }

td.h a { text-decoration: none; }

.rec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.rc .big { font: 700 29px/1 "Barlow Condensed", sans-serif; margin: 8px 0 2px; }

.rc .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 12px var(--mono);
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  color: var(--mu);
}

.rc .row b { color: var(--ink); font-weight: 500; }

.rc .row a { color: var(--ink); text-decoration: none; font-weight: 500; }

.ink {
  background: var(--ink);
  color: #eef0e8;
}

.ink .lbl { color: #b8bcb0; }

.ink p { margin-top: 8px; font-size: 14px; }

.stack { display: grid; gap: 14px; }

.prose { max-width: 68ch; }

.prose p { margin: 8px 0; }

.formula {
  font: 13px/1.5 var(--mono);
  background: #11160f;
  color: #f2f5ee;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  word-break: break-all;
}

footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 36px 10px;
  font: 11.5px var(--mono);
  color: var(--mu);
}

.tip { position: relative; display: inline-flex; align-items: center; text-transform: none; letter-spacing: 0; }

.q {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: 600 11px/1 var(--mono);
  cursor: pointer;
  padding: 0;
}

.fx .q { color: #cfe3d6; }

.pop {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 10px 12px;
  background: var(--ink);
  color: #eef0e8;
  border-radius: 10px;
  font: 400 13px/1.4 "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 16px 32px -18px #000a;
}

.tip.up .pop { top: auto; bottom: calc(100% + 8px); }

.tip.show .pop,
.tip.open .pop { display: block; }

@media (max-width: 980px) {
  .top, .rec { grid-template-columns: 1fr; }
  header { height: auto; flex-wrap: wrap; padding: 12px 16px; }
  main, footer { padding-left: 16px; padding-right: 16px; }
  .brier b { font-size: 72px; }
}