@font-face {
  font-family: "Cadiz";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/CadizWeb-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Degular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Degular-Regular.woff2") format("woff2");
}

:root {
  --helga-blue: #0000ff;
  --ink: #030326;
  --paper: #ffffff;
  --mist: #f3f5f8;
  --line: #d7dce5;
  --accent: #399918;
  --accent-soft: #b4e50d;
  --warning: #ffd02f;
  --danger: #fb4141;
  --danger-soft: #ff9b2f;
  --muted: #5b6070;
  --hover-row: #eef0ff;
  --focus-ring: #00c7ff;
  --max: 1240px;
  --header-height: 88px;
  --motion-nav-surface: 420ms;
  --motion-nav-content-opacity: 220ms;
  --motion-nav-content-transform: 260ms;
  --motion-nav-content-delay: 80ms;
  --content-width-narrow-max: calc(var(--max) - (var(--space-lg) * 8));
  --space-2: 2px;
  --space-4: 4px;
  --space-xs: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 42px;
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-value: clamp(1.8rem, 4vw, 3.2rem);
  --detail-pick-padding: var(--space-lg);
}

html[data-theme="dark"] {
  --helga-blue: #8fa2ff;
  --ink: #f5f7ff;
  --paper: #080818;
  --mist: #151528;
  --line: #34364b;
  --accent: #399918;
  --accent-soft: #b4e50d;
  --warning: #ffe066;
  --danger: #fb4141;
  --danger-soft: #ff9b2f;
  --muted: #b0b5c8;
  --hover-row: #19194a;
  --focus-ring: #8fd7ff;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--paper);
  font-family: "Cadiz", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  letter-spacing: 0;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

a {
  color: inherit;
}

.site-header,
.site-footer,
main {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--helga-blue);
  text-decoration: none;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.brand__logo {
  flex: 0 0 auto;
  width: 104px;
  height: auto;
  display: block;
  fill: currentColor;
}

.brand__text {
  min-width: 0;
  margin-left: var(--space-lg);
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand:hover .brand__text {
  color: var(--helga-blue);
}

.icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  color: var(--helga-blue);
  background: var(--paper);
  cursor: pointer;
}

html[data-js="true"] .menu-toggle {
  display: inline-flex;
}

.menu-toggle:hover {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.menu-toggle__icon {
  font-size: 1.35rem;
}

.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

.site-menu {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

html[data-js="true"] .site-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 20;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-bottom: 0;
  background: transparent;
  pointer-events: none;
  transition: visibility 0s linear var(--motion-nav-surface);
  visibility: hidden;
}

html[data-js="true"] .site-menu[data-state="opening"],
html[data-js="true"] .site-menu[data-state="open"],
html[data-js="true"] .site-menu[data-state="closing"] {
  transition-delay: 0s;
  visibility: visible;
}

html[data-js="true"] .site-menu[data-state="opening"],
html[data-js="true"] .site-menu[data-state="open"] {
  pointer-events: auto;
}

.site-menu__surface {
  background: var(--paper);
}

html[data-js="true"] .site-menu__surface {
  width: min(100% - 32px, var(--max));
  min-height: 100%;
  display: flex;
  margin-inline: auto;
  background: var(--paper);
  backface-visibility: hidden;
  contain: paint;
  transform: translate3d(0, -100%, 0);
  transform-origin: top;
  transition: transform var(--motion-nav-surface) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

html[data-js="true"] .site-menu[data-state="opening"] .site-menu__surface,
html[data-js="true"] .site-menu[data-state="open"] .site-menu__surface {
  transform: translate3d(0, 0, 0);
}

body[data-menu-open="true"] {
  overflow: hidden;
  padding-top: var(--header-height);
}

body[data-menu-open="true"] .site-header {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(100% - 32px, var(--max));
  margin-inline: 0;
  transform: translateX(-50%);
}

.site-menu__inner {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-inline: auto;
  padding: var(--space-xl) 0;
}

html[data-js="true"] .site-menu__inner {
  flex: 1;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu__list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-js="true"] .site-menu__list,
html[data-js="true"] .site-menu__footer {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity var(--motion-nav-content-opacity) ease,
    transform var(--motion-nav-content-transform) cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-js="true"] .site-menu[data-state="opening"] .site-menu__list,
html[data-js="true"] .site-menu[data-state="open"] .site-menu__list,
html[data-js="true"] .site-menu[data-state="opening"] .site-menu__footer,
html[data-js="true"] .site-menu[data-state="open"] .site-menu__footer {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: var(--motion-nav-content-delay);
}

.site-menu__link {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 0;
  color: var(--ink);
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1;
  text-decoration: none;
}

.site-menu__link .icon {
  flex: 0 0 auto;
  font-size: clamp(1.5rem, 3.2vw, 3.2rem);
  color: currentColor;
}

.site-menu__link:hover,
.site-menu__link[aria-current="page"] {
  color: var(--helga-blue);
}

.site-menu__footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.language-switch__link {
  min-width: 42px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 0;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
}

.language-switch__link:hover {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.language-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--line);
}

.language-switch__link[aria-current="true"] {
  color: var(--paper);
  background: var(--helga-blue);
}

.theme-button {
  min-width: 0;
  min-height: 40px;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 8px 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.theme-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-button:hover,
.theme-button[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.menu-toggle:focus-visible,
.site-menu__link:focus-visible,
.theme-button:focus-visible,
.language-switch__link:focus-visible,
.breadcrumb__link:focus-visible,
.resources__link:focus-visible,
.summary__help-button:focus-visible,
.hit-chip-help:focus-visible,
.summary-tooltip__close:focus-visible,
.bracket-control:focus-visible,
main p a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.section {
  min-width: 0;
  margin-top: var(--space-xl);
}

.content-width {
  width: 100%;
  max-width: var(--content-width-max, var(--max));
  margin-inline: auto;
}

.content-width--narrow {
  --content-width-max: var(--content-width-narrow-max);
}

.page-intro {
  min-width: 0;
}

.page-intro__kicker,
.detail-hero__kicker {
  margin: 0;
  color: var(--helga-blue);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  margin-top: var(--space-sm);
  font-size: clamp(2rem, 5.4vw, 5rem);
  line-height: 0.98;
}

#match-title {
  margin-top: 0;
  padding-top: var(--space-sm);
  text-align: center;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
}

.page-intro__lead {
  margin: 0;
  margin-top: var(--space-lg);
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.resources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  margin-top: var(--space-md);
  font-size: var(--text-md);
}

.resources__link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--helga-blue);
  background: var(--paper);
  text-decoration: none;
}

.resources__link .icon {
  flex: 0 0 auto;
  font-size: 1rem;
}

.resources__link:hover {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: 0;
  background: transparent;
  border: 0;
}

.summary__card {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
  position: relative;
}

.summary__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
}

