:root {
    --odds-navy: #0b2340;
    --odds-blue: #2563eb;
    --odds-blue-dark: #1d4ed8;
    --odds-blue-soft: #eff6ff;
    --odds-border: #dbe2ea;
    --odds-text: #0f172a;
    --odds-muted: #64748b;
    --odds-page-bg: #f5f7fb;
    --odds-card: #ffffff;
    --odds-green: #22c55e;
    --odds-yellow: #facc15;
    --odds-gap-yellow: #fef9c3;
    --odds-gap-yellow-border: #facc15;
    --odds-gap-red: #fee2e2;
    --odds-gap-red-border: #f87171;
    --odds-gray: #94a3b8;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Inter, Arial, sans-serif;
    margin: 0;
    background: var(--odds-page-bg);
    color: var(--odds-text);
}

button,
a {
    font: inherit;
}

.page {
    min-height: 100vh;
}

main {
    width: 100%;
}

.sidebar {
    position: sticky;
    top: 0;
    /* Above the sticky league header (30), but below the mobile backdrop/menu (60/70). */
    z-index: 40;
    background: var(--odds-card);
    border-bottom: 1px solid var(--odds-border);
}

.odds-top-nav {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1460px;
    min-height: 68px;
    padding: 0 1.5rem;
}

.odds-logo {
    align-items: center;
    color: var(--odds-text);
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 800;
    gap: 0.7rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.odds-logo-mark {
    align-items: center;
    background: linear-gradient(145deg, #3b82f6, var(--odds-blue-dark));
    border: 2px solid var(--odds-navy);
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    font-style: italic;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    letter-spacing: -0.08em;
    padding-right: 0.08em;
    width: 38px;
}

.odds-logo-wordmark {
    letter-spacing: -0.035em;
}

.odds-nav-links {
    align-items: center;
    display: flex;
    gap: 1.35rem;
    overflow-x: auto;
}

.odds-nav-item {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-size: 0.96rem;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 68px;
    padding-top: 0.15rem;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.odds-nav-item .nav-menu-icon {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: currentColor;
    height: 22px;
    width: 22px;
}

.odds-nav-item .nav-menu-svg {
    height: 19px;
    width: 19px;
}

.odds-nav-item:hover,
.odds-nav-item:focus {
    color: var(--odds-blue);
}

.odds-nav-item-active {
    color: var(--odds-blue);
}

.odds-nav-item-active::after {
    background: var(--odds-blue);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
}

.odds-page {
    padding: 2rem 1.5rem 3rem;
}

.odds-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 260px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1460px;
}

.odds-main,
.odds-sidebar {
    min-width: 0;
}

.league-header,
.match-card,
.sport-menu-card,
.odds-legend,
.odds-disclaimer,
.odds-state-card,
.seo-content-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.seo-breadcrumb {
    align-items: center;
    color: var(--odds-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
    margin: 0 0 0.55rem;
    padding: 0 0.25rem;
}

.seo-breadcrumb a {
    color: var(--odds-blue);
    text-decoration: none;
}

.seo-breadcrumb a:hover,
.seo-breadcrumb a:focus {
    text-decoration: underline;
}

.league-header {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
}

.league-heading-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.league-heading-main {
    align-items: center;
    display: flex;
    gap: 1rem;
    min-width: 0;
}

.league-sport-icon {
    align-items: center;
    background: var(--odds-blue);
    border-radius: 50%;
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.league-country-flag {
    align-items: center;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(15 23 42 / 0.12);
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 48px;
}

.league-country-flag img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.league-brand-logo {
    display: block;
    flex: 0 0 auto;
    height: 48px;
    object-fit: contain;
    width: 48px;
}

.league-eyebrow {
    color: var(--odds-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.league-header h1 {
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.15;
    margin: 0;
}

.league-updated {
    color: var(--odds-muted);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.league-heading-meta {
    align-items: flex-end;
    display: grid;
    gap: 0.4rem;
    justify-items: end;
}

.ev-model-status {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: var(--odds-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.3rem 0.65rem;
}

.ev-model-status:hover:not(:disabled),
.ev-model-status:focus-visible:not(:disabled) {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.ev-model-status:disabled {
    cursor: wait;
    opacity: 0.75;
}

.ev-model-status-dot {
    background: #d97706;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.ev-model-status-ready {
    color: #166534;
}

.ev-model-status-ready .ev-model-status-dot {
    background: #16a34a;
}

.ev-model-status-error {
    color: #991b1b;
}

.ev-model-status-error .ev-model-status-dot {
    background: #dc2626;
}

.league-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.filter-button,
.details-button {
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.filter-button {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    color: #334155;
    min-height: 40px;
    padding: 0.5rem 0.9rem;
}

.filter-button:hover:not(:disabled),
.filter-button:focus:not(:disabled) {
    border-color: var(--odds-blue);
    color: var(--odds-blue);
}

.filter-button-active {
    background: var(--odds-blue-soft);
    border-color: #bfdbfe;
    color: var(--odds-blue);
}

.filter-dropdown {
    position: relative;
}

.filter-menu {
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0.25rem;
    left: 0;
    margin-top: 0.45rem;
    min-width: 210px;
    padding: 0.45rem;
    position: absolute;
    top: 100%;
    z-index: 20;
}

.filter-menu-wide {
    max-height: 320px;
    min-width: 260px;
    overflow-y: auto;
}

.filter-menu-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    cursor: pointer;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    text-align: left;
    width: 100%;
}

.filter-menu-item:hover,
.filter-menu-item:focus,
.filter-menu-item-active {
    background: var(--odds-blue-soft);
    border-color: #bfdbfe;
    color: var(--odds-blue);
}

.filter-check {
    align-items: center;
    border: 1px solid var(--odds-border);
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.match-card-list {
    display: grid;
    gap: 0.7rem;
}

.match-card {
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.035);
    overflow: hidden;
}

.match-list-head {
    align-items: center;
    color: var(--odds-muted);
    display: grid;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.85rem;
    grid-template-columns: 82px minmax(195px, 0.55fr) minmax(390px, 1.25fr) minmax(240px, 0.8fr);
    letter-spacing: 0.08em;
    padding: 0 1rem 0.45rem;
    text-transform: uppercase;
}

.match-list-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.match-card-summary {
    align-items: center;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 82px minmax(195px, 0.55fr) minmax(390px, 1.25fr) minmax(240px, 0.8fr);
    padding: 0.85rem 1rem;
}

.match-time {
    align-items: center;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 82px;
    justify-content: center;
    padding-right: 1rem;
    text-align: center;
}

.match-time strong {
    color: var(--odds-blue);
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

.match-time span,
.versus-label,
.odds-box-label,
.odds-box-bookmaker,
.match-meta span {
    color: var(--odds-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.match-teams {
    display: grid;
    gap: 0.35rem;
}

.team-row {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 800;
}

.team-row-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    margin: -0.2rem -0.3rem;
    max-width: calc(100% + 0.6rem);
    padding: 0.2rem 0.3rem;
    text-align: left;
    width: fit-content;
}

.team-row-button:hover,
.team-row-button:focus-visible {
    background: var(--odds-blue-soft);
    color: var(--odds-blue-dark);
}

.team-row-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.24);
    outline-offset: 1px;
}

.team-placeholder {
    align-items: center;
    background: #e2e8f0;
    border-radius: 50%;
    color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.team-flag {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
    flex: 0 0 auto;
    height: 18px;
    object-fit: cover;
    width: 26px;
}

.team-logo {
    flex: 0 0 auto;
    height: 26px;
    object-fit: contain;
    width: 26px;
}

.team-logo-nhl {
    height: 28px;
    width: 28px;
}

.versus-label {
    margin-left: 2.05rem;
    text-transform: uppercase;
}

.odds-boxes {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: start;
    max-width: none;
    width: 100%;
}

.odds-boxes-two-way {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.odds-box {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    display: grid;
    gap: 0.14rem;
    min-height: 82px;
    padding: 0.55rem 0.6rem 0.65rem;
    text-align: center;
}

.odds-box-best {
    border-color: rgba(34, 197, 94, 0.48);
}

.odds-box:hover {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.odds-gap-yellow {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
    color: var(--odds-text);
}

.odds-gap-red {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
    color: var(--odds-text);
}

/* Informational only — a state with nothing to act on. Deliberately outside the yellow/red warning
   ladder: the admin status chips read as a queue of chores, and a count that no action can clear
   must not sit in that queue. */
.odds-gap-grey {
    background: #f1f5f9;
    border-color: var(--odds-gray);
    color: var(--odds-text);
}

.odds-box.odds-gap-yellow:hover {
    background: var(--odds-gap-yellow);
}

.odds-box.odds-gap-red:hover {
    background: var(--odds-gap-red);
}

.odds-box-head {
    align-items: center;
    display: flex;
    gap: 0.3rem;
    justify-content: space-between;
    min-width: 0;
}

.match-card-summary .odds-box-head {
    justify-content: center;
}

.match-card-summary .odds-box-label {
    display: none;
}

.odds-box-label {
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-best-tag {
    background: #dcfce7;
    border-radius: 999px;
    color: #15803d;
    flex: 0 1 auto;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0.12rem 0.28rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-gap-yellow .odds-best-tag {
    background: #fef3c7;
    color: #a16207;
}

.odds-gap-red .odds-best-tag {
    background: #fee2e2;
    color: #b91c1c;
}

.odds-box-value {
    color: var(--odds-text);
    font-size: 1.45rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.odds-box-price-row {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    min-width: 0;
}

.match-model-edge-button {
    align-items: center;
    align-self: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    gap: 0.16rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    white-space: nowrap;
}

.match-model-edge-button.ev-badge-positive {
    color: #15803d;
}

.match-model-edge-button.ev-badge-negative {
    color: #b91c1c;
}

.match-model-edge-button:hover,
.match-model-edge-button:focus-visible {
    background: #dbeafe;
    border-color: #60a5fa;
    outline: none;
}

/* The withheld figure. Shares the badge's geometry so the row does not reflow when a match kicks
   off, but neutral rather than green/red: it is the absence of a verdict, not a bad one. Kept
   focusable so the explanation is reachable without a pointer, since it is the only thing here
   carrying the reason. */
.match-model-edge-unknown,
.ev-badge-unknown {
    align-items: center;
    align-self: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: var(--odds-gray);
    cursor: help;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}

.match-model-edge-unknown:focus-visible,
.ev-badge-unknown:focus-visible {
    border-color: #94a3b8;
    outline: 2px solid #94a3b8;
    outline-offset: 1px;
}

.odds-box-bookmaker {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    text-align: right;
}

.match-controls {
    display: grid;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
}

.match-stats {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    justify-content: space-between;
}

.match-action-row {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.match-secondary-actions {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.match-secondary-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 750;
    gap: 0.4rem;
    justify-content: flex-start;
    min-height: 27px;
    padding: 0.22rem 0.35rem;
    text-align: left;
    width: fit-content;
}

.match-secondary-action svg {
    flex: 0 0 auto;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 16px;
}

.match-secondary-action:hover:not(:disabled),
.match-secondary-action:focus-visible:not(:disabled) {
    background: var(--odds-blue-soft);
    color: var(--odds-blue-dark);
}

.match-secondary-action:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 1px;
}

.match-secondary-action:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.details-button {
    background: var(--odds-blue);
    border: 1px solid var(--odds-blue);
    color: white;
    margin-top: 0.25rem;
    padding: 0.55rem 0.95rem;
}

.match-primary-action {
    border-radius: 9px;
    min-width: 76px;
    padding: 0.48rem 0.75rem;
}

.details-button:hover,
.details-button:focus {
    background: var(--odds-blue-dark);
    border-color: var(--odds-blue-dark);
    transform: translateY(-1px);
}

.details-button-active,
.details-button-active:hover,
.details-button-active:focus {
    background: var(--odds-text);
    border-color: var(--odds-text);
}

.match-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
    white-space: nowrap;
}

.extra-odds-button {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: flex-start;
    padding-inline: 0.35rem;
    width: fit-content;
}

.extra-odds-button .extra-odds-alert {
    align-items: center;
    background: #fee2e2;
    border-radius: 999px;
    color: #dc2626;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 900;
    height: 1.1rem;
    justify-content: center;
    line-height: 1;
    min-width: 1.1rem;
}

.match-controls .details-button {
    font-size: 0.8rem;
    margin-top: 0;
}

.match-details {
    background: #f8fafc;
    border-top: 1px solid var(--odds-border);
    padding: 1rem;
    overflow-x: auto;
}

.inner-table {
    background: white;
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.inner-table th,
.inner-table td {
    border: 1px solid var(--odds-border);
    padding: 0.7rem;
    text-align: left;
    vertical-align: middle;
}

/* Bets the model actually backed, so the selected-only profit can be checked against the list. */
.inner-table tr.scoring-selected-bet td {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 var(--odds-blue);
}

.inner-table th {
    background: #f1f5f9;
    color: #334155;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Whole detail row links out to the bookmaker's competition page. The anchor fills the cell
   (negative margin cancels the td padding) so any click in the row follows the link. */
.inner-table a.cell-link {
    color: inherit;
    display: block;
    margin: -0.7rem;
    padding: 0.7rem;
    text-decoration: none;
}

.inner-table tr.bookmaker-row-link {
    cursor: pointer;
}

.inner-table tr.bookmaker-row-link:hover {
    background: #f1f5f9;
}

.extra-odds-backdrop {
    background: rgba(15, 23, 42, 0.48);
    inset: 0;
    position: fixed;
    z-index: 80;
}

.extra-odds-modal {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    display: grid;
    gap: 1rem;
    left: 50%;
    max-height: calc(100vh - 3rem);
    overflow: auto;
    padding: 1.1rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 2rem));
    z-index: 81;
}

.team-details-modal {
    gap: 0.9rem;
    width: min(640px, calc(100vw - 2rem));
}

/* This panel is positioned with translate(-50%, -50%). Its entrance animation must preserve that
   centring transform, especially on a narrow screen where starting at left:50% clips the panel. */
.extra-odds-modal.team-details-modal {
    animation-name: team-details-dialog-in;
}

.team-details-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.team-details-heading .team-logo,
.team-details-heading .team-placeholder {
    height: 42px;
    width: 42px;
}

.team-details-heading .team-placeholder {
    border-radius: 12px;
}

.team-details-heading > div {
    min-width: 0;
}

.team-details-heading h2 {
    overflow-wrap: anywhere;
}

.team-details-context {
    align-items: center;
    color: var(--odds-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 800;
    gap: 0.4rem;
}

.team-details-state {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    color: #475569;
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    min-height: 100px;
    padding: 1rem;
    text-align: center;
}

.team-details-state-error {
    background: #fff7f7;
    border-color: #fecaca;
    color: #b91c1c;
}

.team-details-spinner {
    animation: team-details-spin 0.75s linear infinite;
    border: 3px solid #bfdbfe;
    border-radius: 50%;
    border-top-color: var(--odds-blue);
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}

.team-standing-summary {
    align-items: stretch;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
}

.team-standing-rank,
.team-standing-points {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem 1rem;
}

.team-standing-rank strong,
.team-standing-points strong {
    color: var(--odds-text);
    font-size: 1.65rem;
    letter-spacing: -0.04em;
    line-height: 1;
}

.team-standing-rank span,
.team-standing-points span {
    color: var(--odds-muted);
    font-size: 0.74rem;
    font-weight: 800;
    margin-top: 0.25rem;
}

.team-standing-points {
    border-left: 1px solid #bfdbfe;
    min-width: 100px;
    text-align: center;
}

.team-stat-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.team-stat-item {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-width: 0;
    padding: 0.7rem;
}

.team-stat-item dt {
    color: var(--odds-muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;
}

.team-stat-item dd {
    color: var(--odds-text);
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0.25rem 0 0;
}

.team-stat-positive dd {
    color: #15803d;
}

.team-stat-negative dd {
    color: #b91c1c;
}

.team-stat-model {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.team-stat-model dd {
    color: #1d4ed8;
}

.team-stat-grid-model-only {
    grid-template-columns: minmax(130px, 1fr);
    max-width: 160px;
}

.team-model-note {
    color: var(--odds-muted);
    font-size: 0.74rem;
    line-height: 1.5;
    margin: -0.1rem 0 0;
}

.team-model-note span {
    display: block;
}

@keyframes team-details-spin {
    to { transform: rotate(360deg); }
}

@keyframes team-details-dialog-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
    }
}

.odds-history-modal {
    gap: 0.85rem;
    overflow-x: hidden;
    overflow-y: auto;
    width: min(1040px, calc(100vw - 2rem));
}

.odds-history-modal > * {
    min-width: 0;
}

.odds-history-header {
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 0.75rem;
}

.odds-history-state {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
}

.odds-history-outcome-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
}

.odds-history-outcome-tab {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    min-height: 38px;
    overflow: hidden;
    padding: 0.45rem 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-history-outcome-tab:first-child {
    border-radius: 8px 0 0 8px;
}

.odds-history-outcome-tab:last-child {
    border-radius: 0 8px 8px 0;
}

.odds-history-outcome-tab + .odds-history-outcome-tab {
    border-left: 0;
}

.odds-history-outcome-tab:hover {
    background: #f8fafc;
}

.odds-history-outcome-tab-active,
.odds-history-outcome-tab-active:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.odds-history-summary-row {
    display: block;
}

.odds-history-title-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.odds-history-title-row h3 {
    color: #0b2340;
    font-size: 1.12rem;
    margin: 0;
}

.odds-history-title-row span,
.odds-history-updated {
    color: #64748b;
    font-size: 0.78rem;
}

.odds-history-updated {
    margin: 0.2rem 0 0;
}

.odds-history-best-card {
    align-items: baseline;
    background: #f0fdf8;
    border: 1px solid #70c7b6;
    border-radius: 9px;
    display: flex;
    gap: 0.65rem;
    justify-content: center;
    margin: 0;
    min-width: 0;
    padding: 0.6rem 1rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.odds-history-best-card span {
    color: #0f766e;
    font-size: 0.7rem;
    font-weight: 750;
}

.odds-history-best-card strong {
    color: #0f766e;
    font-size: 0.88rem;
}

.odds-history-best-card b {
    color: #08766b;
    font-size: 1.2rem;
    line-height: 1.05;
}

.odds-history-toolbar-row {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) minmax(0, 1fr);
}

.odds-history-series-control {
    justify-self: start;
    position: relative;
    width: fit-content;
    z-index: 2;
}

.odds-history-toolbar-spacer {
    min-width: 0;
}

.odds-history-series-button {
    align-items: center;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.78rem;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.35rem 0.65rem;
}

.odds-history-series-button > span:first-child {
    font-weight: 800;
}

.odds-history-series-button strong {
    background: #e8f0ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 0.7rem;
    padding: 0.12rem 0.4rem;
}

.odds-history-series-menu {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    display: grid;
    left: 0;
    min-width: 270px;
    padding: 0.45rem;
    position: absolute;
    top: calc(100% + 0.35rem);
}

.odds-history-series-menu p {
    color: #64748b;
    font-size: 0.7rem;
    margin: 0;
    padding: 0.25rem 0.4rem 0.4rem;
}

.odds-history-series-menu label {
    align-items: center;
    border-radius: 6px;
    color: #1e293b;
    cursor: pointer;
    display: grid;
    font-size: 0.78rem;
    gap: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.4rem;
}

.odds-history-series-menu label:hover {
    background: #f8fafc;
}

.odds-history-series-menu label strong {
    color: #0f766e;
}

.odds-history-series-menu .odds-history-series-option-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.odds-history-chart-panel,
.odds-history-table-panel {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-width: 0;
    padding: 0.85rem;
}

.odds-history-chart-scroll,
.odds-history-table-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.odds-history-chart {
    display: block;
    height: auto;
    min-width: 760px;
    outline: none;
    width: 100%;
}

.odds-history-chart:focus-visible {
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.odds-history-best-band {
    fill: #dff7ef;
    opacity: 0.7;
}

.odds-history-best-band-label {
    fill: #0f766e;
    font-size: 10px;
    font-weight: 750;
}

.odds-history-grid-line {
    stroke: #e2e8f0;
    stroke-width: 1;
}

.odds-history-axis-line {
    stroke: #94a3b8;
    stroke-width: 1.25;
}

.odds-history-x-tick {
    stroke: #94a3b8;
    stroke-width: 1;
}

.odds-history-axis-label {
    fill: #64748b;
    font-size: 11px;
}

.odds-history-axis-title {
    fill: #475569;
    font-size: 12px;
    font-weight: 750;
}

.odds-history-x-axis-label {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 750;
    margin: -0.3rem 0 0;
    text-align: center;
}

.odds-history-line {
    fill: none;
    stroke: var(--series-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.odds-history-end-point {
    fill: white;
    stroke: var(--series-color);
    stroke-width: 2.5;
}

.odds-history-end-connector {
    stroke: var(--series-color);
    stroke-width: 1.25;
}

.odds-history-end-label {
    fill: var(--series-color);
    font-size: 11px;
    font-weight: 800;
}

.odds-history-hit-area {
    fill: transparent;
    pointer-events: all;
}

.odds-history-crosshair {
    pointer-events: none;
    stroke: #94a3b8;
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

.odds-history-tooltip {
    pointer-events: none;
}

.odds-history-tooltip rect {
    fill: white;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.18));
    stroke: #d8e0ea;
}

.odds-history-tooltip-time {
    fill: #0f172a;
    font-size: 11px;
    font-weight: 800;
}

.odds-history-tooltip-value,
.odds-history-tooltip-odds {
    fill: #334155;
    font-size: 10px;
}

.odds-history-tooltip-odds {
    font-weight: 800;
}

.odds-history-details-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #0b2340;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    padding: 0;
    text-align: left;
    width: 100%;
}

.odds-history-details-toggle > span:first-child {
    display: grid;
    gap: 0.1rem;
}

.odds-history-details-toggle strong {
    font-size: 0.92rem;
}

.odds-history-details-toggle small {
    color: #64748b;
    font-size: 0.7rem;
}

.odds-history-details-toggle > span:last-child {
    color: #2563eb;
    font-size: 1.25rem;
    font-weight: 600;
}

.odds-history-table-scroll {
    margin-top: 0.75rem;
}

.odds-history-table {
    min-width: 520px;
}

.odds-history-table th:last-child,
.odds-history-table td:last-child {
    text-align: center;
}

.odds-history-load-more {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #334155;
    cursor: pointer;
    display: block;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    margin: 0.7rem auto 0;
    padding: 0.4rem 0.75rem;
}

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

.extra-odds-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.extra-odds-header h2 {
    font-size: 1.35rem;
    letter-spacing: 0;
    margin: 0;
}

.extra-odds-close {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 36px;
}

.extra-odds-close:hover,
.extra-odds-close:focus {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
    color: var(--odds-blue);
}

.extra-odds-tabs {
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    gap: 0.4rem;
}

.ev-model-notice {
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
    color: #92400e;
    display: flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.75rem;
    justify-content: space-between;
    margin: 0.65rem 0 0;
    padding: 0.5rem 0.65rem;
}

.ev-model-notice button {
    background: #fff;
    border: 1px solid #fbbf24;
    border-radius: 7px;
    color: #92400e;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    min-height: 30px;
    padding: 0.3rem 0.55rem;
}

.ev-model-notice button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.extra-odds-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #334155;
    font-weight: 900;
    padding: 0.65rem 0.75rem;
}

.extra-odds-tab:hover,
.extra-odds-tab:focus,
.extra-odds-tab-active {
    border-bottom-color: var(--odds-blue);
    color: var(--odds-blue);
}

.extra-odds-panels {
    display: grid;
    gap: 0.85rem;
}

.extra-odds-panel {
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    overflow: hidden;
}

.extra-odds-panel-header {
    align-items: center;
    background: #f8fafc;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
}

.extra-odds-panel-header h3 {
    font-size: 1rem;
    letter-spacing: 0;
    margin: 0;
}

.extra-odds-panel-header span {
    color: var(--odds-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.extra-odds-details {
    border-top: 1px solid var(--odds-border);
    padding: 0;
}

.extra-odds-table {
    min-width: 640px;
}

.card-total-grid {
    background: #f8fafc;
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
}

.card-total-line {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A 1X2-shaped market — most corners, most cards — needs the tie beside the two sides. */
.card-total-line-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The odds row is now a cell holding two controls: the price (expands the bookmaker list) and the
   EV badge (opens the explainer). Buttons cannot nest, so the border and highlight live on the
   wrapper and both children render flat inside it. */
.card-total-cell {
    align-items: stretch;
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

.card-total-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--odds-text);
    display: flex;
    flex: 1 1 auto;
    font-size: 0.84rem;
    /* Odds sit next to the label rather than pinned to the far right, leaving the right edge for
       the EV badge. This is the "move the odds a little to the left" change. */
    gap: 0.5rem;
    justify-content: flex-start;
    min-height: 38px;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    text-align: left;
}

.card-total-button > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-total-button > strong {
    flex: 0 0 auto;
}

.ev-badge {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 1px dashed var(--odds-border);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 600;
    justify-content: center;
    min-width: 58px;
    padding: 0.45rem 0.4rem;
}

.ev-badge-positive {
    color: #15803d;
}

.ev-badge-negative {
    color: #b91c1c;
}

.ev-badge:hover,
.ev-badge:focus {
    background: var(--odds-blue-soft);
}

.card-total-cell:has(.card-total-button:not(:disabled):hover),
.card-total-cell:has(.card-total-button:not(:disabled):focus) {
    border-color: #93c5fd;
}

.card-total-button:not(:disabled):hover,
.card-total-button:not(:disabled):focus {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
    color: var(--odds-blue);
}

.card-total-button:disabled {
    cursor: default;
    opacity: 0.45;
}

.card-total-cell.odds-gap-yellow {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
    color: var(--odds-text);
}

.card-total-cell.odds-gap-red {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
    color: var(--odds-text);
}

.card-total-cell.odds-gap-yellow:hover,
.card-total-cell.odds-gap-yellow:focus-within {
    background: var(--odds-gap-yellow);
    border-color: var(--odds-gap-yellow-border);
}

.card-total-cell.odds-gap-red:hover,
.card-total-cell.odds-gap-red:focus-within {
    background: var(--odds-gap-red);
    border-color: var(--odds-gap-red-border);
}

.card-total-provider-details {
    grid-column: 1 / -1;
    overflow-x: auto;
}

.card-total-provider-table {
    background: #fff;
    min-width: 420px;
}

@media (max-width: 640px) {
    .card-total-line,
    .card-total-line-three {
        grid-template-columns: 1fr;
    }
}

.odds-state-card {
    color: var(--odds-muted);
    font-weight: 800;
    padding: 2rem;
    text-align: center;
}

.odds-error {
    color: #b91c1c;
}

.sport-menu-card {
    padding: 1.05rem 0.85rem 1.15rem;
    position: sticky;
    top: 96px;
}

.sport-menu-card h2 {
    align-items: center;
    color: var(--odds-text);
    display: flex;
    font-size: 1.08rem;
    gap: 0.6rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Accent bar reading as the head of the tree the menu below draws. */
.sport-menu-card h2::before {
    background: linear-gradient(180deg, #60a5fa, var(--odds-blue-dark));
    border-radius: 999px;
    content: "";
    display: block;
    flex: none;
    height: 18px;
    width: 4px;
}

/* Nestable menu (NavMenuTree/NavMenuNode). The odds sidebar uses three levels:
   l0 = sport, l1 = country branch or country-less league link, l2 = league link under a country. */
.nav-menu {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.nav-menu-group-l0 + .nav-menu-group-l0 {
    margin-top: 0;
}

.nav-menu-branch,
.nav-menu-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    display: flex;
    gap: 0.65rem;
    /* Own stacking context, so the hover wipe below sits under the row's own content
       (z-index: -1) without escaping behind the card. */
    isolation: isolate;
    min-height: 40px;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.28s ease;
    width: 100%;
}

/* Hover/focus wipe: a gradient that sweeps in from the left edge of every interactive row. */
.nav-menu-branch-toggle::after,
.nav-menu-link::after {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.02));
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transform: scaleX(0.35);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    z-index: -1;
}

.nav-menu-branch-toggle:hover::after,
.nav-menu-branch-toggle:focus-visible::after,
.nav-menu-link:hover::after,
.nav-menu-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.nav-menu-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Collapsible branches are buttons; keep the level rules below in charge of size/spacing. */
.nav-menu-branch-toggle {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}

.nav-menu-branch-l0 {
    color: var(--odds-text);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    min-height: 46px;
    padding: 0.4rem 0.5rem;
}

.nav-menu-branch-l1 {
    font-size: 0.93rem;
    font-weight: 750;
    padding: 0.36rem 0.5rem;
}

.nav-menu-branch-toggle:hover,
.nav-menu-link:hover,
.nav-menu-link:focus {
    color: var(--odds-blue-dark);
}

.nav-menu-branch-l0.nav-menu-branch-active {
    background: transparent;
    color: var(--odds-text);
}

.nav-menu-branch-l1.nav-menu-branch-active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0));
    color: var(--odds-blue-dark);
}

/* Expand/collapse. The children stay in the DOM (see NavMenuNode), while the grid track removes a
   closed branch from layout. Do not transition this track: Chromium can leave an interactive
   0fr -> 1fr track stuck at zero when the nested rows transition at the same time. The child-row
   opacity/transform transitions below provide the reveal instead. */
.nav-menu-collapse {
    display: grid;
    /* minmax(0, …) rather than a bare 0fr: the track's automatic minimum is the item's
       min-content height, which its padding alone would keep above zero. */
    grid-template-rows: minmax(0, 0fr);
}

.nav-menu-collapse-open {
    grid-template-rows: minmax(0, 1fr);
}

.nav-menu-collapse > .nav-menu-children {
    min-height: 0;
    overflow: hidden;
    transition: visibility 0s linear 0.34s;
    visibility: hidden;
}

.nav-menu-collapse-open > .nav-menu-children {
    transition-delay: 0s;
    visibility: visible;
}

/* Rows drop in one after another as their branch opens.
   Deliberately a transition and not a keyframe animation: an animation replays on every first
   paint of an element, and this page prerenders before its circuit connects, so the menu is
   painted twice — the reveal visibly ran twice on every refresh. A transition has no previous
   value to animate from on first paint, so it stays silent on load and fires only on a real
   toggle. Longhand properties so the stagger delay lands on opacity/transform alone and leaves
   these rows' own hover transitions instant. */
/* The two states are mutually exclusive by selector rather than by source order: both carried
   identical specificity when the closed rule was written as a bare .nav-menu-collapse, and a
   branch opened by clicking stayed stuck in the closed state. */
.nav-menu-collapse > .nav-menu-children > * {
    transition-property: opacity, transform, color, border-color, box-shadow;
    transition-duration: 0.28s, 0.34s, 0.2s, 0.2s, 0.28s;
    transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), ease, ease, ease;
}

.nav-menu-collapse:not(.nav-menu-collapse-open) > .nav-menu-children > * {
    opacity: 0;
    transform: translateY(-9px);
}

.nav-menu-collapse.nav-menu-collapse-open > .nav-menu-children > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--nav-i, 0) * 45ms), calc(var(--nav-i, 0) * 45ms), 0s, 0s, 0s;
}

.nav-menu-children {
    display: grid;
    gap: 0.12rem;
    position: relative;
}

.nav-menu-children-l0 {
    /* Bottom padding is inside the overflow box above, so an active row's glow is not clipped. */
    margin: 0.18rem 0 0 1rem;
    padding: 0.1rem 0.2rem 0.7rem 0.9rem;
}

.nav-menu-children-l0::before,
.nav-menu-children-l1::before {
    background: linear-gradient(180deg, #cbd8e8, #e4ecf6);
    border-radius: 999px;
    bottom: 0.9rem;
    content: "";
    left: 0.2rem;
    position: absolute;
    top: 0.5rem;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    width: 1.5px;
}

/* The guide line draws itself downwards as the branch opens. */
.nav-menu-collapse-open > .nav-menu-children::before {
    transform: scaleY(1);
}

.nav-menu-group-l1,
.nav-menu-link-l1,
.nav-menu-link-l2 {
    position: relative;
}

.nav-menu-group-l1::before,
.nav-menu-link-l1::before,
.nav-menu-link-l2::before {
    border-top: 1.5px solid #d8e2ee;
    content: "";
    left: -0.7rem;
    position: absolute;
    top: 20px;
    transition: border-color 0.2s ease, width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    width: 0.7rem;
}

.nav-menu-children-l1 {
    margin: 0 0 0.16rem 1.15rem;
    padding: 0.06rem 0.2rem 0.6rem 0.75rem;
}

.nav-menu-link-l1 {
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.38rem 0.5rem;
}

.nav-menu-link-l2 {
    font-size: 0.92rem;
    font-weight: 650;
    min-height: 40px;
    padding: 0.34rem 0.6rem;
}

/* Selected league: a quiet tinted surface carrying a blue marker, rather than a saturated pill.
   Weight and the marker do the work, so it reads as "you are here" without dominating the menu. */
.nav-menu-link-active,
.nav-menu-link-active:focus {
    background: linear-gradient(90deg, #eef3f9, #f7fafd);
    border-color: #dbe4f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--odds-text);
    font-weight: 800;
}

.nav-menu-link-active:hover {
    background: linear-gradient(90deg, #e6edf7, #f2f7fc);
    border-color: #cfdcee;
    color: var(--odds-text);
}

/* Reuses the hover-wipe pseudo-element as the selection marker: on the active row the wipe is
   replaced by a bar pinned to the left edge. */
.nav-menu-link-active::after {
    background: linear-gradient(180deg, #60a5fa, var(--odds-blue-dark));
    border-radius: 999px;
    bottom: 9px;
    left: 4px;
    opacity: 1;
    right: auto;
    top: 9px;
    transform: none;
    width: 3px;
}

/* Light up the tree branch that leads to the open league. */
.nav-menu-link-active::before {
    border-top-color: var(--odds-blue);
    width: 0.85rem;
}

.nav-menu-branch:focus-visible,
.nav-menu-link:focus-visible,
.sidebar-close:focus-visible,
.mobile-league-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.nav-menu-icon {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #18324d;
    display: inline-flex;
    flex: none;
    height: 32px;
    justify-content: center;
    width: 32px;
}

/* Sidebar-only tile treatment; the top nav reuses .nav-menu-icon as a bare glyph slot. */
.nav-menu .nav-menu-icon {
    background: linear-gradient(150deg, #ffffff, #eaf1fa);
    border-color: #d5dfec;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    height: 34px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, color 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 34px;
}

/* Hovering anywhere inside a sport lights its tile — the l0 row itself is not clickable. */
.nav-menu-group-l0:hover > .nav-menu-branch-l0 .nav-menu-icon,
.nav-menu-group-l0:focus-within > .nav-menu-branch-l0 .nav-menu-icon {
    border-color: #b9cdea;
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.14);
    color: var(--odds-blue-dark);
    transform: translateY(-1px);
}

.nav-menu .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon,
.nav-menu-group-l0:hover > .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon {
    background: linear-gradient(140deg, #3b82f6, #1b45c4);
    border-color: transparent;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.32);
    color: white;
}

.nav-menu-group-l0:hover > .nav-menu-branch-l0.nav-menu-branch-active .nav-menu-icon {
    transform: translateY(-1px) scale(1.04);
}

.nav-menu-svg {
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
    width: 20px;
}

.nav-menu-svg-fill {
    fill: currentColor;
    stroke: none;
}

.nav-menu-flag {
    border: 1px solid var(--odds-border);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    flex: none;
    height: 16px;
    object-fit: cover;
    transition: box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 24px;
}

.nav-menu-branch-toggle:hover .nav-menu-flag,
.nav-menu-link:hover .nav-menu-flag {
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
    transform: scale(1.1);
}

.nav-menu-chevron {
    align-items: center;
    color: #7d8da6;
    display: inline-flex;
    flex: none;
    height: 16px;
    justify-content: center;
    transition: color 0.2s ease, transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    width: 16px;
}

.nav-menu-chevron svg {
    fill: none;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 15px;
}

/* One chevron glyph for both states: it rotates rather than being swapped out. */
.nav-menu-branch-open .nav-menu-chevron {
    color: var(--odds-blue);
    transform: rotate(90deg);
}

.nav-menu-link:hover .nav-menu-chevron,
.nav-menu-link:focus .nav-menu-chevron {
    color: var(--odds-blue);
    transform: translateX(3px);
}

.nav-menu-link-active .nav-menu-chevron,
.nav-menu-link-active:hover .nav-menu-chevron {
    color: var(--odds-blue);
    transform: translateX(2px);
}

.landing-layout {
    margin: 0 auto;
    max-width: 1240px;
}

.landing-red-note {
    color: var(--odds-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0.9rem 0 0;
}

.odds-boxes-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 220px;
}

.landing-sport-section {
    border-top: 1px solid #dbe2ea;
    margin-bottom: 2.25rem;
    padding-top: 1rem;
}

.landing-sport-heading {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    font-weight: 800;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

/* Leagues share a row when their fixtures fit in one. The flow is a three-column grid and each
   block spans one column per fixture (--landing-block-cards, set inline from the match count), so
   a two-fixture league can share a row with a one-fixture league. minmax(0, …) lets the columns
   shrink below the card width rather than overflow on a narrow window. */
.landing-league-flow {
    --landing-card-width: 330px;
    --landing-card-gap: 0.85rem;
    display: grid;
    gap: 1.35rem var(--landing-card-gap);
    grid-template-columns: repeat(3, minmax(0, var(--landing-card-width)));
    max-width: calc((3 * var(--landing-card-width)) + (2 * var(--landing-card-gap)));
}

.landing-league-block {
    border-left: 3px solid #bfdbfe;
    display: grid;
    grid-column: span var(--landing-block-cards, 3);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0 0 1.1rem 1rem;
}

.landing-league-heading {
    align-items: center;
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(239, 246, 255, 0));
    border-bottom: 1px solid #dbeafe;
    border-top: 1px solid #dbeafe;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0 0 0.85rem -1rem;
    padding: 0.55rem 0 0.55rem 1rem;
}

.landing-league-heading h3 {
    font-size: 1.02rem;
    margin: 0;
}

.landing-league-link {
    color: var(--odds-blue);
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.landing-league-link:hover {
    text-decoration: underline;
}

/* One column per fixture, matching the columns the block was given in the flow above, so the cards
   line up with the row the block sits in. */
.landing-match-grid {
    --landing-card-gap: 0.85rem;
    align-items: stretch;
    display: grid;
    gap: var(--landing-card-gap);
    grid-template-columns: repeat(var(--landing-block-cards, 3), minmax(0, 1fr));
}

/* Too narrow to pack two leagues side by side: blocks go back to a full-width row each, and the
   cards inside fit as many per line as the window allows — the behaviour before packing existed. */
@media (max-width: 1080px) {
    .landing-league-flow {
        display: block;
    }

    .landing-league-block {
        margin-bottom: 1.5rem;
    }

    .landing-match-grid {
        grid-template-columns: repeat(auto-fill, minmax(0, var(--landing-card-width, 330px)));
        max-width: calc((3 * 330px) + (2 * var(--landing-card-gap)));
    }
}

/* Below roughly 640px only one column fits anyway, so holding the cards at a fixed width would
   just leave dead space down the right of a phone screen. Let them fill instead. */
@media (max-width: 640px) {
    .landing-match-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

.landing-match-card {
    display: grid;
    min-width: 0;
}

.landing-match-card-summary {
    display: grid;
    gap: 0.65rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0.75rem;
}

.landing-match-topline {
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    min-width: 0;
    padding-bottom: 0.45rem;
}

.landing-match-time {
    align-items: flex-start;
    border-right: 0;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    text-align: left;
}

.landing-match-time strong {
    font-size: 1.15rem;
    letter-spacing: 0;
    line-height: 1;
}

.landing-bookmaker-count {
    color: var(--odds-muted);
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-match-teams {
    gap: 0.2rem;
    min-height: 58px;
}

.landing-match-teams .team-row {
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 0;
}

.landing-match-teams .team-row span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-match-teams .team-placeholder {
    height: 18px;
    width: 18px;
}

.landing-match-teams .versus-label {
    display: none;
}

.landing-teams-odds {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    min-width: 0;
}

.landing-teams-odds .landing-match-teams {
    flex: 1 1 10rem;
    min-width: 0;
}

/* Red 1X2 boxes sit to the right of the team names, hugging their content width. */
.landing-red-odds {
    display: flex;
    flex: 0 1 auto;
    gap: 0.4rem;
    max-width: none;
    width: auto;
}

.landing-red-odds .odds-box {
    border-radius: 10px;
    gap: 0.05rem;
    min-height: 58px;
    min-width: 76px;
    padding: 0.38rem 0.3rem;
}

.landing-red-odds .odds-box-label,
.landing-red-odds .odds-box-bookmaker {
    font-size: 0.58rem;
    letter-spacing: 0;
}

.landing-red-odds .odds-box-value {
    font-size: 1.08rem;
    line-height: 1.05;
}

.landing-match-actions {
    display: flex;
    justify-content: flex-end;
}

.landing-match-actions .details-button {
    font-size: 0.74rem;
    margin-top: 0;
    padding: 0.3rem 0.7rem;
}

.odds-legend {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding: 1rem;
}

.legend-item {
    align-items: flex-start;
    display: flex;
    gap: 0.7rem;
}

.legend-item strong {
    display: block;
    margin-bottom: 0.2rem;
}

.legend-item p {
    color: var(--odds-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    margin: 0;
}

.odds-disclaimer {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
    display: grid;
    gap: 0.35rem;
    line-height: 1.45;
    margin-top: 1rem;
    padding: 1rem;
}

.odds-disclaimer strong {
    color: #7c2d12;
}

.seo-content-card {
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.45rem);
}

.seo-content-card h2 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
}

.seo-content-card p {
    color: #334155;
    font-size: 0.94rem;
    line-height: 1.65;
    margin: 0;
    max-width: 92ch;
}

.seo-content-card p + p {
    margin-top: 0.75rem;
}

/* The homepage copy links out to every league page, so these need to read as links inside a
   paragraph rather than inherit whatever the global anchor style happens to be. */
.seo-content-card p a {
    color: var(--odds-blue);
    font-weight: 600;
    text-decoration: none;
}

.seo-content-card p a:hover,
.seo-content-card p a:focus-visible {
    text-decoration: underline;
}

.seo-related-links {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
}

.seo-related-links strong {
    color: var(--odds-muted);
    font-size: 0.82rem;
}

.seo-related-links a {
    background: var(--odds-blue-soft);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: var(--odds-blue-dark);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.6rem;
    text-decoration: none;
}

.seo-related-links a:hover,
.seo-related-links a:focus {
    border-color: #60a5fa;
}

.legend-swatch {
    border-radius: 5px;
    flex: 0 0 auto;
    height: 16px;
    margin-top: 0.15rem;
    width: 16px;
}

.legend-best {
    background: var(--odds-green);
}

.legend-gap-yellow {
    background: var(--odds-gap-yellow);
    border: 1px solid var(--odds-gap-yellow-border);
}

.legend-gap-red {
    background: var(--odds-gap-red);
    border: 1px solid var(--odds-gap-red-border);
}


.sport-menu-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 0.4rem;
}

.mobile-league-button,
.sidebar-close,
.sidebar-backdrop {
    display: none;
}

/* The sidebar plus the four-column match card needs a wide viewport; the sidebar
   itself only folds away at 1080px. Reflow the card in between, otherwise its columns hit their
   minimums, the grid overflows and .match-card's overflow:hidden clips the action buttons. */
@media (max-width: 1320px) {
    .match-list-head {
        display: none;
    }

    .match-card-summary {
        grid-template-columns: 82px minmax(180px, 0.65fr) minmax(360px, 1.35fr);
    }

    /* Scoped to the match card: .match-meta is also used by the Formula 1 outright header,
       whose own grid still fits at these widths. */
    .match-card-summary .match-meta {
        align-items: center;
        border-top: 1px solid #e2e8f0;
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.75rem;
        text-align: left;
    }

    .match-card-summary .match-stats {
        justify-content: flex-start;
        text-align: right;
    }

    .match-card-summary .match-controls {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 1080px) {
    .odds-layout {
        grid-template-columns: 1fr;
    }

    .odds-sport-sidebar {
        bottom: 0;
        left: 0;
        margin: 0;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        width: min(88vw, 340px);
        z-index: 70;
    }

    .odds-sidebar-open {
        transform: translateX(0);
    }

    .sport-menu-card {
        border-radius: 0 24px 24px 0;
        box-shadow: 18px 0 40px rgba(15, 23, 42, 0.16);
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
        padding-left: max(0.85rem, env(safe-area-inset-left));
        padding-top: max(1.05rem, env(safe-area-inset-top));
        position: static;
    }

    .sport-menu-head {
        background: var(--odds-card);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .nav-menu-branch,
    .nav-menu-link {
        min-height: 44px;
    }

    .sidebar-close {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--odds-border);
        border-radius: 10px;
        color: var(--odds-muted);
        cursor: pointer;
        display: inline-flex;
        font-size: 1rem;
        font-weight: 800;
        height: 38px;
        justify-content: center;
        padding: 0;
        width: 38px;
    }

    .sidebar-close:hover {
        background: var(--odds-blue-soft);
        border-color: #bfdbfe;
        color: var(--odds-blue-dark);
    }

    .sidebar-backdrop {
        backdrop-filter: blur(2px);
        background: rgba(15, 23, 42, 0.48);
        display: block;
        inset: 0;
        position: fixed;
        z-index: 60;
    }

    .mobile-league-button {
        align-items: center;
        background: var(--odds-card);
        border: 1px solid var(--odds-border);
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
        cursor: pointer;
        display: inline-flex;
        font-weight: 800;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.55rem 1rem;
    }

    .match-card-summary {
        grid-template-columns: 82px minmax(150px, 1fr) minmax(250px, 1.25fr);
    }

    .match-meta {
        align-items: center;
        border-top: 1px solid #e2e8f0;
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 0.75rem;
        text-align: left;
    }

    .match-stats {
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .odds-sport-sidebar,
    .nav-menu-branch,
    .nav-menu-link,
    .nav-menu-chevron,
    .nav-menu-collapse,
    .nav-menu-collapse > .nav-menu-children,
    .nav-menu .nav-menu-icon,
    .nav-menu-flag,
    .nav-menu-branch-toggle::after,
    .nav-menu-link::after,
    .nav-menu-group-l1::before,
    .nav-menu-link-l1::before,
    .nav-menu-link-l2::before,
    .nav-menu-children-l0::before,
    .nav-menu-children-l1::before {
        transition: none;
    }

    /* Keep the state, drop the movement: rows appear immediately and the guide lines are drawn. */
    .nav-menu-collapse > .nav-menu-children > * {
        transition: none;
    }

    .nav-menu-children-l0::before,
    .nav-menu-children-l1::before {
        transform: none;
    }
}

@media (max-width: 760px) {
    .odds-top-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
        min-height: 0;
        padding: 1rem;
    }

    .odds-nav-links {
        gap: 1rem;
        max-width: 100%;
        padding-bottom: 0.15rem;
    }

    .odds-nav-item {
        min-height: 38px;
    }

    .odds-logo-mark {
        border-radius: 9px;
        height: 34px;
        width: 34px;
    }

    .odds-page {
        padding: 1rem;
    }

    .league-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .league-heading-meta {
        align-items: start;
        justify-items: start;
    }

    .league-header {
        position: static;
    }

    .league-filters {
        align-items: stretch;
    }

    .filter-button {
        flex: 1 1 145px;
    }

    .match-card-summary {
        gap: 0.5rem;
        grid-template-columns: 1fr;
        padding: 0.65rem 0.75rem;
    }

    .match-time {
        align-items: center;
        border-bottom: 1px solid #e2e8f0;
        border-right: 0;
        flex-direction: row;
        justify-content: space-between;
        min-height: 0;
        padding: 0 0 0.4rem;
        text-align: left;
    }

    .match-time strong {
        font-size: 1.05rem;
    }

    .match-teams {
        gap: 0.15rem;
    }

    .team-row {
        font-size: 0.9rem;
        gap: 0.4rem;
    }

    .team-details-modal {
        max-height: calc(100vh - 1rem);
        padding: 0.85rem;
        width: calc(100vw - 1rem);
    }

    .team-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-stat-grid-model-only {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .team-placeholder {
        height: 18px;
        width: 18px;
    }

    .versus-label {
        display: none;
    }

    .odds-boxes {
        gap: 0.4rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .odds-boxes-two-way {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .odds-box {
        border-radius: 12px;
        gap: 0.1rem;
        min-height: 0;
        padding: 0.4rem 0.3rem;
    }

    .odds-box-head {
        justify-content: center;
    }

    .odds-best-tag {
        display: none;
    }

    .match-card-summary .odds-box-label {
        display: block;
    }

    .odds-box-value {
        font-size: 1.05rem;
    }

    .odds-box-price-row {
        gap: 0.2rem;
    }

    .match-model-edge-button {
        font-size: 0.56rem;
        padding: 0.16rem 0.24rem;
    }

    .match-time span,
    .odds-box-label,
    .odds-box-bookmaker {
        font-size: 0.62rem;
    }

    .match-meta {
        border-top: 0;
        display: block;
        padding-top: 0;
        width: 100%;
    }

    .match-meta span {
        font-size: 0.68rem;
    }

    .details-button {
        font-size: 0.75rem;
        margin-top: 0;
        padding: 0.3rem 0.7rem;
        width: auto;
    }

    .match-controls,
    .match-card-summary .match-controls {
        gap: 0.4rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .match-action-row {
        align-items: end;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .match-secondary-action {
        font-size: 0.72rem;
        min-height: 25px;
    }

    .match-actions {
        gap: 0.4rem;
        justify-content: flex-end;
        margin-top: 0;
        width: 100%;
    }

    .extra-odds-button {
        font-size: 0.75rem;
        margin-top: 0;
        padding: 0.22rem 0.35rem;
        width: fit-content;
    }

    .match-history-action {
        width: auto;
    }

    .match-details {
        overflow-x: auto;
    }

    .extra-odds-modal {
        border-radius: 10px;
        max-height: calc(100vh - 1rem);
        padding: 0.85rem;
        width: calc(100vw - 1rem);
    }

    .odds-history-outcome-tabs {
        max-width: none;
    }

    .odds-history-outcome-tab {
        font-size: 0.72rem;
        padding-inline: 0.45rem;
    }

    .odds-history-summary-row {
        display: block;
    }

    .odds-history-best-card {
        gap: 0.35rem;
        grid-column: 2;
        justify-content: center;
        min-width: 0;
        padding-inline: 0.45rem;
        text-align: center;
        width: 100%;
    }

    .odds-history-best-card span {
        font-size: 0.62rem;
    }

    .odds-history-best-card strong {
        font-size: 0.76rem;
    }

    .odds-history-best-card b {
        font-size: 1.05rem;
    }

    .odds-history-toolbar-row {
        gap: 0.5rem;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .odds-history-toolbar-spacer {
        display: none;
    }

    .odds-history-series-control,
    .odds-history-series-button {
        width: auto;
    }

    .odds-history-series-button {
        justify-content: space-between;
    }

    .odds-history-series-menu {
        min-width: 100%;
        right: 0;
    }

    .odds-history-chart-panel,
    .odds-history-table-panel {
        padding: 0.6rem;
    }

    .extra-odds-header h2 {
        font-size: 1.05rem;
    }

    .extra-odds-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .odds-legend {
        grid-template-columns: 1fr;
    }

    .landing-sport-heading {
        font-size: 1.05rem;
    }

    .landing-league-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }
}

.admin-actions,
.admin-section-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.alias-sport-heading {
    border-bottom: 2px solid var(--odds-border);
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.35rem;
}

.alias-sport-filters {
    margin-top: 0.5rem;
}

.alias-sport-label {
    color: var(--odds-muted);
    font-weight: 800;
    min-width: 84px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.admin-actions {
    margin: 1rem 0;
}

/* The logout control is a POST form; collapse the form box so its button aligns with the sibling
   nav links instead of breaking onto its own line. */
.admin-logout-form {
    display: contents;
}

.admin-help-text,
.admin-status {
    color: var(--odds-muted);
    font-weight: 700;
}

.admin-section {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    margin-top: 1rem;
    padding: 1.25rem;
}

/* League tabs. Same pill buttons as the page nav above them, separated by a rule so the two rows
   do not read as one long list of links. */
.admin-tabs {
    align-items: center;
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding-bottom: 0.75rem;
}

.scoring-tab-flag {
    color: var(--odds-gap-red-border);
    font-size: 0.7rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.scoring-status-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    margin: 0.1rem 0.25rem 0.1rem 0;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

/* Wide report tables scroll inside their own box rather than pushing the page sideways. */
.admin-table-scroll {
    overflow-x: auto;
}

/* A table cell that jumps to another tab: a button, because it changes local state rather than
   navigating, but it should read as the link it behaves like. */
.inner-table .cell-link-button {
    background: none;
    border: none;
    color: var(--odds-blue);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 0;
    text-align: left;
}

.inner-table .cell-link-button:hover {
    text-decoration: underline;
}

.admin-section-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.admin-section-heading h2 {
    margin: 0;
}

.ingestion-league-list {
    display: grid;
}

.ingestion-league-entry {
    border-top: 1px solid var(--odds-border);
}

.ingestion-league-entry:first-child {
    border-top: 0;
}

.ingestion-league-row,
.ingestion-league-toggle,
.ingestion-substat-item {
    align-items: center;
    display: flex;
}

.ingestion-league-row {
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.45rem 0;
}

.ingestion-league-toggle {
    gap: 0.45rem;
}

.admin-section .ingestion-expand-button {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    color: var(--odds-blue-dark);
    display: inline-flex;
    font-size: 1.15rem;
    height: 26px;
    justify-content: center;
    line-height: 1;
    min-height: 26px;
    padding: 0;
    width: 26px;
}

.admin-section .ingestion-expand-button:hover {
    background: #dbeafe;
}

.ingestion-substat-options {
    background: #f8fafc;
    border-left: 2px solid #bfdbfe;
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.55rem 0.8rem;
    padding: 0.55rem 0.75rem 0.55rem 1.15rem;
}

.ingestion-substat-item {
    gap: 0.35rem;
    min-height: 26px;
    width: fit-content;
}

.ingestion-substat-branch {
    color: var(--odds-muted);
    font-weight: 800;
    margin-right: 0.1rem;
}

@media (max-width: 720px) {
    .ingestion-league-row {
        align-items: flex-start;
    }

    .ingestion-substat-options {
        margin-left: 0.4rem;
        padding-left: 0.85rem;
    }
}

.admin-card {
    border-top: 1px solid var(--odds-border);
    padding: 1rem 0;
}

.admin-card:first-of-type {
    border-top: 0;
}

.admin-card input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-height: 38px;
    padding: 0.45rem 0.7rem;
}

.admin-card button,
.admin-section button,
table button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 38px;
    padding: 0.45rem 0.8rem;
}

.admin-card li button {
    margin-left: 0.5rem;
}

.admin-card button:hover,
.admin-section button:hover,
table button:hover {
    background: var(--odds-blue-dark);
}

.admin-card button:disabled,
.admin-section button:disabled,
table button:disabled {
    background: var(--odds-gray);
    cursor: not-allowed;
}

.admin-section .admin-danger-button:not(:disabled),
table .admin-danger-button:not(:disabled) {
    background: #dc2626;
}

.admin-section .admin-danger-button:hover:not(:disabled),
table .admin-danger-button:hover:not(:disabled) {
    background: #b91c1c;
}

.admin-danger-zone {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 16px;
    color: #7f1d1d;
    margin-top: 1rem;
    padding: 1rem;
}

.admin-danger-zone p {
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.login-page {
    align-items: center;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    max-width: 420px;
    padding: 2rem;
    width: 100%;
}

.login-card h1 {
    margin-top: 0;
}

.login-card form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.login-card label {
    font-weight: 800;
}

.login-card input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
}

.login-card button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
}

.login-card button:hover {
    background: var(--odds-blue-dark);
}

.login-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-weight: 700;
    padding: 0.75rem;
}

.disclaimer-link {
    color: #9a3412;
    font-weight: 700;
    text-decoration: underline;
}

.disclaimer-link:hover {
    color: #7c2d12;
}

.privacy-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.privacy-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    line-height: 1.6;
    max-width: 760px;
    padding: 2rem;
    width: 100%;
}

.privacy-card h1 {
    margin-top: 0;
}

.privacy-card h2 {
    margin-top: 1.5rem;
}

.privacy-updated {
    color: var(--odds-muted);
    font-size: 0.88rem;
}

.privacy-cookie-table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.privacy-cookie-table th,
.privacy-cookie-table td {
    border-bottom: 1px solid var(--odds-border);
    padding: 0.6rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.privacy-back {
    margin-top: 2rem;
}

.audit-pagination {
    margin: 0;
}

.audit-status {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
}

.audit-status-completed {
    background: #dcfce7;
    color: #166534;
}

.audit-status-warning,
.audit-status-running {
    background: #fef3c7;
    color: #92400e;
}

.audit-status-failed,
.audit-status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.audit-expanded-row > td {
    background: #f8fafc;
    padding: 1rem;
}

.audit-child-table {
    margin: 0;
}

.audit-bookmaker-row {
    cursor: pointer;
}

.audit-bookmaker-row:hover > td,
.audit-bookmaker-row:focus-visible > td {
    background: #f1f5ff;
}

.audit-bookmaker-row:focus-visible {
    outline: 2px solid var(--odds-blue);
    outline-offset: -2px;
}

.audit-bookmaker-button {
    align-items: center;
    background: transparent !important;
    color: var(--odds-blue) !important;
    display: inline-flex;
    gap: 0.35rem;
    min-height: 0 !important;
    padding: 0.2rem 0 !important;
    text-align: left;
}

.audit-bookmaker-button:hover {
    color: var(--odds-blue-dark) !important;
    text-decoration: underline;
}

.audit-source-expanded-row > td {
    background: #eef4ff;
    padding: 0.75rem;
}

.audit-source-details {
    display: grid;
    gap: 0.75rem;
}

.audit-browser-summary {
    align-items: center;
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(140px, 1fr) repeat(3, minmax(145px, auto));
    padding: 0.65rem 0.8rem;
}

.audit-browser-summary span {
    display: grid;
    gap: 0.1rem;
}

.audit-browser-summary small {
    color: var(--odds-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.audit-source-table-scroll {
    overflow-x: auto;
}

.audit-source-table {
    margin: 0;
    min-width: 920px;
    table-layout: fixed;
    width: 100%;
}

.audit-source-table th:nth-child(1) {
    width: 4%;
}

.audit-source-table th:nth-child(2) {
    width: 9%;
}

.audit-source-table th:nth-child(3) {
    width: 15%;
}

.audit-source-table th:nth-child(4) {
    width: 31%;
}

.audit-source-table th:nth-child(5),
.audit-source-table th:nth-child(6) {
    width: 16%;
}

.audit-source-table th:nth-child(7) {
    width: 9%;
}

.audit-source-expand-button {
    align-items: center;
    display: inline-flex;
    height: 1.65rem;
    justify-content: center;
    min-width: 1.65rem;
    padding: 0;
}

.audit-substat-expanded-row > td {
    background: #f8fbff;
    padding: 0.65rem;
}

.audit-substat-table-scroll {
    overflow-x: auto;
}

.audit-substat-table {
    font-size: 0.76rem;
    margin: 0;
    min-width: 1850px;
    width: 100%;
}

.audit-substat-table th,
.audit-substat-table td {
    padding: 0.45rem 0.55rem;
    vertical-align: top;
}

.audit-source-url-cell a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-source-failed td:nth-child(3) {
    color: #991b1b;
    font-weight: 800;
}

.audit-no-source-timing {
    margin: 0;
}

.audit-error {
    color: #991b1b;
    max-width: 34rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-note {
    color: #92400e;
    max-width: 28rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.audit-expand-button {
    min-width: 5.5rem;
}

@media (max-width: 760px) {
    .audit-browser-summary {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

.analytics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 1rem 0;
}

.analytics-card {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    padding: 1rem;
}

.analytics-label {
    color: var(--odds-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.analytics-status {
    border-radius: 999px;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
}

.analytics-status-enabled {
    background: #dcfce7;
    color: #166534;
}

.analytics-status-disabled {
    background: #fee2e2;
    color: #991b1b;
}

.analytics-links a {
    text-decoration: none;
}

.analytics-config-list dt {
    font-weight: 800;
    margin-top: 0.75rem;
}

.analytics-config-list dd {
    color: var(--odds-muted);
    margin: 0.25rem 0 0;
}

.outright-card-list {
    gap: 1rem;
}

.outright-event-stack {
    background: #e5e7eb;
    border-radius: 22px;
    display: grid;
    overflow: hidden;
}

.outright-market-panel {
    border-radius: 22px;
}

.outright-market-panel-header {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 88px minmax(165px, 1fr) 140px;
    padding: 1rem 1rem 0;
}

.outright-market-heading {
    min-width: 0;
}

.outright-market-separator {
    background: #e5e7eb;
    height: 20px;
}

.outright-driver-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: 1fr;
    padding: 0.75rem 1rem 1rem;
}

.outright-driver-item {
    min-width: 0;
}

.outright-driver-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 14px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 118px auto;
    min-height: 54px;
    padding: 0.35rem 0.6rem;
}

.outright-driver-name {
    align-items: center;
    display: flex;
    gap: 0.55rem;
    min-width: 0;
}

.outright-driver-name strong {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outright-driver-name .team-placeholder {
    height: 22px;
    width: 22px;
}

.outright-driver-odds {
    border-radius: 12px;
    gap: 0.05rem;
    min-height: 46px;
    padding: 0.25rem 0.45rem;
}

.outright-driver-odds .odds-box-label,
.outright-driver-odds .odds-box-bookmaker {
    font-size: 0.66rem;
}

.outright-driver-odds .odds-box-value {
    font-size: 1.15rem;
}

.outright-details-button {
    justify-self: end;
    margin-top: 0;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
}

.outright-details {
    margin-top: 0.5rem;
}

@media (max-width: 760px) {
    .outright-market-panel-header {
        gap: 0.5rem;
        grid-template-columns: 1fr;
        padding: 0.75rem 0.75rem 0;
    }

    .outright-driver-grid {
        padding: 0.75rem;
    }

    .outright-driver-card {
        grid-template-columns: minmax(0, 1fr) 112px;
    }

    .outright-details-button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .outright-driver-name strong {
        white-space: normal;
    }
}

.f1-empty-state {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ---------- EV explainer ---------- */
/* Sits above the extra-odds modal, so its backdrop and panel need a higher stacking order. */

.ev-explainer-backdrop {
    background: rgba(15, 23, 42, 0.55);
    inset: 0;
    position: fixed;
    z-index: 1200;
}

.ev-explainer {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    left: 50%;
    max-height: 88vh;
    max-width: 560px;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.2rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 1210;
}

.ev-explainer-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.ev-explainer-header h2 {
    font-size: 1.05rem;
    margin: 0.15rem 0 0;
}

.ev-steps {
    display: grid;
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ev-step {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    padding: 0.7rem 0.75rem;
}

.ev-step-head {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.ev-step-head h3 {
    font-size: 0.92rem;
    margin: 0;
}

.ev-step-number {
    align-items: center;
    background: var(--odds-blue);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.ev-step-note {
    color: #64748b;
    font-size: 0.78rem;
    margin: 0 0 0.5rem;
}

.ev-bars {
    display: grid;
    gap: 0.3rem;
}

.ev-bar-row {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(70px, 1.2fr) auto;
}

.ev-bar-label {
    color: #334155;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-bar-track {
    background: #e2e8f0;
    border-radius: 999px;
    display: block;
    height: 12px;
    overflow: hidden;
}

.ev-bar-fill {
    border-radius: 999px;
    display: block;
    height: 100%;
    min-width: 2px;
}

.ev-bar-home { background: #2563eb; }
.ev-bar-away { background: #7c3aed; }
.ev-prob-model { background: #2563eb; }
.ev-prob-goals { background: #2563eb; }
.ev-prob-elo { background: #7c3aed; }
.ev-prob-market { background: #64748b; }
.ev-prob-blend { background: #0f766e; }

.ev-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 46px;
    text-align: right;
}

/* Distribution step. Bars are scaled to the tallest slice, not to 100%, so a distribution whose
   biggest bucket is under a fifth is still readable; the winning slices carry the colour. */
.ev-buckets {
    display: grid;
    gap: 0.25rem;
}

.ev-bucket-lose .ev-bar-fill { background: #cbd5e1; }
.ev-bucket-lose .ev-bar-label,
.ev-bucket-lose .ev-bar-value { color: #94a3b8; }

.ev-bucket-win .ev-bar-fill { background: #0f766e; }
.ev-bucket-win .ev-bar-label,
.ev-bucket-win .ev-bar-value { color: #0f766e; font-weight: 700; }

.ev-bucket-push .ev-bar-fill { background: #d97706; }
.ev-bucket-push .ev-bar-label,
.ev-bucket-push .ev-bar-value { color: #b45309; font-weight: 600; }

.ev-bucket-total {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    margin: 0.5rem 0 0;
}

.ev-bucket-total-win {
    background: #ccfbf1;
    border-radius: 999px;
    color: #0f766e;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.ev-bucket-total-push {
    background: #fef3c7;
    border-radius: 999px;
    color: #b45309;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
}

.ev-fixture {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.ev-fixture-side {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    display: grid;
    justify-items: center;
    min-width: 90px;
    padding: 0.4rem 0.5rem;
}

.ev-fixture-side strong {
    font-size: 1.15rem;
}

.ev-fixture-total {
    background: var(--odds-blue-soft);
    border-color: #93c5fd;
}

.ev-fixture-team {
    color: #64748b;
    font-size: 0.72rem;
    text-align: center;
}

.ev-fixture-plus {
    color: #94a3b8;
    font-size: 1.05rem;
    font-weight: 700;
}

.ev-elo-context {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.65rem 0;
}

.ev-elo-context span {
    align-items: baseline;
    background: #fff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    gap: 0.3rem;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    text-align: center;
}

.ev-elo-context strong {
    color: #6d28d9;
    font-size: 1rem;
}

.ev-elo-context small {
    color: #94a3b8;
    flex-basis: 100%;
}

.ev-hybrid-formula {
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #c4b5fd;
    border-radius: 9px;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.4rem;
    justify-content: center;
    margin: 0.55rem 0;
    padding: 0.55rem;
}

.ev-hybrid-formula strong {
    color: #0f766e;
    font-size: 1rem;
}

.ev-blend {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.ev-blend-bar {
    border-radius: 999px;
    display: flex;
    height: 14px;
    overflow: hidden;
}

.ev-blend-model { background: #2563eb; }
.ev-blend-market { background: #94a3b8; }

.ev-blend-legend {
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 0.75rem;
}

.ev-swatch {
    border-radius: 3px;
    display: inline-block;
    height: 10px;
    margin-right: 0.3rem;
    width: 10px;
}

.ev-swatch-model { background: #2563eb; }
.ev-swatch-market { background: #94a3b8; }

.ev-formula {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.ev-formula-part {
    background: #fff;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    display: grid;
    font-size: 0.95rem;
    font-weight: 600;
    justify-items: center;
    padding: 0.35rem 0.5rem;
}

.ev-formula-part small {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 400;
}

.ev-formula-op {
    align-self: center;
    color: #94a3b8;
    font-weight: 700;
}

.ev-formula-result {
    align-self: center;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem;
}

.ev-formula-result.ev-badge-positive { background: #dcfce7; }
.ev-formula-result.ev-badge-negative { background: #fee2e2; }

.ev-verdict {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.6rem 0 0;
    text-align: center;
}

.ev-fair-price {
    color: #475569;
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0.6rem 0 0;
    text-align: center;
}

.ev-fair-price strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.ev-fair-price span {
    color: #64748b;
}

.ev-disclaimer {
    color: #64748b;
    font-size: 0.74rem;
    margin: 0.9rem 0 0;
}

@media (max-width: 520px) {
    .ev-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ev-bar-track {
        grid-column: 1 / -1;
        order: 3;
    }

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

/* ---------------------------------------------------------------------------
   Visitor accounts: nav entry, sign-in page, profile page.
   --------------------------------------------------------------------------- */

.odds-nav-account {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

.odds-nav-account-link {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.5rem;
    max-width: 220px;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}

.odds-nav-account-link:hover,
.odds-nav-account-link:focus {
    background: #f8fafc;
    color: var(--odds-blue-dark);
}

.odds-nav-account-link span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.odds-nav-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 24px;
    object-fit: cover;
    width: 24px;
}

.account-panel {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgb(15 23 42 / 0.18);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 1.25rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.65rem);
    width: calc(100vw - 2rem);
    z-index: 1310;
}

.account-panel:focus {
    outline: none;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    max-width: 520px;
    padding: 2rem;
    width: 100%;
}

.auth-card h1 {
    margin-top: 0;
}

.auth-intro {
    color: #475569;
    margin-bottom: 0.9rem;
}

.auth-early-access {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #334155;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
}

.auth-early-access p {
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

.auth-early-access-title {
    align-items: center;
    color: var(--odds-blue-dark);
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.35rem !important;
}

.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-weight: 700;
    padding: 0.75rem;
}

.auth-providers {
    display: grid;
    gap: 0.75rem;
}

.auth-providers form {
    display: grid;
    gap: 0.85rem;
}

.auth-age-confirmation {
    align-items: flex-start;
    color: #475569;
    cursor: pointer;
    display: flex;
    font-size: 0.88rem;
    font-weight: 700;
    gap: 0.65rem;
    line-height: 1.4;
}

.auth-age-confirmation input {
    accent-color: var(--odds-blue);
    flex: 0 0 auto;
    height: 18px;
    margin: 0.05rem 0 0;
    width: 18px;
}

.auth-age-confirmation input:focus-visible {
    outline: 2px solid var(--odds-blue);
    outline-offset: 2px;
}

.auth-provider-button {
    align-items: center;
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    font-size: 0.98rem;
    font-weight: 800;
    gap: 0.7rem;
    justify-content: center;
    min-height: 48px;
    padding: 0.55rem 0.9rem;
    width: 100%;
}

.auth-provider-button:hover {
    background: #f8fafc;
}

.auth-provider-mark {
    align-items: center;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.auth-provider-google .auth-provider-mark {
    background: #ea4335;
}

.auth-provider-facebook .auth-provider-mark {
    background: #1877f2;
}

.auth-legal {
    color: #64748b;
    font-size: 0.82rem;
    margin: 1.5rem 0 0;
}

/* ---------------------------------------------------------------------------
   Profile: a full-width workspace with a section rail, not a centred card.
   The grids below can be a hundred rows of ten columns, which a 520px card
   cannot show — hence the shell rather than reusing .auth-card here.
   --------------------------------------------------------------------------- */
.profile-shell {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 250px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1500px;
    padding: 1.5rem 1rem 3rem;
    width: 100%;
}

.profile-nav {
    align-self: start;
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

.profile-nav-identity {
    align-items: center;
    border-bottom: 1px solid var(--odds-border);
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
}

.profile-nav-identity .profile-avatar {
    height: 48px;
    width: 48px;
}

.profile-nav-identity .profile-name {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.profile-nav-identity .profile-email {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.profile-nav-list {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-nav-link {
    align-items: center;
    border-radius: 10px;
    color: #334155;
    display: flex;
    font-weight: 700;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
}

.profile-nav-link:hover {
    background: #f1f5f9;
}

.profile-nav-link-active {
    background: #eff6ff;
    color: var(--odds-blue-dark);
}

.profile-nav-icon {
    font-size: 1rem;
    line-height: 1;
}

.profile-nav-badge {
    background: var(--odds-blue);
    border-radius: 999px;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
}

.profile-nav-signout {
    border-top: 1px solid var(--odds-border);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}

.profile-nav-signout .profile-button {
    width: 100%;
}

.profile-content {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    min-width: 0;
    padding: 1.5rem;
}

.profile-content h1 {
    font-size: 1.35rem;
    margin: 0 0 1.25rem;
}

.profile-section-title {
    font-size: 1.05rem;
    margin: 1.75rem 0 0.5rem;
}

/* The facts list keeps its dialog styling but spreads out here, where there is room. */
.profile-content .profile-facts {
    border-top: 0;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding-top: 0;
}

.profile-content .profile-facts > div {
    min-width: 0;
}

.profile-empty {
    color: #64748b;
    margin: 0;
}

.profile-note {
    background: #f8fafc;
    border-left: 3px solid var(--odds-border);
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
}

.profile-note-strong {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #166534;
}

/* --- Stat tiles ----------------------------------------------------------- */
.profile-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.profile-stat {
    background: #f8fafc;
    border: 1px solid var(--odds-border);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
}

.profile-stat-headline {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.profile-stat-label {
    color: #64748b;
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0.2rem 0;
}

.profile-stat-note {
    color: #64748b;
    display: block;
    font-size: 0.76rem;
}

.profile-value-up {
    color: #15803d;
}

.profile-value-down {
    color: #b91c1c;
}

/* --- Grids ---------------------------------------------------------------- */
.profile-grid-caption {
    color: #64748b;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

/* The wide tables scroll inside their own box rather than pushing the page sideways. */
.profile-grid-scroll {
    overflow-x: auto;
}

.profile-grid {
    border-collapse: collapse;
    font-size: 0.85rem;
    width: 100%;
}

.profile-grid th {
    border-bottom: 1px solid var(--odds-border);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.5rem 0.6rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-grid td {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.55rem 0.6rem;
    vertical-align: top;
}

.profile-grid tbody tr:hover {
    background: #f8fafc;
}

.profile-grid-strong {
    font-weight: 700;
}

.profile-grid-number {
    text-align: right;
    white-space: nowrap;
}

.profile-grid-note {
    color: #94a3b8;
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
}

.profile-grid-actions {
    white-space: nowrap;
}

.profile-grid-actions form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.profile-row-win td {
    background: #f0fdf4;
}

.profile-row-loss td {
    background: #fef2f2;
}

.profile-row-button {
    background: white;
    border: 1px solid var(--odds-border);
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.profile-row-button:hover {
    background: #e2e8f0;
}

.profile-row-button-win {
    border-color: #bbf7d0;
    color: #15803d;
}

.profile-row-button-loss {
    border-color: #fecaca;
    color: #b91c1c;
}

.profile-row-button-quiet {
    border-color: transparent;
    color: #94a3b8;
}

.profile-row-button-delete {
    border-color: #fecaca;
    color: #b91c1c;
}

.profile-row-button-delete:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.profile-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.profile-pill-armed {
    background: #eff6ff;
    color: var(--odds-blue-dark);
}

.profile-pill-done {
    background: #f1f5f9;
    color: #475569;
}

.profile-pill-win {
    background: #dcfce7;
    color: #15803d;
}

.profile-pill-loss {
    background: #fee2e2;
    color: #b91c1c;
}

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

    .profile-nav {
        position: static;
    }

    .profile-nav-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .profile-nav-link {
        justify-content: center;
    }

    .profile-content {
        padding: 1rem;
    }
}

@media (max-width: 620px) {
    .profile-nav-list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .profile-nav-link {
        justify-content: flex-start;
    }
}

.profile-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.profile-avatar-fallback {
    align-items: center;
    background: var(--odds-blue);
    color: white;
    display: inline-flex;
    font-size: 1.7rem;
    font-weight: 900;
    justify-content: center;
}

.profile-name {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.profile-email {
    color: #64748b;
    margin: 0.2rem 0 0;
}

.profile-facts {
    border-top: 1px solid var(--odds-border);
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding-top: 1.25rem;
}

.profile-facts dt {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.profile-facts dd {
    font-weight: 700;
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.profile-discord {
    align-items: center;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 1rem;
}

.profile-discord-copy {
    align-items: center;
    display: flex;
    gap: 0.85rem;
}

.profile-discord-mark {
    align-items: center;
    background: #5865f2;
    border-radius: 12px;
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.profile-discord h2 {
    color: #312e81;
    font-size: 1rem;
    margin: 0 0 0.25rem;
}

.profile-discord p {
    color: #475569;
    font-size: 0.88rem;
    margin: 0;
}

.profile-discord .profile-discord-error {
    color: #b42318;
    font-weight: 700;
    margin-top: 0.45rem;
}

.profile-discord-action {
    flex: 0 0 auto;
    margin: 0;
}

.profile-button-discord {
    background: #5865f2;
    text-decoration: none;
}

.profile-button-discord:hover {
    background: #4752c4;
}

.profile-button {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
    min-height: 42px;
    padding: 0.55rem 1.1rem;
}

.profile-button:hover {
    background: var(--odds-blue-dark);
}

.profile-danger {
    border: 1px solid #fecaca;
    border-radius: 12px;
    margin-top: 2rem;
    padding: 1rem;
}

.profile-danger h2 {
    color: #991b1b;
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.profile-danger p {
    color: #7f1d1d;
    font-size: 0.88rem;
    margin: 0 0 0.9rem;
}

.profile-button-danger {
    background: #b91c1c;
}

.profile-button-danger:hover {
    background: #991b1b;
}

@media (max-width: 760px) {
    .profile-discord {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-button-discord {
        text-align: center;
        width: 100%;
    }

    .profile-discord-action {
        width: 100%;
    }

    .odds-nav-account {
        padding-bottom: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Odds alerts: the bell beside a price, and the target dialog.
   --------------------------------------------------------------------------- */

/* Inside the extra-odds modal the bell and the bet ticket are flat children of .card-total-cell,
   alongside the price button and the EV badge. The ticket comes first, so it reads to the left. */
.odds-alert-trigger,
.odds-bet-trigger {
    background: transparent;
    border: 0;
    border-left: 1px dashed var(--odds-border);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.35rem 0.5rem;
}

.odds-alert-trigger:hover,
.odds-bet-trigger:hover {
    background: #eff6ff;
}

/* On the main grid .odds-box is a plain div shared with the landing page and the Formula 1
   outright cards, so the controls are positioned into its corner rather than restructuring the
   box — changing that rule would silently reflow both other surfaces. */
.odds-box-actionable {
    position: relative;
}

/* The strip spans the box so the bet ticket sits in the left corner and the bell in the right,
   rather than the two crowding one corner over the team tag between them. It is only a positioning
   frame, so it must not swallow pointer events in the gap — the tag beneath is ellipsised text the
   reader may want to select, and .odds-box has its own hover state. */
.odds-box-actions {
    display: flex;
    justify-content: space-between;
    left: 2px;
    pointer-events: none;
    position: absolute;
    right: 2px;
    top: 2px;
}

.odds-box-action {
    border-left: 0;
    border-radius: 999px;
    opacity: 0.55;
    padding: 0.15rem 0.25rem;
    pointer-events: auto;
}

.odds-box-action:hover,
.odds-box-action:focus-visible {
    background: #dbeafe;
    opacity: 1;
}

/* Above the EV explainer (1200/1210), since the dialog can be opened from inside it. */
.odds-alert-backdrop {
    background: rgb(15 23 42 / 0.45);
    inset: 0;
    position: fixed;
    z-index: 1300;
}

.odds-alert-dialog {
    background: var(--odds-card);
    border: 1px solid var(--odds-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(15 23 42 / 0.28);
    left: 50%;
    max-height: 90vh;
    max-width: 420px;
    overflow-y: auto;
    padding: 1.25rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    z-index: 1310;
}

.odds-alert-dialog:focus {
    outline: none;
}

.odds-alert-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.odds-alert-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.odds-alert-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.odds-alert-fixture {
    color: #64748b;
    margin: 0.35rem 0 1rem;
}

.odds-alert-current {
    background: #f8fafc;
    border-radius: 10px;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
}

.odds-alert-current dt {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.odds-alert-current dd {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0.15rem 0 0;
}

.odds-alert-current dd span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    margin-left: 0.4rem;
}

.odds-alert-label {
    display: block;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.odds-alert-input {
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    width: 100%;
}

.odds-alert-quick {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.odds-alert-quick-button {
    background: #f1f5f9;
    border: 1px solid var(--odds-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
}

.odds-alert-quick-button:hover {
    background: #e2e8f0;
}

.odds-alert-note,
.odds-alert-signin-note {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0.9rem 0 1rem;
}

.odds-alert-actions {
    display: flex;
    gap: 0.5rem;
}

.odds-alert-primary {
    background: var(--odds-blue);
    border: 0;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-weight: 800;
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    text-decoration: none;
}

.odds-alert-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.odds-alert-primary:hover:not(:disabled) {
    background: var(--odds-blue-dark);
}

.odds-alert-secondary {
    background: transparent;
    border: 1px solid var(--odds-border);
    border-radius: 10px;
    color: #475569;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    text-decoration: none;
}

.odds-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.75rem;
}

.odds-alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0.75rem;
}

/* The bet dialog reuses the alert dialog's chrome; only its own fields carry .bet-* rules. */
.bet-dialog {
    max-width: 440px;
}

.bet-fields {
    display: grid;
    gap: 0.75rem;
}

.bet-field .odds-alert-label {
    font-size: 0.85rem;
}

.bet-return {
    margin-top: 1rem;
}






.profile-danger-confirm {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b !important;
    font-weight: 700;
    padding: 0.7rem 0.8rem;
}

.profile-danger-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-button-quiet {
    background: transparent;
    border: 1px solid var(--odds-border);
    color: #475569;
}

.profile-button-quiet:hover {
    background: #e2e8f0;
}

/* The danger buttons are anchors in the first step and submits in the second; keep them identical. */
a.profile-button {
    display: inline-block;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.signin-dialog {
    max-width: 440px;
}

.signin-dialog .auth-intro {
    margin-top: 0.35rem;
}

.signin-dialog .auth-legal {
    margin-bottom: 0;
}

/* ===========================================================================
   Motion
   ---------------------------------------------------------------------------
   Timings and distances follow the ui-ux-pro-max motion presets: 150-300ms for
   feedback, ~2-4px of travel so a hover reads as response rather than movement,
   and a 30ms stagger so a list of cards resolves quickly rather than parading.

   Everything animates transform/opacity/box-shadow only — never width, height
   or margin — so it stays on the compositor and cannot reflow the odds grid.
   Every rule here is switched off under prefers-reduced-motion at the bottom.
   =========================================================================== */

:root {
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    /* Decelerating: quick to start, settles gently. The GSAP "power2.out" shape. */
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes odds-rise-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes odds-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@keyframes odds-fade-in {
    from { opacity: 0; }
}

@keyframes odds-pulse {
    50% { transform: scale(1.12); }
}

/* --- match cards: settle in on load -------------------------------------- */

/* fill-mode "both" holds the from-state before it starts, so nothing flashes at
   full opacity first. The opacity:0 lives only in the keyframe, so if the
   animation never runs the card simply renders normally. */
.match-card,
.landing-match-card {
    animation: odds-rise-in var(--motion-slow) var(--motion-ease-out) both;
}

/* No hover treatment on the card itself: it is an <article>, not a link, so a
   lift would promise a click that does not exist. The odds boxes and buttons
   inside it are the interactive parts and keep their own feedback. */

/* Stagger the first rows only. Beyond that the delay would outlast the scroll,
   so later cards arrive together rather than trickling. */
.match-card-list .match-card:nth-child(1) { animation-delay: 0ms; }
.match-card-list .match-card:nth-child(2) { animation-delay: 30ms; }
.match-card-list .match-card:nth-child(3) { animation-delay: 60ms; }
.match-card-list .match-card:nth-child(4) { animation-delay: 90ms; }
.match-card-list .match-card:nth-child(5) { animation-delay: 120ms; }
.match-card-list .match-card:nth-child(6) { animation-delay: 150ms; }
.match-card-list .match-card:nth-child(7) { animation-delay: 180ms; }
.match-card-list .match-card:nth-child(n+8) { animation-delay: 210ms; }

/* --- odds boxes: the existing hover, but no longer instant ---------------- */

.odds-box {
    transition: background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease;
}

/* --- dialogs and their backdrops ----------------------------------------- */

.odds-alert-dialog,
.account-panel,
.extra-odds-modal,
.ev-explainer {
    animation: odds-dialog-in var(--motion-base) var(--motion-ease-out) both;
}

.odds-alert-backdrop,
.extra-odds-backdrop,
.ev-explainer-backdrop {
    animation: odds-fade-in var(--motion-base) ease both;
}

/* --- controls: feedback on press and hover ------------------------------- */

.odds-alert-trigger,
.details-button,
.filter-button,
.profile-button,
.auth-provider-button,
.odds-alert-primary,
.odds-alert-secondary {
    transition: background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease,
                transform var(--motion-fast) var(--motion-ease-out),
                box-shadow var(--motion-fast) ease;
}

.details-button:active,
.filter-button:active,
.profile-button:active,
.auth-provider-button:active,
.odds-alert-primary:active {
    transform: scale(0.97);
}

/* The bell earns a little more, since arming an alert has no other confirmation
   at the moment of the click. */
.odds-alert-trigger:hover {
    transform: scale(1.15);
}

.odds-alert-trigger:active {
    animation: odds-pulse var(--motion-fast) var(--motion-ease-out);
}

/* --- honour the system preference ---------------------------------------- */

/* Not decoration: vestibular disorders make movement genuinely unpleasant, and
   the site is perfectly usable without any of the above. */
@media (prefers-reduced-motion: reduce) {
    .extra-odds-modal.team-details-modal {
        animation: none;
    }

    .match-card,
    .landing-match-card,
    .odds-alert-dialog,
    .account-panel,
    .extra-odds-modal,
    .ev-explainer,
    .odds-alert-backdrop,
    .extra-odds-backdrop,
    .ev-explainer-backdrop,
    .team-details-spinner,
    .odds-alert-trigger:active {
        animation: none;
    }

    .odds-box,
    .odds-alert-trigger,
    .details-button,
    .filter-button,
    .profile-button,
    .auth-provider-button,
    .odds-alert-primary,
    .odds-alert-secondary {
        transition: none;
    }

    .odds-alert-trigger:hover,
    .details-button:active,
    .filter-button:active,
    .profile-button:active,
    .auth-provider-button:active,
    .odds-alert-primary:active {
        transform: none;
    }
}