.summary__help-button {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--helga-blue);
  background: transparent;
  cursor: pointer;
}

.summary__help-button:hover,
.summary__help-button:focus-visible {
  color: var(--helga-blue);
  background: transparent;
}

.summary__help-button .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

.summary__help-button:hover .icon circle,
.summary__help-button:focus-visible .icon circle {
  fill: var(--hover-row);
}

/* The tooltip floats as a dialog over same-colored surfaces, so its outline
   needs more contrast than ordinary card borders - most visibly in dark mode,
   where the standard 70% line blend reads as near-invisible on the arrow. */
html[data-theme="dark"] .summary-tooltip {
  --tooltip-border-color: color-mix(in srgb, var(--muted) 42%, transparent);
  --tooltip-arrow-border-color: color-mix(in srgb, var(--muted) 42%, var(--paper));
}

.summary-tooltip {
  /* Arrow-center anchor as a fraction of the tooltip width, measured from the
     edge that faces the trigger. Derived from the large-desktop design
     (arrow center 65px into the 340px tooltip = 65 / 340) and reused on every
     breakpoint so the left/arrow/right segment ratio never changes: the
     default layout anchors it from the left edge, the narrow layout mirrors
     it from the right edge. */
  --tooltip-arrow-anchor: calc(65 / 340 * 100%);
  --tooltip-trigger-center: calc(var(--space-8) + 16px);
  --tooltip-arrow-width: 20px;
  --tooltip-arrow-height: 18px;
  --tooltip-border-color: color-mix(in srgb, var(--line) 70%, transparent);
  /* The arrow border is the outer of two stacked triangles, so it needs the
     border color pre-blended over the tooltip surface at full opacity to
     render at the strength the translucent box border actually shows. */
  --tooltip-arrow-border-color: color-mix(in srgb, var(--line) 70%, var(--paper));
  position: absolute;
  z-index: 20;
  bottom: calc(100% + var(--space-md));
  left: calc(100% - var(--tooltip-trigger-center));
  width: min(340px, calc(100% - var(--space-md)));
  margin: 0;
  padding: var(--space-lg);
  padding-right: calc(var(--space-lg) + 30px);
  border: 1px solid var(--tooltip-border-color);
  border-radius: 8px;
  color: var(--muted);
  background: var(--paper);
  box-shadow: 0 18px 42px rgb(3 3 38 / 14%);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: left;
  transform: translateX(calc(0% - var(--tooltip-arrow-anchor)));
}

/* clip-path shapes cannot carry a real border, so the arrow is two stacked
   triangles: the element in the border color and an inset ::before in the
   tooltip surface. The base edge stays hidden inside the box, so the outline
   reads as one continuous stroke around box plus arrow in every browser. */
.summary-tooltip .summary-tooltip__arrow {
  position: absolute;
  top: 100%;
  left: var(--tooltip-arrow-anchor);
  width: var(--tooltip-arrow-width);
  height: var(--tooltip-arrow-height);
  background: var(--tooltip-arrow-border-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
  transform: translateX(-50%);
}

.summary-tooltip .summary-tooltip__arrow::before {
  content: "";
  position: absolute;
  inset: var(--tooltip-arrow-inner-top, 0) 1.2px var(--tooltip-arrow-inner-bottom, 2.1px);
  background: var(--paper);
  clip-path: inherit;
}

/* JS-aligned state for the stat-card tooltip: the ratio anchor stays the
   standard, but when it cannot sit over the (?) trigger without pushing the
   tooltip past the viewport, the trigger wins and the arrow snaps to it
   (alignSummaryTooltip in theme.js sets these variables). Without JS the
   ratio rules above keep applying. */
/* Doubled class keeps this above the narrow-layout media rules, which share
   the single-class specificity and come later in the sheet. */
.summary-tooltip.summary-tooltip--aligned {
  left: var(--tooltip-aligned-left);
  right: auto;
  transform: none;
}

.summary-tooltip.summary-tooltip--aligned .summary-tooltip__arrow {
  left: var(--tooltip-aligned-arrow-center);
  right: auto;
  transform: translateX(-50%);
}

.summary-tooltip__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.summary-tooltip__close:hover {
  color: var(--ink);
}

.summary-tooltip__close .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.summary-tooltip__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.2;
}

.summary-tooltip__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  margin-top: var(--space-sm);
  padding: 0;
  list-style: none;
}

.summary-tooltip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
}

.summary-tooltip__item .bar__dot {
  margin-top: 0.46em;
}

.summary-tooltip__list strong {
  color: var(--ink);
}

.hit-explainer {
  position: relative;
  min-width: 0;
}

.hit-explainer--section {
  margin-top: var(--space-sm);
  color: var(--muted);
}

.hit-explainer--section > p {
  margin: 0;
}

.hit-explainer--page-intro {
  display: block;
}

.hit-explainer--chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.hit-prompt__label {
  white-space: nowrap;
}

.hit-prompt__label .bar__dot {
  margin-right: var(--space-4);
  vertical-align: 0.08em;
}

.hit-chip-help {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--helga-blue);
  background: transparent;
  cursor: pointer;
}

.hit-chip-help:hover {
  color: var(--ink);
}

.hit-chip-help .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.hit-chip-help--inline {
  vertical-align: -0.38em;
}

.hit-chip-help:hover .icon circle,
.hit-chip-help:focus-visible .icon circle {
  fill: var(--hover-row);
}

.summary-tooltip--inline,
.summary-tooltip--chip {
  left: var(--tooltip-inline-left, 0);
  width: min(340px, calc(100vw - (var(--space-lg) * 2)));
  transform: none;
}

.summary-tooltip--inline {
  top: auto;
  /* 100% of the positioned ancestor is the whole intro block, so the JS
     measures the trigger's own line and overrides this fallback; the tooltip
     then sits directly above the (?) trigger, not above the paragraph. */
  bottom: var(--tooltip-inline-bottom, calc(100% + var(--space-md)));
}

.summary-tooltip--chip {
  top: calc(100% + var(--space-md));
  bottom: auto;
}

.summary-tooltip--inline .summary-tooltip__arrow,
.summary-tooltip--chip .summary-tooltip__arrow {
  left: var(--tooltip-inline-arrow-left, var(--space-lg));
}

.summary-tooltip--inline .summary-tooltip__arrow {
  top: 100%;
  bottom: auto;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.summary-tooltip--chip .summary-tooltip__arrow {
  top: auto;
  bottom: 100%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  /* Upward arrow: the outline sits along the upward-facing slants. */
  --tooltip-arrow-inner-top: 2.1px;
  --tooltip-arrow-inner-bottom: 0;
}

.summary__value {
  display: block;
  max-width: 100%;
  margin: 0;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  font-size: var(--text-value);
  line-height: 1;
  overflow-wrap: anywhere;
}

.summary__value-text {
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.15;
}

.bar {
  display: flex;
  overflow: hidden;
  background: var(--mist);
}

.bar__segment {
  display: block;
  height: 100%;
}

.bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: center;
  margin: 0;
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: var(--text-sm);
}

.bar__legend-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.bar__legend .numeric {
  color: var(--ink);
}

.bar__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.bar__dot[data-state="strong"] {
  background: var(--accent);
}

.bar__dot[data-state="good"] {
  background: var(--warning);
}

.bar__dot[data-state="bad"] {
  background: var(--danger);
}

.bar__dot[data-series="primary"] {
  background: var(--helga-blue);
}

.bar__dot[data-series="muted"] {
  background: var(--line);
}

.bar__dot[data-series="contrast"] {
  background: var(--muted);
}

.summary__meta {
  margin: 0;
}

.summary__meta .bar__legend {
  justify-content: center;
}

.summary__bar {
  margin: 0;
}

.bar--status {
  height: 6px;
  margin: 0;
  margin-top: var(--space-8);
  border-radius: 3px;
}

.bar--status .bar__segment[data-state="strong"] {
  background: var(--accent);
}

.bar--status .bar__segment[data-state="good"] {
  background: var(--warning);
}

.bar--status .bar__segment[data-state="bad"] {
  background: var(--danger);
}

.section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.section__heading-copy > p,
.empty {
  margin: 0;
  margin-top: var(--space-sm);
  color: var(--muted);
}

.section__heading + .match-cards,
.section__heading + .odds {
  margin-top: var(--space-md);
}

.section__actions {
  margin: var(--space-md) 0 0;
}

.homepage-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.homepage-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.homepage-grid__main {
  min-width: 0;
  display: grid;
  gap: var(--space-xl);
}

.homepage-grid__aside,
.homepage-panel {
  min-width: 0;
}

.homepage-grid__aside .section__heading {
  display: block;
}

.homepage-grid__aside h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.05;
}

.homepage-grid__aside .section__heading-copy > p {
  font-size: var(--text-sm);
}

.homepage-grid__aside .odds {
  column-gap: var(--space-md);
}

.homepage-grid__aside .odds__team {
  font-size: var(--text-sm);
}

.homepage-grid__aside .odds__pct {
  font-size: 1rem;
}

main p a {
  color: var(--helga-blue);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

main p a:hover {
  color: var(--ink);
  text-decoration: none;
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--helga-blue);
  text-decoration: none;
}

.action-link:hover {
  color: var(--ink);
}

.action-link .icon {
  width: 1em;
  height: 1em;
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.action-link:hover .icon,
.action-link:focus-visible .icon {
  opacity: 0.72;
  transform: translateX(12px);
}

.action-link--back:hover .icon,
.action-link--back:focus-visible .icon {
  transform: translateX(-12px);
}

.match-name {
  overflow-wrap: normal;
}

.numeric {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status,
.hit-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status[data-status="future"] {
  color: var(--helga-blue);
  border-color: var(--hover-row);
  background: var(--hover-row);
}

.status[data-status="locked"] {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.status[data-status="final"] {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

/* ---------- fixture cards ---------- */

.match-cards {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.match-card:hover {
  border-color: var(--helga-blue);
  background: var(--hover-row);
}

.match-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.match-card__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
  min-width: 0;
}

.match-card__when {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.match-card__stage {
  color: var(--helga-blue);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.match-card__teams {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.match-card__matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  min-width: 0;
}

.match-card__team {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.match-card__team[data-side="home"] {
  justify-content: flex-end;
  text-align: right;
}

.match-card__team[data-side="away"] {
  justify-content: flex-start;
  text-align: left;
}

.match-card__team-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
}

.match-card__team[data-side="home"] .match-card__team-identity {
  justify-content: flex-end;
}

.match-card__team-name {
  overflow: hidden;
  font-size: var(--text-lg);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card__flag {
  flex: 0 0 auto;
  font-size: var(--text-lg);
  line-height: 1;
}

.match-card__score {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 3.4ch;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.match-card__score[data-empty="true"] {
  color: var(--muted);
}

.match-card__outcome {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.match-card__tips {
  display: grid;
  gap: var(--space-8);
  align-content: center;
  min-width: 0;
}

.tip-chip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-10);
  padding: 6px 11px;
  border: 1px solid var(--line);
  font-size: var(--text-md);
}

.tip-chip[data-empty="true"] {
  justify-content: center;
  color: var(--muted);
}

.tip-chip__provider {
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tip-chip__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tip-chip__points {
  color: var(--helga-blue);
  font-size: var(--text-sm);
}

.tip-chip__points[data-state="positive"] {
  color: var(--accent);
}

/* ---------- probability bar ---------- */

.prob {
  min-width: 0;
}

.bar--series {
  height: 7px;
  border-radius: 4px;
}

.prob[data-full="true"] .bar--series {
  height: 12px;
  border-radius: 6px;
}

.bar--series .bar__segment[data-series="primary"] {
  background: var(--helga-blue);
}

.bar--series .bar__segment[data-series="muted"] {
  background: var(--line);
}

.bar--series .bar__segment[data-series="contrast"] {
  flex: 1 1 auto;
  background: var(--muted);
}

.prob[data-full="true"] .bar__legend {
  font-size: var(--text-md);
  margin-top: var(--space-8);
}

.hit-chip[data-result="exact"],
.tag[data-result="exact"] {
  color: var(--paper);
  border-color: var(--accent);
  background: var(--accent);
}

.hit-chip[data-result="trend"],
.tag[data-result="trend"] {
  color: var(--ink);
  border-color: var(--warning);
  background: var(--warning);
}

html[data-theme="dark"] .hit-chip[data-result="trend"],
html[data-theme="dark"] .tag[data-result="trend"] {
  color: var(--paper);
}

.hit-chip[data-result="miss"],
.tag[data-result="miss"] {
  color: var(--paper);
  border-color: var(--danger);
  background: var(--danger);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  justify-content: flex-start;
  text-align: left;
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--ink);
}

.match-detail__actions {
  margin-top: var(--space-md);
  padding-bottom: 54px;
}

/* ---------- match detail hero ---------- */

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding: 36px 0 0;
}

.detail-hero__main {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.detail-hero__title {
  margin-top: 0;
  text-wrap: balance;
}

.detail-hero__flag {
  font-size: 0.72em;
}

/* The final score (or the model's forecast) is the page's key fact, so it
   gets scoreboard prominence right under the team names. */
.detail-hero__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-md);
}

.detail-hero__score-value {
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--helga-blue);
  letter-spacing: 0.02em;
}

.detail-hero__score-label {
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.detail-hero__explain {
  margin: 0;
  max-width: 56ch;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--helga-blue);
  color: var(--muted);
  font-size: 1rem;
}

.detail-hero__explain > p {
  margin: 0;
}

.detail-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  align-items: center;
  justify-content: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 26px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.detail-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.detail-pick {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  min-width: 0;
  padding: var(--detail-pick-padding);
  border: 1px solid var(--line);
  background: var(--paper);
}

.detail-pick__label {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}

.detail-pick__value {
  margin: 0;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: var(--text-value);
  line-height: 0.95;
  color: var(--ink);
  text-align: center;
}

.detail-pick__value[data-size="text"] {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.detail-pick__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-10);
  margin: 0;
  padding-top: var(--detail-pick-padding);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}

.detail-pick__points {
  color: var(--helga-blue);
}

.detail-pick__points[data-state="positive"] {
  color: var(--accent);
}

/* ---------- score matrix heatmap ---------- */

.heatmap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
}

.heatmap__scroll {
  overflow-x: auto;
  max-width: 100%;
}

.heatmap__table {
  border-collapse: separate;
  border-spacing: 3px;
}

.heatmap__table th {
  padding: 0;
  min-width: 34px;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--text-xs);
  text-align: center;
}

.heatmap__corner {
  font-size: var(--text-sm);
}

.heatmap__cell {
  position: relative;
  width: clamp(38px, 6vw, 54px);
  height: clamp(38px, 6vw, 54px);
  border: 4px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: var(--mist);
  background: color-mix(in srgb, var(--helga-blue) var(--heat, 0%), var(--mist));
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}

.heatmap__cell-label {
  position: relative;
  z-index: 1;
}

.heatmap__cell-marker {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}

.heatmap__cell[data-hot="true"] {
  color: var(--paper);
}

.heatmap__cell[data-most-likely="true"] {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus-ring) 35%, transparent);
}

.heatmap__side {
  display: grid;
  gap: var(--space-10);
  align-content: start;
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--text-md);
}

.heatmap__side > * {
  margin: 0;
}

.heatmap__axis {
  color: var(--ink);
  font-size: var(--text-sm);
}

.heatmap__scale {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-xs);
}

.heatmap__swatch {
  width: 110px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, var(--mist), var(--helga-blue));
}

.heatmap__note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.heatmap__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.heatmap__dot[data-marker="most-likely"] {
  background: var(--focus-ring);
}

.heatmap__dot[data-marker="actual"] {
  background: var(--accent);
}

/* ---------- champion odds ---------- */

.odds {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(70px, 1fr) max-content;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-md);
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  align-items: center;
}

.odds__row {
  display: contents;
}

.odds__team {
  min-width: 0;
  font-size: var(--text-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odds__track {
  display: block;
  width: 100%;
  min-width: 0;
  height: 12px;
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}

.odds__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--helga-blue);
}

.odds__pct {
  justify-self: end;
  font-family: "Degular", "Cadiz", system-ui, sans-serif;
  font-size: 1.15rem;
  text-align: right;
  color: var(--ink);
}

.odds__source {
  margin: 0;
  margin-top: var(--space-md);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ---------- tournament bracket ---------- */

.bracket-tree {
  height: clamp(560px, 72vh, 880px);
  margin-top: var(--space-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}

.bracket-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: flex-start;
  margin-top: var(--space-md);
}

.bracket-control {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--helga-blue);
  background: var(--paper);
  font: inherit;
}

.bracket-control .icon {
  flex: 0 0 auto;
  font-size: 1rem;
}

.bracket-control [data-bracket-play-label],
.bracket-control [data-bracket-pause-label] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.bracket-control [hidden] {
  display: none;
}

.bracket-control:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--helga-blue);
  background: var(--helga-blue);
}

.bracket-control:disabled {
  cursor: default;
  color: var(--muted);
  opacity: 0.54;
}

.bracket-tree[hidden] {
  display: none;
}

.bracket-tree .bracket-root {
  border: 0;
}

.bracket-tree .matches-positioner,
.bracket-tree .round-titles-wrapper {
  transition:
    margin-left 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.bracket-tree .match-body {
  background: var(--paper);
  transition: background-color 0.24s ease, border-color 0.24s ease;
}

.bracket-tree .match-status {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.24s ease, border-color 0.24s ease, font-size 0.24s ease;
}

.bracket-tree .match-body:has(.side-wrapper.winner) .match-status {
  font-size: 0.9rem;
  color: var(--ink);
}

.bracket-tree__fallback {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-md);
}

.bracket-tree__fallback[hidden] {
  display: none;
}

.bracket-fallback {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr) max-content;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--line);
}

.bracket-fallback__round {
  color: var(--muted);
  font-family: "Degular", ui-monospace, monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.bracket-fallback__match {
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 700;
}

.bracket-fallback__status {
  color: var(--helga-blue);
  font-weight: 700;
  white-space: nowrap;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: var(--space-xl);
  padding: 28px 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.site-footer__text {
  margin: 0;
}

.site-footer__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  transition: color 180ms ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 1272px) {
  .homepage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-tooltip {
    left: auto;
    right: var(--space-8);
    transform: none;
  }

  /* Combines the arrow element (stacked-triangle border) with the ratio
     anchor: mirrored from the right edge in the narrow layout. */
  .summary-tooltip .summary-tooltip__arrow {
    right: var(--tooltip-arrow-anchor);
    left: auto;
    transform: translateX(50%);
  }

  .summary-tooltip--inline,
  .summary-tooltip--chip {
    right: auto;
    left: var(--tooltip-inline-left, 0);
  }

  .summary-tooltip--inline .summary-tooltip__arrow,
  .summary-tooltip--chip .summary-tooltip__arrow {
    right: auto;
    left: var(--tooltip-inline-arrow-left, var(--space-lg));
    transform: translateX(-50%);
  }

  .homepage-grid__aside .odds__row {
    display: contents;
  }

  .homepage-grid__aside .odds {
    column-gap: var(--space-lg);
  }

  .homepage-grid__aside .odds__team {
    font-size: var(--text-md);
  }

  .homepage-grid__aside .odds__pct {
    font-size: 1.15rem;
  }

  .match-card__details {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-card__when {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
    align-items: start;
    gap: var(--space-2);
    text-align: center;
  }

  .match-card__matchup {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-8);
  }

  .match-card__team[data-side="home"],
  .match-card__team[data-side="away"] {
    justify-content: center;
    text-align: center;
  }

  .match-card__team[data-side="home"] .match-card__team-identity {
    justify-content: center;
  }

  .match-card__tips {
    grid-auto-flow: row;
    grid-auto-columns: unset;
  }

  .heatmap {
    grid-template-columns: minmax(0, 1fr);
  }

  .odds__row {
    display: contents;
  }

  .bracket-tree {
    height: 640px;
  }

  .bracket-fallback {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 72px;
  }

  .section__heading,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header {
    gap: var(--space-sm);
  }

  .brand__logo {
    width: 88px;
  }

  .language-switch__link {
    min-height: 36px;
    padding: 6px 8px;
  }

  .site-menu__inner {
    padding: var(--space-lg) 0;
  }

  .site-menu__link {
    gap: var(--space-sm);
  }

  .site-menu__footer {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }

  .detail-picks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-card,
  .action-link .icon,
  .bracket-tree .matches-positioner,
  .bracket-tree .round-titles-wrapper,
  html[data-js="true"] .site-menu,
  html[data-js="true"] .site-menu__surface,
  html[data-js="true"] .site-menu__list,
  html[data-js="true"] .site-menu__footer {
    transition: none;
  }

  .action-link:hover .icon,
  .action-link:focus-visible .icon {
    opacity: 1;
    transform: none;
  }
}